SlideShare une entreprise Scribd logo
WEB DESIGN
                             Master 2 MMI | Université Panthéon Sorbonne




Octobre 2009 : Partie 2/4                                             David Raichman Senior UX Designer @ OgilvyInteractive
1. HTML ET XHTML




                   Web Design Master 2 MMI Université Panthéon Sorbonne
1. HTML ET XHTML
A. 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 :




                                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
A. 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




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
B. Eléments contenus et balises




      <balise ouvrante>contenu</balise fermante>
               {        élément




                                        Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
B. 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>




                                                          Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
C. Eléments contenus et balises

              Balises de type bloc                                          Balises de type en ligne

   Un élément de type bloc peut contenir un ou                    Un élément de type ligne ne peut renfermer que
   plusieurs éléments bloc et/ou en ligne, sauf                   d’autres éléments de type ligne.
   paragraphe <p> et titres <h1>, <h2>,…
   Une mise en page se fera donc de préférence à                  Il existe en fait 2 sortes d’éléments de type ligne :
   l’aide de balise de type bloc. La plus indiquée pour           «!remplacés!» et «!non remplacés!».
   cet usage est <div> : c’est une balise générique               -Seuls les éléments remplacés acceptent des
   servant de conteneur neutre.                                   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>.

                                                    (%)&*&$'+,$-.$/0



                       !"!#$%&'!"#$


                                                       :2/;<'+=2.>0
                    !"!#$%&'%&'"()&%




                                                   12.3"$'.245#$%&'67819             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balises bloc
    Balise                             Description                                                      Exemple
                 Introduit des citations longues.
                 Par défaut, certains navigateurs prévoient une marge        <p>Kant disait :<p/><blockquote><p>l'espace et le temps
 <blockquote>
                 gauche aux blocs de citation, qu'on pourra bien sûr         sont les formes de notre sensibilité</p></blockquote>
                 modifier en CSS.

                 Conteneur générique de type bloc.
                 Cette balise n'apporte pas de sens spécifique,               <div><p>Voici un texte <em>important</em></p><p>Et un
     <div>
                 comme la balise <span>. Elle sert à regrouper               autre texte <strong>imortant</strong></p></div>
                 d'autres balises de type bloc ou ligne.


                                                                            <dl>
                 Liste de définitions, utile pour structurer les éléments
                                                                            <dt>Titre de l'élément</dt>
                 associant des définitions ou contenus à des termes ou
     <dl>                                                                   <dd>description de l'élément</dd>
                 à des titres. Ces listes distinguent les titres (<dt>) des
                                                                            <dd>Suite de la description</dd>
                 éléments de définition (<dd>)
                                                                            </dl>




                 Balise délimitant un formulaire interactif. Elle contient   <form action="pagesuivante.php"
                 généralement des éléments d'interface (champs de            method="get"><p><input type="text" name="recherche" />
    <form>       texte, boutons de validation, cases à cocher,…) Cet         <input type="submit" value="ok" />
                 élément doit renfermer immédiatement d'autres               </p>
                 élément de type bloc.                                       </form>



                 HTML prévoit six niveaux de titres, hiérarchiquement
 <h1>, <h2>, …   placé sous le titre principal (<h1>). Ces éléments
                                                                             <h1>Titre principal</h1>
     <h6>        constituent une exception à la règle des blocs ; ils ne
                 peuvent contenir d'autres blocs.

                                                                                         Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balises bloc
   Balise                          Description                                                  Exemple
                                                                   <ul>
               Ces deux balises désignent des listes ordonnées     <li>premier objet de la liste</li>
  <ol>, <ul>
               (<ol>) ou à puces simples (<li>)                    <li>second objet de la liste</li>
                                                                   </ul>


               Balise désignant un paragraphe de texte. Cet élément
     <p>       constitue une exception à la règle des blocs car il ne <p>Un paragraphe de texte</p>
               peut en contenir d'autres.


                                                                   <table>
                                                                   <tr>
               Tableau contenant des données. Les cellules du      <td>cellule 1</td>
   <table>     tableau sont d'abord rassemblés sous forme de rangé <td>cellule 2</td>
               ou lignes (<tr>).                                   </tr>
                                                                   </table>




                                                                                 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balises en ligne
    Balise                      Description                                                   Exemple

              Désigne un lien hypertexte. Elle s’accompagne
              de l’attribut href, qui renferme la cible du lien
     <a>                                                          <a href= "page5.htm">allez en page 5</a>
              (son contenu représentant le texte à cliquer
              pour activer le lien)

              Met en emphase une portion de texte. Quand la
              police utilisée est droite, la plupart des    <p>Voici un texte <em>important</em></p><p>Et un autre
    <em>
              navigateurs graphiques la traduisent comme    texte <strong>imortant</strong></p>
              une mise en italique.


              Inclut une image dans le document Cette balise
              es accompagné des attributs alt (texte
    <img>     alternatif) et src (qui indique le chemin de     <img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ />
              l’image). Les navigateurs supportent les formats
              gif, png et jpg


              Balise utilisée pour les citations courtes. On
     <q>      utilisera <blockquote> pour les citations           <p>comme le dit Kant <q>la pensée…</q></p>
              longues.

              Conteneur générique de type bloc. Cette balise
              n'apporte pas de sens spécifique, comme la
   <span>                                                         <span id=”fluo”>le texte</span>
              balise <span>. Elle sert à regrouper d'autre
              balises de type bloc ou ligne.

              Indique un renforcement général représenté en
   <strong>                                                       <p>ceci est<strong>important ! </strong></p>
              gras dans les navigateurs graphiques



                                                                                Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
D. Différencier HTML et XHTML dans la pratique

  La syntaxe obsolète :

  ‣ Balises écrites en majuscules, ex :<P>

  ‣Balise ouvrante sans balise fermante ex :
  <br>, <img src=!"xyz.jpg">,<p> ou <li>.

  ‣En XHTML, les balises vides ont la syntaxe suivante :
  <balise vide />




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
D. 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>




                                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
E. Pratique : l’ami ultime de DW...




                    Firebug



                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
F. 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




                                                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING




                         Web Design Master 2 MMI Université Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
A. 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.




                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif




Low résolution                                               Hi résolution




                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
A. Degré de précision
                        Interactif
      Prototype                                             Prototype
         papier                                             digital




Low résolution                                               Hi résolution




     Sketching                                             Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
A. Degré de précision
                        Interactif
      Prototype                                             Prototype
         papier                                             digital




Low résolution                                               Hi résolution




     Sketching                                             Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif
      Prototype                                             Prototype
         papier                                             digital




Low résolution                                               Hi résolution




     Sketching                                             Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif
      Prototype                                             Prototype
         papier                                             digital




Low résolution                                               Hi résolution




     Sketching                                             Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif
      Prototype                                             Prototype
         papier                                             digital




Low résolution                                               Hi résolution




     Sketching                                             Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                          Interactif
      Prototype                                               Prototype
         papier                                               digital




Low résolution          Wireframes                             Hi résolution




     Sketching                                               Ecrans (psd, jpg...)

                          Statique
                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
C. Hiérarchie visuelle
                                 accès autre sites


   logo                       branded header

                navigation principale + recherche +panier




   navigation                   produits                    accès
   secondaire                                               utilisateurs




                                 footer



                                                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran

                                                                                                                                        FR     EN          Les sites Renault




           Logo            RENAULT-MERCHANDISING.COM
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste            mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles            2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team
         Sportswear                                                   Team                                                Sportswear                               Identifiant
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets                                                         100% nylon, disponible                                    100% nylon, disponible                             Mémoriser mes
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES    CGU


                                                                                                                                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran                                                                !"#$%&'


                                              !"#$%&'($)*"+!,)                                                                          FR     EN          Les sites Renault




           Logo            RENAULT-MERCHANDISING.COM
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste            mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles            2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team




                                                                                                                                                                                                           ()*%&'
         Sportswear                                                   Team                                                Sportswear                               Identifiant
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets                                                         100% nylon, disponible                                    100% nylon, disponible                             Mémoriser mes
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES    CGU


                                                                                                                                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran                                                                !"#$%&'


                                              !"#$%&'($)*"+!,)                                                                          FR     EN          Les sites Renault




           Logo                           !"""#$%
                           RENAULT-MERCHANDISING.COM
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste                    mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles                    2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team




                                                                                                                                                                                                                   ()*%&'
         Sportswear                                                   Team                                                Sportswear                               Identifiant




                                                                                                                                                                                 $()*+)(#,-(.//
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets




                                                                                                                                                                                                  &'"#$%
                                                                        100% nylon, disponible                                    100% nylon, disponible                              Mémoriser mes




                                                                      !"#$%&'()$
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                 informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                   OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES            CGU


                                                                                                                                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran                                                                !"#$%&'


                                              !"#$%&'($)*"+!,)                                                                          FR     EN          Les sites Renault




           Logo                           !"""#$%
                           RENAULT-MERCHANDISING.COM


                                                                960 ou 950 px
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste                    mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles                    2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team




                                                                                                                                                                                                                   ()*%&'
         Sportswear                                                   Team                                                Sportswear                               Identifiant




                                                                                                                                                                                 $()*+)(#,-(.//
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets




                                                                                                                                                                                                  &'"#$%
                                                                        100% nylon, disponible                                    100% nylon, disponible                              Mémoriser mes




                                                                      !"#$%&'()$
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                 informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                   OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES            CGU


                                                                                                                                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS




         Web Design Master 2 MMI Université Panthéon Sorbonne
3. CSS
A. 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>




                                                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
A. 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*/
  }




                                                  Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
B. Sélecteurs
  Voir également document ci-joint


   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;
                                     }
                                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
B. 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;}




                                                          Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
B. 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;
  }



                                                         Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
C. 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);}




                                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. Typographie et mise en forme de caractères

   Les polices standards :




                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. 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;
            }




                                                         Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. 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.




                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. 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é !




                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
E. 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




                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
F. 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;}
                                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
F. 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…




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Le Grid Design a pour objectif de :


  ‣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




                      http://www.thegridsystem.org




                                                         Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Principe d’une grille de mise en page :




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Principe d’une grille de mise en page :




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Principe d’une grille de mise en page :




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
H. Initiation au framework Blueprint




                     http://www.blueprintcss.org




                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne

Contenu connexe

Tendances

XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQueryXML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
Rachid NID SAID
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTMLBruno Delb
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
Mohammed Amine Mostefai
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
Erwan Tanguy
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
Emmanuelle Morlock
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015Emmanuelle Morlock
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
Thabet Chokri
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
Abdoulaye Dieng
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
Patrick Vincent
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
Patrick Vincent
 

Tendances (20)

XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQueryXML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
cours Php
cours Phpcours Php
cours Php
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
XML
XMLXML
XML
 
Memento HTML CSS
Memento HTML CSSMemento HTML CSS
Memento HTML CSS
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
Cours3 gdm sql
Cours3 gdm sqlCours3 gdm sql
Cours3 gdm sql
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
 

En vedette

7 Reasons Why You're Not Getting Hired
7 Reasons Why You're Not Getting Hired7 Reasons Why You're Not Getting Hired
7 Reasons Why You're Not Getting Hired
Joya Cousin
 
DCP Organizational Skills Irving ISD
DCP Organizational Skills Irving ISDDCP Organizational Skills Irving ISD
DCP Organizational Skills Irving ISD
Ryan Patton
 
TIME MANAGEMENT & ORGANIZATIONAL SKILLS II
TIME MANAGEMENT & ORGANIZATIONAL SKILLS IITIME MANAGEMENT & ORGANIZATIONAL SKILLS II
TIME MANAGEMENT & ORGANIZATIONAL SKILLS II
Sandy Chernoff
 
Organizational skills
Organizational skillsOrganizational skills
Organizational skills
almapedraza
 
Getting organized 1
Getting organized 1Getting organized 1
Getting organized 1
abujumana
 
Juan Pablo II
Juan Pablo IIJuan Pablo II
Juan Pablo II
lucasjdd
 
Getting Organized Tips
Getting Organized TipsGetting Organized Tips
Getting Organized Tips
Get Organized Wizard
 
Getting Organized For The Playa
Getting Organized For The PlayaGetting Organized For The Playa
Getting Organized For The Playa
Sparkzy
 
Organizational Skills
Organizational SkillsOrganizational Skills
Organizational Skills
Bearkits
 
Getting Organized & Time Management
Getting Organized & Time ManagementGetting Organized & Time Management
Getting Organized & Time Management
Sumera Muhammad
 
Getting Organized Guidebook
Getting Organized GuidebookGetting Organized Guidebook
Getting Organized Guidebook
MOCKXAMPLE
 
Why Students Need to be Organized
Why Students Need to be OrganizedWhy Students Need to be Organized
Why Students Need to be Organized
Eileen Roth
 
Definition of basic organizational skills
Definition of basic organizational skillsDefinition of basic organizational skills
Definition of basic organizational skills
Cr Faezah
 
Organizational and Time Management Skills
Organizational and Time Management SkillsOrganizational and Time Management Skills
Organizational and Time Management Skills
Simmons Marcus
 
Organizational Skills Presentation
Organizational Skills PresentationOrganizational Skills Presentation
Organizational Skills Presentation
Emily Kates
 
Time and Priority Management
Time and Priority ManagementTime and Priority Management
Time and Priority Management
Sherry Prindle
 
Time Management And Organizational Skills
Time Management And Organizational SkillsTime Management And Organizational Skills
Time Management And Organizational Skills
Simmons Marcus
 
Organizational skills powerpoint
Organizational skills powerpointOrganizational skills powerpoint
Organizational skills powerpoint
sgufpsy
 
Priority Management
Priority ManagementPriority Management
Priority Management
Barbara Nixon
 
Planning, prioritising and efficiency: a Time Management Workshop
Planning, prioritising and efficiency: a Time Management WorkshopPlanning, prioritising and efficiency: a Time Management Workshop
Planning, prioritising and efficiency: a Time Management Workshop
Improvement Skills Consulting Ltd.
 

En vedette (20)

7 Reasons Why You're Not Getting Hired
7 Reasons Why You're Not Getting Hired7 Reasons Why You're Not Getting Hired
7 Reasons Why You're Not Getting Hired
 
DCP Organizational Skills Irving ISD
DCP Organizational Skills Irving ISDDCP Organizational Skills Irving ISD
DCP Organizational Skills Irving ISD
 
TIME MANAGEMENT & ORGANIZATIONAL SKILLS II
TIME MANAGEMENT & ORGANIZATIONAL SKILLS IITIME MANAGEMENT & ORGANIZATIONAL SKILLS II
TIME MANAGEMENT & ORGANIZATIONAL SKILLS II
 
Organizational skills
Organizational skillsOrganizational skills
Organizational skills
 
Getting organized 1
Getting organized 1Getting organized 1
Getting organized 1
 
Juan Pablo II
Juan Pablo IIJuan Pablo II
Juan Pablo II
 
Getting Organized Tips
Getting Organized TipsGetting Organized Tips
Getting Organized Tips
 
Getting Organized For The Playa
Getting Organized For The PlayaGetting Organized For The Playa
Getting Organized For The Playa
 
Organizational Skills
Organizational SkillsOrganizational Skills
Organizational Skills
 
Getting Organized & Time Management
Getting Organized & Time ManagementGetting Organized & Time Management
Getting Organized & Time Management
 
Getting Organized Guidebook
Getting Organized GuidebookGetting Organized Guidebook
Getting Organized Guidebook
 
Why Students Need to be Organized
Why Students Need to be OrganizedWhy Students Need to be Organized
Why Students Need to be Organized
 
Definition of basic organizational skills
Definition of basic organizational skillsDefinition of basic organizational skills
Definition of basic organizational skills
 
Organizational and Time Management Skills
Organizational and Time Management SkillsOrganizational and Time Management Skills
Organizational and Time Management Skills
 
Organizational Skills Presentation
Organizational Skills PresentationOrganizational Skills Presentation
Organizational Skills Presentation
 
Time and Priority Management
Time and Priority ManagementTime and Priority Management
Time and Priority Management
 
Time Management And Organizational Skills
Time Management And Organizational SkillsTime Management And Organizational Skills
Time Management And Organizational Skills
 
Organizational skills powerpoint
Organizational skills powerpointOrganizational skills powerpoint
Organizational skills powerpoint
 
Priority Management
Priority ManagementPriority Management
Priority Management
 
Planning, prioritising and efficiency: a Time Management Workshop
Planning, prioritising and efficiency: a Time Management WorkshopPlanning, prioritising and efficiency: a Time Management Workshop
Planning, prioritising and efficiency: a Time Management Workshop
 

Similaire à Mmi Web Design P2

Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
Yaya Im
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
Mounir Gouiouez
 
Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
kitsformation
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3Annabi Gihed
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
les balises HTML5.pdf
les balises HTML5.pdfles balises HTML5.pdf
les balises HTML5.pdf
benfifiaymen36
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
kadarabdillahi125
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to Basics
Jean Michel
 
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
pixees Scienceparticipative
 

Similaire à Mmi Web Design P2 (20)

Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
 
Cours html5
Cours html5Cours html5
Cours html5
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
les balises HTML5.pdf
les balises HTML5.pdfles balises HTML5.pdf
les balises HTML5.pdf
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to Basics
 
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
 

Mmi Web Design P2

  • 1. WEB DESIGN Master 2 MMI | Université Panthéon Sorbonne Octobre 2009 : Partie 2/4 David Raichman Senior UX Designer @ OgilvyInteractive
  • 2. 1. HTML ET XHTML Web Design Master 2 MMI Université Panthéon Sorbonne
  • 3. 1. HTML ET XHTML A. 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 : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 4. 1. HTML ET XHTML A. 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 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 5. 1. HTML ET XHTML B. Eléments contenus et balises <balise ouvrante>contenu</balise fermante> { élément Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 6. 1. HTML ET XHTML B. 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> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 7. 1. HTML ET XHTML C. Eléments contenus et balises Balises de type bloc Balises de type en ligne Un élément de type bloc peut contenir un ou Un élément de type ligne ne peut renfermer que plusieurs éléments bloc et/ou en ligne, sauf d’autres éléments de type ligne. paragraphe <p> et titres <h1>, <h2>,… Une mise en page se fera donc de préférence à Il existe en fait 2 sortes d’éléments de type ligne : l’aide de balise de type bloc. La plus indiquée pour «!remplacés!» et «!non remplacés!». cet usage est <div> : c’est une balise générique -Seuls les éléments remplacés acceptent des servant de conteneur neutre. 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>. (%)&*&$'+,$-.$/0 !"!#$%&'!"#$ :2/;<'+=2.>0 !"!#$%&'%&'"()&% 12.3"$'.245#$%&'67819 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 8. Balises bloc Balise Description Exemple Introduit des citations longues. Par défaut, certains navigateurs prévoient une marge <p>Kant disait :<p/><blockquote><p>l'espace et le temps <blockquote> gauche aux blocs de citation, qu'on pourra bien sûr sont les formes de notre sensibilité</p></blockquote> modifier en CSS. Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, <div><p>Voici un texte <em>important</em></p><p>Et un <div> comme la balise <span>. Elle sert à regrouper autre texte <strong>imortant</strong></p></div> d'autres balises de type bloc ou ligne. <dl> Liste de définitions, utile pour structurer les éléments <dt>Titre de l'élément</dt> associant des définitions ou contenus à des termes ou <dl> <dd>description de l'élément</dd> à des titres. Ces listes distinguent les titres (<dt>) des <dd>Suite de la description</dd> éléments de définition (<dd>) </dl> Balise délimitant un formulaire interactif. Elle contient <form action="pagesuivante.php" généralement des éléments d'interface (champs de method="get"><p><input type="text" name="recherche" /> <form> texte, boutons de validation, cases à cocher,…) Cet <input type="submit" value="ok" /> élément doit renfermer immédiatement d'autres </p> élément de type bloc. </form> HTML prévoit six niveaux de titres, hiérarchiquement <h1>, <h2>, … placé sous le titre principal (<h1>). Ces éléments <h1>Titre principal</h1> <h6> constituent une exception à la règle des blocs ; ils ne peuvent contenir d'autres blocs. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 9. Balises bloc Balise Description Exemple <ul> Ces deux balises désignent des listes ordonnées <li>premier objet de la liste</li> <ol>, <ul> (<ol>) ou à puces simples (<li>) <li>second objet de la liste</li> </ul> Balise désignant un paragraphe de texte. Cet élément <p> constitue une exception à la règle des blocs car il ne <p>Un paragraphe de texte</p> peut en contenir d'autres. <table> <tr> Tableau contenant des données. Les cellules du <td>cellule 1</td> <table> tableau sont d'abord rassemblés sous forme de rangé <td>cellule 2</td> ou lignes (<tr>). </tr> </table> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 10. Balises en ligne Balise Description Exemple Désigne un lien hypertexte. Elle s’accompagne de l’attribut href, qui renferme la cible du lien <a> <a href= "page5.htm">allez en page 5</a> (son contenu représentant le texte à cliquer pour activer le lien) Met en emphase une portion de texte. Quand la police utilisée est droite, la plupart des <p>Voici un texte <em>important</em></p><p>Et un autre <em> navigateurs graphiques la traduisent comme texte <strong>imortant</strong></p> une mise en italique. Inclut une image dans le document Cette balise es accompagné des attributs alt (texte <img> alternatif) et src (qui indique le chemin de <img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ /> l’image). Les navigateurs supportent les formats gif, png et jpg Balise utilisée pour les citations courtes. On <q> utilisera <blockquote> pour les citations <p>comme le dit Kant <q>la pensée…</q></p> longues. Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, comme la <span> <span id=”fluo”>le texte</span> balise <span>. Elle sert à regrouper d'autre balises de type bloc ou ligne. Indique un renforcement général représenté en <strong> <p>ceci est<strong>important ! </strong></p> gras dans les navigateurs graphiques Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 11. 1. HTML ET XHTML D. Différencier HTML et XHTML dans la pratique La syntaxe obsolète : ‣ Balises écrites en majuscules, ex :<P> ‣Balise ouvrante sans balise fermante ex : <br>, <img src=!"xyz.jpg">,<p> ou <li>. ‣En XHTML, les balises vides ont la syntaxe suivante : <balise vide /> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 12. 1. HTML ET XHTML D. 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> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 13. 1. HTML ET XHTML E. Pratique : l’ami ultime de DW... Firebug Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 14. 1. HTML ET XHTML F. 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 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 15. 2. RUDIMENTS DE WIREFRAMING Web Design Master 2 MMI Université Panthéon Sorbonne
  • 16. 2. RUDIMENTS DE WIREFRAMING A. 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. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 17. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Low résolution Hi résolution Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 18. 2. RUDIMENTS DE WIREFRAMING A. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 19. 2. RUDIMENTS DE WIREFRAMING A. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 20. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 21. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 22. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 23. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 24. 2. RUDIMENTS DE WIREFRAMING C. Hiérarchie visuelle accès autre sites logo branded header navigation principale + recherche +panier navigation produits accès secondaire utilisateurs footer Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 25. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 26. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran !"#$%&' !"#$%&'($)*"+!,) FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team ()*%&' Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 27. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran !"#$%&' !"#$%&'($)*"+!,) FR EN Les sites Renault Logo !"""#$% RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team ()*%&' Sportswear Team Sportswear Identifiant $()*+)(#,-(.// Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets &'"#$% 100% nylon, disponible 100% nylon, disponible Mémoriser mes !"#$%&'()$ Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 28. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran !"#$%&' !"#$%&'($)*"+!,) FR EN Les sites Renault Logo !"""#$% RENAULT-MERCHANDISING.COM 960 ou 950 px ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team ()*%&' Sportswear Team Sportswear Identifiant $()*+)(#,-(.// Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets &'"#$% 100% nylon, disponible 100% nylon, disponible Mémoriser mes !"#$%&'()$ Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 29. 3. CSS Web Design Master 2 MMI Université Panthéon Sorbonne
  • 30. 3. CSS A. 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> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 31. 3. CSS A. 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*/ } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 32. 3. CSS B. Sélecteurs Voir également document ci-joint 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; } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 33. 3. CSS B. 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;} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 34. 3. CSS B. 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; } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 35. 3. CSS C. 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);} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 36. 3. CSS D. Typographie et mise en forme de caractères Les polices standards : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 37. 3. CSS D. 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; } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 38. 3. CSS D. 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. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 39. 3. CSS D. 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é ! Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 40. 3. CSS E. 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 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 41. 3. CSS F. 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;} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 42. 3. CSS F. 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… Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 43. 3. CSS G. Grid Design Le Grid Design a pour objectif de : ‣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 http://www.thegridsystem.org Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 44. 3. CSS G. Grid Design Principe d’une grille de mise en page : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 45. 3. CSS G. Grid Design Principe d’une grille de mise en page : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 46. 3. CSS G. Grid Design Principe d’une grille de mise en page : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 47. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 48. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 49. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 50. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 51. 3. CSS H. Initiation au framework Blueprint http://www.blueprintcss.org Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne