Dobrý den, zde naleznete skupinu dokumentů, které mají usnadnit správu a orientaci v tomto webu.
Předpokládá se, že bude využíván program Microsoft FrontPage (součást Microsoft Office). Web používá jeho schopnost vkládání souborů (Insert->Component->Include Page) ke zvládání společných částí stránek (ty jsou fyzicky vloženy až při publikování stránek, umožňujíc tak soustředit správu těchto společných částí na jedno místo). Je možné, i když možná komplikované, přejít na jiný program s obdobnou schopností (pravděpodobně nějaký html preprocesor) .
Jakub Holý, 7.12.2003 po K.
Pro komentované zdrojové kódy stránek v adresáři
borders/ viz tytéž soubory s příponou ".komentovane".
Většina stránek má společné části, a to vrch (logo + titulek) a levé
menu.
Jinak je řešeno sdílení společných částí (html kódu) v sekci "body"
(mezi <body> a </body>) - k tomu je užito funkce "Include Page"
(viz níže), a jinak v sekci "head" (mezi <head>
a </head>)- zde nám FrontPage nic nenabízí, takže musíme společný kód
na každou stránku zkopírovat. Společná část v "head" je uzavřena
komentáři <!--SDILENE--> a <!--/SDILENE-->
(kterážto část je dále dělena komentáři <!--SDILENE-CSS--><!--/SDILENE-CSS-->
a <!--SDILENE-SCRIPT--><!--SDILENE-SCRIPT-->), takže
lze využít nahrazení textu. Doporučuji použít aplikaci JReplaceThem
(zdarma, java, i Java Web Start), která umí hledat a nahradit ve více
souborech (viz níže JReplaceThem & RegExp).
Definice společných částí v "body" jsou v samostatných souborech, které jsou pak jen na stránku vloženy pomoci funkce FrontPage zv. "Include Page", což se děje zdánlivě okamžitě, ale fyzicky se tak stane až při publikaci webu. Při úpravě původních souborů se změna projeví na všech stránkách. Dlužno podotknout, že FrontPage nezobrazuje stránky s naším levým menu správně, to ale není na závadu, v prohlížeči budou správně; má problém s tím, že soubory left_s_tabulkou-zacatek.htm a left_s_tabulkou-konec.htm neobsahují platné html (protože to vytvoří teprve tehdy, když jsou spojeny na jedné stránce).
Soubory:
Stránka se pak skládá z 2 tabulek:
Funguje jen pro moderní prohlížeče podporující standard W3C DOM (i když by se dalo přepsat i pro starší).
Vlevo je dynamické stromové menu, reagující na kliknutí otevřením příslušné stránky nebo rozvinutím podmenu. Je vytvořeno JavaScriptem přidáním různých elmentů do stránky na základě informací ze statického neuspořádaného seznamu odkazů (<UL>). Jako vstup je tedy seznam odkazů v určité formě (viz níže), JavaScript podle toho generuje nové, dynamické menu, a to statické skryje (tj. pokud browser potřebné technologie nepodporuje, uživatel vidí toto statické menu). Je možné buď dynamické menu při každém načtení stránky generovat znova (tak to je nyní), nebo je jaksi předgenerovat, příslušné HTML zkopírovat do borders/left.html a tamtéž nahradit řádek "aQuirkLeftMenu.generate();" řádkem if(aQuirkLeftMenu.showIfSupported()){document.getElementById('staticLMenuID').style.display= 'none';}.
Základem je zmíněný statický seznam s id="staticLMenuID", v němž jsou položky (items) dvojího typu:
Výsledek je zapsán do již existujícího a zatím prázdného <DIV> s id="dynamicLMenuID":
| Zdroj: statické menu s id="staticLMenuID" | => | Výsledek (HTML dynamického menu) [zkráceno] |
|---|---|---|
|
<UL id="staticLMenuID">
<li><a href="#">odkaz (link)</a></li> <li>nadpis (label) <ul> <li><a>položka submenu (odkaz)</a></li> </ul></li> </UL> |
=> |
<DIV id="dynamicLMenuID" style="...">
<div class=""> <a href="#">odkaz (link)</a> <h3 class="label">nadpis (label)</h3> <div class="content"> <a href="#">položka submenu (odkaz)</a> </div> </div> </DIV> |
Upozornění: Jeden <LI> v sobě může mít maximálně jeden vnořený <UL>. Bude-li jich víc, ostatní budou ignorovány (lze změnit přepsáním funkce removeSubmenu.
Jak vidno, vnořený <UL> se stane jakožto <DIV
...> sourozencem svého
bývalého rodiče, z kterého se stal <H3>.
Každá položka má id v podobě 'itemID3_2_1' - lze vidět jako číslování
kapitol 3.2.1 (1.potomek 2. potomka 3. položky), viz výše.
Nastavíme jednoduše pomoci selektorů v style/qlm_dynamicleftmenustyle.css
Celé menu: styl DIV#dynamicLMenuID {...}
(nastavení šířky atd.).
Odkaz 1. úrovně: DIV#dynamicLMenuID A {...}; pro 2. úroveň:
DIV#dynamicLMenuID .content A {...}.
Nadpis 1. úrovně: DIV#dynamicLMenuID H3 {...};
pro 2. úroveň: DIV#dynamicLMenuID .content H3 {...};
Submenu 1.úr.: DIV#dynamicLMenuID .content {...};
atd.
Lze ovlivnit jednak skrz styly a jednak nastavením některých proměnných.
| Proměnná třídy QuirkLeftMenu | Popis |
|---|---|
| linkTAG = new ClassTAG('DIV','',clickNavLink) | Jaký tag použít pro odkazy, jakou třídu jim přiřadit a onclick handler. |
| labelTAG = new ClassTAG('H3', 'label',clickNav) |
" nadpisy " |
| submenuTAG = new ClassTAG('DIV','content') |
" submenu " |
Co třeba udělat, chceme-li, aby se dynamické menu skládalo z jiných elementů než div/a/h3.
| Co změnit | Popis |
|---|---|
| var labelTAG, submenuTAG , linkTAG | |
| processUL(...) | Chceme-li např. submenu ne jako sourozence, ale jako potomka nadpisu. |
| generateItem(...) | Pro odkaz generuje kód tak, že z položky seznamu vytáhne <a>. |
| getSubmenu4Label(...) | Vrací submenu pro daný nadpis. |
| getParentLabel(...) | Vrací příslušný nadpis pro položku v submenu. |
| ... | |
Chceme-li užívat regulární výrazy v JReplaceThem, musíme mít verzi 2.1 nebo vyšší. V současnosti je tato verze obsažena pouze v sekci "Download JReplaceThem Software Installer", zatímco Java Web Start i Executable File obsahují verzi 1.0, která to neumí.
Instalovaná aplikace se nespouští pomocí JReplaceThem.exe (alespoň mě sknočí s chybou), ale pomocí JReplaceThem.jar.
Pro informace o použití regulárních výrazů viz help (instalován při použití Software Installer) a Java Pattern matching.
Jakub Holý 2003 po K.