Vilkšanas un nomešanas vietņu veidotāju pasaulē programma Adobe Dreamweaver ir labi pastrādājusi, saglabājot savu aktualitāti konkurences apstākļos. Šī programmatūra ir aprīkota ar lieliskām funkcijām un daudziem rīkiem, kas atvieglo jūsu dzīvi, un tā ir lieliska izvēle tīmekļa dizaineriem un izstrādātājiem.

Bet kā izveidot savu pirmo vietni, izmantojot Dreamweaver?

Darba sākšana ar Dreamweaver

Lai varētu strādāt ar to, jums ir jāiegūst Adobe Dreamweaver kopija, taču ir pieejama bezmaksas izmēģinājuma versija.

Dodieties uz Adobe vietnē, piesakieties vai reģistrējiet kontu un lejupielādējiet Adobe Creative Cloud rīku, lai sāktu darbu. Šeit varat lejupielādēt programmu Adobe Dreamweaver un sākt ar pilnu rokasgrāmatu.

Šajā rokasgrāmatā tiks parādīts, kā izveidot pamata vietni, par pamatu izmantojot Dreamweaver veidņu failus. Pilnus projekta failus varat atrast vietnē šajā GitHub repozitorijā.

1. darbība. Izveidojiet Dreamweaver vietni

Atveriet Adobe Dreamweaver un dodieties uz Vietne izvēlni lapas augšdaļā. Izvēlieties

Jauna vietne, pēc tam izvēlieties savas vietnes nosaukumu un izvēlieties tai faila atrašanās vietu.

2. darbība: izveidojiet veidnes failu

Pēc tam ir pienācis laiks izveidot veidnes failu savai jaunajai vietnei. Veidņu faili darbojas līdzīgi motīviem, ko izmanto CMS sistēmas, piemēram, WordPress un Shopify, tikai jūs tos izveidojat pats.

Klikšķiniet uz Izveidot jaunu vai doties uz Fails > Jauns un izvēlēties HTML veidne no Dokumenta veids sarakstu.

Tādējādi tiks izveidota pamata veidne ar jau ievietotu HTML. Jūs izmantosit šo HTML savam projektam, tāpēc ir vērts to paturēt savā vietā turpmākajām darbībām.

​​​​​​

3. darbība. Veidnē izveidojiet galveni

Tagad ir pienācis laiks izveidot izvēlnes/galvenes sadaļu vietnē tikko izveidotajā veidnē. Iet uz Ievietot ekrāna augšdaļā un atlasiet Virsraksts no saraksta.

Šajā brīdī tiks atvērts dialoglodziņš. Pievienojiet nosaukumu savai jaunajai galvenes klasei un noklikšķiniet uz labi lai pievienotu kodu savam HTML. Tam automātiski jāievieto jaunais kods tagus, taču varat to pārvietot, ja nepieciešams.

Pēc tam jums vajadzētu pievienot arī div elementu vietnes logotipam un navigācijas elementu vietnes izvēlnei. Dodieties uz Ievietot izvēlni un atlasiet Div, pēc tam dodieties atpakaļ uz Ievietot izvēlni un atlasiet Nav. Abiem šiem elementiem ir nepieciešams savs klases nosaukums.

Kā pēdējais šī procesa posms mūsu navigācijas elementam pievienojām dažas izvēlnes opcijas. Lai to izdarītu, dodieties uz Ievietot un atlasiet Hipersaite. Mēs pievienojām piecas hipersaites mūsu vietnes galvenē: Home, Lion, Tiger, Jaguar un House Cat.

Lapas, kuru galvenē būs saites, vēl nepastāv, tāpēc atstājiet href rekvizīti ir tukši, līdz tos izveidojat.

4. darbība. Pievienojiet CSS stila lapu

Kā redzat, šī vietne neizskatās īpaši labi, kāda tā ir. Nedaudz CSS atrisinās šo problēmu, un programmā Dreamweaver varat viegli pievienot stila lapu. Dodieties uz CSS dizainers ekrāna labajā pusē un noklikšķiniet uz Plus ikonu blakus Avoti. Jums vienkārši jāizvēlas stila lapas nosaukums, un pārējos iestatījumus varat atstāt tādus, kādi tie ir.

Pirmā lieta, kas jādara, ir pārvērst galveni elastīgajā lodziņā. Flexbox ir tikai viens veids, kā izveidot tīmekļa lapu, izmantojot CSS. Līdztekus tam ir iestatīts vietnes fonts, melns fons un vairākas citas izmaiņas, lai vietne izskatās labāk. Pilnu CSS kodu varat redzēt raksta beigās.

5. darbība: pievienojiet veidnei rediģējamos reģionus

Rediģējamie reģioni veido HTML sadaļas, kuras var rediģēt, kad izmantojat veidni citu lapu veidošanai. Mūsu galvenās lapas saturs lieliski iekļaujas tādā reģionā kā šis. Iet uz Ievietot > Veidne > Rediģējams reģions lai savai lapai pievienotu rediģējamu reģionu.

6. darbība. Pievienojiet veidnei attēla/teksta saturu

Tikko pievienotais rediģējamais reģions ir lietojams bez papildu HTML, taču jūs joprojām varat pievienot dažus rediģēšanai, veidojot atsevišķas lapas. Lai sāktu, dodieties uz Ievietot un atlasiet Div lai savai vietnei pievienotu jaunu div elementu.

Tas darbosies gan kā lapas teksta satura konteiners, gan kā vieta fona attēla pievienošanai. Šim elementam ir klase un ID, lai dažādām lapām būtu dažādi CSS rekvizīti. Šie unikāli CSS fona modeļi ir lieliski piemēroti, ja vēlaties pacelt savu Dreamweaver vietni uz nākamo līmeni.

Tālāk dodieties uz Ievietot > Virsraksti > H1 lai pievienotu virsrakstu tikko pievienotajam div elementam. Lai abi šie elementi darbotos pareizi, ir nepieciešams CSS. Div ir fona attēla, fona izmēra un augstuma vērtības. Iet uz Fails > Saglabāt visu lai pārliecinātos, ka jūsu veidne tiek atjaunināta.

​​​​​​

Varat pievienot attēlus no jebkuras vietas vietējā tīklā vai internetā, taču vislabāk ir saglabāt attēlus vietnes failos, lai tiem būtu viegli piekļūt.

7. darbība: pievienojiet lapas, izmantojot veidni

Tagad, kad jums ir izveidota veidne, varat sākt pievienot dažas lapas. Iet uz Fails > Jauns un atlasiet HTML zem Dokumenta veids. Pievienojiet a Nosaukums katrai lapai, kuru pievienojat pirms nokļūšanas Izveidot.

Jaunā lapa ir balta, un tajā vēl nav mūsu veidnes. Kad jūsu jaunā lapa ir atvērta pakalpojumā Dreamweaver, dodieties uz Rīki > Veidnes un noklikšķiniet uz Lietot veidni lapai. Sarakstā izvēlieties savu veidni un noklikšķiniet uz Izvēlieties lai ielādētu savu veidni. Visbeidzot, dodieties uz Fails > Saglabāt kā un izvēlieties nosaukumu savai jaunajai lapai pirms tās saglabāšanas.

Atkārtojiet šo procesu, līdz jums ir pietiekami daudz lapu, lai atbilstu jūsu vajadzībām. Šim nolūkam jums nav jāpieturas pie vienas veidnes; varat pievienot jaunus dažādiem lapu izkārtojumiem.

8. darbība. Pievienojiet veidnei lapas saites

Ja lapas ir pievienotas, veidnē varat mainīt navigācijas saites, lai tās novirzītu uz pareizajām lapām. Atgriezieties savā veidnē un atrodiet iepriekš pievienotās A atzīmes. Izdzēsiet viettura saiti un noklikšķiniet uz pēdiņas lai atvērtu Pārlūkot izvēlne. Šeit katrai saitei varat atlasīt pareizo lapu.

9. darbība. Labojiet CSS/HTML jaunajās lapās

Katra no lapām šobrīd izskatīsies vienādi. Ir jāveic dažas darbības, lai nodrošinātu, ka tām ir savs saturs; veiciet tālāk norādītās darbības, lai pabeigtu savas jaunās vietnes izveidi.

  • Mainiet satura div elementa ID katrā lapā, lai tas atspoguļotu lapas nosaukumu
  • Pievienojiet CSS kodu jaunajam elementa ID ar citu fona attēlu
  • Mainiet virsrakstu katrā lapā

10. darbība: pārbaudiet vietni savā pārlūkprogrammā

Varat pārbaudīt savu jauno vietni savā izvēlētajā tīmekļa pārlūkprogrammā tieši no Adobe Dreamweaver. Iet uz Fails > Reāllaika priekšskatījums un atlasiet pārlūkprogrammu pēc savas izvēles, lai skatītu savu vietni. Tas ir lieliski piemērots, lai pārbaudītu CSS vai citu kodu, kas nav saderīgs ar katru pārlūkprogrammu.

Tagad jums vienkārši ir nepieciešama vieta, kur mitināt savu vietni. Statiskas vietnes mitināšana ar AWS S3 ir lieliska vieta, kur sākt.

HTML un CSS kods

<!doctype html>
<html>
<galvu>
<meta rakstzīmju kopa ="utf-8">
<!-- TemplateBeginEditable name="doktīcija" -->
<virsraksts>Dokuments bez nosaukuma</title>
<!-- TemplateEndEditable -->
<saite href="../page-css.css" rel="stila lapa" tips="teksts/css">
</head>
<ķermeni>
<galvenes klase="galvenā virsraksts">
<div klase="vietnes logotips">MakeUseOf parauga vietne</div>
<nav klase="galvenā izvēlne">
<a href="../Sākums.html">Mājas</a><a href="../Lauva.html">Lauva</a><a href="../Tīģeris.html">Tīģeris</a><a href="../Jaguar.html">Jaguārs</a><a href="../Māja Cat.html">Mājas kaķis</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div klase="galvenais saturs" id="lauva">
<h1>Tas ir lauva!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

Šis HTML veido mūsu projekta gatavo vietni. Varat to izjaukt, lai redzētu, kā tas darbojas, taču mēs iesakām izveidot savu HTML savai vietnei.

@charset "utf-8";
body {
 piemale: 0;
 fons: melns;
 fontu saime: Gotham, "Helvetica Neue", Helvetica, Arial, "sans serif";
}
.main-header {
 displejs: flex;
 fons: melns;
 polsterējums: 20 pikseļi;
}
.site-logo {
 platums: 30%;
 krāsa: balta;
 fonta svars: treknrakstā;
 teksta pārveidošana: lielie burti;
}
.galvenā izvēlne {
 platums: 70%;
 teksta līdzināšana: pa labi;
}
.galvenā izvēlnea {
 polsterējums: 10 pikseļi;
 teksta noformējums: nav;
 krāsa: balta;
}
.galvenais saturs {
 augstums: 100vh;
 polsterējums: 20 pikseļi;
 fona izmērs: vāks;
}
.galvenais satursh1 {
 krāsa: balta;
 fonta izmērs: 10rem;
 teksta pārveidošana: lielie burti; 
}
#lauva {
 fona attēls: url("Images/largelion.png");
}
#tīģeris {
 fona attēls: url("Images/tiger.png");
}
#jaguar {
 fona attēls: url("Images/jaguar.png");
}
#mājaskaķis {
 fona attēls: url("Images/housecat.png");
}
#allcats {
 fona attēls: url("Images/loadsofcats.png");
}

Šis CSS ir arī daļa no pabeigtā projekta. Tāpat kā mūsu aplūkotais HTML, varat spēlēt ar šo kodu, lai padarītu šo vietni par savu.

Vietņu veidošana, izmantojot programmu Adobe Dreamweaver

Dreamweaver var šķist ne tik vienkārši lietojams kā tādus rīkus kā WordPress vai Squarespace, taču tas sniedz jums daudz vairāk jaudas. Šis ceļvedis ir lielisks sākumpunkts, taču ir vēl daudz kas jāapgūst, un ir vērts pašiem izpētīt Dreamweaver.