Come allineare elementi con float in Dreamweaver - dummies

I progettisti spesso allineano un'immagine, un tag o un altro elemento a sinistra oa destra di una pagina Web in Dreamweaver e quindi avvolgono qualsiasi testo o altro contenuto attorno a quell'elemento. L'immagine è allineata a destra della colonna in modo che il testo si sposti accanto a essa a sinistra. Nei passaggi che seguono, scopri come creare stili come questo.

credito: immagine da istockphoto. com

CSS offre molti vantaggi quando si tratta di allineare elementi come questo, ma il modo in cui si impostano questi stili non è così ovvio come ci si potrebbe aspettare all'inizio perché si usa l'opzione float.

Dopo aver capito che puoi far fluttuare elementi, come le immagini, a sinistra oa destra di una pagina, è piuttosto facile creare stili che raggiungano questo obiettivo. In questo esercizio, impari a creare due stili che sono l'ideale per allineare le immagini a sinistra e a destra di una pagina, completando con un piccolo margine proprio dove ne hai bisogno.

I layout CSS inclusi in Dreamweaver CC dispongono già di stili float che è possibile utilizzare per allineare gli elementi a destra e a sinistra. Questi stili di classe hanno un nome. fltlft (per, hai indovinato, fluttuare a sinistra) e. fltrt (per float a destra).

Per creare due stili di classe che è possibile utilizzare per allineare le immagini e altri elementi a sinistra e a destra di una pagina, attenersi alla seguente procedura:

1. Fare clic sul segno più nel pannello Selettori CSS Designer.

   A seconda di cosa c'è nella pagina, un nuovo nome di stile o un campo vuoto in cui è possibile inserire un nome di stile viene aggiunto al pannello dei selettori.

2. Fare doppio clic per selezionare il nome che Dreamweaver ha aggiunto al pannello e modificarlo con il nome desiderato per il nuovo stile, oppure fare clic per selezionare il campo vuoto e immettere un nome.

   Se non viene aggiunto alcun nome, inserire il nome desiderato nel campo vuoto. Puoi dare un nome allo stile tutto ciò che desideri, ma assicurati di inserire un punto prima del nome se crei uno stile di classe o un segno # per uno stile ID.

3. Fare doppio clic sul nuovo nome e modificarlo come desiderato.

   Sebbene sia possibile nominare questi stili come preferisci, gli stili di allineamento sono comunemente denominati con fltrt e fltlft abbreviati, che rappresentano rispettivamente float right e float left.

   Ad esempio, se si crea uno stile per allineare gli elementi a sinistra, lo si chiamerebbe. fltlft.

4. Nel pannello Proprietà, fare clic sull'icona che imposta Float a sinistra.

   

5. Usa le impostazioni Margine nel pannello Proprietà per creare un margine intorno all'elemento flottato.

   È una buona pratica aggiungere uno spazio marginale al lato opposto rispetto all'impostazione flottante. Se stai creando uno stile per rendere mobile un'immagine a sinistra, aggiungi 5 o 10 pixel di spazio al campo margine destro.Quando si allinea un'immagine al lato sinistro della pagina, verrà creato un margine tra l'immagine e qualsiasi altro elemento che si avvolge accanto all'immagine.

6. Seleziona l'immagine o l'altro elemento che desideri allineare nella pagina.

7. Selezionare il nome dello stile creato dal menu a discesa Classe nella finestra di ispezione Proprietà.

   Le regole di stile che hai definito quando hai creato lo stile vengono applicate automaticamente. Se avevi selezionato un'immagine in una pagina di testo, l'immagine si spostava sul lato sinistro della pagina e il testo la avvolgeva con un margine tra l'immagine e il testo.

8. Ripeti i passaggi 1-7, una volta con il galleggiante impostato su Destra e da 5 a 10 pixel di margine spazio nel campo margine sinistro nella categoria Casella e nuovamente con il galleggiante impostato su Sinistra e da 5 a 10 pixel di spazio margine. nel campo Margine destro nella categoria Box.