Come creare un menu a schede in Dreamweaver CS5

I menu a schede o i pannelli a schede consentono di creare più sezioni sulla stessa pagina Web. L'utente fa clic sulle schede etichettate per visualizzare le sezioni. In Dreamweaver, una delle principali applicazioni di progettazione Web, è possibile creare facilmente pannelli a schede con il widget Spry a pannelli integrato del programma. Il widget crea le schede, i pannelli e il codice JavaScript necessari per rendere funzionali i pannelli.

1.

Apri un file HTML esistente in cui desideri creare pannelli a schede o crea una nuova pagina HTML facendo clic sul menu "File" e scegliendo "Nuovo". Questo apre la finestra di dialogo Nuovo documento. Scegli "HTML" dall'elenco Tipo di pagina, seleziona il layout di pagina desiderato dall'elenco Layout, quindi fai clic sul pulsante "Crea".

2.

Fare clic nella pagina in cui si desidera posizionare i pannelli a schede per inserire il cursore.

3.

Fai clic sul menu "Inserisci", seleziona "Spry", quindi seleziona "Menu a schede Spry" dal menu a comparsa. Se si tratta di un nuovo documento, Dreamweaver richiede di salvare il file. Fai clic su "OK", quindi assegna un nome e salva il file. Dreamweaver inserisce i pannelli a schede nel documento.

Di default, ci sono due pannelli. È possibile aggiungere ulteriori pannelli facendo clic sul pulsante "Aggiungi pannello", il segno più, nel pannello Proprietà.

4.

Aggiungi pannelli aggiuntivi come desiderato.

5.

Selezionare il testo dell'etichetta del primo pannello a schede ("Scheda 1") e digitare il testo dell'etichetta del pannello desiderato.

6.

Ripeti il ​​passaggio 5 per ogni etichetta del pannello.

7.

Selezionare il testo del contenuto del pannello ("Contenuto 1"), quindi digitare il testo del contenuto del pannello desiderato. Puoi anche inserire immagini nei tuoi pannelli facendo clic sul menu "Inserisci" e scegliendo "Immagine". Si apre la finestra di dialogo Seleziona origine immagine. Passare al file immagine, selezionarlo e quindi fare clic sul pulsante "OK".

Cose necessarie

  • Adobe Dreamweaver CS5

Mancia

  • È possibile modificare l'aspetto dei pannelli modificando il foglio di stile CSS o le regole CSS. Seleziona il contenuto della scheda o del pannello che desideri riformattare, quindi fai clic sul pulsante "Modifica regola" nel pannello Proprietà. Questo apre la finestra di dialogo Definizione regola CSS. Per riformattare il testo, ad esempio, fare clic su "Tipo" nell'elenco Categoria. Mostra le opzioni per la riformattazione del testo, come la famiglia di font, la dimensione del font, il colore del font e il peso del font. Apporta le modifiche desiderate e fai clic su "OK".

Raccomandato