Jak udělat levé 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:

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.

Jak to udělat

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.

Umístění sloupečku vlevo

Rámy

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ů.

Tabulka přes celou stránku

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 kromě mě nikdo neuvědomuje), protože celá stránka se zobrazí až ve chvíli, kdy se načte celá ta tabulka.

<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>

Obtékaná tabulka

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.

<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á.

Pozicování

Pomocí CSS pozicování lze umístit libovolný objekt kamkoli do stránky. Pokud se hlavní text odšoupne kousek doleva (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.

<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ěžší.)

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ží.

Naplnění a aktualizace obsahu menu

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.

Ruční plnění a aktualizace

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).

Aktualizace editorem

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.

Některé modernější editory umožňují 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. (Například to umí FP 2000 komponentou 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.

Takové nahrazování existuje i v jiných programech nebo se dá napsat si na to vlastní program, třeba v Perlu nebo ve VB.

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á. Též se to nehodí 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 programu za ideální řešení. Někdy je označováno jako ASI (Author Side Include).

Do podobné kategorie patří i předgenerování HTML souborů z XML pomocí XSL.

Serverové skripty

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.

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 %>).

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"; ?>

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.

Předgenerování

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.

Použití IFRAME

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

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ů.

Vkládání obsahu JavaScriptem

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.

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.

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.

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).

Menu klikací mapou

Úplně nakonec mě napadla dosti kuriózní myšlenka, která by však měla být 100%ně funkční, protože se opírá o čisté HTML. Lze ji však použít jen na grafické odkazy a i aktualizace je poněkud pracnější, třebaže se při ní mění pouze dva soubory.

Těmi soubory jsou obrázek celého sloupečku (sloupecek.gif) a html soubor s definicí mapy aktivních oblastí (mapa.html). Obrázek sloupečku by měl mít nějaké výrazné oblasti, které budou svádět ke kliknutí, přičemž mapa zajistí funkčnost toho klikání.

<map name="mapa1">


<area href="index.html" shape="rect" coords="10, 10,
130, 50" title="Hlavní stránka">


<area href="druha.html" shape="rect" coords="10, 60,
130, 100">


<area href="kontakt.html" shape="rect" coords="10,
110, 130, 150">


</map>


<img src="sloupecek.gif" usemap="#mapa1">

Syntaxi klikacích map lze nastudovat v přehledu HTML u obrázků. Závěrečný obrázek je do souboru vložen kvůli snazší úpravě souboru v nějakém mapovém editoru. Aktualizace se pak nejlépe provádí tak, že se napřed překreslí obrázek sloupecek.gif a pak se v nějakém editoru přepíše stránka mapa.html.

Ačkoliv mě nenapadají žádné zřejmé nevýhody tohoto řešení, nikde jsem si jej zatím nepovšimnul.

Obsah

Hledání

Základní kurs

Editory

HTML tipy

Provoz webu

CSS styly

PŘEHLED VLASTNOSTÍ CSS

Nějaké záhlaví
Levé menu odkaz odkaz odkaz odkaz mail	Hlavní text stránky Text stránky je celý uzavřený v tabulce. Bla bla bla, spousta moudrých věcí.

Levé menu

Móda levého sloupečku

Jak to udělat

Umístění sloupečku vlevo

Rámy

Tabulka přes celou stránku

Obtékaná tabulka

Pozicování

Naplnění a aktualizace obsahu menu

Ruční plnění a aktualizace

Aktualizace editorem

Serverové skripty

Předgenerování

Použití IFRAME

Vkládání obsahu JavaScriptem

Menu klikací mapou