Adobe Dreamweaver CS5, un Web design e sviluppo programma, fornisce diversi strumenti per aiutare i designer creare siti Web interattivi. Tra questi strumenti, Framework Spry di Dreamweaver consente di creare gli elementi di pagina Web costituiti da JavaScript (un linguaggio di scripting popolare pagina Web), HTML (il linguaggio di markup per la creazione di pagine Web) e CSS (fogli di stile CSS, una lingua del foglio di stile per la formattazione di elementi della pagina Web). Dreamweaver viene fornito con diversi elementi di pagina di Web Spry predefiniti, tra cui barra di Menu Spry, che consente di inserire menu a comparsa orizzontali e verticali nelle pagine Web senza dover scrivere un sacco di codice.
Istruzioni
Inserimento di un Menu Spry verticale in una pagina Web
1
Aprire una pagina HTML esistente in Dreamweaver in cui si desidera creare un menu verticale Spry o iniziarne uno nuovo: fare clic sul menu "File" e scegliere "Nuovo". Verrà visualizzata la finestra di dialogo nuovo documento. Scegliere il tipo di pagina e layout desiderato e quindi fare clic su "Crea".
2
Clic nell'area della pagina Web di cui si desidera creare un menu verticale. (Se si tratta di una nuova pagina, Dreamweaver vi chiederà di salvare la pagina. Fare clic su "OK". Verrà visualizzata la finestra di dialogo Salva con nome. Un nome e salvare la pagina.) Visualizza la finestra di dialogo barra di Menu Spry.
3
Fare clic sul pulsante "Radio" accanto a "Verticale" e fare clic su "OK". Dreamweaver inserisce un menu verticale nella tua pagina Web.
Cambiare le etichette di Menu
4
Selezionare il testo del menu (cioè, "Item 1", "Item 2" e così via) e digitare il nuovo testo dell'etichetta. Questo consente di modificare le etichette delle voci di menu in alto. È possibile modificare le voci di sottomenu dalla visualizzazione del documento di Dreamweaver per Spalato.
5
Fare clic sul pulsante "Split" nell'angolo superiore sinistro, direttamente sotto la barra dei menu. In questo modo Dreamweaver in una modalità di modifica di Spalato che consente di modificare il codice HTML. Etichette degli elementi sotto-menu si trovano in HTML unordered list, con la formattazione che assomiglia a questo:
< ul id = "MenuBar1" class = "MenuBarVertical" >
< li >< una classe = "MenuBarItemSubmenu" href = "#" > 1 elemento < /a >
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li >
6
Selezionare la voce di etichetta che si desidera al cambiamento (cioè, "Articolo 1.1" o "Articolo 1.2") e digitare il nuovo testo dell'etichetta. Voci di sottomenu associate quali voci di menu in alto sono etichettati di conseguenza. Ad esempio, voci di sotto-menu per il menu in alto 3 elemento sono etichettati come "Elemento 3.1," "articolo 3.2" e così via.
Modifica dell'aspetto del Menu verticale
7
Fare clic su nella voce di menu per il quale si desidera modificare l'aspetto per inserire il cursore.
8
Andare al pannello di proprietà, situato sotto la finestra del documento e fare clic su "Modifica regola." Verrà visualizzata la finestra di dialogo Definizione regola CSS. Da qui è possibile modificare il carattere tipografico elemento di menu, sfondo, forma di scatola, bordo e diverse altre opzioni.
9
Selezionare l'opzione di aspetto che si desidera modificare nell'elenco categoria sul lato sinistro della finestra di dialogo. Ad esempio, se si desidera modificare il colore di sfondo, fare clic su "Sfondo" nell'elenco categoria e quindi fare clic sul campione di "Background-color" e scegliere un colore dal menu a comparsa.
10
Fare clic su "Applica" per applicare la modifica. Seguire questa procedura per apportare modifiche aggiuntive aspetto e quindi fare clic su "OK" dopo aver apportato le modifiche.
Consigli & Avvertenze
- È possibile aggiungere ed eliminare voci di menu modificando il codice HTML unordered list. Se si desidera aggiungere un elemento al sottomenu 3 elemento, ad esempio, è necessario modificare tale elenco. Per impostazione predefinita, l'elenco assomiglia a questo:
- < li >< una classe = "MenuBarItemSubmenu" href = "#" > 3.1 elemento < /a >
- < ul >
- < li >< un href = "#" > punto 3.1.1 < /a >< / li >
- < li >< un href = "#" > elemento 3.1.2 < /a >< / li >
- </UL >
- </li >
- Per aggiungere un altro elemento, è sufficiente inserire un altro elemento dell'elenco, come questo:
- < li >< un href = "#" > punto 3.1.3 < /a >< / li >
- Per rendere il menu sono elencati gli elementi "caldi", o collegarli agli URL, sostituire il segno di cancelletto (#) tra virgolette con l'URL desiderato, come questo: < li >< un href = "http://mydomain.com/mypage.html" > elemento 3.1.2 < /a >< / li >