Bonjour !
(Vu que tout ça m'a pris du temps, je fais une pause et completerai plus tard.)
APPARENCE ET DESIGN
Première impression : site agréable d'entrée de jeu. Ça m'a évoqué une contribution à
ZenGarden. C'est bien sympa je trouve.
(Au passage : dans le bloc de texte "quel est le recrutement actuel de cette formation ?", il manque un espace avant un signe de ponctuation - "justifié:".)
____________________________________
Le titre "Objectif de la formation" : quand on le survol, dans le meilleur des cas, le passage en gras le fait passer à la ligne, ce qui décale le contenu. C'est inesthétique. Au pire, si on survol le dernier mot, il est pris de violents soubresauts forts déplaisants.
(Placer une graisse quelconque sur un lien au survol, quand il en est dépourvu à l'état par défaut, est à éviter : cela fait bouger les titres, décale les contenus le temps du survol et ce n'est pas toujours très élégant - visuellement parlant.)
____________________________________
Il faudrait indiquer les liens externes au site : exemple, le titre "lieux de formation". Les faire suivre d'un texte ou d'une image précisant que c'est un contenu pointant hors du site, et ou les différencier par un comportement et une apparence différentes des autres liens/menus.
(Ceci pour permettre au visiteur de décider de rentrer directement dessus, d'y aller plus tard, d'ouvrir le lien dans une nouvelle fenêtre un autre onglet, etc.)
____________________________________
Les liens "haut de page" : ils me semblent un peu trop près du texte. Peut-être qu'un légère marge au dessus serait utile.
____________________________________
Les titres de contenu : je les trouve bien. Cependant, le premier bénéficie d'une zone d'espace blanc coté gauche qui n'est pas reproduite à droite (titre : "Christian François, pourquoi cette formation ?"). Est-ce intentionnel ?
____________________________________
EEIGM : le soulignement (
dotted) passe presque inaperçu, car trop proche de la ligne inférieur de la zone menu (ligne noire). Il lui faudrait une autre couleur pour le mettre en valeur (comme le orange qu'on trouve ailleurs).
____________________________________
Les textes : je n'aime pas le fait de devoir survoler un texte pour passer sa couleur en noire et le rendre ainsi plus lisible.
Le très léger alinéa sur le premier paragraphe est trop discret : autant l'agrandir un peu, ou le mettre en valeur en utilisant une lettrine (pourquoi pas orange ?).
BALISAGE & CSS
Pourquoi avoir opté pour un DOCTYPE "transitional" ? La version "strict" serait bien je pense.
____________________________________
Commentaires de code : je lis "<!--Site Valide en Xhtml 1.0 et CSS2-->", alors je vais tester la page, et là j'ai : "This page is not Valid XHTML 1.0 Transitional!"
Il y a 8 erreurs. La première : elle provient du fait que tu as placé une liste (élément de type block) entre deux balises span (élément de type en ligne).
(Je regarderai les suivantes après peut-être.)
____________________________________
Les balises BR : ce n'est pas une bonne chose de les détourner à seule fin de présentation. Titre "Comment est-elle organisée ?", tu t'en sers pour simuler une liste à puce.
Autre chose :
<a href="#">Retour haut de page</a>[#red]<br/><p/>[/#]
<p id="foot"><a href="http://www.idverre.net/form/universitaires.php">Retour sur le site ID verre</a></p>
Le passage en rouge n'est pas bon. Une solution serait de mettre tous les liens de retour en haut de la page entre des balises <p> et </p>. On aurait donc :
[#orange]<p>[/#]bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla[#orange]</p>[/#]
[#orange]<p>[/#]<a href="#">Retour haut de page</a>[#orange]</p>[/#]
____________________________________
Le menu : Le balisage et la partie CSS sont très lourds. Chaque liste à un ID juste pour déterminé sa position par rapport au sommet : ça tient plus du bidouillage que d'une solution propre.
Ça peut-être obtenu en regroupant toutes les listes du menu au sein d'un conteneur unique (un bloc div). Ainsi, elles se placeront les unes sous les autres, tout naturellement. Voici le type de bloc div :
#menuGauche {[#orange]
position: absolute;
left: 0;
top: xxxxpx;[/#]
width:170px; /* 170 px pour avoir les 10 px de marge à gauche des liste */
height: auto;
}
Ce qui est en orange indique ce qui serait inutile si le code du menu était placé sous les instructions de l'entête du site (bannière, etc.) dans le balisage. Ainsi, il prendrait sa place dans le flux du document tout seul.
Nous avons maintenant le code du conteneur pour le menu, il reste à faire les listes :
#menuGauche ul {
list-style-type: none;
width: 160px;
margin-bottom: 30px;[#orange]/*marge bas à 30 px pour espacer les différents menus */[/#]
padding-left: 10px;
}
#menuGauche li { [#orange]/* va déterminer l'apparence des titres de menu */[/#]
font-size: 0.9em;
color: #000;
background-color: transparent;
border-bottom: 1px solid #000;
}
#menuGauche li a { [#orange]/* détermine les liens du menu par défaut */[/#]
text-decoration: none;
font-size: 0.8em;
color:#fff;
background-color: transparent;
}
#menuGauche li a:hover { [#orange]/* détermine les liens du menu au survol */[/#]
font-weight: bold;[#orange] /*j'aime toujours pas, mais bon...*/[/#]
}
#menuGauche li.sm {[#orange] /* détermine le sous-menu */[/#]
font-size: 0.8em;
color:#000;
background-color: transparent;
border-style: none;
}
#menuGauche li.liens { [#orange]/* juste pour avoir une bordure sur les liens du sous-menu */[/#]
border-bottom: 1px solid #000;
}
#menuGauche li.liens a { [#orange]/* détermine les liens du sous-menu par défaut */[/#]
text-decoration: none;
font-size: 0.8em;
color:#fe8d2e;
background-color: transparent;
}
#menuGauche li.liens a:hover { [#orange]/* détermine les liens du sous-menu au survol*/[/#]
font-weight: bold;
}
Qu'apportent ces codes (div#menuGauche et CSS) ?
Il permettent d'alléger le balisage HTML, et donc le poids de la page (avec un feuille de style externe) :
<div id="menuGauche">
<ul>
<li>Le Master</li>
<li><a href="#q1">Pourquoi un Master ?</a></li>
<li><a href="#q2">Les objectifs ?</a></li>
<li><a href="#q3">Son organisation ?</a></li>
<li><a href="#q4">Le recrutement ?</a></li>
<li><a href="#q5">L'avenir du Master ?</a></li>
</ul>
<ul>
<li>Contenu</li>
<li><a href="but.html">Objectifs de la formation</a></li>
<li><a href="modverre.html"> Les Modules Verre</a></li>
<li><a href="http://www.inpl-nancy.fr/francais/formation/f_mast/master-design-global/master-vda/pres.php" target="blank">Contenu de la spécialité</a></li>
</ul>
<ul>
<li>Lieux de formations</li>
<li><a href="http://www.eeigm.inpl-nancy.fr/main.htm" target="blank">Ecole d'architecture</a></li>
<li><a href="http://www.eeigm.inpl-nancy.fr/main.htm" target="blank">EEIGM</a></li>
</ul>
<ul>
<li>En savoir plus...</li>
<li class="liens"><a href="debouche.html">Les débouchés</a></li>
<li class="sm">Dossier de candidature</li>
<li class="liens"><a href="http://www.inpl-nancy.fr/francais/formation/documents/masters/diplomefrancais.pdf">-Francais (PDF)</a></li>
<li class="liens"><a href="http://www.inpl-nancy.fr/francais/formation/documents/masters/diplometranger.pdf">-Etranger (PDF)</a></li>
<li class="sm">Langues</li>
<li class="liens"><a href="index_e.html">English Version</a></li>
<li class="liens"><a href="index.html">Version Francaise</a></li>
</ul>
</div>
EXPLICATIONS :
La liste et ses éléments sont déterminés par leur appartenance au bloc div #menuGauche. Ainsi, plus besoin de préciser des ID et des classes dans le balisage.
Comme les sous-menu du bas ont une apparence autre, je leur ai fait deux classes spécifiques (une seule aurait pu suffir sans la bordure noire communes aux menus : pour la supprimer sous le titre de sous menu, mais la remettre sur les liens sous-menu, j'ai du recourir à deux classes).
Voici un exemple un ligne :
http://univers-fusco.com/tests/truc.php
J'ai conservé le comportement au survol, mais je désaprouve.
(Le fichier CSS est lié au code HTML ici.)
Modifié par 
(21 Apr 2006 - 19:14)
){kind=link}