Jak na HTML 3-volba layout - Počítačový koutek při ZŠ Vl. Menšíka

Transkript

Poèítaèový koutek pøi Z© Vl. Men¹íka Ivanèice
Jak na HTML 3-volba layout
Pøíspìvek pøidal Mgr. Pavel Procházka
Po zdlouhavém úvodu se koneènì dostáváme k obsahu stránky. Vìt¹ina dnes zmiòovaných postupù se tedy týká znaèek
<body>a</body>.
Pro správné pochopení èlánku jsou nutné tyto znalosti:
- struktura HTML souboru
- tvorba tabulek
- základy CSS
Vìèným problémem je rozhodnutí mezi tabulkovým a &bdquo;netabulkový“ layoutem.
Co je to ten layout. Layout je zpùsob rozmístìní jednotlivých prvkù (logo, menu, hlavièka, patièka a text) na internetové
stránce tak, aby bylo pro u¾ivatele snadno èitelné. Jedná se tedy o velmi podstatný problém, který musí øe¹it webdesigner
hned v poèátcích.
Jaké jsou mo¾nosti?
Dnes ji¾ zastaralou mo¾ností je pou¾ití tzv. rámcového zpùsobu rozvr¾ení stránky. Ka¾dá èást stránky (menu, text, logo...)
byla prezentována vlastním html souborem. Nevýhody tohoto zpùsobu jsou následující. Rada vyhledávaèù zaøadí do své
databáze pouze link na stránku s textem a nikoliv na øídící soubor. U¾ivatel pak ztrácí mo¾nost navigace. Jinou
nepøíjemností je slo¾itost tisku takovýchto stránek a celková nepøehlednost. Osobnì tento zpùsob nedoporuèuji.
Dal¹í variantou je tvorba vzhledu pomocí tabulek. V souèasné dobì jsou webdesigneri rozdìleni na dva tábory. První nedá
na tabulky dopustit a druhá je podporuje beztabulkový vzhled. Trochu z historie. Pou¾ití tabulek je snad tak staré jako
HTML samo. Døíve bylo toti¾ jedinou mo¾ností zápisù dvou textu vedle sebe právì pomocí tabulek. I dnes má vyu¾ití tabulek
své výhody. Hlavnì se jedná o pomìrnou jednoduchost kódu. Na druhé stranì mù¾e u rozsáhlých stránek vest ke
zpomalování jejího zobrazení.
Poslední nejmlad¹í varianta je beztabulkový layout, který obsahuje znaènì ménì kódu, jeho pøenos a zobrazení je tedy rychlej¹í.
Také umo¾òuje oddìlení obsahu od formy. Tedy vzhled stránky není souèástí jejího obsahu Proti jeho pou¾ití hovoøí rozdílné
zobrazování v rùzných prohlí¾eèích. Nicménì správným zápisem se dá tato nevýhoda do velké míry eliminovat.
Co si tedy vybrat?
V tomto pøípadì je ka¾dá rada drahá. Pou¾ití layoutù je velice módní a také validní zpùsob tvorby stránek, naproti tomu i
tabulky mají pro svou pøehlednost své výhody.
Pojïme se podívat na nìkolik pøípadù.Tvorba layout pomocí tabulek
ukázka
<html>
<head>
http://www.pocitacovykoutek4.webzdarma.cz
_PDF_POWERED
_PDF_GENERATED 12 October, 2016, 21:51
<title>Layout tvoøený pomocí tøí tabulek</title>
</head>
<body>
<table width="100%" cellpadding="0px" cellspacing="0px" border="0px"><tr><td bgcolor="orange">Nadpis stránky</td>
</tr>
</table>
<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr><td bgcolor="blue" width="130px" valign="top">levé menu tlaèítko 1</br>levé menu tlaèítko 2</br>
levé menu tlaèítko 3</br>
</td>
<td bgcolor="red">
hlavní text,hlavní text,hlavní text,hlavní text,hlavní text,hlavní text,hlavní text.
</td>
</tr>
</table>
<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr><td bgcolor="pink" align="center">Patièka stránky(copyright apod.)</td></tr>
</table>
</body>
</html>
V tomto pøípadì je vzhled tvoøen pomocí tøí tabulek. První tvoøí hlavièku (obsahuje pouze jeden øádek a jedu buòku), druhá
pak slou¾í k øízení vzhledu menu a oblasti pro hlavní text a tøetí pak pro patièku. Problémem tohoto uspoøádání mohou být
návaznosti obrázkù (rùzné grafiky) mezi jednotlivými tabulkami. V tomto pøípadì jsem nastavil nulové mezery mezi
jednotlivými buòkami (cellpadding="0px" cellspacing="0px") a také nulové orámování (border="0px").
Beztabulkový layout
ukázka
<html>
<head>
<title>Beztabulkový layout</title>
</head>
<body>
<style>
_PDF_POWERED
#main{
background: blue;
width: 100%;
}
#hlavicka{
background: orange;
}
#menu{
background: blue;
width: 130px;
}
#text{
background: red;
margin:-76px 0 0 130px
}
#paticka{
background: pink;
text-align: center;
}
</style>
<div id='main'>
<div id='hlavicka'>
Nadpis stránky
</div>
<div id='menu'>
</div>
<div id='text'>
hlavní text,hlavní text,hlavní text,hlavní text,hlavní text,hlavní text,hlavní text.
_PDF_POWERED
</div>
<div id='paticka'>
Patièka stránky(copyright apod.)
</div>
</div>
</body>
</html>
Toto uspoøádání je na první pohled slo¾itìj¹í, ale má svá pravidla. Na poèátku dokumentu pøibyla definice stylu (mù¾eme
být i v externím souboru). Pomocí nich urèuje pøesnou pozici neviditelných rámeèkù (divù). Tyto mohou obsahovat dal¹í text,
obrázky atp. V¹imnìme si, ¾e je celá stránka je obalena divem main. Ten urèuje celkovou ¹íøku v¹ech ostatních podøízených
divù. Hlavièka, menu, text a patièka jsou si pak rovni. V¹imnìme si definice stylu u divu text (margin:-76px 0 0 130px), ten
øíká, ¾e tento div má být posunut o 76 pixelù nahoru a o 130 pixelù vpravo. Tímto zpùsobem dosáhneme zobrazení
hlavního pole s textem vlevo vedle menu.
Jaká varianta je lep¹í?
Tì¾ko øíct obì mají své kouzlo. Pou¾ití beztabulkového layoutu je velmi moderní, nicménì né stejnì podporováno u v¹ech
prohlí¾eèù. Tabulkový layout mù¾e být v nìkterých pøípadech slo¾itìji programovatelný a tedy i nároènìj¹í na hardware u¾ivate
si pøeje stránku zobrazit.
V pøípadì, ¾e si nejste jisti v tvorbì css stylù, pak radìji zùstaòte u tabulek. Jinak doporuèuji pou¾ívat ji¾ odzkou¹ených layoutù,
které si pak upravíte podle svých potøeb. Jednou z mnoha mo¾ností je http://css.interval.cz/, kde je celá ¹kála rùzných
vzhledù stránek.
_PDF_POWERED

Jak na HTML 3-volba layout - Počítačový koutek při ZŠ Vl. Menšíka

Transkript

Podobné dokumenty

Vysoká škola ekonomická v Praze Řízení

článku z Praktické elektroniky (PDF, 2

Úprava veřejných prostranství -Jevišovice

Značky HTML

CSS Blokový model

zde - naprameni.cz

číslo 1/2015 - Sdružení hornických odborů (SHO)

Soutěž Alenka v říši divů

2 Tiskněte tlačítko

NetVision - SoftLink