1. HTML, Third Edition--Illustrated1 HTML – Illustrated Introductory, Third Edition Unit H Controlling Page Layout with Frames and Tables

2. HTML, Third Edition--Illustrated 2 U n i t O b j e c t i v e s Understand layout tools Create a navigation bar Create a frameset Target links Understand layout tools Create a navigation bar Create a frameset Target links

3. HTML, Third Edition--Illustrated 3 U n i t O b j e c t i v e s Format frame borders Use nested frames Create a structuring table Create a template Format frame borders Use nested frames Create a structuring table Create a template

4. HTML, Third Edition--Illustrated 4 Understanding Layout Tools Grid positioning Unified appearance White space control

5. HTML, Third Edition--Illustrated 5 Creating a Navigation Bar Using your computer’s file system, locate and copy the folder named frames and all of its contents from the UnitH\Lessons folder in your Data File location, then paste it into your paradise site folder in the place where you save your site files Start your text editor, open the file htm_H-1.txt from the paradise\frames folder in your site files location, inspect the code, then save it in the same folder as navbar.htm Locate the table heading cell of the row with the attribute id=”vnavRow1”, click before Home, type, click after Home, then type

6. HTML, Third Edition--Illustrated 6 Creating a Navigation Bar Click before Contact Us in the next row, type, click after Us in the same row, then type Link the content of the next three rows as follows: Accommodations: rates.htm, Reservations: reserve.htm, Activities: activities/index.htm Save your work, then preview your file in your browser

7. HTML, Third Edition--Illustrated 7 Creating a Navigation Bar

8. HTML, Third Edition--Illustrated 8 Creating a Frameset In your browser, open the file main.htm from the paradise\frames folder in the place where you save your site files In your text editor, open the file htm_H-2.txt from your paradise\frames folder, and save it as frameset.htm in the same folder Click in the line below the DTD, type, press [Enter] twice, type, press [Enter], type Paradise Mountain online, press [Enter], type, then press [Enter] twice Type, then press [Enter] twice

9. HTML, Third Edition--Illustrated 9 Creating a Frameset Type, press [Enter], type, press [Enter] twice, type, then press [Enter] twice Type, press [Enter], type This page was designed to be viewed with frames. You can open individual pages using the navigation bar., press [Enter], type, press [Enter] twice, then type Save your work, click the browser program button on the taskbar, open the file frameset.htm, then scroll the right window down using the vertical scroll bar

10. HTML, Third Edition--Illustrated 10 Creating a Frameset

11. HTML, Third Edition--Illustrated 11 Creating a Frameset

12. HTML, Third Edition--Illustrated 12 Targeting Links With the file frameset.htm open in your browser, click a link in the vertical navigation bar, then click your browser’s Back button In your text editor, open the file navbar.htm Locate the tag in the head section, click after the closing >, press [Enter] twice, then type Save your work, click the browser program button on the taskbar, then click the Go button next to the browser Address Bar to reload the page

13. HTML, Third Edition--Illustrated 13 Targeting Links Click one of the link buttons in the vertical navigation bar Click one of the links in the right (main) window frame Open main.htm from your paradise\frames folder in the text editor, then locate the link for the PRCA Rooftop Rodeo, click inside the link just before >, press [Spacebar], then type target="_blank" Repeat the previous step for the Boulder Walk and Bike Week, and the Scottish Highlands Festival links, then save your work and test the links in your browser

14. HTML, Third Edition--Illustrated 14 Targeting Links

15. HTML, Third Edition--Illustrated 15 Targeting Links

16. HTML, Third Edition--Illustrated 16 Formatting Frame Borders In your text editor, open frameset.htm Locate the opening tag, select the text frameborder="0", press [Delete], then, if necessary, press [Delete] again or press [Backspace] to remove the extra space before the closing > Save your work, click the browser program button on the taskbar, then click the Go button next to the browser’s Address Location box to reload frameset.htm Move the mouse pointer over the frame border, then click and drag to the right

17. HTML, Third Edition--Illustrated 17 Formatting Frame Borders In your text editor, locate the opening tag, click before >, press [Spacebar], then type frameborder="10" border="10" framespacing="10" Click directly before > in the first tag, press [Spacebar], then type noresize Save your work, click the browser program button, then click the Go button to reload the frameset with its default pages Move the mouse pointer over the frame border

18. HTML, Third Edition--Illustrated 18 Formatting Frame Borders

19. HTML, Third Edition--Illustrated 19 Formatting Frame Borders

20. HTML, Third Edition--Illustrated 20 Using Nested Frames In your browser, open top.htm from your paradise\frames folder Open top.htm in your text editor and inspect the code, then close the file without making any changes If necessary, open your frameset.htm file in your text editor and save it as frameset2.htm in your paradise\frames folder Click before, press [Enter], then type Locate the code for the left-border frame, click after navbar, type 2, save your work, then load frameset2.htm in your browser

21. HTML, Third Edition--Illustrated 21 Using Nested Frames Return to your frameset2.htm code, click before <frameset cols="180,*", press [Spacebar] twice to indent it, then change the frameborder, border, and framespacing values in the second frameset from 10 to 0 Click before the frame tag with the src value navbar2.htm, press [Spacebar] twice, then indent the next two lines of code, ending with the line Click after, press [Enter], type, then save your work Return to your browser, open frameset2.htm from your paradise\frames folder, then click the links to test them In your frameset2.htm file, locate the reference to main.htm and change it to main2.htm, then save your work and view it in your browser

22. HTML, Third Edition--Illustrated 22 Using Nested Frames

23. HTML, Third Edition--Illustrated 23 Creating a Structuring Table In your text editor, open the file htm_H-3.txt from your paradise\frames folder in your site file location, then save it as home.htm in the same folder Click after width="100%" inside the opening table tag, press [Spacebar], then type cellpadding="0" cellspacing="0" border="1" Drag to select the text in the first cell that reads Logo goes here, press [Delete], type, then save your work Open your top.htm file in a separate instance of your text editor Click after, drag to select through the, copy the selected text, then close the file

24. HTML, Third Edition--Illustrated 24 Creating a Structuring Table In your home.htm file, drag to select top.htm content goes here, press [Delete], paste the copied code, then save your work Open your navbar2.htm file in a separate instance of your text editor, locate the table with the attribute id="vnav", drag to select the entire table, as shown in Figure H-17, then copy the code In your home.htm file, drag to select navbar2.htm content goes here, press [Delete], paste the code you copied in the previous step, then save your work and preview your page in your browser Return to your home.htm code, locate the opening table tag just below the opening body tag, change the border value from 1 to 0, save your work, then view your page in your browser

25. HTML, Third Edition--Illustrated 25 Creating a Structuring Table

26. HTML, Third Edition--Illustrated 26 Creating a Template In your text editor, save a copy of home.htm as template.htm in your paradise folder Click just after, press [Enter], type, then press [Enter] Click after, press [Enter], then type Click before, type, then press [Enter]

27. HTML, Third Edition--Illustrated 27 Creating a Template Click after src=" in the image tag for the trail_ride2.jpg image, drag to select the entire source path, press [Delete], type file.jpg, click after alt=", select the entire alt statement, press [Delete], then type Placeholder graphic. Insert your own image and alt statement in this tag. Drag to select the remaining text in the content column, stopping just before, press [Delete], type Insert your page text here., then press [Enter] twice Edit the Day Spa link to remove the../ so that the spa files are available from the root directory; if necessary, change the href value of both home links to index.htm Copy the paradise_style2.css style sheet from the frames\css folder and paste it into the paradise\css folder, then copy the images from the frames\images folder and paste them into the paradise\images folder, clicking No if prompted to replace files Edit the “Page modified by” paragraph as necessary with your name and today’s date, save your work, preview your template and print it from your browser, then close the file and exit the program

28. HTML, Third Edition--Illustrated 28 Creating a Template

29. HTML, Third Edition--Illustrated 29 Clues to Use Choosing between frames and tables  Frames offer several features that tables can’t match  Frames-based sites create some problems  Frames are no longer part of the W3C standard Tables and division layouts are replacing framesTables and division layouts are replacing frames

30. HTML, Third Edition--Illustrated 30 U n i t S u m m a r y Understand layout tools Create a navigation bar Create a frameset Target links

31. HTML, Third Edition--Illustrated 31 U n i t S u m m a r y Format frame borders Use nested frames Create a structuring table Create a template