Mmi Web Design P2
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,698
On Slideshare
1,698
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
52
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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