Download Creating the frame definition file

HTML
Concepts and Techniques
Fifth Edition
Chapter 6
Using Frames
in a Web Site
Chapter Objectives
• Define terms related to frames
• Describe the steps used to design a frame
structure
• Plan and lay out a frameset
• Create a frame definition file that defines three
frames
• Use the <frameset> tag
Chapter 6: Using Frames in a Web Site
2
Chapter Objectives
•
•
•
•
•
•
•
Use the <frame> tag
Change frame scrolling options
Name a frame content target
Identify Web pages to display at startup
Set frame rows and columns
Create a navigation menu page with text links
Create a home page
Chapter 6: Using Frames in a Web Site
3
Preparation
• Create a Ch 6 folder in your HTML directory
• Copy all the stuff from P:\HTML
Stuff\Chapter06\ChapterFiles into your Ch 6
folder
• DO NOT MOVE THE ENTIRE FOLDER…just
copy and paste all the files within it to yours!
• Read Project on pg. 260
Chapter 6: Using Frames in a Web Site
4
Creating a Frame Definition File
• When frames are used, browser actually contains
multiple web pages or image files.
• A frame definition file defines the layout of the
frames in a Web site and specifies the Web page
contents of each frame.
• A frameset is used to define the layout of the
frames that are displayed. Think of it as a
window with various panes. Within each pane is
a separate web page.
Chapter 6: Using Frames in a Web Site
5
Creating a Frame Definition File
First step is to create a frame definition file. This gets loaded as
soon as a visitor enters your website. It is used to define the pages
that will be loaded initially and when various components are clicked
on.
Chapter 6: Using Frames in a Web Site
6
Frame Tag Attributes
Src – used to define which web page will be displayed at startup.
Name – used to give that frame a target name so you can use it to display
different web pages.
Pg. 264 - example
Chapter 6: Using Frames in a Web Site
7
Frameset
• Within the <frameset> tag, you specify the
number of columns and rows in the display area
• Look at the example on pg. 265
– A) has two rows
– B) has two columns
• Look at the bottom of page 265 and top of pg.
266 to see the frame definition file used to create
these.
• Check out the code on pg. 266 to see another
example of frameset attributes.
Chapter 6: Using Frames in a Web Site
8
Frameset attributes - continued
• You can turn borders on/off and also set the
margins in # of pixels.
• Look at this same frame on pg. 267 where
margins have been set to 40 pixels. See the
space created around each ‘window pane’.
• Scrolling – if you set this to ‘no’, the user CAN
NOT scroll the window. Look at the example on
pg. 268. It is ON by default, you will have to turn
it off if you desire.
• Noresize – if used, the user can’t resize the
frames. Example on pg. 269.
Chapter 6: Using Frames in a Web Site
9
Creating the frame definition file
• Like tables, it is a good idea to sketch out what
you want, so that when you start writing your
code, it works!
• You will need a navigation menu – this is most
often found on the left side of the website.
• Effectively place the main target frame… this is
the usually the only one that changes. Make sure
this frame is large enough to contain the content
and convenient enough for the visitor to see
where it is.
• Look at the examples on pg. 271-272.
Chapter 6: Using Frames in a Web Site
10
Writing the code for the frame definition
• This is completely different from anything you’ve
done before.
• DOCTYPE statement is DIFFERENT than before.
Instead of the transitional document type, you will
use the frameset document type.
• Match and nest your <frameset> </frameset>
tags correctly. Can be tricky
• Develop the pages that go in each frame.
• Name the target frames so you can use this
name when you create links in the navigation
pane.
Chapter 6: Using Frames in a Web Site
11
Entering Initial HTML Tags to Define
the Web Page Structure
• Do page 273 and enter the code for the frame definition
file.
• Save the file as framedef.html
• Validate the file to make sure there are NO errors.
• When I did this I got 1 error about no closing </html> tag
that was indeed there…
• It may do this because there are no <body></body> tags
in a frame definition file.
Chapter 6: Using Frames in a Web Site
12
Defining Columns and Rows
in the Frameset
• You can define however many columns and rows
you’d like.
• Look at the bottom of pg. 274 and you can see
the code to produce 3 columns.
• You can specify the columns as a percentage of
the total screen size, as a number of pixels, or
with an *.
• Using the percentage allows the browser window
to change as it is resized. In pixels, it cannot.
• A * is used to simply divide it into equal parts.
Chapter 6: Using Frames in a Web Site
13
Defining Columns and Rows
in the Frameset
• We will use 2 frames for this page. One is the navigation
pane, the other is the main window where the content
changes.
• The menu will remain constant as the main window
changes.
• We have to assign target names to know where to display
the changed web pages.
• Turn borders off.
• Do page 275-277. Validate the code.
• When you finish, your code will look like pg. 278. (next
slide)
• Displaying this in a browser will show NOTHING!
Chapter 6: Using Frames in a Web Site
14
Saving, Validating, and Printing the
HTML File
Chapter 6: Using Frames in a Web Site
15
Creating the menu.html file
• Do pg. 280-282. (Make sure you use the already
validated version of the DOCTYPE statement.
Here you will use the one you’ve been using.
You only used a different one in the frame
definition file.)
• Save this file as menu.html (After all, this is what
you defined in your frame definition file!)
• This creates the navigation side of the frame.
• Notice that you will use the target attribute that
tells the href document where to appear if that
link is clicked.
Chapter 6: Using Frames in a Web Site
16
Creating home.html
•
•
•
•
Do pgs. 283-285.
Save this file as home.html
Validate this file also.
To test this, you have to open framedef.html in the
browser to make sure it is all displayed properly.
• The other web pages are already created, i.e. necklaces,
watches, bracelets, and order form.
• ALL links should work.
• When they do, show this to me.
Chapter 6: Using Frames in a Web Site
17
Viewing the Frame Definition File
Using a Browser
Chapter 6: Using Frames in a Web Site
18
Testing and Printing the Links
Chapter 6: Using Frames in a Web Site
19
What am I to do now? You ask….
• NO homework!
• For a lab for this chapter –
– In the Lab: Lab2 – Bright Idea, LLC Web site
• FOLLOW the directions EXACTLY….make sure
you name the files as requested.
• We’ll work on this today and in class Thursday. If
you don’t get it finished by then, you can turn it in
to me after Thanksgiving.
• This will be the last chapter we cover. Your final
exam will cover Ch. 5-6. There will be questions
and a hands-on component.
Chapter 6: Using Frames in a Web Site
20