Sådan indsættes faner i Dreamweaver

July 21

Mange webdesignere bruger tabs eller faner paneler, som et design element i deres hjemmesider. Tabbed paneler arbejder på samme måde som faner i dialog ansøgning bokse. Når brugeren klikker på en fane, der information, der svarer med fanen etiket vises. Tabbed paneler gør det muligt at inkludere en masse information på en enkelt webside, uden at tvinge brugeren til at rulle gennem lange sider med indhold. I Adobe Dreamweaver, en førende webside layout og webudvikling program, kan du oprette tabbed paneler med programmets indbyggede "Spry Tabbed Panels" valgmulighed.

Vejledning

• Åbn et eksisterende Dreamweaver dokument, hvor du vil indsætte faner paneler, eller starte et nyt dokument: Klik på menuen "Filer" og vælg "Ny" for at åbne "Nyt dokument" dialogboksen. Vælg "HTML" fra kolonnen "Side Type" og den ønskede layout fra "Layout" kolonnen, og klik derefter på "Opret".

• Klik med musen i det område på siden, hvor du vil placere de faner paneler for at indsætte markøren.

• Klik på "Indsæt" menuen, vælg "Spry" og vælg derefter "Spry Tabbed Panels". Hvis dette er et nyt dokument, vil Dreamweaver bede dig om at gemme det. Navngiv og gem filen, som du ville enhver anden computer dokument. Dreamweaver indsætter to faner paneler i siden, "Tab 1" og "Tab 2." Du kan ændre fanen Etiketter ved at markere etiketten tekst og skrive den nye tekst. Du kan tilføje indhold til indholdsrude af panelet med faner ved at markere den aktuelle tekst - "Indhold 1" eller "Indhold 2" - og skrive det nye indhold. Du kan også tilføje billeder og enhver anden medietype til panelet, ligesom du ville på en anden Dreamweaver side.

• Placer Dreamweaver i kode-redigeringstilstand ved at klikke på fanebladet "Split", som er placeret direkte under menulinjen.

• Find koden for de faneblade paneler. Det starter med følgende linje kode: <div id = "TabbedPanels1" class = "TabbedPanels"> Tilføj en ny liste punkt til uordnet liste (<ul>) for at oprette en ny fane. I øjeblikket er den uordnet liste har to elementer og ser således ud: <ul class = "TabbedPanelsTabGroup"> <li class = "TabbedPanelsTab" tabindex = "0"> Fane 1 </ li> <li class = "TabbedPanelsTab" tabindex = " 0 "> Tab 2 </ li> </ ul> For at tilføje en ny liste element, skal du indsætte en ny" li class "indrejse, som dette: <ul class =" TabbedPanelsTabGroup "> <li class =" TabbedPanelsTab "tabindex =" 0 "> Fane 1 </ li> <li class =" TabbedPanelsTab "tabindex =" 0 "> Tab 2 </ li> <li class =" TabbedPanelsTab "tabindex =" 0 "> Tab 3 </ li> </ ul> Indsæt et nyt "li class" post for hver ekstra fane, du ønsker.

• Du kan indsætte yderligere paneler ved at tilføje "TabbedPanelsContent" linjer. For eksempel for at tilføje en tredje panel, skal din kode se sådan ud: <div class = "TabbedPanelsContentGroup"> <div class = "TabbedPanelsContent"> Indhold 1 </ div> <div class = "TabbedPanelsContent"> Indhold 2 </ div> <div class = "TabbedPanelsContent"> Indhold 3 </ div> </ div> Indsæt et nyt "TabbedPanelsContent" linje for hver fane, du oprettede i forrige trin.