The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.

If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.

Content for slide 1 goes here.
Content for slide 2 goes here.
Content for slide 3 goes here.
Content for slide 4 goes here.

  1. Download and unzip image_gallery.zip into site.
  2. Create a new page and save it in the image_gallery folder as image_gallery.html.
    CAUTION: Don't just select File > Save; otherwise it will save the file at the top-level instead of inside the image_gallery folder.
  3. Give the page a Title and then delete content of the newly created page from main content area except for the first heading.
  4. Add the following in the exact order and preview after adding each:
    1. Add HMTL -- Copy and paste the HTML tags from the slide_show_html_code.html file.
    2. Add CSS -- Attach slide_show.css to page using the Attach CSS link icon in the CSS Panel.
    3. Add JS Library file -- In Code View, find the <link> tag that was created for the CSS file in Step 2: (i.e., <link href="slide_show.css" rel="stylesheet" type="text/css" />) and place cursor at end of this line and press the Enter key. Then, attach jquery library to page using Insert > HTML > Script Objects > Script and navigate to JavaScript file (jquery-1.4.2.js)
    4. Add Slide Show JS file -- Repeat the previous step but this time press Enter after the <script> line that was just created and navigate to slide_show.js.
      CAUTION: It is important that you add files in this order. For example, because the page is based on a template, Dreamweaver will not normally allow you to add <script> tags. However, if you add the <link> tag for the CSS style first, then you can "sneak in" any *.js files afterward. It is also important that the jquery library file (jquery-1.4.2.js) get added before the slide show JavaScript file (slide_show.js) because the library file has to be "executed" before the JavaScript slide file can use it.
    5. Replace the pictures and text with your own.

This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.