Vyšperkujte svoje webovské stránky IV. - Grafika.cz - vše o počítačové grafice

12. května 2000, 00.00 | Tipy, postupy a návody, jak vylepšit Vaše webovské stránky (po grafické i technické stránce). Tentokrát: rámy jak je možná neznáte, rychlejší tabulky a obrana proti změnám designu pomocí prohlížeče

Po určité odmlce je tu pro Vás další díl užitečných tipů, postupů či vylepšení pro Vaše webovské stránky. Dnes tu máme tip jak eliminovat zvětšování písma pomocí prohlížeče, jak rychleji zobrazovat tabulky a závěrem rámy, jak je možná neznáte.

11) Neměnná velikost písma

Velikost písma je sice většinou na každé stránce definovaná a to u každé části textu třeba jiná, nicméně většina prohlížečů webovských stránek umožňuje, aby si uživatel explicitně volil velikost písma. Velikost písma se mění relativně vůči hodnotám nastaveným tvůrcem stránky, rozdíl mezi velikostí jednotlivých částí textu na stránce tedy zůstane zachována. Co zachováno nejspíše nebude, je celkový design stránky. Především zvěšením písma (tj. např. volby Velké, Největší v MS IE), může způsobit velmi nepěkné rozházení jednotlivých objektů. Do jisté míry lze rozházení objektů eliminovat rozmístěním objektů do tabulky. Bohužel jen do jisté míry. 

Naštěstí existuje metoda, jak zamezit uživateli měnit velikost písma prostřednictvím jeho prohlížeče.  Resp. metoda umožňující definovat  neměnnou velikost pro text, který nebude jakkoli definován pomocí  <font size="n">text</font>. Jakmile tedy použijete <font size="n">text</font>, funkce "neměnná velikost" bude pro text obsažený mezi tagy  <font> a </font> pryč. Funkci neměnné velikosti lze definovat pomocí definování stylu pro BODY, který vložíte do hlavičky (mezi tagy HEAD).
Např.:

<style>
<!--
body { font-size: 10pt }
-->
</style>

Musíme si uvědomit, že velikost pro BODY je definována stylem, proto je dobré uvést za číslem označujícím velikost i jednotku, tedy pt (points) nebo px (pixels). 

12) Rozdělte si tabulky

Téměř každá webovská stránka je tvořena pomocí tabulek. Tabulky umožňují poměrně efektivní způsob rozmístění jednotlivých objektů na stránce, jde o způsob poměrně starý a tedy kompatibilní i se staršími verzemi prohlížečů. Problém je v tom, že pokud vytvoříte velmi dlouhou tabulku, bude trvat celkem dlouho (to je samozřejmě relativní, zaleží na tisíci okolnostech)  než se vůbec zobrazí. Lepší způsob je zamýšlený obsah tabulky rozdělit do více tabulek (začínajících <table>  a končících </table>). První "malá" tabulka se zobrazí totiž mnohem dříve, než by se vůbec objevila "velká" tabulka. Návštěvník stránky bude tedy moci vidět mnohem dříve například nadpis, logo či obsah (odkazy) Vašich stránek, umístěný nejspíše v první načtené tabulce.

K dokonalému pochopení pomůže porovnání "správného" a "špatného" zápisu:

13) Není rám jako rám 

Klasické rámy (frames) nemusím asi většině z Vás představovat. Ale přeci jen se o nich pro nezasvěcené krátce zmíním. Rámy - způsob pomocí nějž můžeme do jednoho okna prohlížeče načíst více stránek (přesněji souborů). Rámy jsou definovány v .htm souboru pomocí tagu FRAMESET, jehož obsah určuje odkazy na stránky (.htm soubory), které  se mají do daného okna načíst a určuje část okna která je jednotlivým stránkám vyhrazena (zjednodušeně: např. horní polovina - jedna stránka, dolní polovina - druhá stránka). 

Klasické rámy vyhovují většině účelů a proto jsou hojně používány. Někdy by se nám ale hodilo "vložit" jinou stránku do stránky hlavní tak, že bychom definovali určité místo na hlavní stránce, kam se jiná stránka (jiný soubor) má načíst. 

Přesně toto umožňuje tag IFRAME. A kdy se takový IFRAME hodí? Jistě jste již narazili na stránku, která obsahuje nějaké smluvní ujednání a zde se velmi často k zobrazení smlouvy používá formulářový prvek TEXTAREA se scrollbarem (posuvníkem). Tento způsob neumožňuje klasické formátování textu a vylučuje vkládání obrázků aj. objektů. Elegantnějšího výsledku dosáhnete pomocí IFRAME.  Na příslušné místo v dokumentu vložíme například:

<IFRAME name=mujram
src="smlouva.htm"
frameborder=0
marginheight=0 marginwidth=0
width="100%" height="600"
scrolling=no>
</IFRAME>

• name - pojmenování rámu (nutno abychom do něj mohli načítat jiné stránky pomocí target="mujram")
• scr - definuje název souboru, který má být načten do rámu (iframe)
• frameborder - definuje šířku okraje rámu
• marginheight, marginwidth - definují odsazení obsahu rámu
• width, height - šířka, výška oblasti na hlavní stránce, kam se má jiná stránka načíst (v procentech okna nebo v pixelech)
• scrolling - nabývá hodnot yes (scrollbar se zobrazí vždy), no (scrollbar se nezobrazí nikdy), auto (standardní - scrollbar se zobrazí pokud je to třeba, tj. pokud je jiná stránka velikostně větší než pro ní vyhrazený prostor) 

A takto může vypadat vycentrovaný rám o velikosti 250x100:

A to je pro dnešek všechno. Jste zahlceni, jde Vám z těch tagů u hlava kolem? Slibuji, že příště si dáme i něco oddechovějšího.

Předcházející díly seriálu:
1. díl (tipy 1-4), 2. díl (tipy 5-7), 3. díl (tipy 8-10)