dnes je 7.7.2022

Input:

WWW stránky prakticky - 7. část

11.5.2007, , Zdroj: Verlag Dashöfer

S využitím kaskádových stylů si dnes nadefinujeme další prvky naší internetové prezentace. Hlavním smyslem práce bude rozdělení stránky na více samostatných oblastí.

Pro zpracování  stránek budeme i nadále využívat HTML editor Yugie (pro vytváření zdrojového kódu) a dále TopStyle Lite (pro zpracování kaskádových stylů). Výsledek práce, ke kterému směřujeme, by měl tedy vypadat asi takto:

Jako první si nadefinujeme oblast pro záhlaví stránky - v našem příkladu jsme použili sytě zelenou barvu pro lepší odlišení od ostatních prvků stránky.

Otevřeme si soubor styly.css. Pro přehlednost si novou značku zařadíme hned za definici značky body. Vytvoříme zde tedy nový řádek, na který umístíme kurzor a stiskneme ikonu New Selector.

Zvolíme ze seznamu HTML Element značku div. Ponecháme označený přepínač class a název zadáme head (to není striktně určeno, třídy si můžeme pojmenovávat podle svého a pozor - nemá to nic společného s HTML značkou <head>).

Dialogové okno potvrdíme a v editační oblasti se vytvořil základ třídy head:

Pokračujeme editací této třídy. Jako první definujeme pomocí seznamu Style Inspector vlastnosti margin-left a margin-right:

V obou případech jsme zadali hodnotu auto. Znamená to, že mezery zleva i zprava se automaticky přizpůsobí podle prostoru, který bude k dispozici. V případě záhlaví stránky to bude mít význam, protože návštěvníci stránek mohou používat monitory s nejrůznějším rozlišením. V našem zájmu je, aby se záhlaví stránky vždy vešlo celé na šířku obrazovky a toho právě docílíme automatickým přizpůsobením mezer na levé a na pravé straně.

Pokud se týká rozlišení monitorů, měli bychom vzít v úvahu, že v současné době stále ještě cca 10 % návštěvníků používá rozlišení 800x600 - a i jim by se měla stránka zobrazovat v celé šířce. S tím souvisí i nastavení další vlastnosti záhlaví - šířky.

Pracujeme stále

Nahrávám...
Nahrávám...