Sådan indsættes en Vertical Spry Menu i Dreamweaver CS5

April 30

Sådan indsættes en Vertical Spry Menu i Dreamweaver CS5

Adobe Dreamweaver CS5, en web-design og udvikling program, indeholder flere værktøjer til at hjælpe designere oprette interaktive hjemmesider. Blandt disse værktøjer, Dreamweaver er Spry Framework kan du oprette websider elementer bestående af JavaScript (en populær webside scriptsprog), HTML (det kodesprog for at skabe websider) og CSS (cascading style sheets, et typografiark sprog til formatering websideelementer). Dreamweaver kommer med flere foruddefinerede Spry webside elementer, herunder Spry Menu Bar, som giver dig mulighed for at indsætte lodrette og vandrette flyout menuer på dine websider uden at skulle skrive en masse kode.

Vejledning


• Åbn en eksisterende HTML-side i Dreamweaver, hvor du vil oprette en lodret Spry menu, eller starte en ny: Klik på menuen "Filer" og vælg "Ny". Dette åbner dialogboksen Ny. Vælg den type siden og layout, du ønsker, og klik derefter på "Opret".

• Klik på det område, som den webside, hvor du vil oprette en lodret menu. (Hvis dette er en ny side, vil Dreamweaver bede dig om at gemme siden. Klik på "OK". Dette viser Gem som dialogboks. Navn og gemme siden.) Spry Menu Bar dialog box skærme.

3. Klik på "Radio" ved siden af ​​"Vertical", og klik "OK". Dreamweaver indsætter en lodret menu i din webside.

• Vælg menuen tekst (dvs. "punkt 1," "Konto 2" og så videre), og skriv den nye etiket tekst. Dette giver dig mulighed for at ændre de øverste menupunktet etiketter. Du kan ændre de undermenupunkter fra Dreamweaver s Split dokument visning.

• Klik på knappen "Split" i øverste venstre hjørne, lige under menulinjen. Dette placerer Dreamweaver i en split redigeringstilstand, der giver dig mulighed for at redigere HTML-koden. Undermenupunkter etiketter er placeret i HTML uordnede lister, med formatering, der ser sådan ud: <ul id = "MenuBar1" class = "MenuBarVertical"> <li> <a class="MenuBarItemSubmenu" href="#"> punkt 1 </a> <ul> <li> <a href="#"> Punkt 1.1 </a> </ li> <li> <a href="#"> punkt 1.2 </a> </ li> < li> <a href="#"> punkt 1.3 </a> </ li> </ ul> </ li>

• Vælg etiketten element, du vil ændre (dvs. "Punkt 1.1" eller "punkt 1.2"), og skriv den nye etiket tekst. Undermenupunkter forbundet med, hvad top menupunkter er mærket i overensstemmelse hermed. For eksempel er undermenupunkter for topmenuen Konto 3 mærket "Punkt 3.1", "Punkt 3.2" og så videre.

• Klik på menupunktet, som du ønsker at ændre udseendet for at indsætte markøren.

• Gå til panelet Egenskaber, placeret under dokumentvinduet, og klik på "Rediger regel." Dette åbner CSS regel dialog Definition kassen. Herfra kan du ændre menupunktet skrifttype, baggrund, box form, grænsen og flere andre muligheder.

• Vælg udseende indstilling, du vil ændre, i listen Kategori i venstre side af dialogboksen. For eksempel, hvis du ønsker at ændre baggrundsfarven, skal du klikke på "baggrund" i listen Kategori, og klik på "background-color" farveprøve, og vælg en farve i undermenu.

• Klik på "Anvend" for at anvende ændringen. Følg denne fremgangsmåde for at foretage yderligere udseende ændringer, og klik derefter på "OK", når du er færdig med at foretage ændringer.