Cours conception de sites web

Cours conception de sites web, tutoriel & guide de travaux pratiques en pdf.

1. Principes de conception
– Couleurs, Fontes, Images, Mise en page, etc.
– Les écueils à éviter
2. Aperçu de HTML
– Survol rapide des concepts de base
3. Feuilles de styles (CSS)

Principes de conception

Caractéristiques générales d’une bonne page
• Le succès du Web est en grande partie lié à la simplicité de son modèle basé sur le concept de page
– L’unité d’information
– L’unité de navigation
– Unité d’adressage : une page = 1 URL
– Unité de stockage pour le serveur
– L’unité d’édition pour un auteur (en dehors des images)
• Cette simplicité tend à être (souvent inutilement) compliquée par
– les cadres (frames)
– les liens internes

Caractéristiques générales d’une bonne conception
Contrôler correctement les paramètres suivants
–Forme
• Typographie
• Mise en page: espaces et marges
• Taille
•Images
–Fond
• Navigation – liens
Éviter
– les erreurs classiques (Top 10 de Nielsen)

Typographie: caractéristiques des fontes
• Familles de fontes:
– Monospace (courier)
– Sans-serif (arial ou helvetica)
– Serif (Times)
• Style des fontes:
– regular, bold, italic, bold-italic
• Types de fontes
– True Type (TT) et Postscript Type 1 (PS1)
• Standards de définition des fontes concurrents
• Description vectorielle des fontes
• PS1 développées par Adode et le plus ancien.
• TT développées par Apple puis Microsoft.

Fontes et compatibilité
• Seules quelques fontes les plus courantes sont compatibles
– courier, arial ou helvetica, Times
– Deux fontes standards chez Microsoft conçues  spécialement pour le Web
• Georgia et Verdana
• conçues par Matthew Carter et mises en œuvre  par Tom Rickner et ses collègues.
•Pour plus d’infos:
– www.microsoft.com/truetype

Pour s’assurer d’avoir des fontes  originales
• Utilisation d’autres fontes à vos dépends
– Les navigateurs substitueront votre fonte avec une autre  s’ils ne l’ont pas
– => effets indésirables assurés
• Quand c’est vraiment indispensable,
–il faut » tricher»
•Faire des gif…
– Problème principal:
• le texte ainsi écrit n’est pas indexé pas les moteurs de  recherche…

Typographie (règles d’usage)
• Taille des fontes
– Taille 10 pt est le minimum lisible à l’écran
– Exemple d’utilisation
•10pt pour les légendes
• 12 pt pour le texte
• 14 pt pour les titres de sections
• 16 pt pour les titres de premier niveau
• Perception des différences entre tailles
– 2pts d’écart minimum

……..