/Articles/HowTo/DOC2HTML.cs.html
109,15 → 109,15
(lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML
pří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í se
skoro 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>
126,7 → 126,7
<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 je
třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.
133,7 → 133,7
Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze
dokumentu (pokud jste si to v programu nevypnuli).
</p>
 
<p>
Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle
bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.
140,7 → 140,7
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> ).
149,7 → 149,7
<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ůjdou
163,14 → 163,14
<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 </h2>
 
<h2> Použití šablony stránky </h2>
 
<p>
Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy
napří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>
183,7 → 183,7
<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 jej
191,7 → 191,7
</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
205,14 → 205,16
Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou
samostatně na řádce.
</p>
 
<samp class="Block">&lt;h1&gt; Nadpis &lt;/h1&gt;</samp>
 
<p>
Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do
samostatné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 pro
něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud
219,17 → 221,21
ješ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">&lt;p&gt;
Běžný text odstavce se &lt;i&gt;<i>zvýrazněným textem</i>&lt;/i&gt; uvnitř.
&lt;/p&gt;</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ísto
buně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>. Veškeré formátování by se mělo odstarnit.
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>
239,44 → 245,161
<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">&lt;table&gt;
&lt;tr&gt;
&lt;th&gt; <i>Popisek 1</i> &lt;/th&gt;
&lt;th&gt; <i>Popisek 2</i> &lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; Buňka 1 &lt;/td&gt;
&lt;td&gt; Buňka 2 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2"&gt; Spojená buňka 3 a 4 &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</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ší tabulku
odstraníme.
</p>
 
<p>
Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
vzniklé 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">&lt;table class="Soupiska"&gt;
&lt;tr&gt;
&lt;th&gt; <i>Reference</i> &lt;/th&gt;
&lt;th&gt; <i>Hodnota</i> &lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="2"&gt; Odpory &lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; R1 &lt;/td&gt;
&lt;td&gt; 10k &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</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>
Přejmenovat adresář s obrázky.
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">&lt;img width=228 height=160 src="Pictures/image002.jpg"
alt="Alternativní popis"&gt;</samp>
 
<p>
 
<h4> Obrázky s popiskami </h4>
 
<p>
Obrázky s popiskami generují
Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázek
a ten se opatří textovými poli s ukazateli. Výsledný HTML kód pak
obsahuje obrázek a přes něj tabulku s přesně danými rozměry a v této
tabulce 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ázky
a do dokumentu (těsně před značku <i>/head</i>) se doplní styl pro
individuá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 dle
zobrazeného výsledku.
</p>
<p>
Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsou
posunutí dílčích obrázků proti hlavnímu obrázku:
</p>
<samp class="Block">&lt;style type="text/css"&gt;
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>; }
&lt;/style&gt;</samp>
 
<p>
A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázky
umístěnými nad ním:
</p>
<samp class="Block">&lt;p&gt;
&lt;!-- Vektorová grafika --&gt;
&lt;img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif"
alt="Vektorový popisek 1"&gt;
&lt;img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif"
alt="Vektorový popisek 2"&gt;
&lt;!-- Podkladový obrázek --&gt;
&lt;img width="605" height="454" src="Pictures/MainPicture.jpg"
alt="Obrázek s popiskami"&gt;
&lt;/p&gt;</samp>
 
</div>
 
<!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->