| 164,7 → 164,7 |
|---|
| <li> Uložíme funkcí <i>Soubor/Uložit</i> </li> |
| </ul> |
| |
| <h2> Použití šablony stránky </h2> |
| <h2> Použití šablony </h2> |
| |
| <p> |
| Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy |
| 206,8 → 206,6 |
|---|
| 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>. |
| 222,10 → 220,6 |
|---|
| <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> |
| 233,7 → 227,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>. Toto dodatečné formátování by se mělo odstarnit. |
| typicky <i>b</i>. Veškeré formátování by se mělo odstarnit. |
| </p> |
| |
| <p> |
| 246,43 → 240,11 |
|---|
| <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> |
| 302,104 → 264,19 |
|---|
| 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> |
| 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řejmenovat adresář s obrázky. |
| |
| <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 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. |
| Obrázky s popiskami generují |
| </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 --> |