Site en cours

Invité

Je ne savais pas trop ou poster ça, finalement je me suis dit que c'était le meilleur endroit.
Voici a quoi j'aimerai parvenir (le bleu ciel serait un image de fond)

y a du boulot hien ^^

Invité

Non c'est plutôt simple au contraire.Tu veux que je t'aide maintenant ou tu préfère avoir mon tuto sur les table qui devrai arriver demain ou dimanche ?

Invité

Je serais en exam du lundi 1er au 10 septembre alors je mets tous mes projets de coté en ce moment pour les reprendre après. Et alors je voudrais bien de ton aide.

Invité

Ok alors tu as ton header et les boutons de ton menu ?

Invité

oui tout et le blabla et copyright est une image (texte sur fond transparent)

Invité

Le simple si t'es pressé c'est que je le fasse pour toi et que je te donne le code en mettannt en majuscule ce que tu peux modifié.
Donc héberge les images et passe moi ensuite les liens

Invité

c'est super gentil mais je ne suis pas pressée et surtout j'aimerai apprendre.

Invité

Très bien alors tu utilise quel logiciel ? (ex ceux que j'ai mis dans le tuto sur les I - Frames)

Invité

Nvu (par contre tu pourrais peut être m'aider pour autre chose, je te contact par mp)

Invité

Ca c'est cool comme ça tu seras pas obligé de tout codé.

1 - Ouvre Nvu
2 - U nouveau fichier se crée automatiquement va dans longlet source tu peux voir que le code suivant y est déja.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>

Pour avoir un tableau de base avec 1 ht et 2 colonnes sans espace entre les éléments tape ce code (je te met en majuscule les élément que tu peux modifiée) après le <body> .
Avec Nvu tu peux modifié toute ce que j'ai mis en majuscule en faisant Clic - Doit -> Propiétée cellulle

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI TU EN VEUX UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE TON TEXTE (OU DE TON IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI TU N'EN VEUX PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU TU METS LE HEADER) px;" colspan="2">
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHE px; width: HAUTEURS DES 2 COLONNES px;">
<br>
</td>
<td colspan="1"
style="vertical-align: top; width: LARGEUR DE LA COLONNE DE DROITE px;">
</td>
</tr>
</tbody>
</table>

3 - Maintenant le remplir un peu :
a - D'abord le header

Mettre ce code

Code:: <img alt="NOM DU FICHIER"
src="ADRESSE HTTP DU FICHIE (LIEN DU FICHIER)">

A cet emplacement

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI TU EN VEUX UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE TON TEXTE (OU DE TON IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI TU N'EN VEUX PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU TU METS LE HEADER) px; width: HAUTEURS DES 2 COLONNES px;" colspan="2">
ICI

Pour les boutons il suffit de mettre ce code à la suite du header et ce pour chaque bouton

Code:: <a
href="ADRESSE HTTP DU LIEN OU MèNE L'IMAGE (EX : ACCUEIL)" target="NOM DE L'EMPLACEMENT OU DOIT S'OUVRIR LE LIEN><img alt="NOM DU FICHIER"
src="ADRESSE HTTP DE L'IMAGE (LIEN DE L'IMAGE)"></a>

A cet emplacement

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI TU EN VEUX UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE TON TEXTE (OU DE TON IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI TU N'EN VEUX PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU TU METS LE HEADER) px;" colspan="2">
HEADER </BR> BOUTON 1 - 2 - ...... ETC
</td>

b - Ensuite la colone de gauche.
Généralement je met mon menu mais tu peux y mettre ce que tu y veux
Dans le code ça donne ça

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI TU EN VEUX UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE TON TEXTE (OU DE TON IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI TU N'EN VEUX PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU TU METS LE HEADER) px;" colspan="2">
HEADER </BR> BOUTON 1 - 2 - ...... ETC
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHEpx;">
BLABLABLA
</td>

Pour la colonne de gauche (la page qui va se charger quand tu clique sur les boutons, entre ce code.

Code:: <iframe
src="URL DE TA PAGE QUI S'AFFICHERA DANS L'I - FRAME (IL S'AGIT LE PLUS SOUVENT DE CELLE DE LA PAGE D'ACCUEIL) ATTENTION NE PAS CHANGER L'URL"
name="NOM DE LA FRAME" frameborder="0" height="HAUTEUR DE LA FRAME"
width="LARGEUR DE L'I - FRAME"></iframe>

A cet emplacement

Code:: <table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI TU EN VEUX UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE TON TEXTE (OU DE TON IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI TU N'EN VEUX PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU TU METS LE HEADER) px;" colspan="2">
HEADER </BR> BOUTON 1 - 2 - ...... ETC
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHE px;width: HAUTEURS DES 2 COLONNES px;">
BLABLABLA
</td>
<td colspan="1"
style="vertical-align: top; width: 555px;">
ICI</td>
</tr>
</tbody>
</table>

Et fini la page par

Code:: </body>
</html>

Voila la partie code html est fini tu devrais avoir un code de ce genre

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table style="border-collapse: collapse; width: LARGEUR DE TABLEAU" px;"
border="LARGEUR DE LA BORDURE AUTOUR DU TABLEAU (SI TU EN VEUX UNE, SINON METTRE 0)" bordercolor="CODE COULEUR DE LA BORDURE" cellpadding="ESPACE CONSTANT ENTRE TON TEXTE (OU DE TON IMAGE COMME LE HEADER) ET LE BORD DU TABLEAU. METTRE 0 SI TU N'EN VEUX PAS"
cellspacing="0">
<tbody>
<tr>
<td style="width: LARGEUR DU HAUT DU TABLEU (LA OU TU METS LE HEADER) px;" colspan="2">
HEADER </BR> BOUTON 1 - 2 - ...... ETC
</td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top;width: LARGEUR DE LA COLONNE DE GAUCHE px;width: HAUTEURS DES 2 COLONNES px;">
BLABLABLA
</td>
<td colspan="1"
style="vertical-align: top; width: 555px;">
EMPLACEMENT DE LA FRAME (LA PAGE)</td>
</tr>
</tbody>
</table>
</body>
</html>

Je te met un exemple concret de codage avec celui que j'utilise actuellement pour mon site

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Dream - Version 2 Kristen Bell</title>
</head>
<body
style="background-image: url(http://img380.imageshack.us/img380/9972/26917abgk7.gif);">
<center>
<table style="border-collapse: collapse; width: 750px;"
border="0" bordercolor="" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td style="width: 555px;" colspan="2"><img
style="width: 758px; height: 258px;" alt=""
src="http://i42.servimg.com/u/f42/11/52/38/33/header26.jpg"></td>
</tr>
<tr>
<td colspan="1"
style="vertical-align: top; text-align: center; background-color: rgb(201, 203, 202); width: 200px;">
<h1>Menu</h1>
<a
href="http://site.voila.fr/dream20/Home.html?0.8511720830101215"
target="bloc">Home</a><br>
<a
href="http://site.voila.fr/dream20/Script.html?0.17007522486918136"
target="bloc">Dreams
of script</a><br>
<a
href="http://site.voila.fr/dream20/Art.html?0.5020889640961524"
target="bloc">Dreams
of arts</a><br>
<a
href="http://site.voila.fr/dream20/moi.html?0.6666381923318816"
target="bloc">Moi
moi et moi</a><br>
<a
href="http://site.voila.fr/dream20/Dreams_notes.html?0.8661692515217287"
target="_blank">Blablatages</a><br>
Faire mumuse ?<br>
Ressources<br>
<a href="http://site.voila.fr/dream20/you.html"
target="bloc">You</a><br>
<a target="bloc"
href="http://site.voila.fr/dream20/site.html?0.7163432560933604">Site</a><br>
Contact<br>
<br>
<h1>Site</h1>
Version 2 : Kristen Bell<br>
Par : <a href="http://kpweb.c.la/" target="_blank">Maryon</a><br>
Online : Lundi 6 Juillet<br>
<br>
Site ouvert le : Lundi 7 Avril<br>
Webmaster : Lalita<br>
<br>
<h1>Link me</h1>
<img style="width: 100px; height: 35px;" alt=""
src="http://img139.imageshack.us/img139/9517/lien2ky3.gif"> <img
style="width: 100px; height: 35px;" alt=""
src="http://i42.servimg.com/u/f42/11/52/38/33/bouton24.gif"><br>
<br>
<a
href="http://site.voila.fr/dream20/lien.html?0.8362363968732662"
target="bloc">Plus ?</a>
<h1>Top</h1>
<a href="http://alltosophelia.site.voila.fr/"
target="_blank"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img76.imageshack.us/img76/5286/sanstitre2il7.gif"></a> 
 <a href="http://keran.site.voila.fr/"
target="_blank"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img76.imageshack.us/img76/3331/sanstitre5ki0.gif"></a> 
<a href="http://kiarie.free.fr/dam/" target="_blank"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img76.imageshack.us/img76/6318/sanstitre6ys9.gif"></a> <a
href="http://candies-awards.ze.cx/" target="_blank"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img292.imageshack.us/img292/1610/15634594su2.png"></a><br>
<a
href="http://site.voila.fr/dream20/devenir_part.html?0.1001217666891766"
target="bloc"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img510.imageshack.us/img510/1609/sanstitre5gm6gc3.gif"></a>  <a
href="http://site.voila.fr/dream20/devenir_part.html?0.1001217666891766"
target="bloc"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img510.imageshack.us/img510/1609/sanstitre5gm6gc3.gif"></a> 
<a
href="http://site.voila.fr/dream20/devenir_part.html?0.1001217666891766"
target="bloc"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img510.imageshack.us/img510/1609/sanstitre5gm6gc3.gif"></a> 
<a
href="http://site.voila.fr/dream20/devenir_part.html?0.1001217666891766"
target="bloc"> <img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img510.imageshack.us/img510/1609/sanstitre5gm6gc3.gif"></a>
<h1>Partenaires</h1>
<h3>Dernier(s) ajouté(s)</h3>
<a href="http://love-is-blindness.xooit.com/"><img
style="border: 0px solid ; width: 100px; height: 35px;" alt=""
src="http://img27.xooimage.com/files/3/d/7/but-samiiiir-5672fb.gif"></a> <a
href="http://dangerous-temptation.forumotion.com/forum.htm"
target="_blank"><img
style="border: 0px solid ; width: 100px; height: 35px;" alt=""
src="http://img71.imageshack.us/img71/5720/bouton1ej0.gif"></a> <a
href="http://www.sibylline.fr/" target="_blank"><img
style="border: 0px solid ; width: 100px; height: 35px;" alt=""
src="http://www.sibylline.fr/images/liensiby2.jpg"></a> <a
href="http://candies-awards.ze.cx/" target="_blank"><img
style="border: 0px solid ; width: 100px; height: 35px;" alt=""
src="http://img364.imageshack.us/img364/5976/tatianacandiesawards4bc7.gif"></a> <a
href="http://art.kiwi.free.fr/" target="_blank"><img
style="border: 0px solid ; width: 100px; height: 35px;"
src="http://artkiwi.e3b.org/images/Art%20Kiwi_005.gif"
alt="Art Kiwi, l'art à petit prix"></a> <a
href="http://vie.en.couleurs.free.fr/" target="_blank"><img
style="border: 0px solid ; width: 100px; height: 35px;"
src="http://vie.en.couleurs.free.fr/www/logoversion2.2.jpg"
alt=""> </a><br>
 <a href="http://graphix-illusion.fr/"
target="_blank"><img
style="border: 0px solid ; width: 100px; height: 35px;"
src="http://graphix-illusion.fr/boutons/100x35/v6b4.png" alt=""></a><br>
<a target="bloc"
href="http://site.voila.fr/dream20/Partenaires.html?0.9815487958351122">Plus
?</a> <a
href="http://site.voila.fr/dream20/devenir_part.html?0.1001217666891766"
target="bloc">Vous ?</a>
<h1>Vote</h1>
<a
href="http://www.root-top.com/topsite/forumrpg/in.php?ID=2076"
target="_blank"><img
src="http://img.root-top.com/topsite/forumrpg/banner.gif"
border="0"></a> <br>
<a
href="http://www.root-top.com/topsite/rannayang/in.php?ID=148"
target="_blank"><img
src="http://img.root-top.com/topsite/rannayang/banner.gif"
border="0"></a> <br>
<a href="http://www.root-top.com/topsite/dreams/in.php?ID=2"
target="_blank"> <img
src="http://img.root-top.com/topsite/dreams/banner.gif"
border="0"></a><br>
<br>
<h1>Review</h1>
<a href="http://minutes-blanches.net/reviews/"
target="_blank"><img
style="border: 0px solid ; width: 50px; height: 50px;" alt=""
src="http://minutes-blanches.net/reviews/boutons/btn-review5.jpg"></a> <a
href="http://catch-the-moon.ca.cx/" target="_blank"><small><img
style="border: 0px solid ; width: 50px; height: 50px;" alt=""
src="http://catch-the-moon.site.voila.fr/Design_site/CTMR.jpg"></small></a>
<h1>Award</h1>
<a href="http://catch-the-moon.ca.cx/" target="_blank"><img
style="border: 0px solid ; width: 50px; height: 50px;" alt=""
src="http://catch-the-moon.site.voila.fr/Design_site/CTMA1.jpg"></a><br>
<a href="http://vie.en.couleurs.free.fr/"
target="_blank"><br>
</a>
<h1>Tag</h1>
<iframe
title="dream20" src="http://www4.shoutmix.com/?dream20"
frameborder="0" height="500" scrolling="no"
width="180">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;View
shoutbox&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
</iframe><br>
 </td>
<td colspan="1"
style="vertical-align: top; width: 555px; text-align: justify;">
<iframe
src="http://site.voila.fr/dream20/Home.html?0.8511720830101215"
name="bloc" frameborder="0" height="2500"
width="565"></iframe></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

et avec un peu de mise en page css ça peut donner ce résultat

Invité

ouah super, si avec ça j'y arrive pas!!!