La page web en html css

915 vues

Publié le

Processus de réalisation et de transformation d'une maquette de site Web en page Web. Analyse de la charte graphique d'un site et de ses composantes. Description du rôle et des étapes de création d'une page Web.

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
915
Sur SlideShare
0
Issues des intégrations
0
Intégrations
107
Actions
Partages
0
Téléchargements
44
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

La page web en html css

  1. 1. Les pages Web en HTML et CSS Webdesign Olivier Dommange
  2. 2. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle dispose des dimensions des zones de contenus qui permettront la transformation de la maquette en page Web et mobile.
  3. 3. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle dispose des informations typographiques (police, taille, couleur, graisse, interlignage et effets) qui définiront la mise en forme.
  4. 4. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle présente l’espace colorimétrique des interfaces.
  5. 5. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle présente les états de survol, enfoncés et actifs des boutons et des liens.
  6. 6. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Expose les transformations de l’interface pour les différents supports mobiles.
  7. 7. Olivier Dommange Les étapes de réalisation
  8. 8. Olivier Dommange L'organisation d'un projet Le fichier HTML rassemble les autres fichiers Des liens relatifs lient les fichiers du projet au document HTML. Les ressources distantes impliquent un lien absolu (adresse URL complète). Les éléments liés au fichier HTML sont : Les feuilles de style CSS Les scripts en Javascript Les images, vidéos et audios. Les outils tiers incorporés dans les balises <iframe>.
  9. 9. Olivier Dommange HTML : Les principes d'utilisation HTML, un langage d’identification Le HTML est un système d’imbrication de contenus identifiés par les balises qui l’entourent. Les balises HTML disposent d’attributs qui permettent de leur donner une forme spécifique ou de les identifier. Une balise qui s’ouvre, se ferme (par le même nom de balise avec le symbole «slash» devant (ex. : </p>). Quelques balises échappent à cette règle (<img>, <input>, <br>, <link>, <meta>,...). Les attributs s’insèrent dans la balise d’ouverture (ex. : <div id=”page”>
  10. 10. Olivier Dommange CSS : Les principes d'utilisation Donne la forme visuelle à la page et son contenu Le CSS complète le HTML en formatant l’apparence des espaces, objets et contenus qui composent la page Web. Les sélecteurs, identifient les éléments HTML dont l’apparence sera altérée. Énumération de propriétés CSS qui conditionnent l’apparence de la page. Le “Responsive design” est possible grâce au CSS. Les navigateurs imposent un formatage CSS par défaut.
  11. 11. Olivier Dommange La mise en page HTML : Identifier les zones de la mise en page Le HTML dispose dorénavant d’un plus grand nombre de balises pour identifier les zones de la mise en page. Identifier les zones à l’aide des balises <main>, <section>, <header>. <footer>, <aside>, <article>, <nav>, <menu> et <div>. Envisager l’ordre d’apparition des balises en fonction du résultat sur les supports mobiles.
  12. 12. Olivier Dommange La mise en page CSS : Donner du volume et mettre en page les zones Les éléments dans une page influence mutuellement leur mise en page. Une zone se positionne en fonction du flux de la page. Sa position se définit par l’espace qu’occupe les éléments qui le précède et les limites de son contenant. Définir la dimension des zones. Habiller le fond des zones (images, couleurs ou dégradés) Positionner grâce aux marges imposées et à la propriété “float” qui permet de positionner deux blocs côte-à-côte.
  13. 13. Olivier Dommange La mise en forme HTML : Identifier les contenus Imposer sémantiquement les balises aux contenus de manière à identifier leur nature. Identifier les titres, les paragraphes et les listes. Insérer les images, vidéos et sons faisant parties des contenus. Créer les composants complémentaires (formulaires et tableaux).
  14. 14. Olivier Dommange Le référencement naturel A-t-on bien identifier les contenus de la page ? Les moteurs de recherche identifient les contenus de la page grâce aux balises de mise en forme. Elles informent de la priorité à donner aux mots-clés. Les balises <h1>-<h6>, <p>, <ul>, <ol>, <img> sont utilisées à bon escient. Les titres des images et des contenus sont descriptifs (et les espaces sont remplacés par des tirets). Des descriptifs sont indiqués aux images et aux liens. Chaque page dispose d’un titre et d'une description unique.
  15. 15. Olivier Dommange La mise en forme CSS : Corriger les propriétés imposées par les navigateurs La plupart des balises HTML de mise en forme disposent d’un formatage à corriger.
  16. 16. Olivier Dommange Les menus Des rubiques cliquables... La composition d’un menu en HTML devrait être sous forme de liste (<ul>). Il s’agit d’une liste de rubriques. La représentation HTML de blocs dans des blocs d’une liste offre toute la souplesse pour conditionner l’apparence du menu avec CSS quelque soit sa forme.
  17. 17. Olivier Dommange Responsive design Définir les formats Les « media queries » permettent à la page de conditionner la mise en page et la mise en forme en fonction de la taille du support. La dimension et le positionnement des zones de contenus. La taille des caractères. L’optimisation des images. La réorganisation des outils de navigation
  18. 18. Olivier Dommange Démarrer un projet de page Web Une solution qui facilite l’insertion d’outils annexes à un projet Web. Utilise la librairie « modenizr » qui harmonise la fonctionnement du HTML 5 sur les différents navigateurs. Propose les outils de référencement et statistiques courants qu’un projet en ligne devrait disposer. Propose des icônes des différents formats et supports. Propose des outils annexes fréquents dans les projets Web (jQuery et Bootstrap). Initializr
  19. 19. Olivier Dommange http://www.linkedin.com/in/olivierdommange

×