Într-o lume a creatorilor de site-uri web drag-and-drop, Adobe Dreamweaver a făcut bine să rămână relevant în mijlocul concurenței. Dotat cu funcții grozave și o mulțime de instrumente pentru a vă ușura viața, acest software este o alegere excelentă pentru designerii și dezvoltatorii web.
Dar cum îți construiești primul site web folosind Dreamweaver?
Noțiuni introductive cu Dreamweaver
Trebuie să obțineți o copie a Adobe Dreamweaver înainte de a începe să lucrați cu acesta, dar este disponibilă o versiune de încercare gratuită.
Îndreptați-vă spre Chirpici site-ul web, conectați-vă sau înregistrați un cont și descărcați instrumentul Adobe Creative Cloud pentru a începe. De aici, puteți descărca Adobe Dreamweaver și puteți începe cu ghidul complet.
Acest ghid vă va arăta cum să creați un site web de bază folosind fișierele șablon Dreamweaver ca bază. Puteți găsi fișierele complete ale proiectului pe acest depozit GitHub.
Pasul 1: Creați un site Dreamweaver
Deschideți Adobe Dreamweaver și accesați
Site meniul din partea de sus a paginii. Selectați Site nou, apoi alegeți un nume pentru site-ul dvs. și alegeți o locație de fișier pentru acesta.Pasul 2: Creați un fișier șablon
Apoi, este timpul să creați un fișier șablon pentru noul dvs. site web. Fișierele șablon funcționează similar cu temele utilizate de sistemele CMS precum WordPress și Shopify, doar că le creați singur.
Click pe Creaza nou sau mergi la Fişier > Nou și alegeți Șablon HTML de la Tipul documentului listă.
Acest lucru va crea un șablon de bază cu ceva HTML deja existent. Veți folosi acest HTML pentru proiectul dvs., așa că merită să îl păstrați în loc pentru următorii pași.
Pasul 3: Construiți un antet în șablon
Acum este timpul să construiți secțiunea meniu/antet pe site-ul web în șablonul pe care tocmai l-ați creat. Mergi la Introduce în partea de sus a ecranului și selectați Antet din lista.
În acest moment se va deschide un dialog. Adăugați un nume pentru clasa noului antet și faceți clic O.K pentru a adăuga codul la HTML. Ar trebui să plaseze automat noul cod în etichete, dar îl puteți muta dacă este necesar.
După aceasta, ar trebui să adăugați și un element div pentru logo-ul site-ului și un element de navigare pentru meniul site-ului. Du-te la Introduce meniu și selectați Div, apoi întoarceți-vă la Introduce meniu și selectați Nav. Ambele elemente au nevoie de propriul nume de clasă.
Ca ultima etapă a acestui proces, am adăugat câteva opțiuni de meniu elementului nostru de navigare. Pentru a face acest lucru, accesați Introduce și selectați Hyperlink. Am adăugat cinci hyperlinkuri la antetul site-ului nostru: Home, Lion, Tiger, Jaguar și House Cat.
Paginile care vor avea link-uri în antet nu există încă, așa că lăsați href proprietate goală până când le creați.
Pasul 4: Adăugați o foaie de stil pentru CSS
După cum puteți vedea, acest site web nu arată foarte bine așa cum este. Un pic de CSS va rezolva această problemă și puteți adăuga cu ușurință o foaie de stil în Dreamweaver. Du-te la Designer CSS în partea dreaptă a ecranului și faceți clic pe La care se adauga pictograma de lângă Surse. Trebuie doar să alegeți un nume pentru foaia de stil și puteți lăsa restul setărilor așa cum sunt.
Primul lucru de făcut este să transformați antetul într-un flexbox. Flexbox este doar o modalitate de a aranja o pagină web folosind CSS. Pe lângă aceasta, este setat fontul site-ului, este setat un fundal negru și există câteva alte modificări pentru a face site-ul să arate mai bine. Puteți vedea codul CSS complet la sfârșitul articolului.
Pasul 5: Adăugați regiuni editabile la șablon
Regiunile editabile creează secțiuni de HTML care sunt editabile atunci când utilizați șablonul pentru a crea alte pagini. Conținutul paginii noastre principale se încadrează perfect într-o regiune ca aceasta. Mergi la Introduce > Șablon > Regiunea editabilă pentru a adăuga o regiune editabilă la pagina dvs.
Pasul 6: Adăugați conținut imagine/text la șablon
Regiunea editabilă pe care tocmai ați adăugat-o poate fi utilizată fără niciun cod HTML suplimentar, dar puteți adăuga totuși unele pentru editare atunci când creați pagini individuale. Pentru a începe, accesați Introduce și selectați Div pentru a adăuga un nou element div pe site-ul dvs. web.
Acesta va funcționa atât ca container pentru conținutul text de pe pagină, cât și ca loc pentru adăugarea unei imagini de fundal. Acest element are o clasă și un ID, astfel încât paginile diferite au proprietăți CSS diferite. Aceste modele unice de fundal CSS sunt grozave dacă doriți să vă duceți site-ul Dreamweaver la nivelul următor.
Apoi, du-te la Introduce > Titluri > H1 pentru a adăuga un titlu în interiorul elementului div pe care tocmai l-ați adăugat. Ambele elemente au nevoie de ceva CSS pentru a funcționa corect. Div-ul are valori pentru imaginea de fundal, dimensiunea fundalului și înălțimea. Mergi la Fişier > Salvează tot pentru a vă asigura că șablonul dvs. se actualizează.
Puteți adăuga imagini de oriunde în rețeaua locală sau pe internet, dar cel mai bine este să salvați imaginile în propriile fișiere ale site-ului web pentru acces ușor.
Pasul 7: Adăugați pagini cu șablonul
Acum că aveți un șablon la loc, puteți începe să adăugați câteva pagini. Mergi la Fişier > Nou și selectați HTML sub Tipul documentului. Adauga o Titlu pentru fiecare pagină pe care o adăugați înainte de a apăsa Crea.
Noua pagină este albă și nu are încă șablonul nostru. Odată ce noua ta pagină este deschisă în Dreamweaver, accesează Instrumente > Șabloane și faceți clic pe Aplicați șablonul paginii. Alegeți șablonul din listă și faceți clic Selectați pentru a vă încărca șablonul. În cele din urmă, du-te la Fişier > Salvează ca și alegeți un nume pentru noua pagină înainte de a o salva.
Repetați acest proces până când aveți suficiente pagini pentru a vă satisface nevoile. Nu trebuie să rămâneți la un singur șablon pentru aceasta; puteți adăuga altele noi pentru diferite aspecte de pagină.
Pasul 8: Adăugați linkuri de pagină la șablon
Cu paginile adăugate, puteți modifica linkurile de navigare din șablon, astfel încât acestea să trimită către paginile potrivite. Reveniți la șablonul dvs. și găsiți etichetele A pe care le-ați adăugat mai devreme. Ștergeți linkul substituent și faceți clic pe ghilimele pentru a deschide Naviga meniul. De aici, puteți selecta pagina corectă pentru fiecare dintre linkurile dvs.
Pasul 9: Remediați CSS/HTML pe pagini noi
Fiecare dintre pagini va arăta la fel în acest moment. Există câțiva pași de urmat pentru a vă asigura că au propriul conținut; urmați pașii de mai jos pentru a finaliza noul site web.
- Schimbați ID-ul elementului div de conținut pe fiecare pagină pentru a reflecta titlul paginii
- Adăugați cod CSS pentru noul ID de element cu o imagine de fundal diferită
- Schimbați titlul pe fiecare pagină
Pasul 10: Testați site-ul în browser
Vă puteți testa noul site web în browserul dvs. web ales direct din Adobe Dreamweaver. Mergi la Fişier > Previzualizare în timp real și selectați browserul ales pentru a vă vizualiza site-ul web. Acest lucru este excelent pentru a testa CSS sau alt cod care nu este compatibil cu fiecare browser.
Acum aveți nevoie doar de un loc unde să vă găzduiți site-ul. Găzduirea unui site static cu AWS S3 este un loc grozav de început.
Codul HTML și CSS
<!doctype html>
<html>
<cap>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="titlu de doc" -->
<titlu>Document fara titlu</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="foaia de stil" tip="text/css">
</head>
<corp>
<clasa antet="antet principal">
<div class="site-logo">Exemplu de site MakeUseOf</div>
<nav class="meniu principal">
<a href="../Acasă.html">Acasă</A><a href="../Lion.html">Leu</A><a href="../Tiger.html">Tigru</A><a href="../Jaguar.html">Jaguar</A><a href="../Casa Cat.html">Pisică de casă</A>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div class="conținut principal" id="leu">
<h1>Acesta este un leu!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Acest HTML creează site-ul web finit pentru proiectul nostru. Puteți să-l demontați pentru a vedea cum funcționează, dar vă încurajăm să vă creați propriul HTML pentru site-ul dvs. web.
@charset "utf-8";
corp {
marja: 0;
fundal: negru;
familia de fonturi: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.header principal {
display: flex;
fundal: negru;
umplutură: 20px;
}
.site-logo {
latime: 30%;
culoare albă;
greutate font: bold;
text-transform: majuscule;
}
.meniu principal {
latime: 70%;
text-align: dreapta;
}
.meniu principalA {
umplutură: 10px;
text-decor: niciuna;
culoare albă;
}
.conținut principal {
inaltime: 100vh;
umplutură: 20px;
dimensiunea fundalului: coperta;
}
.conținut principalh1 {
culoare albă;
dimensiunea fontului: 10rem;
text-transform: majuscule;
}
#leu {
imagine de fundal: url("Imagini/largelion.png");
}
#tigru {
imagine de fundal: url("Imagini/tigru.png");
}
#jaguar {
imagine de fundal: url("Imagini/jaguar.png");
}
#pisică de casă {
imagine de fundal: url("Imagini/housecat.png");
}
#allcats {
imagine de fundal: url("Imagini/loadsofcats.png");
}Acest CSS face, de asemenea, parte din proiectul finalizat. La fel ca HTML-ul pe care l-am acoperit, puteți juca cu acest cod pentru a face acest site propriu.
Construirea site-urilor web cu Adobe Dreamweaver
Dreamweaver poate să nu pară la fel de ușor de utilizat ca instrumente precum WordPress sau Squarespace, dar vă oferă mult mai multă putere. Acest ghid este un punct de plecare excelent, dar mai sunt multe de învățat și merită să explorați Dreamweaver pentru dvs.
