HTML - Web Page Design 1

Transcript HTML - Web Page Design 1

For the World Wide Web
Designing 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
Logo Frame
never changes
Cliff Hangers
Table of Contents
frame contains links
to all of Cliff Hangers
web pages
Debbie would like you to create three
Frames. She would like the school’s
logo to appear in the top frame and she
Wants the frame on the left to display
the list of web pages in the Cliff Hangers
website. Finally Debbie wants the frame
on the lower right to display the contents
of the page selected by the user.
Pages frame contains
the various Cliff
Hangers web pages

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
Frames laid out in rows
To lay out frames in columns
use the cols attribute
To lay out frames in rows use
the rows attribute
<frameset cols="col1, col2, col3,...">
col1, col2, col3 are the width of each
column
<frameset rows="row1, row2, row3,...">
row1, row2, row3 are the width of each
row

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, *">

<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, *">

<frame src="head.htm" />

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

<frameset cols="140, *">

<frame src="links.htm" />

<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

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

<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, *">

<frame src="head.htm" scrolling="no" marginheight="0" noresize="noresize" />

<frameset cols="140, *">

<frame src="links.htm" noresize="noresize" />

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

HTML - Web Page Design 1

Transcript HTML - Web Page Design 1

Directory