dusan@pc-slany.cz
|
|
Píąe Yuhů dusan@pc-slany.cz
|
a oddílů, odstavců a tabulek
Pozadí na webu obecně - Obrázek jako soubor - Pozadí celé stránky v HTML - Pozadí celé stránky v CSS - CSS pozadí libovolného prvku - Opakování obrázkových pozadí - Umístění obrázkových pozadí - Pozadí tabulek v HTML - Problémy překreslování - Pseudopozadí pozicováním - Závěrem
Moľná jsem tuto stránku měl rozdělit do dvou nebo tří. No nic, nechám to tak.
Pozadí se řekne anglicky background [begraund]. Pod pojmem pozadí se na webových stránkách rozumí obvykle
©irąí problematikou je pozadí obrázkové.
Kvůli historickému vývoji značkovacích jazyků existují dva způsoby, jak nastavit něčemu pozadí:
HTML zápis pozadí je starąí, pouľívaný častěji. Umoľňuje pouze nastavit pozadí celé stránky (a prvků tabulky).
CSS (kaskádové styly) dovolují to samé, navíc se neomezují na pozadí stránky, ale dokáľou nastavit pozadí čemukoliv (oddíl, odstavec, odkaz atd.). Obrázek se navíc nemusí opakovat a můľe být různě umístěn. Jedinou nevýhodou CSS je jeho horąí podpora ve starąích prohlíľečích (které se ale uľ skoro nevyskytují).
Napřed popíąu HTML zápis, pak se budeme věnovat CSS. Ale úplně první úkol je mít obrázek pozadí jako soubor.
Je třeba mít obrázek uloľený v souboru typu *.jpg nebo *.gif. Hodně práce si uąetříte, pokud soubor uloľíte někde poblíľ souborů stránek.
Obrázkové pozadí by mělo splňovat některé poľadavky:
Občas jsou k vidění velká bohatá pozadí přes celou stránku, coľ ale nelze doporučit, právě kvůli poruąení vąech těchto zásad.
Z hlediska konstrukce stránky se dají přípustná obrázková pozadí rozdělit na
Obrázek pozadí nejde v prohlíľeči zvětąovat (roztahovat) jako normální obrázky. Počítejte s tímto omezením.
HTML zápis se týká tagu <body>, protoľe pozadí vlastně ovlivňuje celé tělo stránky (angl. body = tělo). Nastavení pozadí se dělá pomocí atributů background a bgcolor.
Příklad:
<body background="pozadi.gif"
bgcolor="black">
Stránka s tímto zápisem bude mít na pozadí vykreslený obrázek pozadi.gif. Kdyby se z nějakého důvodu obrázek nezobrazil (nebo kdyby byl místy průhledný), pozadí bude černé (black). Naučte se nespoléhat na obrázky a vľdy připiąte i deklaraci barvy. Barva se větąinou nastavuje tak, aby odpovídala tónování toho obrázku.
Aby bylo písmo na černém nebo tmavém pozadí čitelné, dá se textu také nastavit barva:
<body bgcolor="black" text="white">
Takľe to bude černé na bílém. Moľná vám přijde divné zmiňovat se o barvě textu, kdyľ je řeč o pozadí! Leč zvykněte si vľdy s barvou pozadí zadávat i barvu popředí, je to velmi praktický zvyk. Předchází se tím chybám.
Daląím nastavením se dá zakázat posouvání obrázkového pozadí při rolování stránky:
<body background="pozadi.gif" bgproperties="fixed">
| atribut tagu body | význam | moľné hodnoty |
|---|---|---|
| background | obrázek na pozadí | URL obrázkového souboru (větąinou jméno obrázku) |
| bgproperties | "přibitost" při rolování / rolování s textem | fixed, scroll |
| bgcolor | barva pozadí | barva |
| text | barva textu | barva |
Jeątě jednou zdůrazňuji, ľe tyto atributy je moľno pouľít pouze v tagu <body>, jinde nemají smysl (protoľe nefungují). V tagu <body> se dá také deklarovat barva odkazů a okraje stránky, ale to se netýká problematiky pozadí.
Stejného efektu se dá jiným způsobem dosáhnout i pomocí kaskádových stylů (CSS). Protoľe se technologii CSS věnuji v celém seriálu, omezím se zde na výklad ąpeků a zápis stylopisu. Stylopis se vkládá do hlavičky stránky:
<style>
body {
background-image: URL('pozadi.gif');/* obrázek na pozadí */
background-attachment: fixed;/* pozadí neroluje */
background-color: black;/* případná barva pozadí černá */
color: white; }/* bílý text */
</style>
Jak je vidět, klíčová slova jsou v CSS poněkud rozdílná neľ v HTML.
CSS není nutno pouľívat. Spěcháte-li, pus»te to z hlavy. Ale má to větąí moľnosti a kdo se chce zabývat stavbou stránek více, ten se bez CSS neobejde.
Existují jeątě dva mírně odliąné zápisy, jejichľ teorii rozebírám v praktickém pouľití CSS. Jeden spočívá v pouľití externího *.css souboru se stylopisem, coľ je praktické, protoľe se tak dá nastavit nebo změnit pozadí pro mnoho stránek najednou (neboli pro vąechny). To je asi hlavní důvod, proč se CSS vůbec pouľívá. Druhý způsob je in-line zápis atributem style, coľ mi ale přijde neąikovné. Příklad in-line zápisu zeleného pozadí stránky:
<body style="background-color: green">
Kaskádové styly umoľňují nastavit pozadí libovolnému prvku, který je v HTML zápisu vyjádřen nějakým zobrazitelným tagem. Takľe vlastně vąemu. Například se dá nastavit pozadí odstavce (tag p), odkazu (tag a), oddílu (tag div) atd.
Například pozadí vąech odstavců ve stránce se dá deklarovat pomocí stylopisu v hlavičce:
<style>
p {background-image: URL('pozadi.gif')}
</style>
Tím se ale nastaví pozadí vąech odstavců na stránce. Je-li potřeba dát pozadí jenom jednomu odstavci, dá se vyuľít tříd, nebo v HTML zápisu pouľít přímý styl. Příkladem přímého stylu bude nyní odkaz s obrázkovým pozadím:
<a style="background-image:
URL('pozadi.gif')}" href="někam" >Text
odkazu</a>
Poznámka: točí se vám hlava z mnoha různých způsobů zápisu? Nepropadejte panice. Naučte se klidně jenom jeden způsob. V daląím výkladu nebudete víc potřebovat.
Ne vąechno ale funguje naprosto perfektně. Chybky jsou dvou druhů:
Některé méně roząířené prohlíľeče neumí vykreslit pozadí pod vąemi elementy správně. Zejména Netscape 4: Ignoruje CSS u formulářů, chybuje u tabulek. Také ąpatně vymezuje podbarvovanou plochu (např. u odstavců nebo jiných bloků to se dá opravit nastavením vlastnosti border s libovolnou hodnotou). Například barva pozadí tabulky se dá v Netscape 4 spolehlivě nastavit pouze přes tag <td> (buňka):
td {background-color: yellow; border: none}
Netscape prostě často vytvoří záhadný zmatek a chybu.
Internet Explorer verze 4 se od verze 5 liąí právě jenom v určitých chybách při aplikaci pozadí. Zatímco IE 5 vykresluje pozadí pod kaľdým elemetem správně, IE 4 ignoruje padding (který by měl také podbarvit). ®ádné zákonitosti chyb jsem ale neobjevil.
V praxi je tedy vľdy potřeba odzkouąet stránku na několika prohlíľečích a sledovat případné problémy. Naątěstí nebývají přílią časté.
V Internet Exploderu 5 a niľąích nejde nastavit pozadí tagu <select>.
Vąechny formuláře jsou ignorovány v Netscape Navigatoru 4.
Chcete-li mít jistotu, ľe se pozadí vykreslí správně ve vąech prohlíľečích, pouľívejte tag <div> - oddíl. To je co se CSS týká nejjistějąí element. Pozadí nastavte tomu oddílu, nejlépe včetně ąířky a výąky. Např.:
<div style="background-color: red; width: 120px; height:
50px">Obsah oddílu</div>
Daląí dost spolehlivý tag je jeątě <td> (buňka tabulky) a pro texty <span>.
V normálním případě se obrázková pozadí skládají vedle sebe a pod sebe, aľ vyplní prostor, který vyplnit mohou. To je ve větąině případů výhodné.
Někdy je to ale neľádoucí, proto se dá opakování vypnout. Nebo dá nastavit opakování jenom v jednom směru (vodorovném nebo svislém). Vąechno se to dělá CSS vlastností background-repeat.
<p style="background-image: URL ('pozadi.gif'); |
Pozadí se vykreslí jenom jednou a nebude se opakovat |
<p style="background-image: URL ('pozadi.gif'); |
Pozadí se bude opakovat vodorovně (v ose x) |
<p style="background-image: URL ('pozadi.gif'); |
Pozadí se bude opakovat v ose y, tj. svisle pod sebou. |
Podpora vlastnosti background-repeat je v prohlíľečích překvapivě dobrá.
Nejzajímavějąí je asi nastavení no-repeat. Opravdového významu toto nastavení získává v kombinaci s umístěním (background-position).
CSS vlastnost background-position řídí umístění obrázkového pozadí. Pouľívá se zejména při vypnutém opakování (ale není to podmínkou). Zadávají se dvě hodnoty oddělené mezerou. První hodnota pro horizontální umístění, druhá pro vertikální.
Nejčastěji pouľívané hodnoty jsou umístění na strany a na střed. Přehledně znázorněno:
| left top (normální umístění) |
center top | right top |
| left center | center center | right center |
| left bottom | centre bottom | right bottom |
Mohou se pouľít i pixely a procenta. Zápis číslem znamená počet pixelů (obrazovkových bodů), přičemľ souřadnice určuje polohu levého horního rohu obrázku.
Trochu jinak je to u procent. Tam počet procent znamená to, ľe třeba bod ve dvaceti procentech ąířky elementu bude zalícován s dvaceti procenty ąířky obrázku.
Např. následující zápisy jsou ekvivalentní:
background-position: 50% 0 |
background-position: center top |
Neumí změnit pozadí z levé horní.
Na rozdíl od klasického HTML umoľňují kaskádové styly nastavit barevné a obrázkové pozadí čemukoliv, zakázat rolování opakování, a nastavit přesnou pozici. Ovąem ani CSS nedovolují obrázek pozadí nějak roztahovat. Navíc prohlíľeč Netscape 4 neumí vykreslit pozadí tabulky a nezvládá změnu pozice.
Tolik zhruba k obrázkovému pozadí pomocí CSS.
HTML 3.2 obsahovalo jeątě jeden způsob, jak nastavit pozadí bez pouľití CSS. Jde o pozadí tabulek a buněk tabulky. Barva pozadí se dělá atributem bgcolor, na obrázkové pozadí se pouľívá html atribut background:
<table background="pozadi.gif"> ...
Méně spolehlivé (protoľe tuąím Netscape 3 to nezvládá) je nastavit pozadí jen jednotlivé buňce:
<td background="pozadi.gif">Obsah buňky</td>
Chcete-li nastavit pozadí tabulky spolehlivě, aby to fungovalo i v Netscapu, tak toto je jediný způsob, protoľe Netscape 4 ignoruje CSS vlastnosti u tabulek.
Pomocí těchto efektů lze velmi spolehlivě a přesně určovat obrázkové pozadí. Podle mého odhadu tuto technologii dnes pouľívá kolem 80% profesionálních webdesignerů (protoľe jsou zamilovaní do tabulek a nedůvěřují CSS).
U pozadí tabulek nelze vypnout opakování nebo nastavit pozici.
Na pomalejąích počítačích (frekvence 150 MHz a méně) občas dokáľe obrázkové pozadí docela zatopit grafické kartě a procesoru. Obzvláą» se to týká rolování, pokud:
Jeden čas jsem se totiľ zamiloval do průhledných pozadíček (takové pavučinky vyvolávající dojem poloprůhlednosti), ale pak jsem zjistil, ľe se s tou stránkou někde vůbec nedá rolovat a taky se pomaleji vykresluje. Bacha na to.
Dojem podobný obrázkovému pozadí se dá vytvořit jeątě jedním způsobem. Opět půjde o CSS, tentokrát pouľiji pozicování. Nebudu zde vypisovat technologii CSS pozicování, to jsem udělal jinde. Omezím se na ideu.
Ve skutečnosti to ľádné pozadí vlastně není. Prostě se do stránky vloľí obrázek (nebude se opakovat), nastaví se mu absolutní (moľná i relativní) poloha, nastaví se mu záporný z-index a nechá se přes něj přetékat text nebo jiný obsah.
Pokud nevíte, co je to absolutní poloha nebo z-index, nastudujte si to v popisu CSS pozicování.
Vtip tohoto přístupu spočívá v tom, ľe nyní můľu obrázek roztáhnout přes celou stránku, pokud mu nastavím ąířku (v HTML nebo stylem) 100%. Potom se mi bude měnit ąířka obrázku, pokud změním ąířku okna. Trochu problém bývá v tom, ľe se takto obrázek trochu deformuje, protoľe se zároveň nemění výąka. Ale to uľ se prostě musí oľelet. Také to nefunguje v historických prohlíľečích.
Obrázku pseudopozadí se dá nastavit spousta daląích CSS vlastností, obzvláątě upozorňuji na filtry.
Chtěl bych dodat pár doporučení. Vlastně budu opakovat věci ze začátku tohoto textu, ale přijde mi to důleľité. To hlavní, co bych chtěl říci:
Projděte si dneąní Internet a řekněte sami: kolik renomovaných serverů pouľívá pod textem obrázek na pozadí? Prsty jedné ruky budou stačit.
Ale pod různými liątami, prouľky a okraji se to hodí.
Nedělejte obrázkové pozadí s ostrými přechody pod písmem, nedá se to potom číst.
Pamatujte, ľe klient můľe mít obrázky vypnuté nebo k němu nemusejí dorazit. Váą web musí vypadat dobře i bez toho.
Pokud máte inverzní schéma, totiľ světlý text na tmavém obrázkovém pozadí, tak musíte přidat deklaraci tmavé barvy na pozadí. Kdyby totiľ obrázek pozadí zatím nedorazil (nebo kdyby byl vypnutý), tak máme světlé písmo na bílém. Příjemné počtení!
Tato chyba se překvapivě často objevuje i na renomovaných serverech. Jeątě ľe sedím za vytáčeným připojením modemem 28. Jinak bych si toho asi nevąimnul.
Odfláknutý příklad: Příklady na pozadí a pseudopozadí
Jak
psát web:
http://dusan.pc-slany.cz/internet/
Píąe Yuhů, mail: dusan@pc-slany.c
Sláva kočkám! Poslední aktualizace 05.10.2002