Vo svete tvorcov webových stránok typu drag-and-drop sa Adobe Dreamweaver darilo, aby zostal relevantný v konkurencii. Tento softvér, nabitý skvelými funkciami a množstvom nástrojov, ktoré vám uľahčia život, je skvelou voľbou pre webových dizajnérov a vývojárov.
Ako si však vytvoríte svoju prvú webovú stránku pomocou aplikácie Dreamweaver?
Začíname s Dreamweaverom
Pred začatím práce s programom Adobe Dreamweaver si musíte zaobstarať kópiu, no k dispozícii je bezplatná skúšobná verzia.
Zamierte na Adobe Ak chcete začať, prihláste sa alebo si zaregistrujte účet a stiahnite si nástroj Adobe Creative Cloud. Tu si môžete stiahnuť Adobe Dreamweaver a začať s úplným sprievodcom.
Táto príručka vám ukáže, ako vytvoriť základnú webovú lokalitu pomocou súborov šablón Dreamweaver ako jej základu. Úplné súbory projektu nájdete na toto úložisko GitHub.
Krok 1: Vytvorte stránku Dreamweaver
Otvorte Adobe Dreamweaver a prejdite na stránky menu v hornej časti stránky. Vyberte Nová stránka, potom vyberte názov svojej webovej lokality a vyberte pre ňu umiestnenie súboru.
Krok 2: Vytvorte súbor šablóny
Ďalej je čas vytvoriť súbor šablóny pre váš nový web. Súbory šablón fungujú podobne ako motívy používané systémami CMS ako WordPress a Shopify, len si ich vytvoríte sami.
Kliknite na Vytvor nový alebo prejdite na Súbor > Nový a vyberte si HTML šablóna z typ dokumentu zoznam.
Tým sa vytvorí základná šablóna s už vytvoreným kódom HTML. Tento kód HTML použijete pre svoj projekt, takže sa oplatí ponechať si ho na mieste pre ďalšie kroky.
Krok 3: Vytvorte hlavičku v šablóne
Teraz je čas vytvoriť sekciu ponuky/hlavičky na webovej lokalite v šablóne, ktorú ste práve vytvorili. Ísť do Vložiť v hornej časti obrazovky a vyberte Hlavička zo zoznamu.
V tomto bode sa otvorí dialógové okno. Pridajte názov triedy svojej novej hlavičky a kliknite OK pridajte kód do svojho HTML. Mal by automaticky umiestniť nový kód do tagy, ale v prípade potreby ho môžete presunúť.
Potom by ste mali pridať aj prvok div pre logo lokality a prvok navigácie pre ponuku lokality. Choďte na Vložiť menu a vyberte Div, potom sa vráťte na Vložiť menu a vyberte Nav. Oba tieto prvky potrebujú svoj vlastný názov triedy.
Ako poslednú fázu tohto procesu sme do nášho navigačného prvku pridali niekoľko možností ponuky. Ak to chcete urobiť, prejdite na stránku Vložiť a vyberte Hypertextový odkaz. Do hlavičky našej stránky sme pridali päť hypertextových odkazov: Domov, Lev, Tiger, Jaguár a Mačka domáca.
Stránky, ktoré budú mať v hlavičke odkazy, ešte neexistujú, takže ich nechajte href vlastnosť prázdne, kým ich nevytvoríte.
Krok 4: Pridajte šablónu so štýlmi pre CSS
Ako vidíte, táto webová stránka nevyzerá tak dobre, ako je. Trochu CSS tento problém vyrieši a v Dreamweaveri môžete jednoducho pridať šablónu so štýlmi. Choďte na CSS dizajnér na pravej strane obrazovky a kliknite na Plus ikonu vedľa položky Zdroje. Stačí si vybrať názov pre šablónu so štýlmi a ostatné nastavenia môžete nechať tak, ako sú.
Prvá vec, ktorú musíte urobiť, je zmeniť hlavičku na flexbox. Flexbox je len jedným zo spôsobov usporiadania webovej stránky pomocou CSS. Okrem toho sa nastaví písmo stránky, nastaví sa čierne pozadie a zavedie sa niekoľko ďalších zmien, aby stránka vyzerala lepšie. Celý kód CSS si môžete pozrieť na konci článku.
Krok 5: Pridajte do šablóny upraviteľné oblasti
Upraviteľné oblasti vytvárajú časti HTML, ktoré je možné upravovať pri použití šablóny na vytváranie iných stránok. Obsah našej hlavnej stránky dokonale zapadá do regiónu, ako je tento. Ísť do Vložiť > Šablóna > Upraviteľný región na pridanie upraviteľnej oblasti na vašu stránku.
Krok 6: Pridajte obrázok/textový obsah do šablóny
Upraviteľná oblasť, ktorú ste práve pridali, je použiteľná bez akéhokoľvek dodatočného HTML, no stále môžete pridávať nejaké na úpravu, keď vytvárate jednotlivé stránky. Ak chcete začať, prejdite na Vložiť a vyberte Div na pridanie nového prvku div na váš web.
Bude to fungovať ako kontajner pre textový obsah na stránke, ako aj ako miesto na pridanie obrázka na pozadie. Tento prvok má triedu a ID, takže rôzne stránky majú rôzne vlastnosti CSS. Títo jedinečné vzory pozadia CSS sú skvelé, ak chcete posunúť svoju webovú stránku Dreamweaver na ďalšiu úroveň.
Ďalej prejdite na Vložiť > Nadpisy > H1 ak chcete pridať nadpis do prvku div, ktorý ste práve pridali. Oba tieto prvky potrebujú na správne fungovanie nejaký CSS. Div má hodnoty pre obrázok pozadia, veľkosť pozadia a výšku. Ísť do Súbor > Uložiť všetko aby ste sa uistili, že sa vaša šablóna aktualizuje.
Obrázky môžete pridávať odkiaľkoľvek vo vašej lokálnej sieti alebo na internete, ale najlepšie je uložiť obrázky do vlastných súborov webovej lokality, aby ste k nim mali jednoduchý prístup.
Krok 7: Pridajte stránky so šablónou
Teraz, keď máte šablónu na mieste, môžete začať pridávať nejaké stránky. Ísť do Súbor > Nový a vyberte HTML pod typ dokumentu. Pridaj Názov pre každú stránku, ktorú pridáte pred stlačením Vytvorte.
Nová stránka je biela a zatiaľ nemá našu šablónu. Keď je vaša nová stránka otvorená v Dreamweaveri, prejdite na Nástroje > Šablóny a kliknite na Použiť šablónu na stránku. Vyberte si šablónu zo zoznamu a kliknite Vyberte na načítanie šablóny. Nakoniec prejdite na Súbor > Uložiť ako a pred uložením vyberte názov novej stránky.
Opakujte tento postup, kým nebudete mať dostatok stránok na splnenie vašich potrieb. Na to sa nemusíte držať jedinej šablóny; môžete pridať nové pre rôzne rozloženia stránky.
Krok 8: Pridajte odkazy na stránky do šablóny
Po pridaní stránok môžete zmeniť navigačné odkazy vo svojej šablóne tak, aby odkazovali na správne stránky. Vráťte sa do svojej šablóny a nájdite značky A, ktoré ste pridali skôr. Odstráňte zástupný odkaz a kliknite na úvodzovky otvoriť Prehľadávať Ponuka. Tu si môžete vybrať správnu stránku pre každý zo svojich odkazov.
Krok 9: Opravte CSS/HTML na nových stránkach
Každá zo stránok bude momentálne vyzerať rovnako. Je potrebné urobiť niekoľko krokov, aby ste zabezpečili, že budú mať svoj vlastný obsah; dokončite svoju novú webovú stránku podľa nižšie uvedených krokov.
- Zmeňte ID prvku div obsahu na každej stránke tak, aby odrážalo názov stránky
- Pridajte kód CSS pre nový identifikátor prvku s iným obrázkom na pozadí
- Zmeňte názov na každej stránke
Krok 10: Otestujte webovú stránku vo svojom prehliadači
Svoju novú webovú stránku si môžete otestovať vo svojom webovom prehliadači priamo z Adobe Dreamweaver. Ísť do Súbor > Ukážka v reálnom čase a vyberte prehliadač podľa vášho výberu na zobrazenie vašej webovej stránky. Je to skvelé na testovanie CSS alebo iného kódu, ktorý nie je kompatibilný s každým prehliadačom.
Teraz už len potrebujete niekde hostiť svoju webovú stránku. Hostenie statickej stránky pomocou AWS S3 je skvelé miesto, kde začať.
Kód HTML a CSS
<!doctype html>
<html>
<hlavu>
<meta znaková sada="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<titul>Dokument bez názvu</title>
<!-- TemplateEndEditable -->
<odkaz href="../page-css.css" rel="štýlov" typ="text/css">
</head>
<telo>
<trieda hlavičky="hlavná hlavička">
<trieda div="logo stránky">Ukážková stránka MakeUseOf</div>
<trieda navigácie="hlavné menu">
<a href="../Home.html">Domov</a><a href="../Lion.html">Lev</a><a href="../Tiger.html">Tiger</a><a href="../Jaguar.html">Jaguár</a><a href="../Domová mačka.html">domáca mačka</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<trieda div="hlavný obsah" id="lev">
<h1>Toto je lev!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Toto HTML vytvorí hotovú webovú stránku pre náš projekt. Môžete ho rozobrať, aby ste videli, ako to funguje, ale odporúčame vám vytvoriť si vlastný kód HTML pre váš web.
@charset "utf-8";
telo {
okraj: 0;
pozadie: čierne;
rodina fontov: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.hlavná hlavička {
displej: flex;
pozadie: čierne;
výplň: 20px;
}
.logo stránky {
šírka: 30 %;
farba: biela;
font-weight: bold;
text-transform: veľké písmená;
}
.hlavné menu {
šírka: 70 %;
zarovnanie textu: vpravo;
}
.hlavné menua {
výplň: 10px;
text-dekorácia: žiadna;
farba: biela;
}
.hlavný obsah {
výška: 100vh;
výplň: 20px;
veľkosť pozadia: obal;
}
.hlavný obsahh1 {
farba: biela;
veľkosť písma: 10rem;
text-transform: veľké písmená;
}
#lev {
obrázok na pozadí: url("Images/largelion.png");
}
#tiger {
obrázok na pozadí: url("Images/tiger.png");
}
#jaguar {
obrázok na pozadí: url("Images/jaguar.png");
}
#domáca mačka {
obrázok na pozadí: url("Images/housecat.png");
}
#allcats {
obrázok na pozadí: url("Images/loadsofcats.png");
}Tento CSS je tiež súčasťou hotového projektu. Podobne ako v HTML, o ktorom sme hovorili, aj s týmto kódom sa môžete pohrať, aby ste si tento web prispôsobili.
Vytváranie webových stránok pomocou programu Adobe Dreamweaver
Dreamweaver sa nemusí zdať tak jednoduchý na používanie ako nástroje ako WordPress alebo Squarespace, no poskytuje vám oveľa väčší výkon. Táto príručka je skvelým východiskovým bodom, ale je tu oveľa viac, čo sa môžete naučiť, a stojí za to preskúmať Dreamweaver pre seba.
