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