adobe dreamweaver cs5 on demand part 45 pptx

ptg 272 Chapter 11 As mentioned before, frameset documents are simply individual HTML documents, with all the rights and privileges of any other HTML docu- ment. They can have any content; including tables and layers, and they have the same properties of any other HTML document, such as: back- grounds, margins, headings, etc. You can change the properties of a HTML document destined to be displayed within a frameset in one of two ways. The first is to open the document directly in Dreamweaver, make any changes, and then save the document. When it's opened within the frameset, the changes to the properties will be displayed as ordered by you. The second way is to change their properties while viewing the document within the frameset (recommended). Since the procedure is basically the same, we'll examine the changing of page properties while viewing the document in the frameset. Changing Frame Properties Change Page Properties for a Frame Document Open the Web page with the frameset you want to modify. Right-click (Win) or Control-click (Mac) the HTML frame document that you want to modify, and then click Page Properties. Select from the following Page Properties options: ◆ Appearance (CSS) or Appearance (HTML). Select to change the overall appearance of the page; including background, text and margins. ◆ Links (CSS). Select to change linking information; link colors and fonts and underlining. ◆ Headings (CSS). Select to modify the heading font, color and size. ◆ Title/Encoding. Select to modify the title and encoding of the page (this information is used by browsers to help properly display the page). ◆ Tracing Image. Select to add or modify a tracing image. Click OK. 4 3 2 1 1 2 4 3 From the Library of Wow! eBook ptg Chapter 11 Creating Frames 273 Change Frame Properties Open the Web page with the frameset you want to modify. Select the frame you want to modify in the Frames panel or Shift-Alt-click (Win) or Shift- Option-click (Mac) the frame in Design view. ◆ You can also click a frame in the Frames panel. Open the Properties panel. Select from the following Frame Properties options: ◆ Frame Name. Enter the name you want used by a link’s target attribute or by a script to refer to a frame. A frame name must start with a letter and it’s case- sensitive. ◆ Scr. Specifies the source document to display in the frame. ◆ Scroll. Click to select a scroll display option: No (hide), Yes (show), Auto (only when needed), or Default (dictated by browser). ◆ No Resize. Select to prevent visitors from dragging frame borders in a browser. ◆ Borders. Click to select a border display option: No (hide), Yes (show), or Default (dictated by browser). ◆ Border Color. Click to select a color for the frame borders. ◆ Margin Width. Specify the width in pixels of the left and right margins. ◆ Margin Height. Specify the height in pixels of the top and bottom margins. 4 3 2 1 3 1 4 2 Frames panel From the Library of Wow! eBook ptg 274 Chapter 11 Changing Frameset Properties Modify Frameset Border Properties Open the Web page with the frameset you want to modify. Click the View menu, point to Visual Aids, and then click Frame Borders to display visual borders. Open the Properties panel, and then expand it. Click one of the frame borders to select the frameset. Modify the frames using the options in the Properties panel: ◆ Border Window. Click to select the specific frame (row/column) you want to modify. ◆ Borders. Click to select border displays option you want: No (hide border), Yes (show border), or Default (dictated by browser). ◆ Border Width. Enter a value (in pixels) for the width of the borders. ◆ Border Color. Click to select a color for the borders. 5 4 3 2 1 In addition to setting properties for the individual frames and frame documents, you can also set properties for the frameset. After you select the frameset, you can use the Properties panel to view and set frameset properties. The available options allow you to change border and frame sizes. You can show or hide borders, change border width and color, and set the frame sizes for rows and columns of the frame- set. The RowCol Selection area in the Properties panel provides tabs on the left side and top to select a frame. After you select a frame, you can set the frame height and width you want in the Value box and how much space the browser allocates to each frame in the Units list arrow. You can set these options for each frame you select. In the Document window, you can also change the frameset title. 3 1 5 2 4 Frames panel From the Library of Wow! eBook ptg Chapter 11 Creating Frames 275 Modify Frameset Size Properties Open the Web page with the frameset you want to modify. Click the View menu, point to Visual Aids, and then click Frame Borders to display visual borders. Open the Properties panel, and then expand it. Click one of the frame borders to select the frameset. Click a tab on the left side or top of the Row/Col Selection area to select the frame you want to set the Value and Units below. Enter a value to determine the height or width of the frame. Click the Units list arrow, and then select the measurement units for the Row/Column value you want: ◆ Pixels. Sets the size of the column or row to an absolute value. Typically used with a left-side frame. ◆ Percent. Sets the column or row to be a percentage the total width or height of its frameset. ◆ Relative. Allocates the available space after Pixels to the selected column or row. Typically used with a right-side frame. 7 6 5 4 3 2 1 3 1 5 2 4 6 7 Did You Know? You can set the title for a frameset page. Open the page, select the frame- set in Design view, and then type a name for the frameset in the Title box on the Document toolbar. When a visi- tor opens the frameset page in a browser, the title appears in the browser’s title bar. From the Library of Wow! eBook ptg 276 Chapter 11 Thus far, this chapter has dealt with the creation of frameset docu- ments, and the adding and saving of Web data on the individual HTML pages. However, the real power of frames is their ability to load new pages into selected frames, based on an available link. For example, you could be a photographer that wants people to see your images (and hopefully buy them). You create a two-framed Web document that has links to your images on the left. When you click on a link, the frame on the right changes to display a large example of your photographic talent. To use a link in one frame to open a document in another frame, you need to set a target for the link. The target instructs the browser into which frame to place the new document. When a visitor clicks the link, the specified content opens in the specified frame. Targeting Links Create a Targeted Link Open the Web page with the frameset you want to create a targeted link. Select the object or text to be converted into a targeted link. Open the Properties panel. Create the link to the new document using one of the following methods: ◆ Click the folder icon, and then select the link file. ◆ Drag the Point to File icon to the Files panel to select the link file. Click the Target list arrow, and then select the target frame name (at the bottom of the list), or select from the following options. ◆ _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. 5 4 3 2 1 3 6 1 2 54 From the Library of Wow! eBook ptg Chapter 11 Creating Frames 277 ◆ _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. IMPORTANT Frame names appear when you're editing the document within a frameset. When you edit a document in its own window, frame names do not appear in the Target menu. If you're editing a document outside of the frameset, you can type the target frame's name in the Target text box. Click the File menu, point to Preview In Browser, and then select a browser of your choice to test the document. 6 Preview in a browser; click to test link. From the Library of Wow! eBook ptg 278 Chapter 11 This method is great for those Web sites that contain a lot of links to a lot of boring text documents. To make this process work, the name of the HTML document should be the name you want for the link; for example, formatting.html, or frame_help.html. The documents are the standard HTML type: graphics, text… the whole nine yards. You just want to create a simple, almost file folder kind of page, where a visitor clicks on a link, and it loads the appropriate page in another frame. Creating Quick and Easy Frame Links Create Quick and Easy Frame Links Create a frameset document with two frames: one for the links, and one for the documents. Name them links and documents. Open the Files panel and display all the HTML documents that you want to use as links. Drag and drop one of the files from the Files panel into the links frame (it appears as an underlined link). NOTE If the original name of the HTML document is document_1.html, the linked text will be document_1, without the HTML extension. Select the linked text. Click the Target list arrow in the Properties panel, and then select the content frame name as the target for this file. Repeat steps 3-5 until you have all your documents displayed as links. Click the File menu, point to Preview In Browser, and then select a browser of your choice to test the document. NOTE If you don’t like the file name as the link name, you can always select the file name in the links frames and change it. The change in name will not affect the link to the file. 7 6 5 4 3 2 1 5 6 Links frame 1 4 3 2 From the Library of Wow! eBook . has links to your images on the left. When you click on a link, the frame on the right changes to display a large example of your photographic talent. To use a link in one frame to open a document. Properties panel, and then expand it. Click one of the frame borders to select the frameset. Click a tab on the left side or top of the Row/Col Selection area to select the frame you want to. margins. ◆ Links (CSS). Select to change linking information; link colors and fonts and underlining. ◆ Headings (CSS). Select to modify the heading font, color and size. ◆ Title/Encoding. Select to