Anglická verze
logolink

< Zpt na seznam lekc

Monosti tvorby pozad www strnky

DreamweaverObsah lekce:

  • Pozad html strnky
  • Jednobarevn pozad
  • Pozad realizovan pechodem
  • Obrzek jako pozad strnky

Pozad html strnky

Jestlie neeknete jinak, pak m strnka standardn zpravidla bl pozad (pozad je vyplnno blou barvou viz soubor pozadi1.html). V tto lekci si ukeme, jak vytvoit ti typy pozad:

  • Jednobarevn pozad - sami urme odstn barvy, kterou bude pozad vyplnno
  • Pozad realizovan pechodem - pomoc speciln vyrobenho obrzku obsahujcho barevn pechod
  • Obrzek jako pozad strnky - posledn statickou monost je pout jako pozad libovoln obrzek nebo fotografii

Nejprve si vytvome przdn HTML soubor se sekc pro umstn css styl v hlavice.

Ukzka CSS pravidel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>pozadí</title>
<style type="text/css">

</style>
</head>

<body>
</body>
</html>

Chceme-li mnit vzhled pozad, pak pouijeme CSS styly (jedn se o zmnu vzhledu strnky). Pozad strnky (celho prostoru pro strnku v okn prohlee) je vlastn pozad elementu body - pro ten tedy budeme pst CSS pravidla.

Jednobarevn pozad

Nejjednodu a nejrychlej (rychlost vykreslen i velikost penesench dat) je nastaven pozad jedn barvy. Pro nai strnku sta tedy napsat nsledujc jednoduch pravidlo.

CSS pravidlo pro jednobarevn pozad

body{
background-color:#069;
}

Pro html element body jsme nastavili vlastnost background-color na hodnotu #069, co je zpis barvy (pipomeme, e mka a tznakov zpis barvy znamen to stejn jako kdy kad znak kdu barvy zopakujeme dvakrt za sebou). Nae barva m tedy standardn kd #006699. Libovoln HEX kd k barv meme zskat napklad v Adobe Kuleru nebo v aplikaci Adobe Photoshop (viz nsledujc dva obrzky).

výbr barvy v Kuleru
barva v Adobe Photoshopu

Vslednou strnku si mete prohldnout: pozadi2.html.

Pozad realizovan pechodem

Velmi asto pouvanm typem pozad je pozad tvoen linernm pechodem mezi dvma barvami. Zde je nutno v rastrovm grafickm editoru vyrobit obrzek pechodu poadovanch barev. Dleit je, jak vysok bude vsledn obrzek. Soubor obsahujc obrzek pozad meme vytvoit napklad v Adobe Photoshopu. Postup by se dal strun popsat takto:

  • Vytvoit nov soubor o rozmrech napklad 800x300 pixel.
  • Nastavit poadovanou barvu poped a pozad.
  • Vybrat nstroj pechod a v nm z dostupnch pechod pechod z barvy poped do barvy pozad. Vybran pechod meme vloit do naeho souboru pomoc myi (klikneme levm tlatkem na horn okraj obrzku a o nco neji v ploe naeho souboru tlatko pustme). TIP: pi vytven pechodu my je vhodn dret klvesu SHIFT, aby se nm podailo vytvoit pechod v obrzku skuten rovn. Pro nai potebu jsme vytvoili napklad takov obrzek:
pechod

Soubor s pozadm je dobr njak vhodn uloit do sloky v adresov struktue webu (v naem ppad do sloky "obrazky" nebo "images" nebo podobn v koenov sloce webu). Dle ve vkladu pedpokldme, e mme obrzky ve sloce "images".

CSS pravidlo pro pozad s obrzkem

body{
background-image:url(images/pozadi.jpg);
}

Pro html element body jsme nastavili vlastnost background-image na hodnotu, kter reprezentuje relativn cestu k obrzku na disku ze sloky, kde je umstn soubor s na html strnkou. Pojme se nyn prohldnout vslednou strnku: pozadi3.html.

Vidme, e se n obrzek na pozad neustle opakuje po ose y. Naim clem bylo mt pechod pouze na zatku strnky a pak u jen jednu fixn barvu. Celou situaci vyeme pravou naeho pravidla takto (vsledn strnka: pozadi4.html):

CSS pravidlo pro pozad s obrzkem

body{
background-image:url(images/pozadi.jpg);
background-repeat:repeat-x;
}

Vyuili jsme vlastnosti background-repeat (opakovn pozad), kterou jsme nastavili na hodnotu repeat-x. To znamen, e pozad se umst do strnky a bude se neustle opakovat po ose x (tedy zleva-doprava) dokud nebude konec ky strnky v prohlei.

Nae strnka stle jet nevypad tak, jak bychom si pli. Je nutno nastavit pozad pro zbytek strnky. Tady je poteba nastavit pozad strnky na hodnotu, kter pokud mono pesn vyjaduje pesn barvu, kterou kon n obrzek pechodu. Tm dojde k iluzi toho, e pozad nekon a pokrauje do nekonena.

CSS pravidlo pro pozad s obrzkem

body{
background-image:url(images/pozadi.jpg);
background-repeat:repeat-x;
background-color:#069;
}

Vslednou strnku si mete prohldnout: pozadi5.html.

Uvdomme si nyn jet jednu podstatnou vc. Obrzek s pechodem m uritou velikost a je tedy nezbytn, aby jej uivatelv prohle ped zobrazen strnky sthl ze serveru. Tato akce bude trvat tm men dobu m je obrzek men. Bylo by mon jet obrzek s pechodem njak zmenit mimo pouit komprese (zvten komprese, jin grafick formt apod.)?

een tohoto problmu je pekvapiv jednoduch, pokud si vzpomeneme na fakt, e naten obrzek na pozad se automaticky opakuje znovu a znovu po ose x. Je tedy docela jedno, jak moc je obrzek s pechodem irok. Obrzek tedy meme ztenit a na ku jednoho pixelu a ten se zopakuje vedle sebe kolikrt bude poteba a vytvome daleko menm souborem naprosto stejn vypadajc pozad. Obrzek tedy oeeme (Adobe Photoshop - nstroj oez) na ku 1 pixelu a ulome na pevn disk msto pvodnho obrzku s pozadm:

Vslednou strnku i obrzek si mete prohldnout: pozadi6.html.

zmenšený obrázek pozadí

kol

Co by se stalo, kdyby se nastavila vlastnost background-repeat na hodnotu no-repeat?

Obrzek jako pozad strnky

Pokud potebujeme komplexnj pozad strnky - nap. fotografie, grafiku apod., pak pouijeme na pozad obrzek. Zpravidla m tato varianta pozad nejvt velikost, ale tak me obsahovat mnoho atraktivnch informac. Tto monosti vyuvaj zejmna webov prezentace firem kdy se sna pilkat pozornost zkaznka na zajmav i aktuln nabdky. Podvejme se nejprve na nkolik pklad:

Internetov obchody

Pozad www strnek dvou rznch prodejc potaovch her (obrzky jsou zmrn zmeneny pouze prohleem - jsou tedy uloeny v pvodn velikosti a je mono si je prohldnout v pln kvalit a velikosti):

starcraft2
medal of honour

Efekt stnu okolo strnky

Pozad vytvejc stn okolo boxu s obsahem strnky - toto je velmi asto pouvno mj. nap. u zpravodajskch server.

stín

Pozad strnek gymnzia

Posledn ukzkou pozad strnky bude pozad strnek naeho gymnzia.

pozadí stránek gymnázia

Diskuse

Pokuste se najt spolen rysy prezentovanch pozad internetovch strnek a ppadn podobnosti zdvodnit. Zamyslete se tak nad velikost obrzk s pozadm. Zjistte, jakou maj tato pozad velikost (v pixelech i z hlediska objemu dat).

Posledn prezentovan pozad se pokusme zapracovat do na www strnky (pozad si ulote do vaeho potae).

CSS pravidlo pro pozad s obrzkem

body{
background-image:url(images/ukazka-pozadi-5.jpg);
background-repeat:repeat-x;
background-color:#069;
}

Vslednou strnku si mete prohldnout: pozadi7.html. Vidme, e se nm pozad opakuje, emu se pokusme zamezit (POZOR! Co bychom vidli na bnm kacelskm monitoru s rozlienm 1024x768 a co na fullHD displejch?). Pouijeme opt vlastnost background-repeat, ale tentokrt s hodnotou no-repeat.

CSS pravidlo pro pozad s obrzkem

body{
background-image:url(images/ukazka-pozadi-5.jpg);
background-repeat:no-repeat;
background-color:#069;
}

Vslednou strnku si mete prohldnout: pozadi8.html.

Na zvr jet pozad vycentrujeme a zajistme, aby bylo zarovnno na horn okraj okna prohlee.

CSS pravidlo pro pozad s obrzkem

body{
background-image:url(images/ukazka-pozadi-5.jpg);
background-repeat:no-repeat;
background-color:#069;
background-position:center;
background-position:top;
}

Vslednou strnku si mete prohldnout: pozadi9.html.

kol

Pokuste se popsat pozitiva a negativa nsledujcch obrzkovch pozad. Jak byste takovto pozad vyrobili?

Pozad 1

pozadí 1

Pozad 2

pozadí 2

Otzky

  1. Charakterizujte monosti vytvoen pozad html strnky.
  2. Napite a vysvtlete CSS pravidla pro umstn obrzkovho pozad na sted a horn okraj okna prohlee?
  3. Jak nleitosti by ml splovat obrzek, kter pouijeme jako pozad html strnky?
webdesign, xhtml, css, php - Mgr. Michal Mikláš