Come creare DIV relativamente posizionati in Adobe Dreamweaver CS6 - dummies

Il posizionamento preciso e da pixel delle Divisioni AP (Absolute-Positioned) in Adobe Dreamweaver CS6 può essere abbastanza liberatorio per i progettisti, in particolare coloro a cui piace la flessibilità dei layout basati su stampa.

Tuttavia, in determinate occasioni, è possibile che le caselle scorrano in linea con altri contenuti della pagina. Gli AP Div fluttuano al di sopra degli altri elementi, quindi spostare gli altri contenuti della pagina non ha alcun effetto sulla loro posizione, che può essere una buona o una cattiva cosa.

Per un comportamento in linea più tradizionale, è possibile creare DIV che utilizzano posizionamento relativo . Ciò consente di spostare un elemento insieme al contenuto che lo circonda, creando un layout più liquido. Questo tipo di posizionamento è importante per il contenuto annidato o qualsiasi situazione in cui gli elementi devono essere in linea con altri contenuti della pagina.

Per questa attività, utilizzare lo strumento Inserisci tag div, che è possibile trovare nelle categorie Common e Layout del pannello Inserisci.

Attenersi alla seguente procedura per creare un DIV relativamente posizionato:

1. Fare clic all'interno della pagina per posizionare il cursore all'interno di un div PA esistente e quindi fare clic sullo strumento Inserisci tag div sotto Common e Layout del pannello Inserisci categorie.

2. Quando viene visualizzata la finestra di dialogo Inserisci tag div, perfezionare la posizione del nuovo DIV selezionando una posizione dall'elenco a discesa Inserisci.

   Ad esempio, scegli Dopo l'inizio del tag per posizionarlo all'interno di un tag DIV esistente nella tua pagina.

   È inoltre possibile utilizzare l'elenco a discesa Inserisci finestra di dialogo Inserisci tag div per posizionare il DIV prima, dopo o all'interno di elementi esistenti nella pagina. Lasciare l'elenco a discesa Inserisci impostato su Al punto di inserimento per lasciare la casella in cui è stato disegnato o scegliere un'altra posizione in cui si desidera creare il DIV.

   

3. Se si dispone di un selettore di classe esistente che si desidera applicare, selezionarlo dall'elenco a discesa Classe; altrimenti, lascia vuoto.

4. Se un ID esistente non è disponibile, inserire un nuovo nome nel campo ID e fare clic sul pulsante Nuova regola CSS per crearne uno.

5. Quando viene visualizzata la finestra di dialogo Nuova regola CSS, assicurarsi che il nuovo selettore sia impostato su ID e che il nome abbia un cancelletto (#) davanti. Clicca OK.

6. Quando viene visualizzata la finestra di dialogo Definizione regola CSS, fare clic e selezionare Posizionamento dall'elenco Categoria sulla sinistra per visualizzare le proprietà di posizionamento CSS.

7. Nell'area Posizionamento, selezionare Relativo dal menu Posizione, immettere un valore di larghezza e altezza nelle caselle di testo Larghezza e Altezza e immettere un valore Superiore e Sinistro sotto le proprietà Posizionamento.Clicca OK.

8. Fare clic su OK per chiudere la finestra di dialogo Inserisci tag div.

   Viene visualizzato un DIV nuovo, relativamente posizionato con il testo segnaposto.

   

I valori Superiore e Sinistro si comportano in modo leggermente diverso per i DIV assoluti rispetto a quelli posizionati in maniera relativamente corretta. Nel caso del posizionamento relativo, questi valori indicano un offset rispetto al contenuto circostante, al contrario di una posizione impostata all'interno della pagina.