WebSVN – MLAB – Rev 276 – Blame – /Articles/HowTo/DOC2HTML.cs.html

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

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

13

</head>

14

15

<body lang="cs">

16

17

18

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

31

32

33

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

46

47

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

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>

208

209

<p>

210

Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do

211

samostatného odstavce <i>p</i>.

212

</p>

213

214

<h3> Opravy odstavců <i>p</i> </h3>

215

216

<p>

217

Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro

218

něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud

219

ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,

220

<i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.

221

</p>

222

223

<h3> Vyčištění tabulek <i>table</i> </h3>

224

225

<p>

226

Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné

227

buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo

228

buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své

229

značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,

230

typicky <i>b</i>. Veškeré formátování by se mělo odstarnit.

231

</p>

232

233

<p>

234

Tabulka by měla mít strukturu

235

</p>

236

237

<ul>

238

<li> <i>table</i> tabulka </li>

239

<li> <i>tr</i> řádka tabulky </li>

240

<li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li>

241

</ul>

242

243

<p>

244

Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není

245

potřeba značka <i>p</i>.

246

</p>

247

248

<h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3>

249

250

<p>

251

U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme

252

<i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku

253

odstraníme.

254

</p>

255

256

<p>

257

Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a

258

podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce

259

vzniklé spojením 2 buněk <i>colspan="2"</i>.

260

</p>

261

262

<p>

263

Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>

264

a <i>Hodnota</i> doplníme celou řádku s těmito popisy.

265

</p>

266

267

<h3> Oprava obrázků <i>img</i> </h3>

268

<p>

253

miho

270

</p>

271

272

</div>

273

274

275

276

<div class="Footer">

277

<script type="text/javascript">

278

<!--

279

SetRelativePath("../../");

280

DrawFooter();

281

// -->

282

</script>

283

<noscript>

284

<p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>

285

</noscript>

286

</div>

287

288

289

</body>

290

</html>

Subversion Repositories – MLAB

(root)/Articles/HowTo/DOC2HTML.cs.html

Rev 276