Vytvoření stránky pomocí existující šablony

Můžete vybrat, zobrazit náhled a vytvořit nový dokument podle stávající šablony. Můžete použít dialogové okno Nový dokument. vyberte šablonu z libovolného webu definovaného v Dreamweaveru nebo použijte panel Datové zdroje. vytvořit nový dokument pomocí existující šablony.

Stránka ze šablony

1. Zvolte Soubor > Nový.

2. V dialogovém okně Nový dokument vyberte kategorii Stránka ze šablony.

3. Ve sloupci Web vyberte web Dreamweaver, který obsahuje požadovanou šablonu, a pak vyberte šablonu ze seznamu napravo.

4. Pokud nechcete aktualizovat stránku, zrušte zaškrtnutí políčka „Obnovit stránku při změně šablony“. tato stránka pokaždé, když provedete změny v základní šabloně.

5. Klepnutím na tlačítko Nastavení nastavíte výchozí nastavení dokumentu, jako je typ dokumentu, kódování a přípona souboru.

6. Klepnutím na Získat další obsah... otevřete Dreamweaver Exchange, kde můžete získat další obsah pro úpravu vzhledu stránky.

7. Klepněte na tlačítko Nový a uložte dokument (Soubor > Uložit).

Vytvoření dokumentu pomocí šablony z panelu Aktiva („Zdroje“)

1. Otevřete panel Assets (Okno > Zdroje), pokud již není otevřený.
2. V panelu Assets (Prostředky) klikněte na ikonu Šablony nalevo, abyste zobrazili seznam šablon na aktuálním webu.
Pokud byla šablona, ​​kterou chcete použít, právě vytvořena, možná ji budete muset zobrazit kliknutím na tlačítko Aktualizovat.
3. Klepněte pravým tlačítkem (Windows) nebo se stisknutou klávesou Ctrl (Macintosh) na šablonu, kterou chcete použít, a poté vyberte Nová ze šablony.
Dokument se otevře v oblasti Okno dokumentu.
4. Uložte dokument.

Ukázková stránka

Dreamweaver obsahuje několik profesionálně navržených souborů CSS a úvodní stránky mobilní aplikace. Vzorové soubory můžete použít jako výchozí bod pro návrh stránek vašeho webu. Když vytvoříte dokument z ukázkového souboru, Dreamweaver vytvoří kopii souboru.

V dialogovém okně Nový dokument si můžete prohlédnout ukázkový soubor a přečíst si stručný popis prvků návrhu stránky. Při použití tabulek CSS styly Můžete zkopírovat předem navrženou šablonu stylů a použít ji na dokumenty.

1. Zvolte Soubor > Nový.

2. V dialogovém okně Nový dokument vyberte kategorii Ukázková stránka.

3. Ve sloupci Ukázka složky vyberte Šablona stylů CSS nebo Úvodní stránky pro mobily a pak vyberte ukázku ze seznamu vpravo.
4. Klikněte na tlačítko "Vytvořit".

Nový dokument se otevře v oblasti Okno dokumentu (zobrazení Kód a Návrh). Výběr šablony stylů CSS otevře šablonu stylů v zobrazení kódu.

6. Když se zobrazí dialogové okno Kopírovat závislé soubory, nastavte možnosti a kliknutím na tlačítko Kopírovat zkopírujte prostředky do vybraného adresáře.

Můžete si vybrat vlastní umístění pro závislé soubory nebo použít výchozí umístění vygenerované aplikací Dreamweaver (na základě názvu zdroje ukázkového souboru).

Stránku jsme připravili tak, aby se z ní stala šablona v Dreamweaveru.

Pojďme si trochu připomenout, co jsem o šabloně v Dreamweaveru již psal. Když do vytvořené šablony přidáte n-tý počet stránek a poté jej změníte, všechny stránky se změní podle šablony!

Jediné místo, které se nezmění, je editovatelná oblast! Může existovat původní text nebo jakékoli jiné jedinečné informace.

Jak vytvořit upravitelnou oblast v Dreamweaveru.

Počet upravitelných oblastí je neomezený a takové oblasti můžete nastavit kdekoli.

V oblasti, kde budeme mít hlavní text, vytvoříme editovatelnou oblast!

Otevřete připravený v Dreamweaveru.

Pokud nemáte žádný text, jednoduše najedete myší na místo, kde máte upravitelnou oblast. Mám text, vyberu ho. Klikněte na , - další - šablony - nová upravitelná oblast.

V novém okně pojmenujte upravovatelnou oblast. Nepoužívám k tomu text, ale jednoduše číslo. U textu na všech stránkách je číslo 2. A pro nadpis dělám samostatnou editovatelnou oblast č. 1 - proč tomu tak je? Nevím, tak to bylo na začátku.

V zásadě lze nadpis i text vytvořit v jedné upravitelné oblasti!

Podívejme se, co máme.

Zde vidíme, že v editovatelné oblasti č. 2, kterou jsme vytvořili, je text Tato editovatelná oblast je vidět pouze v programu, není vidět v prohlížeči!

Při uložení první šablony se automaticky vytvoří složka pro ukládání šablon, která se bude jmenovat Šablony.

Otevře se nové okno, kde:

Webové stránky – webové stránky

Stávající šablony – šablony již mám, ale pro vás, pokud je to první šablona, ​​bude okno prázdné.

Popis - vždy ponechejte prázdné.

Jak pojmenujete šablonu v Dreamweaveru?

Proč tato otázka vznikla? Pokud budete dělat web na různá témata, nebo budete mít různé kategorie, tak šablony budou pravděpodobně jiné. Mám spoustu témat – takže šablon je hodně. Každá šablona se liší od svého protějšku v horním řádku, přičemž první řádek na stránce označuje, kde se nacházíte.

Každá ze šablon se musí nějak jmenovat. Název šablony se zobrazí v kódu. Těžko říct, jak tento název ovlivní optimalizaci vaší stránky, ale zdá se mi, že pokud šablonu pojmenujeme podle tématu, které se chystáte vyvíjet, bude to lepší než nazývat šablonu číslem nebo slovo bez tváře.

Podívejme se na příklad, pokud nyní stisknete kombinaci kláves ctrl + U, uvidíte kód.

Toto je druhý řádek a vidíme, že naše šablona se jmenuje „Vše o programu Dreamweaver.dwt“

Nyní se celý web skládá pouze z jedné stránky - index. Ale váš web se bude skládat z více než jedné stránky, že? Pak se pustíme do tvorby zbytku stránek.

Rozumí se, že byste již měli mít v hlavě obrázek přibližného obsahu zbývajících stránek vašeho webu. Pokud ještě žádný nemáte, doporučuji vám vytvořit si tento obrázek v hlavě, protože to bude velmi užitečné v budoucí práci.

Obecně, máte názvy sekcí a podsekcí? Je logické začít s jejich tvorbou.

Nejprve otevřete stránku rejstříku v aplikaci Dreamweaver. Nyní jej uložte spuštěním příkazu Soubor | Uložit jako, ale pod jiným názvem. Předpokládejme, že se nazývá vaše druhá stránka státy(články). Uložte tedy stránku indexu pod názvy států.

Nyní máte dvě identické dvojstránky s různými názvy. Proč ale na svém webu potřebujete dvě zcela stejné stránky, i když pod různými názvy? Myslím, že to absolutně nemá smysl.

Takže bez zavření Dreamweaveru proveďte změny nová stránka, kterou budu volat standardně státy. Vložte všechny obrázky, napište text... Oživte své představy o této stránce. Samozřejmě, zpočátku to může být jen pár odstavců, ale je to jen první možnost?

Připraveni? Pak jdeme na Vlastnosti stránky. Pamatujete si, jak se to dělá? Příkaz nabídky Upravit | Vlastnosti stránky nebo klávesovou zkratkou +. Další v levém seznamu Kategorie Vyberte položku Název/Kódování.

Vedle nápisu Titul napište název vaší stránky. V tomto případě „články“. Můžete také napsat „název vašeho webu > články“ nebo naopak „články > název vašeho webu“.

Mimochodem, pro domovská stránka máš napsaný titul? Co je vůbec titul? To je to, co se zobrazuje úplně nahoře v okně prohlížeče při prohlížení stránky.

To je vše, druhá stránka byla vytvořena. Než přejdu k vytváření všech dalších stránek, řeknu vám, jak propojit dvě již vytvořené stránky (index a stavy) pomocí hypertextových odkazů.

Jako uživatel internetu jste se nepochybně setkali s odkazy více než jednou. Skládá se z nich celý internet! Je těžké si představit jeho existenci bez odkazů, které jsou téměř na každé stránce.

Vaši návštěvníci se také budou muset nějak přesunout z jedné sekce do druhé. Jak to můžete udělat bez odkazů?

Nyní můžete provést příkaz nabídky Upravit | Vytvořit odkaz(otevře se dialogové okno) nebo přejděte na náš oblíbený panel Vlastnosti.
Pokud jste zvolili druhou možnost, pak věnujte pozornost poli Odkaz. Vpravo najdeme tlačítko s obrázkem složky Procházet pro soubor a klikněte na něj.

Otevře se dialogové okno Zvolte soubor, kde je potřeba vybrat soubor, na který odkaz povede.

Klikněte na OK, uložte stránku a otevřete ji v prohlížeči. Pojďme se podívat, jak odkaz funguje. Pokud jste vše udělali správně, tak po kliknutí budete přesměrováni na požadovanou stránku. V tomto případě z hlavní stránky na stránku Články. Je to tak? To znamená, že jste úkol úspěšně dokončili!

Hypertextové odkazy lze vytvářet úplně od začátku, aniž byste museli nejprve vybrat slovo nebo frázi. Otevřete kartu Běžný panely nástrojů Vložit. První tlačítko je Hypertextový odkaz.

Kliknutím na něj se otevře dialogové okno Hypertextový odkaz.

Pole Odkaz již víte, toto by měla být adresa URL stránky, na kterou se odkazuje. Když kliknete na tlačítko vpravo Procházet s obrázkem složky se otevře okno Zvolte soubor.

Věnujte pozornost vstupnímu poli Titul. Zde můžete zadat vysvětlující text, který se zobrazí po najetí myší na odkaz. Toto pole je poměrně prostorné, je možné zadat několik vět.

Chcete-li změnit adresu vytvořeného odkazu, můžete jej vybrat a opravit zadanou hodnotu v poli Odkaz panely Vlastnosti. Nebo spusťte příkaz nabídky Upravit | Změnit odkaz která otevírá okno Zvolte soubor, ve kterém je třeba vybrat nový soubor, obsahující požadovanou stránku.

Kromě jednoduchých textových odkazů můžete v aplikaci Dreamweaver vytvořit také e-mailový odkaz. Poštovní odkaz je hypertextový odkaz, který nevytváří přechod na jinou stránku nebo web, ale na zadanou adresu E-mailem. Zpravidla se takové odkazy používají na stránkách k vytvoření zpětná vazba s návštěvníky.

Obě metody otevírají dialogové okno Emailový odkaz.

Klikněte na OK a uvidíte, co se stane.

Na stránce se v místě, kde byl textový kurzor, objeví text zadaný do pole Text. Bude to vypadat jako běžný textový odkaz. Otevřete stránku v prohlížeči a klikněte na odkaz. Mělo by se otevřít standardní okno e-mailového programu.

Šablony Dreamweaveru řeší problém, kterému čelí mnoho firem – jak udržovat web a udržovat standardní sekce. Obvyklým řešením je použití SSI (Server-Side Insertion), ale ne všechny webové servery tuto technologii podporují. Existují další způsoby, jak můžete zahrnout jeden html soubor do druhého, ale všechny používají buď programy na straně serveru, nebo uživatelské skripty Java.

Šablony Dreamweaveru umožňují vytvořit šablonu stránky, která se nachází v jedné oblasti vašeho webu, a poté na základě této šablony vytvořit další stránky. Poté, když provedete změny v šabloně, změní se také stránky, které šablonu používají.

1. Začněte s rozložením

Nejjednodušší způsob, jak vytvořit šablonu v Dreamweaveru, je začít s rozvržením, na kterém chcete šablonu založit. Používám upgradovanou verzi šablona zdarma: vlevo je navigace, nahoře záhlaví, fotky a barvy.

Vzhledem k tomu, že je možné vytvořit šablonu Dreamweaveru od začátku, je pro mnoho lidí snazší nejprve navrhnout a poté rozhodnout, co se změní a co bude součástí šablony.

Poznámka. Šablony Dreamweaveru se vytvářejí jako součást webu Dreamweaver. Nemáte-li definováno žádné webové místo, budete ho muset před vytvořením šablony vytvořit v aplikaci Dreamweaver.

3. Napište popis šablony

Vyberte web, na kterém chcete šablonu použít. Použiji jej na webu Dreamweaver Příklady. Název vašeho webu bude jiný.

Popište vzor. Popis může být krátký nebo dlouhý, jak potřebujete. Nešetřete však na detailech, které mohou být v budoucnu důležité.

4. Vytvořte složku pro ukládání šablon

Můj web již obsahuje složku šablon. Pokud však neexistuje, Dreamweaver jej automaticky vytvoří.

Všechny šablony Dreamweaveru jsou uloženy ve složce „templates“ na vašem webu a mají příponu *.dwt (zkratka pro Dreamweaver Template).

5. Začněte přidávat upravitelné oblasti

• Vyberte část textu, kterou chcete změnit.
• Přejděte na položku nabídky Vložit - Objekty šablony.
• Vyberte Upravitelná oblast.

Existují další objekty šablon, ale ty jsou nad rámec tohoto kurzu.

6. Nastavte název upravitelné oblasti

Můžete ponechat výchozí název, který Dreamweaver nastavuje, ale doporučuji mu dát popisný název, který vám později připomene, jaké informace by měly být v této oblasti obsaženy.

7. Editovatelné oblasti v prvcích bloku

Pokud se pokusíte umístit upravitelné oblasti do prvků bloku (jako jsou nadpisy, odstavce), Dreamweaver vydá varování. Pokud ponecháte oblast uvnitř prvku bloku, vaši autoři obsahu tam nebudou moci vložit žádné další prvky HTML.

Používám to, když se chci ujistit, že nadpis zůstane nadpisem, nebo chci konkrétní počet odstavců nebo jiných prvků v šabloně.

Pokud se rozhodnete ponechat možnost přidávat další prvky bloku v rámci daného prvku, musíte posunout hranice upravitelné oblasti za značky prvků. Můžete to udělat v režimu zobrazení kódu HTML nebo opětovným zadáním oblasti po předchozím odstranění.

V hotová šablona upravitelné oblasti jsou zvýrazněny rámečky, nad nimiž bude název oblasti.

9. Vytvořte stránku na základě šablony

Jakmile šablonu uložíte, můžete ji použít na webu: Z nabídky Soubor vyberte „Nový“;

• Přejděte na kartu „Stránka ze šablony“;
• Vyberte vytvořenou šablonu;
• Ujistěte se, že je vybrána možnost „Obnovit stránku při změně šablony“;
• Klikněte na "Vytvořit".

Nyní můžete provádět změny, ale pouze v upravitelných oblastech. Dreamweaver vám nedovolí měnit jiné části šablony.

10. Změňte šablonu - aktualizujte soubory

Potřebujete-li v šabloně později provést nějaké změny, upravte soubor dwt ve složce Šablony. Jakmile uložíte změny do šablony, Dreamweaver se vás zeptá, zda chcete aktualizovat stránky na základě šablony. Bude také uvedeno, o jaké soubory se jedná.

Jakmile kliknete na "Aktualizovat", všechny soubory vytvořené z této šablony budou aktualizovány. Stačí je uložit a nahrát na webový server.

Nyní jsme dokončili naše třetí webové stránky. Vše funguje, všechny stránky se normálně načítají a zobrazují se ve webovém prohlížeči. Zdálo by se, že není důvod k obavám.

Ne, ale pouze prozatím.

Představme si takovou situaci. Najednou jsme se rozhodli přidat na náš web novou stránku. K tomu musíme změnit navigační lištu na všech stránkách a k tomu budeme muset každou z nich otevřít v okně dokumentu, přidat odkaz a stránku uložit. Naše stránky jsou malé a tuto práci dokončíme poměrně rychle. Co když byl skvělý?

Samozřejmě můžeme použít vestavěné nástroje Dreamweaveru. Vyvolejte například dialogové okno Najít a nahradit- výrobek je extrémně výkonný. (Informace o hledání a nahrazování podřetězců naleznete v kapitole 2.) Nebo začněte nahrazovat hypertextové odkazy voláním položky Změnit odkaz na celý web Jídelní lístek místo panely místo(viz kapitola 6). V mnoha případech nám to pomůže rychle nahradit celé části obsahu stránky nebo HTML kódu. Velkou pomocí může být knihovna aktiv a prvků, která je také popsána v kapitole 6.

Co když ale chceme provést nějaké významné změny, například radikálně změnit strukturu tabulky rozložení? Hledání a nahrazování nám pravděpodobně nepomůže, natož automatické nahrazování hypertextových odkazů. Ani majetek s knihovnou nám v tomto případě nepomůže. Opravdu musíte předělávat všechny stránky znovu?!

Pokud byste nepracovali v Dreamweaveru, pravděpodobně byste to museli udělat. Ale měli jsme štěstí. Dreamweaver podporuje výkonné šablony. Byly zmíněny již v kapitole 3. Nyní se na ně podíváme podrobněji.

Vzorek- jedná se o jakýsi vzorek, „kostru“ webové stránky, obsahující prvky společné všem stránkám. Když vytvoříte novou stránku podle šablony, stačí zadat jedinečný obsah právě této stránky na správná místa a uložit ji. Šablonu můžete později změnit a Dreamweaver aktualizuje všechny stránky z ní vytvořené.

V tomto smyslu jsou šablony podobné prvkům knihovny (viz kapitola 6). Rozdíl je v tom, že šablona je šablona pro celou stránku, zatímco knihovna ukládá pouze její jednotlivé prvky. Vývojáři Dreamweaveru se však domnívají, že šablony jsou nejblíže „příbuznosti“ s aktivy (viz kapitola 6), a umístili seznam šablon na panel Aktiva.

Zpočátku šablonu nelze změnit, to znamená, že když na ní vytvoříte stránku, můžete umístit obsah pouze na speciálně určená místa - upravitelné oblasti. Nemůžete upravovat prvky samotné šablony, protože se jedná o neměnné oblasti. Pokud chcete něco opravit, budete muset otevřít samotnou šablonu v okně dokumentu. Dreamweaver vás tak ochrání před chybnou změnou šablony a tím i před deformací webových stránek z ní vytvořených.

Můžeme říci, že šablony jsou obyčejné webové stránky. Při úpravách můžete se šablonami zacházet jako s běžnými webovými stránkami a používat stejné nástroje. Můžete také nastavit parametry stránky, která bude na základě této šablony vytvořena (nadpis, barvu pozadí, text a hypertextové odkazy). Dreamweaver však při vytváření HTML kódu pro šablony používá spoustu vlastních značek a atributů, takže není úplně správné říkat, že šablona je běžná webová stránka.

Šablony jsou uloženy v souborech s příponou .dwt ve složce Templates, která se nachází v kořenové složce místní kopie webu. Z toho vyplývá, že šablony jsou nedílnou součástí vašeho webu, stejně jako knihovna. Chcete-li použít jakoukoli šablonu na jiném webu, budete ji muset zkopírovat na tento web pomocí standardní prostředky Dreamweaver (viz kapitola 6). Na jednom webu lze použít několik šablon.

Šablony jsou pro vás nejužitečnější, pokud vytváříte stránky na základě tabulkového návrhu. Takové stránky téměř vždy obsahují mnoho opakujících se prvků, jejichž ruční aktualizace je extrémně pracná. Můžete ale také připravit šablony pro „běžné“ stránky. To může být nutné, například pokud vytváříte stránky se stejným designem pro velký firemní web.

Dreamweaver přichází s několika šablonami vytvořenými profesionálními webovými designéry. Tyto šablony můžete použít k vytvoření svých stránek; jak se to dělá, bylo probráno v kapitole 3. Zkuste to – možná najdete něco, co vám bude vyhovovat.