Rev Author Line No. Line
331 miho 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
253 miho 2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> DOC 2 HTML </title>
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">
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">
381 miho 10 <link rel="StyleSheet" href="../../Web/CSS/MLAB_Print.css" type="text/css" media="print">
253 miho 11 <link rel="shortcut icon" type="image/x-icon" href="../../Web/PIC/MLAB.ico">
12 <script type="text/javascript" src="../../Web/JS/MLAB_Menu.js"></script>
13 <!-- AUTOINCLUDE END -->
14 </head>
15  
16 <body lang="cs">
17  
18 <!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE -->
19 <!-- ============== HLAVICKA ============== -->
20 <div class="Header">
21 <script type="text/javascript">
22 <!--
23 SetRelativePath("../../");
24 DrawHeader();
25 // -->
26 </script>
27 <noscript>
28 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
29 </noscript>
30 </div>
31 <!-- AUTOINCLUDE END -->
32  
33 <!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE -->
34 <!-- ============== MENU ============== -->
35 <div class="Menu">
36 <script type="text/javascript">
37 <!--
38 SetRelativePath("../../");
39 DrawMenu();
40 // -->
41 </script>
42 <noscript>
43 <p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p>
44 </noscript>
45 </div>
46 <!-- AUTOINCLUDE END -->
47  
48 <!-- ============== TEXT ============== -->
49 <div class="Text">
50 <p class="Title">
51 Převod DOC na HTML
52 </p>
53 <p class=Autor>
54 Milan Horkel
55 </p>
56 <p class="Subtitle">
57 Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protože
58 kvalita podkladu obvykle není dostatečná. Proces převodu lze však celkem
59 úspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce.
60 Podstatou převodu je odstranění všech formátovacích značek a vyčištění
61 kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových
62 stylů.
63 </p>
64  
65 <p class="Remark">
66 Stránka vzniká jak konvertuji další stránky do HTML.
67 </p>
68  
69 <h1> Úvodem </h1>
70  
71 <p>
72 Základním problémem převodu je to, že program Word umožňuje uživateli
73 vkládat do textu spustu formátovacích povelů, které pak nejsou viditelné
74 a v programu Word se tedy ani nedají odstranit. Bohužel nelze uživatele
75 omezit pouze na elementy definované v šabloně dokumentu a ani nelze
76 nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.
77 </p>
78  
79 <p>
80 Druhý problém vzniká tím, že uživatelé používají Word nejen jako editor
81 ale i jako lámací program (protože potřebují aby se výsledek vytiskl dle
82 jejich představ). Tak se do dokumentu dostávají různé fixní mezery,
83 lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentu
84 těchto speciálností jen pár a není problém je odstranit.
85 Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykle
86 umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou
87 obtížné.
88 </p>
89  
90 <p>
91 Základem úspěchu je použití jednoduché šablony, příliš neformátovat
92 dokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokonce
93 tabulkami v tabulkách).
94 </p>
95  
96 <h1> Export dat z programu Word </h1>
97  
98 <p>
99 Cílem tohoto kroku je získat hrubá HTML data stránky.
100 </p>
101  
102 <ul>
103 <li> Otevřít dokument v programu Word </li>
104 <li> Uložit jako zjednodušený HTML </li>
105 <li> Zavřít Word </li>
106 </ul>
107  
108 <p>
109 Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html
110 (lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML
111 příslušného projektu/modulu.
112 </p>
308 miho 113  
253 miho 114 <h1> Automatická filtrace značek </h1>
308 miho 115  
253 miho 116 <p>
117 Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslů
118 ale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní se
119 skoro všechny formátovací značky a styl.
120 </p>
308 miho 121  
253 miho 122 <ul>
123 <li> Spustíme HTML Compress </li>
124 <li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li>
125 <li> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li>
126 <li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</i> </li>
127 <li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li>
128 <li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li>
129 </ul>
308 miho 130  
253 miho 131 <p>
132 Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor je
133 třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.
134 Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze
135 dokumentu (pokud jste si to v programu nevypnuli).
136 </p>
308 miho 137  
253 miho 138 <p>
139 Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle
140 bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.
141 Soubor <i>MLAB.hce</i> leží zde
142 <a href="../../Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce</a>.
143 </p>
308 miho 144  
253 miho 145 <p>
146 Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele.
147 Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ).
148 </p>
149  
150 <h1> Manuální úklid kódu </h1>
151  
152 <h2> Formátování kódu </h2>
308 miho 153  
253 miho 154 <p>
155 Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo.
156 Současně se automaticky vytvoří pomocné lokální styly, které pak půjdou
157 snadno zahodit. V tomto kroku přejme na kódování UTF-8.
158 </p>
159  
160 <ul>
161 <li> Spustíme editor PSPad a otevřeme soubor </li>
162 <li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li>
163 <li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li>
164 <li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li>
165 <li> Uložíme funkcí <i>Soubor/Uložit</i> </li>
166 </ul>
308 miho 167  
168 <h2> Použití šablony stránky </h2>
169  
253 miho 170 <p>
171 Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy
172 například soubor <i>Template.cs.html</i> a provedeme následující úpravy:
173 </p>
308 miho 174  
253 miho 175 <ul>
176 <li> Vyplníme název stránky v položce <i>title</i> </li>
177 <li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li>
178 <li> Vyplníme popis stránky v položce <i>meta name="description"</i> </li>
179 <li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li>
180 <li> Přendáme název stránky do značky <i>p class="Title"</i> </li>
181 <li> Přendáme jméno autora do značky <i>p class=Autor</i> </li>
182 <li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li>
183 <li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</i> </li>
184 <li> Opravíme odkaz na PDF verzi dokumentu </li>
185 <li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li>
186 </ul>
308 miho 187  
253 miho 188 <p>
189 Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku,
190 patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jej
191 nesmazali) by měl taky fungovat.
192 </p>
193  
194 <h2> Mauální úpravy </h2>
308 miho 195  
253 miho 196 <p>
197 Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se
276 miho 198 čte zdroják. Někdy je vhodné přesunout některé bloky na jiné místo
199 (například pokud byly schémata z důvodu rozvržení tisku umístěny na
200 jiném místě než text, který se k nim vztahuje).
253 miho 201 </p>
202  
203 <h3> Opravy nadpisů <i>h</i> </h3>
204  
205 <p>
206 Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou
207 samostatně na řádce.
208 </p>
308 miho 209  
210 <samp class="Block">&lt;h1&gt; Nadpis &lt;/h1&gt;</samp>
211  
253 miho 212 <p>
213 Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do
214 samostatného odstavce <i>p</i>.
215 </p>
308 miho 216  
253 miho 217 <h3> Opravy odstavců <i>p</i> </h3>
308 miho 218  
253 miho 219 <p>
220 Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro
221 něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud
222 ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,
223 <i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.
224 </p>
308 miho 225  
226 <samp class="Block">&lt;p&gt;
227 Běžný text odstavce se &lt;i&gt;<i>zvýrazněným textem</i>&lt;/i&gt; uvnitř.
228 &lt;/p&gt;</samp>
229  
253 miho 230 <h3> Vyčištění tabulek <i>table</i> </h3>
308 miho 231  
253 miho 232 <p>
233 Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné
234 buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo
235 buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své
236 značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,
308 miho 237 typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit.
253 miho 238 </p>
308 miho 239  
253 miho 240 <p>
241 Tabulka by měla mít strukturu
242 </p>
243  
244 <ul>
245 <li> <i>table</i> tabulka </li>
246 <li> <i>tr</i> řádka tabulky </li>
247 <li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li>
248 </ul>
308 miho 249  
250 <samp class="Block">&lt;table&gt;
251 &lt;tr&gt;
252 &lt;th&gt; <i>Popisek 1</i> &lt;/th&gt;
253 &lt;th&gt; <i>Popisek 2</i> &lt;/th&gt;
254 &lt;/tr&gt;
255 &lt;tr&gt;
256 &lt;td&gt; Buňka 1 &lt;/td&gt;
257 &lt;td&gt; Buňka 2 &lt;/td&gt;
258 &lt;/tr&gt;
259 &lt;tr&gt;
260 &lt;td colspan="2"&gt; Spojená buňka 3 a 4 &lt;/td&gt;
261 &lt;/tr&gt;
262 &lt;/table&gt;</samp>
263 <table class="Samp">
264 <tr>
265 <th> Popisek 1 </th>
266 <th> Popisek 2 </th>
267 </tr>
268 <tr>
269 <td> Buňka 1 </td>
270 <td> Buňka 2 </td>
271 </tr>
272 <tr>
273 <td colspan="2"> Spojená buňka 3 a 4 </td>
274 </tr>
275 </table>
276  
253 miho 277 <p>
278 Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není
279 potřeba značka <i>p</i>.
280 </p>
308 miho 281  
282 <p>
283 Pro změnu chování se dají použít příslušné atributy <i>class</i>,
284 například <i>class="Center"</i>. Viz návod k použití kaskádového stylu.
285 </p>
286  
253 miho 287 <h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3>
308 miho 288  
253 miho 289 <p>
290 U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme
291 <i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku
292 odstraníme.
293 </p>
308 miho 294  
253 miho 295 <p>
296 Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
297 podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
298 vzniklé spojením 2 buněk <i>colspan="2"</i>.
299 </p>
308 miho 300  
253 miho 301 <p>
302 Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>
303 a <i>Hodnota</i> doplníme celou řádku s těmito popisy.
304 </p>
308 miho 305  
306 <samp class="Block">&lt;table class="Soupiska"&gt;
307 &lt;tr&gt;
308 &lt;th&gt; <i>Reference</i> &lt;/th&gt;
309 &lt;th&gt; <i>Hodnota</i> &lt;/th&gt;
310 &lt;/tr&gt;
311 &lt;tr&gt;
312 &lt;th colspan="2"&gt; Odpory &lt;/th&gt;
313 &lt;/tr&gt;
314 &lt;tr&gt;
315 &lt;td&gt; R1 &lt;/td&gt;
316 &lt;td&gt; 10k &lt;/td&gt;
317 &lt;/tr&gt;
318 &lt;/table&gt;</samp>
319 <table class="Soupiska Samp">
320 <tr>
321 <th> Reference </th>
322 <th> Hodnota </th>
323 </tr>
324 <tr>
325 <th colspan="2"> Odpory </th>
326 </tr>
327 <tr>
328 <td> R1 </td>
329 <td> 10k </td>
330 </tr>
331 </table>
332  
253 miho 333 <h3> Oprava obrázků <i>img</i> </h3>
305 miho 334  
253 miho 335 <p>
308 miho 336 Nejprve přejemenujeme adresář s obrázky na jméno <i>Pictures</i>.
337 Původní název je totožný se jménem stránky a bývá velmi dlouhý.
338 </p>
305 miho 339  
308 miho 340 <p>
341 Obrázek musí mít tyto atributy:
253 miho 342 </p>
308 miho 343  
344 <ul>
345 <li> <i>width</i> určuje šířku obrázku (v pixelech) </li>
346 <li> <i>height</i> určuje výšku obrázku (v pixelech) </li>
347 <li> <i>src</i> určuje cestu k obrázku </li>
348 <li> <i>alt</i> určuje alternativní text k obrázku (povinné!) </li>
349 </ul>
350  
351 <p>
352 Například:
353 </p>
354 <samp class="Block">&lt;img width=228 height=160 src="Pictures/image002.jpg"
355 alt="Alternativní popis"&gt;</samp>
253 miho 356  
308 miho 357 <p>
358  
305 miho 359 <h4> Obrázky s popiskami </h4>
360  
361 <p>
308 miho 362 Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázek
363 a ten se opatří textovými poli s ukazateli. Výsledný HTML kód pak
364 obsahuje obrázek a přes něj tabulku s přesně danými rozměry a v této
365 tabulce jsou umístěny (jen v některých buňkách) dílčí obrázky.
305 miho 366 </p>
367  
308 miho 368 <p>
369 Princip položení vektorové grafiky přes JPG obrázek není v zásadě
370 chybný ale nežádoucí je to, že jsou dílčí obrázky umístěny v tabulce.
371 Řešení spočívá v tom, že se odstraní tabulka a ponechají se jen obrázky
372 a do dokumentu (těsně před značku <i>/head</i>) se doplní styl pro
373 individuální umístění jednotlivých dílčích vetorových obrázků.
374 Souřadnice se sice dají spočítat ale je snazší doladit je dle
375 zobrazeného výsledku.
376 </p>
377  
378 <p>
379 Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsou
380 posunutí dílčích obrázků proti hlavnímu obrázku:
381 </p>
382  
383 <samp class="Block">&lt;style type="text/css"&gt;
384 img.<i>Pic1</i> {position:absolute;margin-left:<i>230px</i>;margin-top:<i>10px</i>; }
385 img.<i>Pic2</i> {position:absolute;margin-left:<i>322px</i>;margin-top:<i>160px</i>; }
386 &lt;/style&gt;</samp>
387  
388 <p>
389 A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázky
390 umístěnými nad ním:
391 </p>
392  
393 <samp class="Block">&lt;p&gt;
394 &lt;!-- Vektorová grafika --&gt;
395 &lt;img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif"
396 alt="Vektorový popisek 1"&gt;
397 &lt;img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif"
398 alt="Vektorový popisek 2"&gt;
399 &lt;!-- Podkladový obrázek --&gt;
400 &lt;img width="605" height="454" src="Pictures/MainPicture.jpg"
401 alt="Obrázek s popiskami"&gt;
402 &lt;/p&gt;</samp>
403  
253 miho 404 </div>
405  
406 <!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->
407 <!-- ============== PATIČKA ============== -->
408 <div class="Footer">
409 <script type="text/javascript">
410 <!--
411 SetRelativePath("../../");
412 DrawFooter();
413 // -->
414 </script>
415 <noscript>
416 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
417 </noscript>
418 </div>
419 <!-- AUTOINCLUDE END -->
420  
421 </body>
422 </html>