TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Piste:
wiki:ressources:narration-interactive

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
Dernière révision Les deux révisions suivantes
wiki:ressources:narration-interactive [2020/11/20 15:31]
damien.muti [Programmation HTML/CSS : Étude d'un exemple] 		wiki:ressources:narration-interactive [2020/11/20 19:21]
damien.muti [Programmation HTML/CSS : Étude d'un exemple]
Ligne 59: Ligne 59:
  
 L'exemple de la bande dessinée "[[http://thunderpaw.co/|Thunderpaw - In the ashes of fire mountain]]" est une illustration simple dont nous allons nous inspirer. L'exemple de la bande dessinée "[[http://thunderpaw.co/|Thunderpaw - In the ashes of fire mountain]]" est une illustration simple dont nous allons nous inspirer.
 +
 +=== La page de garde ===
  
 {{ :wiki:ressources:page_de_garde_thunderpaw.png?800 |}} {{ :wiki:ressources:page_de_garde_thunderpaw.png?800 |}}
  
 Comme vous pouvez le remarquer, certaines images sont animées (Gif):  Comme vous pouvez le remarquer, certaines images sont animées (Gif): 
 +----
 {{:wiki:ressources:mainimg.gif?400 |}} {{:wiki:ressources:mainimg.gif?400 |}}
 +----
 {{ :wiki:ressources:redtwit.gif?50 |}} {{ :wiki:ressources:redtwit.gif?50 |}}
 +----
 {{ :wiki:ressources:rss.gif?50 |}} {{ :wiki:ressources:rss.gif?50 |}}
 +----
 {{ :wiki:ressources:treat.gif?100 |}} {{ :wiki:ressources:treat.gif?100 |}}
 +----
  
-=== Code source HTML ===+les fichiers HTML/CSS de la page sont disponibles sur le lien suivant : {{ :wiki:ressources:thunderpaw.zip |}} 
 + 
 +== Code source HTML == 
 +Le code source de la page est relativement simple:
  
-Le code source de la page est très simple:  
 <code> <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>
 + <title>THUNDERPAW: IN THE ASHES OF FIRE MOUNTAIN</title>
 + <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 +
 + <script type="text/javascript" src ="../JS/JS.js"></script>
 +
 + <link rel="stylesheet" type="text/css" href="CSS/style.css">
 + </head>
 + <body>
 + <div id="logo"></div>
 + <div id="divMainImage" >
 + <img id="mainImage" src="images/mainimg.gif" >
 + </div> 
  
 + <ul id="nav">
 +   <li class="on"><a href="http://thunderpaw.co/comic">&gt;&gt;BEGIN&lt;&lt;</a></li>
 +   <li><a href="http://thunderpaw.co/comic/new.html">CONTINUE</a></li>
 +   <li><a href="http://tpaw-news.tumblr.com/">NEWS</a></li>
 +   <li><a href="#">OPTIONS</a> 
 +     <ul>
 +       <li><a href="http://thunderpaw.co/chselect.html">CHAPTER SELECT</a></li>
 +       <li><a href="http://thunderpaw.co/about.html">ABOUT</a></li>
 +       <li><a href="http://society6.com/repoghost">STORE</a></li>
 +        <li><a href="http://www.patreon.com/repoghost">SUPPORT</a></li>
 +     </ul>
 +   </li>
 + </ul>
 + <h1>
 + <a href="http://twitter.com/repoghost" target="top" border="0"><img src="images/redtwit.gif"></a> 
 + <a href="http://feeds.feedburner.com/thunderpaw"><img src="images/rss.gif"></a> 
 + <a href="http://www.patreon.com/repoghost"><img src="images/treat.gif"></a>
 + </h1>
 + <h2> * WARNING * 
 + <br>Thunderpaw can contain flashing colors + patterns. 
 + <br>Please be safe.
 + </h2>
 + </body>
 +</html>
 </code> </code>
 +
 +== Code CSS ==
 +<code>
 +/*general stuff*/
 +body {
 +  background: #333 url(../images/redbg.gif) fixed repeat-x bottom;
 + margin-bottom: 0%;
 + margin-left: 0%;
 + margin-top: 0%;
 + margin-right: 0%;
 + font-family: "Courier New", Courier, monospace;
 + font-size: 12px;
 +}
 +
 +a:link {
 + color: #ffffcc;
 + text-decoration: none;
 +}
 +a:visited {
 + text-decoration: none;
 + color: #ffffcc;
 +}
 +
 +a:hover {
 + text-decoration: none;
 + color: #f60;
 + text-indent:6px;
 +}
 +
 +a:active {
 + text-decoration: none;
 + color: #f60;
 +}
 +
 +h1 {
 + position: absolute;
 + bottom: 0%;
 + left: 3%;
 + font-size: 12px;
 + color: #f60;
 +}
 +
 +h2 {
 + position: absolute;
 + bottom:7%;
 + left:3%;
 + font-size: 12px;
 + color: #f60;
 +}
 +
 +#logo {
 + width: 503px;
 + height: 165px;
 + margin: auto;
 + background: url(../images/thunderpawtitle.png) no-repeat center scroll;
 +}
 +
 +img {
 + border: none;
 +}
 +/***********************************************/
 +@charset "utf-8";
 +/* CSS Document */
 +
 +
 +ul {
 + margin:0;
 + padding:0;
 + list-style: none;
 + width:200px;
 +}
 +
 +ul li { /*MAIN MENU*/
 + position: relative;
 + width:200px; 
 +}
 +/* keep folowing styles together..........................*/
 +* html ul ul {
 + margin-left:-16px;/* ie5 fix */
 + voice-family: "\"}\""; 
 + voice-family: inherit;
 +}
 +* html ul li {float:left;/* hide float from ie5*/}
 +* html ul ul {
 + width:relative;
 + w\idth:200px;
 + voice-family: "\"}\""; 
 + voice-family: inherit;
 +}
 +* html ul ul {margin-left:0;/* hide margin from ie5*/}
 +
 +/* keep above styles together .............*/
 +
 +li ul { /* sublink container ...*/
 + margin-left: 10%;
 + padding: 10px;
 + position: relative;
 + display:none;
 +
 +
 +}
 +li ul li { /* sublinks ....*/
 +    width:150px;
 + height:17px;
 + border-left:1px solid white;
 + border-bottom:1px solid white;
 + text-align: right;
 +}
 +
 +/* Styles for Menu Items */
 +ul li a {
 + display: block;
 + text-decoration: none;
 + line-height: none;
 + height: 20px;
 + padding: 2px;
 +}
 +li li a {background:none}
 +
 +/* set dropdown to default */
 +li:hover li a, li.over li a {
 +   background-color: none;
 +   font-weight:normal;
 +   text-decoration:none;
 +}
 +
 +/* this sets all hovered lists to red */
 +li a:hover,
 +li:hover a, li.over a,
 +li:hover li a:hover, li.over li a:hover {
 + text-decoration: inherit;
 + text-indent: 6px;
 + background-color: none;
 + font-weight: bold;
 +}
 +
 +li ul li  {  } /* Sub Menu Styles */
 + li.on ul { display: block } /* The magic */
 +li.off ul{display:none}
 +
 + 
 +#nav {
 + 
 +  position:fixed;
 +  bottom: 15%;
 +  left: 3%;
 +} 
 +#divMainImage {
 + height:100%; 
 + width:100%;
 +}
 +#mainImage{
 + position:absolute;
 + float:right;
 + right:0px;
 + bottom:0px;
 +}
 +</code>
 +
 +== Code Javascript ==
 +<code>
 +startList = function() {
 +
 +if (document.getElementById) {
 + navRoot = document.getElementById("nav");
 + for (i=0; i<navRoot.childNodes.length; i++) {
 + node = navRoot.childNodes[i];
 + if (node.nodeName=="LI") {
 + node.onclick=function() {
 + this.className = (this.className == "on") ? "off" : "on";
 + }
 +    }
 +  }
 + }
 +}
 +window.onload=startList;
 +</code>
 +
 +Ce code en Javascript lance la fonction //startlist// dès le chargement de la page.
 +L'algorithme est le suivant :
 +
 +<code>
 +if (document.getElementById)
 +</code>
 +Si la fonction //getElementById// appliqué au document renvoie //true//, alors on effectue le bloc d'instruction qui suit :
 +
 +<code>
 +navRoot = document.getElementById("nav");
 +</code>
 +Récupérer tous les éléments de la bare de navigation identifiée par //ID="nav"//
 +
 +<code>
 +for (i=0; i<navRoot.childNodes.length; i++)
 +</code>
 +Pour l'ensemble des éléments de la barre de navigation (on fait varier un indice //i//) effectuer le bloc d'instruction suivant :
 +<code>
 +node = navRoot.childNodes[i];
 +</code>
 +Récupérer le nœud d'indice //i// et la placer dans la variable //node//
 +
 +<code>
 +if (node.nodeName=="LI")
 +</code>
 +Tester si le nœud précédent vaut //"LI"//
 +
 +<code>
 +if (node.nodeName=="LI")
 +</code>
 +Tester si le nœud précédent vaut //"LI"//. Si le test est vrai (//true//), on lance l'instruction suivante:
 +
 +<code>
 +node.onclick=function() {
 +  this.className = (this.className == "on") ? "off" : "on";
 +}
 +</code>
 +Lorsqu'on clique sur le nœud //node// en question, on lance la fonction //function()// qui réalise le test conditionnel suivant :
 +<code>
 +this.className = (this.className == "on") ? "off" : "on";
 +</code>
 +**Si** le nom de la classe (//className//) à laquelle appartient le nœud //node// (repéré ici par le pointeur //this//) vaut //"on"//, **alors** on change sa valeur en //"on"// (//this.className = "off"//), **sinon** (si //this.className == "off"//), **alors** on change sa valeur en //"on"// (//this.className = "on"//).
 +
 +
 +=== La page d'introduction ===
 +Lorsqu'on clique sur //>>begin<<//, on arrive sur la page d'introduction de la narration :
 +{{ :wiki:ressources:page_intro.png?400 |}}
 +
 +Cette page contient un seul bouton //"NEXT"// qui renvoie vers la page qui suit.
 +
 +== Code HTML ==
 +Le code HTML 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">
 +#text {
 +vertical-align: top;
 +border: 0px;
 +width:616px;
 +margin-left: auto;
 +margin-right: auto;
 +margin-bottom: 0%;
 +} 
 +body {
 +    background: url(0bg.gif) fixed repeat-x bottom;
 + margin-bottom: 0%;
 + margin-left: 0%;
 + margin-top: 0%;
 + margin-right: 0%;
 +
 +}
 +</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="text">
 +  <img src="0.gif">
 + <a href="2.html"><img src="next.gif"></a>
 +</div>
 +
 +</body>
 +</html>
 +
 +</code>
 +
 +
 +On remarque que le bouton "NEXT" est repéré par le lien :
 +<code>
 +<a href="2.html"><img src="next.gif"></a>
 +</code>
 +
 +Ce lien renvoie vers la page "2.html"
 +
 ===== Ressources et exemples ===== ===== Ressources et exemples =====
 ---- ----
wiki/ressources/narration-interactive.txt · Dernière modification: 2020/11/21 12:57 de tomaok02

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial 4.0 International
CC Attribution-Noncommercial 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki