Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:preparation_tp_mise_en_page_css3_html5

préparation TP Mise en page CSS3/HTML5

Le but est d'appliquer progressivement des mises en forme CSS pour obtenir le résultat final (le plus conforme possible au graphisme).

Faire en premier le page : less-is-more.html
 Capture page "Less is more"

Puis l'accueil : index.html
| Capture page "Accueil"

Et finir par le glossaire : glossaire.html
 Capture page "Glossaire"

Vous pouvez télécharger les fichiers de départ ici.

Les changements par rapport au TP précédent sont :

  • Utilisation d'éléments Q pour les citations dans les paragraphes ('in-line' ou citations courtes).
    • Outre une meilleure sémantique, cela permet de changer les “guillemets” par le biais des styles CSS.

Déroulement de l'activité

Les fichiers de départs fournis n'ont pas de feuille de styles CSS :

  • Dans le dossier ”css” faire un fichier ”styles.css” : css/styles.css
  • Dans toutes les pages, ajouter le lien vers le fichier CSS :
    <link rel="stylesheet" href="css/styles.css">

Vous allez progressivement reconstituer la mise en forme en les “recréant”.

Le restant de l'activité se présente sous la forme de commentaires et de codes CSS incomplets. Les explications fournies devraient suffire pour les utiliser comme base pour compléter votre code CSS.

Seules des modifications mineures sont à apporter aux fichiers HTML :

  • Ajout de classe CSS pour nommer des éléments.
  • Ajout d'une division (élément DIV) pour grouper et nommer des éléments (car pas d'élément sémantique approprié).
  • Suppression des espaces entre des éléments pour éviter des problèmes de rendus (c'est un problème que l'on rencontre parfois en HTML/CSS).

L'ensemble forme une activité comparable à celle de votre projet :

  • Fichiers HTML écrits avec l'usage d'éléments sémantiques (HTML5).
    • Cette activité ne dépend pas du graphisme.
  • Graphisme réalisé avec un logiciel graphique (Photoshop ?).
    • Seule différence, le découpage des images a été fait pour vous. Vous pouvez le refaire si vous désirez (avez le temps). Cela l'objet d'une autre activité.

La plus grande difficulté du TP est l'écriture des sélecteurs CSS. Vous reporter au cours ou autre ressource si besoin.

"Vocabulaire" de base

Certaines propriétés CSS répondent à des besoins généraux. Elles ne seront pas développées dans les autres parties de l'activité. C'est ici qu'elles seront documentées.

Il n'est pas nécessaire de lire pour l'instant les liens fournis (SELFHTML). Vous pouvez y retourner quand les commentaires vous guideront vers ces propriétés CSS.

Textes et polices de caractère

Propriété générale pour les éléments

Activité

Quand il est demandé d'ajuster des dimensions, ne mettez rien si vous ne voyez pas quelles valeurs donner. Vous réglerez ces valeurs ultérieurement pour peaufiner la mise en forme.

Typographie

/* Pour meilleure compatibilité des anciens navigateurs */
header, nav, article, footer, address { display: block; }
 
/* Typographie */
 
body { /* Pour l'élément body */
	 /* prop CSS à completer */ #a89f96; /* la couleur de fond de la page */
	 Arial, verdana, sans-serif; /* la famille de police par défaut du document */
	 0.75em; /* taille de police de base */
	 1.4; /* hauteur de ligne de base */
	 /* couleur par défaut du texte */
}
 
/* ici le sélecteur */ {  /* pour tout les titres */
	normal; /* graisse des titres */
	 /* réinitialisation des marges des titres */
}
 
 { /* pour les titres de niveau 2 */
	#d4b48e; /* couleur */
	 2.5em; /* taille de police */
	 1; /* hauteur de ligne */
	 /* padding et marge à ajuster */
}
 
 { /* Pour les titres de niveau 3 */
	 1em; /* Taille de police */
	 /* padding et marge à ajuster */
 
	 /* filet sous le texte */
	 /* mise en capitale du texte */
}
 
 { /* pour les paragraphes */
	 /* retrai de 1re ligne */
	 /* padding et marge à ajuster */
 
}
 
 { /* pour les citations "en-ligne" */
	quotes: \a0' '\a0»'; /* guillemet "typographique" avec espace insécable */
	 /* style italique */
}
 
sup { /* exposant (superscript) */
	font-size: 0.75em; /* taille de police de base */
	line-height: 1; /* hauteur de ligne de base */
	vertical-align: top; /* position de la ligne de base */
}

Mise en page

 
/* Layout page */
 
body { /* Pour l'élément body */
	 /* largeur 188+642+94 = 924 */
	margin: 0 auto; /* centrage */
	 /* padding et marge à ajuster */
 
	/* fond : footer - image - bords */
	background-image:  url(images-interface/bg-footer.png), url(images-interface/bg-page.jpg), url(images-interface/bg-ombre.png) ;
	background-repeat: repeat-x, no-repeat , repeat-y;
	background-position: bottom center, top center, top center;
}

Entête et navigation

/* header */
 
 { /* L'image (IMG) qui est dans le HEADER de BODY */ 
	 /* bord blanc de 10 pixels */
}
 
 { /* l’élément HEADER de BODY */
	position: relative; /* le mettre en position relative pour qu'il serve de "base" à la position absolue de la navigation */
}
 
 { /* l’élément NAV de HEADER de BODY */
	position: absolute; /* positionné en absolu */
	top: ; /* coordonner à ajuster */
	left: ;
	 /* fixer sa largeur (à ajuster) */
}
 
 { /* l’élément UL dans la NAV de HEADER de BODY */
	 /* pas de puces */
	 /* padding et marge à réinitialiser */
 
}
 
 { /* les éléments LI dans la NAV de HEADER de BODY */
	 /* padding et marge à ajuster */
}
 
 { /* les éléments A dans la NAV de HEADER de BODY */
	 /* Pas de soulignement */
	display: block; /* On les fait s'afficher comme des blocs (plus grande surface */
	 /* Force leurs couleur */
	background: transparent url(images-interface/bg-menu-sprite.png) repeat-x 0 -30px; /* Fond en CSS Sprite */
	 /* padding et marge à ajuster */
}
 
 { /* les éléments A (qui sont des liens) dans la NAV de HEADER de BODY */
	background-position: 0 0; /* utilisation du CSS Sprite (décale le fond) */
}
 
 { /* les éléments A (qui sont des liens et survolés) dans la NAV de HEADER de BODY */
	background-position: 0 -60px; /* utilisation du CSS Sprite (décale le fond) */
}

Titre en image

Substitution de texte par une image.

/* Titre en image */
 
 { /* l'élément H1 (de BODY ?) */
	/* technique standard de remplacement de texte par une image */
	background: transparent url(images-interface/bg-titre-principal.png) no-repeat; /* l'image à afficher */
	width: ; /* ses dimensions exactes ! */
	height: ;
	text-indent: -9999px; /* cache le texte en mettant une valeur extrême à text-indent */
}

Premier paragraphe

/* premier paragraphe */
 
 { /* sélecteur qui trouve le 1er paragraphe (P) qui est un enfant direct de BODY */
	 1.5em; /* taille de police */
	 1.2; /* hauteur de ligne */
	 /* justification de-u texte */
	 /* padding et marge à ajuster */
 
	 /* Suprime le retrait de 1re ligne mit par défaut (le met à 0) */
}
 
 { /* la 1re lettre du précédant sélecteur */
	float: left; /* Lettrine en utilisant float */
	 3.6em; /* taille de police */
	 1; /* hauteur de ligne */
	 /* padding et marge à ajuster */
}
 
 { /* la 1re ligne du précédant sélecteur */
	 /* mise ne capitale du texte */
}

Création des colonnes

/* création des colonnes */
 
/* ajouter la DIV de classe CSS : contenu-suite au code HTML */
 { /* la DIV contenu-suite de classe  **ET** l'élément ASIDE */
	display:table-cell; /* utilise les tableaux CSS pour les colonnes */
	vertical-align: top; /* nécessaire... */
}
 
 { /* la DIV contenu-suite */
	 /* fixe sa largeur (prévoir taille des deux colonnes 360+16+266 = 642 ) */
	 /* padding quand on utilise les tableaux CSS */
}
 
 { /* l'élément ASIDE */
	 /* fixe sa largeur (prévoir taille des deux colonnes 360+16+266 = 642 ) */
}

Gallerie

/* Gallerie */
 
/* ajouter la classe CSS : galerie à l'élément UL dans le code HTML */
 { /* le UL galerie */
	 /* pas de puces */
	 /* padding et marge à réinitialiser */
 
}
 
/* dans le code HTML : supprimer les espaces entre les LI de galerie avec des commentaires HTML */
 
 { /* les  LI de la galerie */
	 /* mode d'affichage "inline-block" pour les mettre en "ligne". Attention aux espaces ! */
	 /* padding et marge à ajuster */
}
 
/* a completer */:nth-child(3n) { /* les  LI de la galerie en position 3,6,9... */
	 /* enlève la marge droite (valeur 0) */
}

Réalisations

/* Réalisations */
 
/* ajouter la classe cs : realisations à l'élément UL dans le code HTML */
 
 { /* le UL realisations */
	 #a89f96; /* couleur */
	 0.92em; /* taille de police */
	 /* pas de puces */
	 /* padding et marge à réinitialiser */
 
}
 
 { /* les LI de realisations */
	 /* filet sous le texte */
	 /* padding et marge à ajuster */
 
}

Pied de page

/* Footer */
 
body > footer { /* le FOOTER de BODY */
	padding: 20px 0; /* padding et marge à ajuster */
	margin-top:30px;
	clear: both; /* Pour les float */
}
 
 { /* Les P du FOOTER de BODY */
	0.92em; /* taille de police */
	 /* padding et marge à ajuster */
	 /* supprime le retrait de 1re ligne mit par défaut (le met à 0) */
}

Citation en exergue

/* pullquote */
 
/* dans le code HTML, ajouter la classe cs : pullquote à l'élément Q qui doit être mis en exergue */
 
 { /* l'élément Q de classe pullquote */
	display:block; /* L'affiche comme un bloc */
	 /* ajuste sa largeur */
	 /* padding et marge à ajuster */
 
	float:left; /* Le sort de flot de texte avec float */
	"Times New Roman",Times,serif; /* fixe la famille de police */
	1.5em; /* taille de police */
	1.2; /* hauteur de ligne */
	 /* filet à gauche */
	 /* supprime le retrait de 1re ligne mit par défaut (le met à 0) */
	 /* supprime les guillemets (valeur vide) */
}

Page d'accueil

/* accueil */
 
/* 
  Ajoutez la classe cs : accueil à l'élément BODY dans le code HTML.
  Permets d'écrire des styles qui ne s'appliqueront qu'à cette page
*/
 
 { /* Le H1 qui est dans accueil */
	background: transparent url(images-interface/bg-titre-principal-accueil.png) no-repeat; /* met une autre image */ 
	height: 442px; /* change la taille en conséquence */
}
 
 { /* L'image (IMG) qui est un enfant (direct) de BODY */
	border: 10px solid #FFFFFF; 
}

Page glossaire

/* Glossaire */
 
/* les éléments DT sont rendus comme des H2 */
 
/* les éléments DD sont rendus comme des P */
 
/* 
  Ajoutezr la classe cs : glossaire à l'élément BODY dans le code HTML
  Permets d'écrire des styles qui ne s'appliqueront qu'à cette page
*/
 
.glossaire { /* la page glossaire (BODY) */
	width: 720px; /* 188+720+16 = 924 */
	padding-right: 16px /* bord blanc de 10 pixels */
}
 
 { /* les éléments DL de glossaire */
	float: left; /* les mets en "colonnes" avec float */
	width: 340px; /* ajuste leurs largeurs */
	padding: 0 10px; /* padding et marge à ajuster */
}
 
/* ajouter clear: both; à footer  pour n'infère pas avec les float */
 
 { /* Le H1 qui est dans glossaire */
	 /* padding et marge à ajuster */
}
cours2012/concepts_et_outils_pour_internet/preparation_tp_mise_en_page_css3_html5.txt · Dernière modification: 2012/09/16 22:00 (modification externe)