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.

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 :

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 :

• 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 :

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 :

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 :

3. Création et positionnement des calques

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

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

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

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 :

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) :

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)

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 :

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 :

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 :

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 :

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

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) :

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 :

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