Dreamweaver 8 : mise en forme CSS d’un site (1/2)

I. Introduction à CSS avec Dreamweaver

Dans ce tutorial nous allons aborder la mise en forme d’une page web en utilisant CSS et Dreamweaver 8, alternative à la mise en forme traditionnelle par tableaux qui est devenue un peu obsolète. Vous allez donc apprendre à mettre en forme vos pages web sans connaissances en développement / programmation, via les outils que propose le logiciel Dreamweaver 8.

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 (voir le tutorial dreamweaver sur le gestionnaire de sites). 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

Cliquez ici pour accéder à la page 2/2 du tutorial >>

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*