- 1). Open an existing Dreamweaver document in which you want to insert tabbed panels, or start a new document: Click the "File" menu and choose "New" to open the "New Document" dialog box. Choose "HTML" from the "Page Type" column and the desired layout from the "Layout" column, and then click "Create."
- 2). Click the mouse in the area of the page where you want to place the tabbed panels to insert the cursor.
- 3). Click the "Insert" menu, choose "Spry" and then select "Spry Tabbed Panels." If this is a new document, Dreamweaver will ask you to save it. Name and save the file as you would any other computer document. Dreamweaver will insert two tabbed panels into the page, "Tab 1" and "Tab 2." You can change the tab labels by selecting the label text and typing the new text. You can add content to the content pane of the tabbed panel by selecting the current text -- "Content 1" or "Content 2" -- and typing the new content. You can also add images and any other media type to the panel just as you would on any other Dreamweaver page.
- 1). Place Dreamweaver in code-editing mode by clicking the "Split" tab, which is located directly below the menu bar.
- 2). Find the code for the tabbed panels. It starts with the following line of code:
<div>
Add a new list item to the unordered list (<ul>) to create a new tab. Currently, the unordered list has two items and looks like this:
<ul>
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
</ul>
To add a new list item, you'll need to insert a new "li class" entry, like this:
<ul>
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
Insert a new "li class" entry for each additional tab you want. - 3). You can insert additional panels by adding "TabbedPanelsContent" lines. For example, to add a third panel, your code should look like this:
<div>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
Insert a new "TabbedPanelsContent" line for each tab you created in the previous step.
- Advertisement -
- Advertisement -