<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> DOC 2 HTML </title><meta name="keywords" content="stavebnice MLAB převod Word DOC HTML"><meta name="description" content="Projekt MLAB, Převod Word dokumentu na HTML"><!-- AUTOINCLUDE START "Page/Head.cs.ihtml" DO NOT REMOVE --><link rel="StyleSheet" href="../../Web/CSS/MLAB.css" type="text/css" title="MLAB základní styl"><link rel="StyleSheet" href="../../Web/CSS/MLAB_Print.css" type="text/css" media="print"><link rel="shortcut icon" type="image/x-icon" href="../../Web/PIC/MLAB.ico"><script type="text/javascript" src="../../Web/JS/MLAB_Menu.js"></script><!-- AUTOINCLUDE END --></head><body lang="cs"><!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE --><!-- ============== HLAVICKA ============== --><div class="Header"><script type="text/javascript"><!--SetRelativePath("../../");DrawHeader();// --></script><noscript><p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p></noscript></div><!-- AUTOINCLUDE END --><!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE --><!-- ============== MENU ============== --><div class="Menu"><script type="text/javascript"><!--SetRelativePath("../../");DrawMenu();// --></script><noscript><p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p></noscript></div><!-- AUTOINCLUDE END --><!-- ============== TEXT ============== --><div class="Text"><p class="Title">Převod DOC na HTML</p><p class=Autor>Milan Horkel</p><p class="Subtitle">Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protožekvalita podkladu obvykle není dostatečná. Proces převodu lze však celkemúspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce.Podstatou převodu je odstranění všech formátovacích značek a vyčištěníkódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádovýchstylů.</p><p class="Remark">Stránka vzniká jak konvertuji další stránky do HTML.</p><h1> Úvodem </h1><p>Základním problémem převodu je to, že program Word umožňuje uživatelivkládat do textu spustu formátovacích povelů, které pak nejsou viditelnéa v programu Word se tedy ani nedají odstranit. Bohužel nelze uživateleomezit pouze na elementy definované v šabloně dokumentu a ani nelzenadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.</p><p>Druhý problém vzniká tím, že uživatelé používají Word nejen jako editorale i jako lámací program (protože potřebují aby se výsledek vytiskl dlejejich představ). Tak se do dokumentu dostávají různé fixní mezery,lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentutěchto speciálností jen pár a není problém je odstranit.Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykleumísťují obrázky do samostatných odstavců. Příslušné úpravy nejsouobtížné.</p><p>Základem úspěchu je použití jednoduché šablony, příliš neformátovatdokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokoncetabulkami v tabulkách).</p><h1> Export dat z programu Word </h1><p>Cílem tohoto kroku je získat hrubá HTML data stránky.</p><ul><li> Otevřít dokument v programu Word </li><li> Uložit jako zjednodušený HTML </li><li> Zavřít Word </li></ul><p>Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html(lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTMLpříslušného projektu/modulu.</p><h1> Automatická filtrace značek </h1><p>Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslůale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní seskoro všechny formátovací značky a styl.</p><ul><li> Spustíme HTML Compress </li><li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li><li> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li><li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</i> </li><li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li><li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li></ul><p>Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor jetřeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verzedokumentu (pokud jste si to v programu nevypnuli).</p><p>Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvyklebydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.Soubor <i>MLAB.hce</i> leží zde<a href="../../Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce</a>.</p><p>Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele.Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ).</p><h1> Manuální úklid kódu </h1><h2> Formátování kódu </h2><p>Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo.Současně se automaticky vytvoří pomocné lokální styly, které pak půjdousnadno zahodit. V tomto kroku přejme na kódování UTF-8.</p><ul><li> Spustíme editor PSPad a otevřeme soubor </li><li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li><li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li><li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li><li> Uložíme funkcí <i>Soubor/Uložit</i> </li></ul><h2> Použití šablony stránky </h2><p>Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedynapříklad soubor <i>Template.cs.html</i> a provedeme následující úpravy:</p><ul><li> Vyplníme název stránky v položce <i>title</i> </li><li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li><li> Vyplníme popis stránky v položce <i>meta name="description"</i> </li><li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li><li> Přendáme název stránky do značky <i>p class="Title"</i> </li><li> Přendáme jméno autora do značky <i>p class=Autor</i> </li><li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li><li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</i> </li><li> Opravíme odkaz na PDF verzi dokumentu </li><li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li></ul><p>Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku,patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jejnesmazali) by měl taky fungovat.</p><h2> Mauální úpravy </h2><p>Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe sečte zdroják. Někdy je vhodné přesunout některé bloky na jiné místo(například pokud byly schémata z důvodu rozvržení tisku umístěny najiném místě než text, který se k nim vztahuje).</p><h3> Opravy nadpisů <i>h</i> </h3><p>Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsousamostatně na řádce.</p><samp class="Block"><h1> Nadpis </h1></samp><p>Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát dosamostatného odstavce <i>p</i>.</p><h3> Opravy odstavců <i>p</i> </h3><p>Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak proněj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokudještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,<i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.</p><samp class="Block"><p>Běžný text odstavce se <i><i>zvýrazněným textem</i></i> uvnitř.</p></samp><h3> Vyčištění tabulek <i>table</i> </h3><p>Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významnébuňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místobuněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve svéznačce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit.</p><p>Tabulka by měla mít strukturu</p><ul><li> <i>table</i> tabulka </li><li> <i>tr</i> řádka tabulky </li><li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li></ul><samp class="Block"><table><tr><th> <i>Popisek 1</i> </th><th> <i>Popisek 2</i> </th></tr><tr><td> Buňka 1 </td><td> Buňka 2 </td></tr><tr><td colspan="2"> Spojená buňka 3 a 4 </td></tr></table></samp><table class="Samp"><tr><th> Popisek 1 </th><th> Popisek 2 </th></tr><tr><td> Buňka 1 </td><td> Buňka 2 </td></tr><tr><td colspan="2"> Spojená buňka 3 a 4 </td></tr></table><p>Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách nenípotřeba značka <i>p</i>.</p><p>Pro změnu chování se dají použít příslušné atributy <i>class</i>,například <i>class="Center"</i>. Viz návod k použití kaskádového stylu.</p><h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3><p>U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme<i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulkuodstraníme.</p><p>Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> apodobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňcevzniklé spojením 2 buněk <i>colspan="2"</i>.</p><p>Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>a <i>Hodnota</i> doplníme celou řádku s těmito popisy.</p><samp class="Block"><table class="Soupiska"><tr><th> <i>Reference</i> </th><th> <i>Hodnota</i> </th></tr><tr><th colspan="2"> Odpory </th></tr><tr><td> R1 </td><td> 10k </td></tr></table></samp><table class="Soupiska Samp"><tr><th> Reference </th><th> Hodnota </th></tr><tr><th colspan="2"> Odpory </th></tr><tr><td> R1 </td><td> 10k </td></tr></table><h3> Oprava obrázků <i>img</i> </h3><p>Nejprve přejemenujeme adresář s obrázky na jméno <i>Pictures</i>.Původní název je totožný se jménem stránky a bývá velmi dlouhý.</p><p>Obrázek musí mít tyto atributy:</p><ul><li> <i>width</i> určuje šířku obrázku (v pixelech) </li><li> <i>height</i> určuje výšku obrázku (v pixelech) </li><li> <i>src</i> určuje cestu k obrázku </li><li> <i>alt</i> určuje alternativní text k obrázku (povinné!) </li></ul><p>Například:</p><samp class="Block"><img width=228 height=160 src="Pictures/image002.jpg"alt="Alternativní popis"></samp><p><h4> Obrázky s popiskami </h4><p>Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázeka ten se opatří textovými poli s ukazateli. Výsledný HTML kód pakobsahuje obrázek a přes něj tabulku s přesně danými rozměry a v tétotabulce jsou umístěny (jen v některých buňkách) dílčí obrázky.</p><p>Princip položení vektorové grafiky přes JPG obrázek není v zásaděchybný ale nežádoucí je to, že jsou dílčí obrázky umístěny v tabulce.Řešení spočívá v tom, že se odstraní tabulka a ponechají se jen obrázkya do dokumentu (těsně před značku <i>/head</i>) se doplní styl proindividuální umístění jednotlivých dílčích vetorových obrázků.Souřadnice se sice dají spočítat ale je snazší doladit je dlezobrazeného výsledku.</p><p>Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsouposunutí dílčích obrázků proti hlavnímu obrázku:</p><samp class="Block"><style type="text/css">img.<i>Pic1</i> {position:absolute;margin-left:<i>230px</i>;margin-top:<i>10px</i>; }img.<i>Pic2</i> {position:absolute;margin-left:<i>322px</i>;margin-top:<i>160px</i>; }</style></samp><p>A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázkyumístěnými nad ním:</p><samp class="Block"><p><!-- Vektorová grafika --><img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif"alt="Vektorový popisek 1"><img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif"alt="Vektorový popisek 2"><!-- Podkladový obrázek --><img width="605" height="454" src="Pictures/MainPicture.jpg"alt="Obrázek s popiskami"></p></samp></div><!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE --><!-- ============== PATIČKA ============== --><div class="Footer"><script type="text/javascript"><!--SetRelativePath("../../");DrawFooter();// --></script><noscript><p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p></noscript></div><!-- AUTOINCLUDE END --></body></html>