User Tools
2016_2017:s1:webdoc:td3
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
2016_2017:s1:webdoc:td3 [2016/11/09 18:35] logre [Après ce TD3 je sais répondre à] |
2016_2017:s1:webdoc:td3 [2016/11/09 18:49] logre [| TD3 : Layout, au pixel près |] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | |||
| - | ---- | ||
| ====== | TD3 : Layout, au pixel près | ====== | ====== | TD3 : Layout, au pixel près | ====== | ||
| - | ---- | + | |
| + | |||
| Line 137: | Line 137: | ||
| </code> | </code> | ||
| - | ===== Barre de navigation ===== | + | Certains éléments ont des marges et/ou des paddings par défaut. |
| + | Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | ||
| + | |||
| + | ===== Mise en pratique ===== | ||
| + | |||
| + | ==== Barre de navigation ==== | ||
| Votre site contiendra plusieurs pages. | Votre site contiendra plusieurs pages. | ||
| Line 154: | Line 159: | ||
| - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> | - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> | ||
| - [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code> | - [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code> | ||
| - | - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code> | + | - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code> |
| + | |||
| + | ==== Contenu ==== | ||
| + | |||
| + | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
| + | * En utilisant les balises HTML 5 //section//, //article// et //aside// créer une liste de projets démontrant toutes vos compétences pour former un portfolio. | ||
| + | </box> | ||
| + | |||
| + | Un projet doit être caractérisé par : | ||
| + | - un titre | ||
| + | - une date | ||
| + | - un texte | ||
| + | - un visuel éventuel | ||
| + | - un lien vers une vidéo de démonstration ou un repo github | ||
| + | |||
| + | === IFrame === | ||
| + | |||
| + | Si votre projet est disponible sur le web, vous pouvez avoir envie d'avoir une miniature de celui-ci comme illustration de votre projet. C'est une utilisation possible des IFrames. | ||
| + | |||
| + | |||
| + | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
| + | * Téléchargez le {{:2016_2017:s1:webdoc:iframe.zip|squelette}} d'utilisation d'une IFrame. | ||
| + | * Etudiez son fonctionnement, puis démontrez-en une utilisation au sein de votre propre page. | ||
| + | </box> | ||
| + | |||
| + | Les IFrames sont également utiles pour ajouter certains widgets fournis par des sites externes, comme un plan google maps, un google calendar, etc... | ||
| + | |||
| + | |||
| ===== Je sais répondre à ===== | ===== Je sais répondre à ===== | ||
2016_2017/s1/webdoc/td3.txt · Last modified: 2016/11/09 18:53 by logre
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
