Demo 7: Using Jump Menus for Navigation in a Simple Frameset

  1. Create a new Dreamweaver file. Save it as home.html, within a folder called demo7.
  2. Type in the words "You're at the Home Page!", using a Heading 1 tag. Save home.html.

  3. Save home.html as page1.html. Replace the words "You're at the Home Page!" with "You're at Page 1!" Save page1.html again.

  4. Now replace the words "You're at Page 1!" with "You're at Page 2!", and save the file as page2.html.

  5. Now replace the words "You're at Page 2!" with "You're at Page 3!", and save the file as page3.html.

  6. Now replace the words "You're at Page 3!" with "You're at Page 4!", and save the file as page4.html.

  7. Now close all of those files out. Go to File>New>Basic HTML page.

  8. Go to your Frames menu within the Insert menu and choose the frameset on the far left. You now have a Frameset rather than just a regular HTML page. Essentially, you have a "collection" of 2 HTML pages within this one page. Click on the bar in the middle of the page. Notice in the Properties pallette you can change the border width, border color, and column size of your frameset. This is the way to select the Frameset, and ensure you are dealing with the Frameset HTML page, by the way. Go to File>Save Frameset As... and save it as index.html within your demo7 folder.

  9. Now click in the right area of the page. Choose "File>Open in frame" and open home.html.

  10. Now click in the left area of your frameset. We're going to create a navigational "jump" menu HTML page here. Go to File>Save frame as... and name it "menu.html".

  11. With your cursor flashing at the top of menu.html, go to Insert>Form Objects>Jump Menu.

  12. Next to Text: type in Select a Page. At the bottom, select Open URLs In: mainFrame and under Options: check Select First Item after URL Change (You can disregard the Menu Name and checkbox. Inserting the "Go" button is optional on your part).
  13. Press on the + sign, type in Page 1 for the Text: text box. For the When Selected, Go to URL: text box, browse and find, or type in page1.html.

  14. Press the + again, and this time type in Page 2 for the Text: text box. For the When Selected, Go to URL: text box, browse and find, or type in page2.html.
  15. Press the + again, and this time type in Page 3 for the Text: text box. For the When Selected, Go to URL: text box, browse and find, or type in page3.html.

  16. Press the + again, and this time type in Page 4 for the Text: text box. For the When Selected, Go to URL: text box, browse and find, or type in page4.html.

  17. Finally ress the + again, and this time type in Back to Home for the Text: text box. For the When Selected, Go to URL: text box, browse and find, or type in home.html.

  18. Click on the middle bar of your frameset (so you know you're dealing with the frameset), and Save Frameset As... index.html

  19. Test the frameset in the browser. It should work properly, navigating to pages 1, 2, 3, and 4!
  20. Add a link to Demo 7 from your GDT 150 index.html page.


    21. EXTRA: To edit your jump menu, go to Behaviors, and double-click on the onChange event.