CSS - 4. Tvorba stránky

4.1 ⋅ Čo je layout a prečo práve pomocou CSS
4.2 ⋅ Tvorba layoutu
   4.2.1 ⋅ Úvod
   4.2.2 ⋅ Kontajner
   4.2.3 ⋅ Hlava
   4.2.4 ⋅ Menu
   4.2.5 ⋅ Textbox
   4.2.6 ⋅ Reklama
   4.2.7 ⋅ Textbox bez odsadenia
   4.2.8 ⋅ Päta
4.3 ⋅ Záver

Čo je layout a prečo práve pomocou CSS

Layout je rozloženie základných prvkov stránky s blokovým charakterom. Medzi zložky layoutu patria napríklad hlava, menu alebo päta. Pre začiatočníkov je najlepším štartom jednostĺpcový layout s horizontálnym menu, téma tejto lekcie.

Výhody CSS layoutu:

Ide o najmodernejšiu technológiu, ktorá pri správnom písaní kódu spĺňa všetky najnovšie pravidlá validity či prístupnosti. Navyše tvorba pomocou CSS je častokrát omnoho jednoduchšia ako pomocou tabuliek.
Užívateľom s pomalým pripojením (dnes menšine) sa stránka zobrazí rýchlejšie, pretože tabuľka sa vykreslí až po jej úplnom načítaní, kdežto CSS sa zobrazuje postupne (podľa miery načítania).
Rámy (frames) sú dnes prežitok. Jednoducho ide o extrémne zastaralú technológiu, ktorá sa už na moderných weboch nepoužíva. Ani pre užívateľa nemusí byť práve príjemné, keď je portál rozkúskovaný na množstvo vnorených HTML súborov.

Na druhú stranu, najmä sporu CSS vs. tabuľky sa dnes venuje veľa pozornosti. Mnoho ľudí zastáva názor, že pre veľké biznisové/portálové projekty sa viac hodí tabuľkový layout (viď napr. Vyvojar.cz). Naopak, nová verzia portálu Programujte.com je vytvorená pomocou CSS layoutu. Víťaz v takomto prípade nie je úplne jasný, no ja sa viac prikláňam ku technológii CSS. Obraz si môžete vytvoriť sami po dlhodobom používaní obidvoch techník, nie je však celkom nereálne, že do niekoľkých rokov tabuľky úplne „zomrú“.

Tvorba layoutu

Náš layout teda bude pozostávať z jedného stĺpca, bude mať horizontálne menu a bude zarovnaný nastred. Všetky tieto prvky však musí spájať jeden veľký, neviditeľný blok nazývaný kontajner. Ak chceme celú stránku vycentrovať, vycentrujeme len kontajner, pretože všetky ostatné súčasti stránky sa nachádzajú v ňom (teda sa zarovnajú do stredu spolu s ním).

Začíname s tvorbou. Vytvorte si XHTML 1.0/1.1 dokument aj s body tagmi nazvaný index.html a s odkazom na CSS súbor style.css. Namiesto bezduchého kopírovania viac rozmýšľajte, prečítajte si jeden blok článku, zamyslite sa nad ním. Ak usúdite, že ste pochopili, o čom je v bloku písané, prejdite na ďalší.

Úvod

Ešte pred vytvorením kontajnera treba definovať niektoré nastavenia stránky samotnej. Vložte preto do CSS súboru tento kód:

body {
  background-color: #dbe2ee;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

font-family = rodina fontov, ktoré majú byť použité na stránke – najčastejšie sa vyberajú bezpätkové, kvôli lepšej čitateľnosti; v tomto prípade prehliadač vyhľadá na počítači font Arial a následne ho použije na vykreslenie stránky; ak ho na počítači nenájde, vyhľadá Helveticu a ak nenájde ani tú, vypíše text defaultným bezpätkovým písmom (univerzálne označenie sans-serif)
font-size = veľkosť textu na stránke, pre lepšiu čitateľnosť voľte 16px, pre decentnejšie technické písmo napríklad 12-14px

Kontajner

Je to neviditeľný blok, vo vnútri ktorého sa nachádzajú ostatné prvky stránky. Teda náš web drží pohromade a zároveň mu dáva niektoré základné vlastnosti. Vytvoríme si #kontajner (ID, keďže ho použijeme len raz) a nastavíme mu šírku + zarovnanie:

#kontajner {
  margin: 0 auto;
  width: 1000px;
}

margin = udáva pozíciu od (aj neviditeľného) rámu objektu smerom von, teda priestor okolo objektu; zápis margin: 3px odsadí objekt od iného o 3px zo všetkých strán, zápis margin-top: 3px odsadí objekt od iného o 3px iba zvrchu; poznáme aj margin-bottom, margin-left a margin-right; prípadne môžeme použiť zápis margin: t r b l
margin: 0 auto = špeciálny zápis margin, ktorý sa používa najmä v kombinácii s kontajnerom; zabezpečí, že kontajner bude na stránke vycentrovaný
width = určuje šírku objektu; v tomto prípade chceme, aby mal kontajner šírku 1 000 pixelov (normalizujeme stránku pre rozlíšenie 1024×768)

Priamo medzi tagy body pridajte:

<div id="kontajner">
</div>

Hlava

Po vytvorení kontajneru môžeme pokračovať s hlavou. Tá už bude mať viditeľný rám (border) a pevne nastavenú výšku aj odsadenie:

#hlava {
  border: 1px solid #6f90ba;
  height: 60px;
  margin-top: 20px;
  width: 100%;
}

border = nastavuje rám objektu; zapisuje sa v tvare border: šírka štýl farba, ale takisto môžeme jednotlivé vlastnosti oddeliť na border-width, border-style a border-color; najčastejšie používané hodnoty pre border-style sú solid, dotted a dashed
height = nastavuje výšku objektu
margin-top: 20px = pomocou tohto zápisu dosiahneme, že hlava bude od vrchného okraju kontajneru zarovnaná o 20 pixelov nižšie; neskôr, po dokončení layoutu, si skúste túto hodnotu nastaviť na 0px a uvidíte rozdiel
width: 100% = týmto zápisom sme objektu udali, že bude mať šírku veľkosti 100 % kontajnera, teda prakticky rovnakú ako kontajner. Hoci by sme mohli hodnotu zadať pomocou pixelov, vnútri kontajneru sa pre šírku doporučuje používať percentuálny zápis – ale to je len na vás

Nasledujúce súčasti kódu pre XHTML dokument vkladajte priamo do divu kontajner:

<div id="hlava">
  bicie
</div>

Textbox

Textboxy budú na našej stránke dva a budú oddelené prúžkom pre reklamu. Tento je prvý, vrchný:

#text {
  border: 1px solid #6f90ba;
  min-height: 200px;
  margin-top: 10px;
  width: 100%;
}

min-height: 200px = definovali sme, že aj keď sa v textboxe budú nachádzať dve nerozvité vety (sotva plný riadok), vždy bude vysoký 200 pixelov a túto výšku prekročí iba k väčšiemu; chceme predsa, aby mal náš web nejakú formu

<div id="text">
  gitara
</div>

Reklama

Panel pre reklamu, či už AdSense-like alebo bannerovú, bude vysoký 60 pixelov a nebude odsadený o 10 pixelov ako ostatné bloky:

#reklama {
  border: 1px solid #6f90ba;
  border-top: none;
  height: 60px;
  width: 100%;
}

border-top: none = keďže obidva „zlepené“ prvky (textbox aj reklama) majú plný border, na mieste stretu by vznikol väčší, dvojpixelový rám; preto nastavíme reklame, aby mala border všade, len nie hore

<div id="reklama">
  basa 
</div>

Textbox bez odsadenia

Prečo bez odsadenia? Lebo aj on bude nalepený, podobne ako reklama na textbox. Myslím, že v tomto bode vašich vedomostí už nie je viac čo vysvetľovať:

#text-bez-odsadenia {
  border: 1px solid #6f90ba;
  border-top: none;
  min-height: 200px;
  width: 100%;
}

<div id="text-bez-odsadenia"> 
  klávesy 
</div>

Päta

Pre webdizajnérov najobľúbenejšia pasáž „programovania“, ich pätnásť minút slávy…

#pata {
  border: 1px solid #6f90ba;
  height: 20px;
  margin-top: 10px;
  width: 100%;
}

<div id="pata"> 
  trúbka 
</div>

Záver

Dokopy by váš kód mal vyzerať takto:

body {
  background-color: #dbe2ee;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
#kontajner {
  margin: 0 auto;
  width: 1000px;
}
#hlava {
  border: 1px solid #6f90ba;
  height: 60px;
  margin-top: 20px;
  width: 100%;
}
#menu {
  border: 1px solid #6f90ba;
  height: 20px;
  margin: 10px auto;
  width: 80%;
}
#text {
  border: 1px solid #6f90ba;
  min-height: 200px;
  margin-top: 10px;
  width: 100%;
}
#reklama {
  border: 1px solid #6f90ba;
  border-top: none;
  height: 60px;
  width: 100%;
}
#text-bez-odsadenia {
  border: 1px solid #6f90ba;
  border-top: none;
  min-height: 200px;
  width: 100%;
}
#pata {
  border: 1px solid #6f90ba;
  height: 20px;
  margin-top: 10px;
  width: 100%;
}

A XHTML dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
 
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>Názov vašej stránky</title>  
 </head>
 
<body>
  
  <div id="kontajner">
  
  <div id="hlava">
    bicie
  </div>
  
  <div id="menu">
    spev
  </div>
  
  <div id="text">
    gitara
  </div>
  
  <div id="reklama">
    basa
  </div>
  
  <div id="text-bez-odsadenia">
    klávesy
  </div>
  
  <div id="pata">
    trúbka
  </div>

  </div>
       
 </body>

</html>

S novou funkciou portálu si môžete pozrieť výsledok priamo tu na Programujte. Týmto vám chcem pogratulovať, úspešne ste vytvorili váš prvý CSS layout. Predpokladám, že všetko je vysvetlené zrozumiteľne, no ak by ste predsa niečomu nerozumeli, napíšte do komentárov…

V ďalších častiach:

Vytvorenie základnej grafiky
Pridanie niektorých špeciálnych prvkov
Zdokonalenie kódu (majú byť textboxy naozaj divy?)

Článok bol upravený 10.12.2007, vďaka vašim postrehom a návrhom. Pridajte komentár a zvýšte úroveň tohto portálu!

Článok bol opäť upravený 29.12.2007, ďakujem užívateľovi m.a.d.d.o.x.

CSS - 4. Tvorba stránky – Layout (1/3)

Programátoři po celém světě dnes slaví Den programátorů
Celá zprávička