Bonjour,

J'ai créé un site pour mon école de danse.. http://ecolededansedanipier.com
J'ai commencé à apprendre avec dreamweaver le css.
Est-ce que vous pouvez me critiquer et voir ce que je peux faire pour améliorer le site.
Il y a des ajouts qui sont marqué à venir parce que j'ai rajouté cela cette semaine.
Le site est consacré à des personnes de notre petite régions. C'est un site qui peut être achalender 4 fois par années étant donnée que nous avons 4 compétitions et il y a de nouvelles photos qui se rajoute.

Merci !
Modifié par Hermann (23 Aug 2010 - 10:30)
Bonjour,

rap20 a écrit :
C'est un site qui peut être achalender 4 fois par années
Euh... Je ne vois pas le rapport entre le site et "être achalander" (achalander signifiant "Procurer des clients")...

Graphiquement, il y a des choses à revoir :
* Me menu est quasi illisible car trop petit.

* Il manque quelque chose pour faire en sorte que le site est l'air d'avoir une charte graphique.

* Le "Bienvenue" c'est du comic ? ça y ressemble fort...

* Il y a une problème de typo, en général il est conseillé d'éviter de placer (sauf présentation de travaux) plusieurs polices de la même famille (serif, sans-serif, cursive...) dans une même page. C'est le cas avec le comic et le verdana.

* Le bloc de droite, qui à seconde vue est un menu (il ne devrait pas y avoir d'hésitation à ce sujet...) a l'air placé là parce qu'il fallait le même quelque part et que ça tenait.

Pour le code, il y a également du travail :
* 17 erreurs de code avec un doctype transitional, c'est beaucoup.

* Il est préférable d'externaliser les syles CSS. Cela permet, notamment, leur mise en cache par le navigateur, ce qui représente pour ton serveur une amélioration des performance (il ne faut pas envoyer les ~150 lignes de CSS avec chaque pages) et un gain en bande passante ; et pour le visiteur une plus grande vitesse d'accès aux pages.

* Tu as une floppée de meta inutiles : keyword (plus utilisée par les moteurs de recherche) rebots (n'existe pas ; robots serait tout aussi inutile car elle possède ses valeurs par défaut), langague (n'existe pas, pour language la valeur "Quebec" n'existe pas, pour définir la langue d'une page, voir point suivant), distribution, author, copyright, geography, expires, revisit-after (le grand mythe du contrôle des robots...).

* Pour la langue du document, il faut la définir dans la balise html avec lang="fr" et avec la meta Content-Language (si ton serveur n'envoie pas l'info, ce qui est rarement le cas).

* Tu as des meta contradictoires, il faut faire un choix :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name htpp-equiv-Content-Type"  content-text/html; charset=utf-8* />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
La seconde est très mal orthographié.

* Il est possible de regrouper les propriétés CSS :
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #036;
border-right-color: #036;
border-bottom-color: #036;
border-left-color: #036;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
Donnera le même résultat que :
border-top: 1px solid #036;
padding: 0px;
margin: 15px 0 0 0;


* La map area n'est pas vraiment appropriée pour le menu...

* Tu renseigne mal les alt de tes images. L'attribut alt sert à afficher une texte alternatif si l'image ne peut être chargée (problème serveur, connexion lente ou chaotique...) ou vue (lecteur d'écran, navigateur text-only...). Le contenu du alt doit reprendre exactement le même contenu que l'image : dans le cas d'une image portant un texte (ex. : bouton_bienvenue) le alt serat généralement le même texte que celui de l'image (donc, dans notre exemple : "Bienvenue" tout seul, sans indication du "bouton" qui n'apporte rien).

* L'utilisation de tableau de présentation est à proscrire.

* L'utilisation de l'attribut target sur les liens est également à proscrire : sa valeur _parent n'apporte rien (s'il n'y a pas de frame), c'est le comportement naturel d'un lien ; et sa valeur _blank est le meilleurs moyen de faire fuir les visiteurs (qui n'aiment pas vraiment que l'on interfère avec le comportement naturel de leur navigateur).

En bref, apprendre le HTML et le CSS avec Dreamweaver, c'est un début. Si l'on veut vraiment faire les choses bien, il faut éviter d'utiliser des WYSIWYG.
Certains accents sont à encoder exemple :
a écrit :
École ou nouveautés

certaines pages semblent encore en construction.
Laurie-Anne a écrit :
* Il est possible de regrouper les propriétés CSS :
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #036;
border-right-color: #036;
border-bottom-color: #036;
border-left-color: #036;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
Donnera le même résultat que :
border-top: 1px solid #036;
padding: 0px;
margin: 15px 0 0 0;

Encore mieux :
border-top: 1px solid #036;
padding: 0;
margin: 15px 0 0;

En supprimant un zéro superflu dans margin et un px superflu dans padding. Smiley cligne