Rev 305 Rev 308
Line 107... Line 107...
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>
Line 161... Line 161...
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>
Line 181... Line 181...
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).
Line 203... Line 203...
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  
-   209 <samp class="Block">&lt;h1&gt; Nadpis &lt;/h1&gt;</samp>
208 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>
-   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>
222 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>
-   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>
242 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>
-   280  
247 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>
-   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>
266 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>
271   338  
-   339 <p>
-   340 Obrázek musí mít tyto atributy:
272 </p> 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>
-   349
-   350 <p>
-   351 Například:
-   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>
277 Obrázky s popiskami generují 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.
278 </p> 365 </p>
279   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
-   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:
-   380 </p>
-   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">