Dreamweaver 8 Notes -Section 6

Using CSS Styles

1. Custom Style - to create a CSS style that can be applied to selected items throughout a document, or several documents.
2. Redefine HTML tags - to change the attributes of an existing HTML tag, such as headings or links. Once the CSS style has been redefined all the affected elements will be changed automatically, they do not have to be selected within the documents.
3. Use CSS Selector - to change the attributes for specific elements within a CSS style. For example if you want to change the colour of a hyperlink when the cursor is placed over it, but no other attribute of it. Then the CSS Selector can be used to edit this particular item.

The code for CSS styles is placed in the head tag of a HTML page or preferably an external .css flie. For the Make Custom Style option, a tag is also placed around the selected text, to show that the CSS style should only be applied to this element.

Back to Top

Frames

• To create a frameset with the current document displayed in one of the frames, use the Insert bar's Frames category.
• To create a frameset with all its frames blank, use the Frameset category in the New Document dialog box.

Controlling frame content with links

To target a frame:

1. In Design view, select text or an object.
2. In the Link field of the Property inspector, do one of the following:
   • Click the folder icon and select the file to link to.
   • Drag the Point to File icon to select the file to link to.
3. In the Target pop-up menu, choose the frame or window in which the linked document should appear.
   • If you named your frames in the Property inspector, the frame names appear in this menu. Select a named frame to open the linked document in that frame.
   • Note: Frame names appear only when you're editing a document within a frameset. When you edit a document in its own Document window, outside of the frameset, frame names do not appear in the Target pop-up menu. If you're editing a document outside of the frameset, you can type the target frame's name into the Target text box.

     _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.

     Tip: If you're linking to a page outside of your site, always use target="_top" or target="_blank" to ensure that the page doesn't appear to be part of your site

Setting frame Property inspector options

To specify properties for the selected frame:

1. Name the frame.

   Frame Name is the name used by a link's target attribute or by a script to refer to the frame.

   Note: A frame name must be a single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start with a letter (as opposed to a numeral). Frame names are case-sensitive. Don't use terms that are reserved words in JavaScript (such as top or navigator) as frame names.

2. Change the following options as desired:

   Src specifies the source document to display in the frame. Click the folder icon to browse to and select a file. You can also open a file in a frame by placing the insertion point in the frame and choosing File - Open in Frame.

   Scroll specifies whether scroll bars appear in the frame. Setting this option to Default doesn't set a value for the corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that scroll bars appear only when there is not enough room in a browser window to display the full contents of the current frame.

   No Resize prevents visitors from dragging the frame borders to resize the frame in a browser. (You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.)

   Borders shows or hides the borders of the current frame when it's viewed in a browser. Choosing a Borders option for a frame overrides the frameset's border settings. The options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset's Borders property is set to No and the frames sharing the border have Borders set to Default.

   Border Color sets a border color for all of the frame's borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset.

   Note: There is an underlying logic to which frame borders have a given border color applied to them, but that logic is complex; it may be difficult to understand why certain borders change color when you specify a border color. For detailed information about the effects of specifying border colors, see a book on frames and framesets.

3. Set the following margin options if you wish (if margin options aren't visible, click the expander arrow in the lower right corner of the Property inspector):

   Margin Width sets the width in pixels of the left and right margins (the space between the frame borders and the content).

   Margin Height sets the height in pixels of the top and bottom margins (the space between the frame borders and the content).

   Note: Setting the margin width and height for a frame is not the same as setting margins in the Modify - Page Properties dialog box.

Viewing and setting frame properties

1. Select a frame by doing one of the following:
   • Alt-click a frame in the Document window's Design view.
   • Click a frame in the Frames panel.
2. Choose Window - Properties to open the Property inspector if it isn't already open.
3. To see all of the frame properties, click the expander arrow in the lower right corner of the Property inspector.

Back to Top