Ve světě tvůrců webových stránek typu drag-and-drop si Adobe Dreamweaver vedl dobře a zůstal relevantní i v konkurenci. Tento software, nabitý skvělými funkcemi a spoustou nástrojů, které vám usnadní život, je skvělou volbou pro webové designéry a vývojáře.
Jak ale vytvoříte svůj první web pomocí Dreamweaveru?
Začínáme s Dreamweaverem
Než s ním budete moci začít pracovat, musíte si pořídit kopii aplikace Adobe Dreamweaver, ale je k dispozici bezplatná zkušební verze.
Zamiřte do Adobe Chcete-li začít, přihlaste se nebo si zaregistrujte účet a stáhněte si nástroj Adobe Creative Cloud. Zde si můžete stáhnout Adobe Dreamweaver a začít s úplným průvodcem.
Tato příručka vám ukáže, jak vytvořit základní web pomocí souborů šablon aplikace Dreamweaver jako základu. Kompletní soubory projektu najdete na toto úložiště GitHub.
Krok 1: Vytvořte web Dreamweaver
Otevřete Adobe Dreamweaver a přejděte na místo menu v horní části stránky. Vybrat Nové stránky, poté vyberte název pro svůj web a zvolte umístění jeho souboru.
Krok 2: Vytvořte soubor šablony
Dále je čas vytvořit soubor šablony pro váš nový web. Soubory šablon fungují podobně jako motivy používané systémy CMS, jako je WordPress a Shopify, pouze si je vytvoříte sami.
Klikněte na Vytvořit nový nebo jít do Soubor > Nový a vybrat si HTML šablona z Typ dokumentu seznam.
Tím se vytvoří základní šablona s nějakým HTML již na svém místě. Tento kód HTML použijete pro svůj projekt, takže se vyplatí jej ponechat na místě pro další kroky.
Krok 3: Vytvořte záhlaví v šabloně
Nyní je čas vytvořit sekci nabídky/záhlaví na webu v šabloně, kterou jste právě vytvořili. Jít do Vložit v horní části obrazovky a vyberte Záhlaví ze seznamu.
V tomto okamžiku se otevře dialog. Přidejte název třídy svého nového záhlaví a klikněte OK přidat kód do HTML. Měl by automaticky umístit nový kód do tagy, ale v případě potřeby jej můžete přesunout.
Poté byste také měli přidat prvek div pro logo webu a prvek navigace pro nabídku webu. Přejít na Vložit menu a vyberte Div, pak se vraťte na Vložit menu a vyberte Nav. Oba tyto prvky potřebují svůj vlastní název třídy.
Jako poslední fázi tohoto procesu jsme do našeho navigačního prvku přidali některé možnosti nabídky. Chcete-li to provést, přejděte na stránku Vložit a vyberte Hypertextový odkaz. Do záhlaví našeho webu jsme přidali pět hypertextových odkazů: Home, Lion, Tiger, Jaguar a House Cat.
Stránky, které budou mít v záhlaví odkazy, ještě neexistují, takže opusťte href vlastnost prázdné, dokud je nevytvoříte.
Krok 4: Přidejte šablonu stylů pro CSS
Jak vidíte, tento web nevypadá tak dobře, jak je. Tento problém vyřeší trocha CSS a v Dreamweaveru můžete snadno přidat šablonu stylů. Přejít na Návrhář CSS na pravé straně obrazovky a klikněte na Plus ikonu vedle Zdroje. Stačí si vybrat název šablony stylů a zbytek nastavení můžete ponechat tak, jak jsou.
První věc, kterou musíte udělat, je přeměnit hlavičku na flexbox. Flexbox je jen jedním ze způsobů, jak vytvořit webovou stránku pomocí CSS. Kromě toho je nastaveno písmo webu, nastaveno černé pozadí a je provedeno několik dalších změn, aby web vypadal lépe. Celý CSS kód si můžete prohlédnout na konci článku.
Krok 5: Přidejte do šablony upravitelné oblasti
Upravitelné oblasti vytvářejí části HTML, které lze upravovat při použití šablony k vytváření dalších stránek. Obsah naší hlavní stránky dokonale zapadá do regionu, jako je tento. Jít do Vložit > Šablona > Upravitelná oblast pro přidání upravitelné oblasti na stránku.
Krok 6: Přidejte obrázek/textový obsah do šablony
Editovatelná oblast, kterou jste právě přidali, je použitelná bez dalšího HTML, ale stále můžete některé přidat a upravit, když vytváříte jednotlivé stránky. Chcete-li začít, přejděte na Vložit a vyberte Div přidat na svůj web nový prvek div.
To bude fungovat jako kontejner pro textový obsah na stránce a také jako místo pro přidání obrázku na pozadí. Tento prvek má třídu a ID, takže různé stránky mají různé vlastnosti CSS. Tyto jedinečné vzory pozadí CSS jsou skvělé, pokud chcete svůj web Dreamweaver posunout na další úroveň.
Dále přejděte na Vložit > Nadpisy > H1 pro přidání nadpisu do prvku div, který jste právě přidali. Oba tyto prvky potřebují ke správnému fungování nějaké CSS. Div má hodnoty background-image, background-size a height. Jít do Soubor > Uložit vše abyste se ujistili, že se vaše šablona aktualizuje.
Obrázky můžete přidávat odkudkoli ve vaší místní síti nebo internetu, ale pro snadný přístup je nejlepší uložit obrázky do vlastních souborů webu.
Krok 7: Přidejte stránky se šablonou
Nyní, když máte šablonu na místě, můžete začít přidávat nějaké stránky. Jít do Soubor > Nový a vyberte HTML pod Typ dokumentu. Přidat Titul pro každou stránku, kterou přidáte před klepnutím Vytvořit.
Nová stránka je bílá a zatím nemá naši šablonu. Jakmile je vaše nová stránka otevřena v Dreamweaveru, přejděte na Nástroje > Šablony a klikněte na Použít šablonu na stránku. Vyberte šablonu ze seznamu a klikněte Vybrat k načtení šablony. Nakonec přejděte na Soubor > Uložit jako a před uložením vyberte název nové stránky.
Tento postup opakujte, dokud nebudete mít dostatek stránek, aby vyhovovaly vašim potřebám. K tomu se nemusíte držet jediné šablony; můžete přidat nové pro různá rozvržení stránky.
Krok 8: Přidejte do šablony odkazy na stránky
Po přidání stránek můžete změnit navigační odkazy v šabloně tak, aby odkazovaly na správné stránky. Vraťte se do šablony a najděte značky A, které jste přidali dříve. Odstraňte zástupný odkaz a klikněte na uvozovky otevřít Procházet Jídelní lístek. Zde můžete vybrat správnou stránku pro každý ze svých odkazů.
Krok 9: Opravte CSS/HTML na nových stránkách
Každá ze stránek bude v tuto chvíli vypadat stejně. Existuje několik kroků, které zajistí, že budou mít svůj vlastní obsah; dokončete svůj nový web podle níže uvedených kroků.
- Změňte ID prvku div obsahu na každé stránce tak, aby odpovídalo názvu stránky
- Přidejte kód CSS pro ID nového prvku s jiným obrázkem na pozadí
- Změňte název na každé stránce
Krok 10: Otestujte web ve svém prohlížeči
Svůj nový web můžete otestovat ve svém webovém prohlížeči přímo z Adobe Dreamweaver. Jít do Soubor > Náhled v reálném čase a vyberte prohlížeč podle svého výběru pro zobrazení vašeho webu. To je skvělé pro testování CSS nebo jiného kódu, který není kompatibilní s každým prohlížečem.
Nyní potřebujete jen místo, kde budete hostovat svůj web. Hostování statického webu pomocí AWS S3 je skvělé místo, kde začít.
Kód HTML a CSS
<!doctype html>
<html>
<hlava>
<meta znaková sada="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<titul>Dokument bez názvu</title>
<!-- TemplateEndEditable -->
<odkaz href="../page-css.css" rel="šablona stylů" typ="text/css">
</head>
<tělo>
<třída záhlaví="hlavní záhlaví">
<třída div="logo stránky">Ukázkový web MakeUseOf</div>
<třída navigace="hlavní menu">
<a href="../Home.html">Domov</A><a href="../Lion.html">Lev</A><a href="../Tiger.html">Tygr</A><a href="../Jaguar.html">Jaguár</A><a href="../Domácí kočka.html">Domácí kočka</A>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<třída div="hlavní obsah" id="lev">
<h1>Tohle je lev!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Tento HTML vytvoří hotový web pro náš projekt. Můžete jej rozebrat, abyste viděli, jak to funguje, ale doporučujeme vám vytvořit si vlastní HTML pro svůj web.
@charset "utf-8";
tělo {
okraj: 0;
pozadí: černé;
rodina písem: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.hlavní záhlaví {
displej: flex;
pozadí: černé;
výplň: 20px;
}
.site-logo {
šířka: 30 %;
barva bílá;
váha písma: tučné;
text-transform: velká písmena;
}
.hlavní menu {
šířka: 70 %;
zarovnání textu: vpravo;
}
.hlavní menuA {
odsazení: 10px;
text-dekorace: žádná;
barva bílá;
}
.hlavní obsah {
výška: 100vh;
výplň: 20px;
background-size: cover;
}
.hlavní obsahh1 {
barva bílá;
velikost písma: 10rem;
text-transform: velká písmena;
}
#lev {
obrázek na pozadí: url("Images/largelion.png");
}
#tygr {
obrázek na pozadí: url("Images/tiger.png");
}
#jaguár {
obrázek na pozadí: url("Images/jaguar.png");
}
#domácí kočka {
obrázek na pozadí: url("Images/housecat.png");
}
#allcats {
obrázek na pozadí: url("Images/loadsofcats.png");
}Tento CSS je také součástí hotového projektu. Stejně jako HTML, který jsme probrali, si můžete pohrát s tímto kódem a vytvořit si vlastní web.
Vytváření webových stránek pomocí Adobe Dreamweaver
Dreamweaver se nemusí zdát tak snadno použitelný jako nástroje jako WordPress nebo Squarespace, ale poskytuje vám mnohem větší výkon. Tato příručka je skvělým výchozím bodem, ale je toho mnohem více, co se můžete naučit, a stojí za to si Dreamweaver prozkoumat sami.