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

jak snadno aktualizovat větší web

Ruční plnění a aktualizace - Aktualizace programem u autora - Předgenerování exportním programem - 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ů, které se to snaží ř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í. Je to pracné. 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).

V některých případech také mohou pomoci speciální hledací a nahrazovací programy, které umějí prohledat více souborů, něco v nich najít a nahradit v nich nalezený text jiným. Umí to třeba PSPad (zdarma), UltraEdit, FrontPage nebo Notepad ++ (zdarma). Jistě ale chápete, že to není příliš koncepční přístup pro budování webu.

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.

  1. Veškeré změny se provedou v jednom (vkládaném) souboru,
  2. program (třeba editor) jej nakopíruje do ostatních stránek,
  3. 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, Expression Web 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 dost těžký na nastavení. Další programy, které to zřejmě umějí, jsou Mihov Website Merger nebo Design Side Includes.

Pokud znáte další takové programy nebo máte s výše uvedenými nějakou přímou zkušenost, dejte mi prosím vědět.

Příklad s programem FrontPage nebo Expression Web

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, je třeba (jednou) přidat 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 doplní jeho obsah do ukládané stránky mezi zmíněné poznámky.

Program Expression Web 4 používá úplně stejné kódy jako FrontPage, které ovšem musíte zapsat ručně (nejdou vyvolat z menu)

Podobně to funguje v programu Dreamweaver. Tam se includy provádějí pomocí tak zvaných knihoven -- souborů lbi -- velmi podobně jako ve FrontPage.

Vkládání obsahu souborů je docela šikovné, ale ještě lepší mi přijde použití DWT šablon.

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, Expression Web 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 (tag <title>) 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, Expression Webu nebo Dreamweaveru je k ničemu. Další problém je v tom, že možnost aktualizace stránek jinými prostředky je pak omezená. 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 (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 (zdarma). 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ěžuje linku a trvá to dlouho -- 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, může obsah levého sloupečku či hlaviček vkládat pomocí nich. Serverové skripty se dříve musely objednat v rámci hostingu, ale dnes (2010) už je PHP skoro všude automaticky v ceně.

Vkládání fragmentů kódu podporují snad všechny serverové skriptovací jazyky. Například a zejména to umí PHP, SSI (Server Side Include) a ASP (Active Server Pages). 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, je třeba napsat instrukci 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
PHP .php, .phtml a jiné <?php include "sloupecek.html"; ?>
SSI .shtml <!--#include file="sloupecek.html"-->
ASP .asp <!--#include file="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 jimi vytvořené stránky lze prohlížet pouze na serveru; na domácím počítači se jako soubory 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 (vzhled není předmětem tohoto textu).

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.

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 a často též databázi MySQL). 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:

Není to až tak triviální, protože dost často něco nejde a obvykle po instalaci zjistíte, že jste si stejně vybrali blbý systém, ale chybami se člověk učí.

Mezi nejoblíbenější CMS patří:

Následující možnosti řešení hromadné aktualizace stránek bych nazval "klientskými", protože využívají technologií běžících v prohlížeči (javascript a rámy). Obecně jsou tato řešení považována za málo spolehlivá a k vidění jsou už zřídka.

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 u čtenáře. Toto řešení využívá výhod klasických rámů, ale nedědí jejich slabiny. Iframe tedy můžete v klidu používat. Výhoda aktualizace přes iframe je ta, že nevyžaduje žádný program na serveru ani u autora.

Iframe na vkládání menu

Fígl spočívá v tom, že do každé obsahové stránky ručně 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>

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> (více o iframe).

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

nebo přidat target="_parent" ke každému odkazu, 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>

Jde o postup jednodušší, protože potom vnitřní stránky, které se načítají 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, pak

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ší příkazy 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ě   malé stránky
u autora editorem (FrontPage, DW) můžou s tím dělat pověřené lamy. Statické stránky podporované všemi technologiemi. placený 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, mnoho studia 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, ale obecně cokoliv
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 (99% prohlížečů) větší statické stránky s jednoduchou strukturou
Rámy relativní jednoduchost velmi nepříjemné pro uživatele 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.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
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 Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.