nettoyer code d'un site récupéré

**aqualum** · 30/06/2013, 12h49

Bonjour à tous,
Je ne suis pas développeur, mais une petite graphiste. J'avais appris a créer un site il y a 15 ans surtout avec Dreamweaver version 3, flash et très peu Fireworks. Connaissance HTML très basique. Je ne maîtrise pas du tout les feuilles de style CSS, pourtant bien utiles.
Je me reforme sur Dream CS5 avec l'excellente vidéo de mes amis wisibility.com
Le site est http://www.tarrago-mur-escalade.fr
J'ai dû récupérer ce site que j'avais heureusement aspiré, car le webmasteur a disparu et avait auparavant détruit le site. Je l'ai refait et traduit en français. Ce site était en PHP, après récup il est en HTML. J'ai procédé du fait de mon manque de compétence à des remplacements, par exemple des images, mises en place de nouvelles photos en raw, dont j'ai retouchées la plupart dans photoshop, des dupliqué de pages pour mettre à jour par exemple le portfolio etc.
J'aimerais voir si le code source de la page index ne comporte pas des redondances et pire des contradictions dans les balises.
Par exemple :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />et
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />Les 2 sont utiles ou si je peux supprimer la 2e ?
Je me suis inscrite chez google analytics, mais j'y comprends rien... J'ai mis le code google sur toutes mes pages.
J'ai 23 pages référencées dans google. Je tente d'améliorer mon positionnement qui pour l'instant est nul.
En général, j'ai un titre de page et une description pour chaque page.
Merci de vos conseils, et liens, éventuellement si vous pouviez m'indiquer ce que je peux supprimer du code de la page INDEX, merci infiniement !

**rodolphebrd** · 30/06/2013, 13h16

Bonjour,

vous pouvez supprimer <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> et ne conserver que le premier.

Le contenu de la meta description doit se limiter à 150 caractères.
La méta keywords ne sert à rien (dans la majeure partie des cas).

L'ordre hiérarchique des balises Hn (H1, H2, ....) n'est pas logique et nuira au référencement du site. Vous commencez par une balise H3 et les balises H1, H2 sont absentes.

Concernant le code Html de votre page, j'ai jeté un coup d'oeil rapidement et cela semble cohérent.

**aqualum** · 30/06/2013, 14h12

Merci Rodolphe,
Je vais suivre les conseils. J'ai réactualisé le site pour l'index.

Envoyé par rodolphebrd

L'ordre hiérarchique des balises Hn (H1, H2, ....) n'est pas logique et nuira au référencement du site. Vous commencez par une balise H3 et les balises H1, H2 sont absentes.

Euh balise H3, je vois qu'elle est située avant le head : ne devrait-elle pas être après le body ?
où faut-il la déplacer, par exemple beaucoup plus loin et après la dernière balise h2 que je trouve ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#wrapper #header #logo h3 a {
	color: #cc0000;
}
body, td, th {
	font-size: 0.74em;
	color: #7f7f7f;
}

Je n'ai trouvé aucune h1 et je ne sais pas les créer
j'ai trouvé h2, à 3 endroits
<h2>Béton projeté</h2>
j'ai trouvé aussi des h4 à plusieurs endroits

**Auteur** · 30/06/2013, 15h29

bonjour,

les balises Hn (h1, h2, h3, etc.) sont des balises entre lesquelles le texte est préformaté et sont utilisées pour les titres.
Voici un petit tutoriel sur ces balises :
http://cssglobe.developpez.com/tutor...iliser-titres/

J'avoue que la balise <script> juste après la balise <body> m'a fait tiquer, mais finalement laisse là où elle est.

J'ai repéré une faute d'orthographe :

Vidéo promotionnel de Boreal en Terres levantinas

Vidéo promotionnelle

J'ai également repéré un paragraphe (balise <p>) fermé, mais pas ouvert :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="article">
        <h4><a href="http://vimeo.com/26803468" target="_blank">Une bonne vidéo sur la motivation et le dépassement de soi </a><a href="http://vimeo.com/26803468" target="_blank">&raquo;</a>
          </p>
        </h4>
      </div>

il doit manquer un <p class="short"> si je prends exemple sur les autres paragraphes.

Autre point : dans la balise <meta name="keywords" inutile de répéter des expressions, cela ne va pas améliorer le référencement

[edit]
Pour ce qui est de l'attribut target="_blank" des balises <a> il n'est pas valide XHTML1.0 :
http://xhtml.developpez.com/faq/?page=liens#LIEN_target
[/edit]

**rodolphebrd** · 30/06/2013, 15h39

La première balise qui apparait dans votre code Html, pas avant le HEAD, mais entre <body> et </body> est celle-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<h3>
<a href="index.html"><img src="images/logo_tarragoSITE.png" alt="logo" width="157" height="70" class="logo"></a> 
<font color="#EE3333">Fabricant de murs d'escalade et de parcours d'aventure</font>
</h3>

note: la balise font color est à supprimer et peut aisément être remplacée par une ligne de code CSS.
avec le code CSS correspondant (à toutes les balises H3 du site):

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
h3 {
   font: normal 1.4em "Trebuchet MS", Helvetica, Arial;
   margin: 0 0 20px;
   font-weight: bold;
   color: #EBECEC;
   font-size: 1,4; /*attention de mettre des unités et un point entre les chiffres (corrigé plus loin)*/
}

et (celui-ci correspond spécifiquement à la balises H3 concernée sans la cibler puisque la déclaration CSS est liée à l'ancre -balise a-)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#wrapper #header #logo h3 a {
color: #cc0000;
}

POUR SIMPLIFIER VOTRE CODE (je n'avais pas regardé votre code CSS) ET PLACER COMME PREMIERE BALISE H1, voici ce que vous pouvez faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<h1>
<a href="index.html"><img src="images/logo_tarragoSITE.png" alt="logo" width="157" height="70" class="logo"></a> 
Fabricant de murs d'escalade et de parcours d'aventure
</h1>

A ajouter à votre feuille de style

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
h1 {
   font: normal 1.4em "Trebuchet MS", Helvetica, Arial;
   margin: 0 0 20px;
   font-weight: bold;
   color: #cc0000;
   font-size: 1.4em; /*attention de mettre des unités et un point entre les chiffres*/
}

Cette ligne de code ne sert à rien

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#wrapper #header #logo {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

**aqualum** · 30/06/2013, 18h06

OK J'ai lu pour les boutons et leMERCI : Tes explications sont vraiment super, car je comprends presque tout !
Je procède très prudemment, car c'est une autre personne qui a créé la feuille de style, et de plus je ne maîtrise pas les CSS...

J'ai réussi à supprimer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

wrapper etc

j'ai ajouté dans le fichier <estill.css> la balise H1, ça me fait 2 balises H1. Mais si je supprime celle qui existait ça modifie mon texte

Pour la question des couleurs, par exemple j'ai rajouté le logo qui est importé et rouge, code web CC0000 et la ligne <fabricant de mur d'escalade...> doit être avec le même rouge. Je ne sais pas où il faudrait modifier le rouge dans les CSS pour qu'il n'y ait qu'un seul rouge sans avoir à faire des petits rajouts pour chaque texte rouge. J'ai fait des tentatives un peu hasardeux en fesant rechercher la couleur #de0711 (je ne sais même pas à quoi ça correspond, et remplacer par #cc0000.
Donc peut-être serait-il plus simple de faire une nouvelle règles juste pour le logo et la ligne en dessous, je ne sais pas faire de nouvelles règles CSS (sans mettre le bazar). Mais le problème reste de retrouver tous les rouges du site et de les mettre tous en CC0000. j'ai l'impression qu'il y a des abréviation de code couleur...

J'ai bien bidouillé pour tenter de faire les corrections, très bien indiquée.

Il doit rester encore pas mal de bêtises...

Merci de me dire si cela te paraît correct.

**rodolphebrd** · 30/06/2013, 18h46

- Sous dreamweaver avec la fonction rechercher/remplacer vous pouvez tracker n'importe quelle chaine de caractères.
- Avec l'extension ColorZilla pour Firefox qui permet via une pipette de récupérer la couleur d'un élément de la page.
- il y a http://www.colorschemer.com/online.html pour reconnaitre la couleur correspondant à #DE0711 mais cette couleur n'est plus présente dans votre feuille de style.

**rodolphebrd** · 30/06/2013, 19h10

Organiser une feuille de style n'est pas trop compliqué et cela facilite l'ajout de nouvelles propriétés.
Vous pouvez créer des titres avec des commentaires conditionnels:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
/*------HEADER------*/
#wrapper #header #logo {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
/*------CONTENT------*/
.content {
background: url(../images/content2.gif) repeat;
padding: 20px;
}
#menu {
height: 44px;
padding: 5px 0 0 4px;
}
 
.....

Note: cette déclaration est en double et ne cible rien...:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#wrapper #header #logo h3 a .article {
	color: #F00;
}

Une petite lecture des ressources du site pour les bases : http://css.developpez.com/tutoriels/premiers-pas/

**aqualum** · 30/06/2013, 19h39

Merci bien.
OK pour la couleur.
J'ai pu supprimer, était même en triple, dans <estils.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#wrapper #header #logo h3 a .article {
	color: #F00;
}

je comprends bien que les CSS sont les plus pratiques, j'en fais toujours dans InDesign, mais ici la difficulté c'est que la feuille de style <estils.css> existe déjà. Donc soit il faut la modifier, c'est pas évident, soit il faut tenter de rajouter les petites modif de style à l'intérieur de la même feuille.

Les conditions que vous m'indiquez c'est un peu dur pour moi. Il doit bien y avoir un moyen de passer par les panneau CSS ou la boîte des propriétés, ainsi pour que le code s'écrive tout seul, car je ne maîtrise pas.

Pour un travail de fond, je vais revoir tous les liens que vous me donné et reprendre la formation DREAM CS5 sur laquelle je suis en ce moment.
Merci beaucoup.

**rodolphebrd** · 30/06/2013, 20h19

On s'est mal compris, quand je vous parle d'organiser votre feuille de style il s'agit de placer des titres entre ces repères /* */ de sorte qu'il s'agit de commentaires non pris en compte (on peut donc y mettre ce que l'on veut).

J'ai un peu de temps alors je vous ai fait ça rapidement, à vous de mieux l'organiser:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
@charset "UTF-8";
/* CSS Document */
/*
	template: Lawyer&Attorney
	author:   Luka Cvrk (www.solucija.com)
*/
 
/* ----------------------------- */
/* summary */
/* ----------------------------- */
/*
1- header
2- content
3- footer
*/
 
* {
	margin: 0;
	padding: 0;
}
body {
	font: .74em Tahoma, Verdana, Sans-Serif, Arial;
	background: url(../images/body3.gif) repeat;
	color: #EBECEC;
	font-family: Tahoma, Verdana, Sans-Serif, Arial;
}
h1 {
	font: normal 1.4em "Trebuchet MS", Helvetica, Arial;
	margin: 0 0 20px;
	font-weight: bold;
	color: #cc0000;
	font-size: 1.4em;
}
h2 {
	font: normal 1.8em "Trebuchet MS", Helvetica, Arial;
	color: #dfdfdf;
	margin: 0 0 15px;
}
h3 {
	font: normal 1.4em "Trebuchet MS", Helvetica, Arial;
	margin: 0 0 20px;
	font-weight: bold;
	color: #EBECEC;
	font-size: 1, 4;
}
h4 {
	font: normal 1.2em "Trebuchet MS", Helvetica, Arial;
	color: #dfdfdf;
	margin: 0 0 4px;
}
p {
	margin: 0 0 15px;
	line-height: 1.6em;
	color: #7f7f7f;
}
a {
	outline: 0;
	color: #09F;
	text-decoration: none;
}
li {
	list-style: none;
}
li a, img {
	display: block;
}
img {
	outline: 0;
	border: 0;
	color: #c;
}
.fitxa {
	display: inline;
	margin: 0 20px 20px 0;
}
#wrapper {
	width: 980px;
	margin: auto;
}
.clr {
	clear: both;
}
 
/* ----------------------------- */
/* 1==header */
/* ----------------------------- */
 
#logo {
	float: left;
	padding: 30px 15px;
}
#logo h1 a {
	color: #fff;
}
#logo h1 a span {
	color: #808080;
}
 
/* ----------------------------- */
/* 2==content */
/* ----------------------------- */
 
/*menu*/
#menu {
	height: 44px;
	padding: 5px 0 0 4px;
}
#menu li {
	float: left;
	font-size: 1.3em;
	text-transform: uppercase;
}
#menu li a {
	color: #888;
	margin: 0 50px 0 0;
}
#menu li a.current, #menu li a:hover {
	color: #fff;
}
/*pitch*/
#pitch {
	clear: both;
	background: url(../images/pitch.jpg) no-repeat;
	height: 228px;
	margin: 0 0 30px;
	padding: 60px 360px 0 30px;
}
#pitch h1 {
	font-size: 2.4em;
	color: #2d2d29;
	margin: 0 0 20px;
}
#pitch em {
	font-size: 1.3em;
	color: #2d2d29;
	font-weight: bold;
	line-height: 1.6em;
}
.content {
	background: url(../images/content2.gif) repeat;
	padding: 20px;
}
 
/*link*/
.link {
	color: #fff;
	padding: 5px 10px;
	font-size: .9em;
}
.link:hover {
	color: #cc0000;
}
#main {
	padding: 22px;
}
.col {
	float: left;
	width: 280px;
	margin: 0 30px 15px 0;
}
.col.last {
	float: right;
	margin-right: 0;
}
.case img {
	float: left;
	clear: left;
	margin: 0 20px 20px 0;
	padding: 3px;
}
.short {
	padding: 0 0 15px 0;
	background: url(../images/line.gif) repeat-x left bottom;
	color: #7f7f7f;
}
.case a, .article a {
	color: #ddd;
	font-weight: bold;
}
.article a:hover {
	outline: 0;
	color: #304D6F;
	text-decoration: none;
	color: #cc0000;
}
.case a:hover {
	outline: 0;
	text-decoration: none;
	color: #cc0000;
}
.date {
	font-size: .84em;
	margin: 0 0 3px;
}
.case {
	height: 160px;
}
.colcontacto {
	float: left;
	width: 292px;
	margin: 0 30px 15px 0;
}
.colcontacto.last {
	float: right;
	margin-right: 0;
	width: 598px;
}
 
/* ----------------------------- */
/* 3==footer */
/* ----------------------------- */
 
#footer {
	clear: both;
	background: url(../images/line.gif) repeat-x;
	padding: 20px 20px 10px;
	font-size: .9em;
}
#footer a {
	color: #ccc;
	margin: 0 10px 0 0;
	border-bottom: 1px dotted #444;
	padding: 0 0 1px;
}
#links {
	float: right;
}
#links a {
	margin: 0 0 0 10px;
}
#footer p {
	margin: 0 0 8px;
}
.campstexte {
	color: #333333;
	text-decoration: none;
	background-color: #fff;
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	height: 20px;
	margin-left: 10px;
	margin-right: 10px;
}
.campstextearea {
	font-size: 1.6em;
	color: #333333;
	text-decoration: none;
	background-color: #fff;
	border-width: 0px;
	padding: 5px;
	height: 150px
}
.botonformulari {
	color: #ffffff;
	text-decoration: none;
	background-color: #cc0000;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	height: 20px;
	margin-right: 20px;
}

Dans l'exemple : 1==header le double égal == est une valeur qui n'existe pas en CSS. Donc pour naviguer de chapitre en chapitre il vous suffit d'utiliser la fonction rechercher (ctrl + F ou Cmd + F) puis d'entrer "==" puis de faire des sauts avec ENTREE.
C'est particulièrement intéressant quand vous avez une dizaine de rubrique et plusieurs centaines de lignes de code (ça monte très vite!) pour assurer une maintenance confortable de votre site.

A noter que :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
        padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;

vaut padding: 3px;pour des commodités d'écriture et d'allégement de code.

**aqualum** · 30/06/2013, 21h12

OUOUOUH de plus en plus fort.
C'est très sympa à vous, merci beaucoup.
Je m'y remets demain, car depuis 48h je n'arrête pas.
En tout premier lieu, il me faudra voir les liens indiqués pour les bases de connaissance.
Je vous tiens au courant.

nettoyer code d'un site récupéré

HTML

Discussions similaires

Partager

Partager