Institut Supérieur des Sciences Appliquées et de Technologie de sousse
Matière : développement WEB Année universitaire 2016/2017
Travaux pratiques N°3(Mise En Page)
L'idée est la suivante :
De la même façon que certains créent un blog pour raconter leur voyage à l'étranger, vous allez raconter votre "voyage" dans le monde du Web et résumer, semaine après semaine, vos nouvelles découvertes. Ce blog sera aussi un outil pratique avec une page CV (à propos), une page contact et des liens : vers les cours vers des tutos en ligne vers les exercices 1. Créer un nouveau document HTML : «blog.html» dans [page], liez un fichier blog.css» placé dans le dossier [style]. 2. Reproduisez le modèle ci-dessous, en respectant les noms donnés aux id Les éléments sont des <div> <div id="conteneur"> </div> ... Ne fixez pas de largeur à : l'entete, menu et pied de page afin qu'ils s'adaptent à la largeur de leur conteneur.
Note 1 : appliquez une bordure et une hauteur minimum aux éléments pour les visualiser. Note 2 : dans le modèle si dessus, les éléments ne sont pas "collés" les uns aux autres.
1 <body> <div id="conteneur"> <div id="entete"> <h1>Titre du site</h1> </div> <div id="menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">A propos</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="page"> <h2>Titre 2</h2> <p>Un texte</p> <h2>Titre 2</h2> <p>Un texte</p> </div> <div id="colonne"></div> <div id="pied"></div> </div> </body> 3. Modifiez la page blog.html de votre blog pour la passer en HTML5 : <div id="entete"> devient <header id="entete"> <div id="menu"> devient <nav id="menu"> <div id="page"> devient <section id="page"> <div class="module"> devient <article class="module"> <div id="colonne"></div> devient <aside id="colonne"> <div id="pied"></div> devient ... je vous laisse deviner :-)
4. Appliquez un style rapide à ce menu :
Faites flotter les <li> vers la gauche Couleurs des liens Couleur de fond du menu 5. Vous pouvez mettre un padding de 20px au conteneur
2 6. Travaillez la colonne droite, le pied de page et l’entête comme sur le modèle. 7. Exemple de site :
