.: Zkrášlění layoutu - barvy, rámy, pozadí :: Začínáme (HTML) :: Články :: SyX.cz

Články - Zkrášlění layoutu - barvy, rámy, pozadí

24.1.2012 21:56 | Autor: SyX

Každý web má své barvy, ať už jde o barvy textů, rámečků, pozadí, či dalších věcí. V tomto článku si upravíme layout naší stránky z předchozího článku tak, aby byl alespoň trochu "lahodící oku" :o)

V předchozím článku jsme si udělaly základní rozvržení stránky (layout).
Aktuální stav naší stránky není nic krásného, máme pouze navrhnuté části webu, kterým jsme dali různé barvy pozadí, ale to jen z důvodů, abychom zřetelně viděli že se nám zobrazují tam, kde chceme. Naše původní stránka je k nahlédnutí zde.

Prozačátek v našem CSS souboru smažeme všechny vlastnosti barev pozadí a písma. Tj. pro pozadí background a pro text color. Nyní máme celou stránku bílou a veškerý text černý. To je pro dnešek náš základ.

Čisté bílé pozadí je mnohdy dost zářící, obzvlášť v noci. Nastavíme si barvu pozadí na lehce šedou. Záleží však na Vás kterou barvu zvolíte. Pro výběr barvy můžete využít nějakého grafického editoru, anebo se můžete podívat zde na Wikipedii kde najdete celkem dost barev pro začátek :o)

V našem příkladu tedy použijeme lehce šedé pozadí. Viz.

body { background: #F5F5F5; }

Původní hodnoty zde však ponechejte. pouze za ně přidejte vlastnost background uvedenou v zápisu.

Hlavička

Hlavička naší stránky je tak prázdná, ale grafice se zde věnovat nebudeme. Co kdybychom ji trochu zkrášlili rámečkem? Přidejme k našemu elementu #hlavicka rámeček:

#hlavicka { border: 1px solid #104E8B; }

No nic moc. Ta vrchní strana přilepená na hraně prohlížeče není moc krásná. Přidejte za náš zápis ještě border-top: none;, címž zrušíme vrchní stranu rámečku. A když jí přidáme i o trochu světlejší pozadí, určitě to bude lepší než se samotným rámečkem. Určení pozadí již známe z výše uvedených příkladů i z předchozích článků.

Můžeme využít i nových vlastností CSS3 a rohy rámečku zakulatit. Nemusíme se bát toho že spousta lidí má stále starší prohlížeče. Ve starších prohlížečích se holt rohy ukážou ostré. Kulaté rohy nám vytvoří vlastnost border-radius. Při zadání jedné hodnoty budeme mít kulaté rohy všechny, ale my chceme jen ty spodní. Musíme tedy zadat všechny čtyři velikosti rohů. Rohy začínají v levém horním rohu a postupují podle hodinových ručiček. Pro spodní rohy tedy budeme mít zápis:

#hlavicka { border-radius: 0px 0px 10px 10px; }

S hlavičkou se jíž dál zabívat nebudeme, protože nemáme nic co bychom do ní mohli dát. Avšak, mohli bychom si do ní zadat alespoň název naší testovací stránky a ten trochu zkulturnit. Pro název využijeme nadpisu první úrovně, tedy h1. Ale, jelikož se má na stránce vyskytovat pouze jediný nadpis první úrovně a my už jej v našem původním webu máme, tak náš původní nadpis v obsahu změníme na druhou úroveň, a to h2.

Aby nebyl náš nadpis úplně v rohu, trochu ho vycentrujeme na výšku a posuneme od boku. Bohužel však vertikální centrování je možné pouze v tabulkách. Dáme tedy našemu nadpisu výšku řádku pomocí CSS vlastnosti line-height a aby nebyl moc nakraji, nastavíme mu levý okraj pomocí padding-left třeba na 50px. Může se stát, že nám nadpis rozhodí stránku svými vnějšími okraji, nastavíme mu tedy margin na 0px. Teď už jen barvu písma, protože je ta černá špatně čitelná, dáme mu třeba bílou.

Naše hlavička tedy nyní vypadá takto:

1
2
3

<div id="hlavicka">
    <h1>Náš web</h1>
</div>

A naše CSS k hlavičce je následující:

#hlavicka {
    width: 980px; /* šířka z našeho původního příkladu */
    height: 100px; /* výška */
    margin: 0px auto; /* zarovnání na střed */
    border: 2px solid #1874CD;  /* náš rámeček o šířce 2 pixely, plnou čarou a tmavou modrou barvou */
    border-top: none; /* zrušení vrchního okraje rámečku, musí být až za rámečkem aby měl co zrušit */
    background: #5CACEE; /* o něco světlejší modré pozadí */
    border-radius: 0px 0px 10px 10px; /* zde jsou naše kulaté rohy, tedy jen ty spodní */
}
#hlavicka h1 { /* tento zápis určije, že bude použit pro element h1 (náš nadpis), který je v obsahu elementu s ID #hlavicka, což je naše hlavička */
    padding-left: 50px; /* nadpis šoupneme od kraje nastavením vnitřního okraje */
    margin: 0px; /* a jelikož nám vnější okraje někdy dokážou posunout layout tam kde nechceme, tak je zrušíme */
    line-height: 90px; /* toto je výška řádku našeho nadpisu, tím docilíme toho, že bude na výšku taknějak zhruba uprostřed */
    color: white; /* a naše barva písma */
}

Pustíme se do našeho menu, které je hned pod hlavičkou. To už nám nezabere tolik času, protože je to jen jeden řádek ve kterém jsou odkazy (položky menu). U našeho menu již máme z předchozího článku nastaveny velikosti, výšku řádku a u jednotlivých odkazů vnější okraje (aby nebyly nalepeny na sebe).

Jelikož se jedná o menu, nemusíme odkazy zvýrazňovat podtržením, protože je jasné že se jedná o odkazy. Trochu zvětšíme velikost textu a barvu dáme stejnou jako máme rámeček naší hlavičky. Nic Vám však nebrání si jej nastavit dle Vašeho gusta.

#menu a { /* platí pro všechny odkazy v našem div s id=menu */
    margin: 0px 20px;
    text-decoration: none; /* text nebude mít žádnou dekoraci (podtržení) */
    font-size: 13px;
    color: #1874CD;
    font-weight: bold; /* naše odkazy uděláme tučné */
    letter-spacing: 1px; /* a aby byly hezky čitelné, dáme mezi každé písmenko malou mezeru */
}

Odkazy už taknějak ujdou, ale když na ně ukážeme myší, nic se neděje. To můžeme změnit pomocí :hover u našich odkazů.

#menu a:hover { /* platí pro naše odkazy po najetí myší */
    color: #EE5C42;
    position: relative; /* nastavíme odkazu relativní pozici (to je pozice, kde by se zobrazily normálně, takže tedy tam, kde teď zrovna jsou */
    top: 2px; /* jelikož jsme odkazu nastavili pozici výše, můžeme nyní jeho pozici měnit, po najetí ho posuneme o 2px níže */
}

Položky menu jako takové ponechám na Vás, pro příklad ale ukážu jak zhruba vypadá naše menu. Odkazy však nikam nesměřují (místo url adresy mají pouze znak #).

<div id="menu">
    <a href="#">Úvod</a>
    <a href="#">Galerie</a>
    <a href="#">Vtipy</a>
    <a href="#">Příběhy</a>
    <a href="#">Kontakt</a>
</div>

To zatím našemu menu stačí.

Obsah

Obsah stránky zatím nijak formátovat nebudeme, v základu ani není co formátovat, protože v obsahu budeme mít vlastně všechno, co na našem webu budeme chtít, a to se u základního layoutu nedá předurčit jak to bude vypadat. To můsíme přizpůsobovat postupně při psaní našeho obsahu. Můžete zatím třeba změnit barvu nadpisu h2, který bychom měli zobrazovat na každé stránce, aby návštěvníci věděli, kde vlastně jsou. Barvu písma změníte, jak už jsme si několikrát řekli, vlastností color. Abychom měli jistotu, že měníme barvu nadpisu pouze v našem obsahu, použijeme zápis:

#obsah h2 { color: navy; } /* Pro náš nadpis druhé úrovně v obsahu stránky nastavíme barvu námořnické modré */

Pravý sloupec

Do pravého sloupce běžně spadá třeba přihlašování, aktuality, a různé drobné informace. My zatím nemáme co do něj dát, tak ho nechámě beze změny.

Patička

Patička se využívá převážně k zobrazení copyrightu, tvůrce designu, apod. většinou na jednou řádku s větší mezerou. My si zde necháme vzorový text. Písmo trochu zašednem, aby nebylo tak výrazné a celé patičce dáme horní rámeček, který nám udělá rozdělovací linku.

#paticka {
    clear: both;
    width: 980px;
    margin: 0px auto;
    color: #888888;
    border-top: 1px solid #1874CD; /* rámeček máme v barvě rámečku naší hlavičky */
    line-height: 30px; /* uděláme si větší výšku řádku, aby nebylo písmo tak nalepené na lince ani na spodku dokumentu */
}

Toť prozatím vše, náš dnešní výtvor si můžete prohlédnou zde příště si povíme něco o formátování textu, k čemuž patří odstavce, ale třeba i tabulky apod.

Hodnocení (26 hlasů)

Komentáře

Zatím zde nejsou žádné komentáře.

Přidat komentář

Příhlášení

Zapomenuté heslo?Registrace

Tvorba www

Chcete mít vlastní web? Vytvořím Vám Vaši vlastní www stránku či webovou aplikaci dle Vašich představ. Časově přívětivě, cenově dostupně.

Kontakt

Spolupráce

Jste firma nebo živnostník pracující v oblasti tvorby www? Nebráním se žádné spolupráci jak s grafickými studii, tak ani s jinými firmami či živnostníky. Pracuji externě ze svého domova, ale osobní setkání není problém.

Facebook

SyX.cz - Tvorba www a webových aplikací

Google+

SyX.czon

Twitter

SyXcz

SyX.cz - Tvorba www a webových aplikací