Macromedia Dreamweaver 8 – pokročilá práce se šablonami

I přes stále rozšířenější podporu skriptování na straně serveru se občas dostaneme do situace, kdy jsme odkázáni na statické stránky. Jsme-li navíc postaveni před úkol vytvořit větší množství podobných stránek, přímo se nabízí použít šablony, jejichž podpora byla v poslední verzi programu Dreamweaver opět rozšířena.

Práci se šablonami jsme se na stránkách Intervalu již věnovali, od verze 3, které byl návod věnován, se však mnohé změnilo a podpora šablon doznala řady změn. Vzhledem k tomu, že jste v diskusi pod předchozím článkem projevili zájem o pokročilejší funkce, v tomto článku se podíváme na některé z novinek v oblasti práce se šablonami.

Stručná rekapitulace

Jak již bylo uvedeno, šablony použijeme všude tam, kde musíme vytvořit větší množství stránek používajících stejný nebo hodně podobný vzhled. Šablona je XHTML stránka jako každá jiná, pouze obsahuje definici oblastí, které uživatel může editovat (implicitně je jakákoli úprava zakázaná). Takto vytvořená stránka pak bude sloužit jako šablona pro své potomky, které bude možné modifikovat pouze na místech, jež jsme v šabloně určili jako editovatelná. Stránky vytvořené na základě šablony jsou s ní i v budoucnu stále svázány, proto každá změna v šabloně způsobí adekvátní sled změn v jejích potomcích (samozřejmě, tuto funkci lze v případě potřeby vypnout). Pokud navíc na stránkách použijeme kaskádové styly, máme k dispozici silný nástroj, kterým lze změnit vzhled celého website během několika minut.

Práce se šablonami

Základní princip práce se od starších verzí nezměnil, úplné začátečníky proto odkazuji na výše zmiňovaný článek. Stále je však nutné nejdříve vytvořit novou šablonu (nabídka | File | New |, dialogu poté vybrat položku | Template Page | HTML |).

Dialog Templates (plná velikost, cca 65 kB)

Po vytvoření nového dokumentu nejdříve definujeme základní kostru budoucí stránky se zřetelem na oblasti, které budou moci uživatelé editovat. Zpravidla se bude jednat o buňky tabulek či blokové elementy div. Poté, co navrhneme celkový vzhled stránky, se na liště Insert přepneme na skupinu objektů Common, kde nás bude zajímat tlačítko (respektive seznam) Editable regions.

Editable regions

Právě s jeho pomocí do šablony vložíme novou oblast, kterou bude možno v budoucnu plnit obsahem. Tato oblast ve skutečnosti žádným elementem z pohledu jazyka XHTML nebude, Dreamweaveru bude pouze říkat, že místo, které uvozuje, je možné plnit obsahem.

Doby, kdy Dreamweaver nabízel pouze jeden typ editovatelné oblasti, jsou již minulostí. Nyní lze vybírat z následujících možností:

• Editable region – základní typ editovatelné oblasti. Uživatel bude moci daný kontejner plnit libovolným obsahem.
• Repeating region – oblast určená k editaci, která se v dokumentu bude opakovat. Typickou ukázkou budiž řádek tabulky, u něhož předem nevíme, kolikrát se v tabulce bude opakovat, vzhled tabulky však chceme mít plně pod svou kontrolou.
• Optional region – oblast, jejíž viditelnost bude závislá na hodnotě parametru.
• Optional editable region – editovatelná oblast, jejíž viditelnost bude závislá na hodnotě parametru.
• Repeating table – editovatelná tabulka, u níž je možno v dokumentu modifikovat počet řádků a sloupců.

Jak vidno, možností je opravdu mnoho, proto se v tomto článku podrobněji podíváme především na Repeating region.

Repeating region

Vedle standardních editovatelných oblastí Dreamweaver nabízí řešení i pro případ, kdy předem nevíme, kolikrát se daná oblast bude na stránce opakovat. Typickou situací budiž seznam výrobků, jejichž počet je nám při návrhu neznámý. Dreamweaver pro tuto situaci nabízí řešení v podobě speciálních oblastí, takzvaných Repeating regions. Pod tímto názvem se skrývá blok kódu, který se na stránce může opakovat v podstatě bez omezení. Vzhledem k principům práce se šablony je i on jakýmsi kontejnerem, v tomto případě pro klasické editovatelné oblasti, které definují příslušené limity pro editaci.

Pokud se vrátíme k našemu ukázkovému příkladu, tak po vložení objektu typu Repeating region umístíme do takto vzniklého kontejneru několik editovatelných oblastí, čímž definujeme kýženou prezentaci jednoho z výrobků. Výsledek při editaci šablony bude vypadat následovně:

Repeating region

Pokud vytvoříme dokument založený na této šabloně (nabídka | File | New |, poté záložka Templates a vybereme příslušnou šablonu), v dokumentu se v části, kde jsme vytvořili Repeating region, objeví nový ovládací prvek:

Ovládácí prvek Repeating region

S pomocí tohoto ovládacího prvku lze libovolně přidávat či naopak mazat obsah definovaný uvnitř elementu Repeating region. Pomocí tlačítek plus a mínus lze oblasti přidat či odebrat, šipky pak slouží ke změně pořadí.

Pokud do našeho ilustračního dokumentu doplníme data, výsledek může vypadat následovně:

Naplněná tabulka

Repeating table

Princip Repeating region ještě o něco víc rozvíjí další z potenciálních komponent budované šablony – Repeating table. Jak už lze vytušit z názvu, pracovat budeme s tabulkou, v tomto případě však s volitelným počtem řádků. V buňkách tabulky jsou předdefinovány editovatelné oblasti a díky filozofii komponenty je počet řádků ponechán zcela na vůli uživatele. Praktické použití této komponenty přibližuje následující obrázek:

Repeating Table (plná velikost, cca 50 kB)

V některém z dalších článků se můžeme podívat na praktické využití Optional Regions či Nested Templates. S posledně jmenovanými lze vytvářet šablony odvozené ze šablon a tím docílit závislosti i mezi stránkami, které se vizuálně příliš nepodobají.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.