Come creare Divisioni con posizione assoluta (AP) in Adobe Dreamweaver CS6 - dummies

Adobe Dreamweaver CS6 utilizza contenitori virtuali controllati da CSS o , creati dal tag DIV per posizionare liberamente il contenuto su una pagina. Il tag DIV è un tag di base utilizzato per creare aree per il contenuto della pagina.

È possibile creare tag DIV da diverse posizioni in Dreamweaver, inclusa la sezione Layout del pannello Inserisci. Ad ogni tag DIV può essere assegnato uno stile ID univoco per controllarne posizione, aspetto e dimensioni. Il processo di immissione dei contenuti richiede spesso due passaggi: creazione del tag DIV e creazione del relativo stile corrispondente.

Dreamweaver semplifica questa attività con lo strumento Divisione AP, che consente di disegnare caselle liberamente sulla pagina e posizionare il contenuto all'interno.

I CSS trattano la maggior parte degli elementi del contenitore in una pagina come caselle ; questo approccio, denominato modello CSS Box , consente a questi elementi di condividere proprietà uniformi come padding, margini, larghezza, altezza e bordi.

Sebbene i CSS possano considerare la maggior parte degli elementi che contengono in una pagina come una scatola (come una tabella o un elenco), i tag DIV sono più comunemente usati per creare caselle virtuali che è possibile utilizzare per posizionare testo, immagini e persino nidificati scatole.

Ogni casella può avere la propria larghezza, altezza, posizione (tramite le proprietà superiore e sinistra), bordo, margini e riempimento; ognuno viene impostato utilizzando le proprietà CSS appropriate.

Per creare Divisioni AP (posizione assoluta), segui questi passaggi:

1. Crea una nuova pagina o apri una pagina esistente dal tuo sito.

2. Nel pannello Inserisci, selezionare la categoria Layout.

3. Seleziona lo strumento Disegna div PA.

   Il cursore appare come un mirino quando lo si sposta indietro sulla pagina.

4. Fare clic in un punto qualsiasi della pagina e trascinare per disegnare un nuovo div PA; rilascia il pulsante del mouse.

   

5. Sposta il puntatore del mouse sul bordo della scatola finché non diventa una freccia a 4 direzioni; fare clic una volta e le maniglie appaiono su tutti i lati.

6. Fare clic e trascinare uno di questi punti di manipolazione per ridimensionare il riquadro verticalmente o orizzontalmente.

7. Per spostare la casella, fare clic e trascinarla per la linguetta che si trova sul bordo superiore sinistro e posizionare la casella in cui si desidera sulla pagina.

   Dai un'occhiata alla finestra di ispezione Proprietà e vedi il nome e le proprietà DIV elencate.

8. Se il pannello Stili CSS non è aperto, scegli Finestra → Stili CSS per aprirlo; sotto il pannello Tutto, fare clic a sinistra del foglio di stile () per espanderlo.

   Viene visualizzato un nuovo stile # apDiv1 ID collegato al nuovo div PA creato. Per ogni nuovo DIV creato, Dreamweaver assegna apDiv con un numero corrispondente in ordine di creazione.

   

9. Fai clic all'interno della nuova casella per digitare, incollare o inserire nuovi contenuti.

Quando si disegna un div PA nella pagina, si verificano due cose: Dreamweaver inserisce un tag per creare la casella e crea un selettore ID CSS che memorizza la posizione, la larghezza, l'altezza e altre proprietà del DIV.

Dopo aver creato un div PA, è possibile digitare, incollare o inserire il contenuto direttamente al suo interno. È anche possibile assegnare una regola di classe a qualsiasi DIV dalla finestra di ispezione Proprietà, il più delle volte per gestire la formattazione del contenuto, lasciando il selettore ID per controllare il posizionamento e le dimensioni.