Skládání stránek z kousků

jak snadno aktualizovat větší web

Ruční plnění a aktualizace - Aktualizace programem u autora - Serverové skripty - Redakční systémy - Použití iframe - Vkládání Javascriptem - Zmínka o rámech - Co tedy použít

Každý větší web potřebuje na všech stránkách některé kousky kódu opakovat. Například menu, hlavičku nebo patičku. Zásadní problém je tento:

Což je děsná škoda, ale je to prostě tak. S tím je potřeba se vyrovnat. Existuje hodně postupů, jak to vyřešit, ale žádný kvalitní postup není moc snadný. Možnosti jsou následující:

V tomto textu probírám různé možnost vkládání opakovaného obsahu do více stránek na příkladu levého menu. Prakticky stejně se zachází s hlavičkou, patičkou a jinými částmi stránek.

Levé menu má nějaký obsah, nejčastěji je tam kupa odkazů a pro zjednodušení předpokládám, že je na všech stránkách stejné. Takže se nevyplatí psát menu pro každou stránku znovu a je potřeba nějak si to usnadnit. Ideální je mít obsah menu uložený jenom na jednom místě (v jednom souboru) a mít nějaký mechanismus, aby se při změnách menu nemusely úpravy provádět vícekrát.

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 někdy zkusil něco desetkrát kopírovat, ten ale 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; pak 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í. Pro většinu lidí je prostě otevření a přepsání deseti souborů jednodušší než vymýšlení programů nebo jiných šíleností (viz níže).

Aktualizace programem u autora

Aktualizace programem 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 (vkládaném) souboru, program (editor) jej nakopíruje do ostatních stránek, stránky se vygenerují na disku a na server už se odesílají jen čisté vygenerované HTML stránky.

Nevýhodou těchto řešení je nutnost shánění software, který toto umožňuje. Také se pak ten projekt hůře přebírá jiným správcem, jenž použitý software nemá. Navíc je pak projekt trochu omezený na to, co daný software dokáže.

Programů, které něco takového umějí, není mnoho. Znám jenom FrontPage a Dreamweaver. Program EasyBlog to umí také, ale ten lze rozumně použít pouze pro tvorbu blogu. Trochu složitější je exportní program PPWizard, který umí poskládat opravdu zajímavé věci, ale je trochu těžší na nastavení.

Příklad s programem FrontPage

Takže například program FrontPage umí vložit do stránky obsah jiné stránky nebo souboru. Potom umí při změně této vložené stránky všechno zaktualizovat, to jest nakopírovat její obsah do ostatních stránek. 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. Do každé stránky, kam se obsah tohoto souboru má vložit, se přidají poznámkové značky, které programu FrontPage říkají, co tam má vložit:

<!--webbot bot="Include" u-include="sloupecek.html" tag="BODY" -->

<!--webbot bot="Include" endspan -->

Při ukládání jakékoliv stránky, která obsahuje tyto poznámky, si FrontPage sáhne do souboru sloupecek.html a do ukládané stránky mezi zmíněné poznámky doplní jeho obsah.

DWT šablony

DWT šablona je soubor s příponou .dwt, jehož zápis vypadá jako obyčejná HTML stránka. Umí ji zpracovávat programy FrontPage 2003 a Dreamweaver MX 2004. Tato dwt stránka je doslova šablonou -- obsahuje hlavičku, menu a patičku tak, jak se má objevit v normální výsledné stránce. Pouze na místě, kde se bude objevovat měnící obsah, má poznámku #BeginEditable. Symbolický zápis dwt soboru:

hlavička
menu
<!-- #BeginEditable "text" --> <!-- #EndEditable -->
patička

Kde "text" je volitelné pojmenování dané oblasti. Běžná šablona má obvykle tyto oblasti dvě, jednu pro titulek a jednu pro vlastní obsah. Ale může jich mít víc.

Při psaní nějaké nové stránky stačí stránku k šabloně "připojit". Stránka si do sebe uloží další poznámku, že patří k šabloně, a text stránky se automaticky nalije mezi upravovatelné poznámky. Potom:

Skutečná nevýhoda tohoto postupu spočívá v tom, že bez FrontPage nebo Dreamweaveru je k ničemu. Další problém je v tom, že možnost aktualizace stránek jinými prostředky je pak omezná. Nicméně se jedná o natolik silný nástroj, že jsem se jej rozhodl použít na většinu svých webů včetně Jak psát web (prostě tyto stránky).

Předgenerování u autora exportním programem

Ne každému se líbí FrontPage nebo DreamWeaver, 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 (například PHP spouštěné z příkazového řádku), 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 je lepší použít serverové skripty s předgenerováním.

Všeobecně považuji aktualizaci statického webu pomocí nějakého editoru nebo exportního programu za ideální řešení. 

Serverové skripty

Kdo má na serveru nainstalované a povolené serverové skripty (nutno objednat v rámci hostingu), může obsah levého sloupečku vkládat pomocí nich. Vkládání fragmentů kódu podporují snad všechny serverové skriptovací jazyky. Například SSI (Server Side Include), ASP (Active Server Pages) a PHP (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 (např. tedy php).

Je dobré si připravit soubor s obsahem levého sloupečku, např. sloupecek.html, ale bez HTML hlaviček a bez tagu <body>.

Na místo v kódu běžné stránky, 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 každá stránka se vlastně při každém požadavku od čtenáře 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.

Příklad s PHP

Dejme tomu, že soubor sloupecek.php bude obsahovat třeba tento html kód:

<div id="menicko">
<a href="prvni-stranka.html">první stránka</a><br>
<a href="druha-stranka.html">druhá stránka</a><br>
</div>

Budu chtít tento sloupeček vložit do všech stránek serveru. Takže do každé obsahové stránky umístím na správné místo takovouto značku:

začátek stránky
<?php include "./sloupecek.php" ?>
<div id="text-stranky">A stránka vesele pokračuje

Konkrétní umístění menu na stránce potom zařídí CSS styly, nejlépe přes id menicko pomocí float.

Přitom předpokládám tři věci:

Tento příklad, jak jsem jej naznačil, má sloužit pouze pro ilustraci postupu. V praxi se používá různých dalších fíglů. Například se menu většinou nevkládá php značkou do všech obsahových stránek, ale naopak se všechny obsahové stránky vkládají (includují) do jednoho souboru, který se volá parametrem (např. adresa pak vypadá: index.php?stranka=kontakt). To už přesahuje záměr této stránky.

Předgenerování

Includování přes PHP moc nezdržuje (skoro vůbec), ale velké a důležité servery (např. Novinky.cz), které musejí optimalizovat výkon, stránky raději nějakým programem předgenerovávají a poukládají na serveru do html souborů. 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 v html a nemusejí ji znovu sestavovat, což je rychlejší a méně to zatěžuje server.

Redakční systémy

Hodně lidí tvoří stránky v programech, které se instalují na serveru. Říká se jim redakční systémy, anglicky Content Management Systems (CMS). Téměř všechny vyžadují nějakou podporu skriptování na straně serveru (v drtivé většině vyžadují PHP). Serverové redakční systémy zpravidla vkládání opakovaných menu a patiček řeší dost inteligentně. Některé systémy na to mají šablony, jiné celé formulářové rozhraní. Prostě to už bývá vyřešené.

Existuje hodně redakčních systémů, hodně jich je zdarma, spousta jich je špatných.  Jak se trvalé připojení k internetu stává běžné (psáno 2005), redakční systémy jsou stále oblíbenější, protože po instalaci už je práce s nimi snadná a články v nich mohou psát i relativní lamy. Protož stránky tvořené redakčními systémy začínají tvořit převážnou část internetového obsahu.

Chcete-li si rozběhnout vlastní redakční systém, musíte si jej vybrat, odněkud stáhnout, nainstalovat na serveru (často stačí prostě nakopírovat soubory na server s podporou PHP) a nakonfigurovat (upravit soubor s nastavením připojení k databázi apod.). Není to až tak triviální, protože dost často něco nejde a obvykle po instalaci zjistíte, že jste stejně vybrali blbý systém, ale chybami se člověk učí.

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í všechny jejich slabiny. Dříve se iframy nepoužívali kvůli tomu, že existovaly prohlížeče, které je nepodporovaly (Netscape 4). Takové prohlížeče už ale zmizely (naštěstí) a iframe můžete v klidu používat.

Iframe na vkládání menu

Fígl spočívá v tom, že do každé obsahové stránky vložím na správné místo iframe s menu. Jak to vypadá:

<body>
<div id="leve-menu">
<iframe src="sloupecek.html" width="150" height="900"></iframe>
</div>
<div id="text-stranky">Text stránky</div>
</div>

Rozmístění prvků na stránce se pak opět udělá CSS styly, v tomto případě asi nejlépe obtékáním nebo pozicováním.

Jako atributy iframe 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 proklikávaly do celého okna, ne pouze do toho mrňavého sloupečku. 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 sloupečku.

Iframe na vkládání obsahu

Spousta lidí používá trochu opačný přístup. Udělají si hlavní stránku (třeba index.html) s vypsaným menu a na místo obsahu vloží velký iframe. Odkazy z menu posílají do toho iframe. Nějak takhle:

<body>
<div id="leve-menu">
<a href="uvodni-text.html" target="hlavni">úvodní stránka</a><br>
<a href="druha-stranka.html" target="hlavni">druhá stránka</a><br>
...
</div>
<div id="text-stranky"><iframe src="uvodni-text.html" width="80%" height="80%" name="hlavni"></iframe></div>
</div>

Na první pohled to vypadá složitější, ale je to jednodušší, protože potom vnitřní stránky, načítané do iframu, jsou prostý html text bez jakýchkoli ptákovin. Takže se to hodně používá. Jak ale vysvětlím dále, tato elegance zároveň způsobuje největší problém této metody.

Iframe: Lepší je vkládat menu

Co se stane, když vyhledávač najde obsahovou stránku, do které je vloženo menu přes iframe? Všechno je v pořádku -- uživatel vidí jak stránku, tak menu.

Co se ale stane, když uživatel přes vyhledávač přijde na obsahovou stránku, která je zamýšlena tak, že se má načítat do iframu? Má být obalena iframem s menu, ale není, vyhledávač našel přímo ji. V tu chvíli má čtenář problém, protože nikde žádné menu nevidí a neví, kde se ocitl.

Jestliže tedy někdo používáte na automatizaci menu tag iframe, tak

Má to pak navíc tu zajímavou výhodu, že můžete do různých stránek (třeba do podsekcí) vkládat různá menu.

Vkládání 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.

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 (já to nemám rád, někde to opište).

Zmínka o rámech

Rámy jsou velmi oblíbené právě z toho důvodu, že umožňují velmi snadnou aktualizaci různých menu. Jakmile se třeba vytvoří nová obsahová stránka, stačí přidat odkaz do menu v jednom souboru (v tom souboru, který se načítá do menu).

Syntaxi rámů a příklady najdete na stránce o rámech, zde to nemá cenu opakovat. Podstatné ale je, že rámy mají spoustu nevýhod, a proto je jako hlavní nástroj na navigaci na udržování webu striktně nedoporučuji. Jako hlavní nevýhodu zpravidla uvádím (stejně jako výše u iframu) tak zvanou "stránku sirotek". Uživatel přijde z vyhledávače na stránku s obsahem, ale nevidí menu, protože hlavní rámová struktura se nenačte.

Co tedy použít

Výše jsem nastínil několik metod na aktualizaci opakovaných částí stránek. Počítám, že méně protřelí čtenáři v tom mají totální hokej, a tak to shrnu, abyste si mohli vybrat metodu, která se bude nejlépe hodit pro vaše stránky.

způsob aktualizace výhody nevýhody předpoklady typ ideálního projektu
ruční nemusí se přemýšlet úmorné kopírování při jakékoliv změně čas malé stránky
u autora editorem (FP, DW) můžou s tím dělat pověřené lamy. Statické stránky podporované všemi technologiemi. drahý program, omezení technologie na to, co ten program umí. Odesílání mnoha stránek přes FTP. program, většinou drahý větší statické stránky s jednoduchou strukturou
u autora exportním programem (PPWizard) robustní systém, dělá přesně to, co má. Statické stránky jsou podporované všemi technologiemi. zpravidla složitý exportní program, složitější tvorba šablon. Odesílání mnoha stránek přes FTP. ten program, často zdarma větší statické stránky se složitější strukturou
serverové skripty (PHP) spolehlivost, v podstatě standardní způsob řešení někomu na správu vadí soubory s příponou .php na serveru musí běžet skriptování (většinou PHP) složitý projekt, např. obchod
redakční systém mohou s tím dělat lamy obtížná instalace, systémy neumějí zrovna to, co potřebuju, různá omezení podpora skriptu na serveru, často i databáze složitý projekt, na němž se má podílet více autorů
Iframe, vkládání menu relativní jednoduchost Nutno znát přesné rozměry menu. Některé obskurní prohlížeče iframe nepodporují (je jich méně než 1%) nic jednodušší projekty
Javascript možnost vložit téměř libovolný obsah někdy dá práci to odladit, trochu komplikovanější syntaxe, blbě se hledají chyby podpora javascriptu (98% prohlížečů) větší statické stránky s jednoduchou strukturou
Rámy relativní jednoduchost jsou prostě příšerné nic staré projekty, které se mi nechce předělávat

Je možné, že znáte ještě jiné metody tvorby stránek, ale ty hlavní se mi snad podařilo postihnout.

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Barvy Provoz webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.