| Line 162... |
Line 162... |
| 162 |
<li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li> |
162 |
<li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li> |
| 163 |
<li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li> |
163 |
<li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li> |
| 164 |
<li> Uložíme funkcí <i>Soubor/Uložit</i> </li> |
164 |
<li> Uložíme funkcí <i>Soubor/Uložit</i> </li> |
| 165 |
</ul> |
165 |
</ul> |
| 166 |
|
166 |
|
| 167 |
<h2> Použití šablony </h2> |
167 |
<h2> Použití šablony stránky </h2> |
| 168 |
|
168 |
|
| 169 |
<p> |
169 |
<p> |
| 170 |
Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy |
170 |
Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy |
| 171 |
například soubor <i>Template.cs.html</i> a provedeme následující úpravy: |
171 |
například soubor <i>Template.cs.html</i> a provedeme následující úpravy: |
| 172 |
</p> |
172 |
</p> |
| Line 204... |
Line 204... |
| 204 |
<p> |
204 |
<p> |
| 205 |
Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou |
205 |
Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou |
| 206 |
samostatně na řádce. |
206 |
samostatně na řádce. |
| 207 |
</p> |
207 |
</p> |
| 208 |
|
208 |
|
| - |
|
209 |
<samp class="Block"><h1> Nadpis </h1></samp> |
| - |
|
210 |
|
| 209 |
<p> |
211 |
<p> |
| 210 |
Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do |
212 |
Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do |
| 211 |
samostatného odstavce <i>p</i>. |
213 |
samostatného odstavce <i>p</i>. |
| 212 |
</p> |
214 |
</p> |
| 213 |
|
215 |
|
| Line 218... |
Line 220... |
| 218 |
něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud |
220 |
něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud |
| 219 |
ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>, |
221 |
ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>, |
| 220 |
<i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená. |
222 |
<i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená. |
| 221 |
</p> |
223 |
</p> |
| 222 |
|
224 |
|
| - |
|
225 |
<samp class="Block"><p> |
| - |
|
226 |
Běžný text odstavce se <i><i>zvýrazněným textem</i></i> uvnitř. |
| - |
|
227 |
</p></samp> |
| - |
|
228 |
|
| 223 |
<h3> Vyčištění tabulek <i>table</i> </h3> |
229 |
<h3> Vyčištění tabulek <i>table</i> </h3> |
| 224 |
|
230 |
|
| 225 |
<p> |
231 |
<p> |
| 226 |
Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné |
232 |
Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné |
| 227 |
buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo |
233 |
buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo |
| 228 |
buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své |
234 |
buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své |
| 229 |
značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou, |
235 |
značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou, |
| 230 |
typicky <i>b</i>. Veškeré formátování by se mělo odstarnit. |
236 |
typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit. |
| 231 |
</p> |
237 |
</p> |
| 232 |
|
238 |
|
| 233 |
<p> |
239 |
<p> |
| 234 |
Tabulka by měla mít strukturu |
240 |
Tabulka by měla mít strukturu |
| 235 |
</p> |
241 |
</p> |
| Line 238... |
Line 244... |
| 238 |
<li> <i>table</i> tabulka </li> |
244 |
<li> <i>table</i> tabulka </li> |
| 239 |
<li> <i>tr</i> řádka tabulky </li> |
245 |
<li> <i>tr</i> řádka tabulky </li> |
| 240 |
<li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li> |
246 |
<li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li> |
| 241 |
</ul> |
247 |
</ul> |
| 242 |
|
248 |
|
| - |
|
249 |
<samp class="Block"><table> |
| - |
|
250 |
<tr> |
| - |
|
251 |
<th> <i>Popisek 1</i> </th> |
| - |
|
252 |
<th> <i>Popisek 2</i> </th> |
| - |
|
253 |
</tr> |
| - |
|
254 |
<tr> |
| - |
|
255 |
<td> Buňka 1 </td> |
| - |
|
256 |
<td> Buňka 2 </td> |
| - |
|
257 |
</tr> |
| - |
|
258 |
<tr> |
| - |
|
259 |
<td colspan="2"> Spojená buňka 3 a 4 </td> |
| - |
|
260 |
</tr> |
| - |
|
261 |
</table></samp> |
| - |
|
262 |
<table class="Samp"> |
| - |
|
263 |
<tr> |
| - |
|
264 |
<th> Popisek 1 </th> |
| - |
|
265 |
<th> Popisek 2 </th> |
| - |
|
266 |
</tr> |
| - |
|
267 |
<tr> |
| - |
|
268 |
<td> Buňka 1 </td> |
| - |
|
269 |
<td> Buňka 2 </td> |
| - |
|
270 |
</tr> |
| - |
|
271 |
<tr> |
| - |
|
272 |
<td colspan="2"> Spojená buňka 3 a 4 </td> |
| - |
|
273 |
</tr> |
| - |
|
274 |
</table> |
| - |
|
275 |
|
| 243 |
<p> |
276 |
<p> |
| 244 |
Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není |
277 |
Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není |
| 245 |
potřeba značka <i>p</i>. |
278 |
potřeba značka <i>p</i>. |
| 246 |
</p> |
279 |
</p> |
| 247 |
|
280 |
|
| - |
|
281 |
<p> |
| - |
|
282 |
Pro změnu chování se dají použít příslušné atributy <i>class</i>, |
| - |
|
283 |
například <i>class="Center"</i>. Viz návod k použití kaskádového stylu. |
| - |
|
284 |
</p> |
| - |
|
285 |
|
| 248 |
<h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3> |
286 |
<h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3> |
| 249 |
|
287 |
|
| 250 |
<p> |
288 |
<p> |
| 251 |
U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme |
289 |
U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme |
| 252 |
<i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku |
290 |
<i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku |
| Line 262... |
Line 300... |
| 262 |
<p> |
300 |
<p> |
| 263 |
Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i> |
301 |
Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i> |
| 264 |
a <i>Hodnota</i> doplníme celou řádku s těmito popisy. |
302 |
a <i>Hodnota</i> doplníme celou řádku s těmito popisy. |
| 265 |
</p> |
303 |
</p> |
| 266 |
|
304 |
|
| - |
|
305 |
<samp class="Block"><table class="Soupiska"> |
| - |
|
306 |
<tr> |
| - |
|
307 |
<th> <i>Reference</i> </th> |
| - |
|
308 |
<th> <i>Hodnota</i> </th> |
| - |
|
309 |
</tr> |
| - |
|
310 |
<tr> |
| - |
|
311 |
<th colspan="2"> Odpory </th> |
| - |
|
312 |
</tr> |
| - |
|
313 |
<tr> |
| - |
|
314 |
<td> R1 </td> |
| - |
|
315 |
<td> 10k </td> |
| - |
|
316 |
</tr> |
| - |
|
317 |
</table></samp> |
| - |
|
318 |
<table class="Soupiska Samp"> |
| - |
|
319 |
<tr> |
| - |
|
320 |
<th> Reference </th> |
| - |
|
321 |
<th> Hodnota </th> |
| - |
|
322 |
</tr> |
| - |
|
323 |
<tr> |
| - |
|
324 |
<th colspan="2"> Odpory </th> |
| - |
|
325 |
</tr> |
| - |
|
326 |
<tr> |
| - |
|
327 |
<td> R1 </td> |
| - |
|
328 |
<td> 10k </td> |
| - |
|
329 |
</tr> |
| - |
|
330 |
</table> |
| - |
|
331 |
|
| 267 |
<h3> Oprava obrázků <i>img</i> </h3> |
332 |
<h3> Oprava obrázků <i>img</i> </h3> |
| 268 |
|
333 |
|
| 269 |
<p> |
334 |
<p> |
| 270 |
Přejmenovat adresář s obrázky. |
335 |
Nejprve přejemenujeme adresář s obrázky na jméno <i>Pictures</i>. |
| - |
|
336 |
Původní název je totožný se jménem stránky a bývá velmi dlouhý. |
| - |
|
337 |
</p> |
| - |
|
338 |
|
| - |
|
339 |
<p> |
| - |
|
340 |
Obrázek musí mít tyto atributy: |
| - |
|
341 |
</p> |
| - |
|
342 |
|
| - |
|
343 |
<ul> |
| - |
|
344 |
<li> <i>width</i> určuje šířku obrázku (v pixelech) </li> |
| - |
|
345 |
<li> <i>height</i> určuje výšku obrázku (v pixelech) </li> |
| - |
|
346 |
<li> <i>src</i> určuje cestu k obrázku </li> |
| - |
|
347 |
<li> <i>alt</i> určuje alternativní text k obrázku (povinné!) </li> |
| - |
|
348 |
</ul> |
| 271 |
|
349 |
|
| - |
|
350 |
<p> |
| - |
|
351 |
Například: |
| 272 |
</p> |
352 |
</p> |
| - |
|
353 |
<samp class="Block"><img width=228 height=160 src="Pictures/image002.jpg" |
| - |
|
354 |
alt="Alternativní popis"></samp> |
| - |
|
355 |
|
| - |
|
356 |
<p> |
| 273 |
|
357 |
|
| 274 |
<h4> Obrázky s popiskami </h4> |
358 |
<h4> Obrázky s popiskami </h4> |
| 275 |
|
359 |
|
| 276 |
<p> |
360 |
<p> |
| - |
|
361 |
Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázek |
| - |
|
362 |
a ten se opatří textovými poli s ukazateli. Výsledný HTML kód pak |
| - |
|
363 |
obsahuje obrázek a přes něj tabulku s přesně danými rozměry a v této |
| - |
|
364 |
tabulce jsou umístěny (jen v některých buňkách) dílčí obrázky. |
| - |
|
365 |
</p> |
| - |
|
366 |
|
| - |
|
367 |
<p> |
| - |
|
368 |
Princip položení vektorové grafiky přes JPG obrázek není v zásadě |
| - |
|
369 |
chybný ale nežádoucí je to, že jsou dílčí obrázky umístěny v tabulce. |
| - |
|
370 |
Řešení spočívá v tom, že se odstraní tabulka a ponechají se jen obrázky |
| - |
|
371 |
a do dokumentu (těsně před značku <i>/head</i>) se doplní styl pro |
| - |
|
372 |
individuální umístění jednotlivých dílčích vetorových obrázků. |
| - |
|
373 |
Souřadnice se sice dají spočítat ale je snazší doladit je dle |
| 277 |
Obrázky s popiskami generují |
374 |
zobrazeného výsledku. |
| - |
|
375 |
</p> |
| - |
|
376 |
|
| - |
|
377 |
<p> |
| - |
|
378 |
Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsou |
| - |
|
379 |
posunutí dílčích obrázků proti hlavnímu obrázku: |
| 278 |
</p> |
380 |
</p> |
| 279 |
|
381 |
|
| - |
|
382 |
<samp class="Block"><style type="text/css"> |
| - |
|
383 |
img.<i>Pic1</i> {position:absolute;margin-left:<i>230px</i>;margin-top:<i>10px</i>; } |
| - |
|
384 |
img.<i>Pic2</i> {position:absolute;margin-left:<i>322px</i>;margin-top:<i>160px</i>; } |
| - |
|
385 |
</style></samp> |
| - |
|
386 |
|
| - |
|
387 |
<p> |
| - |
|
388 |
A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázky |
| - |
|
389 |
umístěnými nad ním: |
| - |
|
390 |
</p> |
| - |
|
391 |
|
| - |
|
392 |
<samp class="Block"><p> |
| - |
|
393 |
<!-- Vektorová grafika --> |
| - |
|
394 |
<img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif" |
| - |
|
395 |
alt="Vektorový popisek 1"> |
| - |
|
396 |
<img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif" |
| - |
|
397 |
alt="Vektorový popisek 2"> |
| - |
|
398 |
<!-- Podkladový obrázek --> |
| - |
|
399 |
<img width="605" height="454" src="Pictures/MainPicture.jpg" |
| - |
|
400 |
alt="Obrázek s popiskami"> |
| - |
|
401 |
</p></samp> |
| - |
|
402 |
|
| 280 |
</div> |
403 |
</div> |
| 281 |
|
404 |
|
| 282 |
<!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE --> |
405 |
<!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE --> |
| 283 |
<!-- ============== PATIČKA ============== --> |
406 |
<!-- ============== PATIČKA ============== --> |
| 284 |
<div class="Footer"> |
407 |
<div class="Footer"> |