À qui s'adresse cette formation?

Vous apprendrez à

• Développer rapidement des pages Web attrayantes, sophistiquées et accessibles grâce aux feuilles de style en cascade (CSS) et au langage HTML
• Générer des mises en page sans tableau (pure CSS)
• Créer des pages optimisées pour les moteurs de recherche
• Appliquer les bonnes pratiques pour développer des pages Web compatibles sur plusieurs navigateurs et éviter les pièges
• Créer des menus pour faciliter la navigation
• Créer des sites qui répondent aux normes W3C

Utilisation des CSS

• Cycle de développement
• Avantages des CSS
• Style CSS vs. style HTML
• Optimisation de la navigation
• Standards CSS
• Normes d'accès

Concepts fondamentaux des CSS

Convention de formatage CSS

• Définition de la structure des CSS
• Unité de mesure
• Taille fixe/taille relative
• Propriétés de couleur et de police de caractère
• Allégement et simplification des feuilles de style avec la sténographie

Choix et application des styles

• Attributs classes/attributs ID
• Insertion de balises DIV et SPAN
• Comparaison entre styles inline et block

Intégration des feuilles de style

• Feuilles de style externes ou intégrées
• Importation vs. liaison de feuilles de style externes
• Utilisation du mode en cascade CSS

Modèles CSS

• Groupement et stylisation du contenu
• Création de zones de remplissages (padding), de marges et de bordures
• Optimisation de la mise en forme grâce aux arrière-plans et aux images
• Gestion des marges partagées

Manipulation de la feuille de style

Gestion du navigateur

• Importance de la directive !DOCTYPE
• Choix des standards
• Passage du mode quirk au mode normal

Modification et superposition de styles

• Héritage et comportement du style
• Attribution de styles et application de règles de spécificités
• Utilisation des spécificités

Mise en page

Gestion des éléments de la page avec les CSS

• Mise en forme de pages en utilisant les techniques de pure CSS (sans tableau)
• Superposition des éléments
• Position relatif/position absolu

Organisation du contenu

• Optimisation des pages pour l'accessibilité, les moteurs de recherche et les périphériques mobiles
• Effets rollover
• Mise en page linéaire

Techniques multinavigateurs

Bonnes pratiques

• Optimisation des pages pour toutes plates-formes
• Conception pour les PDA et les navigateurs de téléphones portables
• Contenu imprimable sans création de page "version imprimable"
• Utilisation des styles pour un format d'impression optimal avec pagination

Solutions de rechange multinavigateurs

• Cibler des navigateurs spécifiques
• Développement de pages fonctionnant avec des navigateurs quirk et des boîtes cassées

Navigation efficace

Organisation de l'information du site

• Choix de techniques de menu pour plus de convivialité
• Localisation du visiteur dans le site grâce au chemin de navigation ou "crumbtrail"
• Création d'un menu de recherche convivial grâce aux listes

Création de menus

• Création de menus facilement maintenables grâce aux listes HTML
• Conception de menus accessibles et attractifs, horizontaux et verticaux ou avec onglets
• Application des techniques rollover aux menus

Application de styles aux formes et tableaux pour plus d'accessibilité

Formatage des données tabulaires

• Techniques de conception de tableaux efficaces
• Utilisation des CSS pour rendre les tableaux attractifs
• Mise en application des techniques d'accès à la conception des tableaux

Formulaires esthétiques pour répondre aux standards

• Création de formulaires efficaces et accessibles fonctionnant sous différents navigateurs
• Application des propriétés d'une feuille de style aux formulaires

• Construction de menus verticaux ou horizontaux avec les listes
• Création d'effets rollover sans JavaScript
• Développement de CSS compatibles sur plusieurs navigateurs
• Utilisation de différents styles de menus pour la navigation du site
• Ajout d'images en arrière-plan lors de la conception des pages
• Amélioration de la mise en forme pour plus de convivialité et pour faciliter l'accès
• Positionnement relatif des contenus de page
• Positionnement absolu des éléments