Cum se aliniază elementele cu flotoare în Dreamweaver

Designerii adesea aliniază o imagine, o etichetă sau un alt element la stânga sau la dreapta unei pagini web în Dreamweaver și apoi înfășoară orice text sau alt conținut în jurul acelui element. Imaginea este aliniată în partea dreaptă a coloanei, astfel încât textul să se înfășoară lângă ea în stânga. În pașii care urmează, veți afla cum să creați stiluri ca acesta.

credit: Imagine de la istockphoto. com

CSS oferă numeroase avantaje atunci când vine vorba de alinierea elementelor de genul acesta, dar modul în care ați configurat aceste stiluri nu este la fel de evident cum v-ați putea aștepta la început pentru că utilizați opțiunea float.

După ce înțelegeți că puteți flotora elemente, cum ar fi imaginile, în partea stângă sau dreaptă a unei pagini, este destul de ușor să creați stiluri care să atingă acest obiectiv. În acest exercițiu, învățați să creați două stiluri care sunt ideale pentru alinierea imaginilor la stânga și la dreapta unei pagini, completată cu o mică marjă doar în cazul în care aveți nevoie de ea.

Aspectul CSS inclus în Dreamweaver CC are deja stiluri de flotare pe care le puteți utiliza pentru a alinia elementele la dreapta și la stânga. Aceste stiluri de clasă sunt numite. fltlft (pentru, ai ghicit, plutește la stânga) și. fltrt (pentru float dreapta).

Pentru a crea două stiluri de clasă pe care le puteți utiliza pentru a alinia imaginile și alte elemente în stânga și la dreapta unei pagini, 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 ao schimba la numele dorit pentru stilul dvs. 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 identitate.

3. Faceți dublu clic pe noul nume și modificați-l după cum doriți.

   Deși puteți numi aceste stiluri oricare doriți preferați, stilurile de aliniere sunt numite în mod obișnuit cu fltrt și fltlft abreviate, care reprezintă float dreapta și plutiți stânga respectiv.

   De exemplu, dacă creați un stil pentru alinierea elementelor din stânga, îl veți numi. fltlft.

4. În panoul Properties (Proprietăți), faceți clic pe pictograma care afișează Float la stânga.

   

5. Utilizați setările margini din panoul Proprietăți pentru a crea o marjă în jurul elementului plutitor.

   Este o practică bună să adăugați spațiu de margine în partea opusă setării flotorului. Dacă creați un stil pentru a pluti o imagine în stânga, adăugați 5 sau 10 pixeli de spațiu în câmpul Margine din dreapta.Când aliniați o imagine în partea stângă a paginii, se va crea o marjă între imagine și orice alt element care se înfășoară lângă imagine.

6. Selectați imaginea sau alt element pe care doriți să-l aliniați în pagină.

7. Selectați numele stilului pe care l-ați creat din meniul derulant Clasă din inspectorul Proprietăți.

   Regulile de stil pe care le-ați definit la crearea stilului sunt aplicate automat. Dacă ați selectat o imagine într-o pagină de text, imaginea se va muta în partea stângă a paginii și textul se va înfășura în jurul acesteia cu o margine între imagine și text.

8. Repetați pașii 1-7, o dată cu flotorul setat la dreapta și cu 5 până la 10 pixeli de margine în câmpul Margine din stânga în categoria Box și din nou cu setarea Float la Stânga și 5 până la 10 pixeli de spațiu marginal în câmpul Marja dreaptă din categoria Cutie.