Pracovní postup vysoké úrovně pro design a vývoj webů pomocí aplikace Dreamweaver

Tento článek vám pomůže pochopit, jak lze provést různé fáze vývoje webu pomocí aplikace Dreamweaver.

Poznámka:

Tento článek předpokládá, že jste na úrovni začátečníci nebo středně pokročilí v porozumění oblastem web, HTML, CSS a JavaScript.

  1. První fáze vývoje webu je fáze plánování, ve které analyzujete potřeby cílového publika a technické a marketingové požadavky. Shromažďujete také nezbytné informace potřebné pro návrh a publikování webu a získáváte odpovědi na příslušné otázky, například následující:

    • Kterého poskytovatele služeb si vybrat k hostování webu? Mám přístup k odesílání souborů na publikační server?
    • Jaký název domény bude použit pro web?
    • Pokud do aplikace Dreamweaver převádíte stávající weby, kde jsou nyní uložené soubory a datové zdroje? Mám přístup k serveru, kde jsou tyto informace uložené?
    • Pokud požadujete dynamický web, který server lze použít k testování v případě dynamického zobrazování dat? Mám údaje o webovém aplikačním serveru, který chci použít k načítání dynamických dat?
    • Jaký typ datových zdrojů je pro web požadován?
    • Budou tyto datové zdroje navrženy od začátku? Pokud jsou datové zdroje již k dispozici, mám k nim přístup?
    • Které aplikace chci použít pro návrh datových zdrojů?
    • Mám v plánu vytvořit responzivní web? 

    Pokud máte jasnou představu o webu, který chcete vyvíjet, i o způsobu jeho hostování a pokud jste si k procesu vývoje webu vybrali aplikaci Dreamweaver a službu Creative Cloud, přejděte k dalšímu kroku.

  2. Zkontrolujte, zda máte všechny datové zdroje potřebné pro web. Shromážděte je a uspořádejte v lokální složce nebo knihovně Creative Cloud od společnosti Adobe.

  3. Vytvořte nový dokument v aplikaci Dreamweaver pomocí následujících možností:

    • nový prázdný dokument,
    • počáteční šablony dodané s aplikací Dreamweaver, 
    • soubory šablon (*.dwt) vytvořených jiným uživatelem.

    Poznámka:

    Pokud nejste obeznámeni s aplikací Dreamweaver nebo s vývojem webu začínáte, počáteční šablony představují velkou pomoc v prvních krocích při tvorbě webových stránek.

    I když máte v úmyslu začít od začátku, je vhodné do těchto stránek alespoň nahlédnout, abyste pochopili elementy dobrého návrhu webových stránek.

  4. Věnujte několik minut a seznamte se s pracovní plochou aplikace Dreamweaver. Vyberte si pracovní plochu, která vám vyhovuje, a nastavte barevný motiv. Změňte uspořádání jednotlivých panelů způsobem, který vám vyhovuje.

  5. Vytvořte web v aplikaci Dreamweaver. Začněte vytvářet strukturu složek se soubory a datovými zdroji. Po uspořádání informací a určení struktury můžete zahájit vytváření webu. (Viz O webech aplikace Dreamweaver.)

    V této fázi je vhodné také nastavit připojení ke vzdáleným serverům a nastavit testovací servery (pokud máte dynamický obsah). 

  6. Začněte psát kód webové stránky v Zobrazení kódu nebo ji navrhovat v zobrazení Návrh / Živé zobrazení.

    Pokud plánujete použití kompozic aplikace Photoshop, můžete je také extrahovat do aplikace Dreamweaver a pracovat s nimi. Další informace o práci s kompozicemi aplikace Photoshop naleznete v tématu Extrakce v aplikaci Dreamweaver CC.

    Přidejte prvky návrhu, například text, obrazy, obrazy s efektem přechodu, obrazové mapy, barvy, filmy, zvuky, odkazy HTML, tabulky a další.

  7. Upravte vzhled webové stránky pomocí CSS. 

    S CSS můžete v aplikaci Dreamweaver pracovat různými způsoby:

    • Můžete psát kód CSS ručně. Další informace o funkcích psaní kódu v aplikaci Dreamweaver, které vám pomohou s ručním psaním kódu CSS, najdete v tématu Prostředí pro psaní kódu v aplikaci Dreamweaver.
    • Pokud nejste dobře obeznámeni s tvorbou stránek CSS, můžete použít panel CSS Designer, který vám pomůže CSS vytvořit. Další informace naleznete v tématu Rozvržení stránek pomocí panelu CSS Designer.
    • Pokud raději pracujete se soubory Sass a Less, aplikace Dreamweaver podporuje i tuto možnost, protože umožní přenést soubory Sass a Less do webu aplikace Dreamweaver a pracovat s nimi. Aplikace Dreamweaver je pak automaticky kompiluje (nebo je lze kompilovat ručně) a zobrazuje výsledky změn CSS v reálném čase. Další informace o použití souborů Sass a Less s aplikací Dreamweaver najdete v tématu Preprocesory CSS.
  8. Nastavte webovou aplikaci pro tvorbu dynamického obsahu.

    Mnoho webových stránek obsahuje dynamické stránky, které uživatelům umožňují zobrazení informací uložených v databázi, a obvykle také některým uživatelům umožňují informace přidávat a upravovat. Chcete-li takové stránky vytvářet, je nutné nejdříve nastavit webový server a aplikační server, vytvořit nebo upravit web aplikace Dreamweaver a připojit se k databázi. Další informace naleznete v tématu Dynamické weby, stránky a webové formuláře.

  9. Vytváření dynamických stránek.

    V aplikaci Dreamweaver je možné definovat množství zdrojů dynamického obsahu včetně sad záznamů získaných z databází, parametrů formulářů a komponent JavaBeans. Chcete-li na stránku přidat dynamický obsah, jednoduše ho přetáhněte na stránku.

    Stránku můžete nastavit tak, aby zobrazovala jeden nebo více záznamů zároveň nebo více než jednu stránku záznamů, můžete přidat speciální odkazy pro přechod z jedné stránky záznamů na další (a zpět) a vytvářet počítadla záznamů, aby uživatelé mohli sledovat jejich počet. Další informace naleznete v tématu Dynamické weby, stránky a webové formuláře.

  10. Testujte, zobrazte náhled a publikujte web. 

    Při vytváření stránek je třeba zobrazovat jejich náhled, které umožní ověřit, že vývoj webu probíhá podle návrhu. Kód můžete psát v Rozděleném zobrazení s kódem a živým zobrazením vedle sebe.

    Náhled webových stránek můžete také zobrazovat v reálném čase v zařízení (pokud vytváříte responzivní webové stránky) nebo v prohlížeči.

    Pokud nepotřebujete prostředí s živým zobrazením, můžete použít běžný náhled v prostředí prohlížeče.

    Pokud již jste definovali připojení ke vzdáleným serverům, k publikování webu je třeba umístit soubory na vzdáleném serveru tak, aby je bylo možno zobrazit.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online