June 15
Dreamweaver CS5 semplifica il compito di trasformare oggetto un'unica pagina web in un altro. Si possono trovare questa capacità utile quando si cerca un modo creativo per visualizzare i menu drop. Un menu a discesa, noto anche come una casella a discesa, contiene voci selezionabili che i visitatori del sito possono scegliere. menu di goccia di solito appaiono sullo schermo quando si apre una pagina. Tuttavia, utilizzando un semplice trucco Dreamweaver CS5 JavaScript è possibile creare un menu da un'immagine.
1 Incollare il codice riportato di seguito tag del documento "<body>":
<Div id = "div1">
<Select id = nome "menu1" = "MENU1">
<Option> item1 </ option>
<Option> item2 </ option>
</ Select>
<Img id = "immagine1" src = "mia_immagine" />
</ Div>
Questo codice crea un elemento contenitore div il cui id è "div1". Questo div tiene un tag select e un tag img. Questi tag creano un'immagine e un menu a discesa. il valore id dell'immagine è "Image1". il valore id del menu è "MENU1." Sostituire "mia_immagine" con l'URL di un'immagine sul Web o il nome di un'immagine sul computer. Spostare l'opzione attributi nel tag di selezione e sostituire "item1" e "item2" con gli elementi che si desidera visualizzare nella menu.
2 Fai clic su "Design" per passare alla visualizzazione progettazione. L'immagine e menu compaiono sul documento. Fai clic sul menu a discesa per selezionarlo e premere il tasto "SHIFT" e "F4" per aprire la finestra Comportamenti.
3 Fare clic sul segno "più" nella parte superiore di questa finestra, quindi fare clic su "Chiama JavaScript." Digitare il seguente testo nella casella di testo "JavaScript" che appare:
ShowImage ( 'Image1')
Questa dichiarazione dice a Dreamweaver di chiamare un JavaScript denominato "ShowImage" e passare il valore id della tua immagine a quella funzione. Fare clic su "OK" e Dreamweaver aggiunge un comportamento onchange per il menu.
4 Tornare al documento e fare clic sull'immagine. Fare clic sul segno "più" di nuovo nella parte superiore della finestra di comportamenti, quindi fare clic su "Mostra-nascondi Elements" per visualizzare un elenco di elementi sul documento. Fare clic sull'elemento "Image1" che appare nella lista e fare clic su "Hide". Fare clic su "OK" e Dreamweaver aggiunge un comportamento onclick all'immagine che nasconde l'immagine quando si fa clic su di esso.
5 Fare clic sul pulsante "codice" per visualizzare il codice HTML del documento. Incollare il seguente codice prima del tag finale "</ script>" che appare nel codice:
Funzione ShowImage (ImageID)
{
immagine var = document.getElementById (ImageID);
image.style.visibility = "visible";
}
Questo codice rende l'immagine riapparire dopo aver selezionato una voce nel menu. Fai clic su "Design" per tornare alla visualizzazione progettazione.
6 Fai clic destro sull'immagine e fare clic su "Stili CSS". Fai clic su "Nuovo" e digitare "overlayStyles" nella casella di testo "Selettore Nome". Fai clic su "OK", quindi su "posizionamento".
7 Fai clic sul menu a discesa "Posizionamento" e selezionare l'opzione "assoluto" che appare nel menu. Digitare uno nella casella di testo "Top" che appare nella sezione "Placement" della finestra. Digitare uno nella casella "sinistra" che appare nella stessa sezione. In questo modo si rende l'immagine e la caduta di sovrapposizione del menu della pagina Web.
8 Fare clic con il drop-menù situato nella pagina e cliccare su "Stili CSS". Selezionare l'opzione "overlayStyles" che appare nel menu che appare. Ciò si applica lo stile creato per il menu.
9 Premere F12 per visualizzare in anteprima la pagina Web nel browser. La pagina visualizza l'immagine. Fare clic sull'immagine. L'immagine scompare e viene visualizzato il menu a discesa. Clicca una delle voci del menu. Il menu scompare e l'immagine ritorna.