Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 50 % zdarma při nákupu e-learningu. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

15. diel - Tvorba podstránok a kontaktný formulár

V minulej lekcii, Fixné menu a pozicovanie v CSS , sme dokončili layout, teda rozloženie stránky. V dnešnom HTML / CSS tutoriálu začneme dokončovať jednotlivé podsekcie nášho webu tak, aby bol pripravený na nahranie na webhosting.

Dnes sa nebudeme učiť nič nové, len dokončíme kontaktnú stránku. Podstránky domov, zručnosti a kontakt máme už rozpracované.

Odkazy v layoutu

Otvoríme si naposledy súbor rozlozeni.html a do navigačného menu pridáme odkazy na jednotlivé podstránky:

<ul>
    <li class="aktivni"><a href="index.html">Domů</a></li>
    <li><a href="omne.html">O mně</a></li>
    <li><a href="dovednosti.html">Dovednosti</a></li>
    <li><a href="reference.html">Reference</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
</ul>

Vytvorenie podstránok

Asi si kladiete otázku, akým spôsobom docielime to, aby sa všetky podstránky na našom webe zobrazovali v nami vytvorenom layoutu.

Rámca

V minulosti sa na tento účel využívali rámca (tag <frameset>), ktoré umožňovali layout definovať iba raz a podstránky sa zobrazovali v rámcoch. Tento spôsob však predstavoval veľa problémov najmä pre internetové vyhľadávače, preto boli rámca vo verzii HTML 5 odstránené a označené za nevalidný. V dnešnej dobe je veľkou chybou rámca používať.

Tabuľkový layout

Druhým spôsobom, bohužiaľ o nič šťastnejším, je použitie tabuľky k vytvoreniu layoutu. Tabuľka má totiž vo vykresľovaní buniek miernej odlišnosti a umožňuje vloženie riadkového rámu (

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 2995x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Fixné menu a pozicovanie v CSS
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Štýlovanie tabuliek a galérie fotiek v HTML a CSS
Článok pre vás napísal David Čápka
Avatar
Užívateľské hodnotenie:
1 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity