Sette inn en vertikal Spry Meny i Dreamweaver CS5

January 5

Adobe Dreamweaver CS5, en web-design og utvikling-programmet, har flere verktøy for å hjelpe designere lage interaktive nettsteder. Blant disse verktøyene, kan Dreamweaver er Spry Framework deg lage web sideelementer som består av Javascript (en populær nettside skriptspråk), HTML (kodespråket for å lage websider) og CSS (Cascading Style Sheets, et stilark språk for formatering web side elementer). Dreamweaver kommer med flere forhåndsdefinerte Spry websideelementer, inkludert Spry menylinjen, noe som gjør det mulig å sette inn vertikale og horisontale flyout menyer i websidene uten å måtte skrive mye kode.

Bruksanvisning

Sette inn en vertikal Spry Meny i en web side

1 Åpne en eksisterende HTML-side i Dreamweaver hvor du ønsker å opprette en lodd Spry-menyen, eller starte en ny: Klikk på "File" -menyen og velg "New". Dette åpner dialogboksen Nytt dokument. Velg type side og layout du ønsker og klikk "Opprett".

2 Klikk i området på websiden der du vil opprette en vertikal meny. (Hvis dette er en ny side, vil Dreamweaver be deg om å lagre siden. Klikk "OK." Dette viser dialogboksen Lagre som. Navn og lagre siden.) De Spry menylinjen vises dialogboksen.

3 Klikk på "Radio" knappen ved siden av "Vertical" og klikk "OK." Dreamweaver setter inn en vertikal meny inn i din webside.

Endre meny Etiketter

4 Velg menyen tekst (dvs. "Sak 1", "Sak 2" og så videre), og skriv inn den nye etikett-teksten. Dette gjør at du kan endre det øverste menypunktet etiketter. Du kan endre sub-menyelementene fra Dreamweaver er Split dokumentvisning.

5 Klikk på "Split" -knappen i øvre venstre hjørne, rett under menylinjen. Dette setter Dreamweaver i en delt redigeringsmodus som lar deg redigere HTML-koden. Undermenyelement etikettene er plassert i HTML-sorterte lister, med formatering som ser slik ut:

<ul>

& Lt; li> & lt; a href = "#"> Element 1,1 & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "#"> Element 1,2 & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "#"> Element 1,3 & lt; / a> & lt; / li>

& Lt; / ul>

</ Li>

6 Velg merket elementet du vil endre (dvs. "punkt 1.1" eller "punkt 1.2") og skriv inn den nye etikett-teksten. Sub-menyelementer knyttet til hva toppmenyelementer er merket tilsvarende. For eksempel er sub-menyelementer for toppmenyen Sak 3 merket "Element 3.1," "Sak 3.2" og så videre.

Endring av Vertical Meny utseende

7 Klikk på menypunktet som du ønsker å endre utseende for å sette markøren.

8 Gå til Egenskaper-panelet, som ligger under dokumentvinduet, og klikk "Rediger regel." Dette åpner dialogen Definisjon CSS Rule boksen. Herfra kan du endre menyelement skrift, bakgrunn, boks form, border og flere andre alternativer.

9 Velg utseende alternativet du vil endre, i listen Kategori på venstre side av dialogboksen. For eksempel, hvis du ønsker å endre bakgrunnsfargen, klikker du på "Bakgrunn" i Kategori-listen, og deretter klikker du på "background-color" prøven og velger en farge fra fly-out menyen.

10 Klikk på "Apply" for å bruke endringen. Følg denne prosedyren for å foreta ytterligere utseende endringer, og klikk "OK" når du er ferdig med å gjøre endringer.

Hint

Du kan legge til og slette menyelementer ved å redigere HTML-sorterte lister. Hvis du vil legge til et element i punkt 3 undermenyen, for eksempel, ville du redigere denne listen. Som standard listen ser slik ut:
<Li> <a class="MenuBarItemSubmenu" href="#"> Sak 3.1 </a>
<Ul>
<Li> <a href="#"> Sak 3.1.1 </a> </ li>
<Li> <a href="#"> Sak 3.1.2 </a> </ li>
</ Ul>
</ Li>
For å legge til et annet element, bare sette inn en annen liste element, som dette:
<Li> <a href="#"> Sak 3.1.3 </a> </ li>
For å gjøre menylisteelementer "hot", eller knytte dem til webadresser, erstatte nummertegn (#) mellom anførselstegnene med ønsket URL, slik: <li> <a href = "http://mydomain.com /mypage.html">Item 3.1.2 </a> </ li>