Rev 305 Rev 308
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd"> 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> DOC 2 HTML </title> 5 <title> DOC 2 HTML </title>
6 <meta name="keywords" content="stavebnice MLAB převod Word DOC HTML"> 6 <meta name="keywords" content="stavebnice MLAB převod Word DOC HTML">
7 <meta name="description" content="Projekt MLAB, Převod Word dokumentu na HTML"> 7 <meta name="description" content="Projekt MLAB, Převod Word dokumentu na HTML">
8 <!-- AUTOINCLUDE START "Page/Head.cs.ihtml" DO NOT REMOVE --> 8 <!-- AUTOINCLUDE START "Page/Head.cs.ihtml" DO NOT REMOVE -->
9 <link rel="StyleSheet" href="../../Web/CSS/MLAB.css" type="text/css" title="MLAB základní styl"> 9 <link rel="StyleSheet" href="../../Web/CSS/MLAB.css" type="text/css" title="MLAB základní styl">
10 <link rel="shortcut icon" type="image/x-icon" href="../../Web/PIC/MLAB.ico"> 10 <link rel="shortcut icon" type="image/x-icon" href="../../Web/PIC/MLAB.ico">
11 <script type="text/javascript" src="../../Web/JS/MLAB_Menu.js"></script> 11 <script type="text/javascript" src="../../Web/JS/MLAB_Menu.js"></script>
12 <!-- AUTOINCLUDE END --> 12 <!-- AUTOINCLUDE END -->
13 </head> 13 </head>
14   14  
15 <body lang="cs"> 15 <body lang="cs">
16   16  
17 <!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE --> 17 <!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE -->
18 <!-- ============== HLAVICKA ============== --> 18 <!-- ============== HLAVICKA ============== -->
19 <div class="Header"> 19 <div class="Header">
20 <script type="text/javascript"> 20 <script type="text/javascript">
21 <!-- 21 <!--
22 SetRelativePath("../../"); 22 SetRelativePath("../../");
23 DrawHeader(); 23 DrawHeader();
24 // --> 24 // -->
25 </script> 25 </script>
26 <noscript> 26 <noscript>
27 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p> 27 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
28 </noscript> 28 </noscript>
29 </div> 29 </div>
30 <!-- AUTOINCLUDE END --> 30 <!-- AUTOINCLUDE END -->
31   31  
32 <!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE --> 32 <!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE -->
33 <!-- ============== MENU ============== --> 33 <!-- ============== MENU ============== -->
34 <div class="Menu"> 34 <div class="Menu">
35 <script type="text/javascript"> 35 <script type="text/javascript">
36 <!-- 36 <!--
37 SetRelativePath("../../"); 37 SetRelativePath("../../");
38 DrawMenu(); 38 DrawMenu();
39 // --> 39 // -->
40 </script> 40 </script>
41 <noscript> 41 <noscript>
42 <p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p> 42 <p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p>
43 </noscript> 43 </noscript>
44 </div> 44 </div>
45 <!-- AUTOINCLUDE END --> 45 <!-- AUTOINCLUDE END -->
46   46  
47 <!-- ============== TEXT ============== --> 47 <!-- ============== TEXT ============== -->
48 <div class="Text"> 48 <div class="Text">
49 <p class="Title"> 49 <p class="Title">
50 Převod DOC na HTML 50 Převod DOC na HTML
51 </p> 51 </p>
52 <p class=Autor> 52 <p class=Autor>
53 Milan Horkel 53 Milan Horkel
54 </p> 54 </p>
55 <p class="Subtitle"> 55 <p class="Subtitle">
56 Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protože 56 Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protože
57 kvalita podkladu obvykle není dostatečná. Proces převodu lze však celkem 57 kvalita podkladu obvykle není dostatečná. Proces převodu lze však celkem
58 úspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce. 58 úspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce.
59 Podstatou převodu je odstranění všech formátovacích značek a vyčištění 59 Podstatou převodu je odstranění všech formátovacích značek a vyčištění
60 kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových 60 kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových
61 stylů. 61 stylů.
62 </p> 62 </p>
63   63  
64 <p class="Remark"> 64 <p class="Remark">
65 Stránka vzniká jak konvertuji další stránky do HTML. 65 Stránka vzniká jak konvertuji další stránky do HTML.
66 </p> 66 </p>
67   67  
68 <h1> Úvodem </h1> 68 <h1> Úvodem </h1>
69   69  
70 <p> 70 <p>
71 Základním problémem převodu je to, že program Word umožňuje uživateli 71 Základním problémem převodu je to, že program Word umožňuje uživateli
72 vkládat do textu spustu formátovacích povelů, které pak nejsou viditelné 72 vkládat do textu spustu formátovacích povelů, které pak nejsou viditelné
73 a v programu Word se tedy ani nedají odstranit. Bohužel nelze uživatele 73 a v programu Word se tedy ani nedají odstranit. Bohužel nelze uživatele
74 omezit pouze na elementy definované v šabloně dokumentu a ani nelze 74 omezit pouze na elementy definované v šabloně dokumentu a ani nelze
75 nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly. 75 nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.
76 </p> 76 </p>
77   77  
78 <p> 78 <p>
79 Druhý problém vzniká tím, že uživatelé používají Word nejen jako editor 79 Druhý problém vzniká tím, že uživatelé používají Word nejen jako editor
80 ale i jako lámací program (protože potřebují aby se výsledek vytiskl dle 80 ale i jako lámací program (protože potřebují aby se výsledek vytiskl dle
81 jejich představ). Tak se do dokumentu dostávají různé fixní mezery, 81 jejich představ). Tak se do dokumentu dostávají různé fixní mezery,
82 lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentu 82 lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentu
83 těchto speciálností jen pár a není problém je odstranit. 83 těchto speciálností jen pár a není problém je odstranit.
84 Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykle 84 Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykle
85 umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou 85 umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou
86 obtížné. 86 obtížné.
87 </p> 87 </p>
88   88  
89 <p> 89 <p>
90 Základem úspěchu je použití jednoduché šablony, příliš neformátovat 90 Základem úspěchu je použití jednoduché šablony, příliš neformátovat
91 dokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokonce 91 dokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokonce
92 tabulkami v tabulkách). 92 tabulkami v tabulkách).
93 </p> 93 </p>
94   94  
95 <h1> Export dat z programu Word </h1> 95 <h1> Export dat z programu Word </h1>
96   96  
97 <p> 97 <p>
98 Cílem tohoto kroku je získat hrubá HTML data stránky. 98 Cílem tohoto kroku je získat hrubá HTML data stránky.
99 </p> 99 </p>
100   100  
101 <ul> 101 <ul>
102 <li> Otevřít dokument v programu Word </li> 102 <li> Otevřít dokument v programu Word </li>
103 <li> Uložit jako zjednodušený HTML </li> 103 <li> Uložit jako zjednodušený HTML </li>
104 <li> Zavřít Word </li> 104 <li> Zavřít Word </li>
105 </ul> 105 </ul>
106   106  
107 <p> 107 <p>
108 Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html 108 Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html
109 (lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML 109 (lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML
110 příslušného projektu/modulu. 110 příslušného projektu/modulu.
111 </p> 111 </p>
112 112  
113 <h1> Automatická filtrace značek </h1> 113 <h1> Automatická filtrace značek </h1>
114 114  
115 <p> 115 <p>
116 Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslů 116 Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslů
117 ale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní se 117 ale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní se
118 skoro všechny formátovací značky a styl. 118 skoro všechny formátovací značky a styl.
119 </p> 119 </p>
120 120  
121 <ul> 121 <ul>
122 <li> Spustíme HTML Compress </li> 122 <li> Spustíme HTML Compress </li>
123 <li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li> 123 <li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li>
124 <li> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li> 124 <li> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li>
125 <li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</i> </li> 125 <li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</i> </li>
126 <li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li> 126 <li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li>
127 <li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li> 127 <li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li>
128 </ul> 128 </ul>
129 129  
130 <p> 130 <p>
131 Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor je 131 Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor je
132 třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor. 132 třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.
133 Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze 133 Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze
134 dokumentu (pokud jste si to v programu nevypnuli). 134 dokumentu (pokud jste si to v programu nevypnuli).
135 </p> 135 </p>
136 136  
137 <p> 137 <p>
138 Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle 138 Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle
139 bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>. 139 bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.
140 Soubor <i>MLAB.hce</i> leží zde 140 Soubor <i>MLAB.hce</i> leží zde
141 <a href="../../Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce</a>. 141 <a href="../../Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce</a>.
142 </p> 142 </p>
143 143  
144 <p> 144 <p>
145 Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele. 145 Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele.
146 Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ). 146 Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ).
147 </p> 147 </p>
148   148  
149 <h1> Manuální úklid kódu </h1> 149 <h1> Manuální úklid kódu </h1>
150 150
151 <h2> Formátování kódu </h2> 151 <h2> Formátování kódu </h2>
152 152  
153 <p> 153 <p>
154 Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo. 154 Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo.
155 Současně se automaticky vytvoří pomocné lokální styly, které pak půjdou 155 Současně se automaticky vytvoří pomocné lokální styly, které pak půjdou
156 snadno zahodit. V tomto kroku přejme na kódování UTF-8. 156 snadno zahodit. V tomto kroku přejme na kódování UTF-8.
157 </p> 157 </p>
158   158  
159 <ul> 159 <ul>
160 <li> Spustíme editor PSPad a otevřeme soubor </li> 160 <li> Spustíme editor PSPad a otevřeme soubor </li>
161 <li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li> 161 <li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li>
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>
173 173  
174 <ul> 174 <ul>
175 <li> Vyplníme název stránky v položce <i>title</i> </li> 175 <li> Vyplníme název stránky v položce <i>title</i> </li>
176 <li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li> 176 <li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li>
177 <li> Vyplníme popis stránky v položce <i>meta name="description"</i> </li> 177 <li> Vyplníme popis stránky v položce <i>meta name="description"</i> </li>
178 <li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li> 178 <li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li>
179 <li> Přendáme název stránky do značky <i>p class="Title"</i> </li> 179 <li> Přendáme název stránky do značky <i>p class="Title"</i> </li>
180 <li> Přendáme jméno autora do značky <i>p class=Autor</i> </li> 180 <li> Přendáme jméno autora do značky <i>p class=Autor</i> </li>
181 <li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li> 181 <li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li>
182 <li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</i> </li> 182 <li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</i> </li>
183 <li> Opravíme odkaz na PDF verzi dokumentu </li> 183 <li> Opravíme odkaz na PDF verzi dokumentu </li>
184 <li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li> 184 <li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li>
185 </ul> 185 </ul>
186 186  
187 <p> 187 <p>
188 Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku, 188 Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku,
189 patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jej 189 patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jej
190 nesmazali) by měl taky fungovat. 190 nesmazali) by měl taky fungovat.
191 </p> 191 </p>
192   192  
193 <h2> Mauální úpravy </h2> 193 <h2> Mauální úpravy </h2>
194 194  
195 <p> 195 <p>
196 Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se 196 Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se
197 čte zdroják. Někdy je vhodné přesunout některé bloky na jiné místo 197 čte zdroják. Někdy je vhodné přesunout některé bloky na jiné místo
198 (například pokud byly schémata z důvodu rozvržení tisku umístěny na 198 (například pokud byly schémata z důvodu rozvržení tisku umístěny na
199 jiném místě než text, který se k nim vztahuje). 199 jiném místě než text, který se k nim vztahuje).
200 </p> 200 </p>
201   201  
202 <h3> Opravy nadpisů <i>h</i> </h3> 202 <h3> Opravy nadpisů <i>h</i> </h3>
203   203  
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">&lt;h1&gt; Nadpis &lt;/h1&gt;</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  
214 <h3> Opravy odstavců <i>p</i> </h3> 216 <h3> Opravy odstavců <i>p</i> </h3>
215 217  
216 <p> 218 <p>
217 Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro 219 Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro
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">&lt;p&gt;
-   226 Běžný text odstavce se &lt;i&gt;<i>zvýrazněným textem</i>&lt;/i&gt; uvnitř.
-   227 &lt;/p&gt;</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>
236   242  
237 <ul> 243 <ul>
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">&lt;table&gt;
-   250 &lt;tr&gt;
-   251 &lt;th&gt; <i>Popisek 1</i> &lt;/th&gt;
-   252 &lt;th&gt; <i>Popisek 2</i> &lt;/th&gt;
-   253 &lt;/tr&gt;
-   254 &lt;tr&gt;
-   255 &lt;td&gt; Buňka 1 &lt;/td&gt;
-   256 &lt;td&gt; Buňka 2 &lt;/td&gt;
-   257 &lt;/tr&gt;
-   258 &lt;tr&gt;
-   259 &lt;td colspan="2"&gt; Spojená buňka 3 a 4 &lt;/td&gt;
-   260 &lt;/tr&gt;
-   261 &lt;/table&gt;</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
253 odstraníme. 291 odstraníme.
254 </p> 292 </p>
255 293  
256 <p> 294 <p>
257 Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a 295 Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
258 podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce 296 podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
259 vzniklé spojením 2 buněk <i>colspan="2"</i>. 297 vzniklé spojením 2 buněk <i>colspan="2"</i>.
260 </p> 298 </p>
261 299  
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">&lt;table class="Soupiska"&gt;
-   306 &lt;tr&gt;
-   307 &lt;th&gt; <i>Reference</i> &lt;/th&gt;
-   308 &lt;th&gt; <i>Hodnota</i> &lt;/th&gt;
-   309 &lt;/tr&gt;
-   310 &lt;tr&gt;
-   311 &lt;th colspan="2"&gt; Odpory &lt;/th&gt;
-   312 &lt;/tr&gt;
-   313 &lt;tr&gt;
-   314 &lt;td&gt; R1 &lt;/td&gt;
-   315 &lt;td&gt; 10k &lt;/td&gt;
-   316 &lt;/tr&gt;
-   317 &lt;/table&gt;</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">&lt;img width=228 height=160 src="Pictures/image002.jpg"
-   354 alt="Alternativní popis"&gt;</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">&lt;style type="text/css"&gt;
-   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 &lt;/style&gt;</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">&lt;p&gt;
-   393 &lt;!-- Vektorová grafika --&gt;
-   394 &lt;img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif"
-   395 alt="Vektorový popisek 1"&gt;
-   396 &lt;img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif"
-   397 alt="Vektorový popisek 2"&gt;
-   398 &lt;!-- Podkladový obrázek --&gt;
-   399 &lt;img width="605" height="454" src="Pictures/MainPicture.jpg"
-   400 alt="Obrázek s popiskami"&gt;
-   401 &lt;/p&gt;</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">
285 <script type="text/javascript"> 408 <script type="text/javascript">
286 <!-- 409 <!--
287 SetRelativePath("../../"); 410 SetRelativePath("../../");
288 DrawFooter(); 411 DrawFooter();
289 // --> 412 // -->
290 </script> 413 </script>
291 <noscript> 414 <noscript>
292 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p> 415 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
293 </noscript> 416 </noscript>
294 </div> 417 </div>
295 <!-- AUTOINCLUDE END --> 418 <!-- AUTOINCLUDE END -->
296   419  
297 </body> 420 </body>
298 </html> 421 </html>