dreamweaver cs4 concepts and techniques chapter 7 page layout with frames
TRANSCRIPT
Chapter 7: Page Layout with Frames 2
Chapter 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
Chapter 7: Page Layout with Frames 3
Chapter 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
Chapter 7: Page Layout with Frames 5
Starting Dreamweaver and Using Site Definition to Create a Local Web Site• Click the Start button on the Windows taskbar• Click Adobe Dreamweaver CS4 on the Start menu or
point to All Programs on the Start menu, and then click Adobe Dreamweaver CS4 on the All Programs list
• If necessary, display the panel groups• In the Local Files list, click the drive containing your
Web site, such as Removable Disk (M:)• Click the Manage Sites link in the Local Files panel to
open the Manage Sites dialog box, and then click the New button to create a new local site. (If necessary, click Site.)
Chapter 7: Page Layout with Frames 6
Starting Dreamweaver and Using Site Definition to Create a Local Web Site
• Type Alaska Frames as the name of the new site
• Click the folder icon to the right of the Local root folder text box to select the local root folder for the Alaska Frames site
• Navigate to the your name folder and then double-click the your name folder, if necessary, to display its contents
• Click the Create New Folder icon• Type alaska_frames as the name of the new
folder and then press the ENTER key
Chapter 7: Page Layout with Frames 7
Starting Dreamweaver and Using Site Definition to Create a Local Web Site
• Click the Select button• Click the folder icon to the right of the Default
images folder text box• Navigate to the alaska_frames folder, if
necessary, and then double-click the folder to open it
• Click the Create New Folder icon
Chapter 7: Page Layout with Frames 8
Starting Dreamweaver and Using Site Definition to Create a Local Web Site
• Type images as the name of the new folder and then press the enter key
• Click the Select button• Verify that the Enable cache check box is
selected in the Site Definition for Alaska Frames dialog box
• Click the OK button and then click the Done button to display the Alaska Frames site in the Dreamweaver Files panel
Chapter 7: Page Layout with Frames 9
Starting Dreamweaver and Using Site Definition to Create a Local Web Site
Chapter 7: Page Layout with Frames 10
Copying Data Files to the Alaska Frames Web Site• Click the Files panel button, and then click the name of
the drive containing your data files, such as Removable Disk (M:)
• If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter07 folder to expand it
• Expand the alaska_frames folder to display the data files• Click the no_frames folder in the list, press the shift key,
and then click the last file
Chapter 7: Page Layout with Frames 11
Copying Data Files to the Alaska Frames Web Site• Press CTRL+C to copy the files• If necessary, click the Files panel button, and then click
the drive containing the Alaska Frames Web site. Expand the your name folder and the alaska_frames folder
• Press CTRL+V to paste the files in the alaska_frames folder.
• Repeat the first two steps to copy the image files to the images folder
Chapter 7: Page Layout with Frames 12
Copying Data Files to the Alaska Frames Web Site
Chapter 7: Page Layout with Frames 13
Displaying the Frames Inspector and Creating the Frameset
• Click Window on the Application bar and then click Frames to display the Frames panel
• Click File on the Application bar, click New, and then click Page from Sample in the New Document dialog box. Point to Frameset in the Sample Folder list
• Click Frameset• In the Sample Page list, point to Fixed Top,
Nested Left
Chapter 7: Page Layout with Frames
Displaying the Frames Inspector and Creating the Frameset
14
• Click Fixed Top, Nested Left in the Sample Page list to select the frameset and to display a preview and description of the frameset in the right pane
• Click the Create button to create the frame. If necessary, expand the Property inspector
• If the frame borders are not displayed, click View on the Application bar, point to Visual Aids, and then click Frame Borders on the Visual Aids submenu
Chapter 7: Page Layout with Frames
Displaying the Frames Inspector and Creating the Frameset
15
Chapter 7: Page Layout with Frames 16
Naming and Saving the Title Frame
• Click in the topFrame in the document window to set the insertion point in the frame
• Click File on the Application bar and then point to Save Frame As
• Click Save Frame As to display the Save As dialog box, which displays a default file name
• If necessary, navigate to the alaska_frames folder for the Alaska Frames Web site
• Type title_frame in the File name text box• Click the Save button to save the frame as title_frame.
The file name is displayed on the frame tab and on the title bar
Chapter 7: Page Layout with Frames 18
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
Chapter 7: Page Layout with Frames 19
Naming and Saving the Frameset
• Click the outside border of the frameset in the Frames panel. Verify that <frameset> is selected in the tag selector
• Select Untitled Document in the Title text box on the Document toolbar and then type Alaska Parks – General Information as the title
• Click File on the Application bar and then point to Save Frameset As
• Click Save Frameset As to display the Save As dialog box• Type parks_frameset as the frameset name• Click the Save button. If necessary, scroll in the Files
panel to view the file name
Chapter 7: Page Layout with Frames 21
Adding a Background Image to the Title_Frame
• Click in the title_frame (topFrame) in the document window
• Click the Page Properties button in the Property inspector to display the Page Properties dialog box
• Click Appearance (HTML) in the Category list• Point to the Browse button
Chapter 7: Page Layout with Frames
Adding a Background Image to the Title_Frame
• Click the Browse button. If necessary, double-click the images folder and then click the parks_bkg file in the Select Image Source dialog box
• Click the OK button to return to the Page Properties dialog box and verify that the path to the parks background image is displayed in the Background image text box
• Click the OK button to apply the background image to the frame
• Type Alaska Parks – General Information in the Title text box and then click the Save button on the Standard toolbar
22
Chapter 7: Page Layout with Frames 23
Adding a Background Image to the Title_Frame
Chapter 7: Page Layout with Frames 24
Adding a Title Image to the Title_Frame
• If necessary, expand the images folder in the Files panel. Scroll the files, and then click the logo.jpg image
• Click in the title_frame and then drag the logo.jpg image to the title_frame. Type logo in the Alt text box
• Double-click the W box in the Property inspector and then type 1020
• Press the tab key to move to the H box, type 175, and then press enter
• Click the Save button
Chapter 7: Page Layout with Frames
Adding a Title Image to the Title_Frame
• Click the topFrame in the Frames panel to select the frame
• Click the Margin height box in the Property inspector. Type 0 and then press the tab key
• Verify that the No resize check box is selected• Click the Save button on the Standard toolbar to
save the title_frame
25
Chapter 7: Page Layout with Frames 26
Adding a Title Image to the Title_Frame
Chapter 7: Page Layout with Frames 27
Adding a Background Image and a Frame Title to the Navigate_Frame• Click in the navigate_frame (leftFrame) in the
document window• Click the Page Properties button in the Property
inspector• Click Appearance (HTML) in the Category list• Click the Browse button, select the
parks_bkg.jpg image, and then click the OK button in the Select Image Source dialog box
Chapter 7: Page Layout with Frames
Adding a Background Image and a Frame Title to the Navigate_Frame
• Click the OK button to insert the background image in the navigate_frame
• Type Alaska Parks – General Information as the title in the Title text box
• Click the Save button to save the file
28
Chapter 7: Page Layout with Frames 29
Adding a Background Image and a Frame Title to the Navigate_Frame
Chapter 7: Page Layout with Frames 30
Creating the Navigation Bar
• Collapse the panel groups. Click in the navigate_frame• Click Insert on the Application bar, point to Image Objects, and
then click Navigation Bar to display the Insert Navigation Bar dialog box
• If necessary, click the Insert button arrow and select Vertically• Type information in the Element name text box and then
press the tab key. Point to the Browse button for the Up image text box
• Click the Browse button to the right of the Up image text box. If necessary, double-click the images folder in the Select image source dialog box. If necessary, click the View Menu button and select List. Verify that the Preview images check box is selected
• Click the frame01a image to select it
Chapter 7: Page Layout with Frames 31
Creating the Navigation Bar
• Click the OK button in the Select image source dialog box and then point to the Browse button to the right of the Over image text box
• Click the Browse button to the right of the Over image text box, click frame01b to select the button, and then click OK
• Click the Alternate text text box and then type General information as the alternate text
• Click the When clicked, Go to URL text box, click the Browse button, and then click information
• Click the OK button to select the information file as the link for the information element. Click the Browse in button, and then click mainFrame
Chapter 7: Page Layout with Frames 33
Inserting the Accessibility Button
• Click the plus sign on the Insert Navigation Bar dialog box to enter information for the Accessibility button
• Type accessibility in the Element name text box
• Click the Browse button to the right of the Up image text box, select the frame02a.jpg image, and then click the OK button
• Click the Over imageBrowse button, select the frame02b.jpg image, and then click the OK button
Chapter 7: Page Layout with Frames 34
Inserting the Accessibility Button
• In the Alternate text text box, type Accessibility
• Next to the When clicked, Go to URL box, click the Browse button, select accessibility, and then click the OK button
• Click the Browse in button and then select mainFrame
Chapter 7: Page Layout with Frames 36
Inserting the For Kids and Reservations Button
• Click the plus sign on the Insert Navigation Bar dialog box
• Type for_kids in the Element name text box• Click the Browse button to the right of the Up
image text box, select the frame03a.jpg image, and then click the OK button
• Click the Over image Browse button, select the frame03b.jpg image, and then click the OK button
• In the Alternate text text box, type For Kids
Chapter 7: Page Layout with Frames 37
Inserting the For Kids and Reservations Button
• In the When clicked, Go to URL box, click the Browse button, select for_kids, and then click the OK button
• Click the Browse in button, and then select mainFrame
• Click the plus sign on the Insert Navigation Bar dialog box
• Type reservations in the Element name text box• Click the Browse button to the right of the Up image
text box, select the frame04a.jpg image, and then click the OK button
Chapter 7: Page Layout with Frames 38
Inserting the For Kids and Reservations Button
• Click the Over image Browse button, select the frame04b.jpg image, and then click the OK button
• In the Alternate text text box, type Reservations
• Next to the When clicked, Go to URL box, click the Browse button, select reservations, and then click the OK button
• Click the Browse in button, and then select mainFrame
Chapter 7: Page Layout with Frames 39
Inserting the For Kids and Reservations Button
Chapter 7: Page Layout with Frames 40
Inserting the Home Button
• Click the plus sign on the Insert Navigation Bar dialog box
• Type Home in the Element name text box• Click the Browse button to the right of the Up
image text box, select the frame05a.jpg image, and then click the OK button
• Click the Over image Browse button, select the frame05b.jpg image, and then click the OK button
Chapter 7: Page Layout with Frames
Inserting the Home Button
• In the Alternate text text box, type Home page• In the When clicked, Go to URL box, type the
address of the Alaska Parks home page. For instance, in this book, the Alaska Parks Web site is saved on Drive M and the full address is M:\edwardsd\parks\index.htm. Substitute the Web site address for your parks project
• Click the Browse in button arrow and then select Main window, if necessary
• Click the OK button to insert the Navigation bar
41
Chapter 7: Page Layout with Frames 43
Adjusting the Column Width of the Navigate_Frame
• Display the panel groups• Click the border surrounding both the leftFrame
and the mainFrame in the Frames panel• In the Property inspector, double-click the
Column Value box, type 160 as the entry, and then press the enter key to expand the column
• Click the Save button on the Standard toolbar to save the navigate_frame.htm file and the changes to the frameset
Chapter 7: Page Layout with Frames 44
Adjusting the Column Width of the Navigate_Frame
Chapter 7: Page Layout with Frames 45
Adding a Background Image and Frame Title to the Content_Frame
• If necessary, click the content_frame (mainFrame) in the document window
• Click the Page Properties button in the Property inspector
• Click Appearance (HTML) in the Category list• Click the Browse button to the right of the
Background Image box, select the parks_bkg.jpg image, and then click the OK button in the Select Image Source dialog box
Chapter 7: Page Layout with Frames
Adding a Background Image and Frame Title to the Content_Frame
• Click the OK button in the Page Properties dialog box to add the background image to the content_frame
• Type Alaska Parks – General Information as the document title
• Click the Save button on the Standard toolbar to save your changes
46
Chapter 7: Page Layout with Frames 47
Adding a Background Image and Frame Title to the Content_Frame
Chapter 7: Page Layout with Frames 48
Linking and Targeting the Default Content• Click the mainFrame in the Frames panel to display a
dotted border around the mainFrame in the document window
• Collapse the images folder in the Files panel to display the .htm files
• Select content_frame.htm in the Src box in the Property inspector
• Type information.htm and then press the enter key to display the contents of the information.htm page in the mainFrame. If necessary, click Yes to save your changes
• Click the Save All button on the Standard toolbar to save the framesets and frames, and then click anywhere in the mainFrame
Chapter 7: Page Layout with Frames 49
Linking and Targeting the Default Content
Chapter 7: Page Layout with Frames 50
Adding a Border and Border Color to the Framesets
• Click the border around the outer frameset in the Frames panel to display a dotted border around the entire frame in the Frames panel and a dotted border around the frameset and the frames in the document window
• Click the Borders button arrow in the Property inspector and then select Yes in the Borders list
• Double-click the Border width box. Type 4 and then press the tab key to apply the border
Chapter 7: Page Layout with Frames 51
Adding a Border and Border Color to the Framesets
Chapter 7: Page Layout with Frames 52
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 button 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 to apply the border
• Click the Save All button on the Standard toolbar
Chapter 7: Page Layout with Frames 53
Applying the Border and Border Color to the Nested Frameset
Chapter 7: Page Layout with Frames 54
Adding a No-Frames Link
• Position the insertion point at the end of the General Information heading and then press the ENTER key
• Type No frames version as the text for the link
• Select the text, No frames version
Chapter 7: Page Layout with Frames 55
Adding a No-Frames Link
• In the Files panel, click the plus sign to the left of the no_frames folder and then click the information.htm file in that folder to select the file
• Drag the information.htm file to the Link box in the Property inspector and then press the tab key to create the link
• Click the Target box arrow and then select _top so this page opens in the current browser window, replacing all frames
• Click the Save All button on the Standard toolbar, and then click anywhere in the new link
Chapter 7: Page Layout with Frames 57
Viewing the Web Site and Verifying Links• Press the F12 key to preview the Alaska Frames Web
site. Allow blocked content if necessary• Click each of the navigation buttons to verify that they
work • If necessary, click Information and then click the No
frames version link• Click the browser’s Back button to return to the frames
version• If instructed to do so, upload the Web site to a remote
server• Close the browser
Chapter 7: Page Layout with Frames 58
Viewing the Web Site and Verifying Links
Chapter 7: Page Layout with Frames 59
Adding a Link from the Alaska Parks Web Site to the Alaska Frames Web Site
• Open the Alaska Parks Web site and then open the index.htm page
• Scroll to the bottom of the page and then click to the right of the last link on the page. Press SHIFT+ENTER.
• Type General Information and then create an absolute link from the text, General Information, to the alaska_frames/parks_frameset.htm file in the Alaska Frames Web site. If a warning box appears, click No to proceed
• If you are publishing to a remote site, copy and paste the Alaska Parks Web site address into the Link box
Chapter 7: Page Layout with Frames 60
Adding a Link from the Alaska Parks Web Site to the Alaska 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
Chapter 7: Page Layout with Frames 61
Closing the Web Site and Quitting Dreamweaver
• Click the Close button on the right corner of the Dreamweaver title bar to close the Dreamweaver window, the document window, and the Alaska Frames Web site
• If you have unsaved changes, click the Yes button in the Dreamweaver CS4 dialog box to save the changes
Chapter 7: Page Layout with Frames 62
Chapter 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
Chapter 7: Page Layout with Frames 63
Chapter 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
Dreamweaver CS4Concepts and Techniques
Chapter 7 Complete
Page Layout with Frames