Layout stránky

Ako sme si povedali, v tomto (piatom) a poslednom (šiestom) semestri bakalárskeho stupňa si spolu spravíme kompletnú jednoduchú skutočnú webstránku krok za krokom tak, ako to má v praxi vyzerať. Popri tom budeme aplikovať naše vedomosti, ktoré sme sa doteraz naučili a taktiež sa naučíme zopár nových, ktoré budeme pre našu stránku potrebovať. Keďže sme si povedali, že si ju spravíme krok za krokom, začneme návrhom jej celkovej štruktúry – formy. Myslí sa tým návrh dizajnovej kostry stránky, čiže z akých hlavných vizuálnych častí sa bude stránka skladať a aké budú veľké a kde budú umiestnené. Takéto rozvrhnutie sa v praxi nazýva slovom layout.

 

Poďme si to teda rozvrhnúť. Povedzme, že chceme stránku, ktorá bude klasicky orientovaná na výšku (jej šírka bude menšia ako výška). Keďže jej šírka bude vo väčšine menšia ako klasické rozlíšenie počítača, medzi okrajmi prehliadača a stránkou vznikne voľný priestor. Aby to nejako vyzeralo, stránka bude umiestnená v strede okna. Bude sa skladať z troch základných častí, na vrchu bude po celej šírke hlavička (header), v strede bude obsah (content) a na spodku bude pätička (footer). Tieto hlavné časti si budeme postupne napĺňať obsahom. Na začiatok si určíme pozadie pre každú takúto časť nejakou farbou, aby sme jednotlivé časti vedeli bez konkrétneho obsahu (obrázky, text...) rozlíšiť a taktiež si určíme natvrdo ich rozmery.

 

Poďme teda na to, v editore si vytvoríme nový projekt, nazvyme ho 5-Projekt2. Vytvorme v ňom zatiaľ prázdny súbor global.css, ktorý bude slúžiť na dizajn našej stránky a taktiež súbor index.php, do ktorého môžeme vložiť kód pre základnú štruktúru webstránky (doctype, head, body). Naša prvá úloha je spraviť jeden veľký div – obdĺžnik, ktorý by mal predstavovať akokeby celú našu webstránku (tri základné časti spojené dokopy) a musíme zabezpečiť, aby bol umiestnený v strede prehliadača. Keďže vieme, že div je blokový element a zaberá celú šírku, musíme mu zadať nejakú konkrétnu šírku, aby bol menší ako šírka prehliadača na štandardnom rozlíšení. Zadefinujeme mu šírku 900 pixelov, čo by malo dobre vyzerať aj na ešte často používanom (v tejto dobe už nízkom rozlíšení) 1024x768. Nastavíme mu aj nejaký výšku – povedzme 1400 pixelov a aj nejaké pozadie, aby sme videli, kde sa nachádza a aký veľký priestor zaberá. Toto všetko by sme zatiaľ zvládli, dostávame sa k problému, ako zabezpečíme, aby bol v strede a nie naľavo.

 

Čo sa týka určovania pozícií elementov, učili sme sa zarovnávať text (text-align) a taktiež elementy. Vieme prvky zarovnať konkrétne na danú pozíciu v okne prehliadača (fixed) alebo vzhľadom k nejakému elementu (absolute) a vieme ich zarovnať naľavo alebo napravo (float). Neukázali sme si možnosť, ako niečo zarovnať do stredu. Možno by vás napadlo, že to vieme spraviť pomocou vlastnosti margin, že by sme si zľava nastavili okraj tak, aby náš element bol v strede. Áno, je to jedna z možností, ale tá by mala význam iba v prípade, že by sme našu stránku robili konkrétne na jedno presné rozlíšenie. Lenže každý používateľ má iné rozlíšenie a tým pádom by aj naša stránka musela mať pre každého rôzne okraje. Musíme použiť niečo, čo by nám okraje zľava aj sprava nastavilo vždy tak, aby súčet šírky okrajov a našej stránky vyplnil celé okno prehliadača. Presne toto sa dá zabezpečiť pomocou hodnoty auto vlastnosti margin. Toto pravidlo zabezpečí, že element sa bude nachádzať vždy v strede svojho rodiča (nadradeného elementu), pretože prehliadač akokeby nastavil automaticky okraje rovnako na oboch stranách. Náš projekt 5-Projekt2 by mal vyzerať teraz takto:

 

index.php:

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="global.css">
    </head>

    <body>
        <div class="main">
        </div>

    </body>
</html>

 

global.css:

BODY{
    margin: 0;
}

.main{
    height: 1400px;
    width: 900px;
    margin: auto;
    background-color: #CCCCCC;
}

 

Všimnite si, že náš div sa skutočne nachádza v strede prehliadača. Platí to aj v momente, keď sa snažíte okno prehliadača zmenšovať, stále bude v strede, okraje sú nastavované prehliadačom automaticky. Všimnite si ešte v kóde CSS, že sme nastavili pravidlo margin: 0 elementu body. Tento element, ako už viete, predstavuje celú našu stránku. Dávnejšie sme si spomenuli, že niektoré prvky majú defaultne nastavený nejaký štýl, v tomto prípade má element body nastavený defaultne nejaké okraje. Skúste si túto vlastnosť dať preč a refreshnite si stránku. Medzi vrchom okna prehliadača pre stránku a našim elementom vznikne biely pás, ktorý predstavuje samotný okraj. Tým, že zadáme toto pravidlo, vlastnosť margin s hodnotou 0, prepíše to defaultné nastavenie pre element body. Hodnota 0 predsatvuje nič, 0 pixelov zo všetkých strán.

 

Keď sa nám už podarilo umiestniť hlavný div pre našu stránku do stredu prehliadača, poďme si v ňom zadefinovať tri základné časti pre stránku. Na začiatku budeme mať hlavičku stránky, v ktorej bude neskôr umiestnené nejaké logo a slogan stránky. Logo a slogan budú v podstate obrázky, ktoré budú mať stály (nemenný) rozmer. Nič iné nebude naša hlavička zatiaľ obsahovať, takže jej obsah nebude dynamický, to znamená, že sa nebude meniť (zväčšovať/zmenšovať). Tým pádom vieme dopredu, aký rozmer bude mať naša hlavička, resp. môžeme si ho natvrdo (konkrétne – priamo) zadať a určite nám to nespôsobí problémy, pretože si zadáme rozmery tak, aby sa nám všetko, čo tam plánujeme umiestniť, zmestilo. Určime si, že naša hlavička bude mať na výšku rozmer 150 pixelov, zadefinujeme jej aj inú farbu, aby sme videli jednotlivé sekcie.

 

Ďalej bude nasledovať div pre hlavný obsah stránky, ktorý bude umiestnený v strede (vertikálne), medzi hlavičkou a pätičkou. Táto časť stránky je vo väčšine jediná, ktorá sa na jednotlivých častiach stránky (podstránkach) mení. Zobrazuje obsah podľa toho, na akú položku sa v menu alebo niekde inde na stránke klikne. To znamená, že nevieme dopredu presne určiť, aký by mal byť jej rozmer, aby sa všetko jej obsah na výšku zmestil, jej obsah bude dynamický (menný). Je možné, že na jednej podstránke bude jej obsahom iba napríkald jednoriadkový text a na druhej podstránke bude taký text mať 200 riadkov. Aby to ako tak vyzeralo, môžeme si povedať, že chceme, aby to malo najmenej nejaký počet pixelov a ak sa obsah nezmestí, nech sa zväčší podľa toho, ako potrebujeme. Doteraz sme vlastnosti height zadávali iba presný počet pixelov. Existuje však aj príbuzná vlastnosť, ktorá má názov min-height (minimum height – minimálna výška). Táto vlastnosť zabezpečí presne to, čo potrebujeme. Zadaním hodnoty tejto vlastnosti určíme, akú chceme najmenšiu možnú výšku daného prvku, čiže ak zadáme napríklad 700 pixelov, tak tento prvok nebude na výšku nikdy menší. Ak však jeho obsah bude presahovať toto číslo, jeho výška sa zväčší dynamicky podľa jej obsahu. Presne takto to použijeme na náš div, ktorý bude predstavovať obsah našej stránky.

 

Na záver si podobne ako hlavičku umiestnime div pre footer našej stránky, ktorému tiež zadefinujeme odlišnú farbu a výšku nastavíme pevne na 200 pixelov, pretože obsah našej pätičky bude tiež nemenný:

 

index.php:

<body>
    <div class="main">
        <div class="header">
        </div>

        <div class="content">
        </div>

        <div class="footer">
        </div>
    </div>

</body>

 

global.css:

.main{
    width: 900px;
    margin: auto;
    background-color: #CCCCCC;
}

.header{
    height: 150px;
    background-color: #00FF00;
}

.content{
    min-height: 700px;
}

.footer{
    height: 200px;
    background-color: #000000;
}

 

Všimnite si, že hlavnému divu sme odstránili predchádzajúce nastavenie výšky. Už nie je potrebné, pretože sme doňho vložili nejaký obsah, ktorý už zaberá výšku (lebo má pevne nastavenú vlastnosť height), takže tento vonkajší div to automaticky roztiahne podľa jeho obsahu. Okrem toho si všimnite, že sme divu content nenastavili farbu. Na jeho pozadí sa však zobrazuje farba, ktorú má nastavenú jeho rodič – div main.

 

Ako posledné si všimnite postupnosť pravidiel v jazyku CSS. To, ako idú zaradom jednotlivé pravidlá nie je nutné dodržiavať, všimnite si ale, že najmä v predchádzajúcej ukážke sme použili akési zaužívané pravidlo, kde sa na začiatok snažíme dávať najdôležitejšie previdlá pre element. Na začiatku bývajú vo väčšine pravidlá, ktoré určujú jeho umiestnenie a rozmer, čiže pravidlá ako display, position, height, width, následne je dobré dávať pravidlá pre okraje padding a margin, potom textové pravidlá spolu (font-size, font-family, color...) a potom zbytok.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - global.css

BODY{
margin: 0;
}

.main{
width: 900px;
margin: auto;
background-color: #CCCCCC;
}

.header{
height: 150px;
background-color: #00FF00;
}

.content{
min-height: 700px;
}

.footer{
height: 200px;
background-color: #000000;
}

2 - index.php

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<div class="main">
<div class="header">
</div>

<div class="content">
</div>

<div class="footer">
</div>
</div>

</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

layoutsablonadizajnwebdizajnnavrh strankywebova stranka dizajnresponzivny dizajndizajn na stredzarovnanie na strednavrh css

IT ftip

Programátor na vojenskom cvičení. Na ostrých streľbách páli do terča ako divý, ale od terčov hlásia, že ani jeden zásah. Tak programátor strči palec do hlavne, vypáli a rana mu pochopiteľne urve palec. Kričí k cieľom: "Hej, odo mňa to ide dobre, chyba musí byť niekde u vás!"