tvorba a údržba rozvržení stránky
Umístění sloupečku vlevo - Naplnění a aktualizace obsahu menu
Dnes už skoro nepotkáte stránku, která by po levé straně neměla proužek s odkazy. Většinou vypadá rozvržení stránek takto:
| Nějaké záhlaví | |
| Levé menu odkaz odkaz odkaz odkaz |
Hlavní text stránky
Text stránky je celý uzavřený v tabulce. Bla bla bla, spousta moudrých věcí. |
Takovéto rozvržení přináší mnoho výhod, jako například přehlednost, stejný motiv příbuzných stránek nebo zúžení hlavního textu. Někdy se přidává ještě pravý sloupeček, ideální to místo pro reklamy a upoutávky.
Většina používaných postupů se dá dobře ilustrovat při omezení výkladu na tvorbu levého sloupečku. S tím jsou spojeny dva problémy, lépe řečeno rozhodnutí:
Naplnění a údržba velmi závisí na konkrétních podmínkách autora. Umístění sloupečku odkazů vlevo je problém užší -- omezuje se na HTML, popřípadě CSS, takže tím začnu.
Možnosti:
Z metodiky rámů se vlastně obliba levého sloupečku vyvinula. Rámy představují velmi snadnou cestu tvorby a aktualizace levého sloupečku (a historicky nejstarší). Mají však řadu chyb a problémů, kvůli nimž tuto metodu nemohu doporučit těm, kteří berou stavbu webu vážně. Zájemce odkazuji na základy rámů.
Dnes nejoblíbenější metoda získala mnoho kladných bodů svojí spolehlivostí, protože se ve všech prohlížečích zobrazuje skoro stejně. Drobnou nevýhodou je pomalé zobrazování stránky (mám občas pocit, že si to nikdo neuvědomuje), protože celá stránka se zobrazí až ve chvíli, kdy se načte celá ta tabulka.
Příklad jednoduché tabulky přes celou stránku:
<body>
<table border="0" cellpadding="6" cellspacing="0">
<tr> <td bgcolor="barva" width="150">Levé menu</td>
<td bgcolor="barva" width="600">Text stránky</td>
</tr> </table>
</body>
Detaily této metody lze nalézt u designu pomocí tabulek.
Tabulky se mohou nechat "plout" ve stránce, takže je ostatní text obtéká. Občas se toho využívá pro vytvoření jednoduchého levého nebo pravého sloupečku.
Text stránky, |
V HTML kódu to vypadá nějak takhle:
<body>
<table border="0" align="left"
width="150" bgcolor="barva"><tr>
<td>Levé menu</td></tr></table>
Text stránky
</body>
Je dobré všimnout si nastavení obtékání pomocí align=left (align=right je obtékání z druhé strany) a pevné šířky, bez níž by se sloupeček asi roztáhnul přes celou stránku.
Jakmile skončí obtékaná tabulka, nasouvá se hlavní text pod levý sloupeček. Tomu lze zabránit pouze nastavením výšky tabulky se sloupečkem na nějakou velikou hodnotu, například height="1000" nebo 10000. Nepříjemný efekt je potom ovšem extrémně velký prostor pod koncem stránky, což je důvodem, proč se toto řešení málo používá.
Tento text byl psán v době, kdy CSS styly ještě nebyly moc podporované v prohlížečích. Dnes (myslím tím 2003) se namísto plovoucí tabulky dá použít plovoucí oddíl = tag <div>. Stylem se mu nastaví obtékání (float) a šířka (width):
<div style="float:left; width: 150px">plovoucí oddíl</div>
text stránky
Tím se nahradí tabulka, ale nevyřeší se to, že se text stránky cpe pod ten obtékaný prvek. Řešení ale existuje a totiž uzavřít text stránky taky do divu a tomu dát buď taky float: left a šířku:
<div style="float:left; width: 150px">plovoucí oddíl</div>,
<div style="float:left; width: 600px">text stránky</div>
nebo mu dát margin-left: 150px:
<div style="float:left; width: 150px">plovoucí oddíl</div>
<div style="margin-left: 150px">text stránky</div>
Pomocí CSS pozicování lze umístit libovolný objekt kamkoli do stránky. Pokud se hlavní text odšoupne kousek doprava (ať už pozicováním nebo nastavením margin-left), zbude vedle něj místo, kam lze umístit absolutně pozicovaný levý sloupeček.
Příklad:
<body style="margin-left: 150px">
Text stránky
<div style="width: 150px; position: absolute; left:
0px; top: 0px">
Levé menu
</div>
</body>
Propracovanější příklad (trochu jinak strukturovaný) je popsán u tvorby sloupců pozicováním. (Pravý sloupeček lze takhle také udělat, je to trochu těžší.) Použitý tag <div> se používá na obalování větších kusů textu.
Některé starší prohlížeče a editory nerozumějí pozicování, těch je ale dnes už málo. Takže jediným dnešním problémem této metody je prázdné místo pod bočními sloupečky, ale i to má řešení (popsané v sloupcích pozicováním).
Fantastická výhoda tohoto řešení spočívá v tom, že (narozdíl od tabulek) se sloupečky (a případné hlavičky) načítají až po hlavním textu a zobrazuje se to hned. Díky tomu čtenář nemusí moc čekat. Samozřejmě se sloupečky mohou načítat předem, prostě na pořadí nezáleží.
Levé menu má nějaký obsah (nejčastěji je tam kupa odkazů). Protože ten obsah bývá na všech stránkách stejný, nevyplatí se psát ho pro každou stránku znovu, ale je třeba to nějak usnadnit. Žel, jazyk HTML neumožňuje vložení jiného souboru do kódu. Je ale mnoho možností, jak to obejít:
Toto je obecný přehled metod pro vkládání jakýchkoliv automatických prvků, ne pouze levého sloupečku, ale třeba i patičky nebo záhlaví stránky. Ideální je mít obsah sloupečku uložený jenom na jednom místě (v jednom souboru), aby se úpravy nemusely provádět vícekrát.
Kdo používá rámy, nemusí se plněním a aktualizací sloupečku zabývat, rámy to udělají samy.
Je to jednoduché -- sloupeček odkazů se vytvoří na jedné stránce a do ostatních stránek se zkopíruje.
Kdo však někdy zkusil něco desetkrát kopírovat, ten chápe, že ruční plnění není ideální řešení. Nešikovnost se obzvlášť projeví ve chvíli, kdy je potřeba obsah menu změnit: následuje opětovné několikanásobné kopírování.
Přesto se ruční aktualizace vcelku často používá zejména u webů, které jsou malé (mají málo stránek), nebo které se zřídka mění. Je to prostě jednodušší než vymýšlení šíleností (viz níže).
Funguje na stejném principu jako ruční kopírování s tím rozdílem, že dřina je ponechána strojům. Veškeré změny se provedou v jednom souboru, editor jej nakopíruje do ostatních stránek a na server už se odesílá jen čisté HTML.
FrontPage umí vložit do stránky obsah jiné stránky nebo souboru a při změně vložené stránky všechno zaktualizovat, to jest nakopírovat. Používá na to komponentu Include Page.
Je praktické mít obsah sloupečku uložený v nějakém souboru, třeba sloupecek.html. Editor si potom nějakou poznámkou označí, kam se obsah tohoto souboru má vložit.
Například FrontPage si vkládá tuto poznámku:
<!--webbot bot="Include" u-include="sloupecek.html" tag="BODY" -->
A po ukončení vkládaného textu si poznamená:
<!--webbot bot="Include" endspan -->
Takové nahrazování jsem v žádném editoru kromě FrontPage neobjevil, ale dá se napsat si na to vlastní makro. Někdy je označováno jako ASI (Author Side Include). Nevýhodou těchto řešení je pouze nutnost shánění toho software, který to umožňuje. Také se pak ten projekt hůře přebírá jiným správcem, jenž použitý software nemá.
Ne každému se líbí FrontPage, a tak existují způsoby, jak si stránky "předgenerovat". Existují na to specializované programy, například PPWizard. Do podobné kategorie patří i předgenerování HTML souborů z XML pomocí XSLT procesoru. Většina lidí, kteří to tak dělají, si na to napsali vlastní program v nějakém oblíbeném jazyce, který do stránek obsah toho vkládaného souboru prostě vloží.
Po předgenerování se hotové stránky pošlou na server. Nehodí se to pro extrémně velké weby se vzdálenou tvorbou, protože aktualizace přes FTP pak enormně zatěžují linku -- tam se používají serverové skripty s předgenerováním.
Všeobecně považuji aktualizací pomocí nějakého editoru nebo exportního programu za ideální řešení.
Kdo má na serveru nainstalované a povolené serverové skripty, může obsah levého sloupečku vkládat pomocí nich. Z nejčastějších serverových technologií to dovolují SSI (Server Side Include), ASP (Active Server Pages) a PHP (hypertext preprocesor). Stránky potom ovšem nelze mít v souborech s příponou html, nýbrž je třeba použít koncovku asociovanou se serverovým skriptem.
Je dobré si připravit soubor s obsahem levého sloupečku (sloupecek.html, ale bez HTML hlaviček -- jenom část za <body>).
Na místo v kódu, kam má přijít vkládaný obsah, se napíše instrukce ve skriptovacím jazyce. Tuto instrukci najde server při odesílání stránky, vyhodnotí ji a vloží vkládaný soubor do výsledného kódu. Takže se vlastně každá stránka při každém požadavku znovu sestavuje.
| Technologie | přípona souboru | instrukce |
|---|---|---|
| SSI | .shtml | <!--#include file="sloupecek.html"--> |
| ASP | .asp | <!--#include file="sloupecek.html"--> |
| PHP | .php, .phtml a jiné | <? include "sloupecek.html"; ?> |
Jak je vidět, používají ASP pro vkládání souborů stejnou syntaxi jako SSI (pro jiné účely však oddělují instrukce znaky <% a %>).
Serverové skripty mají určité nevýhody. Například je lze prohlížet pouze na serveru; na domácím počítači se nezobrazují správně, pokud vůbec (leda přes softwarový server). Také trochu zatěžují výkon serveru, třebaže to už dnes nehraje takovou roli jako dříve.
Velké a důležité servery, které musejí optimalizovat výkon, používají serverové skripty na předgenerovávání stránek. Pokud se změní vkládaný soubor sloupecek.html, projdou se nějakým programem všechny stránky a nahradí se v nich napevno obsah toho sloupečku. Potom při požadavku na nějakou stránku už ji mají připravenou a nemusejí ji znovu sestavovat, což je rychlejší a méně to zatěžuje server.
Iframe je plovoucí rám, který se může vložit někam do stránky. Do toho rámu se potom načte jiná stránka (sloupecek.html). Výsledný efekt se skládá až v prohlížeči. Toto řešení využívá výhod klasických rámů, ale nedědí jejich slabiny. Jak to vypadá například při použití tabulky přes celou stránku:
<body>
<table border="0" cellpadding="6" cellspacing="0">
<tr> <td width="150">
<iframe src="sloupecek.html" width=150
height=900></iframe>
</td> <td width="600">Text stránky</td>
</tr> </table>
</body>
Jako atributy se používají jméno načítaného souboru, šířka a výška. Šířku je
dobré volit tak, aby se to tam vešlo, výšku podle toho, jak vysoký je obsah
sloupečku. Kdyby se zadaly malé rozměry, bude mít rám rolovací lišty.
Zobrazování lišt a rámečku lze zakázat přidáním dalších atributů
<iframe scrolling=no frameborder=0>.
Jestli budou ve vkládané stránce odkazy (a to většinou jsou), je třeba zařídit, aby se zobrazovaly v celém okně. Do hlavičky souboru vkládané stránky (sloupecek.html) je třeba přidat řádek
<base target="_parent">,
jinak se budou odkazované stránky objevovat v tom levém sloupečku.
Zásadní nevýhodou tohoto řešení je fakt, že Netscape 4.x tag <iframe> nepodporuje. Tam je třeba použít alternativní odkaz a stejně to není ono. Jedinou útěchou může být stále menší počet uživatelů tohoto prohlížeče. Prostudujte si kdyžtak podrobný popis plovoucích rámů.
JavaScript je programovací jazyk upravený speciálně pro kouzla s webovými stránkami. Je to klientský skript, což znamená, že jej provádí až klient, to jest počítač u čtenáře. Kromě jiných věcí umožňuje načítání skriptových souborů a zapisování do stránky.
Obsah sloupečku v tomto případě není uložen v html souboru, ale v souboru JavaScriptu s příponou .js. Soubor má oproti HTML trochu jinou (komplikovanější) syntaxi.
Ukážu na příkladu. Takto vypadá soubor sloupecek.js:
document.write("<a href='index.html'>Hlavní stránka</a><br>");
document.write("<a href='druha.html'>Druhá stránka</a><br>");
document.write("<a href='kontakt.html'>Kontakt</a><br>");
Příkaz JavaScriptu document.write zapisuje do proudu dokumentu
(uvnitř příkazu se nesmí zalomit řádka). Soubor lze samozřejmě rozšiřovat o
další instrukce JavaScriptu.
Do stránky se na místo levého menu vloží tento HTML tag:
<script language=JavaScript src="sloupecek.js"></script>
Při zobrazování stránky jej prohlížeč povšimne, stáhne si soubor sloupecek.js a provede skriptové instrukce (to jest zapíše na dané místo do stránky odkazy). Vtip je samozřejmě v tom, že jeden soubor skriptu může být takto načten do více stránek.
Nevýhody skriptového řešení:
Pokud se do JavaScriptu napíšou složitější instrukce, dá se takto v některých prohlížečích dosáhnout i efektu rozevíracího menu (někde to opište).
Zde jsem dříve publikoval příklad, ve kterém se načítala definice obrázkové mapy z jednoho souboru do druhého. Měl jsem to testované jenom ve starém Netscape a dnes už to prakticky nefunguje.
Vizte též: Design pomocí tabulek,
Sloupce CSS pozicováním,
Základní definice rámů, Div a span,
Problémy rámů, Iframe,
Programování stránek,
Jak začít s PHP,
JavaScript
Odkazy mimo: Základy správné
navigace, Kontextová
navigace, 6 základních
stylů navigace (vše Sova v síti)
o tvorbě, údržbě a zlepšování internetových stránek