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 Dernière révision Les deux révisions suivantes | ||
wiki:ressources:narration-interactive [2020/11/20 17:34] 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 74: | Ligne 74: | ||
{{ : | {{ : | ||
---- | ---- | ||
+ | |||
+ | les fichiers HTML/CSS de la page sont disponibles sur le lien suivant : {{ : | ||
== Code source HTML == | == Code source HTML == | ||
- | Le code source de la page est très simple: | + | Le code source de la page est relativement |
< | < | ||
Ligne 84: | Ligne 86: | ||
< | < | ||
<meta http-equiv=" | <meta http-equiv=" | ||
- | < | + | |
- | < | + | <script type=" |
- | startList | + | |
- | + | <link rel=" | |
- | if (document.getElementById) { | + | |
- | navRoot = document.getElementById("nav" | + | |
- | for (i=0; i< | + | |
- | node = navRoot.childNodes[i]; | + | |
- | if (node.nodeName=="LI") { | + | |
- | node.onclick=function() { | + | |
- | + | ||
- | this.className = (this.className == " | + | |
- | + | ||
- | } | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | window.onload=startList; | + | |
- | //-->< | + | |
- | + | ||
- | </ | + | |
- | <style type=" | + | |
- | + | ||
- | / | + | |
- | body { | + | |
- | background: #333 url(redbg.gif) fixed repeat-x bottom; | + | |
- | margin-bottom: | + | |
- | margin-left: | + | |
- | margin-top: | + | |
- | margin-right: | + | |
- | font-family: | + | |
- | font-size: | + | |
- | } | + | |
- | a:link { | + | |
- | color: #ffffcc; | + | |
- | text-decoration: | + | |
- | } | + | |
- | a: | + | |
- | text-decoration: | + | |
- | color: #ffffcc; | + | |
- | + | ||
- | } | + | |
- | a:hover { | + | |
- | text-decoration: | + | |
- | color: #f60; | + | |
- | text-indent: | + | |
- | } | + | |
- | a:active { | + | |
- | text-decoration: | + | |
- | color: #f60; | + | |
- | } | + | |
- | h1 { | + | |
- | position: | + | |
- | bottom: 0%; | + | |
- | left: 3%; | + | |
- | font-size: | + | |
- | color: #f60; | + | |
- | } | + | |
- | + | ||
- | h2 { | + | |
- | position: | + | |
- | bottom: | + | |
- | left: | + | |
- | font-size: | + | |
- | color: #f60; | + | |
- | + | ||
- | } | + | |
- | + | ||
- | #logo { | + | |
- | width: 503px; | + | |
- | height: 165px; | + | |
- | margin: auto; | + | |
- | background: | + | |
- | } | + | |
- | + | ||
- | img { | + | |
- | border: none; | + | |
- | } | + | |
- | </ | + | |
- | <link rel=" | + | |
</ | </ | ||
< | < | ||
<div id=" | <div id=" | ||
- | < | + | < |
- | <img src="THUNDERPAW%20IN%20THE%20ASHES%20OF%20FIRE%20MOUNTAIN_fichiers/ | + | < |
- | style=" | + | |
- | float: | + | |
- | right: | + | |
- | bottom: | + | |
</ | </ | ||
Ligne 190: | Ligne 111: | ||
</ | </ | ||
< | < | ||
- | <a href=" | + | <a href=" |
- | <a href=" | + | <a href=" |
- | <a href=" | + | <a href=" |
</ | </ | ||
< | < | ||
Ligne 200: | Ligne 121: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
Ligne 207: | Ligne 127: | ||
/*general stuff*/ | /*general stuff*/ | ||
body { | body { | ||
- | | + | |
margin-bottom: | margin-bottom: | ||
margin-left: | margin-left: | ||
Ligne 214: | Ligne 134: | ||
font-family: | font-family: | ||
font-size: 12px; | font-size: 12px; | ||
- | |||
- | |||
} | } | ||
Ligne 225: | Ligne 143: | ||
text-decoration: | text-decoration: | ||
color: #ffffcc; | color: #ffffcc; | ||
- | |||
} | } | ||
+ | |||
a:hover { | a:hover { | ||
text-decoration: | text-decoration: | ||
Ligne 232: | Ligne 150: | ||
text-indent: | text-indent: | ||
} | } | ||
+ | |||
a:active { | a:active { | ||
text-decoration: | text-decoration: | ||
Ligne 237: | Ligne 156: | ||
} | } | ||
- | h1 | + | h1 { |
- | { | + | |
position: absolute; | position: absolute; | ||
bottom: 0%; | bottom: 0%; | ||
Ligne 244: | Ligne 162: | ||
font-size: 12px; | font-size: 12px; | ||
color: #f60; | color: #f60; | ||
- | |||
} | } | ||
- | h2 | + | h2 { |
- | { | + | |
position: absolute; | position: absolute; | ||
bottom:7%; | bottom:7%; | ||
Ligne 254: | Ligne 170: | ||
font-size: 12px; | font-size: 12px; | ||
color: #f60; | color: #f60; | ||
- | |||
} | } | ||
Ligne 261: | Ligne 176: | ||
height: 165px; | height: 165px; | ||
margin: auto; | margin: auto; | ||
- | background: | + | background: |
} | } | ||
Ligne 267: | Ligne 182: | ||
border: none; | border: none; | ||
} | } | ||
- | + | / | |
- | + | ||
- | + | ||
@charset " | @charset " | ||
/* CSS Document */ | /* CSS Document */ | ||
Ligne 280: | Ligne 192: | ||
list-style: | list-style: | ||
width: | width: | ||
- | |||
- | |||
- | |||
} | } | ||
Ligne 288: | Ligne 197: | ||
position: relative; | position: relative; | ||
width: | width: | ||
- | |||
- | |||
- | |||
} | } | ||
/* keep folowing styles together..........................*/ | /* keep folowing styles together..........................*/ | ||
Ligne 318: | Ligne 224: | ||
} | } | ||
li ul li { /* sublinks ....*/ | li ul li { /* sublinks ....*/ | ||
- | |||
width: | width: | ||
height: | height: | ||
Ligne 324: | Ligne 229: | ||
border-bottom: | border-bottom: | ||
text-align: | text-align: | ||
- | |||
} | } | ||
Ligne 342: | Ligne 246: | ||
| | ||
| | ||
- | |||
} | } | ||
Ligne 365: | Ligne 268: | ||
bottom: 15%; | bottom: 15%; | ||
left: 3%; | left: 3%; | ||
- | |||
- | |||
} | } | ||
+ | # | ||
+ | height: | ||
+ | width: | ||
+ | } | ||
+ | #mainImage{ | ||
+ | position: | ||
+ | float: | ||
+ | right:0px; | ||
+ | bottom: | ||
+ | } | ||
+ | </ | ||
+ | == Code Javascript == | ||
+ | < | ||
+ | startList = function() { | ||
+ | |||
+ | if (document.getElementById) { | ||
+ | navRoot = document.getElementById(" | ||
+ | for (i=0; i< | ||
+ | node = navRoot.childNodes[i]; | ||
+ | if (node.nodeName==" | ||
+ | node.onclick=function() { | ||
+ | this.className = (this.className == " | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | window.onload=startList; | ||
</ | </ | ||
+ | |||
+ | Ce code en Javascript lance la fonction // | ||
+ | L' | ||
+ | |||
+ | < | ||
+ | if (document.getElementById) | ||
+ | </ | ||
+ | Si la fonction // | ||
+ | |||
+ | < | ||
+ | navRoot = document.getElementById(" | ||
+ | </ | ||
+ | Récupérer tous les éléments de la bare de navigation identifiée par // | ||
+ | |||
+ | < | ||
+ | for (i=0; i< | ||
+ | </ | ||
+ | Pour l' | ||
+ | < | ||
+ | node = navRoot.childNodes[i]; | ||
+ | </ | ||
+ | Récupérer le nœud d' | ||
+ | |||
+ | < | ||
+ | if (node.nodeName==" | ||
+ | </ | ||
+ | Tester si le nœud précédent vaut //" | ||
+ | |||
+ | < | ||
+ | if (node.nodeName==" | ||
+ | </ | ||
+ | Tester si le nœud précédent vaut //" | ||
+ | |||
+ | < | ||
+ | node.onclick=function() { | ||
+ | this.className = (this.className == " | ||
+ | } | ||
+ | </ | ||
+ | Lorsqu' | ||
+ | < | ||
+ | this.className = (this.className == " | ||
+ | </ | ||
+ | **Si** le nom de la classe (// | ||
+ | |||
+ | |||
+ | === La page d' | ||
+ | Lorsqu' | ||
+ | {{ : | ||
+ | |||
+ | Cette page contient un seul bouton //" | ||
+ | |||
+ | == Code HTML == | ||
+ | Le code HTML est le suivant : | ||
+ | < | ||
+ | < | ||
+ | <html xmlns=" | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | <style type=" | ||
+ | #text { | ||
+ | vertical-align: | ||
+ | border: 0px; | ||
+ | width: | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | body { | ||
+ | background: url(0bg.gif) fixed repeat-x bottom; | ||
+ | margin-bottom: | ||
+ | margin-left: | ||
+ | margin-top: | ||
+ | margin-right: | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | <link rel=" | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | <img src=" | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | On remarque que le bouton " | ||
+ | < | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | Ce lien renvoie vers la page " | ||
+ | |||
===== Ressources et exemples ===== | ===== Ressources et exemples ===== | ||
---- | ---- |