When you click on a link in the nav-igation frame, the content frame displays another HTML doc-ument, and the frame containing the navigation never changes.. This chapter will give you t
Trang 111
11 Creating Frames
Introduction
When it comes to Web design, frames have been around for
quite a long time In that time they have constantly fallen in
and out of favor Some Web designers can't live without
them, and some designers would never in a million years
use them However, whether you love them or dislike them,
frames are here to stay… at least for today
Frames are an interesting way to design a Web document
Think of a window with separate panes of glass Now, think
of that window as a Web page, and each one of those
sepa-rate panes of glass as a sepasepa-rate HTML document, and
you've got a pretty good visualization of a Web page
contain-ing frames For example, you can have a two-frame page
with one frame containing the navigation for the site, and the
other frame the contents When you click on a link in the
nav-igation frame, the content frame displays another HTML
doc-ument, and the frame containing the navigation never
changes
There's a certain beauty in being able to change one area
of a Web page and leave another area static Good Web
designers with a good sense of how to utilize frame
technol-ogy can create some pretty awesome Web sites
A framed document is composed of a frameset page
(called so because it uses the <frameset> tag), and two or
more HTML documents When the frameset page loads on
the visitor's browser, it calls and loads the HTML documents,
and displays the page
Dreamweaver makes the coding and managing of frames
easy with a point-and-click interface You control the
com-mands for modifying the properties of the overall frames,
and each individual frame This chapter will give you the
essentials of creating frames, and information for inserting
and modifying frames and framesets, as well as how you
What You’ll Do
Introduce Frames
Create a New Frame
Open a Web Page in a Frame
Provide Information for No Frame Support
Select Frames and Framesets
Add Frameset Information
Save a Frameset
Modify Frames
Change Frame Properties
Change Frameset Properties
Target Links
Create Quick and Easy Frame Links
Trang 2Frame documents use a <frameset>…
</frameset> tag set to create documents in
multiple views The multiple view nature of
frame documents lets designers keep certain
information visible, while other windows
within the frame are scrolled or replaced For
example, within the same window, one frame
might display a static banner, a second a
nav-igation menu, and a third the main document
that can be scrolled through or replaced by
navigating in the second frame
If you were to design a Frame page directly in
HTML, it might look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>A frameset </title>
</head>
<frameset cols="20%, 80%">
< frameset rows="100, 200">
<frame src="doc1.html">
< frame src="doc2.gif">
</ frameset >
< frame src="doc3.html">
</ frameset >
</html>
Image
Frames divide a browser window into two or more document windows, each displaying a different document, or a different part of the same document Frames in an HTML docu-ment cause a web page to look as if it's divided into multiple, scrollable regions Each separate frame has a distinct name, which the frameset uses to load specific HTML docu-ments
Frames in HTML documents are created and controlled through three distinct element types: FRAMESET, FRAME and NOFRAMES
The Frameset Element
A frameset divides the browser window into two or more rectangular regions For example the following HTML code describes a basic frameset:
<frameset cols="30%,30%,40%">
This code describes a frame set divided verti-cally into three regions, and each region is a percentage of the width of the browser win-dow (30%, 30%, and 40%) Since the rows attribute was not used, this frameset does not include rows
Introducing Frames
Trang 3The Frame Element
The Frame element defines a single frame in
a frameset, and can include up to seven
attributes: src, name, frameborder,
margin-width, marginheight, scrolling, and noresize
Since the frame tag is not defined as a
con-tainer, it has no matching end tag The
follow-ing is an example of a frame element:
<html>
<frameset rows="20%,80%">
<frame src="http://www.power.com/">
<frameset cols="60%,40%">
<frame src="http://www.andy.com/">
<frame src="http://www.steve.com/">
</frameset>
</frameset>
</html>
The <noframes> Tag
The noframe element contains content that should only be rendered when frames are not displayed Noframe is typically used in a Frameset document to provide alternate con-tent for browsers that do not support frames
or have frames disabled The following is an example of the noframes tag
<noframes>
<p>The Frameset contains:
<ul>
<li><A href="contents_of_frame1.html">con-tent_1</A>
<li><img src="image.gif">
<li><A href="noframes.html">Some other neat contents</A>
</ul>
</noframes>
Trang 4Most of the framesets on the Web today use two or three frames For example, a common setup is to have one narrow frame spanning the top of the page to hold a banner and some site navigation; a lower-left frame to hold a table of contents or additional navigation; and a large lower-right frame to hold the content of the site Or it can be as simple
as two frames: one small frame for navigation, and a larger frame for the main body of information You can create a new document with frames using samples from the New Document dialog box or add frames to an existing document using the Frames button or dragging a frame border After you create a frameset, you can enter text, images, and other content in each of the frames, as you would for any normal HTML document, or you can instruct the frame to load a previously cre-ated HTML document
Creating a New
Frame
Create a Frameset from a Sample
Click the File menu, and then click
New.
Click the Page from Sample
category
Click Frameset in Sample Folder
options
Select a Sample Page
TIMESAVER Click the Get more
content link to add more templates
to the New Document dialog box
Click Create.
The Frame Tag Accessibility
Attributes dialog box opens
Click the Frame list arrow, select a
frame, and then enter a name (one
word, start with a letter, and
case-sensitive) for each frame in the
document
Click OK.
7
6
5
4
3
2
1
5 2
3
Did You Know?
You can use a grid to help layout a
frame document Click the View menu,
point to Grid, and then click Show Grid
to show the grid
4
Trang 5Insert a Frameset
Create a new HTML document, or
open an existing one
Click the Layout tab on the Insert
bar
Click the Frames button, and
select a frameset from the
available options (in this example,
Left Frame)
The Frame Tag Accessibility
Attributes dialog box opens
Click the Frame list arrow, select a
frame, and then enter a name (one
word, start with a letter, and
case-sensitive) for each frame in the
document
Click OK.
Create a Frameset with Click
and Drag
Create a new HTML document, or
open an existing one
Click the View menu, point to
Visual Aids, and then click Frame
Borders.
Dreamweaver creates a heavy
outline around the edges of the
document window
Position the cursor over one of the
borders until it turns into a
double-headed arrow, and then drag to
create a new frame
Continue dragging from the
vertical or horizontal border until
you have the frames you want
TIMESAVER Hold down Alt
(Win) or Option (Mac) while you
drag an existing frame border to
create a new frame instead of
4
3
2
1
5
4
3
2
3
Trang 6After you create a frame, you can specify the content you want to appear in it You can insert new content in a frame the same way you insert other content, such as text or images, into a Web page or open
an existing HTML Web page in a frame If you consistently use the same Web page in a frame, you can make the page the default docu-ment when the frameset appears in a browser
Opening a Web Page
in a Frame
Open an Existing Web Page
in a Frame
Open the Web page with frames
you want to modify, and then click
to place the insertion point in the
frame where you want to insert a
Web page
Click the File menu, and then click
Open in Frame.
TIMESAVER Press Ctrl+Shift+
O (Win) or A+Shift+O (Mac)
Navigate to the drive and folder
location where you want to open
the Web page
Click the Files of Type list arrow
(Win) or popup (Mac), and then
select the type of file you want to
open
Select the page you want to open
from the page list in the working
folder, or type the URL of the page
you want
Click OK.
6
5
4
3
2
1
2
File opened in
a frame
1
4
3
5 6