Creating and Editing Frames Content

Remember that the content of a frame resides in a separate HTML pagenot in the frameset. You can create the individual frame pages separately or within the constraints of a frame. Using the frameset to help you design the pages to be contained in each frame is always a good idea. That way, you don't create a page that's too wide or too narrow for the frame. Your users will find the pages difficult to view if they have to scroll in multiple directions to see all the content.

In this exercise, you will add content to each page in the frameset.

1.	Place the insertion point in the title frame (the top frame) in the Document window. The document title bar (Macintosh) or the Dreamweaver program title bar (Windows) changes to show that this is an untitled document.
2.	Choose File > Save Frame. Save the file as top.html in the Lesson_10_Frames/Community folder and title it Yoga Sangha: Title. Attach the sangha.css style sheet in the Lesson_10_Frames folder. The document title bar (Macintosh) or the Dreamweaver program title bar (Windows) changes to reflect the title and filename for the document in this frame. Visitors are not likely to see the title of this page because the browser uses the title of the frameset in the browser window. However, it is still good practice to always title your documents so that if the page is opened in a window by itself for any reason, it has a title.
3.	Insert the image ys_header.jpg from the Lesson_10_Frames/Images folder into the title frame and give it an Alt text of Yoga Sangha. Save the frame. As you edit your pages, remember to save often. When you use the Save keyboard shortcut Cmd+S (Macintosh) or Ctrl+S (Windows), you save only the file that corresponds with the currently selected frame or the frameset if it is selected. The Save command does not save each document; you must save them individually or use the File > Save All option. If you want to save the file displayed in another frame, just click inside that frame in the Document window and then click Save. You can refer to the Frames panel to check which frame is selected when you are saving. The names of all frames displayed in the Frames panel are dimmed except for the name of the frame in which the insertion point is located.
4.	Place the insertion point in the content frame (the lower-left frame). Save the file as community_intro.html in the Lesson_10_Frames/Community folder and title it Yoga Sangha Community: Introduction to Green Yoga. Attach the sangha.css style sheet located in the Lesson_10_Frames folder. The document title bar (Macintosh) or the Dreamweaver program title bar (Windows) changes to reflect the title and filename for the document in this frame.
5.	Open Lesson_10_Frames/Community/ys_nav.html, copy the toolbar, and paste it into the content page. The main navigation toolbar will be contained within the content pages, so it will be included in all pages in this frame.
6.	Press Return (Macintosh) or Enter (Windows) to add a new paragraph below the toolbar. Open Lesson_10_Frames/Text/green_page1.txt, copy the text and paste it into the page. Change the text Green Yoga at Yoga Sangha to a paragraph and apply the tagline-style style in the Property inspector. Save the page.

This is the content page that corresponds with the Community link that you will create in the navigation frame later in this lesson.

Your content frame should now look like the example shown here.

Note

You can use an interactive element called a navigation bar in frame-based pages to create a way for visitors to get visual feedback while exploring pages. Although you can create a navigation bar yourself, Dreamweaver provides a tool that you can use to create one. A navigation bar is a set of images that are linked to a variety of pages. Navigation bars use JavaScript (covered in Lesson 8), allowing you to add up to four states based on user interaction for each image. The first state of an image occurs when the page loads; the second state of an image is displayed when the user rolls over the image. When the user clicks the image, the third state is shown. The fourth state of an image is used when the visitor rolls over an image after that image is clicked. The navigation bar is effective for giving visitors responses to their actions so that they understand what pages they are looking at based on the state displayed by the navigation images.