Dizajn fixných a relatívnych webov

06.05.2008

Pokúsim sa Vám vysvetliť, aký typ tvorby webu vyhovuje Vášmu štýlu. Článok uvádzam hlavne pre pokročilých tvorcov.

Autor: Andrej „BraXa" Kmotorka | Hodnotenie:

Ako sme si ukázali v príspevku Rozhodnutie o rozlíšení, forma stránky je značne ovplyvnená práve touto fázou vývoja. Zopakujem príklad. Web vytvorený pre rozlíšenie 1 024 x 768 nebude pri rozlíšení 1 280 x 1 024 meniť svoju veľkosť tak, aby vyzeral rovnako. Avšak dokážeme využiť spôsob, aby web menil dynamicky svoju veľkosť aspoň vo vodorovnom smere. Teda vyplní plochu 1 280 pixelov. Stránka, ktorá sa dokáže prispôsobovať práve nastavenému rozlíšeniu nesie názov relatívna stránka.

Medzi hlavné výhody takéhoto webu patrí fakt, že pri akomkoľvek rozlíšení web zaplní celú plochu monitora. Užívateľ nemusí byť spokojný, keď web zaplní len časť. Môže to pôsobiť veľmi rušivo. Relatívny web dokáže zaplniť plochu monitora aspoň vo vodorovnom smere.

Samozrejme, aj pri tejto metóde nemôžeme zabudnúť na nevýhody. Je to hlavne fakt, že dochádza k akémusi narušeniu rozvrhnutia, aké videl dizajnér pri tvorbe. Najvhodnejším príkladom je zmena umiestnenia prvkov na stránke. Pri zmene rozlíšenia monitora sa zmení aj poloha každého prvku, čo môže pôsobiť rušivo, ak sa grafik snažil zosúladiť obrázok s textom alebo podobne. Výskum amerických vedcov zistil, že koncový používateľ nečíta text, akonáhle dosiahne určitú šírku. Toto je hlavná nevýhoda používania relatívneho webu. Webdizajnér nevie, ako budú stránky pri tom ktorom rozlíšení vyzerať. Mám rád, keď viem, ako bude stránka vyzerať vo finálnej verzii. Ak chcem použiť relatívny web, nie je možné vytvoriť presne rozmiestnenú stránku. Pri inom rozlíšení by som ju pravdepodobne nespoznal ;)

Prejdem ku koncu problému a to je otázka: „Ako to spravím?“ Odpoveď je úplne jednoduchá. Ak ste počas čítania článku nezistili rozdiel, teraz Vám ho poviem. Pri fixnom webe uvádzame umiestnenie prvku stránky s „presnou polohou“ – hodnota v pixeloch. Pri relatívnom webe všetky hodnoty píšeme v percentách, prípadne v alignoch center, right, left a pod.

Navrhujem vyskúšať používať obe metódy. Neskôr zistíte, čomu dáte prednosť. Či „zaplneniu šírky monitora“ alebo „presnému rozmiestneniu“.

Vytvorenie verzií webu pre rozličné rozlíšenia

Ak je naozaj výsledný vzhľad príliš dôležitý a nechceme použiť relatívny web s určitými nedostatkami, existuje ešte jeden spôsob. Náročný na projektovanie, náročný na údržbu, ale výsledný efekt je bezchybný. Vytvoríme jeden web s rôznymi variáciami pre každé rozlíšenie. Pomocou jazyka JavaScript je možné zistiť rozlíšenie monitora a automaticky presmerovať užívateľa na verziu stránky presne pripravenú.

A čo ak sa stretnem s prehliadačom, ktorý ma zakázaný JavaScript? Môžem vytvoriť relatívnu stránku, ktorá upozorňuje na nedostatok, alebo použiť jazyk PHP, ktorý uvedenú funkciu zvládne tiež. Toto riešenie je veľmi časovo náročné, ale kontrola nad vzhľadom webu je stopercentná. Zrýchlenie je možné použitím databázy alebo súbormi s príponou .inc (možná je aj .txt), ktoré zahrnieme do tela stránky, využitím jazyka PHP.

Prikladám uvedený script:

<SCRIPT LANGUAGE = "Javascript">
<!--
sirkastranky = screen.width
if (sirkastranky = 800){url=("800x600.htm");}
else if (sirkastranky = 1024){url=("1024x768.htm");}
else {url=("najvacsie.htm")}
window.location=url
// -->
</SCRIPT>
<NOSCRIPT>
Máte zakázané používanie JavaScriptu, vyberte si prosím rozlíšenie:
<ul>
<li><a href="800x600.htm">800x600</a>
<li><a href="1024x768.htm">1024x768</a>
<li><a href="najvacsie.htm">Najväčšie rozlíšenie</a>
</ul>
</NOSCRIPT> 

V jazyku PHP zahrneme textový súbor nasledovne:

<?php
 
Include('stranka.inc');
 
?>