Qu'est-ce qu'une page web ? À quoi servent les feuilles de style ? o Les principales balises HTML pour le texte o Exercice de balisage HTML: présentation de l'exercice o Corrigé: structurer un texte en HTML o Les commentaires en HTML o Styles CSS: attribut style et élément style, sélecteur d'éléments o Styles CSS: utiliser les classes et identifiants o Exercice: reproduction d'un style existant o Des images pour les pages web
Annexe 1: Travailler avec les bons outils
Éditeur WYSIWYG ou éditeur de code? o Les navigateurs web o Barre d'outils Web Developer et Firebug
Introduction à la mise en page en CSS
Éléments de type bloc et éléments de type en-ligne o Le modèle de boite CSS: hauteur et largeur o Le modèle de boite CSS: les marges o Le modèle de boite CSS: bordures et padding o Le modèle de boite CSS: comment se cumulent ces propriétés o Le positionnement relatif o Le positionnement absolu o Le positionnement flottant o Une fiche produit (exercice): balisage HTML o Une fiche produit (exercice): mise en forme CSS
Annexe 2: Standards et validité
Validité du code XHTML o Les validateurs sont mes amis o Les standards XHTML et CSS: spécifications et références
Mise en page d'un design simple
Présentation de l'exercice: réalisation d'un site web complet o Mise en place du projet o Mise en forme de l'en-tête du site o Analyse du design et création de de blocs conteneurs (éléments DIV) o Positionnement des principaux blocs o Un point sur les couleurs pour le Web (couleurs en CSS, outils pratiques) o Décorer un bloc avec des images de fond (propriété background)
Des menus de navigation en HTML et CSS
Qu'est-ce qu'un menu de navigation ? o Analyse du design du menu principal de notre site web o Styles CSS du menu principal
Annexe 3: L'encodage des caractères
Qu'est-ce qu'un encodage de caractères ? Quel encodage choisir ? o Comment bien déclarer l'encodage d'une page ? o Les entités HTML
Mise en forme du contenu
Mise en forme des contenus de l'accueil: boites pour le texte o Mise en forme des contenus de l'accueil: styles du texte o Préparation de la page «fiche produit» o Intégration et adaptation de la fiche produit o Récapitulatif des propriétés CSS pour le texte
Annexe 4: Des gabarits de mise en page pour vos projets
Présentation des gabarits de mise en page o Rappel largeur fluide et largeur fixe. Modifier un gabarit.
Tableaux et formulaires en HTML et CSS
Construire et mettre en forme un tableau o Un formulaire simple en HTML o Mise en forme du formulaire
