Nuvilkimo svetainių kūrėjų pasaulyje „Adobe Dreamweaver“ puikiai pasielgė išlikdama aktuali konkurencijos sąlygomis. Ši programinė įranga, kurioje gausu puikių funkcijų ir įrankių, palengvinančių jūsų gyvenimą, yra puikus pasirinkimas žiniatinklio dizaineriams ir kūrėjams.
Bet kaip sukurti savo pirmąją svetainę naudojant Dreamweaver?
Darbo su Dreamweaver pradžia
Prieš pradėdami dirbti su ja, turite gauti „Adobe Dreamweaver“ kopiją, tačiau yra nemokama bandomoji versija.
Eikite į Adobe svetainėje, prisijunkite arba užregistruokite paskyrą ir atsisiųskite „Adobe Creative Cloud“ įrankį, kad pradėtumėte. Iš čia galite atsisiųsti „Adobe Dreamweaver“ ir pradėti nuo viso vadovo.
Šis vadovas parodys, kaip sukurti pagrindinę svetainę naudojant Dreamweaver šablonų failus kaip pagrindą. Visus projekto failus galite rasti adresu šioje „GitHub“ saugykloje.
1 veiksmas: sukurkite „Dreamweaver“ svetainę
Atidarykite „Adobe Dreamweaver“ ir eikite į Svetainė meniu puslapio viršuje. Pasirinkite Nauja svetainė, tada pasirinkite savo svetainės pavadinimą ir failo vietą.
2 veiksmas: sukurkite šablono failą
Tada laikas sukurti naujos svetainės šablono failą. Šablonų failai veikia panašiai kaip temos, naudojamos TVS sistemose, pvz., „WordPress“ ir „Shopify“, tik jūs patys jas kuriate.
Spustelėkite Sukurk naują arba eiti į Failas > Nauja ir pasirinkti HTML šablonas nuo dokumento tipas sąrašą.
Taip bus sukurtas pagrindinis šablonas su jau įdiegtu HTML. Šį HTML naudosite savo projektui, todėl verta jį išlaikyti atliekant kitus veiksmus.
3 veiksmas: šablone sukurkite antraštę
Dabar atėjo laikas sukurti meniu / antraštės skyrių svetainėje pagal ką tik sukurtą šabloną. Eiti į Įdėti ekrano viršuje ir pasirinkite Antraštė iš sąrašo.
Šiuo metu atsidarys dialogo langas. Pridėkite naujos antraštės klasės pavadinimą ir spustelėkite Gerai kad pridėtumėte kodą prie savo HTML. Jis turėtų automatiškai įdėti naują kodą į žymas, bet prireikus galite ją perkelti.
Po to taip pat turėtumėte pridėti div elementą svetainės logotipui ir navigacijos elementą svetainės meniu. Eikite į Įdėti meniu ir pasirinkite Div, tada grįžkite į Įdėti meniu ir pasirinkite Nav. Abiem šiems elementams reikia savo klasės pavadinimo.
Paskutiniame šio proceso etape prie naršymo elemento įtraukėme keletą meniu parinkčių. Norėdami tai padaryti, eikite į Įdėti ir pasirinkite Hipersaitas. Į savo svetainės antraštę įtraukėme penkis hipersaitus: Home, Lion, Tiger, Jaguar ir House Cat.
Puslapių, kurių antraštėje bus nuorodos, dar nėra, todėl palikite href ypatybės tuščios, kol jas sukursite.
4 veiksmas: pridėkite CSS stiliaus lapą
Kaip matote, ši svetainė neatrodo labai gerai tokia, kokia yra. Šiek tiek CSS išspręs šią problemą, o „Dreamweaver“ galite lengvai pridėti stiliaus lapą. Eikite į CSS dizaineris dešinėje ekrano pusėje ir spustelėkite Pliusas šalia Šaltinių. Jums tereikia pasirinkti stiliaus lapo pavadinimą ir palikti kitus nustatymus tokius, kokie jie yra.
Pirmas dalykas, kurį reikia padaryti, yra paversti antraštę „flexbox“. „Flexbox“ yra tik vienas iš būdų sukurti tinklalapį naudojant CSS. Be to, nustatomas svetainės šriftas, juodas fonas ir keletas kitų pakeitimų, kad svetainė atrodytų geriau. Visą CSS kodą galite pamatyti straipsnio pabaigoje.
5 veiksmas: pridėkite redaguojamus regionus prie šablono
Redaguojami regionai sukuria HTML dalis, kurias galima redaguoti, kai naudojate šabloną kitiems puslapiams kurti. Mūsų pagrindinio puslapio turinys puikiai tinka tokiam regionui kaip šis. Eiti į Įdėti > Šablonas > Redaguojamas regionas norėdami į savo puslapį įtraukti redaguojamą sritį.
6 veiksmas: pridėkite vaizdo / teksto turinį prie šablono
Ką tik pridėtą redaguojamą sritį galima naudoti be jokio papildomo HTML, bet kurdami atskirus puslapius vis tiek galite pridėti kai kuriuos ir redaguoti. Norėdami pradėti, eikite į Įdėti ir pasirinkite Div norėdami į savo svetainę įtraukti naują div elementą.
Tai veiks ir kaip puslapio teksto turinio talpykla, ir kaip vieta fono paveikslėliui pridėti. Šis elementas turi klasę ir ID, todėl skirtingi puslapiai turi skirtingas CSS savybes. Šie unikalūs CSS fono raštai yra puikūs, jei norite perkelti savo Dreamweaver svetainę į kitą lygį.
Toliau eikite į Įdėti > Antraštės > H1 norėdami pridėti antraštę ką tik pridėtame div elemente. Kad abu šie elementai tinkamai veiktų, reikia tam tikro CSS. Div turi fono vaizdo, fono dydžio ir aukščio reikšmes. Eiti į Failas > Išsaugoti viską kad įsitikintumėte, jog jūsų šablonas atnaujinamas.
Galite pridėti vaizdų iš bet kurios vietinio tinklo ar interneto vietos, bet geriausia išsaugoti vaizdus pačios svetainės failuose, kad būtų lengviau pasiekti.
7 veiksmas: pridėkite puslapius naudodami šabloną
Dabar, kai turite šabloną, galite pradėti pridėti keletą puslapių. Eiti į Failas > Nauja ir pasirinkite HTML pagal dokumento tipas. Pridėti Pavadinimas kiekvienam puslapiui, kurį pridedate prieš paspaudę Sukurti.
Naujasis puslapis yra baltas ir jame dar nėra mūsų šablono. Atidarę naują puslapį Dreamweaver, eikite į Įrankiai > Šablonai ir spustelėkite Taikyti šabloną puslapiui. Iš sąrašo pasirinkite savo šabloną ir spustelėkite Pasirinkite kad įkeltumėte savo šabloną. Galiausiai eikite į Failas > Išsaugoti kaip ir prieš išsaugodami naują puslapį pasirinkite pavadinimą.
Kartokite šį procesą, kol turėsite pakankamai puslapių, kad atitiktų jūsų poreikius. Tam nereikia laikytis vieno šablono; galite pridėti naujų skirtingų puslapių išdėstymų.
8 veiksmas: pridėkite puslapio nuorodas į šabloną
Pridėję puslapius, šablone galite pakeisti naršymo nuorodas, kad jos nukreiptų į reikiamus puslapius. Grįžkite į savo šabloną ir raskite anksčiau pridėtas A žymas. Ištrinkite rezervuotos vietos nuorodą ir spustelėkite Kabutės atidaryti Naršyti Meniu. Čia galite pasirinkti tinkamą kiekvienos nuorodos puslapį.
9 veiksmas: pataisykite CSS / HTML naujuose puslapiuose
Kiekvienas puslapis šiuo metu atrodys vienodai. Norint užtikrinti, kad jie turėtų savo turinį, reikia atlikti kelis veiksmus; atlikite toliau nurodytus veiksmus, kad užbaigtumėte naują svetainę.
- Pakeiskite turinio div elemento ID kiekviename puslapyje, kad jis atspindėtų puslapio pavadinimą
- Pridėkite CSS kodą naujam elemento ID su kitu fono vaizdu
- Pakeiskite pavadinimą kiekviename puslapyje
10 veiksmas: išbandykite svetainę savo naršyklėje
Galite išbandyti savo naują svetainę pasirinktoje žiniatinklio naršyklėje tiesiai iš „Adobe Dreamweaver“. Eiti į Failas > Peržiūra realiuoju laiku ir pasirinkite pasirinktą naršyklę, kad peržiūrėtumėte savo svetainę. Tai puikiai tinka išbandyti CSS ar kitą kodą, kuris nėra suderinamas su kiekviena naršykle.
Dabar jums tereikia kur patalpinti savo svetainę. Statinės svetainės talpinimas naudojant AWS S3 yra puiki vieta pradėti.
HTML ir CSS kodas
<!doctype html>
<html>
<galva>
<meta simbolių rinkinys ="utf-8">
<!-- TemplateBeginEditable name="doktuoti" -->
<titulą>Nepavadintas dokumentas</title>
<!-- TemplateEndEditable -->
<nuoroda href="../page-css.css" rel="stiliaus lapas" tipas ="tekstas/css">
</head>
<kūnas>
<antraštės klasė ="pagrindinė antraštė">
<div klasė ="svetainės logotipas">MakeUseOf pavyzdinė svetainė</div>
<nav class="Pagrindinis meniu">
<a href="../Pagrindinis.html">Namai</a><a href="../Liūtas.html">Liūtas</a><a href="../Tigras.html">Tigras</a><a href="../Jaguar.html">Jaguaras</a><a href="../Namų katė.html">Namų katė</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div klasė ="Pagrindinis turinys" id="liūtas">
<h1>Tai liūtas!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Šis HTML sukuria užbaigtą mūsų projekto svetainę. Galite jį išardyti, kad pamatytumėte, kaip jis veikia, bet raginame susikurti savo svetainės HTML.
@charset "utf-8";
kūnas {
paraštė: 0;
fonas: juodas;
šriftų šeima: Gotham, "Helvetica Neue", Helvetica, Arial, "be serifo";
}
.pagrindinė antraštė {
ekranas: lankstus;
fonas: juodas;
pamušalas: 20px;
}
.svetainės logotipas {
plotis: 30%;
spalva: balta;
šrifto svoris: paryškintas;
teksto transformavimas: didžiosios raidės;
}
.Pagrindinis meniu {
plotis: 70%;
teksto lygiavimas: dešinėn;
}
.Pagrindinis meniua {
pamušalas: 10px;
tekstas-dekoravimas: nėra;
spalva: balta;
}
.Pagrindinis turinys {
aukštis: 100vh;
pamušalas: 20px;
fono dydis: viršelis;
}
.Pagrindinis turinysh1 {
spalva: balta;
šrifto dydis: 10rem;
teksto transformavimas: didžiosios raidės;
}
#liūtas {
fono vaizdas: url("Images/largelion.png");
}
#tigras {
fono vaizdas: url("Images/tiger.png");
}
#jaguar {
fono vaizdas: url("Images/jaguar.png");
}
#naminė katė {
fono vaizdas: url("Images/housecat.png");
}
#allcats {
fono vaizdas: url("Images/loadsofcats.png");
}Šis CSS taip pat yra baigto projekto dalis. Kaip ir mūsų aprašytas HTML, galite žaisti su šiuo kodu, kad sukurtumėte šią svetainę savo.
Kurkite svetaines naudodami „Adobe Dreamweaver“.
„Dreamweaver“ gali atrodyti ne taip paprasta naudoti kaip „WordPress“ ar „Squarespace“ įrankiai, tačiau jis suteikia daug daugiau galios. Šis vadovas yra puikus atspirties taškas, tačiau reikia dar daug sužinoti, todėl verta patiems ištirti Dreamweaver.