Aide pour le design d'un site par Julien78480 - page 1

Bonjour,
Aujourd'hui quelqu'un m'a fait et donné un design pour mon site web.
Voici le design en question: http://dark.kalas78.free.fr
Le seul problème c'est que ce design est en tableaux et non-extensible or moi je veux un design sans tableaux et extensible...
Je vous montre le code source actuel de ce design:

<HTML>
<HEAD>
<TITLE>Bienvenue sur Programmer's Website</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta name="generator" content="Namo WebEditor v5.0">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
<TR>
<TD ROWSPAN=8>
<IMG SRC="images/index_01.jpg" WIDTH=13 HEIGHT=257 ALT=""></TD>
<TD ROWSPAN=6>

<IMG SRC="images/index_02.jpg" WIDTH=71 HEIGHT=204 ALT=""></TD>
<TD COLSPAN=3 height="39" background="images/index_03.jpg">
   >
Menu
</TD>
<TD ROWSPAN=6>
<IMG SRC="images/index_04.jpg" WIDTH=288 HEIGHT=204 ALT=""></TD>
<TD ROWSPAN=6>
<IMG SRC="images/index_05.jpg" WIDTH=154 HEIGHT=204 ALT=""></TD>

<TD ROWSPAN=8>
<IMG SRC="images/index_06.jpg" WIDTH=14 HEIGHT=257 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 height="41" background="images/index_07.jpg">
   >
Menu
</TD>
</TR>

<TR>
<TD COLSPAN=3 height="39" background="images/index_08.jpg">
   >
Menu
</TD>
</TR>
<TR>
<TD COLSPAN=3 height="40" background="images/index_09.jpg">
   >
Menu

</TD>
</TR>
<TR>
<TD COLSPAN=3 height="40" background="images/index_10.jpg">
   >
Menu
</TD>
</TR>
<TR>
<TD COLSPAN=3>

<IMG SRC="images/index_11.jpg" WIDTH=210 HEIGHT=5 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 height="41" background="images/index_12.jpg">
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="137">
Menu

</td>
<td width="137">
Menu
</td>
<td width="137">
Menu
</td>
<td width="137">

Menu
</td>
<td width="137">
Menu
</td>
<td width="137">
 
</td>

</tr>
</table>
</TD>
</TR>
<TR>
<TD COLSPAN=6>
<IMG SRC="images/index_13.jpg" WIDTH=723 HEIGHT=12 ALT=""></TD>
</TR>
<TR>

<TD background="images/index_14.jpg">
 </TD>
<TD COLSPAN=2 bgcolor="#DFDFDF">

<table align="center" cellpadding="0" cellspacing="0" width="117">
<tr>
<td width="117" colspan="2" style="border-bottom-width:1; border-bottom-color:rgb(127,127,127); border-bottom-style:solid;"> Menu

</td>
</tr>
<tr>
<td width="14">  
</td>
<td width="103"> Rubrique
</td>

</tr>
<tr>
<td width="14">
 
</td>
<td width="103"> Rubrique
</td>
</tr>

<tr>
<td width="14">
 
</td>
<td width="103"> Rubrique
</td>
</tr>
</table>

 
<table align="center" cellpadding="0" cellspacing="0" width="117">
<tr>
<td width="117" colspan="2" style="border-bottom-width:1; border-bottom-color:rgb(127,127,127); border-bottom-style:solid;"> Menu
</td>
</tr>
<tr>

<td width="14">  
</td>
<td width="103"> Rubrique
</td>
</tr>
<tr>
<td width="14">

 
</td>
<td width="103"> Rubrique
</td>
</tr>
<tr>
<td width="14">
 

</td>
<td width="103"> Rubrique
</td>
</tr>
</table>
 
<table align="center" cellpadding="0" cellspacing="0" width="117">
<tr>

<td width="117" colspan="2" style="border-bottom-width:1; border-bottom-color:rgb(127,127,127); border-bottom-style:solid;"> Menu
</td>
</tr>
<tr>
<td width="14">  
</td>
<td width="103"> Rubrique

</td>
</tr>
<tr>
<td width="14">
 
</td>
<td width="103"> Rubrique
</td>

</tr>
<tr>
<td width="14">
 
</td>
<td width="103"> Rubrique
</td>
</tr>

</table>
 
<table align="center" cellpadding="0" cellspacing="0" width="117">
<tr>
<td width="117" colspan="2" style="border-bottom-width:1; border-bottom-color:rgb(127,127,127); border-bottom-style:solid;"> Menu
</td>
</tr>

<tr>
<td width="14">  
</td>
<td width="103"> Rubrique
</td>
</tr>
<tr>

<td width="14">
 
</td>
<td width="103"> Rubrique
</td>
</tr>
<tr>
<td width="14">

 
</td>
<td width="103"> Rubrique
</td>
</tr>
</table>
</TD>
<TD background="images/index_16.jpg">

 </TD>
<TD COLSPAN=3 bgcolor="#EEEEEE">
<table style="border-width:1; border-color:rgb(127,127,127); border-style:solid;" align="center" cellpadding="0" cellspacing="0" width="450">
<tr>
<td width="440">
<img src="http://pws.ehia.org/images/logo.png" width="468" height="60" border="0">
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" width="564" bordercolordark="black" bordercolorlight="black">
<tr>
<td width="564">
<table cellpadding="0" cellspacing="0" width="469" align="center">
<tr>
<td width="129">
   Dernieres
news >
</td>

<td width="340"><marquee
style="font-family: Trebuchet MS; font-size: 10pt" border="1" width="100%" height="18" direction="right">Nouveau
design réalisé dead_x</marquee></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="564"> 
</td>

</tr>
<tr>
<td width="564">orem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dignissim dui
ut eros. Vivamus lorem dolor, accumsan vel, commodo sed, consequat ac, arcu.
Suspendisse et metus a sapien pretium aliquet. Nunc justo magna, sollicitudin
ac, ullamcorper ac, tempor at, sapien. Vivamus sit amet ipsum sed est
condimentum mattis. Suspendisse dapibus pulvinar sem. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce
convallis. Mauris molestie lacus nec erat. Suspendisse in felis. Fusce vel pede
ac est congue rutrum. 
Vestibulum hendrerit mi id ante. Nulla facilisi. Aliquam in wisi. Nullam
diam. Proin ornare. Suspendisse elementum, risus in dignissim interdum, metus
lectus convallis erat, nec fermentum massa wisi ac felis. Ut bibendum risus at
arcu. Integer dolor erat, fringilla vel, vehicula ac, venenatis vel, justo.
Morbi dignissim feugiat ante. Phasellus purus erat, fringilla quis, sagittis
nec, mattis eu, massa. Mauris lobortis quam congue dolor. Integer ac tellus.
Curabitur viverra magna non tellus. Maecenas arcu dolor, congue non, blandit
sed, rhoncus sit amet, pede. Sed tristique. 
Proin quis erat in arcu sagittis luctus. Donec vestibulum. Suspendisse vitae
purus vitae libero venenatis posuere. Suspendisse ac mi. Nunc ac nibh malesuada
velit eleifend lobortis. Donec dictum dolor vel nisl. Sed mollis nibh sed odio.
Maecenas ac erat quis justo scelerisque laoreet. Sed faucibus elit at erat.
Curabitur rutrum pellentesque ante. Duis sem. Morbi sit amet mi vel arcu
tristique suscipit. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Phasellus est. Nullam lobortis pede id neque.
Curabitur sagittis dapibus purus. Phasellus vitae pede id felis viverra
vestibulum. Mauris ut sem. Proin quis justo. Aliquam erat volutpat. 
</td>
</tr>
</table>

</TD>
<TD background="images/index_18.jpg">
 </TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/index_19.jpg" WIDTH=13 HEIGHT=50 ALT=""></TD>
<TD COLSPAN=6>
<IMG SRC="images/index_20.jpg" WIDTH=723 HEIGHT=10 ALT=""></TD>

<TD ROWSPAN=2>
<IMG SRC="images/index_21.jpg" WIDTH=14 HEIGHT=50 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 height="40" background="images/index_22.jpg">
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="533">
Copyright © 2006

Programmer's Website - Tous droits réservés - Design : <A
href="dead_x@hotmail.fr" target=_blank>dead_x</A> </td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>

<TD>
<IMG SRC="images/spacer.gif" WIDTH=71 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=71 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=1 ALT=""></TD>
<TD>

<IMG SRC="images/spacer.gif" WIDTH=288 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Voilà là je n'ai fait que copier/coller le code...
Comme vous avez pu le voir c'est pas la joie côté code (c'est le cas de le dire

)
Donc maintenant je vous montre le code que je voudrais obtenir et auquel je n'aurais que un fichier CSS a insérer pour avoir le design et le code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Programmer's Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="http://pws.ehia.org/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body id="top">

<div id="conteneur">
<div id="header"><img src="http://pws.ehia.org/images/logo.png" alt="" /></div>
<div id="topmenu">
<ul>

<li class="gauche"><a href="http://pws.ehia.org/index.php">Accueil</a></li>
<li class="gauche"><a href="#">Livre d'or</a></li>
<li class="gauche"><a href="http://pws.ehia.org/forum/">Forum</a></li>
<li class="gauche"><a href="#">Contact</a></li>

<li class="droite">
<a href="http://pws.ehia.org/espace_membre/connexion.php">Connexion</a></li>
<li class="droite"><a href="#">Messages</a></li>
</ul>
</div>
<div id="menu">

<h6>Les cours</h6>
<div class="element_menu">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<h6>Espace membre</h6>
<div class="element_menu">
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<h6>Publicité</h6>
<div class="element_menu">
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</div> </div>

<div id="contenu">

</div>
<div id="footer">

</div>
</div>

</body>
</html>

Voilà si vous avez des idées éclairez moi!
Merci

Juju33_78

Julien78480

10 février 2006 à 15:48:08

Marian

10 février 2006 à 16:08:36

Je te conseille de lire le tutoriaux de Matéo sur site web -> Créeons le design de votre site we

Pour les menus c'est super bien expliquer

10 février 2006 à 16:11:58

Ok... On voit que certains réfléchissent beaucoup avant de répondre...

Moi ce que je vous demande ici c'est de voir comment faire pour transformer le code (ou plutot le rendu) du design pour faire un site extensible avec le deuzième code.
A la limite le design extensible je peux le faire vu que j'avais déjà un design mais tout pourri car je suis nul...

Donc voilà cette fois j'espère recevoir une réponse qui me fera avancer!

PS: J'ai déjà lu tous les cours de matéo un bon nombre de fois...

jp949

11 février 2006 à 4:31:34

faudrait qu'on sache a quoi correspondent les class que tu as defini class="gauche" c'est quoi menu horizontal, vertical ?

19 février 2006 à 16:08:02

A oui pardon... >_<

Alors en fait vous avez le header, après il y a un menu horizontal où ça fait un peu comme sur le SdZ avec quelques liens à gauche et quelques liens à droite (d'où les class).
Ensuite un menu à gauche divisé en plusieurs "zones" par exemple (pour ceux qui voient pas) sur le SdZ: "Les tutoriaux" contient "les cours", "vos tutos", "articles", etc... Donc comme ça avec plusieurs zones.
Après, un corps qui contient le contenu du site (oui c'est fait pour ça

) et pour finir, un footer qui vient se placer sous le corps!
Wala wala!

Si vous avez d'autres questions dites le!

Et merci d'avance pour votre aide!

Crown

19 février 2006 à 19:26:22

Je te conseille de recoder complètement ton site cher ami car la le code est d'une rare immondice, rempli de tableaux berk ca me fait vomir :).

joe.tgg

19 février 2006 à 20:22:23

Déjà 2 réponses inutiles. Je crois qu'il va prendre la peine de le recoder et c'est bien pour ça qu'il demande de l'aide.
Le rendre extensible me parait quelque peu difficile vu que pensé fixe. Le header perdrait en cohérence, il faudrait le rendre étirable par quelques illusions sur les côtés. Après je ne vois pas trop comment.
Bon courage en tout cas.

dead_x

20 février 2006 à 14:33:46

je n'aime pas le css

20 février 2006 à 15:10:24

Ca on a vu,

bracor

20 février 2006 à 15:25:05

je sais ça a pas de rapport mais sur ton site on peut lire page éxecutée en 1140445988.602 secondes, c'est peut être un poussé non?

20 février 2006 à 17:22:34

Désolé mais dead_x a changé le code de la page que j'ai donné! Ce qui n'affiche plus le résultat du premier code mais ca affiche le site de dead_x...
Je crois que je vais pas m'en sortir...

Anonyme

20 février 2006 à 19:30:14

Au fait, ça à aucun rapport ce que je vais te dire, mais l'ombre à gauche et à droite de la banniere et du footer est plus claire que le reste !

Kalenz

20 février 2006 à 19:42:09

Oulah cela me rappelle ce que je faisais il y a trois ans, des tableaux !

De plus celui qui t'a fait ca ne s'est pas trop mouillé les mains à vrai dire ! C'est Namo Web Editor qui lui a fait ! D'ailleurs c'est pour ça que c'est en tableau !

20 février 2006 à 20:31:22

Bon, vu la mise en page, ça ne devrait pas être impossible de le passer en CSS et en extensible.
Par contre, c'est quoi ces trucs animés. A balancer de suite.

Mise en page :

header : 2 div, une flottant à gauche et l'autre ben à coté qui prend toute la longueur et poursuit le motif
menu horizontal : une liste ne "inline" avec hover sur les liens
menu vertical : une div principal contenant des sous-div en flottant à droite
bloc principal : ben une div qui prend le reste de ce qu'il faut (quel jolie Lapalissade!!!!)

Voilà...

21 février 2006 à 13:24:27

je vous dit que j'aime pas le css je sais l'utiliser mais je n'aime pas

21 février 2006 à 13:42:35

Oh un designeur

Et un de plus qui se fait avoir pas img ready, éffectivement il faut repassé par la case css, c'est vital, surtout que le site graphiquement est sympa

Css et CS powwa (adobe CS pas le jeux : / )

Aide pour le design d'un site

Aide pour le design d'un site

Supprimer

Modérer

Signaler le message aux modérateurs