1 / 59

Chapter 5

DREAMWEAVER MX 2004. Chapter 5. Working with Frames. Performance Objectives. Create framesets and frames. Add frames to framesets. Open documents in a frame. Save, delete, and select framesets and frames. Use the Frames panel.

jerry-murphy
Télécharger la présentation

Chapter 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DREAMWEAVER MX 2004 Chapter 5 Working with Frames

  2. Performance Objectives • Create framesets and frames. • Add frames to framesets. • Open documents in a frame. • Save, delete, and select framesets and frames. • Use the Frames panel. • Use the Frameset Property inspector to modify frameset properties.

  3. Performance Objectives…/2 • Use the Frame Property inspector to modify frame properties. • Use links to change frame content. • Create and modify navigation bars. • Create accessible frames with frame titles and noframes content.

  4. Understanding Frames • In appearance, frames are like tables. • Frames are used to create page regions that remain static while other page region content varies. • A single Web page can display content from two or more HTML documents at a time. frames

  5. Understanding Frames…/2 • Frame tags use a source attribute to locate an HTML file and open it in the frame. • A link on a document in one frame can be specified to open a new document in the same frame, another frame, or in a new browser window. links in left frame open documents in right frame

  6. Understanding Framesets • An HTML document that controls frame layout and properties. • Uses frameset tags. • Contains a minimum of two frames. frameset

  7. Designing Frame Layouts • Framesets should contain no more than three frames. • Predesigned framesets do not exceed three frames. • Excessive frames may: • make navigation difficult • squeeze the space available in the browser window • make it difficult to troubleshoot problems

  8. A Popular Frameset Design • Links in the navigation frame open documents in the main frame. heading (banner) frame navigation frame main frame

  9. Enabling Frame Borders • Makes frame borders visible in the Document window. frame borders

  10. Enabling Frame Borders…/2  click View Options button  point to Visual Aids  make sure a check mark appears to the left of Frame Borders

  11. Creating Framesets and Frames • A new frameset is designed with a document open in the Document window.  click Modify  point to Frameset  click one of the submenu commands

  12. Open Document Frame Locations

  13. Adding Frames to a Frameset • Frames can be added to a frameset by splitting existing frames. • Existing frames can be split by using Menu bar commands, or by dragging frame borders.

  14. Splitting Frames Using the Modify Command  click Modify  point to Frameset  click one of the submenu commands

  15. Splitting Frames Using the Insert Command • This creates a single frame in the desired direction, calculated from the insertion point.  click Insert  point to HTML  point to Frames  click an option

  16. Splitting Frames by Dragging direction selection handle new frame border frame border during move process

  17. Opening Documents in a Frame • Position the insertion point in the desired frame.  click File  click Open in Frame

  18. Opening Documents in a Frame…/2 • This opens the Select HTML File dialog box, which can be used to locate and select an HTML file.

  19. Changing Frame Document Background Color  click Modify  click Page Properties  click Appearance  click the Background color color box  select a color from the Color Picker

  20. Saving Framesets and Frames • Framesets and frame documents must be saved before they can be previewed. • Framesets and frames can be selected and saved individually. options available in the File menu when a frame is selected options available in the File menu when a frameset is selected

  21. Deleting Framesets and Frames • Frames can be deleted by dragging them out of the Document window or by dragging them to a frame border. • Closing a frameset without saving deletes the frameset. • To delete a saved frameset, delete the file in the Files panel.

  22. Using the Insert Bar to Create Predefined Framesets  click the Frames button down-pointing arrow on the Insert bar (Layout menu item or tab)  click a predefined frameset command

  23. Using the Insert Menu to Create Predefined Framesets  click Insert  point to HTML  point to Frames  click one of the frameset options

  24. Using the File Menu to Create Predefined Framesets  click File  click New  click Framesets outline appears in Preview section

  25. Selecting Framesets and Frames • Select a frameset or frame to change the properties using the Frameset or Frame Property inspector. • Note that positioning the insertion point inside a frame selects the document in a frame, not the frame itself. • Framesets can be selected in a number of different ways. • Using the Frames panel is probably the easiest method.

  26. Opening the Frames Panel  click Window  click Frames

  27. Using the Frames Panel • The Frames panel shows the structure of the frameset and the frames and nested framesets in contains in outline form. • The name of each frame appears in the center of each frame. frame names

  28. Selecting Framesets click the outside border in the Frames panel OR click one of the frames in the Frames panel and then select the frameset tag in the Tag selector Frameset Property inspector

  29. Selecting Frames click inside a frame in the Frames panel OR hold down the Alt key, and click inside a frame in the Document window Frame Property inspector

  30. Using the Frameset Property Inspector specify whether or not frames will appear with three-dimensional borders specify a border width in pixels

  31. Using the Frameset Property Inspector…/2 click the color box to use the Color Picker Eyedropper to select a color from the palette type a hexadecimal color value OR displays Column or Row depending on whether a column or row is selected in the RowCol Selection area

  32. Using the Frameset Property Inspector…/3 tells the browser how much row height or column width to allocate choose between Pixels, Percent, and Relative

  33. Using the Frame Property Inspector when a link is made to a frame, the target frame is identified by its frame name contains the path to a file that will appear in the selected frame a file path can be placed in the text box by using the Point to File or Browse for File buttons

  34. Using the Frame Property Inspector…/2 specifies whether or not the current frame will display a border frame border color overrides a frameset border color

  35. Using the Frame Property Inspector…/3 specifies whether or not a user can resize a frame in a browser specifies whether or not scroll bars appear in a frame entering a pixel value creates margin space inside the frame

  36. Using Links to Change Frame Content • A link in one frame can be used to change the content of another frame. • Links are created using the Property inspector. • The Target text box drop-down list includes frame names in addition to normal target options.

  37. Creating Navigation Bars • Navigation bars are a slightly more complex version of image rollovers. • They can be created and inserted horizontally or vertically. horizontal navigation bar

  38. Creating Navigation Bars…/2 • Navigation bars are composed of a series of images. • Each navigation bar element is composed of up to four different images. • Each image is used to create an element display state.

  39. Creating Navigation Bars…/3 • There are four navigation bar element states. up (state on loading) over (state when pointer hovers over button) down (state after element is clicked) over while down (state when pointer hovers over clicked element)

  40. Creating Navigation Bars…/4  click the Images button down-pointing arrow  click Navigation Bar OR  click Insert  point to Image Objects  click Navigation Bar

  41. Creating Navigation Bars…/5 • The Insert Navigation Bar dialog box opens. • Select images and desired properties.

  42. Modifying Navigation Bars  click Modify  click Navigation Bar

  43. Creating Accessible Frames with Frame Titles • Frame titles will help listeners identify the location and meaning of the content. • With the Frames check box option selected on the Accessibility Preferences page, a Frame Tag Accessibility Attributes dialog box will appear when creating predefined framesets. enter a frame title for each frame

  44. Creating Accessible Frames with Frame Titles…/2 • When creating a new frameset from scratch, the dialog box does not appear. • Frame titles can be created by switching to Code view and typing title="Frame Title" just before the closing frame angle bracket. frame title

  45. Creating Accessible Frames with Noframes Content • Each frameset page contains a noframes area that can be used to place information describing the content of the frames. • Text entered in noframes view is contained between the two noframes tags. noframes tags

  46. Creating Accessible Frames with Noframes Content…/2  click Modify  point to Frameset  click Edit NoFrames Content

  47. COMMANDS REVIEW How do you create a frameset?  click Modify  point to Frameset

  48. COMMANDS REVIEW…/2 How do you create a predefined frameset?  click Insert  point to HTML  point to Frames OR  click File  click New

  49. COMMANDS REVIEW…/3 How do you create noframes content?  click Modify  point to Frameset  click Edit NoFrames Content

More Related