Adding Shared Site Elements

1
Tutorial 5 Adding Shared Site Elements
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

3
Adding Shared Site Elements

• In this tutorial, you will (contd)
• Add content to frames
• Create hyperlinks with targets
• Explore the HTML behind frames, framesets, and
  targets
• Troubleshoot common problems with frames

4
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)

5
Creating a Navigation Bar Object

• A navigation bar can be created by clicking the
  Navigation Bar button in the Images list in the
  Common category on 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.

6
Creating a Navigation Bar Object
Navigation Bar with the Bands Element in the Down
State
7
Creating a Navigation Bar Object
Navigation Bar with the Bands Element in the Over
While Down State
8
Creating a Navigation Bar Object
Navigation Bar with the Label Element in the Over
state
9
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.

10
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.
• 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 from that
  particular part of the Web site.
• Alternate Text text that appears when a browser
  cannot display the image.

11
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 the new page will open in.
• Options
• Preload Images downloads images when the page
  is loaded.
• Show Down Image Initially 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.

12
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 in the Images
  list in the Common category on the Insert bar.
• Fill in desired entries in the Insert 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.

13
Creating a Navigation Bar Object
Label page with Unformatted Navigation Bar
14
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 sites local root folder.

15
Creating a Navigation Bar Object
Label Page with the Formatted Navigation Bar
16
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.

17
Copying a Navigation Bar
Modify Navigation Bar Dialog Box
18
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 menu bar,
  and then click Navigation Bar.

19
Modifying the Navigation Bar
Elements Reordered Navigation Bar Dialog Box
20
Modifying the Navigation Bar
Home Page with Reordered Navigation Bar Elements
21
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.

22
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 not supported in early browsers or may
  cause the browser to run slower.
• Using frames in a page makes it difficult for
  users to bookmark specific content.
• Using frames in a site can make it difficult for
  search engines to list the site.

23
Understanding Frames and Framesets
Sample Web Page with Frames
24
Creating a Web Page That Uses Frames

• You can create more frames in any page by
• Splitting it into frames, or
• Dragging the borders of a page to create frames,
  or
• Inserting frames, or
• Using predefined framesets
• To make frame borders visible, click View on the
  menu bar, point to Visual Aids, and click Frame
  Borders.
• To view frame borders, you must be in Design view.

25
Creating a Web Page That Uses Frames
Home Page with a Frame Border
26
Creating Frames by Splitting a Web Page

• 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 content and properties in the left
  frame.
• Split Frame Right splits the frame vertically
  with the content and properties in the right
  frame.
• Split Frame Up splits the frame horizontally
  with the content and properties in the top frame.
• Split Frame Down splits the frame horizontally
  with the content and properties in the bottom
  frame.

27
Creating Frames by Splitting a Web Page
Home Page with Two Vertical Frames
28
Creating Frames by Splitting a Web Page
Home Page Split into Three Frames
29
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.

30
Creating Frames by Dragging Borders
Home Page with Four Frames
31
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 button list
  arrow on the Insert bar and select one of the
  thirteen buttons.

32
Using a Predefined Frameset
Page with Top and Nested Left Frames
33
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 menu bar and click
  Save Frame.

34
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.
• Select the frameset by selecting the outer border
  of the page.
• Click File on the menu bar, and click Save
  Frameset.

35
Selecting and Saving the Frameset
Selected Frameset
36
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.

37
Adjusting Page Properties for Frames
Page Properties Set for the Top Frame Page
38
Adjusting Page Properties for Frames
Formatted Frameset
39
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.

40
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

41
Adjusting Frame Attributes
Top Frame Attributes Set
42
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
  color 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.

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

44
Inserting Frames and NoFrames Content
Frameset Page with Inserted Graphic
45
Inserting Frames and NoFrames Content
Frameset Page with Content
46
Adding NoFrames Content

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

47
Adding NoFrames Content
NoFrames Content Added
48
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.

49
Using Hyperlinks with Frames
Life in Minor Chords History Page
50
Using Hyperlinks with Frames
Target Information for the Top Frame
51
Using Hyperlinks with Frames
Completed limc_frameset.htm Page Previewed in a
Browser
52
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 tag inserted between the opening and
  closing frameset tags for each frame
• Noframes tags after the closing frameset tag
  and surrounding the content for the NoFrames page

53
Reviewing HTML Associated with Frames and Targets
HTML Frame Tags
54
Reviewing HTML Associated with Frames and Targets
Code for the limc_frameset.htm Page
55
Finding Solutions to Common Frame Problems

• 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
• FrameJammer stops a page from loading outside of
  its frameset
• Frame Buster stops your pages from being loaded
  into another's frameset

56
Finding Solutions to Common Frame Problems
Macromedia Dreamweaver Support Center Page
57
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 the View list arrow, and then click Local
  View
• Select updated files, and then click the Put
  File(s) button
• Disconnect using the Disconnects from Remote Host
  button
• Click the View list arrow, and then click Local
  View

58
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
• Recognize the HTML code behind frames, framesets
  and targets
• Find help for common frame problems