Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente Prochaine révision Les deux révisions suivantes | ||
wiki:cours:cours:narration:accueil [2020/11/21 12:52] 127.0.0.1 modification externe |
wiki:cours:cours:narration:accueil [2021/01/20 08:49] tomaok02 |
||
---|---|---|---|
Ligne 4: | Ligne 4: | ||
* Contexte : Formation DNMADE | * Contexte : Formation DNMADE | ||
* Fichiers : | * Fichiers : | ||
- | * | ||
* Lien : | * Lien : | ||
- | * | + | |
===== Quelques définitions ===== | ===== Quelques définitions ===== | ||
==== Narration ==== | ==== Narration ==== | ||
Ligne 49: | Ligne 48: | ||
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 65: | ||
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 258: | ||
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 300: | Ligne 299: | ||
</ | </ | ||
- | Ce code en Javascript lance la fonction // | + | Ce code en Javascript lance la fonction // |
- | L' | + | < |
+ | window.onload=startList; | ||
+ | </ | ||
+ | |||
+ | L' | ||
< | < | ||
Ligne 343: | Ligne 346: | ||
**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 403: | Ligne 412: | ||
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 ===== |