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 | ||
2015_2016:s1:webdoc:td6 [2015/12/07 13:11] urli [Structure] |
2015_2016:s1:webdoc:td6 [2015/12/07 15:34] urli [Positionnement en CSS] |
||
---|---|---|---|
Line 8: | Line 8: | ||
===== Structure ===== | ===== Structure ===== | ||
+ | |||
+ | <note important>Ne perdez pas de temps à positionner correctement les zones maintenant : vous y reviendrez plus tard ! Contentez vous de créer globalement la structure </note> | ||
<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
Line 20: | Line 22: | ||
</box> | </box> | ||
<note tip>De manière à réviser, il est conseiller de partir sur une toute nouvelle page html.</note> | <note tip>De manière à réviser, il est conseiller de partir sur une toute nouvelle page html.</note> | ||
- | |||
- | ===== Positionnement en CSS ===== | ||
- | |||
- | Avant de poursuivre notre exercice, vous aurez probablement besoin d'en savoir plus sur le positionnement en css. | ||
- | |||
- | Plusieurs d'entre vous n'ont pas pris le temps dans le TD précédent de comprendre les positionnements pour construire une page web. Nous vous invitons à prendre le temps, si vous ne l'avez pas déjà fait, de lire les tutoriaux suivants. | ||
- | |||
- | Regardez le tutoriel sur | ||
- | - http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html | ||
- | - http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html | ||
- | - http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html | ||
- | - http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html | ||
- | |||
- | |||
- | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
- | Maintenant que le positionnement n'a plus de secret pour vous, ajoutez 3 paragraphes de texte (par exemple ceux-ci http://www.faux-texte.com/lorem-ipsum-3.htm dans votre zone aside. Celle-ci doit s'afficher à droite de la page. Chacun des paragraphes sera contenu dans une balise <p></p> (balise de paragraphe). | ||
- | </box> | ||
- | |||
- | |||
- | <note warning>Pour en faire un peu plus, | ||
- | * Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu. | ||
- | * http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html | ||
- | * [[http://www.w3schools.com/css/css_float.asp| Affichage relatif des éléments (bien regarder tous les exemples...]] | ||
- | * [[http://www.w3schools.com/cssref/pr_class_clear.asp|Placer en dessous (clear)]] | ||
- | </note> | ||
===== Transitions et transformations css ===== | ===== Transitions et transformations css ===== | ||
<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
- | Continuons notre page de démonstration en ajoutant 5 images dans la deuxième zone section. Chaque image aura une largeur de 150px et une hauteur de 108px. | + | Continuons notre page de démonstration en ajoutant 5 images dans la premiere zone section. Chaque image aura une largeur de 150px et une hauteur de 108px. |
* la première image devra subir une inclinaison de 15deg en y (''skewY'') lors du survol du pointeur souris. On utilisera le selecteur ''first-of-type'' pour sélectionner cette image. | * la première image devra subir une inclinaison de 15deg en y (''skewY'') lors du survol du pointeur souris. On utilisera le selecteur ''first-of-type'' pour sélectionner cette image. | ||
Line 70: | Line 47: | ||
<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
- | Maintenant, vous devez créer dans votre 3e zone ''section'', une zone ''div'' contenant 4 zones ''section''. Chacune de ces nouvelles zones section contiendra une zone ''header'', ''article'' et ''footer''. L'image ci-dessus vous donne une idée du résultat. Ces nouvelles sections auront une largeur de 160px. | + | Maintenant, vous devez créer dans votre 2e zone ''section'', une zone ''div'' contenant 4 zones ''section''. Chacune de ces nouvelles zones section contiendra une zone ''header'', ''article'' et ''footer''. L'image ci-dessus vous donne une idée du résultat. Ces nouvelles sections auront une largeur de 160px. |
* le header contiendra un mot de titre | * le header contiendra un mot de titre | ||
* l'article un texte explicatif | * l'article un texte explicatif | ||
Line 83: | Line 60: | ||
<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
- | * Dans la 4e zone section de la page (et non celles créées précédemment), ajoutez 2 images et une balise vidéo. | + | * Dans la 3e zone section de la page (et non celles créées précédemment), ajoutez 2 images et une balise vidéo. |
* Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliqué à la vidéo ... testez cela lors de la lecture de la vidéo (choix des sélecteurs : http://www.w3schools.com/cssref/css_selectors.asp) | * Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliqué à la vidéo ... testez cela lors de la lecture de la vidéo (choix des sélecteurs : http://www.w3schools.com/cssref/css_selectors.asp) | ||
* Utilisez les URLs suivantes pour la vidéo : | * Utilisez les URLs suivantes pour la vidéo : |