Project 7

1
Project 7

• Page Layout with Frames

2
Project Objectives

• Describe the advantages and disadvantages of
  using frames on a Web page
• Describe frameset layout and properties
• Create a frameset and frames
• Define frames and describe how they work
• Delete a frame

3
Project Objectives

• Set the properties for a frame and for a frameset
• Apply and modify the properties of a frame
• Add static content to a frame using the main
  content frame
• Add Flash buttons as navigation elements
• Save the frame and frameset

4
Web Page Layout with Frames
5
Using Site Definition to Create a Local Web Site

• Start Dreamweaver
• Click Site on the menu bar and then click New
  Site to display the Site Definition dialog box
• If necessary, click the Advanced tab. Verify that
  Local Info is selected in the Category column
• Type Parks Frames as the site name
• Click the folder icon to the right of the Local
  root folder text box

6
Using Site Definition to Create a Local Web Site

• Navigate to the your name folder and then
  double-click the your name folder
• Click the Create New Folder icon
• Type col_frames as the name of the new folder and
  then press the ENTER key
• Double-click the col_frames folder name
• Click the Select button

7
Using Site Definition to Create a Local Web Site

• Click the folder icon to the right of the Default
  images folder text box
• Navigate to the your name folder and then
  double-click the col_frames folder
• Click the Create New Folder icon
• Type images as the name of the new folder and
  then press the ENTER key
• Double-click the images folder name

8
Using Site Definition to Create a Local Web Site

• Click the Select button
• Verify that the Refresh local file list
  automatically and Enable cache check boxes are
  selected in the Site Definition dialog box
• Click the OK button
• The Dreamweaver window is displayed, and the
  Parks Frames site is displayed in the Files panel

9
Using Site Definition to Create a Local Web Site
10
Copying Data Files to the Parks Frames Web Site

• Click the Start button on the Windows taskbar and
  then click My Computer
• Double-click Local Disk (C) and then navigate to
  the location of the data files for Project 7
• Double-click the DataFiles folder and then
  double-click the Proj07 folder
• Double-click the col_frames folder and then
  double-click the images folder
• Click the first image file in the list, hold down
  the SHIFT key, and then click the last image file
  in the list

11
Copying Data Files to the Parks Frames Web Site

• Right-click the selected files to display the
  context menu
• Click the Copy command and then click the My
  Computer Back button the number of times
  necessary to navigate back to the your name
  folder
• Double-click the your name folder, double-click
  the col_frames folder, and then double-click the
  images folder
• Right-click in the open window to display the
  context menu
• Click the Paste command to paste the image files
  into the images folder

12
Copying Data Files to the Parks Frames Web Site

• Click the My Computer Back button the number of
  times necessary to return to the col_frames
  folder. Hold down the SHIFT key, select the
  no_frames subfolder, and then select the data
  files. Right-click to display the context menu
  and then click the Copy command
• Click the My Computer Back button and navigate to
  the your name folder
• Paste the data files into the col_frames folder
• Click the Close button

13
Copying Data Files to the Parks Frames Web Site
14
Creating the Frameset

• Click File on the menu bar and then click New.
  Point to Framesets in the Category list
• Click Framesets. Point to Fixed Top, Nested Left
  in the Framesets column
• Click Fixed Top, Nested Left in the Framesets
  column.
• Click the Create button. If necessary, expand the
  Property inspector
• If the frame borders do not display, click View
  on the menu bar, point to Visual Aids, and then
  click Frame Borders on the Visual Aids submenu.
  If the Property inspector is not expanded so both
  panes are displayed, hide the panel groups, click
  the Property inspector expander arrow, and then
  redisplay the panel groups

15
Creating the Frameset
16
Displaying the Frames Panel

• If necessary, expand the panel groups. Click
  Window on the menu bar and then click Frames

17
Naming and Saving the Three Frames

• Click the topFrame in the Document window
• Click File on the menu bar and then point to Save
  Frame As
• Click Save Frame As
• Type title_frame in the File name text box
• Click the Save button

18
Naming and Saving the Three Frames
19
Saving and Naming the Left and Main Frames

• Click the left frame in row 2, click File on the
  menu bar, and then click Save Frame As
• In the Save As dialog box, type navigate_frame in
  the File name text box and then click the Save
  button
• Click the right frame in row 2. Click File on the
  menu bar and then click Save Frame As
• In the Save As dialog box, type content_frame in
  the File name text box and then click the Save
  button

20
Saving and Naming the Left and Main Frames
21
Naming and Saving the Frameset

• Click the outside border of the frameset in the
  Frames panel. Verify that ltframesetgt is selected
  in the tag selector. Select Untitled Document in
  the Title text box on the Document toolbar and
  then type Colorado Parks General Information as
  the title
• Click File on the menu bar and then point to Save
  Frameset As
• Click Save Frameset As
• Type parks_frameset as the frameset name
• Click the Save button. If necessary, scroll in
  the Files panel

22
Naming and Saving the Frameset
23
Adding a Background Image to the Title_Frame

• Click in the title_frame (topFrame) in the
  Document window. Click Modify on the menu bar and
  then click Page Properties. Point to the Browse
  button
• Click the Browse button. If necessary,
  double-click the images folder and then click the
  bg.jpg file
• Click the OK button
• Click the OK button
• Type Colorado Parks - General Information in the
  Title text box and then click the Save button

24
Adding a Background Image to the Title_Frame
25
Adding a Title Image to the Title_Frame

• If necessary, expand the images folder. Click the
  logo2.gif image. If necessary, click the Reset
  button in the Files panel to display the
  logo2.gif file
• Drag the logo.gif image to the title_frame
• Click the Save button and then click the topFrame
  in the Frames panel
• Click the Margin height box in the Property
  inspector. Type 0 and then press the TAB key.
  Verify that the No resize checkbox is selected
• Click the Save button

26
Adding a Title Image to the Title_Frame
27
Adding a Background Image and a Frame Title to
the Navigate_Frame

• Click in the navigate_frame (leftFrame) in the
  Document window
• Click Modify on the menu bar and then click Page
  Properties
• Click the Browse button, select the bg.jpg image,
  and then click the OK button in the Select Image
  Source dialog box
• Click the OK button
• Type Colorado Parks - General Information as the
  title in the Title text box and click the Save
  button

28
Adding a Background Image and a Frame Title to
the Navigate_Frame
29
Inserting a Flash Button into the Navigate_Frame

• Click Insert on the menu bar, point to Media, and
  then point to Flash Button on the Media submenu
• Click Flash Button
• Click Blip Arrow. Click the Button text text box
  and then type Information as the text to display
  on the first button. Double-click the Size box
  and then type 12 as the new value. Point to the
  Browse button to the right of the Link box
• Click the Browse button. When the Select file
  dialog box is displayed, click information.htm in
  the Look in list. If necessary, click the
  Relative to box arrow and then select Document
• Click the OK button in the Select file dialog
  box. Point to the Target box arrow

30
Inserting a Flash Button into the Navigate_Frame

• Click the Target box arrow and then click
  mainFrame
• Click the Save as text box and type
  information.swf as the file name
• Point to the OK button
• Click the OK button to insert the Flash button
• Click below the button to deselect it and then
  press the ENTER key

31
Inserting a Flash Button into the Navigate_Frame
32
Inserting the Accessibility Button

• Click Insert on the menu bar, point to Media, and
  then click Flash Button on the Media submenu
• Click Blip Arrow
• Click the Button text text box. Type
  Accessibility as the button text
• Change the font size to 12
• Click the Link Browse button, and then click
  accessibility.htm

33
Inserting the Accessibility Button

• Click the OK button in the Select file dialog box
• Click the Target box arrow and then select
  mainFrame
• Click the Save as text box and type
  accessibility.swf as the file name
• Click the OK button to insert the Accessibility
  button into the navigate_frame
• Click below the button and then press the ENTER
  key

34
Inserting the Accessibility Button
35
Inserting the For Kids Button

• Click Insert on the menu bar, point to Media, and
  then click Flash Button on the Media submenu
• Click Blip Arrow. Click the Button text text box.
  Type For Kids as the button name. Change the font
  size to 12
• Click the Link Browse button, click for_kids.htm,
  and then click the OK button in the Select file
  dialog box
• Click the Target box arrow and then select
  mainFrame

36
Inserting the For Kids Button

• Click the Save as text box and type for_kids.swf
  as the file name
• Click the OK button to insert the For Kids button
  into the navigate_frame
• Click below the button and then press the ENTER
  key

37
Inserting the Reservations Button

• Click Insert on the menu bar, point to Media, and
  then click Flash Button on the Media submenu
• Click Blip Arrow. Click the Button text text box.
  Type Reservations as the button text. Change the
  font size to 12
• Click the Link Browse button, click
  reservations.htm, and then click the OK button in
  the Select file dialog box
• Click the Target box arrow and then select
  mainFrame

38
Inserting the Reservations Button

• Click the Save as text box and type
  reservations.swf as the file name
• Click the OK button to insert the Reservations
  button into the navigate_frame
• Click below the button and then press the ENTER
  key
• Click the Save button on the Standard toolbar

39
Inserting the Reservations Button
40
Inserting the Home Button

• Click Insert on the menu bar, point to Media, and
  then click Flash Button on the Media submenu.
  Click Blip Arrow. Click the Button text text box
  and then type Home as the button text. Change the
  font size to 12
• If you are linking to a remote server, copy and
  paste the URL to the main Colorado Parks Web site
  into the Link box. If you are linking to the
  C/yourname/parks/index.htm folder, type that
  path in the Link box
• Click the Target box arrow and then select _blank
  in the list. Click the Save as text box and then
  type home.swf as the file name
• Click the OK button and then click the Save
  button on the Standard toolbar

41
Inserting the Home Button
42
Adjusting the Column Width of the Navigate_Frame

• Click the border surrounding the leftFrame and
  the mainFrame in the Frames panel
• If necessary, click the tab on the first column
  in the Property inspector. Double-click the
  Column Value box, type 150 as the entry, and then
  press the ENTER key
• Click the Save button on the Standard toolbar to
  save the navigate_frame.htm file and the changes
  to the frameset

43
Adjusting the Column Width of the Navigate_Frame
44
Adding a Background Image and Frame Title to the
Content_Frame

• Click the content_frame (mainFrame) in the
  Document window
• Click Modify on the menu bar and then click Page
  Properties
• Click the Browse button to the right of the
  Background Image box, navigate to and select the
  bg.jpg image, and then click the OK button in the
  Select Image Source dialog box
• Click the OK button in the Page Properties dialog
  box
• Type Colorado Parks - General Information as the
  title and then click the Save button on the
  Standard toolbar

45
Adding a Background Image and Frame Title to the
Content_Frame
46
Linking and Targeting the Default Content

• Click the mainFrame in the Frames panel
• Double-click content_frame.htm in the Src box in
  the Property inspector
• Type information.htm and then press the ENTER key
• If a Dreamweaver Warning box displays, click the
  Yes button
• Click File on the menu bar and then click Save All

47
Linking and Targeting the Default Content
48
Adding a Border and Border Color to the Frameset

• Click the border around the outer frameset in the
  Frames panel
• Click the Borders box arrow and then point to Yes
  in the Borders list
• Click Yes. Double-click the Border width box.
  Type 4 and then press the ENTER key
• Click the Border color hexadecimal box, type
  993300 for the border color, and then press the
  ENTER key

49
Adding a Border and Border Color to the Frameset
50
Applying the Border and Border Color to the
Nested Frameset

• Click the border surrounding the leftFrame and
  the mainFrame (the nested frameset) in the Frames
  panel
• Click the Borders box arrow in the Property
  inspector and then click Yes in the Borders list
• Double-click the Border width box. Type 4 and
  then press the ENTER key
• Click the Border color hexadecimal box, type
  993300 as the entry, and then press the ENTER
  key
• Click the File menu and then click Save All

51
Applying the Border and Border Color to the
Nested Frameset
52
Adding a No-Frames Link

• Position the insertion point at the end of the
  Information heading and then press the ENTER key
• Type No frames version as the text for the link
• Select the text, No frames version

53
Adding a No-Frames Link

• If necessary, scroll in the Files panel to
  display the no_frames folder. Click the plus sign
  to the left of the no_frames folder and then
  click the information.htm file in that folder
• Drag the information.htm file to the Link box in
  the Property inspector and then press the ENTER
  key
• Click the Target box arrow and then select _top.
  Click the Save button on the Standard toolbar

54
Adding a No-Frames Link
55
Viewing the Web Site and Verifying Links

• Press the F12 key to preview the Parks Frames Web
  site
• Click each of the navigation buttons to verify
  that they work (Figures 7-68a through 7-68d on
  pages DW 608 and DW 609)
• If necessary, click Information and then click
  the No frames version link
• Click the browser Back button to return to the
  framed version

56
Viewing the Web Site and Verifying Links

• If instructed to do so, upload the Web site to a
  remote server
• If instructed to do so, right-click in each
  frame, print a copy of each frame, and hand in
  the copies to your instructor
• Close the browser

57
Viewing the Web Site and Verifying Links
58
Adding a Link from the Florida Parks Web Site to
the Parks_Frames Web Site

• Open the Colorado Parks Web site and then open
  the index.htm page
• Scroll to the bottom of the page and then click
  to the right of last sentence on the page. Press
  the ENTER key
• Type General Information and then create an
  absolute link from the text, General Information,
  to the col_frames/parks_frameset.htm file in the
  Parks Frames Web site. If a warning box displays,
  click No to proceed.
• If you are publishing to a remote site, copy and
  paste the Colorado Parks Web site address into
  the Link box

59
Adding a Link from the Florida Parks Web Site to
the Parks_Frames Web Site

• If you are saving your work to a local computer
  or server, use the Browse for File icon in the
  Property inspector to create the link path
• Click the Save button on the Standard toolbar
• Press F12 to preview the file in your browser.
  Click the General Information link
• Close the browser

60
Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the right corner of the
  Dreamweaver title bar

61
Project Summary

• Describe the advantages and disadvantages of
  using frames on a Web page
• Describe frameset layout and properties
• Create a frameset and frames
• Define frames and describe how they work
• Delete a frame

62
Project Summary

• Set the properties for a frame and for a frameset
• Apply and modify the properties of a frame
• Add static content to a frame using the main
  content frame
• Add Flash buttons as navigation elements
• Save the frame and frameset

63
Project 7 Complete

• Page Layout with Frames