Differences

This shows you the differences between two versions of the page.

--- 2017_2018:s1:webdoc:td3 [2017/11/22 13:15]
pourcelot [Barre de navigation]
+++ 2017_2018:s1:webdoc:td3 [2017/11/23 09:23]
pourcelot [Autour des boites]
@@ Line 3: / Line 3: @@
 Ce TD se base énormément sur l'expérimentation. Faite preuve de logique. Tester des choses. Des squelettes de code sont fournis pour vous faire gagner du temps, mais les mécanismes sont à découvrir !
+<note>La liste des documents à rendre se trouve à la fin du TD.</note>
 ===== Structure d'une page web HTML5 =====
@@ Line 29: / Line 29: @@
 ===== Objectif du TD =====
-Nous vous proposons de créer une section de type blog sur votre site web en utilisant les balises de l'exemple.
-Ce TD vous sert à les expérimenter, pour vous faire une idée de comment mettre en page votre site fil-rouge (cf Section //Présentez-vous// du [[2016_2017:s1:webdoc:td1|TD1]]).
+Ce TD vous sert à les expérimenter, pour vous faire une idée de comment mettre en page le mini site web que vous avez créé dans les TD précédents (cf Section //Présentez-vous// du [[2016_2017:s1:webdoc:td1|TD1]]).
 Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci-après.
 [[http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html|Plus d'infos sur les différentes balises HTML utilisées.]]
-<box round rgb(185,211,238) 95%|**A Faire** :  >
-  * Créez une nouvelle page xHTML qui vous servira de portfolio pour démontrer votre expérience à travers des projets.
-  * Commencez par créer les sections //header//, //nav//, //section//, //aside// et //footer// de votre page.
-  * Concevez une feuille de style définissant des couleurs de fond différentes pour chaque zone afin de bien voir leurs mouvements lorsque vous toucherez à la mise en page.
-</box>
 ===== Le flux d'affichage =====
@@ Line 137: / Line 132: @@
 Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur.
+<note tip>Les marges permettent également de centrer des conteneurs (block).
+Il suffit de préciser la largeur de l'élément (''width''), puis de fixer ''margin-left'' et ''margin-right'' à ''auto''.
+<code>
+#monbloc {width: 500px;
+          margin-left:auto;
+          margin-right:auto;}
+</code>
+</note>
+<note tip>Par défaut, lorsqu'on indique la taille d'un conteneur, à l'aide des propriétés CSS ''width'' et ''height'', les bordures et les marges externes ne sont pas prises en compte.
+Il est souvent plus pratique lorsque l'on crée une mise en page de faire en sorte que les dimensions indiquées soient celles du conteneur //marges comprises//. Pour changer la méthode de calcul de la taille d'un conteneur pour //tous// les éléments de la page, écrivez ''*{box-sizing: border-box;}'' au début de votre feuille CSS.</note>
 ===== Mise en pratique =====
@@ Line 176: / Line 183: @@
-<note important>**À rendre**
+<note important>
-  - Les **réponses aux questions** de ce TD (sous la forme d'une page HTML valide avec mise en forme CSS (utilisez les techniques vues dans ce TD !)
+**À rendre** :
-  - Une **version HTML de votre CV**. Intégrez ensuite votre CV sur la page Web crée lors des TD précédents en utilisant un iframe. Rendez le tout (page web + CV intégré) sous forme d'une archive **ZIP**.
+  - Les **réponses aux questions** de ce TD (sous la forme d'une page HTML valide avec mise en forme CSS (profitez en pour utiliser quelques techniques vues dans ce TD).
+  - Une **version HTML de votre CV**. Intégrez ensuite votre CV sur la page Web crée lors des TD précédents en utilisant une iframe. Rendez le tout (page web + CV intégré) sous forme d'une archive **ZIP**. Rajoutez également un lien pour pouvoir afficher votre CV sur une page indépendante.
+Vous pouvez faire un rendu par binôme, à condition de bien faire apparaître les deux noms du binôme dans tous les documents à rendre.
 </note>
+Les dates et modalités de rendu seront fixées par l'enseignant en charge du TD.

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools