Drop Down Menu Tutorial per Dreamweaver

July 13

Menu a tendina, navigare in modo efficace attraverso un sito web perché visualizzano le pagine principali nella barra dei menu e, al passaggio del mouse, producono secondo e / o terzo livello link. Uso di Dreamweaver CS3 e il framework Spry, i menu sono facilmente creati, utilizzando tecniche di point-and-click, senza alcuna conoscenza di programmazione avanzata necessaria. Si può facilmente imparare a creare il proprio menu a discesa e inserirlo al tuo sito web.

Inserire la barra dei menu

Drop Down Menu Tutorial per Dreamweaver


Iniziare la barra dei menu con la semplice aggiunta la funzione "Spry barra dei menu" per una pagina aperta in Dreamweaver. Per fare questo, individuare l'area nella pagina in cui si desidera che la barra di navigazione per andare, che normalmente si trova nella parte superiore, e posizionare il cursore nella zona desiderata. Utilizzando la finestra "Inserisci", fare clic sulla scheda "Spry" e cliccare l'icona Menu Bar Spry. Una finestra di dialogo viene in su e consente di scegliere un layout orizzontale o verticale. Effettuare la selezione e fare clic sul pulsante "OK" quando fatto. Nella finestra di progettazione, si vedrà la barra dei menu Spry con quattro schede ready-made. La barra di navigazione è ora pronto per essere modificato.

Collegare la barra dei menu

Drop Down Menu Tutorial per Dreamweaver


Controllare il numero di voci di menu e livelli di collegamenti a discesa per soddisfare le vostre esigenze. Fare clic sul blu "barra dei menu Spry: MenuBar1" intestazione direttamente sopra la barra di navigazione nella vista di disegno per aprire la finestra di dialogo (che sostituisce la finestra delle proprietà aperta).

Ora, vai alla prima colonna e aggiungere o rimuovere eventuali voci di menu che si desidera utilizzare il "+" più o "-" pulsanti segno meno. Modificare la prima voce di menu evidenziandolo, e poi andare alla seconda colonna e aggiungere o rimuovere tutti gli elementi di secondo livello che si preferisce. Se avete bisogno di collegamenti di terzo livello, di nuovo selezionare la voce appropriata e aggiungere o sottrarre, utilizzando l'ultima colonna.

Infine, per modificare le voci di menu e di collegarsi, evidenziare il nome della voce nella colonna di sinistra e inserire le informazioni necessario collegamento nelle caselle di testo a destra. Continuare collega i restanti link e collegamenti di livello inferiore, se desiderato, per il resto della barra di navigazione.

Formattare la barra dei menu

Drop Down Menu Tutorial per Dreamweaver


Dreamweaver offre comodamente un modello già pronto Cascading Style Sheet (CSS) per il menu Spry. È possibile scegliere di lasciare la formattazione così com'è, o personalizzare aspetto della barra di navigazione utilizzando le finestra "Proprietà" e / o "Stili CSS finestra".

Per iniziare, la finestra "Proprietà" fornisce automaticamente varie opzioni di formattazione, a seconda di dove il cursore viene posizionato nella barra di navigazione. Ad esempio, è possibile digitare o selezionare una dimensione di carattere, come ad esempio 12 pixel, e un colore del carattere come "Arial, Helvetica o sans-serif" selezionando semplicemente queste opzioni nelle aree corrispondenti.

Inoltre, è possibile utilizzare la "Stili CSS Window" per apportare ulteriori modifiche di formattazione per la voce di menu selezionata o l'intero foglio menù del bar di stile. Nella scheda "Stili CSS", selezionare l'opzione "Current" per vedere gli stili modificabili nella finestra e modificarli se necessario. In caso contrario, fare clic sulla scheda "Tutte" per visualizzare l'intero file "SpryMenuBarHorizontal.css" che controlla il layout e l'aspetto della barra di navigazione. Continuare a formattare ogni voce di menu, se lo desideri. Per esempio, controllare lo sfondo e il carattere modificando il "ul.MenuBarHorizontal una" regola di stile e cambiare l'elemento "UL.Menubarhorizontal" per personalizzare la dimensione del carattere.

Infine, dopo tutti i link ei formati desiderati sono completi, salvare il file e visualizzare il lavoro in un browser Web utilizzando la funzione "Anteprima" del browser per assicurarsi che le modifiche vengono visualizzati correttamente.