Kurz HTML – rámce a vylepšení vzhledu

V několika minulých dílech tvorby HTML pro začátečníky jsem psal o rámech. V dnešním díle se zaměřím více na vizuální stránku a na různá malá kouzla a detaily, vše ovšem pokud možno v rámci normy HTML 4.0.

V tomto díle předpokládám, že již umíte vytvořit základní stránku s rámy. V opačném případě si nejdříve přečtěte předchozí díly o rámech. Definice rámů se vytváří v podstatě pomocí dvojice značek <frameset> a <frame>. Tyto značky mohou obsahovat některé atributy, které více řídí vzhled. A právě takovými atributy se budu zabývat v tomto článku.

Posouvací (scrollovací) lišta – atribut scrolling

První, co lze snadno nastavit, je možnost, zda se objeví posouvací (scrollovací) lišta. Pokud prostě okno rámu obsahuje více textu, než lze najednou zobrazit, objeví se na pravé straně, nebo na dolní straně (podle toho, kde je to potřeba) posouvací lišta. Bohužel, tato lišta někdy výrazně ruší design, takže jí mnoho webmasterů zakazuje. To lze snadno provést pomocí atributu scrooling: <frame scrolling="no">.

Bohužel, mnoho webmasterů jsou lidé, kteří svá dílka nejčastěji prohlížejí v rozlišení 1024×768. Automaticky zakážou posouvací lištu, aniž by se nad tím zamysleli, protože jim "kazí" design. Díky tomu se na mnohých webových stránkách nedostanete k některým nabídkám, protože jsou prostě pod obrazovkou. Proto se přimlouvám za to, aby, pokud je to jenom trochu možné, nebylo používáno scrolling="no".

Pro úplnost uvedu, že atribut scrolling má více možností, které jsou shrnuty zde:

• <frame scrolling="auto"> – posouvací lišty se zobrazí jenom tehdy, když se obsah nevejde do okna. To samé se stane, pokud neuvedete atribut scrolling vůbec.

• <frame scrolling="no"> – posouvací lišty se nezobrazí nikdy bez ohledu na to, zda se obsah do okna vejde, nebo ne. Toto by se mělo používat velmi opatrně.

• <frame scrolling="yes"> – posouvací lišty se zobrazí vždy, ať už to je, nebo není potřeba. Tato volba se obvykle nepoužívá.

Změna velikosti okna rámu – atribut noresize

Další možností je zamezení změny velikosti okna rámu. Pokud se pohybujete myší přes okraj okna rámu, můžete změnit velikost okna rámu. Naznačuje vám to i kursor myši, který změní vzhled, pokud je možné velikost okna měnit. Pro mě, jakožto čtenáře je to vcelku příjemná vlastnost.

Pokud použijete <frame noresize>, potom je změna velikosti okna rámu zakázána. Při pohybu přes okraj libovolného okna rámu se nenastaví kuzor myši na jiný vzhled a měnit jednotlivá okna uvnitř rámové struktury není možné.

Ač to webmasteři poměrně často používají, celkem na mnoha internetových stránkách příliš nechápu smysl zákazu změny velikosti stránek. Spíše to zhoršuje pohodlí čtenáře. Smysl to má tam, kde je skutečně pevná velikost obsahu stránky, například složená z obrázků, apod.

Čáry mezi okny v rámové struktuře – atribut frameborder

Kolem rámů existuje několik atributů, které slouží k nastavování mezer a okrajů mezi jednotlivými okny uvnitř rámové struktury. K pochopení celého mechanismu je ovšem potřeba sledovat rámy jako celek, nikoli jenom jednotlivé značky, nebo okna. Mnoho lidí tyto značky nechápe správně, a už jsem viděl mnoho stránek, které funkci těchto atributů nepopisují vždy správně.

Vše budu vysvětlovat na rámu se dvěma okny, které budou definováno tímto HTML kódem:

Výše uvedený kód vytvoří rám se dvěma okny. Levé okno rámu bude zabírat 40% šířky a pravé okno 60% šířky. Výsledek bude vypadat nějak takto:

Jako první začnu atributem frameborder, na kterém vysvětlím, jak je nutné brát rámy jako celek. Tento atribut můžete použít ve značce <frame>, ale třeba Internet Explorer vám ji umožňuje napsat i do značky <frameset>, ač to norma nepovoluje. V každém případě jí však můžete použít buď jako frameborder="0", nebo jako frameborder="1". Nic jiného není povoleno. V normě se dočtete, že verze s hodnotou 0 má nakreslit mezi okna oddělovací čáru, zatímco verze s hodnotou 0 jí nenakreslí.

Věc je ale malinko složitější. Zkusím to vysvětlit tak, jak je to v Internet Exploreru. Podíváte-li se o trochu výše na schématický obrázek příkladu se dvěma okny v rámu, zkusme se podívat, z čeho je tvořena čára mezi levým a pravým oknem. Pokud si příklad zkusíte sami, zjistíte, že Internet Explorer jí považuje za jakoby vytvořenou ze tří čar vedle sebe (nehledím teď na 3D provedení čáry, ale na to, jak je IE vytváří).

Takže vzhled prostřední čáry je řízen hned třemi značkami najednou. Levá třetina je tvořena a řízena značkou <frame>, která definuje levé okno. Prostředek řídí značka <frameset> a pravou třetinu řídí značka <frame>, která definuje pravé okno. A přesně podle toho musíme v Internet Exploreru používat i atribut frameborder. Zkusíme-li následující příklad, zjistíme, že mezi oběma okny rámu není žádná čára:

Zmizení čáry vzniklo proto, že všechny tři značky, které vytvářejí čáry mezi okny v rámu mají nastavený atribut frameborder="0". Pokud některý z těchto tří atributů začnete nastavovat na 1, objevují se vám postupně jednotlivé části čáry mezi oběma okny rámu.

A to je pro dnešek vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.