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