Cum se creează DIV relativ poziționate în Adobe Dreamweaver CS6 - manechine

Precizia și poziționarea pixelilor în diviziile AP (Absolute-Positioned Divs) în Adobe Dreamweaver CS6 pot fi destul de eliberatoare pentru designeri, cei cărora le place flexibilitatea planurilor bazate pe tipărire.

Cu toate acestea, în anumite ocazii, este posibil ca casetele să circule în linie cu alt conținut de pe pagină. AP Divs plutește deasupra altor elemente, astfel încât schimbarea conținutului altor pagini nu are niciun efect asupra poziției lor, ceea ce poate fi un lucru bun sau rău.

Pentru comportamentul inline mai tradițional, puteți crea DIV-uri care utilizează poziționarea relativă . Acest lucru permite ca un element să fie mutat împreună cu conținutul care îl înconjoară, făcând un aspect mai lichid. Acest tip de poziționare este important pentru conținutul imbricat sau orice situație în care elementele ar trebui să fie în concordanță cu conținutul altor pagini.

Pentru această sarcină, utilizați instrumentul Insert Div Tag, pe care îl puteți găsi în categoriile Common și Layout ale panoului Insert.

Urmați acești pași pentru a crea un DIV relativ poziționat:

1. Faceți clic pe pagina dvs. pentru a poziționa cursorul într-un Divizor AP existent și apoi faceți clic pe instrumentul Inserare etichetă div sub pictograma Inserare obișnuită și aspect categorii.

2. Când apare caseta de dialog Insert Div Tag, ajustați locația noului dvs. DIV selectând o locație din lista derulantă Insert.

   De exemplu, alegeți După începerea etichetei pentru al plasa într-o etichetă DIV existentă în pagină.

   De asemenea, puteți utiliza lista derulantă Insert Div Tag pentru a plasa DIV înainte, după sau în interiorul elementelor existente pe pagină. Lăsați lista verticală Inserare setată la At Point Insertion (Punct de introducere) pentru a părăsi caseta în care ați desenat-o sau alegeți o altă locație unde doriți să creați DIV.

   

3. Dacă aveți un selector de clasă existent pe care doriți să îl aplicați, selectați-l din lista verticală Clasă; în caz contrar, lăsați-l gol.

4. Dacă un ID existent nu este disponibil, introduceți un nou nume în câmpul ID și faceți clic pe butonul New CSS Rule pentru a crea unul.

5. Când apare caseta de dialog New CSS Rule (Regulă CSS), asigurați-vă că noul dvs. selector este setat pe ID și că numele are un semn lire (#) în fața acestuia. Faceți clic pe OK.

6. Când se afișează caseta de dialog Definire a regulii CSS, faceți clic pe și selectați Poziționare din lista de categorii din stânga pentru a vizualiza proprietățile de poziționare CSS.

7. În zona Positioning (Poziționare), selectați Relative (Relativ) din meniul Position (Poziție), introduceți o valoare de lățime și înălțime în casetele de text Width and Height (Lățime și înălțime) și introduceți o valoare de sus și de stânga sub proprietățile de poziționare.Faceți clic pe OK.

8. Faceți clic pe OK pentru a închide caseta de dialog Insert Div Tag.

   Apare un DIV nou, relativ poziționat, cu text de înlocuire.

   

Valorile de sus și de stânga se comportă ușor diferit față de DIV-urile absolute față de cele relativ poziționate. În cazul poziționării relative, aceste valori indică un decalaj față de conținutul înconjurător, spre deosebire de o poziție stabilită în cadrul paginii.