Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l’usage des CSS pour la réalisation des mises en page. Les mises en page CSS (par opposition aux modèles en tableau) permettent de réduire la taille des fichiers, de gérer plus facilement le code et de se conformer aux normes. Deux composants élémentaires régissent la mise en page CSS : - une série de règles CSS qui définissent les dimensions et le format des éléments principaux de la page, - une série correspondante de balises HTML (en général ) qui déterminent l’ossature de la page.

A. Créer la page et définir la balise : A partir d’un document HTML vide, on crée une règle pour la balise 1. Choisir Fichier  Nouveau Dans la boîte Nouveau document, choisir (de gauche à droite) : - page vierge, - type de page : HTML, - mise en forme : - cliquer sur le bouton Créer. 2. Enregistrer la page dans le répertoire de travail choisi : Fichier  Enregistrer sous… 3. Choisir Fenêtre  Styles CSS Dans le panneau Styles CSS, cliquer sur le bouton Tous 4. En bas du panneau Styles CSS, cliquer sur nouvelle règle de CSS On commence par définir un canevas neutre pour la mise en page, en déclarant une règle CSS pour la balise en premier 5.

Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Balise, - Balise : body - Sélectionner l’option Définir dans : Seulement ce document. - Cliquer sur OK.

Une fois la mise en page terminée, les règles CSS seront toutes exportées vers une feuille de style externe (fichier *.css). Le document créé ici comprend : - un fond blanc, - une zone centrée de 760 pixels contenant : * une zone entête avec : . une zone logo (en haut), . une zone navigation (au milieu), . une zone bannière (en bas), * une zone principale avec : . une colonne gauche, . une colonne droite, * un pied de page. 1

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

6. Dans la boîte de dialogue Définition de règles de CSS pour body : - cliquer sur Catégorie : Arrière plan (colonne de gauche), - cliquer sur Couleur d’arrière blanc : blanc = #FFFFFF - cliquer sur Catégorie : Bloc, - dans la liste déroulante Alignement de texte : centrer - cliquer sur Catégorie : Boîte, - dans la zone Remplissage, taper 0 (zéro) dans le champ Haut, - dans la zone Marge, taper 0 (zéro) dans le champ Haut, - cliquer sur le bouton OK.

La mise en page en construction sera centrée dans la fenêtre du navigateur mais le texte sera aligné à gauche. Pour que la mise en forme soit homogène dans les navigateurs plus anciens, comme Internet Explorer 5, on attribue la valeur center à la propriété d’alignement du texte dans la balise supérieure . Une autre règle CSS alignera le texte à gauche pour les éléments situés dans un conteneur. CSS obtenu : body { background-color: #FFFFFF; text-align: center; margin: 0px; padding: 0px; } 2

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

B. Définir le conteneur externe : Une technique standard pour la création de mises en page CSS consiste à employer une balise pour y placer toutes les autres balises et le contenu.

La déclaration d’un unique conteneur externe définit une règle qui fixe les réglages généraux, comme la largeur globale et l’alignement de la mise en page. On va créer une règle CSS utilisant un sélecteur ID (défini par un # en début de nom). Rappel : un sélecteur ID ne peut être utilisé qu’une seule fois par page HTML (contrairement aux classe). 1. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 2. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #conteneur, - Sélectionner l’option Définir dans : Seulement ce document, - Cliquer sur OK.

3. Dans la boîte de dialogue Définition de règles de CSS pour #conteneur : - cliquer sur Catégorie : Bloc (colonne de gauche), - dans la liste déroulante Alignement du texte : gauche 3

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

- cliquer sur Catégorie : Boîte (colonne de gauche), - dans le champ Largeur : 760 pixels, - dans la zone Marge, décocher l’option Idem pour tous, dans le champ Haut : 0 (zéro), dans le champ Droite : auto, dans le champ bas : 0 (zéro), dans le champ Gauche : auto, - cliquer sur OK. 4. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div - Insérer : Au point d’insertion, - Dans la liste ID : conteneur, - Cliquer sur OK.

La nouvelle est ajoutée sur la page HTML. CSS obtenu : #conteneur { text-align: left; width: 760px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } Cette mise en page utilise une largeur définie de 760 pixels pour les résolutions d’écran de 800x600 pixels. Pourquoi ne pas utiliser 800 pixels ? Les 40 pixels supplémentaires sont utilisés pour les côtés du navigateur et notamment toutes les barres de défilement. Si la fenêtre du navigateur est plus large (résolution d’écran plus élevée), la largeur supplémentaire est automatiquement répartie dans les marges gauche et droite.

4

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

C. Définir les divisions principales : La structure de la page peut être divisée en trois zones principales : - entête, - contenu principal, - pied de page. Chacune de ces zones nécessite une règle CSS et une balise distincte. Pour chaque zone, on utilisera un sélecteur ID unique. En premier, on définit la règles CSS #entete : 1. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 2. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #entete, - Sélectionner l’option Définir dans : Seulement ce document, - Cliquer sur OK.

3. Dans la boîte de dialogue Définition de règles de CSS pour #entete : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans la zone Marge, décochez l’option Idem pour tous, - dans le champ Haut : 12, - dans le champ Bas : 12, - cliquer sur OK.

#entete CSS obtenu : #entete { margin-top: 12px; margin-bottom: 12px; } Il n’est pas nécessaire de déclarer une largeur car, par défaut, la balise s’étend afin de remplir son conteneur #conteneur 5

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Deuxièmement, on définit la règles CSS #principal : 4. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 5. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #principal, - Sélectionner l’option Définir dans : Seulement ce document, - Cliquer sur OK. 6. Dans la boîte de dialogue Définition de règles de CSS pour #principal : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans la zone Remplissage, décochez l’option Idem pour tous, - dans le champ Haut : 0 (zéro), - dans la zone Marge, décochez l’option Idem pour tous, - dans le champ Haut : 0 (zéro), - cliquer sur OK.

#principal CSS obtenu : #principal { margin-top: 0px; padding-top: 0px; } 6

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Troisièmement, on définit la règles CSS #piedpage : 7. Dans le panneau Styles CSS, choisir le style #entete, faire un clic droit et choisir Dupliquer dans le menu déroulant, dans la boîte de dialogue, taper #piedpage dans le champ sélecteur, cliquer sur OK. 8. Dans le panneau style CSS, choisir le style #piedpage, dans le volet Propriétés (au-dessous), cliquer sur Ajouter une propriété, dans le cadre qui apparaît, taper : clear, appuyer sur la touche et dans le cadre, taper : both CSS obtenu : #piedpage { margin-top: 12px; margin-bottom: 12px; clear: both; } La propriété clear est utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant.

Cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente : - left : place l'élément en bas juste à droite de celui qui le précède dans le code source. - right : place l'élément en bas juste à gauche de celui qui le précède dans le code source. - both : ici la boîte générée se déplace sous chacune des boîtes flottantes qui précèdent dans le code source. - none : rien n'est affecté par rapport aux éléments flottants ; n'influence pas le positionnement en cours. La propriété CSS clear : both garantit qu’aucun élément flottant ne viendra interférer avec le #piedpage.

La zone #principal (au-dessus) contiendra deux balises flottantes.

7

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Après avoir défini les règles CSS pour les 3 divisions principales de la mise en page, on peut les ajouter à la page. 9. Sélectionner le texte de remplissage Placez ici le contenu de id "conteneur" et appuyer sur Suppr. 10. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après le début de la balise  , - Dans la liste ID : entete, - Cliquer sur OK.

11. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise  , - Dans la liste ID : principal, - Cliquer sur OK.

12. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise  , - Dans la liste ID : piedpage, - Cliquer sur OK.

Code HTML obtenu : Placez ici le contenu de id "entete" Le #entete se trouve à l’intérieur du #conteneur. Code HTML obtenu : Placez ici le contenu de id "entete" Placez ici le contenu de id "principal" Code HTML obtenu : Placez ici le contenu de id "entete" Placez ici le contenu de id "principal" Placez ici le contenu de id "piedpage" A chaque choix dans la liste ID, seuls les sélecteurs qui n’ont pas été attribués sont disponibles. Ainsi Dreamweaver empêche de réutiliser un règle CSS d’ID dans la même page. 8

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

D. Ajouter des zones de contenu : La mise en page peut être utilisée telle quelle mais, pour structurer la page plus finement, des zones de contenu supplémentaires peuvent s’imbriquer à l’intérieur des balises déjà créées.

Pour commencer, la zone entete sera divisée en 2 zones l’une au-dessus de l’autre : - banniere, - menu. 1. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 2. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #banniere, - Sélectionner l’option Définir dans : Seulement ce document, - Cliquer sur OK.

3. Dans la boîte de dialogue Définition de règles de CSS pour #banniere : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans le champ Hauteur : 80, - dans la zone Remplissage, décochez l’option Idem pour tous, - dans le champ Bas : 12, - cliquer sur OK. 4. Dans le panneau Styles CSS, choisir le style #banniere, faire un clic droit et choisir Dupliquer dans le menu déroulant, dans la boîte de dialogue, taper #menu dans le champ sélecteur, cliquer sur OK.

#banniere #menu CSS obtenu : #banniere { height: 80px; padding-bottom: 12px; } 9

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

5.

Dans le panneau style CSS, choisir le style #menu, dans le volet Propriétés (au-dessous), modifier la valeur height : 28, sélectionner la propriété padding-bottom et appuyer sur Suppr, 6. Sélectionner le texte de remplissage Placez ici le contenu de id "entete" et appuyer sur Suppr. 7. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après le début de la balise  , - Dans la liste ID : banniere, - Cliquer sur OK.

8. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise  , - Dans la liste ID : menu, - Cliquer sur OK. CSS obtenu : #menu { height: 28px; } Code HTML obtenu : Placez ici le contenu de id "banniere" … Code HTML obtenu : Placez ici le contenu de id "entete" Placez ici le contenu de id "menu" … 10

Ensuite, la zone principal sera divisée en 2 zones : - gauche, - droite. 9. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 10. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #gauche, - Sélectionner l’option Définir dans : Seulement ce document, - Cliquer sur OK.

11. Dans la boîte de dialogue Définition de règles de CSS pour #gauche : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans le champ Largeur : 365, - dans la liste Flottante : gauche, - cliquer sur OK.

12. Dans le panneau Styles CSS, choisir le style #gauche, faire un clic droit et choisir Dupliquer dans le menu déroulant, dans la boîte de dialogue, taper #droite dans le champ sélecteur, cliquer sur OK. #gauche CSS obtenu : #gauche { float: left; width: 365px; } #droite CSS obtenu : #droite { float: right; width: 365px; } 11

13. Dans le panneau style CSS, choisir le style #droite, dans le volet Propriétés (au-dessous), modifier la valeur float : right. 14. Sélectionner le texte de remplissage Placez ici le contenu de id "principal" et appuyer sur Suppr.

15. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après le début de la balise  , - Dans la liste ID : gauche, - Cliquer sur OK.

16. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise  , - Dans la liste ID : menu, - Cliquer sur OK. Les zones gauche et droite (respectivement flottante à gauche et à droite) étant définies chacune avec une largeur de 365 pixels, l’espace restant entre elles est donc de 30 pixels soit 760 – (365 x 2) . Code HTML obtenu : … Placez ici le contenu de id "gauche" … gauche Code HTML obtenu : … Placez ici le contenu de id "gauche" Placez ici le contenu de id "droite" … droite 12

E.

Insérer des espaces réservés : Pour faciliter la visibilité de la mise en page avant utilisation, on peut ajouter des espaces réservés plus visuels : - espace réservé pour les images, - texte de remplissage pour les zones de texte. 1. Sélectionner le texte de remplissage Placez ici le contenu de id "banniere" et appuyer sur Suppr. 2. Dans la barre Insérer, catégorie Commun, liste déroulante Image cliquer sur Espace réservé pour l’image 3. Dans la boîte de dialogue Espace réservé pour l’image : - Nom : banniere, - Largeur : 760, - Hauteur : 80, - cliquer sur OK 4. Sélectionner le texte de remplissage Placez ici le contenu de id "menu" et appuyer sur Suppr.

5. Dans la barre Insérer, catégorie Commun, liste déroulante Image cliquer sur Espace réservé pour l’image 6. Dans la boîte de dialogue Espace réservé pour l’image : - Nom : menu, - Largeur : 760, - Hauteur : 28, - cliquer sur OK L’espace réservé menu peut être créé avec Fireworks sous forme de menu image découpé avec des tranches pour le convertir en tableau HTML. Ce tableau peut être ensuite importé dans le directement et conservera l’assemblage prévue dans Fireworks.

28 menu 13

Le placement du texte de remplissage peut se faire de la façon suivante. 7. Avec l’outil Texte, placer le curseur dans le texte Placez ici le contenu de id "gauche", dans la barre sélecteur de balise (en-dessous de la fenêtre de mise en page), sélectionner appuyer sur la touche de déplacement à gauche pour déplacer le curseur avant la balise Taper le texte Titre principal et dans l’inspecteur de propriétés (en bas), choisir Format : En-tête 1 8. Sélectionner le texte de remplissage Placez ici le contenu de id "gauche" et appuyer sur Suppr, Taper Sous-titre et dans l’inspecteur de propriétés, choisir Format : En-tête 2, Appuyer sur la touche Entrée pour créer un retour à la ligne.

9. Ouvrir l’aide de Dreamweaver, sélectionner un paragraphe de texte au hasard dans un chapitre le copier et le coller à la suite du Sous-titre 10. Le curseur étant placé dans la zone gauche, tout sélectionner puis copier Se placer dans la zone droite et coller 11. Pour la zone piedpage, le texte déjà présent est suffisamment explicite mais on peut prévoir un texte selon la destination prévue pour cette zone.

Au final, l’écran de Dreamweaver devrait ressembler à l’image ci-dessous, On a ainsi un aperçu de la mise en page du futur site. Dans Dreamweaver, la commande Sélectionner tout sélectionne tout le contenu du conteneur où l’on se trouve. Ici il s’agit d’un mais cela fonctionne dans la cellule d’un tableau, dans un cadre… Si on utilise la commande plusieurs fois, on monte d’un niveau chaque fois : 1. le contenu du , 2. le , 3. le contenu du , 4. le , 5. … En dernier lieu, après avoir remonté toute la série d’imbrications, on sélectionne toute la page. 14

Schéma des zones imbriquées Chaque ID ( commence par #, lors de la définition du style CSS ) est unique dans la page.

Le conteneur fixe la largeur et toutes les zones à l’intérieur (sauf gauche et droite) remplissent celui-ci en largeur. Les zones gauche et droite sont flottante dans la zone principal, l’une à gauche, l’autre à droite et chacune a une largeur fixe qui correspond à la moitié de la largeur du conteneur, l’espace entre les deux étant déduit. Les zones gauche et droite peuvent être dissymétriques ( plus large à gauche ou plus large à droite ).  style pour la balise body ID : #conteneur (largeur : 760 pixels, centré) ID : #entete ID : #banniere (hauteur fixée pour image) ID : #menu (hauteur fixée pour menu image ou texte) ID : #principal ID : #piedpage ID : #gauche ID : #droite 15

Vous pouvez aussi lire