-------------- CODE ALICIA KEYS
1. Avant de commencer quoi que ce soit, enregistre ces trois images sur
ton serveur.
appelle la entrealicia.gif
appelle la layoutaliciakeys.jpg
appelle la fondkeys.gif
2. Crée une page que tu appelleras accueil.htm et copie dessus le
code html ci-dessous. Garde bien les dimensions que j'ai données pour
l'image dans le code.
<![CDATA[<html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#95BDE5" text="#000000" link="#0000FF" vlink="#0000FF" alink="#0000FF">
<p align="right">
<a href="#"onClick="MyWindow=window.open
('index.htm', 'MyWindow','toolbar=no,location=no,menubar=no,scrollbars=no,resizable=no,width=714,height=761');
return false;">
<img src="image/entrealicia.gif"
border="0"></a>
</p>
<p align="right"> </p>
<p align="right"><a href="http://www.babystar.ca.tc" target="_blank"><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">Merci
Babystar</font></a></p>
</body>
</html>
]]>
3. Crée une deuxième page que tu appelleras index.htm et copies-y
ce code. N'oublie pas de changer les URL des pages (1, 2...6)
NE CHANGE SURTOUT PAS LES DIMENSIONS QUE J'AI MISES CAR TOUT SE DECALERAIT :
<![CDATA[
<html>
<head>
<title>Layout Alicia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style css>
<!--BODY{
scrollbar-face-color:#95BDE5;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#95BDE5;
scrollbar-shadow-color:#95BDE5;
scrollbar-darkshadow-color:##95BDE5;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:##95BDE5;}
}-->
</style>
</head>
<body bgcolor="#95BDE5" text="#000000" leftmargin="0" topmargin="0">
<img src="image/layoutaliciakeys.JPG" width="714" height="706" usemap="#Map2" border="0">
<map name="Map2">
<area shape="rect" coords="86,503,138,558" href="pagealicia.htm" target="IFRAME" alt="1" title="1">
<area shape="rect" coords="88,571,138,630" href="pagealicia.htm" target="IFRAME" alt="2" title="2">
<area shape="rect" coords="87,647,137,701" href="pagealicia.htm" target="IFRAME" alt="3" title="3">
<area shape="rect" coords="147,504,197,560" href="pagealicia.htm" target="IFRAME" alt="4" title="4">
<area shape="rect" coords="147,569,199,630" href="pagealicia.htm" target="IFRAME" alt="5" title="5">
<area shape="rect" coords="148,639,200,695" href="pagealicia.htm" target="IFRAME" alt="6" title="6">
<area shape="rect" coords="599,679,697,701" href="http://www.babystar.ca.tc" alt="Merci Babystar" title="Merci Babystar" target="_blank">
</map>
<div style="position:absolute; left:287px; top:202px; width: 410px; height: 457px;">
<iframe src="index1.htm" name="IFRAME"
style="position:absolute; left:0px; top:0px; width: 410px; height: 457px; FILTER: chroma (color=FF66FF)" id="IFRAME">
</iframe></div>
</body>
</html>
]]>
4. Crée une troisième page et nomme la index1.htm. Ce sera la
page qui apparaîtra dans la I-Frame la première fois, et quand
on cliquera sur le bouton 6 :
<![CDATA[
<html>
<head>
<title>Pages</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>Adresse ici un petit mot à tes visiteurs en leur expliquant la navigation.</p>
<p>Tu peux aussi mettre les news et updates de ton site.</p>
</body>
</html>
]]>
5. Pour t'éviter de perdre du temps à configurer la couleur des
liens, du texte, de la scroll-barre... sur chaque page, je t'ai crée
la feuille de style qui va avec ce layout. Voilà comment faire :
Copie ce code sur une page que tu appellera style.css. Il y a juste ce code
qui doit apparaître, il ne doit pas y avoir de balises html, head ou body
; alors si elles y sont, efface les.
Sur toutes tes pages, copie ce code entre les balises <head> et </head>
(c'est moins long que de tout copier, hein?)
Comme tu le vois, j'ai fait beaucoup d'efforts pour que tu arrives à
installer ce layout, alors stp si tu pouvais me prévenir que tu le prends
ce serait super sympa!
<= back