Différences

Ci-dessous, les différences entre deux révisions de la page.

--- 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, Thomas RICORDEAU, Fabrice PORTET
   * Date : 20/11/2020
   * Contexte : Formation DNMADE
-  * Fichiers :
+  * Lien : [[wiki:ressources:narration-interactive|Narration Interactive - Ressources logiciels]]
-    *
-  * Lien :
-    *
 ===== Quelques définitions =====
 ==== Narration ====
@@ Ligne 49: / Ligne 47: @@
 Une narration interactive peut se représenter par une arborescence. Chaque branche de l'arbre est issue d'un choix qu'effectue le lecteur dans la narration.
-Une Narration interactive se prépare donc tout d'abord en dessinant le schéma de narration sous la forme d'une arborescence. L'[[https://i2.wp.com/www.benhoguet.com/wp-content/uploads/2019/12/bandersnatch_arborescence.png?resize=610%2C682&ssl=1|image suivante]] illustre le shéma-block (algorigramme) d'une narration interactive
+Une Narration interactive se prépare donc tout d'abord en dessinant le schéma de narration sous la forme d'une arborescence. L'[[https://i2.wp.com/www.benhoguet.com/wp-content/uploads/2019/12/bandersnatch_arborescence.png?resize=610%2C682&ssl=1|image suivante]] illustre le schéma-block (algorigramme) d'une narration interactive
 {{ :wiki:ressources:bandersnatch_arborescence.png?600 |Image issue du site Benhoquet}}
@@ Ligne 66: / Ligne 64: @@
 Comme vous pouvez le remarquer, certaines images sont animées (Gif):
 ----
-{{:wiki:ressources:mainimg.gif?400 |}}
+{{:wiki:ressources:mainimg.gif|}}
 ----
-{{ :wiki:ressources:redtwit.gif?50 |}}
+{{ :wiki:ressources:redtwit.gif |}}
 ----
-{{ :wiki:ressources:rss.gif?50 |}}
+{{ :wiki:ressources:rss.gif |}}
 ----
-{{ :wiki:ressources:treat.gif?100 |}}
+{{ :wiki:ressources:treat.gif |}}
 ----
@@ Ligne 433: / Ligne 431: @@
 }
-h1
+h1{
-{
 	position: absolute;
 	left: 3%;
@@ Ligne 440: / Ligne 437: @@
 	font-size: 12px;
 }
-h2
+h2{
-{
     position: absolute;
 	right: 3%;
@@ Ligne 447: / Ligne 443: @@
 	font-size: 12px;
 }
-h3
+h3{
-{
 	position: fixed;
 	left: 3%;
@@ Ligne 454: / Ligne 449: @@
 	font-size: 12px;
 }
-h4
+h4{
-{
 	position:inherit;
 	bottom: 1%;
@@ Ligne 498: / Ligne 492: @@
 #hat {position: fixed; top: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;
 }
+</code>
+Le titre de la page "THUNDERPAW_INTRO" est placé sous la balise <h1>, qui par défaut est de type "block" et doit donc occuper toute la margeur de la page. Les deux liens du menu en haut de la page sont "CHAPTER SELECT" et "MAIN MENU". Ces deux liens sont les contenus d'une balise <h2>, qui par défaut est aussi de type "block" et doit donc occuper une nouvelle ligne sous le titre <h1>. Or nous remarquons que le titre <h1> et les menus dans la balise <h2> sont sur la même ligne. Ceci est réalisé par la CSS suivante appliquée identiquement aux balises <h1> et <h2> :
+<code>
+h1,h2{
+	position: absolute;
+	left: 3%;
+	top: 0%;
+	font-size: 12px;
+}
 </code>
+=== La page 2 ===
+{{ :wiki:cours:cours:narration:page_2.png?400 |}}
+La[[http://thunderpaw.co/comic/2.html| deuxième page]] est accessible en cliquant sur l'image "NEXT" de la page précédente. Elle estcomposée de 3 images GIF les unes à la suite des autres permettant la lecture narrative. Ces images sont suivies d'une quatrième nommée "title.gif". Enfin deux image "PREV" et "NEXT" de type "inline" sont placées à la fin de la page pour revenir sur la page précédente ou accéder à la suivante.
+==Code HTML==
+Le code est le suivant :
+<code>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>THUNDERPAW_ INTRO</title>
+<style type="text/css">
+body {
+	margin-bottom: 15%;
+}
+</style>
+<link rel="stylesheet" type="text/css" href="Vcomic.css" />
+</head>
+<body>
+<h1>>THUNDERPAW_INTRO</h1>
+<h2><a href="http://thunderpaw.co/chselect.html">[CHAPTER SELECT]</a> <a href="http://thunderpaw.co">[MAIN MENU]</a></h2>
+<center>
+<div id="comic">
+  <img src="1.gif">
+  <img src="2.gif">
+  <img src="3.gif">
+</div>
+<img class="displayed"  src="title.gif" />
+<p>
+<a href="index.html"><img src="prev.gif"></a><a href="/comic/ch1/"><img src="next.gif"></a>
+</body>
+</html>
+</code>
+== Code CSS==
+Le code CSS est le suivant :
+<code>
+@charset "utf-8";
+/* CSS Document */
+body {
+	background-color: #333;
+	margin-left: 0%;
+	margin-top: 0%;
+	margin-right: 0%;
+	margin-bottom: 0%;
+}
+#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:inherit;
+	bottom: 1%;
+	right: 0%;
+	font-size: 12px;
+}
+body,td,th {
+	font-family: "Courier New", Courier, monospace;
+	font-size: 14px;
+	color: #ccc;
+}
+a:link {
+	color: #f60;
+	text-decoration: none;
+}
+a:visited {
+	text-decoration: none;
+	color: #f60;
+}
+a:hover {
+	text-decoration: none;
+	color: #ccc;
+}
+a:active {
+	text-decoration: none;
+	color: #f60;
+}
+#comic {
+vertical-align:	top;
+border: 0px;
+background-color: #333;
+width: 800px;
+margin-left: auto;
+margin-right: auto;
+margin-bottom: 5%;
+}
+#footer {position: fixed; bottom: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;}
+#hat {position: fixed; top: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;
+}
+</code>
 ===== Ressources et exemples =====
 ----

TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Différences

Outils de la page