Video: Fluid grid layouts with Dreamweaver CS6 | lynda.com 2024
Adobe Creative Suite 5 (Adobe CS5) Dreamweaver folosește containere virtuale poziționate CSS sau casete , create de eticheta DIV pentru a poziționa liber conținutul pe o pagină. Eticheta DIV este o etichetă de bază folosită pentru a crea zone pentru conținutul paginii dvs. 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. Instrumentul AP Div vă permite să desenați cu ușurință casetele pe pagină și să plasați conținutul în interior.
AP Div este scurt pentru DIV poziționat în mod absolut; un element cu o poziție absolută este fixat la o locație specifică a paginii. Când desenați un AP Div, poziția sa este stabilită de obicei utilizând proprietățile CSS de sus și de stânga, cu colțul din stânga sus al paginii ca punct de referință.
CSS tratează fiecare element dintr-o pagină ca o cutie care deține conținut; denumită modelul CSS Box. Deși CSS poate considera că o casetă este cel mai adesea conținând un element pe o pagină (cum ar fi un 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 alte 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ă folosind reguli CSS.
-
În panoul Inserare, selectați categoria Layout.
-
Selectați instrumentul Draw AP Div.
Cursorul apare ca o cruce atunci când mutați-l înapoi peste pagină.
-
Faceți clic oriunde pe pagină și trageți pentru a desena un nou AP Div; eliberați butonul mouse-ului.
-
Deplasați indicatorul mouse-ului peste marginea casetei până când se schimbă într-o mână; dați clic o singură dată și mânerele apar pe toate laturile.
-
Faceți clic și trageți oricare dintre aceste mânere pentru a redimensiona caseta vertical sau orizontal.
-
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.
-
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.
-
Faceți clic în interiorul cutiei noi pentru a introduce, lipi sau introduce conținut nou.
Când desenați o pagină AP Div pe pagină, Dreamweaver introduce o etichetă pentru a crea caseta și creează un selector de identificare 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, inserați sau să inserați conținut direct în el. De asemenea, puteți atribui o regulă de clasă oricărui DIV de la inspectorul proprietății.
Fiecare AP Div desenat este afișat automat în panoul AP Elemente (alegeți Fereastră → Elemente AP pentru a fi afișat.) Panoul AP Elemente vă poate ajuta să selectați, să ascundeți și să afișați pe pagina paginile AP Diviziuni
Utilizare panoul AP Elemente pentru a selecta, ascunde și rearanja AP Divs în pagina dvs.