Hoi Tieske85,
Tja, de beste stuurlui staan altijd aan de wal met van die vrolijke beweringen dat het allemaal heel anders moet. 
En makkelijker gezegd dan gedaan. Maar bewijzen of suggesties, ho maar!
Oké, daar gaan we. 
Dit javascript ...:
Javascript Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script> |
... is overbodig, en kan vervallen door er css-hovers van te maken (die o.a. meteen beschikbaar zijn, geen preload nodig hebben, en ook geen swap-functies om de gewone toestand weer terug te krijgen bij verlaten van de hover).
Dat is één!
=======
Dit oerwoud aan tabelcellen, images en spacers en onmouseover's en image-swap-restore's ...:
HTML Code:
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
| <table width="901" height="801" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="32">
<img src="../temp_site/images/Achtergrond_01.png" width="900" height="7" alt="Regent Achtergrond_01"></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td height="793" width="27" rowspan="13"><img src="../temp_site/images/Achtergrond_02.png" width="27" height="793" alt="Regent Achtergrond_02"></td>
<td colspan="30">
<img src="../temp_site/images/Logo.png" width="845" height="36" alt="Regent Logo"></td>
<td height="793" width="28" rowspan="13">
<img src="../temp_site/images/sitelayoutsub_04.png" width="28" height="793" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="../temp_site/images/Logo-06.png" width="4" height="49" alt="Regent Logo"></td>
<td colspan="14">
<img src="../temp_site/images/Naam.png" width="337" height="39" alt="Regent Naam"></td>
<td colspan="15" rowspan="2">
<img src="../temp_site/images/Logo-08.png" width="504" height="49" alt="Regent Logo"></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="../temp_site/images/Logo-09.png" width="337" height="10" alt="Regent Logo"></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="../temp_site/images/sitelayoutsub_09.png" width="7" height="122" alt=""></td>
<td colspan="2"><!-- TemplateBeginEditable name="home_btn" --><img src="../temp_site/images/Hoofdmenu/Home_btn.png" alt="Home_btn" width="58" height="45"><!-- TemplateEndEditable --></td>
<td colspan="4"><!-- TemplateBeginEditable name="wzw_btn" --><a href="Wiezijnwij.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wzw_btn','','../temp_site/images/Hoofdmenu/Wiezijnwij_02_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Wiezijnwij_btn.png" name="wzw_btn" width="108" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td>
<img src="../temp_site/images/sitelayoutsub_12.png" width="1" height="45" alt=""></td>
<td colspan="4"><!-- TemplateBeginEditable name="wdw_btn" --><a href="Watdoenwij.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wdw_btn','','../temp_site/images/Hoofdmenu/Watdoenwij_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Watdoenwij_btn.png" name="wdw_btn" width="120" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td colspan="4"><!-- TemplateBeginEditable name="tar_btn" --><a href="Tarieven.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tar_btn','','../temp_site/images/Hoofdmenu/Tarieven_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Tarieven_btn.png" name="tar_btn" width="88" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td>
<img src="../temp_site/images/sitelayoutsub_15.png" width="1" height="45" alt=""></td>
<td colspan="3"><!-- TemplateBeginEditable name="cont_btn" --><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_btn','','../temp_site/images/Hoofdmenu/Contact_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Contact_btn.png" name="contact_btn" width="83" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td>
<img src="../temp_site/images/sitelayoutsub_17.png" width="1" height="45" alt=""></td>
<td colspan="2"><!-- TemplateBeginEditable name="over_btn" --><a href="Overige.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('overige_btn','','../temp_site/images/Hoofdmenu/Overige_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Overige_btn.png" name="overige_btn" width="84" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td colspan="6">
<img src="../temp_site/images/sitelayoutsub_19.png" width="294" height="45" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="24">
<img src="../temp_site/images/Hoofdmenu/Bovenlijn3.png" width="587" height="1" alt="Regent Tekstvlak"></td>
<td colspan="4">
<img src="../temp_site/images/sitelayoutsub_21.png" width="251" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="../temp_site/images/Zijvlakje.png" width="26" height="76" alt="Regent Tekstvlak"></td>
<td colspan="4"><div id="submenu_01_btn"><!-- TemplateBeginEditable name="sub1_btn" --><img src="../temp_site/images/Submenu/Submenu1_00_btn.png" alt="subje1_btn" width="127" height="45"><!-- TemplateEndEditable --></div></td>
<td height="25" colspan="5" align="center" valign="middle"><div id="submenu_02_btn"><!-- TemplateBeginEditable name="sub2_btn" --><img src="../temp_site/images/Submenu/Submenu2_00_btn.png" alt="subje2_btn" width="120" height="45"><!-- TemplateEndEditable --></div></td>
<td colspan="7"><!-- TemplateBeginEditable name="sub3_btn" --><img src="../temp_site/images/Submenu/Submenu3_00_btn.png" alt="subje3_btn" width="120" height="45"><!-- TemplateEndEditable --></td>
<td colspan="4"><!-- TemplateBeginEditable name="sub4_btn" --><img src="../temp_site/images/Submenu/Submenu4_btn.png" width="120" height="45"><!-- TemplateEndEditable --></td>
<td colspan="5"><!-- TemplateBeginEditable name="sub5_btn" --><img src="../temp_site/images/Submenu/Submenu5_btn.png" width="120" height="45"><!-- TemplateEndEditable --></td>
<td><!-- TemplateBeginEditable name="sub6_btn" --><img src="../temp_site/images/Submenu/Submenu6_btn.png" width="119" height="45"><!-- TemplateEndEditable --></td>
<td height="662" width="86" rowspan="8"><p><img src="../temp_site/images/sitelayoutsub_29.png" width="86" height="662"></p> </td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="../temp_site/images/Tekstvlak-31.png" width="38" height="31" alt="Regent Tekstvlak"></td>
<td colspan="5" rowspan="2"><!-- TemplateBeginEditable name="sub7_btn" --><img src="../temp_site/images/Submenu/Submenu7_btn.png" width="128" height="31"><!-- TemplateEndEditable --></td>
<td colspan="4" rowspan="2"><!-- TemplateBeginEditable name="sub8_btn" --><img src="../temp_site/images/Submenu/Submenu8_btn.png" width="120" height="31"><!-- TemplateEndEditable --></td>
<td colspan="6" rowspan="2"><!-- TemplateBeginEditable name="sub9_btn" --><img src="../temp_site/images/Submenu/Submenu9_btn.png" width="120" height="31"><!-- TemplateEndEditable --></td>
<td colspan="5" rowspan="2"><!-- TemplateBeginEditable name="sub10_btn" --><img src="../temp_site/images/Submenu/Submenu10_btn.png" width="121" height="31"><!-- TemplateEndEditable --></td>
<td rowspan="2">
<img src="../temp_site/images/Tekstvlak-36.png" width="34" height="31" alt="Regent Tekstvlak"></td>
<td height="20" width="165" colspan="3">
<img src="../temp_site/images/sitelayoutsub_36.png" width="165" height="20" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td height="597" width="37" rowspan="6"><img src="../temp_site/images/sitelayoutsub_37.png" width="37" height="597" alt=""></td>
<td height="22" width="128" colspan="2" rowspan="2"><img src="../temp_site/images/Nieuws/nieuwshoofd.png" width="128" height="22" alt="Regent Nieuws"></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td height="519" width="594" colspan="26" rowspan="2"><!-- TemplateBeginEditable name="main_content_area" -->
<div id="site_layout_content">
<h2 align="center" class="style9 style10"> </h2>
</div>
<!-- TemplateEndEditable --></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td height="575" width="128" colspan="2" rowspan="4"><img src="../temp_site/images/Nieuws/nieuwstop_btn.png" alt="nieuwstop" width="128" height="6">
<div id="Nieuws_01_btn">
<div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span><br>
<span class="style6">Vacature manuele therapie</span></div>
</div>
<div class="style1" id="nieuws_02_btn">
<div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span><br>
<span class="style6">Impuls studio geopend</span></div>
</div>
<div class="style3" id="nieuws_03_btn">
<div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12<br>
</a><em>Nieuwe producten in de webshop</em><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3"><br>
</a></div>
</div>
<div class="style3" id="nieuws_04_btn">
<div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
</div>
<div class="style3" id="nieuws_05_btn">
<div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
</div>
<div class="style3" id="nieuws_06_btn">
<div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
</div>
<div class="style3" id="nieuws_07_btn">
<div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
</div>
<div class="style1" id="nieuws_08_btn">
<div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span></div>
</div>
<img src="../temp_site/images/Nieuws/nieuwsdown_btn.png" alt="nieuwsonder" width="128" height="89"></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="304" alt=""></td>
</tr>
<tr>
<th height="67" width="149" colspan="6" rowspan="3" nowrap><img src="../temp_site/images/sitelayoutsub_41.png" alt="" width="149" height="67"></th>
<td height="12" width="317" colspan="15"><img src="../temp_site/images/Logo_02.jpg" alt="Regent Logo_02" width="317" height="12"></td>
<td height="67" width="128" colspan="5" rowspan="3"><img src="../temp_site/images/Index_52.png" alt="" width="128" height="67"></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="216" alt=""></td>
</tr>
<tr>
<td height="55" width="92" colspan="5" rowspan="2" align="center">
<img src="../temp_site/images/sitelayoutsub_44.png" width="92" height="55" alt=""></td>
<td height="9" width="124" colspan="5" align="center">
<img src="../temp_site/images/Copyright1.png" width="124" height="9" alt="Regent Copyright"></td>
<td height="55" width="101" colspan="5" rowspan="2" align="center">
<img src="../temp_site/images/sitelayoutsub_46.png" width="101" height="55" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td height="46" width="124" colspan="5" align="center">
<img src="../temp_site/images/sitelayoutsub_47.png" width="124" height="46" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td>
<img src="../temp_site/images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="32" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="53" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="31" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="119" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="86" height="1" alt=""></td>
<td>
<img src="../temp_site/images/spacer.gif" width="28" height="1" alt=""></td>
<td></td>
</tr>
</table> |
... van 252 regels (!) kan allemaal vervangen worden door alleen maar deze regeltjes:
HTML Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div id="header">
<h1><span>Impuls Fysiotherapie</span></h1>
<ul>
<li id="hme"><a href="index.html"><span>Home</span></a></li>
<li id="wie"><a href="wie.htm"><span>Wie wij zijn</span></a></li>
<li id="wat"><a href="wat.htm"><span>Wat wij doen</span></a></li>
<li id="tar"><a href="tarieven.htm"><span>Tarieven</span></a></li>
<li id="ctc"><a href="contact.html"><span>Contact</span></a></li>
<li id="ovr"><a href="overigen.html"><span>Overigen</span></a></li>
</ul>
</div>
<div id="content">
...
</div>
<div id="rechterkolom">
...
</div>
<div id="voetstuk"><!-- ! --></div> |
Dat is twee!
=======
De drie stylesheets site_layout.css, site_layout_content.css en nieuws_01_btn.css plus het ingesloten styleblok in de <head> kunnen door één stylesheet vervangen worden, dat voor alle pagina's bruikbaar is.
- Bv. dit: imp-styles.css van nog geen 2kB
(de verdere opmaak voor de content en de rechterkolom kan hieraan toegevoegd worden)
Dat is drie!
=======
De 50 opgesplitste images kunnen vervangen worden door 3 stuks die juist een aantal dingen combineren:
- Een imp-content-bg.png,
dat is een strookje dat verticaal herhaald wordt zodat de opmaak niet kapot gaat als er een langere pagina is. - Een imp-sprite.png,
dat is de kop met logo en de menu-tabjes, inclusief al hun hover-varianten, plus de bovenkant van de rechterkolom. Met de eigenschap background-position wordt hier telkens een gedeelte van gebruikt. - Een imp-voetstuk-bg.png,
waar de onderhoekjes in zitten plus het watermerk en de onderkant van de rechterkolom.
Het herhaalstrookje zit onderop, en wordt zo hoog als de pagina nodig heeft. De kop en het voetstuk worden er gewoon overheen geplakt. Klaar!
Dat is vier, vijf en zes!
=======
Meer is er niet nodig!
Want hiermee is ook het modelletje klaar:
- Test: imp-nw1.htm
- Er zitten nog 3 pagina's achter, waarmee je kan zien dat met exact dezelfde html-structuur en hetzelfde stylesheet alles goed gaat bij korte en lange pagina's, en bij veel of weinig tekst in de inhoud en/of rechterkolom. Alles gaat vanzelf!
- Ook gaat vanzelf, dat elke pagina die openstaat, meteen zijn eigen tabblad in het wit laat zien. Dat gebeurt door de <body>-tag een per pagina verschillende class te geven, en dan regelt het zich allemaal vanzelf.
Dus: de tabellen het raam uit, en CSS voor de opmaak = mooie schone en simpele html, en krachtig werkende pagina's.
Voorjaarsschoonmaak!
Is dit genoeg wettig en overtuigend bewijs? 
Met vriendelijke groet,
CSShunter