Prvotne by ste mali urobiť potrebné prípravy na vytvorenie webstránky. Vytvorte si požadovanú štruktúru adresárov. Môže to vyzerať napríklad takto:
danový poradca
---obrázky
---css
Toto je veľmi typická štruktúra adresárov. Na hlavnú úroveň sa umiestňujú HTML stránky. CSS súbory sú ukladané do adresára css-, zatiaľ čo všetky obrázky sa ukladajú do adresára images-. Do adresára images- teda pridajte všetky obrázky, ktoré ste predtým vyrezali z rozloženia.
Vytvorenie základnej kostry
V adresári css- si vytvorte nový CSS súbor. Následne tento súbor pripojte do vášho HTML súboru. (V mojom príklade bude mať HTML súbor názov index.html). Tento súbor je teraz stredobodom nasledujúcich návodov.
Najprv pridajte do index.html už známu základnú HTML kostru.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Váš daňový poradca</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Okrem toho uistite sa, že okamžite pridáte aj súbor so štýlmi. A teraz môžeme začať.
Vnútorným prvkom je kontajner div.
<div class="main-container"> </div>
Tento kontajner môžete okamžite formátovať pomocou syntaxe CSS.
.main-container {
width: 100%;
float: left;
}
Hlavný kontajner bude mať šírku 100 percent a bude zarovnaný vľavo. Výhoda šírky nastavenej na 100 percent: môžete napríklad pridať obrázok pozadia s farbou. Toto pozadie potom bude pokrývať celú šírku obrazovky.
Vytvorím ešte dva ďalšie prvky div vnútri hlavného kontajnera.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Aj tieto prvky sa budú formátovať. Samotná oblasť obsahu dostane šírku 1000 pixelov. S určením margin: 0px auto; sa taktiež dosiahne horizontálne zarovnanie prvku.
.container {
width: 1000px;
margin: 0px auto;
}
Pokračujeme formátovaním prvku page.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Tento prvok je skutočnou oblasťou obsahu stránky. Sem budú umiestnené všetky ďalšie prvky. Aj tento prvok získa pevnú šírku 1000 pixelov. Angažovaním padding sa definujú vnútorné okraje. Horná vnútorná medzera je 40 pixelov, ostatné okraje majú hodnotu 0 pixelov.
Takto sme už (veľmi) hrubú štruktúru rozloženia vytvorili.
Teraz prichádza na rad naplniť túto štruktúru obsahom. Stránka sa najprv rozdelí na tri riadky.
• Hlavička
• Obsah
• Päta
Na to budú definované tri ďalšie oblasti div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Aj tieto tri oblasti budú samozrejme opäť formátované pomocou CSS.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Teraz môžete pokračovať vo formátovaní jednotlivých oblastí.
Začneme s hlavičkovou časťou stránky. Tá sa opäť skladá z niekoľkých prvkov:
• Logo/Názov
• Horné menu
• Veľký obrázok
Tieto tri prvky budú definované vnútri top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Váš daňový poradca</h1> </div> <div class="topmenu"> Vrchné menu </div> <div class="header-img"> </div> </div>
To je základná štruktúra hlavičky stránky. Aj táto časť bude teraz opäť formátovaná pomocou CSS.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
Syntax obsahuje dve "špecifikácie". Najprv sa pozrite na obsah triedy topmenu. Tu si všimneme dve údaje o pozadí.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Odvíjané je jednopixelové obrázok menue.jpg. Ten reprezentuje známe farebné prechody v hornej ponuke. S príkazom background-repeat: repeat-x; sa obrázok vodorovne opakuje až dovtedy, kým nie je prvok úplne vyplnený.
Rozdelenie obsahu
Pokračujeme s oblasťou stránky, kde sa nakoniec zobrazia obsahy. To sa deje v rámci elementu div s názvom content. Táto oblasť je rozdelená do rôznych prvkov. Najprv je tu malý teaserový obrázok a uvítací pozdrav.
Príslušná HTML syntax je nasledovná:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Vitajte na našich stránkach</h1> <p>Tu nasleduje uvítací text</p> </div> </div>
Táto oblasť je taktiež rozdelená na dve časti. Vľavo je zobrazený obrázok, vpravo vedľa je uvítací pozdrav. Podstatná je pri tom trieda content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Táto trieda obklopuje obrázok a pozdrav. V rámci content-image sú ďalšie dva prvky.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Vitajte</div>
Ak chcete miesto takého rozdelenia zobraziť len veľký obrázok alebo niečo iné, zlúčte tieto dve časti do jedného prvku div. CSS syntax pre variant s dvoma prvkami vyzerá nasledovne:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Výsledok by sa v prehliadači teraz mal zobraziť nasledovne:
Pokračujeme s tromi ďalšími prvkami:
• ľavý textbox,
• pravý textbox,
• pravé menu.
HTML syntax v tomto prípade vyzerá nasledovne:
<div class="teaser"> <div class="left"> Obsah pre ľavú stranu </div> <div class="right"> Obsah pre pravú stranu </div> </div> </div> <div class="content-right"> Pravé menu </div> </div>
A samozrejme aj tu CSS syntax:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Na konci tohto tutorialu je základná štruktúra nášho webu.
Túto základnú štruktúru teraz treba samozrejme naplniť príslušnými obsahmi. To sa stane v ďalšom tutoriale.
