CSS et DREAMWEAVER
CSS : les principes En « cascade » Cascading Style Sheet = feuille de style en cascade Norme du W3C : http://www.w3.org/Style/CSS/ Une composante du DHTML (Dynamique HTML) avec le Javascript Feuille de style = un document… qui regroupe toutes les définitions et les caractéristiques de style et de mise en forme des pages web qui indique la mise en forme au navigateur En « cascade » Une logique d’application en cascade
CSS : les principes HTML le maçon CSS le décorateur Tous les éléments de mise en forme, de mise en page, de police, de couleur, d’espacement, de bordure (tous les éléments de l’apparence de la page Web) doivent être intégrés dans la feuille de style La feuille de style est un ensemble de modèles de formatage de la page HTML
CSS : les avantages Maintenance simplifiée du site Changer l’apparence de toutes les pages en une seule fois Création de pages HTML allégées avec moins de balises Gestion de la compatibilité entre les navigateurs Compatibles avec les sites dynamiques (connexion SGBD) et avec les modèles/templates.
Chaque page n’aura pas la même apparence sur tous les navigateurs… Rappels du X/HTML Chaque balise est une « boite » un « conteneur » un « bloc » Chaque page n’aura pas la même apparence sur tous les navigateurs… Mais elle doit fonctionner PARTOUT Standard W3C Les balises et leurs attributs Oubliez la mise en forme en tableau !
Une page HTML classique « ancienne » <HEAD> méta données ex : <title> </title> </HEAD> <BODY> corps de la page : fond et forme ensembles exemple : les balises <font>, <table>,… trop nombreuses </BODY> </HTML>
Conséquences : lourdeur du code...
Exemples de page HTML et CSS séparées Page HTML sans font, table,…
Exemples de page HTML et CSS séparées Feuille de style qui contint les éléments de mise en forme
Utiliser des feuilles de styles Solution 1 : en interne (à éviter sauf si newsletter ou cas particuliers) styles spécifiés dans l’en tête du document (entre les balises <HEAD> </HEAD>) styles appliqués uniquement à la page concernée Solution 2 : en externe (la plus courante) fichier externe avec l’extension « .css » appelé par la page HTML « comme une image » exemple : « style_principal.css » fichier applicable à l’ensemble du site
Solution 1 : CSS interne à la page Dans la page HTML (entre les balises <HEAD>) Attention la version 8 de Dreamweaver le fait par défaut <style type="text/css"> <!-- .Style1 { font-size: 24pt; font-weight: bold; } --> </style>
Solution 1 : CSS interne à la page
Préférences de Dreamweaver pour
Solution 2 : CSS feuille externe Page HTML : index.html <HTML> <HEAD> Appel de la feuille CSS </HEAD> <BODY> contenu de la page … </BODY> </HTML> Page CSS : style.css /* commentaire*/ Sélécteur1 { Propriété : valeur; } Sélécteur2 {
Solution 2 : CSS feuille externe Appel du fichier ou de la feuille de style : 2 méthodes (Entre les balises <head> et </head> <link rel="stylesheet" href= "../chemin/nom_fichier.css" type="text/css" > ou <style type="text/css"> <!-- @import url("../chemin/CSS/nom_fichier.css"); --> </style>
Solution 2 : CSS avec Dreamweaver 8 (création) Création d’une feuille de style Menu Texte > Style CSS > Gérer les styles « Joindre… » si la feuille existe déjà « Nouveau » si besoin de la créer
Solution 2 : CSS avec Dreamweaver CS (Création) Création d’une nouvelle feuille de style CSS Insertion des éléments des styles dans la page HTML (entre les balise HEAD
Rattacher une feuille de style existante
Exemple feuille de style CSS avec Dreamweaver Exemple de feuille de style existante :
Exemple feuille de style CSS avec Dreamweaver Appliquer les styles dans la page HTLM
Pour les puristes (sans Dreamweaver) Un éditeur de texte (Bloc Note par ex.) Une ligne pour appeler la feuille de style dans vos pages <link rel="stylesheet" href= "css/nom_fichier.css" type="text/css" /> OU <style type="text/css"> <!-- @import url("css/nom_fichier.css"); --> </style> Créer et modifier le fichier .css avec l’éditeur de texte
Cas 1 : le style s’applique… CSS dans le détail Cas 1 : le style s’applique… à une balise du code HTML exemple : H1, P , A (lien hypertexte) Cas 2 : sélecteur de classe (CLASS) .nom-de-la-classe { propriétés: valeur ; propriétés: valeur; } Cas 3 : Sélecteur ID (utilisable une seule fois dans la page) #nom-id {
CSS : pour appeler le style dans le code HTML Cas 1 : Pour la balise…rien besoin de faire Cas 2 : pour les sélecteurs de classe (.nom_class) <p class="nom_class"> texte, image, tableau,…</p> <span class="nom_class"> texte, image, tableau,…</span> <balise class="nom_class"> texte, image, tableau,…</balise> Cas 3 : Pour les sélecteurs ID (#premier) <div id="premier" > texte… image… tableau...</div>
Cas 1 : style sur une balise
Cas 2 : sélecteur de CLASSE
Cas 3 : sélecteur ID
Quelques principes liés au CSS Principales possibilités de mise en forme : Polices et couleurs Espacements et bordures Mise en page Règle importante : on part du centre pour aller vers l’extérieur de la page pour appliquer la mise en forme
Quelques principes liés au CSS Deux types de balises en XHTML : Balise de type « BLOC » p, h1, h2,…,div, table, ul, li,… Bloc de texte Affichage les unes en dessus des autres (saut de ligne) Balises de type « en ligne » A, img, span,… Elles se placent au fil du texte Affichage les unes à coté des autres Souvent placées dans balises de type BLOC Propriétés pour transformer « bloc » « en ligne display:inline display:bloc
Quelques principes liés au CSS Une règle CSS ou un style CSS c’est : sélecteur { propriété 1: valeur 1; propriété 2: valeur 2; } Rappel des types de sélecteur : Simple sur une balise HTML Sélecteur de classe Sélecteur d’ID
Quelques principes liés au CSS Sélecteur simple sur une balise : p {font-family: verdana; } On peut aussi appliquer sur plusieurs balises : h1, h2 {color: red;} Cas particuliers * { …} toutes les balises sont concernées par la mise en forme
Principe de la boite ou du conteneur Margin = marge externe Border = bordure Padding = marge interne = rembourrage height Zone de contenu (Image ou texte) width
Une balise HTML indispensable : DIV Ne plus raisonner en tableau Le nouveau paradigme : la balise DIV <div> …</div> DIV = « Division » = « Zone » DIV un conteneur indispensable Structurer la page HTML DEMO…
DEMO balise DIV Page HTML : index.html <HTML> <HEAD> Appel de la feuille CSS </HEAD> <BODY> <div> Contenu 1</div> <div> Contenu 2</div> <div> Contenu 3</div> </BODY> </HTML>
DEMO balise DIV
DEMO balise DIV
DEMO positionnement des balises DIV
Utiliser Dreamweaver pour manipuler des styles Fichier > Nouveau > CSS Puis saisir dans le code ou utiliser l’interface
Utiliser Dreamweaver pour manipuler des styles CAS 1 : Code CSS…à la mano CAS 2 : Code CSS avec Dream et son interface…
CAS1 : Code CSS saisit à la « mano » OU… CAS 2 : Code CSS avec Dream et son interface…
Les propriétés (les plus courantes de la police) Cas 1…à la « mano » Les 3 Sélecteurs : Balises Classes (.nom de la classe) ID (#nom) Les propriétés (les plus courantes de la police) font-family la police des caractères font-size taille de la police font-style italique (italic), normale, soulignée font-weight gras (bold) épaisseur color couleur de la police letter-spacing espacement entre les lettres Line-height hauteur de ligne background-color couleur d’arrière plan Etc.
Utiliser Dreamweaver pour manipuler des styles
Utiliser Dreamweaver pour manipuler des styles
Type
Arrière-plan
Bloc
Boîte
Bordures
Liste
Positionnement
Extensions
Utiliser Dreamweaver pour manipuler des styles Type : apparence des éléments textuels (police, couleur…) Arrière-plan : pour rajouter une image, une couleur par exemple Bloc : positionnement du texte du paragraphe Boîte : gestion des marges autour et à l’intérieur de l’élément Bordure : les contours Liste : mise en forme des listes Positionnement : positionnement dans la page de l’élément Extensions : pour modifier la forme du curseur par ex.
Vous pouvez récupérer n’importe quelle feuille de style d’un site Astuces CSS Vous pouvez récupérer n’importe quelle feuille de style d’un site … pour vous en inspirer … pour comprendre Exemple : Cf. le site www.sun.com Voir le code source Récupérer le lien Saisir l’URL et le chemin vers la feuille de style
Cas pratique 2 : réaliser un site sans tableau Réaliser une page avec : Un logo (une image) Une bannière (une image de votre composition) Un menu à gauche ET/OU sous la bannière Un contenu au centre de la page Un pied de page (© Master GECI 2006) Et si possible… Utiliser une feuille de style pour disposer les éléments sur la page
Cas pratique 2 : réaliser un site sans tableau LOGO Image Bannière (image) Menu 1 Menu 2 BLOC contenu ©Master GECI
Cas pratique 2 : réaliser un site sans tableau Source de l’exercice : Site de MACROMEDIA/ADOBE : http://www.adobe.com/fr/devnet/dreamweaver/articles/tableless_layout.html http://www.adobe.com/fr/devnet/articles/css_practices/ Linux Pratique Juin-Juillet 2005
Pour aller plus loin http://www.cybercodeur.net/weblog/presentations/dwws/index.html http://www.netalya.com/fr/css-1.asp http://www.tuteurs.ens.fr/internet/web/html/css.html http://slaout.linux62.org/html_css/styler.html
Exemples de page HTML et CSS séparées www.csszengarden.com www.managementdetransition.com http://css.alsacreations.com/ A voir : http://openweb.eu.org/articles/pourquoi_standards/ http://css.mammouthland.net/