Nettoyage du code

Monky · 22 Novembre 2006

Bonsoir,
Je ne suis pas très fortiche en design mais je souhaiterais le réaliser moi même... J'utilise dreamweaver et remarque que mon code a l'air absolument affreux!!
Ce serait génial si quelqu'un pourrait m'aider à corriger cette page "modèle" tout en donnant quelques tuyaux afin de palier aux encarts de dreamweaver!
Merci !

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/phpl; charset=iso-8859-1">
<LINK href="monsite.net/css/page.css" type=text/css rel=stylesheet>
<LINK href="monsite.net/css/menu.css" rel=stylesheet type="text/css">
<script language="Javascript" type="text/javascript" src="monsite.net/scripts/menu.js"></script> 
<SCRIPT LANGUAGE=JavaScript>

function ejs_img_fx(img){	
	if(img && img.filters && img.filters[0]){
		img.filters[0].apply();
		img.filters[0].play();
	}
}
</SCRIPT>
</head>

<body >
<center>

  <table width="994" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr> 
      <td height="201" colspan="3" valign="top"> 
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr> 
            <td width="994" height="201" valign="top"><img src="monsite.net/design/topbanner.jpg" width="994" height="201"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr> 
      <td width="202" valign="top" height="696"> 
        <table width="100%" style="BACKGROUND-REPEAT: no-repeat" background="monsite.net/design/leftmenu.jpg" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr> 
            <td width="198" height="160" valign="top">&nbsp;</td>
          </tr>
          <tr> 
            <td valign="middle" height="1" align="center"> 
              <div align="center"><IMG height=1 
                  src="monsite.net/design/news-spacer.jpg" 
                  width=198></div>
            </td>
          </tr>
          <tr> 
            <td height="18" valign="top"> 
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="200" height="18" valign="top" align="center"> 
                    <div class="colonneGauche"> 
                      <?php 
  include('../scripts/menu.php');  // Nous appelons l'entete du site
?>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr> 
            <td height="192" valign="top"> 
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="200" height="82" valign="top"> 
                    <div align="center"><IMG height=1 
                  src="monsite.net/design/news-spacer.jpg" 
                  width=198></div>
                    <div align="center"><br>
                      <script type="text/javascript"><!--
google_ad_client = "pub-32284";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "B29E78";
google_color_bg = "000000";
google_color_link = "B29E78";
google_color_url = "D7CCB9.phpl";
google_color_text = "B29E78";
//--></script>
                      <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td height="108"></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr> 
            <td height="323"></td>
          </tr>
        </table>
      </td>
      <td width="591" rowspan="2" valign="top"> 
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr> 
            <td colspan="3" height="19" valign="top">&nbsp;</td>
          </tr>
          <tr> 
            <td width="20" valign="top" rowspan="3">&nbsp;</td>
            <td width="550" height="74" valign="top"> 
              <table width="550" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr> 
                  <td colspan="3"><img src="monsite.net/design/news-top.jpg" width="400" height="1"></td>
                </tr>
                <tr> 
                  <td valign="top" align="left" width="1"><img src="monsite.net/design/news-left.jpg" width="1" height="39"></td>
                  <td width="548"> 
                    <h1>Titre &gt; Sous titre</h1>
                  </td>
                  <td valign="bottom" align="right" width="1"><img src="monsite.net/design/news-right.jpg" width="1" height="39"></td>
                </tr>
                <tr align="right" valign="top"> 
                  <td colspan="3"><img src="monsite.net/design/news-bottom.jpg" width="400" height="1"></td>
                </tr>
              </table>
            </td>
            <td width="21" rowspan="3" valign="top">&nbsp;</td>
          </tr>
          <tr> 
            <td height="35" valign="top">&nbsp;</td>
          </tr>
          <tr> 
            <td height="1110" valign="top"> 
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="550" height="1110"></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
      <td width="201" valign="top"> 
        <table width="100%" style="BACKGROUND-REPEAT: no-repeat" background="design/rigphpenu.jpg" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr> 
            <td width="197" height="152" valign="bottom" align="center"><img src="design/flag_en.jpg" width="31" height="18"></td>
          </tr>
          <tr> 
            <td height="12" valign="top">&nbsp;</td>
          </tr>
          <tr> 
            <td height="12" valign="top"> 
              <div align="center"><img src="design/news-spacer.jpg" width="195" height="1"></div>
            </td>
          </tr>
          <tr> 
            <td height="181" valign="top"> 
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="199" height="18" valign="middle" align="center"> 
                    <div class="colonneDroite"> 
                      <?php 
  include('scripts/1.php');  // Nous appelons l'entete du site
?>
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td width="199" height="18" valign="middle" align="center"> 
                    <div class="colonneDroite"> 
                      <?php 
  include('scripts/2.php');  // Nous appelons l'entete du site
?>
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td width="199" height="18" valign="middle" align="center"> 
                    <div class="colonneDroite"> 
                      <?php 
  include('scripts/3.php');  // Nous appelons l'entete du site
?>
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td height="163">
                    <h2>+ LIEN RETOUR PAGE MENU</h2>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr> 
            <td height="40"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr> 
      <td height="502"></td>
      <td></td>
    </tr>
  </table>
</center>

</body>
</html>

Autre petite question sur les balises <h>, est ce que H2 peut précéder H1?

medium69 · 22 Novembre 2006

Monky a dit:
Autre petite question sur les balises <h>, est ce que H2 peut précéder H1?

Pour être honnête, à cette heure-ci, j'ai la flemme de lire ton code.

Pour la question des hn, oui mais non :wink:

Oui car rien ne t'en empêche, et tu ne sera pas pénalisé pour autant.

Non car tu va gêné la navigation des aveugles entres autres qui se servent d'un navigateur vocal par exemple.

Et non car sémantiquement ce n'est pas correct

yazerty · 22 Novembre 2006

Arg, ça ressemble à une orgie de tableaux alors que ça doit pouvoir se faire en css simplement.
Si tu ne maitrises pas le css cherche des layout déjà pret à utiliser et/ou adapte

.

Monky · 24 Novembre 2006

J'ai mis ma journée de hier pour faire le modèle de ma page en CSS et je pense que je vais continuer ainsi... par contre je devrais tout de même laisser quelques tableaux, nottament pour les pages "gallery" comprenant beaucoup de minuatures.
Je recherche maintenant un menu en CSS vertical avec déroulement aussi vertical (genre un peu trre-menu), comme celui d' mais plus fluide et plus graphique http://tutorials.alsacreations.com/dero ... rtical.htm

Juste quelques petites questions au sujet des CSS :
- en quoi construire sont site avec les <div> apporte-t-il un avantage pour le référencement?
- est ce que je dois nommer mes <div id="..."> avec des mot clés?

Xou · 24 Novembre 2006

il ne faut pas bannir les tableaux mais les utiliser uniquement lorsque c'est nécessaire.

Monky a dit:
- en quoi construire sont site avec les <div> apporte-t-il un avantage pour le référencement?

A l'heure actuelle cette notion reste assez subjective, mais à l'avenir il se pourrait bien que les sites se confortant aux derniers standards du web soient avantagés par les moteurs.
Aujourd'hui tout le monde essaye d'avoir un site valide mais bien peu se préoccupent réellement de la sémantique de leur page, qui, combinée à une mise en page en conteneurs (div) propose une page plus facilement compréhensible autant pour les hommes (les développeurs qui mettent le nez dedans) que les machines (les robots qui lisent les pages web).

Monky a dit:
- est ce que je dois nommer mes <div id="..."> avec des mot clés?

Cela ne rentre pas en compte dans le référencement de ton site et donc c'est à toi de définir une convention de nommage de tes éléments de page, uniquement pour en faciliter le développement et la maintenance.

Marina_Kha · 24 Novembre 2006

Monky a dit:
- en quoi construire sont site avec les <div> apporte-t-il un avantage pour le référencement?

Cela apporte surtout de la clarté dans l'exploitation ultérieure que tu feras de ton code, par exemple dans la maintenance des contenus ou si tu souhaites renforçer la présence de mots-clés à tel ou tel endroit de ta page.

L'avantage du CSS est de mettre à part tout ce qui concerne l'organisation des données dans la page. Quand tu veux modifier le contenu de celle-ci (et tu le feras peut-être plus d'une fois pour améliorer tes classements) tu n'as plus qu'à traiter une page HTML remplie de contenu (la chair de la page), le CSS étant l'exo-squelette. Là, ton squelette est dans ton code, sous forme de tableaux... Pas très pratiques

Leonick · 30 Novembre 2006

Monky a dit:
J'ai mis ma journée de hier pour faire le modèle de ma page en CSS et je pense que je vais continuer ainsi... par contre je devrais tout de même laisser quelques tableaux, nottament pour les pages "gallery" comprenant beaucoup de minuatures.

Ben non, justement c'est là où les CSS se justifient : par exemple 4 miniatures par ligne sur un 800x600, mais 6 sur un 1280 :wink:
C'est tout l'intérêt des CSS et de l'utilisation des DIV en place et lieu des table.
Sauf que j'ai des pages full table, car elles présentent des résultats, et là, ça justifie pleinement les <table>