< Předchozí | Další >

Lekce 4: Navrhnout vzhled webového serveru

Tato lekce demonstruje, jak navrhnout vzhled webového serveru pomocí šablony stránek.

Webové stránky, které tvoří webový server, by měly mít podobný vizuální návrh a rozvržení, a tvořit tak jeden celek. Jednotlivé stránky by se měly objevit souvisle, tak aby byl webový server soudržný. Je dobrým zvykem začít projekt nejdříve zamyšlením se nad samotným návrhem a poté vytvořením individuálních webových serverů. Jinak byste mohli získat webové servery, které se skládají z nesouvislých webových stránek, které nemají žádné uspořádání nebo zjevné vizuální relace.

Nejlepší způsob, jak vytvořit obecný vzhled webového severu je pomocí šablony stránek. Šablona stránek je jednotlivý soubor, který můžete použít pro ovládání obecných prvků na všech stránkách ve vašem serveru. Poté co použijete šablonu na stránky, můžete minimalizovat úsili vynaložené při budoucích změnách návrhu pouze provedením jedné změny na šabloně; změna je poté aplikovaná na všechny stránky, které používají šablonu. Můžete vytvořit dva druhy šablon webových stránek: šablony v době návrhu a dynamické šablony. Dynamické šablony stránek používají technologii Struts-Tiles ke generování stránek na webovém serveru v běhové komponentě. Stránky, které vytváříte pomocí šablony v době návrhu jsou okamžitě vytvořeny. Tento výukový program demonstruje použití šablon v době návrhu.

Šablona stránek je navržena tak, aby měla vlastní oblasti a obsahové oblasti. Obecná oblast je sdílená oblast obecná všem stránkám, které používají šablonu stránek, která je užitečná pro prvky, které jsou stejné pro každou stránku, např. jako proužek a navigační oblasti. Obsahová oblast bude odlišná pro každou stránku. Poté co je šablona aplikovaná na jednotlivých stránkách, můžete upravit obsahové oblasti v těchto stránkách, abyste přidali specifické informace do této stránky. Prvky stránky takové jako text a obrázky specifické pro konkrétní stránku, jsou typy prvků, které přechází do obsahových oblastí šablony stránek. Můžete vytvořit tolik obsahových oblastí a obecných oblastí, kolik jen chcete v šabloně.

Šablona stránek kontroluje vzhled webového rozvržení velmi odlišným způsobem pomocí seznamu stylů. Získejte více informací o rozdílu mezi šablonou stránek a seznamy stylů.

Pro tento výukový program vytvoříme šablonu stránek a definujeme nějaký obsah a obecné oblasti, aby byl navrhnut konzistentní vzhled pro celkový web Classifieds. Tato stránka zajišťuje, že každá stránka vypadá jako následující návrh:

Vytváření nové šablony stránek

  1. V pohledu Průzkumník projektů klepněte pravým tlačítkem myši na název projektu ClassifiedsTutorial.
  2. Vyberte Nový > Šablona webové stránky z rozevírací nabídky. Otevře se soubor Šablona nové webové stránky.
  3. Přijměte výchozí složku (/ClassifiedsTutorial/WebContent). Toto ukazuje, kde bude váš soubor šablony umístěn, poté co bude vytvořen.
  4. Zadejte název pro soubor šablony do pole Název souboru. Pojmenujte soubor pro tento výukový program template. Uvědomte si, že úplný název výsledného souboru bude template.jtpl.
  5. Vyberte přepínač Šablony v době návrhu.
  6. Ujistěte se HTML je zvolen jako značkovací jazyk. Tyto a další informace si můžete prohlédnout výběrem tlačítka Volby.
  7. Klepněte na Dokončit. Nová šablona je otevřena v Návrháři stránek. Když je otevřena prázdná šablona, v dialogovém okně je vám připomenuto, že musíte přidat alespoň jednu obsahovou oblast do šablony. Klepněte na OK k uzavření dialogového okna.

Přidání některých prvků do prázdné šablony

Nyní, když byla vytvořena šablona, potřebujete přidat některé prvky do prázdné šablony.
  1. Začněte odstraněním textu Zde umístit obsah.
  2. Jeden z nejjednodušších způsobů, jak navrhnout strukturu stránky, je použití neviditelné tabulky. Tímto způsobem můžete určit sekce stránky, které budou použity odlišnými způsoby a můžete kontrolovat umístění objektů na stránce.
    1. Klepnutím na pohled Paleta rozbalíte zásuvku Značky HTML.
    2. Táhněte komponentu Tabulka z palety na vaši prázdnou šablonu. Otevře se dialogové okno Vložit tabulku.
    3. Pro tuto šablonu budete potřebovat 3 řádky a 1 sloupec. Zadejte 3 do pole Řádky a 1 do pole Sloupce.
    4. Poté klepněte na OK. Tabulka se zobrazí na šabloně stránek.
  3. Nejprve bude tabulka velmi malá. Potřebujete upravit atributy tabulky, abyste přizpůsobili velikost a strukturu tabulky.
    1. Klepněte pravým tlačítkem myši na tabulku a vyberte Vlastnosti k otevření pohledu Vlastnosti.
    2. V pohledu Vlastnosti klepněte na značku Tabulka.
    3. V poli Zarovnání vyberte Střed. Toto vystředí tabulku na stránce.
    4. Musíte zvýšit celkovou velikost tabulky, takže struktura šablony se bude rozšiřovat závisle na velikosti obrazovky, ve které je stránka zobrazena. Jinak se návrh vaší stránky objeví v pevné velikosti a mohl by se zobrazit velký na malých obrazovkách nebo velmi malý na velkých obrazovkách. Do polí Šířka tabulky a Výška tabulky zadejte 90 a vyberte znak celkové procento (%).
    5. Jelikož nechcete, aby se rámeček tabulky objevil na vašich stránkách, musíte také nastavit pixely Okraje na 0. Návrhář stránek zobrazí neviditelné okraje tabulky jako tečkované řádky.
  4. Jelikož chcete proužek na začátku každé stránky, který oznamuje název webového serveru a vizualizace, aby dohromady svázal web, potřebujete pro něj formátovat oblast v tomto tabulkovém rozvržení. Ačkoli byste také pravděpodobně chtěli grafický návrhář, který vytvoří logo nebo obraz proužku pro váš web, můžete přidat text jako zástupný symbol pro proužek v této šabloně.
    1. Vyberte horní buňku v tabulce.
    2. S touto vybranou buňkou uveďte Výška 70 pixelů na kartě TD v pohledu Vlastnosti. Kdybyste věděli, že vytváříte šablonu, která potřebovala umístit grafiku proužku, kterou váš grafický návrhář vytvářel, mohli byste určit, že tato buňka je přesná velikost grafiky proužku.
    3. V pohledu Vlastnosti na kartě TD také nastavte Barvu na Šedivá ve stahovací nabídce. Pokud byste chtěli použít odlišnou barvu, mohli byste použít kapátko, abyste vybrali barvu odkudkoli na obrazovce, nebo byste mohli zadat hodnotu RGB do pole (jako #808080 pro šedivou).
    4. Klepněte kdekoli v horním řádku a zadejte Vítejte v Classifieds!
    5. Jelikož je výchozí text malý a je špatně viditelný, musíte zvýšit velikost písma. Vyberte celou frázi a klepněte na Formátovat > Písmo.
    6. Aby měl server novinářský vzhled, vyberte Courier jako Písmo. Vyberte 6 jako Velikost a vyberte Bílá jako Barva, aby vyčnívala proti šedivému pozadí této buňky.
    7. Poté klepněte na OK.
    8. Abyste vystředili text proužku, znovu vyberte text a klepněte na Formátovat > Zarovnat > Horizontální střed.
  5. Abyste mohli uživatelům povolit přejít na jiné stránky, potřebujete řádek odkazů pod proužkem. Později přidáte karty pro navigaci, ale nyní zformátujte druhý řádek, abyste zanechali místo pro tlačítka.
    1. Vyberte druhou buňku v tabulce.
    2. Nastavte tuto buňku na stejnou velikost jako buňku proužku zadáním Výšky 70 pixelů v pohledu Vlastnosti na kartě TD.
  6. Třetí řádek je tam, kde bude umístěn váš obsah. Musíte se ujistit, že obsah bude zarovnán nad řádkem.
    1. Vyberte třetí řádek v tabulce.
    2. V pohledu Vlastnosti, na kartě TD, vyberte Nahoře pro Vertikální zarovnání.

Přidání obsahové oblasti

Potřebujete oblast šablony, kde může být zobrazena specifikace každé stránky, taková jako výsledky hledání na stránce filtered_records nebo forma pro vyplnění v novém zápisu na stránce new_record. Nyní, když máte obecnou strukturu a schéma barvy definované pro web, jste připraveni přidat obsahovou oblast.
  1. Na pohledu Paleta klepněte na zásuvku Šablona stránek.
  2. Táhněte komponentu Obsahová oblast do třetího řádku. Toto je místo, kde vaše individuální stránky budou dodávat určitý obsah. Otevře se průvodce Šablona stránek pro Vložit obsahovou oblast.
  3. Můžete přijmout předvolbu Název obsahového názvu bodyarea klepnutím na OK. Název obsahové oblasti vám umožňuje určit odlišné názvy pro odlišné obsahové oblasti a pro organizační účely. Např. pokud byste navrhovali web, který by vždy měl dvě obsahové oblasti na každé stránce, mohli byste pojmenovat tu oblast, která bude zaplněna hlavním obsahem bodyarea a oblast, která bude naplněna výsledky hledání searcharea. Toto také pomáhá, pokud potřebujete použít vaší šablonu stránky do stránek, které již existují, protože poté můžete přiřadit oblasti existujících stránek značkovacím jazykem pro naplnění určitých obsahových oblastí šablony. Obsahová oblast je vložena do tabulkové buňky.
  4. Uložte změny do šablony stránek.

Základní struktura šablony by měla vypadat takto:

Nyní jste vytvořili šablonu stránek s některými obecnými a obsahovými oblastmi definovanými pro váš webový server. Klepnutím na Další spusťte další lekci.

< Předchozí | Další >