Cum să centrați un aspect de pagină cu margini CSS în Dreamweaver - dummies

Dreamweaver vă permite să centrați aspectul folosind marginile CSS. Multe pagini web sunt centrate pe pagină, astfel încât acestea par să plutească între laturile ferestrei browserului, indiferent cât de largă sau îngustă devine fereastra. Acest lucru ajută la crearea iluziei că desenul umple pagina, chiar dacă fereastra browserului este mult mai lată decât designul paginii.

Cele mai multe modele de pagini web create cu CSS ating acest efect creând o etichetă care înconjoară întregul conținut al paginii și apoi aplicând un stil acelei etichete care include o regulă de stil care centrează acea etichetă. După cum descoperiți în următoarele instrucțiuni pas cu pas, crearea unui stil pentru a centraliza o etichetă nu este la fel de evidentă pe cât vă puteți imagina, dar este ușor de implementat.

Practica obișnuită este să folosiți un stil de identificare pentru eticheta care centrează designul dvs. și să îl numiți #wrapper sau #container.

Dacă pagina dvs. nu este deja configurată cu o etichetă în jurul întregului dvs. conținut, iată un sfat pentru adăugarea acesteia. Primul clic și trageți pentru a selecta toate textele, imaginile și alt conținut de pe pagină. Apoi, selectați Insert → Objects Layout → Tag Div. În caseta de dialog Insert Div Tag, asigurați-vă că este selectată opțiunea Wrap around Selection din lista drop-down Insert.

Lăsați restul câmpurilor goale și faceți clic pe OK pentru a adăuga o etichetă în jurul întregului conținut al paginii dvs. și sunteți pregătit pentru pașii care urmează.

Pentru a centra un întreg design de pagină, asigurați-vă că o etichetă înconjoară tot conținutul paginii și urmați acești pași:

1. Faceți clic pe semnul plus din panoul Selectori de design CSS.

   În funcție de ceea ce se află pe pagină, în panoul Selectori se adaugă un nou nume de stil sau un câmp gol în care puteți introduce un nume de stil.

2. Faceți dublu clic pentru a selecta numele pe care Dreamweaver l-a adăugat panoului și pentru al modifica pe numele dorit pentru stilul nou sau faceți clic pentru a selecta câmpul gol și pentru a introduce un nume.

   Dacă nu se adaugă niciun nume, introduceți numele dorit în câmpul gol. Puteți să numiți stilul pe care îl doriți, dar asigurați-vă că introduceți o perioadă înaintea numelui dacă creați un stil de clasă sau un semn # pentru un stil de identificare.

3. În panoul Proprietăți, specificați lățimea, marginile și orice alte setări de formatare pe care doriți să le definiți.

   Lățimea etichetei pentru container este setată la 980 de pixeli. Iată trucul de centrare a unei etichete: Setați marginea stângă și dreaptă la Auto. În acest fel, un browser adaugă automat o sumă egală cu spațiul de margine pentru fiecare parte a etichetei, centrându-l efectiv pe pagină.

   

4. Selectați ID-ul care înconjoară întregul conținut din pagină.

   Pentru a vă asigura că ați selectat eticheta potrivită, faceți clic pentru a plasa cursorul oriunde în partea principală a paginii și apoi faceți clic pe eticheta listată la extrema din stânga din selectorul de etichete rapide din partea inferioară a spațiului de lucru.

5. Cu eticheta selectată, selectați numele stilului pe care l-ați creat din lista derulantă ID din inspectorul Proprietăți.

   Regulile de stil pe care le-ați definit la crearea stilului sunt aplicate automat etichetei. În acest exemplu, rezultatul este că dimensiunea etichetei este modificată la 980 de pixeli, iar eticheta și întregul conținut sunt centrate pe pagină.

Nu toate funcțiile funcționează atunci când Dreamweaver este setat la vizualizare Live. Deși vizualizarea Live este o modalitate excelentă de a previzualiza modul în care vor arăta modelele de pagini în cele mai moderne browsere web, utilizarea funcției Live view face ca multe dintre instrumentele de editare ale Dreamweaver să fie inutilizabile. Dacă, de exemplu, inspectorul proprietății apare estompat când doriți să îl utilizați, asigurați-vă că butonul Live este deselectat.