AP Divs Creazione in Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver utilizza contenitori virtuali posizionati in CSS o , creati con il 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. 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. Lo strumento Divisione AP ti consente di disegnare caselle sulla pagina e inserire il contenuto all'interno.

AP Div è l'abbreviazione di DIV con posizione assoluta; un articolo con una posizione assoluta viene fissato in una posizione specifica sulla pagina. Quando si disegna un div PA, la sua posizione viene comunemente impostata usando le proprietà CSS in alto e a sinistra, con l'angolo in alto a sinistra della pagina come punto di riferimento.

CSS considera ogni elemento di una pagina come una scatola che contiene contenuti; denominato Modello Box CSS. Sebbene i CSS possano considerare una scatola come la maggior parte degli elementi di contenimento in una pagina (come una tabella o un elenco), i tag DIV sono più comunemente utilizzati per creare caselle virtuali che è possibile utilizzare per posizionare testo, immagini e persino altre scatole.

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

1. Nel pannello Inserisci, selezionare la categoria Layout.

2. Seleziona lo strumento Disegna div PA.

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

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

   

   Fare clic e trascinare la pagina con lo strumento Disegna div PA per creare una casella.

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

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

6. 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.

7. 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.

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

Quando si disegna un div PA nella pagina, Dreamweaver inserisce un tag per creare la casella e crea un selettore ID che memorizza la posizione, la larghezza, l'altezza e altre proprietà del DIV. Dopo aver creato un div PA, puoi 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à.

Ogni AP Div che disegna viene elencato automaticamente nel pannello Elementi PA (scegli Finestra → Elementi PA per visualizzarlo.) Il pannello Elementi AP può aiutarti a selezionare, nascondere e mostrare qualsiasi Divisione AP sulla pagina.

Usa il pannello Elementi AP per selezionare, nascondere e riorganizzare gli AP Div nella tua pagina.