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/12/08 10:07] damien.muti [Programmation HTML/CSS : Étude d'un exemple] |
wiki:cours:cours:narration:accueil [2021/01/20 09:00] (Version actuelle) 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 433: | Ligne 431: | ||
} | } | ||
- | h1 | + | h1{ |
- | { | + | |
position: absolute; | position: absolute; | ||
left: 3%; | left: 3%; | ||
Ligne 440: | Ligne 437: | ||
font-size: 12px; | font-size: 12px; | ||
} | } | ||
- | h2 | + | h2{ |
- | { | + | |
position: absolute; | position: absolute; | ||
right: 3%; | right: 3%; | ||
Ligne 447: | Ligne 443: | ||
font-size: 12px; | font-size: 12px; | ||
} | } | ||
- | h3 | + | h3{ |
- | { | + | |
position: fixed; | position: fixed; | ||
left: 3%; | left: 3%; | ||
Ligne 454: | Ligne 449: | ||
font-size: 12px; | font-size: 12px; | ||
} | } | ||
- | h4 | + | h4{ |
- | { | + | |
position: | position: | ||
bottom: 1%; | bottom: 1%; | ||
Ligne 498: | Ligne 492: | ||
#hat {position: fixed; top: 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 ===== | ||
---- | ---- |