Dreamweaver Spry Tutorial

With Dreamweaver's Spry tabbed panel widget, you can condense websites considerably. For example, a 10-page website can be condensed to just one page, making it not only very portable, but less complicated. More than that, however, this widget can eliminate the need to make links and bookmarks. This means that your visitors can find website information quicker and you don't have to worry about broken links.



Start the Dreamweaver program and select the Create HTML option from the start-up screen. Save the file after it opens. Save the file as firstSprite.

Things You'll Need

  • Adobe Dreamweaver, CS3, CS4 or CS5 version
  • PC
Show More

Instructions

  1. Insert the Spry Widget

    • 1
      Add content to each of the tabbed panel's tab and content boxes.

      Position the cursor where you want the tabbed panels to be placed. Select Insert >Spry>tabbed panels from the main menu toolbar.

    • 2
      Test the Tabbed Panel Spry.

      Position the mouse inside the tab label "Tab1." Select the "Tab1" text, delete it with the backspace key and replace it with a more relevant name. Use "Schedule 1" for this example. Position the mouse cursor within the content box associated with "Schedule 1." It is the box that has "Content1" pre-typed in it. Delete "Content1" and type in your own text content. Type or paste as much text content as you would like.

      Position your cursor over the "Tab 2" box until the eye icon appears. Click the eye icon to select the "Tab 2" text and the associated "Tab 2" content box. Replace the "Tab 2" text with the name that you need. Use "Schedule 2" for this example. Position the text cursor with your mouse in the "Content2" box. Replace the "Content2" text with your own text.

    • 3

      Position your mouse cursor over the "Schedule 1" tab. Click the eye icon when it appears within the "Schedule 1" tab. Do the same for the "Schedule 2" tab. Ensure that the content that you typed into the "Content1" tab appears when you select the "Schedule 1" tab. Also ensure that the content that you placed into the "Schedule 2" content box appears when you select the "Schedule 2" tab.

      Select File>Test In Browser>iexplore from the main Dreamweaver window. Select "Yes" when Dreamweaver prompts you to save the file. Select the "Schedule 1" tab in the preview and check to see if the content that you typed into the "Schedule 1" content box appears when the "Schedule 1" tab is selected. Do the same for the "Schedule 2" tab.

Learnify Hub © www.0685.com All Rights Reserved