164,7 → 164,7 |
<li> Uložíme funkcí <i>Soubor/Uložit</i> </li> |
</ul> |
|
<h2> Použití šablony </h2> |
<h2> Použití šablony stránky </h2> |
|
<p> |
Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy |
206,6 → 206,8 |
samostatně na řádce. |
</p> |
|
<samp class="Block"><h1> Nadpis </h1></samp> |
|
<p> |
Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do |
samostatného odstavce <i>p</i>. |
220,6 → 222,10 |
<i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená. |
</p> |
|
<samp class="Block"><p> |
Běžný text odstavce se <i><i>zvýrazněným textem</i></i> uvnitř. |
</p></samp> |
|
<h3> Vyčištění tabulek <i>table</i> </h3> |
|
<p> |
227,7 → 233,7 |
buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo |
buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své |
značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou, |
typicky <i>b</i>. Veškeré formátování by se mělo odstarnit. |
typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit. |
</p> |
|
<p> |
240,11 → 246,43 |
<li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li> |
</ul> |
|
<samp class="Block"><table> |
<tr> |
<th> <i>Popisek 1</i> </th> |
<th> <i>Popisek 2</i> </th> |
</tr> |
<tr> |
<td> Buňka 1 </td> |
<td> Buňka 2 </td> |
</tr> |
<tr> |
<td colspan="2"> Spojená buňka 3 a 4 </td> |
</tr> |
</table></samp> |
<table class="Samp"> |
<tr> |
<th> Popisek 1 </th> |
<th> Popisek 2 </th> |
</tr> |
<tr> |
<td> Buňka 1 </td> |
<td> Buňka 2 </td> |
</tr> |
<tr> |
<td colspan="2"> Spojená buňka 3 a 4 </td> |
</tr> |
</table> |
|
<p> |
Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není |
potřeba značka <i>p</i>. |
</p> |
|
<p> |
Pro změnu chování se dají použít příslušné atributy <i>class</i>, |
například <i>class="Center"</i>. Viz návod k použití kaskádového stylu. |
</p> |
|
<h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3> |
|
<p> |
264,19 → 302,104 |
a <i>Hodnota</i> doplníme celou řádku s těmito popisy. |
</p> |
|
<samp class="Block"><table class="Soupiska"> |
<tr> |
<th> <i>Reference</i> </th> |
<th> <i>Hodnota</i> </th> |
</tr> |
<tr> |
<th colspan="2"> Odpory </th> |
</tr> |
<tr> |
<td> R1 </td> |
<td> 10k </td> |
</tr> |
</table></samp> |
<table class="Soupiska Samp"> |
<tr> |
<th> Reference </th> |
<th> Hodnota </th> |
</tr> |
<tr> |
<th colspan="2"> Odpory </th> |
</tr> |
<tr> |
<td> R1 </td> |
<td> 10k </td> |
</tr> |
</table> |
|
<h3> Oprava obrázků <i>img</i> </h3> |
|
<p> |
Přejmenovat adresář s obrázky. |
Nejprve přejemenujeme adresář s obrázky na jméno <i>Pictures</i>. |
Původní název je totožný se jménem stránky a bývá velmi dlouhý. |
</p> |
|
<p> |
Obrázek musí mít tyto atributy: |
</p> |
|
<ul> |
<li> <i>width</i> určuje šířku obrázku (v pixelech) </li> |
<li> <i>height</i> určuje výšku obrázku (v pixelech) </li> |
<li> <i>src</i> určuje cestu k obrázku </li> |
<li> <i>alt</i> určuje alternativní text k obrázku (povinné!) </li> |
</ul> |
|
<p> |
Například: |
</p> |
<samp class="Block"><img width=228 height=160 src="Pictures/image002.jpg" |
alt="Alternativní popis"></samp> |
|
<p> |
|
<h4> Obrázky s popiskami </h4> |
|
<p> |
Obrázky s popiskami generují |
Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázek |
a ten se opatří textovými poli s ukazateli. Výsledný HTML kód pak |
obsahuje obrázek a přes něj tabulku s přesně danými rozměry a v této |
tabulce jsou umístěny (jen v některých buňkách) dílčí obrázky. |
</p> |
|
<p> |
Princip položení vektorové grafiky přes JPG obrázek není v zásadě |
chybný ale nežádoucí je to, že jsou dílčí obrázky umístěny v tabulce. |
Řešení spočívá v tom, že se odstraní tabulka a ponechají se jen obrázky |
a do dokumentu (těsně před značku <i>/head</i>) se doplní styl pro |
individuální umístění jednotlivých dílčích vetorových obrázků. |
Souřadnice se sice dají spočítat ale je snazší doladit je dle |
zobrazeného výsledku. |
</p> |
|
<p> |
Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsou |
posunutí dílčích obrázků proti hlavnímu obrázku: |
</p> |
|
<samp class="Block"><style type="text/css"> |
img.<i>Pic1</i> {position:absolute;margin-left:<i>230px</i>;margin-top:<i>10px</i>; } |
img.<i>Pic2</i> {position:absolute;margin-left:<i>322px</i>;margin-top:<i>160px</i>; } |
</style></samp> |
|
<p> |
A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázky |
umístěnými nad ním: |
</p> |
|
<samp class="Block"><p> |
<!-- Vektorová grafika --> |
<img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif" |
alt="Vektorový popisek 1"> |
<img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif" |
alt="Vektorový popisek 2"> |
<!-- Podkladový obrázek --> |
<img width="605" height="454" src="Pictures/MainPicture.jpg" |
alt="Obrázek s popiskami"> |
</p></samp> |
|
</div> |
|
<!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE --> |