Cum se creează Divs în poziția absolută (AP) în Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 folosește containere virtuale controlate de CSS sau casete , create de eticheta DIV pentru a poziționa liber conținutul dintr-o pagină. Eticheta DIV este o etichetă de bază folosită pentru a crea zone pentru conținutul paginii dvs.

Puteți crea etichete DIV din mai multe locuri din Dreamweaver, inclusiv secțiunea Layout a panoului Insert. Fiecare etichetă DIV poate avea un stil de identificare unic atribuit acesteia pentru a-și controla poziția, aspectul și dimensiunea. Procesul de plasare a conținutului necesită adesea doi pași: crearea etichetei DIV și apoi crearea stilului său corespunzător.

Dreamweaver face această sarcină ușoară cu ajutorul instrumentului AP Div, care vă permite să desenați cu ușurință casetele pe pagină și să plasați conținutul în interior.

CSS tratează cele mai multe elemente de container dintr-o pagină ca cutii ; această abordare, denumită modelul CSS Box , permite acestor elemente să împărtășească proprietăți uniforme, cum ar fi umplutura, margini, lățime, înălțime și granițe.

Deși CSS poate considera majoritatea elementelor care conțin elemente dintr-o pagină ca o casetă (cum ar fi o tabelă sau o listă), etichetele DIV sunt cel mai frecvent utilizate pentru a crea casete virtuale pe care le puteți utiliza pentru poziționarea textului, imaginilor și chiar imbricate cutii.

Fiecare cutie poate avea lățimea, înălțimea, poziția proprie (prin proprietățile de sus și stânga), marginea, margini și umplutură; fiecare este setat utilizând proprietățile CSS corespunzătoare.

Pentru a crea diviziuni AP (Absolute-Positioned), urmați acești pași:

1. Creați o pagină nouă sau deschideți o pagină existentă de pe site-ul dvs.

2. În panoul Inserare, selectați categoria Layout.

3. Selectați instrumentul Draw AP Div.

   Cursorul apare ca un fir de păr încrucișat când mutați-l înapoi peste pagină.

4. Faceți clic oriunde pe pagină și trageți pentru a desena un nou AP Div; eliberați butonul mouse-ului.

   

5. Deplasați indicatorul mouse-ului peste marginea casetei până când se schimbă spre o săgeată cu 4 căi; dați clic o singură dată și mânerele apar pe toate laturile.

6. Faceți clic și trageți oricare dintre aceste mânere pentru a redimensiona caseta vertical sau orizontal.

7. Pentru a muta caseta, faceți clic și trageți-o de fila care se află pe marginea superioară stângă și plasați caseta pe care o doriți pe pagină.

   Uitați-vă la inspectorul proprietății și vedeți numele, precum și multe proprietăți DIV enumerate.

8. Dacă panoul CSS Styles nu este deschis, selectați Fereastră → Stiluri CSS pentru ao deschide; sub panoul Toate, faceți clic în partea stângă a foii de stil () pentru ao extinde.

   Vedeți un nou stil de ID # apDiv1 atașat la noul AP Div creat. Pentru fiecare nou DIV creat, Dreamweaver atribuie apDiv cu un număr corespunzător în ordinea creării.

   

9. Faceți clic în interiorul cutiei noi pentru a introduce, lipi sau introduce conținut nou.

Când desenați un AP Div pe pagină, apar două lucruri: Dreamweaver introduce o etichetă pentru a crea caseta și creează un selector de CSS ID care stochează poziția, lățimea, înălțimea și alte proprietăți ale DIV.

După ce creați un Divizor AP, puteți să tastați, lipiți sau inserați conținut direct în el. De asemenea, puteți atribui o regulă de clasă oricărei DIV din inspectorul proprietății - cel mai adesea pentru a manipula formatarea conținutului, lăsând selectorul de identificare pentru a controla poziționarea și dimensiunile.