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 <div> ) qui déterminent l’ossature de la page.
A. Créer la page et définir la balise <body> :
A partir d’un document HTML vide, on crée une règle pour la balise <body> 1. Choisir Fichier Nouveau
Dans la boîte Nouveau document, choisir (de gauche à droite) : - page vierge,
- type de page : HTML, - mise en forme : <aucune> - 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 <body> 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.
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 <body>. 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; }
B. Définir le conteneur externe :
Une technique standard pour la création de mises en page CSS consiste à employer une balise <div> 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
- 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 <div> 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.
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 <div> 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 <div> s’étend afin de remplir son conteneur #conteneur
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; }
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 <Tab> 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.
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 <div id="conteneur">, - 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 <div id="entete">, - 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 <div id="principal">, - Dans la liste ID : piedpage,
- Cliquer sur OK.
Code HTML obtenu : <div id="conteneur"> <div id="entete">
Placez ici le contenu de id "entete" </div>
</div>
Le <div> #entete se trouve à l’intérieur du <div> #conteneur.
Code HTML obtenu : <div id="conteneur"> <div id="entete">
Placez ici le contenu de id "entete" </div>
<div id="principal">
Placez ici le contenu de id "principal" </div>
</div>
Code HTML obtenu : <div id="conteneur"> <div id="entete">
Placez ici le contenu de id "entete" </div>
<div id="principal">
Placez ici le contenu de id "principal" </div>
<div id="piedpage">
Placez ici le contenu de id "piedpage" </div>
</div> A chaque choix dans la liste ID, seuls les sélecteurs qui n’ont pas été attribués sont disponibles.
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 <div> 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; }
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 <div id="entete">, - 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 <div id="banniere">, - Dans la liste ID : menu,
- Cliquer sur OK.
CSS obtenu : #menu { height: 28px; } Code HTML obtenu : <div id="conteneur"> <div id="entete"> <div id="banniere">
Placez ici le contenu de id "banniere" </div> </div> <div id="principal"> … Code HTML obtenu : <div id="conteneur"> <div id="entete"> <div id="banniere">
Placez ici le contenu de id "entete" </div>
<div id="menu">
Placez ici le contenu de id "menu" </div>
</div>
<div id="principal"> …
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; }
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 <div id="principal">, - 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 <div id="banniere">, - 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 : …
<div id="principal"> <div id="gauche">
Placez ici le contenu de id "gauche" </div> <div id="piedpage"> … <div id="principal"> gauche Code HTML obtenu : … <div id="principal"> <div id="gauche">
Placez ici le contenu de id "gauche" </div>
<div id="droite">
Placez ici le contenu de id "droite" </div>
<div id="piedpage"> …
<div id="gauche">
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 <div id="menu"> directement et conservera l’assemblage prévue dans Fireworks.
28 menu
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 <div#gauche > appuyer sur la touche de déplacement à gauche pour déplacer le curseur avant la balise <div#gauche > 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 <Ctrl – C> et le coller à la suite du Sous-titre <Ctrl – V>
10. Le curseur étant placé dans la zone gauche, tout sélectionner <Ctrl – A> puis copier <Ctrl – C> Se placer dans la zone droite et coller <Ctrl – V>
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 <Ctrl-A> sélectionne tout le contenu du conteneur où l’on se trouve. Ici il s’agit d’un <div> mais cela fonctionne dans la cellule d’un tableau, dans un cadre…
Si on utilise la commande <Ctrl-A> plusieurs fois, on monte d’un niveau chaque fois : 1. le contenu du <div#gauche>,
2. le <div#gauche>,
3. le contenu du <div#principal>, 4. le <div#principal>,
5. …
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 ). <body> 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
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 ( <style>), appuyer sur la touche Suppr.
Dreamweaver a déplacé les styles CSS de la balise <head>, les lignes <style type="text/css"> … / … </style> vers la nouvelle feuille de style externe et créé le lien dans le code HTML :
dans la balise <head> , la ligne : <link href="style/style.css" rel="stylesheet" type="text/css" />
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.
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.
<link href="style/ecran.css" rel="stylesheet" type="text/css" media="screen" /> <link href="style/imprime.css" rel="stylesheet" type="text/css" media="print" />
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 <h1> ) - 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 <p> , <div#gauche> … - 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.
<h1> : en-tête 1, choisie souvent pour les titres - <h2> : en-tête 2, choisie souvent pour les sous-titres… <p> : paragraphe, choisie souvent pour les contenus de paragraphes…
mais également pour la balise <a> : 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,
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 :
Quelques correspondances CSS / HTML (1/3)
CSS
Définition CSS
HTML
Propriétés
Utilisation
font-family Type Police <font face> Police Police : Arial, Verdana… (polices web)
font-size Type Taille <font size> Taille Taille police : en pixels ou em
font-style : italic Type Style <i> ou <em> I italique
font-weight : bold Type Epaisseur <b> ou <strong> B gras
text-decoration :underline Type Décoration Souligné <u> Non souligné
text-decoration : none Type Décoration Aucune Non Non Empêche soulignement <a>
line-height : (valeur) Type Hauteur de ligne Non Non Hauteur de ligne de texte
color Type Couleur <font color> Couleur du texte couleur du texte
background-color : #FFFFFF Arrière-plan Couleur
arrière-plan <body bgcolor> Propriétés de la page Couleur du fond de page background-image : url(xx.jpg) Arrière-plan Image
arrière-plan <body background> 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 <balise align="center"> Centrer le texte dans un conteneur text-align : left Bloc Alignement du texte <balise align="left"> Aligner le texte à gauche dans un conteneur text-align : right Bloc Alignement du texte <balise align="right"> Aligner le texte à droite dans un conteneur text-align : justify Bloc Alignement du texte <balise align="justify"> Justifier le texte dans un conteneur
vertical-align: sub Bloc Alignement vertical <sub> Non Texte en indice
Quelques correspondances CSS / HTML (2/3)
CSS
Définition CSS
HTML
Propriétés
Utilisation
width : 760px Boîte Largeur <conteneur with="760 px"> Largeur Largeur d'un conteneur (pixels ou %) height : 80 px Boîte Hauteur <conteneur height="80 px"> 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 <conteneur border="X px"> 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 <conteneur bordercolor…> Couleur contour Couleur de bordure autour d'un conteneur
list-style-type : disc Liste Type disque <li> • Puce avant paragraphe
list-style-type : circle Liste Type cercle <ul> o Puce avant paragraphe
list-style-type : decimal Liste Type décimal <ol> 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.
