Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
wiki:cours:cours:narration:accueil [2020/11/22 09:53] damien.muti [Programmation HTML/CSS : Étude d'un exemple] |
wiki:cours:cours:narration:accueil [2021/01/20 09:00] tomaok02 [Narration Interactive] |
||
---|---|---|---|
Ligne 2: | Ligne 2: | ||
* Porteur(s) du projet : Damien MUTI DESGROUAS, Laurence CLEYET-MERLE, | * Porteur(s) du projet : Damien MUTI DESGROUAS, Laurence CLEYET-MERLE, | ||
* Date : 20/11/2020 | * Date : 20/11/2020 | ||
- | * Contexte : Formation DNMADE | + | * Contexte : Formation DNMADE |
- | * Fichiers | + | * Lien : [[wiki: |
- | * | + | |
- | * Lien : | + | |
- | | + | |
===== Quelques définitions ===== | ===== Quelques définitions ===== | ||
==== Narration ==== | ==== Narration ==== | ||
Ligne 49: | Ligne 47: | ||
Une narration interactive peut se représenter par une arborescence. Chaque branche de l' | Une narration interactive peut se représenter par une arborescence. Chaque branche de l' | ||
- | Une Narration interactive se prépare donc tout d' | + | Une Narration interactive se prépare donc tout d' |
{{ : | {{ : | ||
Ligne 66: | Ligne 64: | ||
Comme vous pouvez le remarquer, certaines images sont animées (Gif): | Comme vous pouvez le remarquer, certaines images sont animées (Gif): | ||
---- | ---- | ||
- | {{: | + | {{: |
---- | ---- | ||
- | {{ : | + | {{ : |
---- | ---- | ||
- | {{ : | + | {{ : |
---- | ---- | ||
- | {{ : | + | {{ : |
---- | ---- | ||
Ligne 259: | Ligne 257: | ||
li ul li { } /* Sub Menu Styles */ | li ul li { } /* Sub Menu Styles */ | ||
- | li.on ul { display: block } /* The magic */ | + | li.on ul { display: block } /* The magic */ |
li.off ul{display: | li.off ul{display: | ||
Ligne 347: | Ligne 345: | ||
**Si** le nom de la classe (// | **Si** le nom de la classe (// | ||
+ | |||
+ | La fonction // | ||
+ | < | ||
+ | li.on ul { display: block } /* The magic */ | ||
+ | li.off ul{display: | ||
+ | </ | ||
=== La page d' | === La page d' | ||
Ligne 407: | Ligne 411: | ||
Ce lien renvoie vers la page " | Ce lien renvoie vers la page " | ||
+ | |||
+ | == Le code CSS == | ||
+ | < | ||
+ | @charset " | ||
+ | /* CSS Document */ | ||
+ | |||
+ | |||
+ | body { | ||
+ | background-color: | ||
+ | margin-left: | ||
+ | margin-top: | ||
+ | margin-right: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | #menu { | ||
+ | position: fixed; | ||
+ | left: 0; | ||
+ | top: 0%; | ||
+ | } | ||
+ | |||
+ | h1{ | ||
+ | position: absolute; | ||
+ | left: 3%; | ||
+ | top: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | h2{ | ||
+ | position: absolute; | ||
+ | right: 3%; | ||
+ | top: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | h3{ | ||
+ | position: fixed; | ||
+ | left: 3%; | ||
+ | bottom: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | h4{ | ||
+ | position: | ||
+ | bottom: 1%; | ||
+ | right: 0%; | ||
+ | font-size: 12px; | ||
+ | |||
+ | } | ||
+ | |||
+ | body,td,th { | ||
+ | font-family: | ||
+ | font-size: 14px; | ||
+ | color: #ccc; | ||
+ | } | ||
+ | a:link { | ||
+ | color: #f60; | ||
+ | text-decoration: | ||
+ | } | ||
+ | a:visited { | ||
+ | text-decoration: | ||
+ | color: #f60; | ||
+ | |||
+ | } | ||
+ | a:hover { | ||
+ | text-decoration: | ||
+ | color: #ccc; | ||
+ | |||
+ | } | ||
+ | a:active { | ||
+ | text-decoration: | ||
+ | color: #f60; | ||
+ | } | ||
+ | #comic { | ||
+ | vertical-align: | ||
+ | border: 0px; | ||
+ | background-color: | ||
+ | width: 800px; | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | #footer {position: fixed; bottom: 0%; left: 0; width: 100%; height: 3%; background-color: | ||
+ | #hat {position: fixed; top: 0%; left: 0; width: 100%; height: 3%; background-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Le titre de la page " | ||
+ | < | ||
+ | h1,h2{ | ||
+ | position: absolute; | ||
+ | left: 3%; | ||
+ | top: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === La page 2 === | ||
+ | {{ : | ||
+ | La[[http:// | ||
+ | ==Code HTML== | ||
+ | Le code est le suivant : | ||
+ | < | ||
+ | < | ||
+ | <html xmlns=" | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | |||
+ | <style type=" | ||
+ | body { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | </ | ||
+ | <link rel=" | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | <img class=" | ||
+ | < | ||
+ | <a href=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | == Code CSS== | ||
+ | Le code CSS est le suivant : | ||
+ | < | ||
+ | @charset " | ||
+ | /* CSS Document */ | ||
+ | |||
+ | |||
+ | body { | ||
+ | background-color: | ||
+ | margin-left: | ||
+ | margin-top: | ||
+ | margin-right: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | #menu { | ||
+ | position: fixed; | ||
+ | left: 0; | ||
+ | top: 0%; | ||
+ | } | ||
+ | |||
+ | h1{ | ||
+ | position: absolute; | ||
+ | left: 3%; | ||
+ | top: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | h2{ | ||
+ | position: absolute; | ||
+ | right: 3%; | ||
+ | top: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | h3{ | ||
+ | position: fixed; | ||
+ | left: 3%; | ||
+ | bottom: 0%; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | h4{ | ||
+ | position: | ||
+ | bottom: 1%; | ||
+ | right: 0%; | ||
+ | font-size: 12px; | ||
+ | |||
+ | } | ||
+ | |||
+ | body,td,th { | ||
+ | font-family: | ||
+ | font-size: 14px; | ||
+ | color: #ccc; | ||
+ | } | ||
+ | a:link { | ||
+ | color: #f60; | ||
+ | text-decoration: | ||
+ | } | ||
+ | a:visited { | ||
+ | text-decoration: | ||
+ | color: #f60; | ||
+ | |||
+ | } | ||
+ | a:hover { | ||
+ | text-decoration: | ||
+ | color: #ccc; | ||
+ | |||
+ | } | ||
+ | a:active { | ||
+ | text-decoration: | ||
+ | color: #f60; | ||
+ | } | ||
+ | #comic { | ||
+ | vertical-align: | ||
+ | border: 0px; | ||
+ | background-color: | ||
+ | width: 800px; | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | #footer {position: fixed; bottom: 0%; left: 0; width: 100%; height: 3%; background-color: | ||
+ | #hat {position: fixed; top: 0%; left: 0; width: 100%; height: 3%; background-color: | ||
+ | } | ||
+ | |||
+ | </ | ||
===== Ressources et exemples ===== | ===== Ressources et exemples ===== |