html, third edition--illustrated1 html – illustrated introductory, third edition unit h...

HTML, Third Edition--Illustrated 1

HTMLHTML––Illustrated Illustrated Introductory, Third EditionIntroductory, Third Edition

Unit HUnit H

Controlling Page Layout Controlling Page Layout with Frames and Tableswith Frames and Tables


U n i t O b j e c t i v e sU 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


U n i t O b j e c t i v e sU 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


Understanding Layout ToolsUnderstanding Layout Tools

Grid positioningGrid positioning

Unified appearanceUnified appearance

White space controlWhite space control


Creating a Navigation BarCreating 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>



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


Creating a FramesetCreating 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



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


Targeting LinksTargeting 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



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


Formatting Frame BordersFormatting 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



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


Using Nested FramesUsing 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



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

Creating a Structuring TableCreating 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 , drag to select <br clear="all" /> through the </h1>, copy the selected text, then close the file



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

Creating a TemplateCreating 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 , then press [Enter]

Click after <tr valign="top" class="headrow">, press [Enter], then type 

Click before <td nowrap><br clear="all" />, type , then press [Enter]

Click before <tr align="center" id="vnavRow1">, type , then press [Enter]



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


Clues to UseClues to Use

Choosing between frames and Choosing between frames and tablestables Frames offer several features that Frames offer several features that

tables can’t matchtables can’t match Frames-based sites create some Frames-based sites create some

problemsproblems Frames are no longer part of the W3C Frames are no longer part of the W3C

standardstandard• Tables and division layouts are replacing Tables and division layouts are replacing

framesframes


U n i t S u m m a r yU n i t S u m m a r y

Understand layout toolsUnderstand layout tools

Create a navigation barCreate a navigation bar

Create a framesetCreate a frameset

Target linksTarget links


U n i t S u m m a r yU n i t S u m m a r y

Format frame bordersFormat frame borders

Use nested framesUse nested frames

Create a structuring tableCreate a structuring table

Create a templateCreate a template

html, third edition--illustrated1 html – illustrated introductory, third edition unit h...

Documents

frameset type

navigation bar slide

frameset slide

browser slide

template slide

illustrated1 html

type paradise mountain

vertical scroll bar