Adobe Dreamweaver se je v svetu graditeljev spletnih mest s funkcijo povleci in spusti dobro izkazal, da je ostal ustrezen med konkurenco. Ta programska oprema, opremljena z odličnimi funkcijami in množico orodij, ki olajšajo vaše življenje, je odlična izbira za spletne oblikovalce in razvijalce.
Kako pa ustvarite svoje prvo spletno mesto z Dreamweaverjem?
Kako začeti uporabljati Dreamweaver
Preden začnete delati z njim, morate pridobiti kopijo programa Adobe Dreamweaver, vendar je na voljo brezplačna preskusna različica.
Pojdite na Adobe spletnem mestu, se prijavite ali registrirajte račun in prenesite orodje Adobe Creative Cloud, da začnete. Od tu lahko prenesete Adobe Dreamweaver in začnete s celotnim vodnikom.
Ta vodnik vam bo pokazal, kako narediti osnovno spletno stran z uporabo datotek predlog Dreamweaver kot osnovo. Celotne datoteke projekta najdete na tem repozitoriju GitHub.
1. korak: Ustvarite spletno mesto Dreamweaver
Odprite Adobe Dreamweaver in pojdite na Spletno mesto meni na vrhu strani. Izberite
Novo spletno mesto, nato izberite ime za svoje spletno mesto in izberite lokacijo datoteke zanj.2. korak: Ustvarite datoteko predloge
Nato je čas, da ustvarite datoteko predloge za vaše novo spletno mesto. Datoteke s predlogami delujejo podobno kot teme, ki jih uporabljajo sistemi CMS, kot sta WordPress in Shopify, le da jih naredite sami.
Kliknite na Ustvari novo ali pojdite na mapa > Novo in izberite Predloga HTML Iz Vrsta dokumenta seznam.
To bo ustvarilo osnovno predlogo z nekaj že nameščenega HTML-ja. Ta HTML boste uporabili za svoj projekt, zato ga je vredno obdržati za naslednje korake.
3. korak: Ustvarite glavo v predlogi
Zdaj je čas, da na spletnem mestu v predlogi, ki ste jo pravkar ustvarili, ustvarite razdelek menija/glave. Pojdi do Vstavi na vrhu zaslona in izberite Glava s seznama.
Na tej točki se odpre pogovorno okno. Dodajte ime za vaš novi razred glave in kliknite v redu da dodate kodo v svoj HTML. Novo kodo mora samodejno postaviti znotraj oznake, vendar ga lahko po potrebi premaknete.
Po tem bi morali dodati tudi element div za logotip spletnega mesta in element nav za meni spletnega mesta. Pojdi na Vstavi meni in izberite div, nato pa se vrnite na Vstavi meni in izberite Nav. Oba elementa potrebujeta svoje ime razreda.
Kot zadnjo fazo v tem procesu smo našemu navigacijskemu elementu dodali nekaj možnosti menija. Če želite to narediti, pojdite na Vstavi in izberite Hiperpovezava. V glavo našega spletnega mesta smo dodali pet hiperpovezav: dom, lev, tiger, jaguar in hišna mačka.
Strani, ki bodo imele povezave v glavi, še ne obstajajo, zato zapustite href lastnost prazna, dokler jih ne ustvarite.
4. korak: dodajte slogovno datoteko za CSS
Kot lahko vidite, ta spletna stran ne izgleda dobro, kot je. Nekaj CSS-ja bo rešilo to težavo, v Dreamweaverju pa lahko preprosto dodate slogovno datoteko. Pojdi na Oblikovalec CSS na desni strani zaslona in kliknite Plus ikona poleg Viri. Izbrati morate samo ime za vašo datoteko slogov in lahko pustite ostale nastavitve, kakršne so.
Prva stvar je, da glavo spremenite v flexbox. Flexbox je samo en način postavitve spletne strani s pomočjo CSS. Poleg tega je nastavljena pisava spletnega mesta, nastavljeno je črno ozadje in vnesenih je več drugih sprememb, ki izboljšajo videz spletnega mesta. Celotno kodo CSS si lahko ogledate na koncu članka.
5. korak: Predlogi dodajte območja, ki jih je mogoče urejati
Območja, ki jih je mogoče urejati, ustvarjajo odseke HTML, ki jih je mogoče urejati, ko uporabite predlogo za izdelavo drugih strani. Vsebina naše glavne strani se popolnoma prilega regiji, kot je ta. Pojdi do Vstavi > Predloga > Regija, ki jo je mogoče urejati da svoji strani dodate območje, ki ga je mogoče urejati.
6. korak: dodajte slikovno/besedilno vsebino v predlogo
Območje za urejanje, ki ste ga pravkar dodali, je uporabno brez kakršnega koli dodatnega HTML-ja, vendar ga lahko še vedno dodate za urejanje, ko ustvarjate posamezne strani. Za začetek pojdite na Vstavi in izberite div da na svoje spletno mesto dodate nov element div.
To bo delovalo kot vsebnik za besedilno vsebino na strani in kot prostor za dodajanje slike ozadja. Ta element ima razred in ID, tako da imajo različne strani različne lastnosti CSS. te edinstveni vzorci ozadja CSS so odlični, če želite svoje spletno mesto Dreamweaver dvigniti na višjo raven.
Nato pojdite na Vstavi > Naslovi > H1 da dodate naslov znotraj elementa div, ki ste ga pravkar dodali. Oba elementa potrebujeta nekaj CSS za pravilno delovanje. Div ima vrednosti slike ozadja, velikosti ozadja in višine. Pojdi do mapa > Shrani vse da zagotovite, da se vaša predloga posodablja.
Slike lahko dodate kjer koli v lokalnem omrežju ali internetu, vendar je najbolje, da slike shranite v lastne datoteke spletnega mesta za lažji dostop.
7. korak: dodajte strani s predlogo
Zdaj, ko imate pripravljeno predlogo, lahko začnete dodajati nekaj strani. Pojdi do mapa > Novo in izberite HTML Spodaj Vrsta dokumenta. Dodaj a Naslov za vsako stran, ki jo dodate pred zadetkom Ustvari.
Nova stran je bela in še nima naše predloge. Ko je vaša nova stran odprta v Dreamweaverju, pojdite na Orodja > Predloge in kliknite na Uporabi predlogo za stran. Na seznamu izberite svojo predlogo in kliknite Izberite da naložite svojo predlogo. Končno pojdite na mapa > Shrani kot in izberite ime za svojo novo stran, preden jo shranite.
Ta postopek ponavljajte, dokler ne boste imeli dovolj strani za svoje potrebe. Za to se vam ni treba držati ene same predloge; lahko dodate nove za različne postavitve strani.
8. korak: dodajte povezave strani v predlogo
Ko dodate svoje strani, lahko spremenite navigacijske povezave v svoji predlogi, tako da povezujejo na prave strani. Vrnite se na svojo predlogo in poiščite oznake A, ki ste jih dodali prej. Izbrišite nadomestno povezavo in kliknite na Narekovaji odpreti Prebrskaj meni. Tukaj lahko izberete pravo stran za vsako od svojih povezav.
9. korak: Popravite CSS/HTML na novih straneh
Vsaka od strani bo trenutno videti enako. Za zagotovitev, da imajo lastno vsebino, morate narediti nekaj korakov; sledite spodnjim korakom, da dokončate svoje novo spletno mesto.
- Spremenite ID elementa div vsebine na vsaki strani, da bo odražal naslov strani
- Dodajte kodo CSS za nov ID elementa z drugačno sliko ozadja
- Spremenite naslov na vsaki strani
10. korak: preizkusite spletno mesto v svojem brskalniku
Svojo novo spletno stran lahko preizkusite v izbranem spletnem brskalniku neposredno iz programa Adobe Dreamweaver. Pojdi do mapa > Predogled v realnem času in izberite brskalnik po vaši izbiri za ogled vaše spletne strani. To je super za testiranje CSS ali druge kode, ki ni združljiva z vsemi brskalniki.
Zdaj potrebujete le še prostor za gostovanje vaše spletne strani. Gostovanje statičnega spletnega mesta z AWS S3 je odličen kraj za začetek.
Koda HTML in CSS
<!doctype html>
<html>
<glavo>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doktitle" -->
<naslov>Dokument brez naslova</title>
<!-- TemplateEndEditable -->
<povezava href="../page-css.css" rel="slogovna tabela" vrsta="besedilo/css">
</head>
<telo>
<razred glave="glavna glava">
<razred div="logotip spletnega mesta">Primer spletnega mesta MakeUseOf</div>
<nav class="glavni meni">
<a href="../Domov.html">domov</a><a href="../Lion.html">Lev</a><a href="../Tiger.html">Tiger</a><a href="../Jaguar.html">Jaguar</a><a href="../Hišna mačka.html">Hišna mačka</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<razred div="glavna vsebina" id="lev">
<h1>To je lev!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Ta HTML gradi končno spletno mesto za naš projekt. Lahko ga razstavite, da vidite, kako deluje, vendar vam priporočamo, da ustvarite svoj HTML za svoje spletno mesto.
@charset "utf-8";
telo {
rob: 0;
ozadje: črno;
družina pisav: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
zaslon: flex;
ozadje: črno;
oblazinjenje: 20px;
}
.site-logo {
širina: 30 %;
barva: bela;
teža pisave: krepko;
preoblikovanje besedila: velike črke;
}
.glavni meni {
širina: 70 %;
poravnava besedila: desno;
}
.glavni menia {
oblazinjenje: 10px;
tekst-dekoracija: brez;
barva: bela;
}
.glavna-vsebina {
višina: 100vh;
oblazinjenje: 20px;
velikost ozadja: naslovnica;
}
.glavna-vsebinah1 {
barva: bela;
velikost pisave: 10 rem;
preoblikovanje besedila: velike črke;
}
#lev {
slika ozadja: url("Slike/largelion.png");
}
#tiger {
slika ozadja: url("Slike/tiger.png");
}
#jaguar {
slika ozadja: url("Slike/jaguar.png");
}
#housecat {
slika ozadja: url("Slike/housecat.png");
}
#allcats {
slika ozadja: url("Slike/loadsofcats.png");
}Tudi ta CSS je del končanega projekta. Tako kot HTML, ki smo ga obravnavali, se lahko poigrate s to kodo, da naredite to spletno mesto po svoje.
Izdelava spletnih mest z Adobe Dreamweaver
Dreamweaver se morda ne zdi tako enostaven za uporabo kot orodja, kot sta WordPress ali Squarespace, vendar vam daje veliko več moči. Ta vodnik je odlično izhodišče, vendar se morate še veliko naučiti in vredno je, da sami raziščete Dreamweaver.
