Chargement de la page en cours... 


Creation des site avec dreamweaver

voila mon mise ajour sur

 
 
voila mon mise ajour sur la methode du travail avec se super logiciel de creation des site ....
 
avec setof il faut attender toujour le 9

II. Explications

1. Quelques préalables


Avant d'entrer dans le vif du sujet, il convient de respecter quelques étapes préalables au bon déroulement de tout projet :


  • Préparez sur une feuille libre la maquette de la page web, ou si vous effectuez un travail sur demande d'un tiers, examinez attentivement la maquette qui vous est soumise. Pour ce tutorial j'ai reporté au propre le croquis sommaire ci-dessous :


tutorial dreamweaver site en css image 1


Notre page sera constituée de 3 parties principales :


- la partie supérieure de 800 x 90 pixels pour le logo

- la partie centrale de 800 x 500 pixels comprenant elle-même une partie navigation de 140 x 500 et une partie contenu de 660 x 50

- la partie inférieure de 800 x 24 pixels pour le pied de page


  • Préparez ensuite les fichiers dont vous aurez besoin (images ou autres) dans le logiciel graphique de votre choix. Pour l'exercice je n'ai préparé qu'une seule image, qui sera le logo du site, aux dimensions spécifiées dans la maquette, soit 800 x 90 pixels :

tutorial dreamweaver site en css image 2



  • Ensuite créez un répertoire sur votre disque dur pour votre site (je l'ai appelé "Site test") dans lequel vous créez un autre répertoire appelé Images dans lequel vous déplacez les images prélablement créés. Enfin préparez votre site dans Dreamweaver Vous devriez avoir la structure suivante au final dans l'explorateur de fichiers :

tutorial dreamweaver site en css image 3

2. Création de la page


Cliquez sur la racine de votre site dans l'explorateur de fichier de Dreamweaver ("Site - Site test") pour le sélectionner. Dans le menu Fichier sélectionnez Nouveau. Dans l'onglet Général de la boîte de dialogue, choisissez Page de base/HTML. Cliquez sur Créer.


Une page sans nom est créée. Dans le menu Fichier sélectionnez Enregistrer. La boîte de dialogue doit normalement pointer sur le répertoire de votre site. Nommez la page Index.html et enregistrez.


Dans l'exporateur de fichiers le nouvel élément apparaît :


tutorial dreamweaver site en css image 4


Dans la zone de texte de Titre nommez la page "Mon site test" (ou tout nom qui vous convient). C'est le nom de votre page qui apparaîtra dans le navigateur des internautes :


tutorial dreamweaver site en css image 5



3. Création et positionnement des calques


Dans la barre d'outils sélectionnez Mise en forme :


tutorial dreamweaver site en css image 6


La page Index.html étant sélectionnée et en mode Création, cliquez sur Dessiner un calque :


tutorial dreamweaver site en css image 7

Dessinez ensuite trois calques sur la page (pensez à cliquez sur Dessiner un calque après chaque création) :


tutorial dreamweaver site en css image 8


Sélectionnez le premier calque en cliquant sur une de ses bordures. Le calque est sélectionné quand apparaisseent les poignées de redimensionnement et la fenêtre propriétés du calque :


tutorial dreamweaver site en css image 9


Vous pouvez également sélectionner les calques en cliquant sur leur nom dans la fenêtre calque. Dans le menu Fenêtre validez l'option Calque si nécessaire. Dans la liste des calques sélectionnez celui sur lequel vous désirez travailler (dans la copie d'écran ci-après les calques sont déjà renommés et ne correspondent donc pas à ce stade du tutorial) :


tutorial dreamweaver site en css image 10



Dans la fenêtre propriétés modifiez ainsi :


ID de calque : Logo

G : 20 px (position par rapport au bord gauche de la page)

S : 20px (position par rapport au bord supérieur de la page)

L : 800px (largeur)

H : 90px (hauteur)


tutorial dreamweaver site en css image 11


Faites de même avec le deuxième calque en modifiant comme suit :


ID de calque : Centre

G : 20 px

S : 111px

L : 800px

H : 500px


Puis avec le troisième calque :


ID de calque : Pied_de_page

G : 20 px

S : 612px

L : 800px

H : 24px


Vous devriez obtenir ceci :


tutorial dreamweaver site en css image 12


La prochaine étape consiste à créer des calques à l'intérieur du calque central.


Cliquez sur la page en dehors des calques pour vous assurer que tout est désélectionné. A l'aide du bouton Dessiner un calque et créez deux nouveaux calques côte à côte dans le calque Centre et modifiez leurs propriétés ainsi :


Calque de gauche :


ID de calque : Navigation

G : 0px

S : 0px

L : 140px

H : 500px


Calque de droite :


ID de calque : Contenu

G : 140px

S : 0px

L : 660 px

H : 500 px




Le résultat est le suivant :




tutorial dreamweaver site en css image 13


Si la séparation de deux calques est en pointillés c'est que ceux-ci se chevauchent. Dans l'exemple les calques que nous venons de créer se chevauchent d'un pixel.


Si vous basculez en mode code vous pourrez observer le code généré par Dreamweaver pour créer le style de notre page :


tutorial dreamweaver site en css image 14


4. Mise en couleur et ajout d'images aux calques


Vous allez d'abord modifier la couleur d'arrière-plan de la page Index.html. Cliquez en dehors des calques pour vous assurer que rien n'est sélectionné. Dans le menu Modifier choisissez Propriétés de la page et fixez sa couleur d'arrière plan à noir :


tutorial dreamweaver site en css image 15


A partir de l'explorateur de fichiers de Dreamweaver faîtes glisser le fichier image de votre logo dans le calque Logo :


tutorial dreamweaver site en css image 16


Sélectionnez le calque Navigation. Dans sa fenêtre propriétés fixez sa couleur d'arrière plan à #9999CC (ou toute autre couleur de votre choix) :


tutorial dreamweaver site en css image 17


Sélectionnez le calque Contenu et fixez sa couleur d'arrière plan à #CCCCFF (ou toute autre couleur de votre choix).


Sélectionnez le calque Pied_de_page et fixez sa couleur d'arrière plan à #666699 (ou toute autre couleur de votre choix).


Le résultat devrait être le suivant :


tutorial dreamweaver site en css image 18



III. Conclusion du tutorial

5. Ajouter du texte aux calques


Cliquez à l'intérieur du calque Contenu et tapez le texte "Ceci est la page d'acceuil de mon site.".


Cliquez à l'intérieur du calque Pied_de_page et tapez "Copyright Mon_site.com 2006".


Cliquez à l'intérieur du calque Navigation et tapez les mots "Acceuil" " Services" et "Liens" l'un à la suite de l'autre, séparés par un espace. Il est important d'utiliser la barre d'espace, et non pas la touche Entrée entre les mots :


tutorial dreamweaver site en css image 19


Ces mots serviront à créer notre menu de navigation, mais au prélable nous devons créer plus de pages. Enregistrez votre travail (menu Fichier/Enregistrer tout). Dans la fenêtre fichiers faites un clic droit sur Index.html. Dans le menu contextuel choisissez Edition/Dupliquer (raccourci clavier : CTR/D) et renommer la copie "Service.html".


Faîtes une nouvelle duplication que vous nommez "Liens" :


tutorial dreamweaver site en css image 20


Double cliquez sur Services.html pour faire apparaître la page dans la fenêtre de création et modifiez le texte du calque contenu ainsi : "Ceci est la page Services de mon site".


Faites de même avec la page Liens en modifiant le texte ainsi : "Ceci est la page liens de mon site".


Enregistrez votre travail.

www.setof.c.la



6. Créer des liens


Dans la fenêtre création cliquez sur l'onglet de la page Index.html. Dans le calque Navigation sélectionnez le mot Accueil en prenant garde de ne pas sélectionner l'espace qui suit le mot. Dans la fenêtre Propriétés cliquez sur le bouton Pointer vers un fichier à droite de la zone de texte de Lien et faîtes le glisser sur Index.html dans la fenêtre Fichiers :


tutorial dreamweaver site en css image 21


Créez un lien de la même manière vers la page Services pour le mot Services et vers la page Liens pour le mot Liens.


Répétez l'opération pour les pages Services et Liens. Prenez garde de ne jamais sélectionner l'espace séparant les mots :


tutorial dreamweaver site en css image 22


Enregistrez les modifications et testez la navigatoin entre les pages dans votre navigateur en cliquant sur le bouton Aperçu dans le navigateur :


tutorial dreamweaver site en css image 23



7. Mise en forme du texte à l'aide d'une feuille de style CSS


Commencez par créer une page de style CSS : menu Fichier/Nouveau/Onglet général/Page de base/CSS. Enregistrez la page sous le nom Mon_site_test.css (menu Fichier/Enregistrer).


Double cliquez sur Mon_site_test.css pour la faire apparaître en mode code et tapez le code suivant :


tutorial dreamweaver site en css image 24


Le style étant créé il faut maintenant lier la feuille de style à notre page. Faîtes apparaître la page Index.html dans la fenêtre Création. Dans ses Propriétés cliquez sur le bouton de la liste déroulante Style et choisisssez Joindre la feuille de style :


tutorial dreamweaver site en css image 25


Dans la boîte de dialogue cliquez sur le bouton Parcourir et sélectionnez le fichier Mon_site_test.css.


Dans la page Index.html sélectionnez le texte "Ceci est la page d'accueil de mon site." . Dans la fenêtre propriétés choisissez Paragraphe dans la liste déroulante Format :


tutorial dreamweaver site en css image 26


En choisissant cette option nous appliquons le style p à notre texte. Répétez cette opératoin pour les deux autres pages.


Nous allons maintenant créer un style de texte gras.


Dans le fenêtre CSS (menu Fenêtre/Styles CSS si la fenêtre n'est pas apparente) cliquez sur le bouton Nouveau style :


tutorial dreamweaver site en css image 27



Complétez la boîte de dialogue ainsi et cliquez sur OK :



tutorial dreamweaver site en css image 28



Renseignez ensuite la catégorie Type de la façon suivante et cliquez sur OK :



tutorial dreamweaver site en css image 29



Dans la page Index.html sélectionnez le mot Accueil et choisissez Gras dans la liste déroulante Style :


tutorial dreamweaver site en css image 30


Le résultat est le suivant :


tutorial dreamweaver site en css image 31


Faîtes la même chosepour les pages Liens et Services.

www.setof.c.la


8. Mise en forme du menu de navigation à l'aide de la feuille de style CSS


Dans le fenêtre CSS (menu Fenêtre/Styles CSS si la fenêtre n'est pas apparente) cliquez sur le bouton Nouveau style.


Complétez la boîte de dialogue ainsi et cliquez sur OK :


tutorial dreamweaver site en css image 32


Renseignez ensuite la catégorie Type de la façon suivante et cliquez sur OK :

www.setof.c.la


tutorial dreamweaver site en css image 33



Puis fixez la couleur d'arrière-plan à #9999CC :


tutorial dreamweaver site en css image 34


Dans la fenêtre Fichiers double cliquez sur Mon_site_test.css pour le faire apparaître dans la fenêtre Création. Dans la fenêtre CSS cliquez sur .Navigation pour faire apparaître ses propriétés puis sur le bouton Afficher sous forme de liste :

www.setof.c.la


tutorial dreamweaver site en css image 35


Cherchez la propriété Display et fixez la à Block. Puis cherchez Width et tapez 140.


Dans le calque Navigation sélectionnez le mot Accueil. Dans le fenêtre Propriétés faîtes dérouler la liste Style et sélectionnez Navigation :


tutorial dreamweaver site en css image 36


Répétez l'opération avec les mots Services et Liens :


tutorial dreamweaver site en css image 37



Répétez ensuite l'opération pour les pages Liens et Services.


Nous allons maintenant ajouter un effet sur les options du menu lorsque le pointeur de la souris les survole.


Faîtes apparaître la page Mon_site_test.css dans la fenêtre Code. Faîtes un copier/coller le code du style .Navigation :


tutorial dreamweaver site en css image 38



Modifiez le code que vous venez de coller ainsi :


tutorial dreamweaver site en css image 39



Enregistrez les modifications et lancez un aperçu dans votre navigateur :


tutorial dreamweaver site en css image 40



III. Conclusion du tutorial

Vous l'avez constaté, nous avons utilisé CSS tant pour mettre en forme nos pages web que pour appliquer un style au contenu des pages.

Dans ce dernier exemple nous pouvons relever que les modifications apportées au style .Navigation sont immédiatement appliquées au texte se référant à ce style, sans avoir à modifier chacun des mots du menu de navigation sur chacune des pages de notre site. Les feuilles de style CSS présentent donc un intérêt indéniable.

Merci d'avoir pris le temps de lire ce tutorial jusqu'à son terme.


 


 


 

et avant terminer notre super leçon je vous prese'nte mes ami(e) des video explicative tres proche qui va vous aider a creer un super site de votre choix quant a moi (setof) je vai realiser un grand site ou vous pouver trouver tous se que vous desirer enchalah  abientot et arevoir...


 


 


 

http://meskellil5.ifrance.com/dreamweaverMx2004/Dreamweaver.swf


 


http://tarzan.2004.ifrance.com/tutodream1/tutodream1.html
 
 
http://tarzan.2004.ifrance.com/tutodream2/tutodream2.html
 
 
http://tarzan.2004.ifrance.com/tutodream3/tutodream3.html
 
 
http://tarzan.2004.ifrance.com/tutodream4/tutodream4.html
 
 
http://tarzan.2004.ifrance.com/tutodream5/tutodream5.html
 
 
http://tarzan10.ifrance.com/fondsonordreamw/fondsonordreamw.html
 
 
http://tarzan.2004.ifrance.com/inserervideo/inserervideo.html


 et pour finir  Voila le Logiciel Dreamweaver 8 a telecharger :
 

Merci Setof
 

signer setof