P6 - plovoucí obsah

Stránky mají určité rozložení prvků - layout.

- Rámy - frame - v minulosti - jsou nevalidní
- div s iframe - Navigace v podobě svislého/vodorovného menu s odkazy a proměnným iframe v hlavní vrstvě (viz minulý úkol "Rok na vsi"
- web 2.0 - hlavička (s navigací), obsah, patička. (+postranní panel napravo) Každá stránka na webu má toto stejné rozložení, tedy obsahuje hlavičku header (neplést si head a header - v češtině stejný výraz hlavička - header je část body), navigaci a patičku. Jen v obsahu článku se od sebe stránky odlišují. Layout se vytvoří tak, že do HTML vložíme elementy pro různé části webu a ty poté nastylujeme pomocí CSS tak, aby byly umístěné jak chceme.

Tělo stránky <body> rozdělíme na části:

Hlavička článku stránky např. s navigací, logem,...

</header>
<section>

Obsah

</section>
<footer>

Patička např. s kontaktem,...

</footer>
</article>
</body>

Zastylujeme každou část.

Úkol použij web rok a uprav jej

Zkopírujte si poslední verzi webu rok (bez indexu "rok na vsi" a aktualit) do nové složky a přejmenujte složku na rok-vodorovne.

Budeme tedy potřebovat již hotové soubory:

Textury pozadi budeme vytvářet, viz níže, a budeme upravovat jednotlivé *.html soubory a zároveň vytvářet nový stylopis rok-vodorovne.css (barevnost si můžete samozřejmě upravit podle své fantazie - jen prosím nic do signálních barev)

Texty do souboru rok použijeme ze souboru ovsi z minulého úkolu (nebo si je vymyslíme) - jen aby nebyl obsah prázdný.

pozadí - textura

Na pozadí lze použít kromě barvy také texturu = obrázek, kterou si lze i vygenerovat např na:

http://www.noisetexturegenerator.com/

stažený soubor uložíme do složky obr webu. zapamatujeme si i barvu, ze které se generovala - její kód:

např. #caeb70 byl vygenerován tento obrázek - původní číslo barvy využijeme v background:

Takže upravíme css soubor:

Body{

background: url(obr/pozadi2.png) #caeb70;

}

Soubor rok.html

V souboru rok.html doplníme texty o vsi Lhota ze souboru z minulé úlohy ves.html, rozdělíme tělo:

<body>

obrázek, tabulka s odkazy

</header>

text o vsi Lhota

</section>

</article>

</footer>

</body>

A vše zastylujeme: nové tagy header, section a footer u každého nastavíme ve stylopise požadované vlastnosti - hlavně výšku a šířku.

header{

background: rgb(255,255,153); - světle žluté pozadí

height: 150px; - výška

width: 1200px; - šířka

padding: 2px; - vnitřní odsazení

border: medium double red; - ohraničení červeně abychom teď viděli, kde je hlavička

margin: 0px; - 0 px odsazení vnější

}

section{

background: url('obr/pozadi.png') rgb(204,255,204); - pozadí texturou nebo barvou definovanou jiným způsobem v RGB - můžete i stejně jako dříve použít #CCFFCC

height: 800px;

width: 1200px;

padding: 2px;

border: medium double olive;

margin: 0px;

}

footer{

background: rgb(153,204,0);

width: 1200px;

height: 100px;

text-align: center;

margin: 0px;

padding: 2px;

border: medium double green;

}

kromě toho můžeme zastylovat i nadpisy, odstavec a tabulku...

Ostatní soubory jaro.html,...

Do nich hned pod <body> zkopírujeme celou <article><header>...</header><section> ze souboru rok.html a </section></article><footer>...</footer> nad </body>

Pokud máme správně zastylované:

Link na správný stylopis v hlavičce: <link rel='stylsheet' type='text/css' href='rok-vodorovne.css'>

mohlo by vše vypadat stejně.

Jde o opakování kódu, které se pokročileji řeší pak například pomocí include v jazyce PHP.

(nebát se -> tam nedolezeme spolu, ale jen wyvolení v rámci semináře)

(Pro všímavé - obrázek stránky jaro - najdi 2 rozdíly:-)

Plovoucí obsah s menu vlevo:

Pro seminaristy -> na stránkách

https://www.itnetwork.cz/html-css/webove-stranky/jak-psat-moderni-web-html-tutorial-plovouci-obsah