Come aggiungere elementi fluidi a un layout in Dreamweaver - manichini

Dopo aver creato un layout di griglia fluida in Dreamweaver, il passaggio successivo consiste nell'aggiungere tag o altri elementi per creare le sezioni del disegno. Sono disponibili due opzioni quando si progettano pagine in Dreamweaver CC: utilizzare tag o utilizzare tag HTML5.

Entrambi funzionano allo stesso modo in questi layout fluidi, ma l'uso di tag HTML5, come i tag e, ha qualche vantaggio, perché i tag aggiungono ulteriore significato e struttura alla tua pagina web.

Per aggiungere tag, tag HTML5 e altri elementi a un layout a griglia fluida, segui queste istruzioni:

1. Scegli Inserisci → Struttura → Navigazione.

   In alternativa, è possibile fare clic su Navigazione nel pannello Inserisci struttura.

2. Selezionare la casella di controllo Inserisci come elemento fluido nella finestra di dialogo Inserisci.

   Quando si utilizzano le funzioni di layout della griglia del fluido, è necessario selezionare questa opzione quando si aggiungono tag.

   

3. Nella finestra di dialogo Inserisci, selezionare se si desidera utilizzare il selettore di classe o ID per creare un nuovo stile per il tag che si sta inserendo e quindi immettere un nome per il nuovo stile.

   Anche quando si inseriscono tag HTML5, è necessario creare uno stile di classe o ID corrispondente che possa essere utilizzato per formattare l'elemento in tutti e tre i layout.

   I nomi degli stili di classe devono iniziare con un punto (.) E i nomi di stile ID devono iniziare con il simbolo cancelletto (#).

4. Fare clic su OK.

   Il tag viene aggiunto al layout, formando una nuova finestra nel layout e il nome dello stile corrispondente viene aggiunto tre volte al layout CSS.

5. Seleziona il tag iniziale che è stato incluso nel layout, quindi fai clic sull'icona del cestino piccolo che appare in basso a destra del tag per eliminarlo.

   Sebbene sia possibile mantenere il tag iniziale incluso nei layout della griglia fluida, oppure è possibile rinominare lo stile applicato.

6. Scegli Inserisci → Struttura → Articolo.

   Si apre la finestra di dialogo Inserisci articolo (simile alla finestra di dialogo Inserisci intestazione).

7. Selezionare la casella di controllo Inserisci come elemento fluido nella finestra di dialogo Inserisci.

8. Nella finestra di dialogo Inserisci, selezionare se si desidera utilizzare il selettore di classe o ID per creare un nuovo stile per il tag che si sta inserendo e immettere un nome per il nuovo stile.

9. Fare clic su OK.

   Il tag viene aggiunto al layout, formando una nuova finestra nel layout e il nome dello stile corrispondente viene aggiunto tre volte al layout CSS.

10. Aggiungi tutti gli elementi che desideri per il tuo layout ripetendo i passaggi 6-9.

    È possibile aggiungere elementi HTML5 al layout della griglia fluida facendo clic sulle icone corrispondenti nel pannello Inserisci struttura: una navigazione, un'intestazione, due articoli e un piè di pagina .

    Notare che nel codice, Dreamweaver aggiunge il prefisso fluido- al nome di ogni stile creato per i layout della griglia fluida.