Rev Author Line No. Line
253 miho 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
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">
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>
12 <!-- AUTOINCLUDE END -->
13 </head>
14  
15 <body lang="cs">
16  
17 <!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE -->
18 <!-- ============== HLAVICKA ============== -->
19 <div class="Header">
20 <script type="text/javascript">
21 <!--
22 SetRelativePath("../../");
23 DrawHeader();
24 // -->
25 </script>
26 <noscript>
27 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
28 </noscript>
29 </div>
30 <!-- AUTOINCLUDE END -->
31  
32 <!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE -->
33 <!-- ============== MENU ============== -->
34 <div class="Menu">
35 <script type="text/javascript">
36 <!--
37 SetRelativePath("../../");
38 DrawMenu();
39 // -->
40 </script>
41 <noscript>
42 <p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p>
43 </noscript>
44 </div>
45 <!-- AUTOINCLUDE END -->
46  
47 <!-- ============== TEXT ============== -->
48 <div class="Text">
49 <p class="Title">
50 Převod DOC na HTML
51 </p>
52 <p class=Autor>
53 Milan Horkel
54 </p>
55 <p class="Subtitle">
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
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í
60 kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových
61 stylů.
62 </p>
63  
64 <p class="Remark">
65 Stránka vzniká jak konvertuji další stránky do HTML.
66 </p>
67  
68 <h1> Úvodem </h1>
69  
70 <p>
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é
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
75 nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.
76 </p>
77  
78 <p>
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
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
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
85 umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou
86 obtížné.
87 </p>
88  
89 <p>
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
92 tabulkami v tabulkách).
93 </p>
94  
95 <h1> Export dat z programu Word </h1>
96  
97 <p>
98 Cílem tohoto kroku je získat hrubá HTML data stránky.
99 </p>
100  
101 <ul>
102 <li> Otevřít dokument v programu Word </li>
103 <li> Uložit jako zjednodušený HTML </li>
104 <li> Zavřít Word </li>
105 </ul>
106  
107 <p>
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
110 příslušného projektu/modulu.
111 </p>
308 miho 112  
253 miho 113 <h1> Automatická filtrace značek </h1>
308 miho 114  
253 miho 115 <p>
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
118 skoro všechny formátovací značky a styl.
119 </p>
308 miho 120  
253 miho 121 <ul>
122 <li> Spustíme HTML Compress </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>
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>
127 <li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li>
128 </ul>
308 miho 129  
253 miho 130 <p>
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.
133 Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze
134 dokumentu (pokud jste si to v programu nevypnuli).
135 </p>
308 miho 136  
253 miho 137 <p>
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>.
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>.
142 </p>
308 miho 143  
253 miho 144 <p>
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> ).
147 </p>
148  
149 <h1> Manuální úklid kódu </h1>
150  
151 <h2> Formátování kódu </h2>
308 miho 152  
253 miho 153 <p>
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
156 snadno zahodit. V tomto kroku přejme na kódování UTF-8.
157 </p>
158  
159 <ul>
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>
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>
164 <li> Uložíme funkcí <i>Soubor/Uložit</i> </li>
165 </ul>
308 miho 166  
167 <h2> Použití šablony stránky </h2>
168  
253 miho 169 <p>
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:
172 </p>
308 miho 173  
253 miho 174 <ul>
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>
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>
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>
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>
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>
185 </ul>
308 miho 186  
253 miho 187 <p>
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
190 nesmazali) by měl taky fungovat.
191 </p>
192  
193 <h2> Mauální úpravy </h2>
308 miho 194  
253 miho 195 <p>
196 Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se
276 miho 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
199 jiném místě než text, který se k nim vztahuje).
253 miho 200 </p>
201  
202 <h3> Opravy nadpisů <i>h</i> </h3>
203  
204 <p>
205 Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou
206 samostatně na řádce.
207 </p>
308 miho 208  
209 <samp class="Block">&lt;h1&gt; Nadpis &lt;/h1&gt;</samp>
210  
253 miho 211 <p>
212 Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do
213 samostatného odstavce <i>p</i>.
214 </p>
308 miho 215  
253 miho 216 <h3> Opravy odstavců <i>p</i> </h3>
308 miho 217  
253 miho 218 <p>
219 Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro
220 něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud
221 ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,
222 <i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.
223 </p>
308 miho 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  
253 miho 229 <h3> Vyčištění tabulek <i>table</i> </h3>
308 miho 230  
253 miho 231 <p>
232 Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné
233 buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo
234 buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své
235 značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,
308 miho 236 typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit.
253 miho 237 </p>
308 miho 238  
253 miho 239 <p>
240 Tabulka by měla mít strukturu
241 </p>
242  
243 <ul>
244 <li> <i>table</i> tabulka </li>
245 <li> <i>tr</i> řádka tabulky </li>
246 <li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li>
247 </ul>
308 miho 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  
253 miho 276 <p>
277 Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není
278 potřeba značka <i>p</i>.
279 </p>
308 miho 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  
253 miho 286 <h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3>
308 miho 287  
253 miho 288 <p>
289 U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme
290 <i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku
291 odstraníme.
292 </p>
308 miho 293  
253 miho 294 <p>
295 Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
296 podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
297 vzniklé spojením 2 buněk <i>colspan="2"</i>.
298 </p>
308 miho 299  
253 miho 300 <p>
301 Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>
302 a <i>Hodnota</i> doplníme celou řádku s těmito popisy.
303 </p>
308 miho 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  
253 miho 332 <h3> Oprava obrázků <i>img</i> </h3>
305 miho 333  
253 miho 334 <p>
308 miho 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>
305 miho 338  
308 miho 339 <p>
340 Obrázek musí mít tyto atributy:
253 miho 341 </p>
308 miho 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>
253 miho 355  
308 miho 356 <p>
357  
305 miho 358 <h4> Obrázky s popiskami </h4>
359  
360 <p>
308 miho 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.
305 miho 365 </p>
366  
308 miho 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  
253 miho 403 </div>
404  
405 <!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->
406 <!-- ============== PATIČKA ============== -->
407 <div class="Footer">
408 <script type="text/javascript">
409 <!--
410 SetRelativePath("../../");
411 DrawFooter();
412 // -->
413 </script>
414 <noscript>
415 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
416 </noscript>
417 </div>
418 <!-- AUTOINCLUDE END -->
419  
420 </body>
421 </html>