Slik lager du en tabbed-meny i Dreamweaver CS5

Tabbed menyer, eller tabbed paneler, lar deg lage flere seksjoner på samme nettside. Brukeren klikker på merkede faner for å vise seksjonene. I Dreamweaver, et ledende webdesignprogram, kan du enkelt lage tabbedpaneler med programmets innebygde Spry Tabbed Panels-widget. Widgeten oppretter flippene, panelene og JavaScript som kreves for at panelene skal fungere.

1.

Åpne en eksisterende HTML-fil der du vil opprette tabbedpaneler, eller opprett en ny HTML-side ved å klikke på "Fil" -menyen og velge "Ny". Dette åpner dialogboksen Nytt dokument. Velg "HTML" fra listen Side Type, velg ønsket sideoppsett fra Layout-listen, og klikk deretter "Create" -knappen.

2.

Klikk på siden der du vil plassere de flippede panelene for å sette inn markøren.

3.

Klikk på "Sett inn" -menyen, velg "Spry", og velg deretter "Spry Tabbed Menu" fra fly-ut-menyen. Hvis dette er et nytt dokument, ber Dreamweaver deg om å lagre filen. Klikk "OK", og så navngi og lagre filen. Dreamweaver setter inn de flippede panelene i dokumentet.

Som standard er det to paneler. Du kan legge til flere paneler ved å klikke på "Legg til panel" -knappen, plustegnet, i Egenskaper-panelet.

4.

Legg til flere paneler etter ønske.

5.

Velg den første etiketten for tabulatorpanelet ("Tab 1") og skriv inn ønsket paneletiketttekst.

6.

Gjenta trinn 5 for hver paneletikett.

7.

Velg panelinnholds tekst ("Innhold 1"), og skriv deretter ønsket panelinnholdstekst. Du kan også sette inn bilder i panelene dine ved å klikke på "Sett inn" -menyen og velge "Bilde". Dette åpner dialogboksen Velg bildeskilde. Naviger til bildefilen, velg den og klikk deretter på "OK" -knappen.

Ting som trengs

  • Adobe Dreamweaver CS5

Tips

  • Du kan redigere utseendet til panelene dine ved å redigere det kaskende stilarket, eller CSS, regler. Velg fanen eller panelinnholdet du vil reformatere, og klikk deretter på "Rediger regel" -knappen i panelet Egenskaper. Dette åpner dialogboksen CSS-regeldefinisjon. For å omformatere tekst, for eksempel, klikk "Type" i kategorilisten. Dette viser alternativer for å omformatere tekst, for eksempel skriftfamilie, skriftstørrelse, skriftfarge og skrifttypevekt. Gjør de ønskede endringene og klikk på "OK".

Anbefalt