1. CH. 7 Web Page Design –Page Layout with Frames Mr. Ursone

2. Frame Frame: An area that acts as an independent browser window acts independently of other regions in the window. Frames divide a Web page into multiple, scrollable regions, or panes. Each frame contains its own source code. Typical Uses: –Displaying a navigation bar consisting of links in one frame and displaying the corresponding Web pages in another –Placing a number of images in one frame and displaying the descriptions in another –Placing a list of vocab words in one frame and their defs. In another

3. Frames Static frame: A frame that is fixed and does not change its content Static Frames

4. Advantages and Disadvantages of Frames Advantages –Navigation-related graphics do not have to be reloaded for every page in the Web site –Each frame can have its own scroll bar –Static content remains fixed –Content and navigation can be separated from each other

5. Advantages and Disadvantages of Frames Disadvantages –Some browsers will not support frames –Printing pages with frames may be a problem –Pages that are displayed in the main frame are displayed in a smaller window than they would normally be –May be difficult to bookmark or to add to favorites

6. Frameset and Frame Basics Frameset: Defines the layout of the frames when they are displayed on the screen Predefined Frameset Examples

7. Creating the Frameset Predefined Frameset: provides a visual representation of how the framed window will display. –You can modify predefined framesets to your own specifications

8. Creating the Frameset Nested Frameset: A frameset inside another frameset. –Most framesets contain nested framesets –Any set of frames in which different numbers of frames are in different rows or columns creates a nested frameset

9. A Nested and Non-Nested Frameset Nested Not Nested What’s the difference?

10. Frameset Properties The RowCol Selection box is a visual representation of the frameset. On the top and left sides of the box are tabs. Click a tab on the left side to select (highlight) a row, or click a tab on the top to select a column. –When the row is selected you can enter its height. When a column is selected you can enter its width. Tabs Row/Col Value Box & Units Box

11. Frameset Row and Column Size Measurements

12. Frames Frames and Framesets should be given titles You can save the frameset file and each framed document individually, or you can save the frameset file and all documents appearing in the frames at once. You can select each frame individually and change the properties of that individual frame To delete a frame: drag a frame border off the page or to the edge of the frameset When you add an image in the title frame if you place a 0 in the Margin height box this will assure the image will display properly in the browser

13. Understanding Flash Extensions & Inserting a Flash Button An extension, in this context, is the file type in which you are going to save a file. Ex. Anything.doc is a Microsoft Word document. Flash File (.FLA): is created in the flash program. You can then export the.fla file as an.swf or.swt file, which can be viewed in a browser Flash Movie File (.SWF): A compressed version of a.fla file and is optimal for viewing on the web Flash Template File (.SWT): This file type enables you to modify and replace information in a Flash movie file. It is also the extension for the Flash button objects. To insert a flash button into a frame, click Insert on the menu bar, point to media, and then point to Flash Button on the submenu.

14. Target Target: is where a link will open –In Ch. 7 we targeted the mainframe in the frameset for the spot to open our links –There are other options other than the mainframe _blank: opens the linked document in a new browser window, leaving the current window untouched. _parent: opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset _self: opens the link in the current frame, replacing the content in that frame _top: opens the linked document in the current browser window, replacing all frames

15. Miscellaneous Frames are saved with a.htm extension When you click the Units box arrow on the frameset Property inspector, the three options displayed are Pixels, Percent, and Relative Web designers use frames to present information in a more flexible and useful fashion. Frames on a page function independently of one another. To open the frames panel go to the Window menu and click frames or Press Shift + F2