WebSVN – MLAB – Rev 996 – Blame – /Articles/HowTo/DOC2HTML/DOC/HTML/DOC2HTML.cs.html

996

miho

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.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="StyleSheet" href="../../../../../Web/CSS/MLAB_Print.css" type="text/css" media="print">

11

<link rel="shortcut icon" type="image/x-icon" href="../../../../../Web/PIC/MLAB.ico">

12

<script type="text/javascript" src="../../../../../Web/JS/MLAB_Menu.js"></script>

13

14

</head>

15

16

<body lang="cs">

17

18

19

20

<div class="Header">

21

<script type="text/javascript">

22

<!--

23

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

24

DrawHeader();

25

// -->

26

</script>

27

<noscript>

28

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

29

</noscript>

30

</div>

31

32

33

34

35

<div class="Menu">

36

<script type="text/javascript">

37

<!--

38

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

39

DrawMenu();

40

// -->

41

</script>

42

<noscript>

43

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

44

</noscript>

45

</div>

46

47

48

49

<div class="Text">

50

<p class="Title">

51

Převod DOC na HTML

52

</p>

53

<p class=Autor>

54

Milan Horkel

55

</p>

56

<p class="Subtitle">

57

Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protože

58

kvalita podkladu obvykle není dostatečná. Proces převodu lze však celkem

59

úspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce.

60

Podstatou převodu je odstranění všech formátovacích značek a vyčištění

61

kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových

62

stylů.

63

</p>

64

65

<p class="Remark">

66

Stránka vzniká jak konvertuji další stránky do HTML.

67

</p>

68

69

<h1> Úvodem </h1>

70

71

<p>

72

Základním problémem převodu je to, že program Word umožňuje uživateli

73

vkládat do textu spustu formátovacích povelů, které pak nejsou viditelné

74

a v programu Word se tedy ani nedají odstranit. Bohužel nelze uživatele

75

omezit pouze na elementy definované v šabloně dokumentu a ani nelze

76

nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.

77

</p>

78

79

<p>

80

Druhý problém vzniká tím, že uživatelé používají Word nejen jako editor

81

ale i jako lámací program (protože potřebují aby se výsledek vytiskl dle

82

jejich představ). Tak se do dokumentu dostávají různé fixní mezery,

83

lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentu

84

těchto speciálností jen pár a není problém je odstranit.

85

Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykle

86

umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou

87

obtížné.

88

</p>

89

90

<p>

91

Základem úspěchu je použití jednoduché šablony, příliš neformátovat

92

dokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokonce

93

tabulkami v tabulkách).

94

</p>

95

96

<h1> Export dat z programu Word </h1>

97

98

<p>

99

Cílem tohoto kroku je získat hrubá HTML data stránky.

100

</p>

101

102

<ul>

103

<li> Otevřít dokument v programu Word </li>

104

<li> Uložit jako zjednodušený HTML </li>

105

<li> Zavřít Word </li>

106

</ul>

107

108

<p>

109

Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html

110

(lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML

111

příslušného projektu/modulu.

112

</p>

113

114

<h1> Automatická filtrace značek </h1>

115

116

<p>

117

Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslů

118

ale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní se

119

skoro všechny formátovací značky a styl.

120

</p>

121

122

<ul>

123

<li> Spustíme HTML Compress </li>

124

<li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li>

125

<li> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li>

126

        <li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</i> </li>

127

<li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li>

128

<li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li>

129

</ul>

130

131

<p>

132

Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor je

133

třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.

134

Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze

135

dokumentu (pokud jste si to v programu nevypnuli).

136

</p>

137

138

<p>

139

Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle

140

bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.

141

Soubor <i>MLAB.hce</i> leží zde

142

<a href="../../../../../Library/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">MLAB.hce</a>.

143

</p>

144

145

<p>

146

Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele.

147

Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ).

148

</p>

149

150

<h1> Manuální úklid kódu </h1>

151

152

<h2> Formátování kódu </h2>

153

154

<p>

155

Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo.

156

Současně se automaticky vytvoří pomocné lokální styly, které pak půjdou

157

snadno zahodit. V tomto kroku přejme na kódování UTF-8.

158

</p>

159

160

<ul>

161

<li> Spustíme editor PSPad a otevřeme soubor </li>

162

<li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li>

163

<li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li>

164

<li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li>

165

<li> Uložíme funkcí <i>Soubor/Uložit</i> </li>

166

</ul>

167

168

<h2> Použití šablony stránky </h2>

169

170

<p>

171

Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy

172

například soubor <i>Template.cs.html</i> a provedeme následující úpravy:

173

</p>

174

175

<ul>

176

<li> Vyplníme název stránky v položce <i>title</i> </li>

177

<li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li>

178

<li> Vyplníme popis stránky v položce <i>meta name="description"</i> </li>

179

<li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li>

180

<li> Přendáme název stránky do značky <i>p class="Title"</i> </li>

181

<li> Přendáme jméno autora do značky <i>p class=Autor</i> </li>

182

<li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li>

183

<li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</i> </li>

184

<li> Opravíme odkaz na PDF verzi dokumentu </li>

185

<li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li>

186

</ul>

187

188

<p>

189

Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku,

190

patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jej

191

nesmazali) by měl taky fungovat.

192

</p>

193

194

<h2> Mauální úpravy </h2>

195

196

<p>

197

Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se

198

čte zdroják. Někdy je vhodné přesunout některé bloky na jiné místo

199

(například pokud byly schémata z důvodu rozvržení tisku umístěny na

200

jiném místě než text, který se k nim vztahuje).

201

</p>

202

203

<h3> Opravy nadpisů <i>h</i> </h3>

204

205

<p>

206

Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou

207

samostatně na řádce.

208

</p>

209

210

<samp class="Block"><h1> Nadpis </h1></samp>

211

212

<p>

213

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

214

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

215

</p>

216

217

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

218

219

<p>

220

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

221

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

222

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

223

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

224

</p>

225

226

<samp class="Block"><p>

227

Běžný text odstavce se <i><i>zvýrazněným textem</i></i> uvnitř.

228

</p></samp>

229

230

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

231

232

<p>

233

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

234

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

235

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

236

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

237

typicky <i>b</i>. Toto dodatečné formátování by se mělo odstarnit.

238

</p>

239

240

<p>

241

Tabulka by měla mít strukturu

242

</p>

243

244

<ul>

245

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

246

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

247

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

248

</ul>

249

250

<samp class="Block"><table>

251

<tr>

252

<th> <i>Popisek 1</i> </th>

253

<th> <i>Popisek 2</i> </th>

254

</tr>

255

<tr>

256

<td> Buňka 1 </td>

257

<td> Buňka 2 </td>

258

</tr>

259

<tr>

260

<td colspan="2"> Spojená buňka 3 a 4 </td>

261

</tr>

262

</table></samp>

263

<table class="Samp">

264

<tr>

265

<th> Popisek 1 </th>

266

<th> Popisek 2 </th>

267

</tr>

268

<tr>

269

<td> Buňka 1 </td>

270

<td> Buňka 2 </td>

271

</tr>

272

<tr>

273

<td colspan="2"> Spojená buňka 3 a 4 </td>

274

</tr>

275

</table>

276

277

<p>

278

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

279

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

280

</p>

281

282

<p>

283

Pro změnu chování se dají použít příslušné atributy <i>class</i>,

284

například <i>class="Center"</i>. Viz návod k použití kaskádového stylu.

285

</p>

286

287

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

288

289

<p>

290

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

291

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

292

odstraníme.

293

</p>

294

295

<p>

296

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

297

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

298

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

299

</p>

300

301

<p>

302

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

303

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

304

</p>

305

306

<samp class="Block"><table class="Soupiska">

307

<tr>

308

<th> <i>Reference</i> </th>

309

<th> <i>Hodnota</i> </th>

310

</tr>

311

<tr>

312

<th colspan="2"> Odpory </th>

313

</tr>

314

<tr>

315

<td> R1 </td>

316

<td> 10k </td>

317

</tr>

318

</table></samp>

319

<table class="Soupiska Samp">

320

<tr>

321

<th> Reference </th>

322

<th> Hodnota </th>

323

</tr>

324

<tr>

325

<th colspan="2"> Odpory </th>

326

</tr>

327

<tr>

328

<td> R1 </td>

329

<td> 10k </td>

330

</tr>

331

</table>

332

333

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

334

335

<p>

336

Nejprve přejemenujeme adresář s obrázky na jméno <i>Pictures</i>.

337

Původní název je totožný se jménem stránky a bývá velmi dlouhý.

338

</p>

339

340

<p>

341

Obrázek musí mít tyto atributy:

342

</p>

343

344

<ul>

345

<li> <i>width</i> určuje šířku obrázku (v pixelech) </li>

346

<li> <i>height</i> určuje výšku obrázku (v pixelech) </li>

347

<li> <i>src</i> určuje cestu k obrázku </li>

348

<li> <i>alt</i> určuje alternativní text k obrázku (povinné!) </li>

349

</ul>

350

351

<p>

352

Například:

353

</p>

354

<samp class="Block"><img width=228 height=160 src="Pictures/image002.jpg"

355

alt="Alternativní popis"></samp>

356

357

<p>

358

359

<h4> Obrázky s popiskami </h4>

360

361

<p>

362

Obrázky s popiskami vnikají tak, že se v editoru (Word) vloží obrázek

363

a ten se opatří textovými poli s ukazateli. Výsledný HTML kód pak

364

obsahuje obrázek a přes něj tabulku s přesně danými rozměry a v této

365

tabulce jsou umístěny (jen v některých buňkách) dílčí obrázky.

366

</p>

367

368

<p>

369

Princip položení vektorové grafiky přes JPG obrázek není v zásadě

370

chybný ale nežádoucí je to, že jsou dílčí obrázky umístěny v tabulce.

371

Řešení spočívá v tom, že se odstraní tabulka a ponechají se jen obrázky

372

a do dokumentu (těsně před značku <i>/head</i>) se doplní styl pro

373

individuální umístění jednotlivých dílčích vetorových obrázků.

374

Souřadnice se sice dají spočítat ale je snazší doladit je dle

375

zobrazeného výsledku.

376

</p>

377

378

<p>

379

Takhle bude vypadat příslušný kousek lokálního stylu. Zvýrazněné jsou

380

posunutí dílčích obrázků proti hlavnímu obrázku:

381

</p>

382

383

<samp class="Block"><style type="text/css">

384

img.<i>Pic1</i> {position:absolute;margin-left:<i>230px</i>;margin-top:<i>10px</i>; }

385

img.<i>Pic2</i> {position:absolute;margin-left:<i>322px</i>;margin-top:<i>160px</i>; }

386

</style></samp>

387

388

<p>

389

A takhle pak bude v textu umístěn obrázek se dvěma vektorovými obrázky

390

umístěnými nad ním:

391

</p>

392

393

<samp class="Block"><p>

394

395

<img class="<i>Pic1</i>" width="331" height="123" src="Pictures/image001.gif"

396

alt="Vektorový popisek 1">

397

<img class="<i>Pic2</i>" width="243" height="101" src="Pictures/image002.gif"

398

alt="Vektorový popisek 2">

399

400

<img width="605" height="454" src="Pictures/MainPicture.jpg"

401

alt="Obrázek s popiskami">

402

</p></samp>

403

404

</div>

405

406

407

408

<div class="Footer">

409

<script type="text/javascript">

410

<!--

411

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

412

DrawFooter();

413

// -->

414

</script>

415

<noscript>

416

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

417

</noscript>

418

</div>

419

420

421

</body>

422

</html>

Subversion Repositories – MLAB

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

Rev 996