Embed Size (px)
Citation preview
For the World Wide WebDesigning with Frames
One of the most popular climbing schools in Colorado is Cliff Hangers. Located in Bolder, Cliff Hangers specializes in teaching beginners through advanced climbing techniques. The school also sponsors several climbing tours, leading individuals on some of the most exciting climbs in North America.
Debbie Chen is the owner of the school and is always looking for ways to market her programs.
She knows that some web designers use frames to display several web pages in a single browser window and she wants your help to develop a frame-based website for Cliff Hangers
Web designers often dedicate individual web pages to a particular topic or group of topics.
As more and more pages are added to a web site, the designer may need to display information from multiple pages at the same time.
One common solution is to duplicate links and lists on multiple pages, but this requires time and is hard to maintain if links change.
A frame is a solution that allows the designer to display a page in one section of a browser window
As convenient as frames sound there are some drawbacks. When frames are used the browser must render multiple pages at one time and this may increase the load times.
Framed sites make it hard for users to bookmark the individual pages.
Some framed-based sites do not work well with internet search engines that use key words to match searches.
For these reasons many web designers suggest that a nonframed version of the site should be provided as well.
Before you start creating your frames you want to plan their appearance and determine how you want to use them.◦ What information will be displayed in each frame◦ How do you want the frames placed on the web
page?◦ What size will each frame be.◦ Which frames will be static and which will be
dynamic?◦ What web pages will users see first when they
access the site?◦ Should users be permitted to resize the frames.
As you design the Cliff Hangers website you will consider the questions on the previous slide.
Debbie has created the web pages for the site. Your job is to create the frame layout to display the pages.
The next slide lists the pages that make up the Cliff Hangers website. Debbie has organized the pages by topic
Two of the files (links.htm and staff.htm) do not focus on a particular topic, but contain links to other Cliff Hangers web pages.
Topic Filename Content
Biographies staff.htm Links to biographical pages of Cliff Hangers staff
Home page home.htm The Cliff Hangers home page
Lessons lessons.htm Climbing lessons offered by Cliff Hangers
Logo head.htm A page containing the company logo
Philosophy philosophy.htm Business philosophy of Cliff Hangers
Table of Contents
links.htm Links to Cliff Hangers web pages
Tours diamond.htm Description of the Diamond climbing tour
Tours eldorado.htm Description of the Eldorado climbing tour
Tours grepon.htm Description of the Petit Grepon climbing tour
Tours kieners.htm Description of the Kiener’s Route climbing tour
Tours lumpy.htm Description of the Lumpy Ridge climbing tour
Tours nface.htm Description of the North Face climbing tour
Cliff HangersLogo Frame never changes
Table of Contents frame contains links to all of Cliff Hangers web pages
Pages frame contains the various Cliff Hangers web pages
Debbie would like you to create threeFrames. She would like the school’s logo to appear in the top frame and sheWants the frame on the left to displaythe list of web pages in the Cliff Hangerswebsite. Finally Debbie wants the frameon the lower right to display the contentsof the page selected by the user.
Frames are organized into framesets which is HTML code that defines the layout and content of the frames within the browser window. The syntax for creating a frameset is:
<html> <head> <title>title</title> </head> <frameset> frames </frameset>
</html>
Framesets lay out frames in either rows or columns but not both.
Frames laid out in columns
To lay out frames in columns use the cols attribute
<frameset cols="col1, col2, col3,...">col1, col2, col3 are the width of eachcolumn
Frames laid out in rows
To lay out frames in rows use the rows attribute
<frameset rows="row1, row2, row3,...">row1, row2, row3 are the width of eachrow
Row and column sizes can be specified in three ways◦ Pixels◦ Percentage of the total size of the frameset◦ Asterisk (*) instructs the browser to allocate any unclaimed
space in the frameset to a given row or column. Example rows=“160, *”
Creates two frames set up as rows. The first has a height of 160 pixels and the second is equal to the remaining space in the browser window.
Example col=“160, 25%, *”Creates a layout of three columns whit the first 160 pixels wide, the second 25% of the frameset, the third covers the remaining space in the frameset.
Tip- Set the size of at least one row or column to * to ensure that the frames fill the entire browser window.
Download the files in the Cliff Hanger folder into a folder called cliffhanger.
Unblock the files. Add your name and date to the comment
section of the htm files. Open the cliff.htm file in notepad and insert
the following after the closing </head> tag.<frameset rows="85, *"></frameset>
The first row of the fameset will contain a frame displaying the company logo. To create a frame use the frame element
<frame src="url" />Where url is the URL of the document displayed in the frame.
Debbie saved the page containing the company logo and address as head.htm
Place this document in the first frame of the frameset.
Return to the cliff.htm file in notepad. After the opening <frameset> tag insert the
following frame element. <frameset rows="85, *">
<!--Company Logo--><frame src="head.htm" />
</frameset> Save you changes and check open the
cliff.htm file in your browser. Verify that the Cliff Hanger logo appears in the first frame.
We noted earlier that frames can either be either rows or column but not both.
To create a layout containing both rows and columns you must nest one frameset within another.
Debbie wants the second row of the current frame lay out to contain two columns. The first column will display the table of contents and the second will display the web pages for the various tours.
Return to the cliff.htm file in notepad. Directly below the <frame /> tag you just
entered, insert the following:<frameset rows="85, *">
<!--Company Logo--><frame src="head.htm" />
<!--Nested Frameset--><frameset cols="140, *"></frameset>
</frameset> Save your changes
Directly below the opening <frameset> tag of the nested frameset, insert the following to add the content to the nested frames.
<!--Nested Frameset-->
<frameset cols="140, *"><!--List of Links--><frame src="links.htm" /><!--Cliff Hangers Web Pages--><frame src="home.htm" /></frameset>
Save your changes and refresh cliff.htm in your browser. Verify that the three frames appear with content from the site.
Notice that the browser window displays the three web pages from the Cliff Hangers website but could use some formatting.
When the web content does not entirely fit within the frame borders, the browser adds scroll bars to allow the user to scroll through the rest of the page content.
You can control three attributes of a frame:◦ Appearance of scroll bars◦ Size of the margin within the frame◦ User control of frame size
Return to the cliff.htm file in notepad. Within the frame element for the logo frame,
insert the following
<!--Company Logo--><frame src="head.htm" scrolling="no" />
Save your changes and refresh your browser. Verify that the scroll bars have been removed. You may notice that the logo is being cut off.
Return to the cliff.htm file in notepad. Within the frame element for the logo
frame, insert the following attribute:<!--Company Logo-->
<frame src="head.htm" scrolling="no" marginheight="0" />
Save your changes and refresh your browser. Verify that the Cliff Hanger logo is now fully visible in the top frame.
By default, users can resize frame borders in the browser by clicking and dragging the frame border with their mouse.
Some web designers prefer to freeze or lock the frames so that users cannot resize them. This ensures that the website appears the way that the designer intended.
Adding the attribute noresize=“noresize” will freeze the frames.
Return to the cliff.htm file in notepad. Within each of the three <frame /> tags in the file, add the
following attribute:<frameset rows="85, *">
<!--Company Logo-->
<frame src="head.htm" scrolling="no" marginheight="0" noresize="noresize" />
<!--Nested Frameset-->
<frameset cols="140, *">
<!--List of Links-->
<frame src="links.htm" noresize="noresize" />
<!--Cliff Hangers Web Pages-->
<frame src="home.htm" noresize="noresize" />
</frameset>
</frameset>
Save your changes and refresh your browser. Verify that the frames have been locked.
You need to name the frames in the Cliff Hanger site so that you can specify where various pages will open when users click in the left frame.
Return to the cliff.htm file in notepad. Within the first <frame /> tag insert the following attribute:
<frame src="head.htm" scrolling="no" marginheight="0" noresize="noresize" name="logo" />
Within the second <frame /> tag insert the following attribute:<frame src="links.htm" noresize="noresize" name="links" />
Within the third <frame /> tag insert the following attribute:<frame src="home.htm" noresize="noresize" name="pages" />
Save your changes.
Now that you have named the frames it is time to specify the pages frame as the target for all of the pages in the table of contents.
Open the links.htm file in notepad Within the <a> tags for all of the pages enter the
following attribute<li><a href="home.htm" target="pages">Home Page</a></li><li><a href="philosph.htm" target="pages">Our Philosophy</a></li><li><a href="lessons.htm" target="pages">Climbing Lessons</a></li>
Save your changes and refresh the cliff.htm file in your browser. Click on the first three pages in the table of contents and verify that they open correctly.
The last two links in the table of contents point to a list of tours and staff information.
The tours.htm file does not contain information about tours, instead it is an expanded table of contents for the tours pages. The purpose of the tours.htm file is to generate an additional list of pages for the user to choose from.
To have the tours.htm appear in the links frame you need to use a reserved target name.
Reserved Target Name
Function in a Frameset
_blank Loads the target document into a new browser window.
_self Loads the target document into the frame containing the link
_parent Loads the target document into the parent of the frame containing the link.
_top Loads the document into the full display area, replacing the current frameset.
Return to the links.htm file in notepad. Within the hypertext link for the tours.htm
file, insert the following attribute:
<li><a href="tours.htm" target="_self">Tours</a></li>
Save your changes and refresh the cliff.htm file in your browser. Verify that the Tours link opens in the link frame.
Open the tours.htm file in notepad. Insert the following tag directly above the closing </head>
tag:
<base target="pages" />
</head>
Add the following attribute to the link for the links.htm file.
<li><a href="links.htm" target="_self">Tours</a></li>
Save your changes and refresh the cliff.htm file in your browser. Verify that the Tours link works as intended. When you click on the link the table of contents should expand. When you click on the new pages they should open in the pages frame.
Debbie would like the Staff web page to load into the full display area with its own frame layout. To do this you need to tell the browser to load the staff.htm file on top of the cliff.htm file.
Return to the links.htm file in notepad Within the staff link add the following attribute:<li><a href="staff.htm" target="_top">Staff</a></li> Save your changes to the links.htm file Return to the tours.htm file and make the same
change. Save your changes and refresh the cliff.htm file in
your browser.
With your cliff.htm file refreshed, click on the Staff link and verify that it displays the staff pages in the browser window.
Click on the Home Page link to return to the cliff.htm file in your browser.
Turn in a screen shot of the cliff.htm browser display and printout of the links.htm, cliff.htm, and tours.htm notepad files.
