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

F. Exporter les styles CSS : La mise en page qui vient d’être créée contient les styles dans son propre code. Pour l’utilisation dans un site de production avec plusieurs pages utilisant le même modèle, il est recommandé d’utiliser une feuille de style CSS externe qui pourra être partagée par toutes les pages du site. Ainsi les modifications seront plus rapides. On peut donc déplacer les styles créés précédemment dans un fichier externe. 1. Dans le panneau Styles CSS, sélectionner le premier style (body), appuyer sur la touche Maj et sélectionner le dernier style (#droite) 2. Dans le menu Options du panneau Styles CSS, choisir Déplacer les règles CSS 3. Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionner l’option Déplacer les règles dans : Nouvelle feuille de style, cliquer sur OK 4. Dans la boîte de dialogue Enregistrer sous, choisir la destination et le nom du fichier *.css (de préférence dans un dossier style, dans le même dossier que la page HTML). 5. Dans le panneau Styles CSS, sélectionner la première ligne ( ), appuyer sur la touche Suppr.

Dreamweaver a déplacé les styles CSS de la balise , les lignes … vers la nouvelle feuille de style externe et créé le lien dans le code HTML : dans la balise , la ligne : Chaque page doit avoir un titre pour la différencier des autres pages du site et, lors de la mise en ligne du site, pour permettre aux moteurs de recherche d’afficher un nom différent pour chaque page référencée. • Dans la barre d’outils Document, dans le champ Titre, entrer un nom pour la page en cours 16

G. Ajout et utilisation de styles CSS : La mise en page évoluée va nécessiter de créer de nouveaux styles CSS pour les titres, sous-titres et paragraphes. L’utilisation du panneau Propriétés (en bas) permet de modifier les formats du texte ou des objets de la page en cours de création mais ces modifications n’affectent que la page en cours. Si l’on souhaite conserver les styles CSS pour appliquer à plusieurs zones de la page ou à d’autres pages, il vaut mieux appliquer des styles qui seront stockés dans une feuille de styles externe.

Le réglage de base de Dreamweaver pour utiliser les styles CSS se fait dans les préférences : - Menu Edition  Préférences, - Catégorie : Général, - cocher la case Options d’édition : Utiliser des balises CSS au lieu de balises HTML, - cliquer sur OK. Pour appliquer le style CSS à plusieurs reprises dans la page, on utilise une classe (lors de la définition, le nom commence par un point) comme type de sélecteur. On peut stocker tous les styles dans la même feuille de style ou alors créer plusieurs feuilles de styles en séparant l’utilisation que l’on souhaite faire des groupes de styles (affichage, impression…). Avec plusieurs feuilles de styles, plusieurs liens seront établis avec la page HTML. Sur la même page, en utilisant une feuille de style pour l’affichage (screen) et une feuille de style pour l’impression (print), on peut définir des règles de styles différentes pour l’affichage et l’impression. Les styles CSS portent les mêmes noms dans les 2 feuilles de style et le paramètre media sélectionne celui qui est actif. Exemple : le texte peut être en blanc sur fond noir à l’affichage écran et noir sur fond blanc à l’impression. ecran.css imprime.css .titre { color: #FFFFFF; background-color: #000000; font-family: Verdana; font-size: 16px; } .titre { color: #000000; font-family: Arial; font-size: 14px; } Le code HTML reste le même :

Création de nouveaux styles : On peut utiliser 2 méthodes : 1. Utilisation du panneau Propriétés (en bas) : • Sélectionner la zone de texte à modifier, • Dans le panneau Propriétés, changer Format, Police ou Taille  Dreamweaver crée un style : dans la liste Style, un nouveau style apparaît ainsi que dans le panneau Styles CSS (classe : nom commence par un point) Le nouveau style est créé avec un nom StyleXX et est stocké en local dans le code HTML de la page : - dans le panneau Styles CSS, choisir le nouveau style, - clic droit  Renommer la classe  Nouveau nom : utiliser un nom explicite Le style est également changé dans le code de la page Pour le déplacer dans la feuille de style externe : - le sélectionner, - le déplacer vers la feuille de style dans la liste des styles présents. 2. Création d’un nouveau style CSS : • Dans le panneau Styles CSS, choisir Nouvelle règle de CSS (en bas) • Dans la boite de dialogue Nouvelle règle de CSS, choisir : - Type de sélecteur : Classe ( ou balise pour l’appliquer, par exemple, à la balise ) - Sélecteur : nom débutant par un point (classe) ou chercher balise dans la liste (balise) - Définir dans : choisir le fichier feuille de style déjà utilisé ou Nouveau fichier feuille de style. • Pour l’appliquer à la zone de texte : - Sélectionner le texte, - Dans le panneau Propriétés, dans la liste Style : choisir le style, ou - sélectionner le contenant du texte , … - clic droit  Définir classe et choisir dans la liste Le choix de type sélecteur : Balise permet de redéfinir les propriétés qui seront appliquées chaque fois que l’on utilisera cette balise.

: en-tête 1, choisie souvent pour les titres - : en-tête 2, choisie souvent pour les sous-titres… : paragraphe, choisie souvent pour les contenus de paragraphes… mais également pour la balise : lien, que l’on pourra personnaliser : choix Avancé (pseudo-classe) : - a:link : lien visible, - a:hover : lien survolé, - a:visited : lien après première fois utilisée, - a:active : lien actif, sélectionné par une tabulation : focus actif. 18

Lier une feuille de styles : • Dans le panneau Styles CSS, choisir Attacher une feuille de style (en bas) • Dans la boîte de dialogue Ajouter une feuille de style externe : - Fichier/URL : choisir ou cliquer sur Parcourir, - Ajouter sous : cocher lien, - Média : choix de l’utilisation prévue (screen : affichage, print : impression …) • Pour ajouter l’option Média à un style, il est plus simple de supprimer le lien et de le refaire : - sélectionner le nom du fichier style dans le panneau Styles CSS, - appuyer sur Suppr, - utiliser la procédure ci-dessus pour lier la feuille de style en précisant l’option Média. Dupliquer une feuille de styles : • Dans le panneau Fichier, sélectionner le nom du fichier style de départ (ecran.css), • Clic droit, choisir Edition  Dupliquer, • Renommer copie de ecran.css  imprime.css • Lier ensuite la nouvelle feuille de style (comme ci-dessus) Ne pas oublier de préciser l’option Média : screen ou print Visualiser l’option Média choisie : • Dans le panneau Styles CSS, à côté du nom du fichier style, apparaît entre parenthèses : 19

Quelques correspondances CSS / HTML (1/3) CSS Définition CSS HTML Propriétés Utilisation font-family Type  Police Police Police : Arial, Verdana… (polices web) font-size Type  Taille Taille Taille police : en pixels ou em font-style : italic Type  Style ou I italique font-weight : bold Type  Epaisseur ou B gras text-decoration :underline Type  Décoration  Souligné Non souligné text-decoration : none Type  Décoration  Aucune Non Non Empêche soulignement line-height : (valeur) Type  Hauteur de ligne Non Non Hauteur de ligne de texte color Type  Couleur Couleur du texte couleur du texte background-color : #FFFFFF Arrière-plan  Couleur arrière- plan Propriétés de la page Couleur du fond de page background-image : url(xx.jpg) Arrière-plan  Image arrière- plan Propriétés de la page Image de fond de page background-repeat : no-repeat Arrière-plan  Répétition Non Non Pas de répétition de l’image de fond background-repeat : repeat Arrière-plan  Répétition Non Non Répétition de l’image en hauteur et largeur background-repeat : repeat-x Arrière-plan  Répétition Non Non Répétition de l’image en largeur background-repeat : repeat-y Arrière-plan  Répétition Non Non Répétition de l’image en hauteur background-attachment : fixed Arrière-plan  Pièce jointe Non Non L’image de fond ne défile pas background-position : center Arrière-plan  Position horizontale Non Non L’image de fond est centrée dans la largeur background-position : left Arrière-plan  Position horizontale Non Non L’image de fond est alignée à gauche background-position : right Arrière-plan  Position horizontale Non Non L’image de fond est alignée à droite background-position : top Arrière-plan  Position verticale Non Non L’image de fond est alignée en haut background-position : bottom Arrière-plan  Position verticale Non Non L’image de fond est alignée en bas background-position : center center Arrière-plan  Position verticale Arrière-plan  Position horizont. Non Non L’image de fond est alignée au centre (largeur / hauteur) text-align : center Bloc  Alignement du texte Centrer le texte dans un conteneur text-align : left Bloc  Alignement du texte Aligner le texte à gauche dans un conteneur text-align : right Bloc  Alignement du texte Aligner le texte à droite dans un conteneur text-align : justify Bloc  Alignement du texte Justifier le texte dans un conteneur vertical-align: sub Bloc  Alignement vertical Non Texte en indice vertical-align: super Bloc  Alignement vertical Non Texte en exposant

Quelques correspondances CSS / HTML (2/3) CSS Définition CSS HTML Propriétés Utilisation width : 760px Boîte  Largeur Largeur Largeur d'un conteneur (pixels ou %) height : 80 px Boîte  Hauteur Hauteur Hauteur d'un conteneur (pixels ou %) float : left (right ou center) Boîte  Flottante Non Non Conteneur flottant dans autre conteneur padding : Xpx Boîte  Remplissage  Idem pour tous Non Non Espace de remplissage intérieur – autour (marge autour du contenu d'un conteneur) padding-left : Xpx Boîte  Remplissage  Gauche Non Non Espace de remplissage intérieur – gauche (marge intérieure gauche) padding-right : Xpx Boîte  Remplissage  Droite Non Non Espace de remplissage intérieur – droite (marge intérieure droite) padding-top : Xpx Boîte  Remplissage  Haut Non Non Espace de remplissage intérieur – haut (marge intérieure en haut) padding-bottom : Xpx Boîte  Remplissage  Bas Non Non Espace de remplissage intérieur – bas (marge intérieure en bas) margin : Xpx Boîte  Marge  Idem pour tous Non Non Espace extérieur – autour (marge autour du conteneur) margin-left : Xpx Boîte  Marge  Gauche Non Non Espace extérieur à gauche (marge extérieure gauche) margin-right : Xpx Boîte  Marge  Droite Non Non Espace extérieur à droite (marge extérieure droite) margin-top : Xpx Boîte  Marge  Haut Non Non Espace extérieur au dessus (marge extérieure au dessus) margin-bottom : Xpx Boîte  Marge  Bas Non Non Espace extérieur au dessous (marge extérieure au dessous) clear : both Boîte  Effacer  les deux Non Non Dans nouveau conteneur, supprime les positions flottantes des conteneurs précédents border-top-style : solid Bordure  Style  Haut Non (bordure tout autour) Non Bordure en haut d'un conteneur border-right-style : solid Bordure  Style  Droite Non (bordure tout autour) Non Bordure à droite d'un conteneur border-left-style : solid Bordure  Style  Gauche Non (bordure tout autour) Non Bordure à gauche d'un conteneur border-bottom-style : solid Bordure  Style  Bas Non (bordure tout autour) Non Bordure en bas d'un conteneur border-top-style : none Bordure  Style  Haut Non (bordure tout autour) Non Pas de bordure en haut d'un conteneur border-right-style : none Bordure  Style  Droite Non (bordure tout autour) Non Pas de bordure à droite d'un conteneur border-left-style : none Bordure  Style  Gauche Non (bordure tout autour) Non Pas de bordure à gauche d'un conteneur border-bottom-style : none Bordure  Style  Bas Non (bordure tout autour) Non Pas de bordure en bas d'un conteneur border-top-width : Xpx Bordure  Largeur  Haut Non (bordure tout autour) Non Epaisseur de bordure en haut d'un conteneur border-right-width : Xpx Bordure  Largeur  Droite Non (bordure tout autour) Non Epaisseur de bordure à droite d'un conteneur border-left-width : Xpx Bordure  Largeur  Gauche Non (bordure tout autour) Non Epaisseur de bordure à gauche d'un conteneur border-bottom-width : Xpx Bordure  Largeur  Bas Non (bordure tout autour) Non Epaisseur de bordure en bas d'un conteneur

Quelques correspondances CSS / HTML (3/3) CSS Définition CSS HTML Propriétés Utilisation border : Xpx Non Bordure Epaisseur de bordure tout autour d'un conteneur border-top-color : #000000 Bordure  Couleur  Haut Non (bordure tout autour) Non Couleur de bordure en haut d'un conteneur border-right- color : #000000 Bordure  Couleur  Droite Non (bordure tout autour) Non Couleur de bordure à droite d'un conteneur border-left- color : #000000 Bordure  Couleur  Gauche Non (bordure tout autour) Non Couleur de bordure à gauche d'un conteneur border-bottom- color : #000000 Bordure  Couleur  Bas Non (bordure tout autour) Non Couleur de bordure en bas d'un conteneur border-color : #000000 Non Couleur contour Couleur de bordure autour d'un conteneur list-style-type : disc Liste  Type  disque • Puce avant paragraphe list-style-type : circle Liste  Type  cercle o Puce avant paragraphe list-style-type : decimal Liste  Type  décimal Puce numérotée avant paragraphe list-style-type : none Liste  Type  aucune - Non Pas de puce numérotée avant paragraphe … Cette liste n'est pas limitée. Il existe de nombreuses règles CSS. Certaines sont accessibles par la boîte de dialogue de Dreamweaver, d'autres ne le sont pas. Le navigateur Safari (version 4) ajoute de nouvelles possibilités de styles avec son moteur webkit intégré, certaines permettent même des animations. Mais il est le seul à les accepter, pour l'instant.

Vous pouvez aussi lire