XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 2 Adding Shared Site Elements In this tutorial, you will: –Insert a navigation bar –Copy a navigation bar to other pages –Modify a navigation bar –Understand frames and framesets –Create a Web page with frames –Adjust frame properties and attributes –Add content to frames –Create hyperlinks with targets –Explore the HTML behind frames, framesets, and targets –Troubleshoot common problems with frames

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 3 Creating a Navigation Bar Object You have already learned several ways to add navigation to your Web site. A navigation bar is a specific item in Dreamweaver that is a series of rollover graphics. Each rollover (or element) of the navigation bar can have up to four states: –Up state (user clicks it) –Over state (user hovers over it) –Down state (after user clicks it) –Over while Down state (user hovers over the down graphic)

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 4 Creating a Navigation Bar Object A Navigation bar can be created by clicking the Navigation Bar button on the Common category of the Insert bar. When a navigation bar is used: –The graphics preload when the Web page is loaded. –A series of elements is defined. –It is placed within a table on the Web page (unless the user requests otherwise). –If a URL is specified, the user jumps to the new page just like with a text link.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 5 Creating a Navigation Bar Object Navigation Bar on Web Page Showing the Down State

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 6 Creating a Navigation Bar Object Navigation Bar on Web Page Showing the Over While Down State

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 7 Creating a Navigation Bar Object Navigation Bar on Web Page Showing Over state

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 8 Inserting a Navigation Bar After you have create your graphics, to create a navigation bar, you will enter: –Nav Bar Elements – a list of elements in the navigation bar. –Element Name – the name of each element in the navigation bar. –Up Image – the graphic that will be used for the Up Image. –Over Image – the graphic that will be used for the optional Over state.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 9 Creating a Navigation Bar Object After you have create your graphics, to create a navigation bar, you will enter (cont): –Down Image – the graphic that will be used for the optional Down state after the image was clicked. –Over While Down Image – the graphic that will be used for the optional Over While Down state which can be used to give the user the cue that the button cannot be clicked again I.e. when you are on that particular page. –Alternate Text – text that appears when a browser cannot display the image.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 10 Creating a Navigation Bar Object After you have created your graphics, to create a navigation bar, you will enter (cont): –When clicked, Go to URL – the URL of the link along with the window you want the new page to open in. –Options : Preload images – downloads images when the page is loaded. Show Down Image – displays the down image instead of the Up image when the page is loaded. –Insert - display a horizontal or vertical bar. –Use Tables – the option to use tables to keep the elements in place.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 11 Creating a Navigation Bar Object To create a navigation bar: –You will want to delete any text links already on the page that you want to replace with a navigation bar. –Click the Navigation Bar button on the Common tab of the Insert bar. –Fill in desired entries in the Navigation Bar dialog box. –Supply graphics for any or all of the four desired element states. –You can add additional elements using the Add Item button and filling in the appropriate items.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 12 Creating a Navigation Bar Object Label page with unformatted Navigation Bar

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 13 Creating a Navigation Bar Object You can align the navigation bar along the left or right edge of the page. You need to add the navigation bar to all the other pages in the Web site. You do not want to add more copies of the navigation bar graphics to the Web site; this will increase the size of the site unnecessarily. Instead, use the graphics you placed in the Graphics folder in the site’s local root folder.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 14 Creating a Navigation Bar Object Label Page with Formatted Navigation Bar

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 15 Copying a Navigation Bar Once created, you can copy a navigation bar to other pages. You must manually set the Down state elements by opening the Modify Navigation Bar dialog box.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 16 Creating a Navigation Bar Object Modify Navigation Bar dialog box

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 17 Modifying the Navigation Bar Dreamweaver also gives you the ability to modify the navigation bar by adding, deleting, or reordering elements. It also allows for changing the graphics or the URLs that you are linking to. You cannot change the orientation of the Navigation Bar without deleting it and adding a new one. To make changes you click Modify on the main menu bar, and then click Navigation Bar.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 18 Modifying the Navigation Bar Modify Navigation Bar dialog box

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 19 Modifying the Navigation Bar Home Page after the Navigation Bar elements have been reordered

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 20 Understanding Frames and Framesets Frames divide a Web page into multiple HTML documents. Frames allow you to keep part of a page static when other part(s) change. Multiple frames on a Web page are held together by a frameset, a separate HTML document that defines the structure of the frameset. When Dreamweaver creates frames, it also inserts a NoFrames page that will display if the browser cannot display a frames page.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 21 Understanding Frames and Framesets Frames can keep the logo and navigation bar portions of a Web page from having to reload every time a user selects a new menu item. Frames are relatively new and not supported in early browsers or may cause the browser to run slower. There are other negative aspects of frames, including losing the ability to bookmark directly to information, etc.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 22 Understanding Frames and Framesets A Sample Web page with Frames

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 23 Creating a Web Page That Uses Frames Initially, each Web page is a single frame. You can create more frames in any page by: –Splitting it into frames, –Dragging the borders of a page, –Inserting frames, –Using predefined framesets. To view and create frames you need to be in Design view with frame borders visible. To make frames visible, click View on the main menu bar, point to Visual Aids and then click Frame Borders.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 24 Creating a Web Page That Uses Frames Home Page with Frame Border Visible

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 25 Creating a Web Page That Uses Frames When you click within a frame, you select it. There are four ways to split a page into multiple frames: –Split Frame Left – splits the frame vertically with the the content and properties in the left frame. –Split Frame Right – splits the frame vertically with the the content and properties in the right frame. –Split Frame Up – splits the frame horizontally with the the content and properties in the top frame. –Split Frame Down – splits the frame horizontally with the the content and properties in the bottom frame.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 26 Creating a Web Page That Uses Frames Home Page with Two Vertical Frames

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 27 Creating a Web Page That Uses Frames Home Page Split into Three Frames

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 28 Creating Frames by Dragging Borders Frames can also be created by dragging the frame border. When you create a new frame, you drag the frame borders inward, away from the edges of the page. If the frame border is dragged back to the borders of the Web page, the frame and any content it contains is deleted.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 29 Creating Frames by Dragging Borders Home Page split into four frames by dragging the top border.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 30 Using a Predefined Frameset Dreamweaver also has several predefined framesets to choose from. These predefined framesets contain some common layouts as well as some that are more complex with nested framesets within a parent frameset. Once inserted, the frameset can be modified and resized by dragging any frame border. To add a frameset, click the Frames tab on the Insert bar and select one of the thirteen buttons.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 31 Using a Predefined Frameset New page with a predefined frameset

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 32 Selecting and Saving Frames You will need to save your frames before working on them. Since each frame is a separate HTML document, you will need to select and save each one individually. To save a frame, click within the frame to select it, then click File on the main menu bar and click Save Frame.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 33 Selecting and Saving the Frameset The frameset page contains all of the information about each of the frames on the page and what content will be loaded into the frame when the page loads. When frames are modified, the frameset is also and must also be saved. Select the frameset by selecting the outer border of the page. It can then be saved in the same manner as the frames were.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 34 Creating a Web Page That Uses Frames Saving the Frameset

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 35 Adjusting Page Properties for Frames Once everything has been saved, you can set the page properties and attributes for each frame. Since each frame is a separate HTML file, you will select and change its properties individually. After selecting the frame you will set the page properties using the Page Properties dialog box.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 36 Adjusting Page Properties for Frames Formatting the top Frame

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 37 Adjusting Page Properties for Frames The Frameset after formatting

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 38 Adjusting Frame and Frameset Attributes Each frame or frameset is adjusted separately so that you can assign a different look to each one if you wish. When you open the frameset page, you can use the Frames panel to select the item you wish to modify. This selects the information within the frameset page pertaining to the selected item.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 39 Adjusting Frame Attributes Once selected you can change the frame attributes: –Frame Name – your descriptive name for the frame –Src (Source) – the pages filename –Borders – toggles frame borders on or off –Scroll – option to display scroll bars in the frame. Choices are Yes, No, Auto and Default –No Resize – stops users from resizing the frame –Border Color – sets border color –Margin Width/Height – space between content and borders

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 40 Adjusting Frame and Frameset Attributes Setting the Top Frame attributes

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 41 Adjusting Frameset Attributes Frameset attributes are adjusted in the same way that frame attributes are. When you nest frames, you also have nested framesets whose attributes can be set. Frameset attributes include borders and border colors and: –Border Width – affects all the borders in the frameset. –Frame Size – can be set in Pixels, as a Percent of the total frame or Relative which takes up all remaining space.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 42 Inserting Frames and NoFrames Content You can add content to frames: –By opening the frameset page, selecting the HTML document in a frame and creating the content using the same techniques that were used to insert content into a Web Page. –By opening the HTML document in its own window and creating content. –By selecting a Web page already created as the Source in the Properties inspector.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 43 Inserting Frames and NoFrames Content A Frameset with Graphic Content Inserted

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 44 Inserting Frames and NoFrames Content A Frameset Page with Text added

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 45 Adding NoFrames Content You will also need to add content to the NoFrames page for users whose browsers do not display frames. The NoFrames page is automatically added by Dreamweaver. You add content to it just as you would to any other frame or Web page. The content should be a simple description of what material cannot be displayed and options for the user to get the information in another way.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 46 Inserting Frames and NoFrames Content NoFrames Content Added

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 47 Using Hyperlinks with Frames With frames, when you click a hyperlink, you may want the linked page to open in another frame instead of replacing the frame where the user clicked. You have several options:

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 48 Using Hyperlinks with Frames A new page added

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 49 Using Hyperlinks with Frames The Target Information for the Top frame

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 50 Using Hyperlinks with Frames The Completed Frameset Shown in a Browser

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 51 Reviewing HTML Associated with Frames and Targets When you use frames, all of the tags associated with them are in the frameset page. There are three types of tags associated with frameset pages –Frameset tags – surround the frameset –Frame tags – surround each frame in a frameset –Noframes tags – after the closing frameset tag and surrounding the content for the NoFrames page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 52 Reviewing HTML Associated with Frames and Targets HTML Frame tags

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 53 Reviewing HTML Associated with Frames and Targets HTML Code for the Frameset Page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 54 Finding Solutions to Common Frame Problems The Macromedia Dreamweaver Support Center contains resource information pertaining to frames. You can also find a list of available Dreamweaver add-on tools that can be downloaded and installed. Two of the more common solutions include stopping a page from loading outside of its frameset (FrameJammer) and Frame Buster which stops your pages from being loaded into another's frameset.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 55 Finding Solutions to Common Frame Problems The Macromedia Dreamweaver support center page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 56 Updating the Web Site on the Remote Server When pages are changed, they should be updated on your remote server. To update: –Connect to the remote server using the Connects to Remote Host button on the Files panel toolbar –Click View list and Local View –Select the updated files and then the Put File(s) button –Disconnect using the Disconnects from Remote Host button –Click View list and Local View

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 57 Tutorial Summary You should now be able to: –Use the Navigation Bar object –Create and modify a Navigation Bar –Create and add content to frames –Set frame properties and attributes –Create targets for your hyperlinks –Find help for common frame problems –Recognize the HTML code behind frames, framesets and targets