Pasi Creare Site1

Pasul 1.
Porniți un site nou

 Accesați meniul Site > New Site (Site > Site nou).
 Primul pas este să dai un nume site-ului tău. Apoi, trebuie să alegeți unde să îl salvați.
 De obicei are sens să păstrezi toate proiectele într-un singur dosar (folder), de dragul simplității.
 Ceea ce este important pentru noi este Local Info (Informațiile locale) din Advanced Setting (Setări
avansate).
 Asigurați-vă că faceți clic pe pictograma dosarului din dreapta, unde scrie Default Images folder.
 Apoi, accesați dosarul site-ului nou creat, deschideți-l, creați un dosar nou numit images și selectați-l
ca dosar implicit. În acest fel, Dreamweaver va salva automat imaginile asociate cu site-ul dvs. în acest
loc.
 Dă clic pe Save pentru a reveni la spațiul de lucru.
Pasul 2. Creați fișierul paginii dvs. de pornire

 După crearea proiectului de site, este necesar să construiți pagina de pornire.
 Dacă Dreamweaver nu vă oferă opțiunea în sine, accesați File > New. Puteți fie să creați un fișier
complet nou, fie să utilizați un șablon existent. Programul vine cu câteva dintre acestea
(consultați Starter Templates).
 În continuare, vom crea un document HTML nou și gol.
 HTML este setat implicit și îl puteți lăsa așa cum este. Alegeți index.html ca nume de fișier și
alegeți Create.
Acesta este ceea ce am menționat la început: o vizualizare Live a modului în care arată site-ul tău (gol,
momentan) și codul din spatele acestuia. Veți observa, de asemenea, că Dreamweaver a creat automat niște
etichete HTML de bază pe care le puteți edita.
Pasul 3. Creați un antet

 Pentru a insera un element în pagină, mai întâi trebuie să-i alegeți locația. Fie dați clic pe pagina goală
(Dreamweaver va alege automat elementul <body>), fie plasați cursorul în același loc în porțiunea de
cod a ecranului.
 După aceea, trebuie să accesați fila Insert din colțul din dreapta sus. Aceasta vă oferă o listă de
elemente HTML comune și de site pe care le puteți adăuga la pagina dvs. Derulați în jos până când
puteți vedea Header ca opțiune.
 Faceți clic pe el și va apărea un meniu pentru a-i oferi o clasă HTML sau un id.
 În cazul în care nu sunteți familiarizat cu clasele și ID-urile CSS, acestea sunt un fel de nume pe care le
puteți da elementelor HTML pentru a le atribui stilul CSS.
 În acest caz, vom folosi clasa numită site-header. După ce îl tastați în câmp, faceți clic pe OK inserează
antetul în pagină. De asemenea, veți vedea că apare în interiorul documentului HTML.
 Ca următor pas, veți schimba textul din interiorul antetului și, de asemenea, îl veți transforma într-un
titlu. Pentru ambele – mai întâi marcați textul în editorul de cod din partea de jos.
 Reveniți la Insert , faceți clic pe săgeata de lângă Heading și alegeți H1 . Acest lucru înglobează titlul
paginii într-o etichetă HTML H1, care este un marcaj important pentru motoarele de căutare.
 Introduceți și un titlu pentru pagina dvs.
Pasul 4. Creați un fișier CSS

În cazul în care nu sunteți familiarizat cu acesta, CSS este partea care oferă toate stilurile pe o pagină Web. Vă
permite să definiți culorile, dimensiunile elementelor, tipurile și dimensiunile fonturilor etc. Vom folosi
marcaje speciale pentru a îmbunătăți titlul paginii noastre și, de asemenea, să învățăm cum să schimbăm CSS
în Dreamweaver.
Teoretic, puteți adăuga CSS chiar în documentul HTML. Cu toate acestea, aceasta este o opțiune mult mai
puțin elegantă decât ceea ce vom face, care este crearea unui fișier dedicat pentru toate stilurile CSS ale
întregului site. Puteți face acest lucru prin Tools > CSS > Attach Style Sheet (Instrumente > CSS > Atașați foaia
de stil).
Faceți clic pe Browse... lângă câmpul File/URL, navigați la directorul site-ului dvs. dacă este necesar și
alegeți style.css ca nume (care este standardul pentru foile de stil). Lăsați restul așa cum este.
Când selectați acum OK, un fișier nou va apărea în partea de sus a vizualizării live. Îl puteți vizualiza și edita de
acolo. Acesta va fi, de asemenea, legat de secțiunea <head> din partea HTML a paginii dvs.
Pasul 5. Creați un selector CSS pentru titlul paginii

Primul lucru pe care doriți să-l faceți este să schimbați fontul titlului și, de asemenea, să îl centrați. Pentru
aceasta, mai întâi trebuie să creați un nou selector CSS. Un selector este numele unui element din pagina dvs.,
căruia îi puteți atribui proprietăți, de exemplu culoare, dimensiune și multe altele. De asemenea,
Dreamweaver v-a cerut o clasă CSS pentru antet mai devreme.
Marcați titlul dvs. H1 în vizualizarea DOM din dreapta jos. Apoi, mai sus, alegeți CSS Designer.
Pentru a crea un selector CSS, faceți clic pe linia unde scrie Selectors și apoi faceți clic pe simbolul plus
+. Acesta ar trebui să propună automat un selector numit .site-header h1. Apăsați enter pentru a-l crea. Gata!
Notă rapidă: pentru toți cei nou în CSS, acest selector înseamnă că vizați elementul numit h1 în
interiorul elementului numit .site-header. În acest fel, orice ați introdus ca CSS se aplică numai textului scris și
nu elementului antet în general.
Pasul 6. Schimbați fontul titlului

 Acum că aveți un selector, îi puteți atribui proprietăți. Dacă știi cum să folosești CSS, poți pur și simplu
să tastați markup style.css și programul îl va folosi automat.
 Pentru utilizatorii mai puțin experimentați, Dreamweaver vă ajută pe parcurs. Rămâneți în meniul CSS
Designer și debifați caseta unde scrie Show Set. Când o faci, va debloca o mulțime de opțiuni
suplimentare.
 Cu noile butoane, puteți alege multe proprietăți CSS din zonele de aspect, text, chenar și
fundal. Butonul More vă oferă opțiuni pentru a introduce propriile reguli.
 Pentru a schimba tipul de font, faceți clic pe opțiunea Text din partea de sus (alternativ, derulați în
jos). În opțiunile viitoare, plasați cursorul peste font-family și faceți clic pe default font (font implicit).
 Acest lucru vă va oferi o serie de opțiuni pentru fonturile comune, inclusiv alternativele acestora (în
cazul în care browserul utilizatorului nu poate afișa fontul principal). Poate doriți să faceți clic
pe Manage Fonts din partea de jos pentru a ajunge la acest meniu:
 Aici, puteți alege fonturi gratuite din Adobe Fonts . Căutați-le după nume sau folosiți numeroasele
opțiuni de filtrare din stânga pentru a restrânge opțiunile până când găsiți ceva.
 Un clic pe oricare dintre fonturi îl marchează pentru includerea în Dreamweaver. După ce ați făcut
acest lucru, puteți să le utilizați direct.
 Pentru moment, apăsați pur și simplu Done și apoi faceți clic din nou pe default fonts. De data aceasta
alegeți fontul personalizat ales și voilá – schimbarea se face, incluzând toată codificarea necesară.
 Dacă faceți clic pe fișierul style.css fișierul dvs. din partea de sus, veți vedea că toate marcajele au fost
adăugate.
Pasul 7. Centrați titlul și modificați dimensiunea acestuia

Textul ar putea arăta încă mai bine. Următoarea sarcină din tutorialul nostru este să-l punem pe Dreamweaver
să-l centreze și să-l puneți cu majuscule. Pentru asta, programul oferă și o altă funcție numită Quick Edit.
Pentru a-l folosi, accesați vizualizarea cod și faceți clic dreapta pe partea pe care doriți să o editați. În acest caz,
este pornit class="site-header"
Aici, alegeți Quick Edit în partea de sus. Aceasta va deschide CSS-ul asociat cu acest element sub acesta. Dacă
încă nu există nimic, veți găsi un buton New Rule pentru a crea unele.
Oricum, puteți introduce proprietăți suplimentare aici fără a fi nevoie să căutați în întregul fișier foaia de stil
(care poate fi foarte lung). Pentru a centra textul și a-l pune cu majuscule, adăugați următorul cod:
text-align: center;
text-transform: uppercase;
Când tastați, Dreamweaver va face și propuneri pentru ceea ce încercați să introduceți, făcându-l și mai
ușor. Aceasta este caracteristica de completare a codului menționată mai devreme.
Când ați terminat, va arăta astfel:
Rețineți că textul s-a schimbat deja în vizualizarea live. Acum, apăsați Esc pentru a părăsi editarea rapidă și a
merge la foaia de stil. Veți descoperi că noul CSS a fost adăugat în locul potrivit.
Apropo, dacă nu sunteți vreodată sigur ce înseamnă o proprietate CSS, pur și simplu faceți clic dreapta pe ea și
alegeți Quick Docs (sau apăsați Ctrl+K). Dreamweaver vă va oferi apoi o explicație.
Pasul 8. Adăugați mai mult conținut
Cu ceea ce ai învățat până acum, poți acum să construiești un site rudimentar. Folosiți doar funcția
de inserare (meniul Insert) pentru a adăuga mai multe elemente, apoi stilați-le cu CSS. Pentru a crea o pagină
exemplu pentru acest tutorial Dreamweaver, am făcut următoarele:
 Setați culoarea de fundal pentru elementul corpului și setați câteva standarde pentru tipografie.
 Înfășurarea unui element container în jurul capătului antetului a adăugat o imagine de fundal cu o
suprapunere
 Bara de navigare inclusă și legături create către alte părți ale site-ului nostru (utilizat un al doilea font
aici)
 Include un titlu și o descriere a paginii
 A fost creat un element .main cu un alt div în interior care conține conținut scris, un titlu și un formular
de contact
 Puneți un subsol în partea de jos cu un alt meniu care conține link-uri către conturi rețele de socializare
și credite pentru drepturi de autor.
 S-a adăugat spațiere în jurul elementelor prin margini CSS și umplutură.
 Culorile incluse și câteva umbre
Cod pentru exemplu:
Deoarece acest lucru este puțin avansat și nu toată lumea va ști cum să facă ceea ce am făcut în acest tutorial
din Dreamweaver, puteți găsi HTML și CSS mai jos, astfel încât să le puteți reconstrui singur. Mai întâi HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script>var
__adobewebfontsappname__="dreamweaver"</script><script
src="http://use.edgefonts.net/alegreya:n4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="header-container">
<header class="site-header">
<h1> Dreamweaver Test Website </h1>
<nav class="main-navigation">
<ul>
<li><a href="#" target="#"> Acasa </a></li>
<li><a href="#" target="#"> Produse </a></li>
<li><a href="#" target="#"> Preturi </a></li>
<li><a href="#" target="#"> Blog </a></li>
<li><a href="#" target="#"> Despre </a></li>
</ul>
</nav>
</header>
<div class="page-title">
<h2 class="entry-title"> Titlu de pagină H2 </h2>
<p class="page-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
ut quam id massa fermentum mattis. Phasellus ultricies eros id dictum placerat.</p>
</div>
</div>
<main class="main">
<div class="page-content">
<div class="entry-content">
<h2>Call to Action</h2>
<p>Donec luctus lorem eget tortor facilisis, id finibus velit lacinia.
Aliquam sagittis odio at enim vulputate, sed varius dui auctor. Nulla dignissim gravida auctor. Proin a
porttitor sem, vel vestibulum lectus. In sollicitudin, risus vel imperdiet consequat, lectus est venenatis
nulla, sit amet viverra orci nibh sagittis lectus.</p>
<div class="cta-form">
<form>
<label for="name">Name</label>
<input type="text" id="name" name="fullname" placeholder="Your
name..">
<label for="email">Email Address</label>
<input type="text" id="email" name="emailaddress"
placeholder="Your email address..">
<input type="submit" value="Submit">
</form>
</div>
<p>Donec luctus lorem eget tortor facilisis, id finibus velit lacinia.
Aliquam sagittis odio at enim vulputate, sed varius dui auctor. Nulla dignissim gravida auctor. Proin a
porttitor sem, vel vestibulum lectus. In sollicitudin, risus vel imperdiet consequat, lectus est venenatis
nulla, sit amet viverra orci nibh sagittis lectus.</p>
</div>
</div>
</main>
<footer class="site-footer">
<nav class="social menu">
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</nav>
<div class="footer-credits">
<p>Copyright © 2022 · My Imaginary Website</p>
<br>
</div>
</footer>
</body>
</html>
Și apoi CSS:
@charset "utf-8";
.header-container {
background-size: cover;
background-position: center center;
color: #FFFFFF;
padding-bottom: 10vw;
background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%),
url(images/background.jpg);
text-align: center;
}
.header-container .site-header {
padding: 20px 0;
margin: 0 auto;
max-width: 1200px;
}
.main-navigation {
font-size: 16px;
font-weight: 400;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
font-family: sans-serif;
}
.main-navigation ul {
margin: 0;
}
.main-navigation ul li {
display: inline-block;
}
.main-navigation ul li a {
padding: 17px 37px;
text-decoration: none;
color: #FFFF92;
}
.main-navigation ul li a:hover {
text-decoration: underline;
}
.header-container .page-title {
padding: 8vw 180px 0 180px;
}
.header-container .page-title h2 {
font-size: 4.5em;
margin-bottom: 0;
}
.page-description {
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 1.5em;
}
.page-content {
background-color: #fff;
margin: -50px auto 0;
max-width: 1000px;
padding-top: 2em;
column-gap: 2em;
-webkit-box-shadow: 0 25px 40px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 25px 40px 0 rgba(0, 0, 0, 0.05);
padding-bottom: 2em;
padding-right: 3em;
padding-left: 3em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.entry-content h2 {
font-size: 3em;
}
.page-content .entry-content h2 {
}
.cta-form form {
max-width: 490px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.cta-form form input {
width: 100%;
padding: 18px 24px 14px;
min-height: 35px;
margin-bottom: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.cta-form form input[type="submit"] {
border: none;
background-color: #A86500;
text-shadow: 0px 0px;
color: #FFFFFF;
}
.cta-form form input[type="submit"]:hover {
background-color: #333333;
}
.site-footer {
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
font-size: 16px;
line-height: 1;
font-family: sans-serif;
}
.social.menu ul {
list-style-type: none;
padding: 0;
}
.social.menu ul li {
}
.social.menu ul li a {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-decoration: none;
color: rgba(168,101,0,1.00);
font-weight: 500;
}
.social.menu ul li a:hover {
color: #333333;
}
.site-header h1 {
font-family: alegreya;
font-style: normal;
font-weight: 400;
text-align: center;
}
@media (max-width:375px){
.header-container .page-title {
padding-left: 0px;
padding-right: 0px;
}
.header-container .page-title h2 {
font-size: 2.5em;
}
}

Pasi Creare Site1

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Pasi Creare Site1

Încărcat de

Drepturi de autor:

Formate disponibile

Pasul 1.

Porniți un site nou

Pasul 2. Creați fișierul paginii dvs. de pornire

Pasul 3. Creați un antet

Pasul 4. Creați un fișier CSS

Pasul 5. Creați un selector CSS pentru titlul paginii

Pasul 6. Schimbați fontul titlului

Pasul 7. Centrați titlul și modificați dimensiunea acestuia

S-ar putea să vă placă și