Dreamweaver MX

1
Tutorial 5 Shared Site Formatting Using the
Navigation Bar and Frames
2
Shared Site Formatting Using the Navigation Bar
and Frames

• In this tutorial, you will
• Insert a navigation bar using the Navigation Bar
• Modify a navigation bar
• Create a Web page with frames
• Adjust frame properties and attributes
• Add content to frames
• Create hyperlinks with targets
• Troubleshoot common frames problems
• Explore the HTML behind frames, framesets, and
  targets

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)

4
Creating a Navigation Bar Object

• A Navigation bar can be created by clicking the
  Navigation Bar button on the Common tab of the
  Insert menu.
• 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.

5
Creating a Navigation Bar Object
Navigation Bar on Web Page with current page name
in down state
6
Creating a Navigation Bar Object
Navigation Bar on Web Page indicating current
page
7
Creating a Navigation Bar Object
Navigation Bar on Web Page showing Over state
8
Creating a Navigation Bar Object

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

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.

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.

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.

12
Creating a Navigation Bar Object
Insert Navigation Bar dialog box
13
Creating a Navigation Bar Object
The Insert Navigation Bar dialog box for label
element
14
Creating a Navigation Bar Object
Label page with unformatted Navigation Bar
15
Creating a Navigation Bar Object

• You can align the bar left or right and
  Dreamweaver will create an anchor icon which
  shows the anchor point marking the location of
  the alignment code.
• Sometimes when you reopen a page a stray closing
  anchor tag appears.
• This stray tag can be removed by selecting it and
  then pressing the Delete key.

16
Creating a Navigation Bar Object
Label page with formatted Navigation Bar
17
Creating a Navigation Bar Object
Stray anchor tag in the Navigation Bar
18
Creating a Navigation Bar Object

• Once created, you can copy a navigation bar to
  other pages.
• When you copy the bar, you will get a Dreamweaver
  warning telling you that the Set Nav Bar Image
  cannot be copied.
• You must manually set the Down state elements by
  opening the Modify Navigation Bar dialog box.
• You will also have a stray closing tag to remove.

19
Creating a Navigation Bar Object
Modify Navigation Bar dialog box
20
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 Navigation Bar.

21
Modifying the Navigation Bar
Modify Navigation Bar dialog box options
22
Modifying the Navigation Bar
Home Page after the Navigation Bar elements have
been reordered
23
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.

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

25
Understanding Frames and Framesets
A Sample Web page with Frames
26
Creating a Web Page That Uses Frames

• Each Web page is a single frame. You can make
  more frames on the 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, Visual Aids and then Frame Borders.

27
Creating a Web Page That Uses Frames
Home Page with Frame Border Visible
28
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.

29
Creating a Web Page That Uses Frames
Home Page split using Split Frame Left
30
Creating a Web Page That Uses Frames
Home Page split again using Split Frame Up
31
Creating a Web Page That Uses Frames

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

32
Creating a Web Page That Uses Frames
Home Page split in two by dragging the left frame
border
33
Creating a Web Page That Uses Frames
Home Page split into four frames by dragging the
top border.
34
Creating a Web Page That Uses Frames

• 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 frames within a parent frame.
• Once inserted, the frameset can be modified and
  resized by dragging any frame border, etc.
• To add a frameset, click the Frames tab on the
  Insert bar and select one of the thirteen buttons.

35
Creating a Web Page That Uses Frames
New page with a predefined frameset
36
Creating a Web Page That Uses 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.

37
Creating a Web Page That Uses Frames
Saving the Top Frame which will then appear in
the Site panel.
38
Creating a Web Page That Uses Frames
Saving the left Frame
39
Creating a Web Page That Uses Frames

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

40
Creating a Web Page That Uses Frames
Saving the Frameset
41
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 .
• You can also set the attributes of the page
  content by adjusting them in the Attributes
  inspector.

42
Adjusting Page Properties for Frames
Formatting the top Frame
43
Adjusting Page Properties for Frames
The Frameset after formatting
44
Adjusting Page Properties for Frames

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

45
Adjusting Page Properties for Frames
Top Frame selected
46
Adjusting Page Properties for Frames

• Once selected you can change the frame
  attributes
• Frame Name your descriptive name for the frame
• Src 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

47
Adjusting Page Properties for Frames
Setting the Top Frame attributes
48
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 also include
• 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.

49
Adjusting Frameset Attributes
The Bottom frame Selected
50
Adjusting Frameset Attributes
Frameset Page with all Properties Set
51
Inserting Content in Frames and Noframes Pages

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

52
Inserting Content in Frames and Noframes Pages
A frame with graphic content inserted
53
Inserting Content in Frames and Noframes Pages
A Frame with Word content added
54
Inserting Content in Frames and Noframes Pages

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

55
Inserting Content in Frames and Noframes Pages
Noframes page with Content added
56
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

57
Using Hyperlinks with Frames
A new page added
58
Using Hyperlinks with Frames
The insert Navigation Bar dialog box for the page
59
Using Hyperlinks with Frames
The new Navigation Bar in the nested left frame
60
Using Hyperlinks with Frames
The target information for the Top frame
61
Using Hyperlinks with Frames
The completed frameset shown in a browser
62
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

63
Reviewing HTML Associated with Frames and Targets
HTML Frame tags
64
Reviewing HTML Associated with Frames and Targets
HTML Code for the LIMCFRAMESET Page
65
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-ons that can be downloaded and installed.
• Two of the more common solutions include stopping
  a page from loading outside of its frameset (Find
  Parent Frameset Extension) and Frame Buster which
  stops your pages from being loaded into
  another's frameset.

66
Finding Solutions to Common Frame Problems
The Macromedia Dreamweaver support center page
67
Finding Solutions to Common Frame Problems
The Search Results for frame extensions
68
Finding Solutions to Common Frame Problems
Search results for Frame discussion topics
69
Updating the Web Site on the Remote Server

• When pages are changed, they should be updated on
  your remote site.
• To update
• Connect to the remote server using the Connects
  button on the Site panel
• Click View list and Local View
• Select the updated files and then the Put Files
  button
• Click the View list and then Remote view
• Disconnect using the Disconnects button

70
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