(+) Conception de Sites WEB

Actualité du cours
Conception http://eric.univ-lyon2.fr/~jdarmont/?page_id=440
de sites Web
http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2
L1 bidisciplinaire IDEA
Année 2014-2015
Jérôme Darmont https://twitter.com/darmont_lyon2 hashtag #webidea
http://eric.univ-lyon2.fr/~jdarmont/
Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 1
Objectifs du cours Plan du cours
Structuration d’informations Le langage HTML
Présentation d’informations en ligne Éléments de design Web, standards,

accessibilité
Respect des standards du Web

Feuilles de style en cascade (CSS)
Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 2 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 3
Un peu d'histoire… Versions successives de HTML

HTML : HyperText Markup Language 1990 : HTML 1
Liens hypertextes
1995 : HTML 2
Langage à base de balises
1995 : HTML+ et HTML 3 (non standards)
Objectif : publier sur le World Wide Web (ou WWW, W3,
1997 : HTML 3.2 et HTML 4 (standards W3C)
ou Web) des documents formatés
2000 : XHTML 1.0 (HTML 4 réécrit en XML)
Développé par Tim Berners-Lee, inventeur du Web, au 2001 : XHTML 1.1
CERN (Suisse) en 1989
2003 : XHTML 2 (évolution de XHTML 1 abandonnée en 2009)
2008 : HTML 5 / XHTML 5 (évolution de HTML 4, en cours)
1
Éléments, balises et attributs Règles d'écriture XHTML
Élément : nom, notion abstraite Les noms des balises doivent être écrits en minuscules.
Ex. Document HTML : html
Toute balise ouverte doit être fermée.
Balise : forme concrète d'un élément
Ex. de balise ouvrante : <html> Les chevauchements entre balise sont interdits
Ex. de balise fermante : </html> (documents bien formés).
Attribut : propriété d'un élément (nom, valeur) Les noms des attributs doivent être écrits en minuscules.
Ex. <a href="http://www.univ-lyon2.fr">
Les valeurs des attributs doivent être entre guillemets
Nom Valeur doubles.
Squelette d'un document HTML En-tête
<!DOCTYPE html>  utilisées à des fins diverses
<html> Titre : <title>…</title>
<head> Métadonnées : <meta />
 Ex. Jeu de caractères, auteur, mots-clés, description de la
</head> page…
Servent notamment au référencement dans les moteurs de
<body> recherche

</body> Note : Une balise vide peut se noter <balise></balise>
ou <balise />, au choix.
</html>
Exemple d'en-tête Corps du document

<head> Éléments de structuration du document
 Invisibles
<meta charset="utf-8" />
Permettent la mise en page ultérieure du document

Permettent la génération automatique, par ex., d’une table des
<meta name="Author" content="Jérôme Darmont" />
matières, des figures, etc.
<meta name="Keywords" content="Enseignement,Informatique" />
<meta name="Description" content="Exemple de page HTML" />
 Éléments qui apparaissent explicitement à l’affichage
<title>Exemple de page HTML</title> Texte
</head> Images
…
2
Structuration du document Titres, paragraphes, séparateurs
Contenu principal : <main> </main>
Section : <section> </section> Titres (headings) : Six niveaux notés h1 à h6
Ex. <h1>Titre de niveau 1</h1>
Article : <article> </article>
Aparté : <aside> </aside> Paragraphes (séparés entre eux par un espace)
Ex. <p>Ceci est un paragraphe</p>
Entête : <header> </header>
Pied de page : <footer> </footer> Séparateurs :
Menu/navigation : <nav> </nav> Retour à la ligne (sans espace) : <br />
Ligne horizontale : <hr />
Boîte de dialogue : <dialog> </dialog>
Autres blocs de texte prédéfinis Formatage de texte

Texte appuyé : <strong>…</strong>
Adresse
Ex. <address>16 quai Claude Bernard</address> Emphase : <em>…</em>
Surlignage : <mark>…</mark>
Citation
Ex. <blockquote>Mignonne allons voir…</blockquote> Police « machine à écrire » : <code>…</code>
En indice : <sub>…</sub>
Texte préformaté
En exposant : <sup>…</sup>
Ex. <pre>Le formatage (tabulations) sera
conservé Caractères spéciaux :
à l'écran</pre> < : < & : &
> : > " : "
espace insécable :
Imbrication des balises Liens hypertextes

 Forme générale : <a href="URI">libellé</a>
<header><h1>Présentation de la licence IDEA</h1></header> URI : Uniform Resource Identifier
<article> (anciennement URL : Uniform Resource Locator)
<p>La <em>licence bidisciplinaire</em> <strong>Sciences
Économiques et de Gestion</strong> mention <strong>Informatique Absolu (adresse complète)
Décisionnelle et Économétrie Appliquée</strong> Ex. http://eco.univ-lyon2.fr
(<strong><em>IDEA</em></strong>) associe aux enseignements ftp://ftp.ciril.fr
majeurs de la <em>licence de Sciences Économiques et de mailto:jerome.darmont@univ-lyon2.fr
Gestion</em> des unités d’enseignements spécifiques permettant un
renforcement de la formation en : <br /> mathématiques pour Relatif (à partir du répertoire courant)
l’économie, statistique, gestion et traitement informatiques des Ex. page_suivante.html
données.</p> sous_rep/page_dans_repertoire.html
</article>
Exemple : <a href="http://www.univ-lyon2.fr">Université Lyon 2</a>
3
Ancres Images
Permettent un lien vers un endroit précis dans une Formats reconnus : GIF, JPEG, PNG
page Web
Balise : <img src="URI" alt="description" />
Définition dans une page p1 : attribut id
Ex. <img src="lyon2.gif" alt="Logo Lyon 2" />
Ex. <h1 id="menu">MENU</h1>
Ex. <img src="http://eric.univ-lyon2.fr/~jdarmont/img/lyon2.gif" alt="UL2" />
Référence depuis la même page p1
Ex. <a href="#menu">Aller au menu</a> Lien sur une image
Ex.
Référence depuis une autre page p2 <a href="http://www.univ-lyon2.fr">
<img src="lyon2.gif" alt="Logo Lyon 2" />
Ex. <a href="p1.html#menu">Retour menu</a> </a>
Multimédia Figures
Sons : balise <audio> </audio> Élément de structuration (comme section, article…)
Vidéos : balise <video> </video>
Balise : <figure> </figure>
Attributs communs Légende : <figcaption> </figcaption>
src : URI du contenu
controls : affiche les contrôles du lecteur multimédia
Exemple :
<figure>
autoplay : démarrage dès que possible <img src="tim-berners-lee.jpg" alt="Photo Tim BL" />
loop : en boucle <video src="test.ogv" controls="controls" muted="muted">
muted : sans son Le format .ogv n'est pas supporté.
</video>
Exemple <audio src="chord.wav" controls="controls">
<audio src="test.mp3" controls="controls" loop="loop"> Le format .wav n'est pas supporté.
Le format MP3 n’est pas supporté par votre navigateur. </audio>
</audio> <figcaption>Tout le multimédia de HTML5</figcaption>
</figure>
Jauges Listes ordonnées et non-ordonnées
Barre de progression Listes à puces : <ul> </ul>

<progress max="100" value="75"></progress>
Listes numérotées : <ol> </ol>
Apparence :
Exemple
Barre de mesure <ul>
<meter min="0" max="100" low="10" high="90" <li>1er élément</li>
optimum="50" value="75">75 %</meter> <li>2ème élément</li>
<li>3ème élément</li>
Apparence : variable selon les navigateurs </ul>
4
Listes de définitions Imbrication de listes
Exemple Exemple
<dl>
<dt>1er terme</dt>
<dd>Définition du 1er terme</dd>
<ul>
<dt>2ème terme</dt> <li>Élément non ordonné 1
<dd>Définition du 2ème terme</dd> <ol>
</dl> <li>Sous-élément ordonné 1.1</li>
<li>Sous-élément ordonné 1.2</li>
Résultat à l'affichage </ol>
1er terme
Définition du 1er terme
</li>
2ème terme <li>Élément non ordonné 2</li>
Définition du 2ème terme </ul>
Imbrication de listes Tableaux simples

Résultat à l’affichage Tableau : Ensemble de lignes elles-mêmes constituées
de cellules
• Élément non ordonné 1 Définition d'un tableau : <table> </table>
1. Sous-élément ordonné 1.1
Légende : <caption> </caption>
2. Sous-élément ordonné 1.2
Définition d'une ligne : <tr> </tr>
• Élément non ordonné 2
Définition d'une cellule d'en-tête : <th> </th>
Définition d'une cellule normale : <td> </td>
Exemple de tableau Apparence du tableau exemple

<table>
<caption>Mes totaux</caption>
Mes totaux
<tr>
<th>Jour</th> <th>Montant</th> <th>Total</th> Jour Montant Total
</tr>
<tr> Lundi 456 euros 456 euros
<td>Lundi</td> <td>456 euros</td> <td>456 euros</td> Mardi 200 euros 656 euros
</tr>
<tr>
<td>Mardi</td> <td>200 euros</td> <td>656 euros</td>
</tr>
</table>
5
Tableaux à cellules recouvrantes Tableaux à cellules recouvrantes
"Fusion" de cellules
Fonctionne sur les cellules <td> ou <th>
Cellule sur plusieurs colonnes : attribut colspan

C1 C2 L1 Ex. <table> <tr> <td>C1</td> <td>C2</td> </tr>
<tr> <td colspan="2">C12</td> </tr> </table>
L12 Cellule sur plusieurs lignes : attribut rowspan

Ex. <table> <tr> <td rowspan="2">L12</td>
<td>L1</td> </tr>
C12 L2 <tr> <td>L2</td> </tr> </table>
Plan du cours Dix erreurs de base à éviter

Fonds sombres, images de fonds chargées, couleurs
Le langage HTML trop nombreuses
Gadgets technologiques (animations, textes qui
défilent, sons, Javascripts divers…)
Éléments de design Web, standards,
accessibilité Surcharger la page de texte ou d'images :
trop d'information tue l'information
Absence d'aide à la navigation
Liens de couleur non standard
Dix erreurs de base à éviter Design « Web 2.0 » *

Ouvrir de nouvelles fenêtres, des pop-ups, etc.
Qu’est-ce que le Web 2.0 ?
Pages lourdes à charger (contenant des images
volumineuses, par exemple) Développement de la Web économie
Pages trop larges (scrolling latéral) Interactivité accrue des sites Web (AJAX)
Pages trop longues (scrolling vertical) Web communautaire, réseaux sociaux
Requérir de l'utilisateur une configuration particulière Nouvelle école de design Web
("site optimisé pour tel navigateur en telle résolution")
* D’après webdesignfromscratch.com
6
Principe fondamental : la simplicité Comment « faire simple » ?
Chaque site / chaque page a un but précis. pixels décoratifs

Minimiser le ratio
pixels porteurs d’information
L’attention de l’utilisateur n’est pas infinie.
Supprimer tout les éléments non strictement nécessaires
Le concepteur doit aider l’utilisateur à trouver
l’information qu’il cherche. Essayer des solutions alternatives pour arriver au même
résultat plus simplement
Il ne faut pas noyer les informations importantes.
Utiliser les éléments visuel pour communiquer, jamais
Minimiser le bruit = économie, simplicité pour décorer
Exemple de simplification Éléments de présentation

Centrer le site dans la fenêtre du navigateur
Limiter le nombre de colonnes à 2 (3 maximum)
Contre-exemple !
Éléments de présentation Éléments de présentation

Distinguer clairement une section d’entête Identifier clairement les sections de la page
(logo ou marque bien visible, zone de navigation) Utiliser des couleurs (mais danger de distraction de l’utilisateur)
Espacer nettement les sections
7
Éléments de présentation Éléments de présentation
Texte en gros caractères Couleurs vives Délimitation de sections
Mise en valeur des informations importantes Mise en valeur
Facilité de lecture (accessibilité) d’éléments importants
Dégradés
Mise en place d’une
Titres en gras ambiance
Textures
Attire l’attention sur les
(reflets, transparence…)
zones importantes du site Ne pas attirer l’attention
ailleurs que sur le
Icônes contenu
À utiliser avec parcimonie !

Navigation Qu’est-ce que le W3C ?

Objectifs : l’utilisateur doit savoir facilement W3C : World Wide Web Consortium
Où il se trouve dans le site Organisation internationale indépendante des
Où il peut aller éditeurs de logiciels
Quelles sont options disponibles sur la page courante http://www.w3.org
Menu de navigation global Objectif : Développement de standards et de bonnes

Clairement séparé du contenu pratiques du Web
Différencié en termes de couleur et de forme
Gros, clairement et toujours visible
Directeur : Tim Berners-Lee
Texte des liens explicite
Contenu : Hyperliens bien différenciés du texte normal

Pourquoi utiliser les standards du W3C Pourquoi utiliser les standards du W3C
Éviter la « balkanisation du Web » des années 90

Contrôle qualité (validation des pages Web)
Interopérabilité et portabilité (smartphones, tablettes
tactiles…) Réduction considérable du volume des documents
Accessibilité aux personnes handicapées Référencement efficace dans les moteurs de recherche
Réduction des coûts de développement Pérennité des documents
Exploitation de la technologie XML (vers le Web Rétrocompatibilité avec les anciens navigateurs
sémantique / Web 3.0)
Exemple : moteurs de recherche (personnalisation, suggestions,
résumé d’informations…)
8
Accessibilité Accessibilité
26,4 % de la population française souffre d'une entrave dans
Préceptes d’accessibilité (suite) :
une activité quotidienne et 10 % est affectée d'un handicap.
(SVM, novembre 2008) Prévoir des en-têtes de ligne et de colonnes dans les
tableaux
Préceptes d’accessibilité : Définir des raccourcis clavier
Proposer un texte alternatif aux images (et contenus Éviter l’usage des cadres (frames)
multimédias en général)
Prévenir des changements de langue dans le texte
Utiliser des feuilles de style
Expliciter les liens (« page d’accueil » >> « cliquer ici »)
Plan du cours Définition et caractéristiques

Cascading Style Sheets (CSS) :
Le langage HTML Feuilles de style en cascade
Première spécification par le W3C en 1996
Éléments de design Web, standards, Séparation du contenu et de la présentation
accessibilité
Définition de styles génériques pour les balises
Syntaxe différente de HTML
Possibilité de validation automatique
Avantages Définitions de styles
Gestion simplifiée et globale de la présentation Trois localisations possibles (+local au +global)

d'un site Web
Dans une balise HTML : attribut style
Coûts de développement et de maintenance allégés Ex. <p style="color: blue; text-align: center;">…</p>
(code source allégé)
Dans une page HTML : balise <style>
Possibilité de présentations différentes selon le profil Dans l'en-tête de la page Web (head) :
<style type="text/css">…</style>
utilisateur, la résolution écran, pour l’impression…
Meilleure accessibilité Dans un fichier séparé
Appel dans l'en-tête de la page Web (head) :
<link rel="stylesheet" type="text/css" href="feuille_style.css" />
9
Notion de cascade Unités de taille
Imbrication des définitions : la plus locale l'emporte. Unités absolues

Ex. Définition de style dans un fichier externe vs. définition px : pixel
dans une balise pt : point
⇒ la définition locale de la balise prévaut
Imbrication des balises : le style d'une balise s'applique Unités relatives (à privilégier)
aux balises imbriquées. em : hauteur de ligne
Ex. <p>…<em>…</em>…</p> % : proportion par rapport à la taille de la
Si un style est appliqué à <p>, il s'applique à <em>. fenêtre
Spécification de couleurs Écriture d'une feuille de style
Nom prédéfini : aqua, black, blue, fuschia, green, gray, Feuille de style : ensemble de règles
lime, maroon, navy, olive, purple, red, silver, teal, white, Un sélecteur
yellow Des propriétés
Une valeur pour chaque propriété
Spécification RGB (Rouge Vert Bleu - RVB)
Ex. Jaune : rgb(255, 255, 0)
Exemple
h1 { color: yellow;
font-weight: bold;
Code RGB hexadécimal }
Ex. Jaune : #FFFF00
Sélecteurs Classe de style

Sélecteur universel : tous les éléments HTML Sélecteur défini par l'utilisateur qui permet de dissocier
Ex. * { color: blue; } un style de balises particulières
Ex. .style_rouge { color: red; }
Style d'une catégorie de balises .style_bleu { color: blue; }
Ex. h1 { color: #FF00FF; } p.parag_vert { color: green; }
Style de plusieurs catégories de balises

Ex. h1, h2, h3, p { color: green; } Sélecteur associé à un identifiant (id) particulier dans la
page Web
Style pour balises imbriquées Ex. #titre { text-align:center; color: navy; }
Ex. p em { color: red; } /* Italiques dans un paragraphe */
(Commentaire)
10
Classe de style Application des styles
Utilisation dans une page Web
Ex. <h1 class="style_rouge">Titre rouge</h1> À une partie d'un paragraphe : <span> </span>
<p class="style_rouge">Texte rouge</p> Ex. <p class="style_rouge">Ceci est rouge sauf
<p class="style_bleu">Texte bleu</p> <span class="style_bleu">ce qui est bleu</span></p>
<p class="parag_vert">Texte vert</p>
Application à un ensemble d'éléments : <div> </div> À un élément identifié (correspond au style #titre) :
Ex. <div class="style_bleu"> Ex. <div id="titre"> … </div>
<h1>…</h1> <p id="titre"> … </p>
<p>…</p>
<p>…</p>
</div>
Propriétés de couleur Propriétés de typographie
color color: black;

font-family font-family: times;
color: #000000; font-family: arial, verdana;
background-color background-color: white; font-size font-size: 1.5em;

background-color: #FFFFFF;
font-style font-style: italic;
background-image background-image: url("URL");
font-weight font-weight: bold;
background-repeat background-repeat: no-repeat; font-weight: bolder;
background-position background-position: center; text-decoration text-decoration: underline;

text-decoration: line-through;
Propriétés de texte Propriétés de boîte englobante

Boîte
Page Web
text-align text-align: left;
text-align: right; margin-left width
text-align: center; Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
padding-top
text-align: justify; bla bla bla bla bla bla bla bla bla bla bla
Tatabla blatata
tata bla bla
tatablatata
bla
bla bla bla bla bla bla bla bla bla bla bla bla bla
tata tata tatablatata
bla bla
tatabla
bla bla bla bla bla bla bla bla bla bla bla
tata tata tata tata tatabla height
bla bla bla bla bla
text-indent text-indent: 10pt; bla bla bla bla bla bla bla bla bla bla bla
tatabla blatata
tata blatata
bla bla
tatabla
text-indent: 15px; bla bla bla bla bla bla bla bla bla bla bla
tatabla blatata
tata blatata…
bla bla bla
(Indentation : espace à text-indent: 5%; bla bla bla bla bla bla bla bla bla blapadding-left
bla bla bla bla bla bla bla
gauche de la première bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
ligne du texte) bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
margin-bottom
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla…
11
Propriétés de boîte englobante Propriétés d'hyperlien
width width: 80pt;
Hyperliens
height height: 25%;
Ex. a { color: blue; }
padding padding: 5px;
-left, -right, -top, -bottom padding-bottom: 10px; Hyperliens visités
Ex. a:visited { color: purple; }
margin margin: 10px; Boîte
centrée
-left, -right, -top, -bottom margin-left: 10%; Hyperliens survolés (avec le pointeur de souris)
margin-left: auto; margin-right: auto; Ex. a:hover { color: white; background-color: blue; }
border border: 2px solid #FF00FF; Coins Hyperliens activés
-width, -style, -color border-style: dotted; ronds
border-radius: 15px; Ex. a:active { color: purple; }
overflow overflow: auto;

Propriétés de liste Propriétés de tableau

Listes non-ordonnées Balise table : border, width…
list-style list-style: disc; border-collapse: collapse;
list-style: circle;
list-style: square; Balise caption: caption-side: top;
list-style-image list-style-image: url("URL"); caption-side: bottom;
Balises tr: height

Listes ordonnées
list-style list-style: decimal; Balises td et th : border, width…
list-style: upper-roman; et vertical-align: top;
list-style: lower-alpha; vertical-align: middle;
vertical-align: bottom;
Exemple de style de tableau Exemple de style de tableau
Style 1 Style 2 HTML

<table>
<tr> <td>C1</td> <td>C2</td> </tr>
<tr> <td>C3</td> <td>C4</td> </tr>
</table>
C1 C2 C1 C2
Style 1 (CSS)
table, td { border: 1px solid black; }
C3 C4 C3 C4
Style 2 (CSS)
table, td { border: 1px solid black; }
table { border-collapse: collapse; }
12
Positionnement flottant Positionnement flottant
Exemple 1
Exemple 1 : menu flottant à droite Menu
CSS .menu_jaune { float: right;
background-color: yellow;
width: 100px; }
(style HTML <div class="menu_jaune">
.menu_jaune)
<p>Menu</p>
</div>
100 pixels <div>

</div>
Positionnement flottant Conteneur

Positionnement flottant
(style .page)
Exemple 2 : pagination en trois colonnes 100 %
Exemple 2 :
CSS .page { float: left; width: 100%; }

.colonne { float: left; width: 33%; }
Colonne 1 Colonne 2 Colonne 3 HTML <div class="page"> 

<div class="colonne"> … </div>
(style .colonne) (style .colonne) (style .colonne) <div class="colonne"> … </div>
33 % 33 % 33 %
<div class="colonne"> … </div>
</div>
Positionnement absolu Positionnement absolu

1em
Bla bla sur fond vert… 1em

CSS .boite_verte { position: relative;
Idem sur fond jaune
Bla bla sur fond vert… background-color: #00FF00;
Bla bla sur fond vert… width: 15em; }
15em
.boite_jaune { position: absolute;
HTML <div class="boite_verte"> top: 1em;
<p>Bla bla sur fond vert…</p> right: 1em;
<div class="boite_jaune"> background-color: #FFFF00; }
<p>Idem sur fond jaune</p>
</div>
</div>
13
Exemple de mise en page : HTML
Exemple de mise en page : Objectif <main>
<header>
<h1>Exemple de mise en page</h1>
</header>
<div id="conteneur">
<nav>
<a href="http://www.univ-lyon2.fr">Université Lyon 2</a>
</nav>
<section>
<article>Article 1</article>
</section>
</div>
<footer>
© IDEA
</footer>
</main>
Exemple de mise en page : CSS

*{ nav { Plan du cours
font-family: arial; float: left;
} width: 200px;
body { background-color: red;
background-color: silver; padding: 1em;
} border-radius: 15px;
main { } Le langage HTML
width: 1000px; section {
margin-left: auto; float: left;
margin-right: auto; width: 750px;
background-color: white; background-color: lime;
}
padding: 1em; margin-left: 1em;
border-radius: 15px;
Éléments de design Web, standards,
}
header {
background-color: yellow; article { accessibilité
text-align: center; background-color: aqua;
padding: 1em; margin: 1em;
border-radius: 15px; }
} footer {
#conteneur {
width: 100%;
background-color: fuchsia;
text-align: center;
margin-top: 1em; padding: 1em;
} border-radius: 15px;
}
14

(+) Conception de Sites WEB

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

(+) Conception de Sites WEB

Transféré par

Droits d'auteur :

Formats disponibles

Actualité du cours

Objectifs du cours Plan du cours

Structuration d’informations Le langage HTML

Présentation d’informations en ligne Éléments de design Web, standards,

Respect des standards du Web

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 2 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 3

Un peu d'histoire… Versions successives de HTML

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 4 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 5

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 6 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 7

Squelette d'un document HTML En-tête

Exemple d'en-tête Corps du document

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 10 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 11

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 12 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 13

Autres blocs de texte prédéfinis Formatage de texte

Imbrication des balises Liens hypertextes

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 18 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 19

Jauges Listes ordonnées et non-ordonnées

Barre de progression Listes à puces : <ul> </ul>

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 22 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 23

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 24 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 25

Imbrication de listes Tableaux simples

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 26 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 27

Exemple de tableau Apparence du tableau exemple

Cellule sur plusieurs colonnes : attribut colspan

L12 Cellule sur plusieurs lignes : attribut rowspan

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 30 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 31

Plan du cours Dix erreurs de base à éviter

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 32 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 33

Dix erreurs de base à éviter Design « Web 2.0 » *

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 34 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 35

Chaque site / chaque page a un but précis. pixels décoratifs

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 36 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 37

Exemple de simplification Éléments de présentation

Limiter le nombre de colonnes à 2 (3 maximum)

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 38 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 39

Éléments de présentation Éléments de présentation

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 40 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 41

À utiliser avec parcimonie !

Navigation Qu’est-ce que le W3C ?

Menu de navigation global Objectif : Développement de standards et de bonnes

Contenu : Hyperliens bien différenciés du texte normal

Éviter la « balkanisation du Web » des années 90

Préceptes d’accessibilité : Définir des raccourcis clavier

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 48 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 49

Plan du cours Définition et caractéristiques

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 50 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 51

Avantages Définitions de styles

Gestion simplifiée et globale de la présentation Trois localisations possibles (+local au +global)

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 52 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 53

Imbrication des définitions : la plus locale l'emporte. Unités absolues

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 54 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 55

Spécification de couleurs Écriture d'une feuille de style

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 56 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 57

Sélecteurs Classe de style

Style de plusieurs catégories de balises

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 58 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 59

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 60 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 61

Propriétés de couleur Propriétés de typographie

color color: black;

background-color background-color: white; font-size font-size: 1.5em;

background-position background-position: center; text-decoration text-decoration: underline;

Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 62 Conception de sites Web http://eric.univ-lyon2.fr/~jdarmont/ 63

Propriétés de texte Propriétés de boîte englobante