Creating the Kids’ Page with Frames, Graphics, and Sound
Web sites need consistency. But too much consistency, especially on a family Web site, can get to be too stuffy. Just to vary things some, the children’s page, referred to as the Kid’s Playground in the navigation bar, will look different from the rest of the site. The Kid’s Playground will consist of a frame-based Web page with a background image, chimes that play when the page first opens, and drawings.
Creating the frames
The frame may not be the most appropriate Web page design in most cases, but adding a frame across the top of the children’s page allows visitors to scroll down to see the children’s drawings without losing the top window. Therefore, users will be able to return to the home page quickly and at any time no matter how far down the page they scroll.
The use of the two-frame page will give you some hands-on practice with frames. Figure 26-2 shows the completed page that you will now code in HTML. Note how it is dramatically different from the others. The header does not contrast well against its background, and the page is less structured compared to the previous pages that were created, but the kids like it. Your Web site’s client may not always be correct, but you must ultimately make the client happy when you design Web sites.
As you know from Session 18, frames require more than one Web page because the frameset defines the frame, and each window inside a framed area requires its own Web page. The Barkley children’s frameset page defines two frames. Listing 26-3 shows the code. As usual, the HTML code begins with comments and meta tags.
Listing 26-3
Creating the children’s frameset Web page with two frames
<html>
<!------------------------------------------ |
|
> |
<!-- |
Kid’s Playground Page |
--> |
<!-- |
Linked to www.BarkleyFamilyPage.com |
--> |
<!-- |
Created: June 12, 2003 |
--> |
<!-- |
Last modified: June 14, 2003 |
--> |
Figure 26-2
The kids’ page uses a frame and less structure than the other pages.
Creating the header frame, sound, and drawings
The next step is to create the header frame, sound, and drawings. The header frame contains three graphics:
The background image
The title created as graphic text
The link box graphic that takes the user back to the Barkley home page
All three graphic images reside on this book’s CD-ROM.
Cross-Ref
The Barkley children want a little more pizzazz for their visitors, so they have requested that a chime play welcoming the user. Therefore, their Web site will play a WAV file that chimes when the user views the page. Session 19 described how to
Finally, the kids’ drawings consume the lower window. Scroll bars appear if too many drawings reside on the page and will not all fit at once. The frame ensures that the header remains on the screen at all times while the body frame scrolls. Listing 26-5 contains the code for the drawings that use <img> tags to place the images on the page.
Listing 26-5
Creating the kids’ drawings
<html>
<!-- Body frame for the kids’ page --> <head>
</head>
<body>
<!-- Annie has two pictures side-by-side -->
<p><img border=0 src=”images\kid1.gif” width=123 height=148> <img border=0 src=”images\kid2.gif” width=141 height=148>
<img border=0 src=”images\Kid3.jpg” width=331 height=414> </p>
<p>
<font face=Arial size=5>Annie’s animals and Rachel’s Blue-Ribbon Painting!
</font>
</p>
</body>
</html>
REVIEW
Use frames if you want to ensure the heading stays on the page at all times.
Use caution when creating pages with many graphics so as not to make your Web page too busy.
Place sounds on your page that play when the user views the page to make the site fun.
Session 26—Adding Special Elements to the Web Site |
359 |
QUIZ YOURSELF
1.What are four common methods you can use to present graphic images on your Web page? (See “Deciding How to Place Pictures on the Family Web Pages.”)
2.True or False: Using the lowsec= attribute speeds up a page’s load time. (See “Deciding How to Place Pictures on the Family Web Pages.”)
3.How can you be sure that a description will appear even if the user has graphics turned off? (See “Creating the Family Picture Page with Graphics.”)
4.What tag enables you to start a WAV sound file as soon as the user loads the page? (See “Creating the Header Frame, Sound, and Drawings.”)
5.How does a scroll bar keep the header on a framed page? (See “Creating the Header Frame, Sound, and Drawings.”)
Morning Sunday—V Part
26 Session
S E S S I O N
27
Adding Other Special
Elements to the Web Site
Session Checklist
Create the Barkleys’ Favorite Movies page
Add a form to the Favorite Movies page
Create an image map for the Barkleys’ Family Travels page
In this session, you will create the Barkley Family Movies page and then add a new special element to it: a form. The Barkleys want their friends and family to rate movies on the form, which the Barkleys will use to update their movie
review page. This session will also show how to add another special element, an image map, to the Barkleys’ Family Travels page. This session provides only a simple overview of image maps, since image maps bring with them problems
as well as solutions.
Creating the Favorite Movies Page
Figure 27-1 shows the top of the Barkleys’ Favorite Movies page. The page is straightforward, reusing the header and navigation bar used on the Barkleys’ other Web pages. The first two rows of the bottom table contain the bulk of the movie
review content. The middle cell (the left cell holding the navigation bar) holds the camera image, and horizontal lines created with <hr> tags separate these cell rows.
Figure 27-1
The complete Favorite Movies page is now easy to create.
As with the other Barkley Web pages, the movie page contains the standard comments and meta tags. Listing 27-1 shows the middle portion of the HTML code for the navigation bar and content. It does not show the introductory comments, meta tags, and header HTML that you’ve already seen in the previous two sessions. The listing contains the HTML down to the end of the ratings page section. The listing is lengthy, but nothing new exists in it.
Listing 27-1
Creating the navigation bar and content area of the Favorite Movies page
<body bgcolor=009900 link=white>
<!-------------------------- |
> |
<!-- The body begins here -- |
> |
<!-------------------------- |
> |
<img border=0 src=”Movie.gif” width=88 height=81>
</font>
</p>
</td>
<!-- Right side of We Love Movies Row -->
<td width=1113 height=1 bgcolor=white valign=top align=left colspan=2>
<p align=left>
<font face=Arial size=2 color=black> <br> </font>
<font color=”#000000” face=Arial>On this page,
we’ll review the movies we enjoy so much. Each of us<br> ranks the week’s movie. We’ll then give you our official
Barkley <br>
Family Rating! You can trust us, we’re pros! <p align=left>
If you want to add input,
tell us what you thought about the movie<br> by filling out the form.</font>
</td>
</tr>
<!-- The week’s Movie description row -->
<td width=170 height=98 bgcolor=#FFFFFF valign=top align=right> <hr>
<p align=center>
<b><font face=Arial size=3 color=#CC9900> This week’s flick:
</font></b>
<font color=#009900><b> <font face=Arial size=4> <i>Saving the Moon</i> </b> </font></font></p> </td>
