Home Webmastring & Tutoriaux Dreamweaver Comment créer une page Web avec Dreamweaver CS4

Designed by:
web hosting
Comment créer une page Web avec Dreamweaver CS4 PDF Imprimer Envoyer
Note des utilisateurs: / 10
MauvaisTrès bien 
Webmastring et tutoriaux - Dreamweaver
Écrit par didrissi   
Lundi, 19 Avril 2010 02:44

Maintenant que vous avez fourni Dreamweaver avec les informations de base nécessaires pour qu'il puisse gérer votre site (voir tutoriel précédent), vous allez maintenant créer votre première page web.

Aux fins de ce tutoriel, nous allons créer une page web à deux colonnes. En 2 colonnes, je veux dire que la page aura deux colonnes verticales. Il s'agit d'une mise en page populaire parmi de nombreux sites Web, car il est à la fois économe en espace et familier aux utilisateurs (et en conséquence de cela, convivial). Une des colonnes est généralement utilisé pour tenir le logo du site  et le menu de navigation alors que l'autre colonne le contenu principal. Par exemple, si vous regardez à l'un des pages thesitewizard.com 'article s, comme celui que vous lisez, vous verrez que la colonne de gauche contient le les éléments de navigation tandis que la colonne de droite contient l'article lui-même.

  1. Cliquez sur "Fichier | Nouveau ...". Si vous vous rappelez ce que j'ai dit plus tôt, cela signifie de cliquer sur le menu "Fichier", suivie par le "Nouveau ..." point Dans le menu qui s'affiche. Une fenêtre avec le titre "Nouveau document" apparaît.

    The New  Document window in Dreamweaver
  2. Dans la colonne Disposition de la fenêtre, recherchez la ligne qui dit «liquide 2 colonne, barre latérale gauche, en-tête et pied de page". Sélectionnez cet élément en cliquant dessus une fois.

  3. Maintenant coup d'œil sur le côté droite de la même fenêtre et regarder pour le CSS élément "Layout". Il doit être quelque part près du bas de la fenêtre. Cliquez sur le menu déroulant et sélectionnez "Créer un nouveau fichier". Cela provoque Dreamweaver pour placer des informations de contrôle de la apparence de votre page Web (appelé "CSS") dans un fichier séparé. Nous voulons que ce parce que toutes les pages de votre site se partageront les même structure de base, et ayant de telles informations contenues dans un seul fichier permet d'économiser l'espace disque, bande passante et accélère le chargement de votre page web si vos visiteurs charger plusieurs pages de votre site web.

  4. Lorsque vous avez fini de faire ce qui précède, cliquez sur le bouton "Créer".

  5. Dreamweaver émettra une boîte de dialogue avec le titre "Enregistrer le fichier sous une feuille de style". Acceptez le nom par défaut et l'emplacement par en cliquant sur le bouton "Enregistrer".

  6. Une fois que vous avez fait cela, Dreamweaver va procéder pour créer une page web 2 colonne avec un contenu fictif tapé po

  7. Dreamweaver CS4 affiche un schéma légèrement différent de l'écran selon la taille de la résolution de votre moniteur est. Si votre résolution d'écran est grand, Dreamweaver peut démarrer dans ce qu'elle appelle le "Split" mode, qui est, il peut faire apparaître le sous-jacent "brut" code de votre page web dans la moitié supérieure de la fenêtre (le «Code» partie), et la version visuellement agréable (le "design" de la partie) dans la moitié inférieure. Si votre écran est plus petite, Dreamweaver va simplement démarrer dans "Design" mode, où seule la version visuellement agréable est affiché.

    Afin d'uniformiser l'apparence de la fenêtre Dreamweaver, pour des raisons de ce tutoriel, cliquez s'il vous plaît »Voir | Design" dans le menu si vous êtes dans le "Split" mode. Si vous n'êtes pas sûr de mode qui vous êtes, cliquez sur "Voir | Design" de toute façon, aucun mal ne lui sera de le faire. Cette modifie la disposition de "Design" mode, où seulement votre page web, tel qu'il apparaît dans un navigateur, s'affiche. Ne vous inquiétez pas. Si à tout moment, vous vous sentez nostalgique de l'original "Split" mise en page, il suffit d'utiliser "Voir | Code et Design" dans le menu pour le récupérer. Notez, cependant, que toutes les étapes de ce tutoriel, ainsi que les captures d'écran, supposons que vous êtes dans le "Design", donc si vous ne changez pas, vous pourriez devenir confus plus tard, quand l'écran ne semble pas la façon dont je le décris.

Mise à jour le Lundi, 19 Avril 2010 02:49