Pukseeritavate veebisaitide koostajate maailmas on Adobe Dreamweaver hästi hakkama saanud, et püsida konkurentsis asjakohasena. Suurepäraste funktsioonide ja paljude tööriistadega, mis muudavad teie elu lihtsaks, on see tarkvara suurepärane valik veebidisaineritele ja arendajatele.
Aga kuidas luua Dreamweaveri abil oma esimene veebisait?
Dreamweaveri kasutamise alustamine
Enne sellega töötamist peate hankima Adobe Dreamweaveri koopia, kuid saadaval on tasuta prooviversioon.
Suunduge aadressile Adobe logige sisse või registreerige konto ja alustamiseks laadige alla Adobe Creative Cloudi tööriist. Siit saate alla laadida Adobe Dreamweaveri ja alustada täieliku juhendiga.
See juhend näitab teile, kuidas luua põhiline veebisait, kasutades selle aluseks Dreamweaveri mallifaile. Projekti täielikud failid leiate aadressilt see GitHubi hoidla.
1. samm: looge Dreamweaveri sait
Avage Adobe Dreamweaver ja minge lehele Sait lehe ülaosas. Valige Uus sait, seejärel valige oma veebisaidile nimi ja faili asukoht.
2. samm: looge mallifail
Järgmiseks on aeg luua oma uue veebisaidi jaoks mallifail. Mallifailid töötavad sarnaselt CMS-süsteemide (nt WordPress ja Shopify) kasutatavate teemadega, ainult teie teete need ise.
Kliki Loo uus või minge aadressile Fail > Uus ja vali HTML mall alates dokumendi tüüp nimekirja.
See loob põhimalli, mille HTML on juba paigas. Kasutate seda HTML-i oma projekti jaoks, seega tasub see järgmiste sammude jaoks alles hoida.
3. samm: looge mallile päis
Nüüd on aeg luua veebisaidi menüü/päise jaotis äsja loodud mallis. Minema Sisestage ekraani ülaosas ja valige Päis nimekirjast.
Sel hetkel avaneb dialoog. Lisage oma uue päise klassi nimi ja klõpsake nuppu Okei koodi lisamiseks oma HTML-i. See peaks uue koodi automaatselt sisestama silte, kuid saate seda vajadusel teisaldada.
Pärast seda peaksite lisama saidi logo jaoks ka div-elemendi ja saidi menüüsse navigeerimiselemendi. Mine lehele Sisestage menüü ja valige Div, seejärel minge tagasi lehele Sisestage menüü ja valige Nav. Mõlemad elemendid vajavad oma klassi nime.
Selle protsessi viimase etapina lisasime oma navigeerimiselemendile mõned menüüvalikud. Selleks minge aadressile Sisestage ja valige Hüperlink. Lisasime oma saidi päisesse viis hüperlinki: Home, Lion, Tiger, Jaguar ja House Cat.
Lehtesid, mille päises on linke, pole veel olemas, seega jätke href atribuut tühjaks, kuni need loote.
4. samm: lisage CSS-i stiilileht
Nagu näete, ei näe see veebisait praegusel kujul eriti hea välja. Natuke CSS-i lahendab selle probleemi ja saate Dreamweaveris hõlpsasti stiilitabeli lisada. Mine lehele CSS-i kujundaja ekraani paremas servas ja klõpsake nuppu Pluss ikooni Allikad kõrval. Peate lihtsalt oma stiilitabelile nime valima ja ülejäänud seaded võite jätta samaks.
Esimene asi, mida teha, on muuta päis flexboxiks. Flexbox on vaid üks viis CSS-i abil veebilehe kujundamiseks. Lisaks sellele määratakse saidi font, must taust ja mitmed muud muudatused, mis muudavad saidi paremaks. Täielikku CSS-koodi näete artikli lõpus.
5. samm: lisage mallile redigeeritavad piirkonnad
Redigeeritavad piirkonnad loovad HTML-i jaotisi, mida saab muude lehtede koostamiseks malli kasutades redigeerida. Meie avalehe sisu sobib ideaalselt sellisesse piirkonda. Minema Sisestage > Mall > Redigeeritav piirkond et lisada lehele redigeeritav piirkond.
6. samm: lisage mallile pildi/teksti sisu
Äsja lisatud redigeeritav piirkond on kasutatav ilma täiendava HTML-ita, kuid üksikute lehtede loomisel saate siiski mõned redigeerimiseks lisada. Alustamiseks minge aadressile Sisestage ja valige Div et lisada oma veebisaidile uus div element.
See toimib nii lehe tekstisisu konteinerina kui ka taustapildi lisamise kohana. Sellel elemendil on klass ja ID, nii et erinevatel lehtedel on erinevad CSS-i omadused. Need ainulaadsed CSS-i taustamustrid on suurepärane, kui soovite oma Dreamweaveri veebisaidi järgmisele tasemele viia.
Järgmisena minge aadressile Sisestage > Pealkirjad > H1 äsja lisatud div-elemendi sisse pealkirja lisamiseks. Mõlemad elemendid vajavad korralikuks töötamiseks CSS-i. Divis on taustapildi, tausta suuruse ja kõrguse väärtused. Minema Fail > Salvesta kõik veendumaks, et teie mall värskendatakse.
Saate lisada pilte kõikjalt oma kohalikust võrgust või Internetist, kuid lihtsaks juurdepääsuks on parem salvestada pildid veebisaidi enda failidesse.
7. samm: lisage malliga lehti
Nüüd, kui teil on mall paigas, võite hakata mõnda lehekülge lisama. Minema Fail > Uus ja valige HTML all dokumendi tüüp. Lisa Pealkiri iga lehe kohta, mille enne vajutamist lisate Loo.
Uus leht on valge ja sellel pole veel meie malli. Kui teie uus leht on Dreamweaveris avatud, minge aadressile Tööriistad > Mallid ja klõpsake edasi Rakenda lehele mall. Valige loendist oma mall ja klõpsake Valige malli laadimiseks. Lõpuks minge aadressile Fail > Salvesta kui ja valige enne salvestamist uuele lehele nimi.
Korrake seda protsessi, kuni teil on oma vajaduste rahuldamiseks piisavalt lehti. Selleks ei pea te kinni pidama ühest mallist; saate lisada uusi erinevate lehepaigutuste jaoks.
8. samm: lisage mallile lehelingid
Kui lehed on lisatud, saate mallis olevaid navigeerimislinke muuta nii, et need lingiks õigetele lehtedele. Minge tagasi oma malli juurde ja leidke varem lisatud A-sildid. Kustutage kohatäite link ja klõpsake nuppu jutumärgid avada Sirvige menüü. Siit saate valida iga oma lingi jaoks õige lehe.
9. toiming: parandage uutel lehtedel CSS/HTML
Kõik lehed näevad hetkel ühesugused. Selleks, et neil oleks oma sisu, tuleb astuda mõned sammud; järgige oma uue veebisaidi lõpetamiseks allolevaid samme.
- Muutke sisu div elemendi ID-d igal lehel, et see kajastaks lehe pealkirja
- Lisage uue elemendi ID jaoks CSS-kood erineva taustapildiga
- Muutke igal lehel pealkirja
10. samm: testige veebisaiti oma brauseris
Saate oma uut veebisaiti testida oma valitud veebibrauseris otse Adobe Dreamweaverist. Minema Fail > Reaalajas eelvaade ja valige oma veebisaidi vaatamiseks oma valitud brauser. See sobib suurepäraselt CSS-i või muu koodi testimiseks, mis ei ühildu iga brauseriga.
Nüüd vajate lihtsalt kohta, kus oma veebisaiti majutada. Staatilise saidi hostimine AWS S3-ga on suurepärane koht alustamiseks.
HTML- ja CSS-kood
<!doctype html>
<html>
<pea>
<metamärgistik="utf-8">
<!-- TemplateBeginEditable name="doktiit" -->
<pealkiri>Pealkirjata dokument</title>
<!-- TemplateEndRedigeeritav -->
<link href="../page-css.css" rel="stiilileht" tüüp="tekst/css">
</head>
<keha>
<header class="peapäis">
<div klass="saidi logo">MakeUseOfi näitesait</div>
<nav class="peamenüü">
<a href="../Home.html">Kodu</a><a href="../Lõvi.html">Lõvi</a><a href="../Tiger.html">Tiiger</a><a href="../Jaguar.html">Jaguar</a><a href="../Majakass.html">Maja kass</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div klass="põhisisu" id="lõvi">
<h1>See on lõvi!</h1>
</div>
<!-- TemplateEndRedigeeritav -->
</body>
</html>
See HTML loob meie projekti jaoks valmis veebisaidi. Saate selle lahti võtta, et näha, kuidas see töötab, kuid soovitame teil luua oma veebisaidi jaoks oma HTML-i.
@charset "utf-8";
keha {
marginaal: 0;
taust: must;
fondiperekond: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
ekraan: flex;
taust: must;
polster: 20px;
}
.site-logo {
laius: 30%;
värv: valge;
fondi kaal: paks;
text-transform: suurtähtedega;
}
.peamenüü {
laius: 70%;
teksti joondamine: paremale;
}
.peamenüüa {
polster: 10px;
tekst-kaunistus: puudub;
värv: valge;
}
.põhisisu {
kõrgus: 100vh;
polster: 20px;
tausta suurus: kaas;
}
.põhisisuh1 {
värv: valge;
fondi suurus: 10rem;
text-transform: suurtähtedega;
}
#lõvi {
taustapilt: url("Images/largelion.png");
}
#tiger {
taustapilt: url("Images/tiger.png");
}
#jaguar {
taustapilt: url("Images/jaguar.png");
}
#kodukass {
taustapilt: url("Images/housecat.png");
}
#allcats {
taustapilt: url("Images/loadsofcats.png");
}See CSS on samuti osa valmis projektist. Sarnaselt meie käsitletud HTML-iga saate selle koodiga mängida, et muuta see veebisait enda omaks.
Veebisaitide loomine Adobe Dreamweaveri abil
Dreamweaveri kasutamine ei pruugi tunduda nii lihtne kui selliseid tööriistu nagu WordPress või Squarespace, kuid see annab teile palju rohkem jõudu. See juhend on suurepärane lähtepunkt, kuid õppida on veel palju ja tasub Dreamweaveri enda jaoks uurida.
