1. Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames

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

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

4. Web Page Layout with Frames Chapter 7: Page Layout with Frames 4

5. 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.)

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

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

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

9. Chapter 7: Page Layout with Frames 9 Starting Dreamweaver and Using Site Definition to Create a Local Web Site

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

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

12. Chapter 7: Page Layout with Frames 12 Copying Data Files to the Alaska Frames Web Site

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

14. Displaying the Frames Inspector and Creating the Frameset Chapter 7: Page Layout with Frames 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

15. Displaying the Frames Inspector and Creating the Frameset Chapter 7: Page Layout with Frames 15

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

17. Chapter 7: Page Layout with Frames 17 Naming and Saving the Title Frame

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

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

20. Chapter 7: Page Layout with Frames 20 Naming and Saving the Frameset

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

22. 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 Chapter 7: Page Layout with Frames 22

23. Chapter 7: Page Layout with Frames 23 Adding a Background Image to the Title_Frame

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

25. 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 Chapter 7: Page Layout with Frames 25

26. Chapter 7: Page Layout with Frames 26 Adding a Title Image to the Title_Frame

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

28. 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 Chapter 7: Page Layout with Frames 28

29. Chapter 7: Page Layout with Frames 29 Adding a Background Image and a Frame Title to the Navigate_Frame

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

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

32. Chapter 7: Page Layout with Frames 32 Creating the Navigation Bar

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

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

35. Chapter 7: Page Layout with Frames 35 Inserting the Accessibility Button

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

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

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

39. Chapter 7: Page Layout with Frames 39 Inserting the For Kids and Reservations Button

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

41. 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 Chapter 7: Page Layout with Frames 41

42. Chapter 7: Page Layout with Frames 42 Inserting the Home Button

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

44. Chapter 7: Page Layout with Frames 44 Adjusting the Column Width of the Navigate_Frame

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

46. 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 Chapter 7: Page Layout with Frames 46

47. Chapter 7: Page Layout with Frames 47 Adding a Background Image and Frame Title to the Content_Frame

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

49. Chapter 7: Page Layout with Frames 49 Linking and Targeting the Default Content

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

51. Chapter 7: Page Layout with Frames 51 Adding a Border and Border Color to the Framesets

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

53. Chapter 7: Page Layout with Frames 53 Applying the Border and Border Color to the Nested Frameset

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

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

56. Chapter 7: Page Layout with Frames 56 Adding a No-Frames Link

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

58. Chapter 7: Page Layout with Frames 58 Viewing the Web Site and Verifying Links

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

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

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

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

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

64. Dreamweaver CS4 Concepts and Techniques Chapter 7 Complete Page Layout with Frames