Download - Mmi Web Design P2
![Page 1: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/1.jpg)
David Raichman Senior UX Designer @ OgilvyInteractive
WEB DESIGNMaster 2 MMI | Université Panthéon Sorbonne
Octobre 2009 : Partie 2/4
![Page 2: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/2.jpg)
Web Design Master 2 MMI Université Panthéon Sorbonne
1. HTML ET XHTML
![Page 3: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/3.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLA. Versions et DTD
La déclaration <!DOCTYPE> située avant la balise d’ouverture <HTML>, permet de spécifier la version de la norme utilisée dans le document (HTML 3.2, XHTML1.1…)
Découpage d’une entrée DOCTYPE :
![Page 4: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/4.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLA. Versions et DTD
Encodage du document et la balise <head>
<meta httpequiv="ContentType" content="text/html; charset=iso88591" />
iso88591 = langues d’Europe occidentale
iso885915 = complémentaire du précédent avec des caractères supplémentaires type «!œ!» ou «!"!»
utf8 = permet d’utiliser la plupart des caractère de la majorité des langues du monde : c’est un code de l’Unicode
![Page 5: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/5.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLB. Eléments contenus et balises
<balise ouvrante>contenu</balise fermante>
élément{
![Page 6: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/6.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLB. Eléments contenus et balises
Les balises acceptent parfois des caractéristiques supplémentaires pour les distinguer ou les personnaliser.
<balise attribut="un attribut">contenu</balise>
Les éléments peuvent s’imbriquer :
<h1 id="monTitre">Le titre <em>du document</em></h1>
![Page 7: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/7.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLC. Eléments contenus et balises
Balises de type bloc Balises de type en ligne
Un élément de type bloc peut contenir un ou plusieurs éléments bloc et/ou en ligne, sauf paragraphe <p> et titres <h1>, <h2>,…
Un élément de type ligne ne peut renfermer que d’autres éléments de type ligne.
Il existe en fait 2 sortes d’éléments de type ligne : «!remplacés!» et «!non remplacés!».
-Seuls les éléments remplacés acceptent des attributs de dimensions (height, width). Il s’agit des éléments <img>, <input>, <textarea>,<select> et <object>.
- Les autres n’ont pas de dimension à proprement parler, et n’occupent que la place nécessaire à leur contenu. C’est le cas de <strong>,<em> et <a>.
Une mise en page se fera donc de préférence à l’aide de balise de type bloc. La plus indiquée pour cet usage est <div> : c’est une balise générique servant de conteneur neutre.
!"!#$%&'!"#$
!"!#$%&'%&'"()&%
(%)&*&$'+,$-.$/0
12.3"$'.245#$%&'67819
:2/;<'+=2.>0
![Page 8: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/8.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balise Description Exemple
<blockquote>
Introduit des citations longues. Par défaut, certains navigateurs prévoient une marge gauche aux blocs de citation, qu'on pourra bien sûr modifier en CSS.
<p>Kant disait :<p/><blockquote><p>l'espace et le temps sont les formes de notre sensibilité</p></blockquote>
<div>
Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, comme la balise <span>. Elle sert à regrouper d'autres balises de type bloc ou ligne.
<div><p>Voici un texte <em>important</em></p><p>Et un autre texte <strong>imortant</strong></p></div>
<dl>
Liste de définitions, utile pour structurer les éléments associant des définitions ou contenus à des termes ou à des titres. Ces listes distinguent les titres (<dt>) des éléments de définition (<dd>)
<dl> <dt>Titre de l'élément</dt> <dd>description de l'élément</dd> <dd>Suite de la description</dd> </dl>
<form>
Balise délimitant un formulaire interactif. Elle contient généralement des éléments d'interface (champs de texte, boutons de validation, cases à cocher,…) Cet élément doit renfermer immédiatement d'autres élément de type bloc.
<form action="pagesuivante.php" method="get"><p><input type="text" name="recherche" /> <input type="submit" value="ok" /> </p> </form>
<h1>, <h2>, …<h6>
HTML prévoit six niveaux de titres, hiérarchiquement placé sous le titre principal (<h1>). Ces éléments constituent une exception à la règle des blocs ; ils ne peuvent contenir d'autres blocs.
<h1>Titre principal</h1>
Balises bloc
![Page 9: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/9.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balise Description Exemple
<ol>, <ul> Ces deux balises désignent des listes ordonnées (<ol>) ou à puces simples (<li>)
<ul> <li>premier objet de la liste</li> <li>second objet de la liste</li> </ul>
<p> Balise désignant un paragraphe de texte. Cet élément constitue une exception à la règle des blocs car il ne peut en contenir d'autres.
<p>Un paragraphe de texte</p>
<table> Tableau contenant des données. Les cellules du tableau sont d'abord rassemblés sous forme de rangé ou lignes (<tr>).
<table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> </table>
Balises bloc
![Page 10: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/10.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balise Description Exemple
<a>
Désigne un lien hypertexte. Elle s’accompagne de l’attribut href, qui renferme la cible du lien (son contenu représentant le texte à cliquer pour activer le lien)
<a href= "page5.htm">allez en page 5</a>
<em>
Met en emphase une portion de texte. Quand la police utilisée est droite, la plupart des navigateurs graphiques la traduisent comme une mise en italique.
<p>Voici un texte <em>important</em></p><p>Et un autre texte <strong>imortant</strong></p>
<img>
Inclut une image dans le document Cette balise es accompagné des attributs alt (texte alternatif) et src (qui indique le chemin de l’image). Les navigateurs supportent les formats gif, png et jpg
<img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ />
<q> Balise utilisée pour les citations courtes. On utilisera <blockquote> pour les citations longues.
<p>comme le dit Kant <q>la pensée…</q></p>
<span>
Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, comme la balise <span>. Elle sert à regrouper d'autre balises de type bloc ou ligne.
<span id=”fluo”>le texte</span>
<strong> Indique un renforcement général représenté en gras dans les navigateurs graphiques <p>ceci est<strong>important ! </strong></p>
Balises en ligne
![Page 11: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/11.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLD. Différencier HTML et XHTML dans la pratique
La syntaxe obsolète :
‣Balise ouvrante sans balise fermante ex :<br>, <img src=!"xyz.jpg">,<p> ou <li>.
‣ Balises écrites en majuscules, ex :<P>
‣En XHTML, les balises vides ont la syntaxe suivante : <balise vide />
![Page 12: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/12.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLD. Différencier HTML et XHTML dans la pratique
Les balises obsolètes :
Ce sont les balises qui donnent des indications de mise en forme :
<font>, <center>, <u>, <s>, <i>, <b>
![Page 13: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/13.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLE. Pratique : l’ami ultime de DW...
Firebug
![Page 14: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/14.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTMLF. Pratique : Utilisation de Dreamweaver
1. créer un titre de page et un titre général
2. créer une page avec deux paragraphes et deux soustitres.
3. ajouter une image dans le flux entre les deux paragraphes
4. introduire des citations et des liens dans le texte, mettre en emphase certaines parties.
5. vérifier la validité XHTML 1.0 stricte du document
![Page 15: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/15.jpg)
Web Design Master 2 MMI Université Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
![Page 16: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/16.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGA. Définition des wireframes
Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture d’information et d’ergonomie.»
Ils servent de référence pour le design graphique et pour le développement du projet digital.
Ils contiennent différents niveaux de précision selon le contexte.
![Page 17: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/17.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
![Page 18: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/18.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGA. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
![Page 19: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/19.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGA. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
![Page 20: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/20.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
![Page 21: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/21.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
![Page 22: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/22.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
![Page 23: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/23.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGB. Degré de précision
Interactif
Low résolution Hi résolution
Statique
Prototype papier
Sketching Ecrans (psd, jpg...)
Prototype digital
Wireframes
![Page 24: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/24.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGC. Hiérarchie visuelle
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sites
![Page 25: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/25.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGD. Zone visible d’écran
RENAULT-MERCHANDISING.COM
ACCUEIL | NOTRE ACTIVITE | NOS PRODUITS | NOS POINTS DE VENTE | OFFRES WEB EXCLUSIVES
Les sites RenaultFR | EN |
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER | CONTACT | PLAN DU SITE | MENTIONS LEGALES | CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
![Page 26: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/26.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGD. Zone visible d’écran
RENAULT-MERCHANDISING.COM
ACCUEIL | NOTRE ACTIVITE | NOS PRODUITS | NOS POINTS DE VENTE | OFFRES WEB EXCLUSIVES
Les sites RenaultFR | EN |
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER | CONTACT | PLAN DU SITE | MENTIONS LEGALES | CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
!"#$%&'($)*"+!,)
!"#$%&'()*%&
'
![Page 27: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/27.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGD. Zone visible d’écran
RENAULT-MERCHANDISING.COM
ACCUEIL | NOTRE ACTIVITE | NOS PRODUITS | NOS POINTS DE VENTE | OFFRES WEB EXCLUSIVES
Les sites RenaultFR | EN |
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER | CONTACT | PLAN DU SITE | MENTIONS LEGALES | CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
!"#$%&'($)*"+!,)
!"#$%&'()*%&
'
!"#$%&'()$
!"""#$%&'"#$
%$()*
+)(#,-(.//
![Page 28: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/28.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMINGD. Zone visible d’écran
RENAULT-MERCHANDISING.COM
ACCUEIL | NOTRE ACTIVITE | NOS PRODUITS | NOS POINTS DE VENTE | OFFRES WEB EXCLUSIVES
Les sites RenaultFR | EN |
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER | CONTACT | PLAN DU SITE | MENTIONS LEGALES | CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
!"#$%&'($)*"+!,)
!"#$%&'()*%&
'
!"#$%&'()$
!"""#$%&'"#$
%$()*
+)(#,-(.//
960 ou 950 px
![Page 29: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/29.jpg)
Web Design Master 2 MMI Université Panthéon Sorbonne
3. CSS
![Page 30: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/30.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSA. Présentation, méthode de liaison, syntaxe
Il existe deux méthodes de liaisons des fichiers *.css externes
#Une méthode classique utilisant les attributs de la balise <link>(balise autofermante)
<link href=“monstyle.css" rel="stylesheet" type="text/css" />
#Une méthode qui utilise une propriété CSS 2, nommée @import. Ce n’est pas une balise HTML !
<style type="text/css">@import url(impression.css) print; @import url(portable.css) handheld; @import url(normal.css) screen </style>
![Page 31: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/31.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSA. Présentation, méthode de liaison, syntaxe
Le CSS est fondé sur l’héritage et la cascade
La syntaxe du CSS utilise les accolades :
sélecteur {
propriété 1: valeur ;
propriété 2: valeur ;
propriété 3: valeur ;
/*un commentaire*/
}
![Page 32: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/32.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSB. Sélecteurs
Un sélecteur permet d’identifier les lieux d’application d’un style défini.
Il existe 3 types de sélecteurs :
‣Les sélecteurs de balise (déjà vu)
‣Les sélecteurs de classes permettant d’appliquer un style à un ensemble d’éléments indépendamment du type de balise.
.classe {
propriété n: valeur;
}
‣Les sélecteurs d’identifiants (id est le nom attribué à un élément unique dans le doc HTML).
#identifiant{
propriété n: valeur;
}
Voir également document ci-joint
![Page 33: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/33.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSB. Sélecteurs
Voir également document ci-joint
Un sélecteur permet de trouver le chemin arborescent d’une balise à laquelle on veut appliquer un style (voir doc)
Ex : <div id=‘intro’><p>du texte</p></div>
Pour donner un style à <p>, on utilise la syntaxe :
#intro p {…} ou div p{...}
Dans le contexte de la cascade, deux règles de styles peuvent êtres contradictoires dans ce cas c’est la dernière règle lue qui l’emporte.
La mention !important permet de surclasser une règle donnée même si elle n’est pas lue à la fin.
Ex : p{fontsize:10px !important;}
![Page 34: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/34.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSB. Sélecteurs
Voir également document ci-joint
Syntaxe de regroupements :
On peur regrouper des sélecteurs pour une même famillepropriété
ex :
.texte, p, h1, h2 {
Marginleft : 0;
}
On peut regrouper des propriétés autour d’une famille quelque soient ses propriétés
ex :
p {
font: italic bold 120% Arial, sansserif;
}
![Page 35: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/35.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSC. Gestion des couleur et de la transparence
En CSS, le système de couleur est noté soit en hexadécimal (blanc = #000000),
soit par nom des couleurs principales ex : ‘yellow’ pour jaune.
La gestion de la transparence est un hack. A utiliser avec précaution. Son utilisera sera standardisé dans CSS3.
Firefox {opacity: de 0 à 1;}
IE78 {filter:alpha(opacity=0 à 100);}
![Page 36: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/36.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. Typographie et mise en forme de caractères
Les polices standards :
![Page 37: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/37.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. Typographie et mise en forme de caractères
Déclaration des polices en CSS (en fonction des polices système disponibles) :
body {
fontfamily : ‘Trebuchet MS’, times, serif;
}
![Page 38: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/38.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. Typographie et mise en forme de caractères
Unité de taille des polices en CSS
Unité de taille fixe : en points (pt) (1pt = 0.35mm)
Unité de taille relative : px, % et cadratin
en «!M!» (em) pour la largeur
En «!X!» (ex) pour la hauteur
Définit relativement à la taille déférence du texte contenu dans le conteneur.
Le dimensionnement relatif permet d’afficher, via le navigateur, la police en plus grand ou plus petit avec une mise en page fluide.
![Page 39: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/39.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSD. Typographie et mise en forme de caractères
Les motsclés de tailles :
xxsmall, xsmall, small, medium, large, xlarge et xxlarge
Ces tailles dépendent du navigateur utilisé !
![Page 40: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/40.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSE. Bordure, arrièreplan et images
‣Style de bordure
‣Épaisseur des bordures
‣Couleur des bordures
‣Arrières-plans et images de fond
‣Positionnement et répétition de l’image
‣Fixation de l’image/contenu
![Page 41: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/41.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSF. Positionnement
Le modèle des boîtes :
Pb fondamental : le modèle de boîte Microsoft est différent du modèle standard à différence d’affichage
Modèle standard : Largeur à l’écran = width+padding+border
Modèle Microsoft : Largeur à l’écran = width
Solution possible : le hack universel *{Margin:0; Padding:0;}
![Page 42: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/42.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSF. Positionnement
Il y a trois types de positionnement en CSS :
A. Positionnement dans le flux courant (flow)
B. Positionnement relatif
C. Positionnement absolu et notion de z-index (calque)
Applications : centrage, float, menu…
![Page 43: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/43.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
‣Créer un environnement structurant pour organiser spatialement une interface
‣Mettre en place un framework CSS facilitant l’organisation des éléments par rapport à une grille
‣Optimiser le workflow conception/réalisation
Le Grid Design a pour objectif de :
http://www.thegridsystem.org
![Page 44: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/44.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
Principe d’une grille de mise en page :
![Page 45: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/45.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
Principe d’une grille de mise en page :
![Page 46: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/46.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSG. Grid Design
Principe d’une grille de mise en page :
![Page 47: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/47.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
![Page 48: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/48.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
![Page 49: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/49.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
![Page 50: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/50.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Exemple simple
3. CSSG. Grid Design
![Page 51: Mmi Web Design P2](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5575b3e9d8b42a3b498b4ee4/html5/thumbnails/51.jpg)
Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSSH. Initiation au framework Blueprint
http://www.blueprintcss.org