1 / 31

HTML – Illustrated Introductory, Third Edition

HTML – Illustrated Introductory, Third Edition. Unit H Controlling Page Layout with Frames and Tables. 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. U n i t O b j e c t i v e s. Format frame borders Use nested frames

dobsonj
Download Presentation

HTML – Illustrated Introductory, Third Edition

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML–Illustrated Introductory, Third Edition Unit H Controlling Page Layout with Frames and Tables 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 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 HTML, Third Edition--Illustrated

  4. Understanding Layout Tools • Grid positioning • Unified appearance • White space control 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 <a href="main.htm">, click after Home, then type </a> HTML, Third Edition--Illustrated

  6. Creating a Navigation Bar • Click before Contact Us in the next row, type <a href="contact.htm">, click after Us in the same row, then type </a> • 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 HTML, Third Edition--Illustrated

  7. Creating a Navigation Bar 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 <html>, press [Enter] twice, type <head>, press [Enter], type <title>Paradise Mountain online</title>, press [Enter], type </head>, then press [Enter] twice • Type <frameset cols="180,*" frameborder="0">, then press [Enter] twice HTML, Third Edition--Illustrated

  9. Creating a Frameset • Type <frame src="navbar.htm" name="nav"/>, press [Enter], type <frame src="main.htm" name="main"/>, press [Enter] twice, type </frameset>, then press [Enter] twice • Type <noframes>, press [Enter], type This page was designed to be viewed with frames. You can open individual pages using the <a href="navbar.htm"> navigation bar</a>., press [Enter], type </noframes>, press [Enter] twice, then type </html> • 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 HTML, Third Edition--Illustrated

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

  11. Creating a Frameset 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 </title> tag in the head section, click after the closing >, press [Enter] twice, then type <base target="main" /> • 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 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 HTML, Third Edition--Illustrated

  14. Targeting Links HTML, Third Edition--Illustrated

  15. Targeting Links HTML, Third Edition--Illustrated

  16. Formatting Frame Borders • In your text editor, open frameset.htm • Locate the opening <frameset> 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 HTML, Third Edition--Illustrated

  17. Formatting Frame Borders • In your text editor, locate the opening <frameset> tag, click before >, press [Spacebar], then type frameborder="10" border="10" framespacing="10" • Click directly before > in the first <frame> 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 HTML, Third Edition--Illustrated

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

  19. Formatting Frame Borders 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 <frameset, type <frameset rows="163,*“ frameborder="0“ border="0“ framespacing="0“ noresize>, press [Enter], then type <frame src="top.htm“ name="top" border="0“ scrolling="no"> • Locate the code for the left-border frame, click after navbar, type 2, save your work, then load frameset2.htm in your browser 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 </frameset> line • Click after </frameset>, press [Enter], type </frameset>, 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 HTML, Third Edition--Illustrated

  22. Using Nested Frames 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 <img src="images/logo_pm3.png" width="188" height="165" alt="Welcome to Paradise Mountain Resort" />, then save your work • Open your top.htm file in a separate instance of your text editor • Click after <!-- Heading content -->, drag to select <br clear="all" /> through the </h1>, copy the selected text, then close the file 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 HTML, Third Edition--Illustrated

  25. Creating a Structuring Table 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 <body>, press [Enter], type <!-- Web page structuring table, two rows by two columns -->, then press [Enter] • Click after <tr valign="top" class="headrow">, press [Enter], then type <!-- Logo image - Do not change --> • Click before <td nowrap><br clear="all" />, type <!-- Second column – Page heading goes here -->, then press [Enter] • Click before <tr align="center" id="vnavRow1">, type <!-- Site-standard navigation bar - Do Not Change -->, then press [Enter] 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 <address style="text-align: center;">, press [Delete], type <p>Insert your page text here.</p>, 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 HTML, Third Edition--Illustrated

  28. Creating a Template 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 frames 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 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 HTML, Third Edition--Illustrated

More Related