Come creare una barra di navigazione in Dreamweaver CS5

March 1

Come creare una barra di navigazione in Dreamweaver CS5


Barre di navigazione sono, in effetti, i menu. Tipicamente, esse coprono la parte superiore di una pagina Web orizzontalmente o il lato sinistro della pagina verticale. Dreamweaver, un programma volto Web design, offre molti modi per creare barre di navigazione. Uno dei metodi più semplici e più comuni è quello di utilizzare barra dei menu di Dreamweaver built-in Spry, che crea automaticamente la barra di navigazione per voi. Tutto quello che dovete fare è aggiungere le etichette e modificare l'aspetto della barra di navigazione per soddisfare le vostre esigenze.

istruzione

1 Aprire una pagina di Dreamweaver HTML esistente in cui si desidera aggiungere una barra di navigazione, o iniziare una nuova pagina: Fare clic sul menu "File" e scegliere "Nuovo" per aprire la finestra di dialogo Nuovo documento. Scegliere "HTML" come un tipo di pagina e il layout desiderato dalla colonna Layout, e quindi fare clic su "OK".

2 Fare clic nell'area della pagina in cui si desidera collocare barra di navigazione per inserire il cursore.

3 Fare clic sul menu "Inserisci", scegliere "Spry," e quindi selezionare "Barra dei menu Spry" dal menu a comparsa. Se si tratta di un nuovo documento, viene richiesto di salvare il file. Fai clic su "OK". Verrà visualizzata la finestra di dialogo Salva con nome. Nome e salvare il file. Ciò apre la finestra di dialogo Barra dei menu Spry, che fornisce due opzioni: orizzontale e verticale.

4 Scegliere il tipo di barra di navigazione che si desidera e quindi fare clic su "OK". Dreamweaver inserisce la barra di navigazione nel documento.

5 Vai al pannello Proprietà e selezionare "Articolo 1" nella prima colonna di voci di menu, selezionare il testo nel campo "testo" e digitare l'etichetta per la prima voce di menu.

6 Selezionare il simbolo cancelletto (#) nel campo "Link" e digitare l'URL per la prima voce del menu.

7 Ripetere i punti 4 e 5 per ogni voce di menu. È possibile creare voci di menu facendo clic sul segno più (+) sopra la colonna voce di menu nel pannello Proprietà. È possibile aggiungere voci del sottomenu facendo clic sul segno più (+) sopra il sottomenu, o seconda colonna, nel pannello Proprietà.

8 Fare clic in una casella di voce di menu della pagina per inserire il cursore, e poi andare al pannello Proprietà e fare clic su "Modifica regola." Questo apre la finestra di dialogo Definizione regola CSS. Da qui è possibile modificare l'aspetto del vostro menu. Per modificare l'aspetto delle etichette di menu ', per esempio, fare clic "Tipo" nell'elenco Categoria. Questo visualizza le opzioni per cambiare il tipo di carattere, dimensione del carattere e spessore del carattere. È possibile modificare l'aspetto delle finestre di voce di menu dallo sfondo, le opzioni di sicurezza e di frontiera.

9 Apportare le modifiche desiderate e fare clic su "OK".

10 Fare clic sul menu "File" e selezionare "Salva" per salvare il file.

Consigli e avvertenze

  • È possibile aggiungere un terzo livello, o gli elementi sub-sottomenu con l'aggiunta di etichette alla terza colonna nel pannello Proprietà. Fare clic sulla piccola scatola blu con l'etichetta "Barra dei menu Spry: MenuBar1" sopra la barra di navigazione per selezionare l'intero menu. Fare clic sulla voce di sottomenu nella seconda colonna del pannello delle proprietà in cui si desidera aggiungere una voce di menu di terzo livello, e quindi fare clic sul segno più (+) sopra la terza colonna. Digitare la nuova etichetta di menu nel campo "testo" e l'URL per la nuova voce di menu nel campo "Link".
  • Quando si salva la pagina Web, Dreamweaver crea diversi script di supporto e file grafici e li salva in una cartella denominata Spry Assets. Quando si carica la pagina Web al server Web, assicurarsi che anche caricare la cartella Assets Spry. In caso contrario, la barra di navigazione non sarà visualizzato correttamente.