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