Sådan laver du en tabbed menu i Dreamweaver CS5

Tabbed menuer, eller faneblade, giver dig mulighed for at oprette flere sektioner på samme webside. Brugeren klikker på mærket faner for at vise sektionerne. I Dreamweaver, en førende webdesign applikation, kan du nemt oprette tabulerede paneler med programmets indbyggede Spry Tabbed Panels-widget. Widgeten skaber fanerne, panelerne og JavaScript, der kræves for at gøre panelerne funktionelle.

1.

Åbn en eksisterende HTML-fil, hvor du vil oprette faneblade eller oprette en ny HTML-side ved at klikke på menuen "Fil" og vælge "Ny". Dette åbner dialogboksen Nyt dokument. Vælg "HTML" fra listen Side Type, vælg det ønskede sidelayout fra Layout-listen, og klik derefter på "Create" -knappen.

2.

Klik på den side, hvor du vil placere de fane paneler for at indsætte markøren.

3.

Klik på menuen "Indsæt", vælg "Spry", og vælg derefter "Spry Tabbed Menu" fra menuen Flyve ud. Hvis dette er et nyt dokument, beder Dreamweaver dig om at gemme filen. Klik på "OK", og navngiv og gem filen. Dreamweaver indsætter faneblade i dokumentet.

Som standard er der to paneler. Du kan tilføje flere paneler ved at klikke på knappen "Tilføj panel", plustegnet, i panelet Egenskaber.

4.

Tilføj yderligere paneler efter ønske.

5.

Vælg den første etikettekst for fanebladet ("Tab 1"), og skriv den ønskede paneletikettekst.

6.

Gentag trin 5 for hver paneletiket.

7.

Vælg panelindholdet tekst ("Indhold 1"), og skriv derefter den ønskede panelindholds tekst. Du kan også indsætte billeder i dine paneler ved at klikke på menuen "Indsæt" og vælge "Billede". Dette åbner dialogboksen Vælg billedkilde. Naviger til billedfilen, vælg den og klik derefter på knappen "OK".

Ting, der er nødvendige

  • Adobe Dreamweaver CS5

Tip

  • Du kan redigere udseendet af dine paneler ved at redigere det kaskende stilark eller CSS, regler. Vælg det faneblad eller panelindhold, du vil reformatere, og klik derefter på knappen "Rediger regel" i panelet Egenskaber. Dette åbner dialogboksen CSS Rule Definition. For at omformatere tekst, skal du f.eks. Klikke på "Type" i kategorilisten. Dette viser muligheder for omformatering af tekst, såsom skrifttypefamilie, skriftstørrelse, skrifttypefarve og skrifttypevægt. Lav de ønskede ændringer og klik på "OK".

Anbefalet