CSS et DREAMWEAVER.

Name: CSS et DREAMWEAVER.
Uploaded: 2017-12-16T12:56:13+00:00
Duration: PTM17S59
Channel: Pierre Thomas Goudreau
Description: CSS et DREAMWEAVER.

CSS et DREAMWEAVER

CSS : les principes En « cascade »
Cascading Style Sheet = feuille de style en cascade Norme du W3C : 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,…

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">  </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">  </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">  </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

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

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

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 positionnement des balises DIV

Utiliser Dreamweaver pour manipuler des styles
Fichier > Nouveau > CSS Puis saisir dans le code ou utiliser l’interface

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.

Arrière-plan

Boîte

Bordures

Positionnement

Extensions

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

Source de l’exercice : Site de MACROMEDIA/ADOBE : Linux Pratique Juin-Juillet 2005

Pour aller plus loin

A voir :

CSS et DREAMWEAVER.

Présentations similaires

Présentation au sujet: "CSS et DREAMWEAVER."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

CSS et DREAMWEAVER.

Présentations similaires

Présentation au sujet: "CSS et DREAMWEAVER."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back