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>
112  
113 <h1> Automatická filtrace značek </h1>
114  
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>
120  
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>
129  
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>
136  
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>
143  
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>
152  
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>
166  
167 <h2> Použití šablony </h2>
168  
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>
173  
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>
186  
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>
194  
195 <p>
196 Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se
197 čte zdroják.
198 </p>
199  
200 <h3> Opravy nadpisů <i>h</i> </h3>
201  
202 <p>
203 Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou
204 samostatně na řádce.
205 </p>
206  
207 <p>
208 Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do
209 samostatného odstavce <i>p</i>.
210 </p>
211  
212 <h3> Opravy odstavců <i>p</i> </h3>
213  
214 <p>
215 Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro
216 něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud
217 ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,
218 <i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.
219 </p>
220  
221 <h3> Vyčištění tabulek <i>table</i> </h3>
222  
223 <p>
224 Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné
225 buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo
226 buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své
227 značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,
228 typicky <i>b</i>. Veškeré formátování by se mělo odstarnit.
229 </p>
230  
231 <p>
232 Tabulka by měla mít strukturu
233 </p>
234  
235 <ul>
236 <li> <i>table</i> tabulka </li>
237 <li> <i>tr</i> řádka tabulky </li>
238 <li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li>
239 </ul>
240  
241 <p>
242 Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není
243 potřeba značka <i>p</i>.
244 </p>
245  
246 <h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3>
247  
248 <p>
249 U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme
250 <i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku
251 odstraníme.
252 </p>
253  
254 <p>
255 Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
256 podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
257 vzniklé spojením 2 buněk <i>colspan="2"</i>.
258 </p>
259  
260 <p>
261 Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>
262 a <i>Hodnota</i> doplníme celou řádku s těmito popisy.
263 </p>
264  
265 <h3> Oprava obrázků <i>img</i> </h3>
266 <p>
267 </p>
268  
269 </div>
270  
271 <!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->
272 <!-- ============== PATIČKA ============== -->
273 <div class="Footer">
274 <script type="text/javascript">
275 <!--
276 SetRelativePath("../../");
277 DrawFooter();
278 // -->
279 </script>
280 <noscript>
281 <p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
282 </noscript>
283 </div>
284 <!-- AUTOINCLUDE END -->
285  
286 </body>
287 </html>