Připravujeme layout webu, definice hlavičky
Připravujeme layout webu, definice hlavičkyV minulém článku jsme si připravili kostru XHTML dokumentu a začali jsme nesměle a ostýchavě připojovat základní styly. Dnes se pokusíme dokončit hlavičku webu. Začneme zostra, ale ještě předtím doplníme jednu definici do prvku, který jsme si označili jako div id="hlavni". Máme tuto CSS definici:
#hlavni {
width: 760px;
margin: 0 auto;
text-align: left;
}
Z grafického návrhu je ale patrné, že celý blok (tedy celý obsah stránky) je orámován tenkou černou linkou, čili rámečkem. To právě nyní učiníme také. Přidáme tedy do definice ještě tyto dva zápisy:
#hlavni {
width: 760px;
margin: 0 auto;
text-align: left;
border: 1px solid #000;
height: 500px;
}
Border je vlastnost, která nám umožňuje orámovat libovolný prvek a stejně jako u margin (a padding) jsme využili zkrácený zápis. Říkáme tím prohlížeči, že má zvolený prvek orámovat jednopixelovým černým rámečkem. Pokud se týká vlastnosti border, máme k dispozici tyto možnosti:
border-left, border-right, border-top, border-bottom (levý, pravý, horní, dolní).
Vlastnost border není dědičná, takže se aplikuje pouze na ty bloky (elementy), kterým rámeček přiřadíme (nyní záměrně vynechávám chybný box model IE, protože v našem případě tato chyba nebude hrát velkou roli. V jiných případech, kdy by záleželo na přesné šířce celého bloku, je nutné zvolit poněkud odlišný postup. Ale k tomu se ještě dostaneme).
Definici height: 500px si přidáme jenom dočasně, abychom viděli, jak se náš layout rodí, protože bloky zatím neobsahují žádný obsah. Později ji zase vymažeme.
Nyní se vrhneme na hlavičku webu. Z minula máme připravený obrázek nazvaný hlavicka.gif, nyní si připravíme ještě jeden, který bude obsahovat ony ilustrační fotografie. Vyřízneme v grafickém editoru fotografie (bez černého rámečku) a vyjde nám velikost 430x72px a uložíme ho jako formát JPG s asi 30% kompresí, viz. Tím si také určíme height (výšku) bloku, který bude tento obrázek na pozadí obsahovat. A jdeme na to. Do stylového předpisu přidáme následující zápis:
#horni {
height: 75px;
background: #3c4080 url("../images/hlavicka.gif") no-repeat left top;
}
Height (neboli výšku) jsme nastavili shodnou, jakou má obrázek na pozadí. V tomto případě šířku blokovému prvku není nutné nastavovat, protože výchozí hodnotou je sto procent, což znamená, že blok se roztáhne po celé šířce bloku omezujícího (v našem případě je omezujícím blokem div id="hlavni").
Vlastnost background nastavuje zvolenému bloku pozadí, jaké chceme. Opět se jedná o zkrácený zápis, který se naučte používat, ušetří vám to spoustu psaní. Co to znamená? První v řadě je definice barvy pozadí (#3c4080 -- tmavě modrá). Pokud používáte na pozadí nějakého prvku obrázek, není tak docela nutné barvu pozadí uvádět. To platí ovšem pouze do okamžiku, kdy do takového prvku budete vkládat nějaký text. Na tmavém pozadí nejspíše zvolíte světlé nebo bílé písmo, což jde pomocí stylů velmi snadno. Pokud v takovém případě barvu pozadí neuvedete, neuvidí uživatel, který má z jakéhokoliv důvodu obrázky vypnuté, ani ťuk.
Další zápis nastavuje cestu k adresáři, kde leží požadovaný obrázek, nezapomínejte na uvozovky, některé prohlížeče, pokud adresu do uvozovek neuvedete, mohou obrázek ignorovat.
Definice no-repeat oznamuje prohlížeči, že obrázek na pozadí se nebude opakovat. V podstatě lze říci, že tam, kde velikost bloku odpovídá velikosti obrázku, je zbytečné tuto deklaraci uvádět, ale to nemusí být vždy pravda, což ještě uvidíme. Každopádně ji tedy vždy definujte. Pokud budete mít pozadí, které se má v rámci stránky nebo bloku opakovat, máte k dispozici dvě hodnoty: repeat-x (opakuje obrázek po vodorovné ose) a repeat-y (opakuje obrázek po svislé ose). Výchozí hodnota prohlížeče opakuje obrázek na pozadí v obou osách (obrázek tedy bude jako mozaika a poskládá se vám po celé ploše bloku nebo stránky). Vyzkoušíme si to v praxi o něco později.
Poslední zápis left top označuje umístění obrázku. K dispozici máte tyto čtyři hodnoty: left (vlevo), right (vpravo), top (nahoru) a bottom (dolů). Zápis se vždy uvádí v pořadí -- vodorovná pozice -- svislá pozice. Tedy kupříkladu tento zápis right bottom umístí obrázek do pravého dolního rohu bloku. Jejich praktické využití si ještě ukážeme, ale v této chvíli zápis left top vynecháme, protože víme, že toto je výchozí hodnota u všech prohlížečů a je tedy zbytečné tuto definici psát. Výsledný kód bude tedy vypadat takto:
#horni {
height: 75px;
background: #3c4080 url("../images/hlavicka.gif") no-repeat;
}
Nyní si spusťte prohlížeč a otevřete si soubor index.html. Měli byste vidět totéž, co já zde. Nyní vytvoříme první černý proužek pod ilustrační hlavičkou webu. K tomu žádný obrázek potřebovat nebudeme, pouze přidáme do stylového předpisu následující definici:
.textinfo {
background: #000;
color: #fff;
border-top: 2px solid #fff;
}
Všimněte si, že pro textinfo jsme v definici použili tečku místo křížku. Tím říkáme, že všechny prvky, nesoucí třídu (class) textinfo budou formátovány stejným způsobem. Protože jsou oba proužky totožné, vystačíme s jednou definicí v CSS.
Nyní si otevřeme soubor index.html a vložíme do bloku s class="textinfo" nějaký text, abychom viděli, jak bude výsledek vypadat (pokud bloku nenastavíte výšku, je dána jeho obsahem. Protože ale nyní v tomto prvku žádný obsah nemáme, tak ho v prohlížeči neuvidíme). Totéž provedeme i pro dolní černý proužek -- vložíme tam prostě nějaký, jakýkoliv text.
A vysvětlíme si, co jsme provedli. Nastavili jsme bloku černou barvu pozadí (background: #000). Vlastnost color: #fff nastaví pro celý blok bílou barvu písma. A protože v návrhu jsou jednotlivé sekce hlavičky odděleny bílou čárou, nastavíme oběma blokům dvoupixelový bílý rámeček na horním okraji (border-top: 2px solid #fff). Nyní si uložte jak styl, tak dokument index.html a prohlédněte si výsledek v prohlížeči, měl by vypadat nějak takto. Stránka by měla vyhlížet stejně jak v Internet Exploreru, tak v Mozille a Opeře.
Z hlavičky už nám zbývá přidat pouze ilustrační fotografie mezi dva černé proužky a protože se jedná pouze o ilustrace a nikoliv obrázky nesoucí informaci, patří také do stylu jako pozadí zvoleného bloku. Přidáme tedy do CSS následující definici:
#logo {
height: 72px;
background: #fff url("../images/fotky.jpg") no-repeat;
}
Opět jsme nastavili výšku dle ilustračního obrázku a nadefinovali barvu pozadí (tentokráte bílou) a obrázek na pozadí. Vidíte, že se obrázek sám umístil doleva a neopakuje se. A opět jsme v souladu s grafickým návrhem přidali dvoupixelový bílý rámeček v horní části. Výsledek můžete vidět zde. Zdá se, že hlavička webu se začíná podobat grafickému návrhu, bílé místo vpravo od fotografií je určeno pro vložení firemního loga, což ovšem budeme dělat až později.
Příště si dokončíme celý layout a v té souvislosti se naučíme něco málo (nebo hodně) o prvcích zvaných plovoucí neboli float.
Pokud rádi děláte domácí úkoly, máte nyní jedinečnou možnost vyzkoušet kouzlo CSS. Prostou výměnou obrázků, změnou barev pozadí jak stránky, tak bloků, nastavení výšky prvku a barvy a síly rámečků v souboru default.css (a nikde jinde, do vlastního dokumentu nezasahujte) můžete celou hlavičku webu a vlastně celý dokument změnit k nepoznání. Pokud jsou mezi vámi takoví hračičkové, rád se podívám na vaše dílka a případně přispěji radou. Malá odměna těm nejlepším není vyloučena :)
Autor: Plaváček
2024 © 
