Sedm užitečných tipů k tvorbě WWW stránek - Builder.cz - Informacni server o programovani

html_obecne

html_obecne

16. října 2001, 00.00 | Dnes se seznámíte se sedmi užitečnými tipy k tvorbě WWW stránek - například Odkaz na počátek právě prohlížené stránky, Používání exotických fontů písma, Podtržení jinou barvou než je barva textu, Otevření nového okna prohlížeče na celou obrazovku..

Dnes se seznámíte se sedmi užitečnými tipy k tvorbě WWW stránek - například Odkaz na počátek právě prohlížené stránky, Používání exotických fontů písma, Podtržení jinou barvou než je barva textu, Otevření nového okna prohlížeče na celou obrazovku..

Odkaz na počátek právě prohlížené stránky

Určitě jste se již setkali s weby, které obsahují ve své patičce odkaz na počátek právě prohlížené stránky (z českých serverů to používají například Novinky) - odtud se většinou návštěvník může dostat do dalších částí webu a spokojeně pokračovat v návštěvě stránek. Takový odkaz lze vytvořit následujícím zápisem:

Internet Explorer 4 a 5.x, Netscape Navigator 4.x a Opera 5 již žádný další zápis nepotřebují - kotva TOP se nemusí uvádět ve zdrojovém kódu stránky (pomocí <A NAME="TOP"></A>), protože vždycky vede na počátek stránky. Bohužel se to samé nedá říct o Netscape Navigatoru 6 a Mozille 0.9.3 - zde se po kliknutí na odkaz nic nestane. Zřejmě nejjednodušší by bylo doplnit začátek stránky (hned za tagem BODY) o zápis <A NAME="TOP"></A>, aby ani NN 6 a Mozilla neměly problémy s interpretací tohoto odkazu, ale v takovém případě by se všechny zde zmíněné prohlížeče po kliknutí na odkaz přesunuly těsně pod horní okraj stránky, což nevypadá zrovna esteticky. Proto je asi nejlepším řešením následující kód, který nejprve detekuje prohlížeč a podle toho vloží či nevloží na stránku potřebný kód:

Díky tomuto kódu bude odkaz fungovat i v Mozille 0.9.3 a NN 6, i když se oba prohlížeče přesunou pouze kousek pod horní okraj stránky. V ostatních zmíněných prohlížečích půjde vše bez problémů. Kompletní kód by tedy vypadal takto:

Používání exotických fontů písma

Je nepsaným pravidlem, že pro publikování na webu se používají tři základní fonty písma: patkové písmo (Times), bezpatkové písmo (Arial) a neproporciální písmo (Courier). Celá řada uživatelů ale má na svém počítači nainstalované další pěkné fonty, s jejichž pomocí se dají webové stránky velmi oživit. Kaskádové styly (CSS) nám naštěstí umožňují definovat více fontů, které se hledají postupně, tzn. pokud není nalezen první font, hledá se druhý font atd. Díky tomu můžeme naše stránky obohatit např. o neokoukané písmo Verdana:

Návštěvníkům, kteří na svém počítači mají nainstalované písmo Verdana, se text zobrazí v tomto písmu, ostatní ho pak uvidí v podobném písmu Arial. Nemusíme ale zůstat jen u "normálních" písem, pro nadpisy se skvěle hodí například písmo Lucida Console nebo Monotype Corsiva... vše záleží jen na vaší fantazii. Jen si vždy prohlédněte stránku také s fontem, v kterém ho uvidí uživatelé, kteří nemají vámi vybrané písmo nainstalované.

Podtržení jinou barvou než je barva textu

V tomto tipu vám ukážu, jak dosáhnout podtržení textu jinou barvou, než jakou má text - toto zvýraznění zatím není na stránkách příliš používané, a tak má značnou šanci uživatele zaujmout:

A takhle to bude vypadat v prohlížeči:

Černý text podtržený červeně

Tento zápis zobrazí správně prohlížeče Internet Explorer 5.x, Netscape Navigator 6, Opera 5 a Mozilla 0.9.3. Internet Explorer 4 nezobrazí žádné podtržení, Netscape Navigator 4.x sice podtržení zobrazí, ale v černé barvě.

Celé to ještě můžeme doplnit o ovladače událostí onMouseOver a onMouseOut:

A jak to bude vypadat:

Po přejetí myší se podtržení zbarví do modra

Všechny prohlížeče kromě Opery 5, které podporují podtrhávání textu odlišnou barvou, podporují i tento skript pro změnu barvy podtržení.

Otevření nového okna prohlížeče na celou obrazovku

Jistě jste již někdy zatoužili otevřít svou stránku návštěvníkovi na celou obrazovku. Novější prohlížeče ve spojení s JavaScriptem vám to umožní. Rozhodně vám ale doporučuji se návštěvníka nejdříve zeptat, jestli o to vůbec stojí, případně ho upozornit, že okno může zavřít pomocí klávesové zkratky ALT-F4 - jinak by se vám také mohlo stát, že návštěvník bez ohledu na obsah vašich stránek odejde. A nyní již k samotnému JavaScriptovému kódu, který tuto taškařici umožňuje:

Ještě doplním, jak jsou na tom s podporou "fullscreenu" jednotlivé prohlížeče. Internet Explorer od verze 4 zobrazí kromě stránky pouze scrollbar, Netscape Navigator 4.x rám okna, scrollbar a dolní lištu Windows, Netscape Navigator 6 s Mozillou 0.9.3 rám okna a scrollbar a Opera 5 fullscreen nepodporuje.

Smazání textu ve formulářovém políčku po nastavení kurzoru na políčko (komfortní verze)

Pokud používáte ve formulářích textová políčka s předepsaným textem, který má návštěvník změnit, pak se vám jistě bude hodit následující tip. Umožní vám po nastavení kurzoru na políčko text vymazat:

Tento skript má ale jednu chybu - pokud totiž návštěvník našich stránek bude chtít vyplněnou hodnotu v políčku později opravit, opět mu text nejprve celý zmizí. Zde je tedy upravená verze skriptu:

A takhle to bude vypadat v praxi:

Odeslání formuláře odkazem

Při tvorbě stránek se většinou nevyhneme používání formulářů. Ty jsou velmi podobné na všech stránkách, proto není od věci návštěvníkovi surfování trochu osvěžit - toho můžeme - mimojiné - dosáhnout nahrazením tlačítka pro odeslání textovým odkazem se stejnou funkcí:

Tento kód musíme samozřejmě uvést uvnitř tagu FORM (mezi <FORM> a </FORM>)

Znemožnění odeslání formuláře

Pokud pracujete s formuláři prostřednictvím JavaScriptu, pak často potřebujete, aby formulář nebylo možné odeslat na server. Toho dosáhneme pomocí následujícího zápisu:

A to je pro dnešek vše. Doufám, že vás nějaký z dnešních tipů zaujal a těším se někdy příště na shledanou.