<font face=Arial size=2 color=black> <!-- Mom updates the text after this -->
We have had so much fun making this site for you! <br><br>The kids sit by the computer and watch Dad and I <br>make edits. They’ve always got creative design
suggestions...
<br>We’ve either got the next premiere commercial artist or <br>Web Master on our hands, maybe one of each. <br><br>When news occurs that I want to share with you, I’ll <br>post that news right here. Stay tuned!
<!-- Mom’s text updates stop here --> </font>
</td>
</tr>
The length of Mom’s page is not as critical as the length of the home page. Home pages should fit inside the user’s browser screen and load fast. However, once a user clicks to another page on the site, the user is digging deeper and will not mind waiting a little longer for the page to load and will not mind reading more text that requires some scrolling.
Making Dad’s Corner
Figure 25-2 shows Dad’s web page. Dad wants his page to be shorter snippets of his own worldly words of wisdom (Dad’s version of the WWW!). Therefore, Dad uses a list to format his page’s text, but the format of the content is identical to that of Mom’s.
To create Dad’s page, make a copy of Mom’s page and change the <title> tag and comments appropriately. Then insert Dad’s graphic image (named Dad.jpg), change the title to the right of the image, and add the list in the bottom table cell. Listing 25-8 shows the content area of Dad’s table. This text’s CD-ROM contains the entire HTML listing, as it does all listings in the book, but the code other than the content, title, and comments is identical to Mom’s Web page.
Listing 25-8 |
Continued |
</td> |
|
</tr> |
|
<!-- The final row spans both columns and falls vertically as long as Dad has items for his lists -->
<td width=2000 height=80 bgcolor=white valign=top align=left colspan=2>
<font face=Arial size=2 color=black> <!-- Dad updates the text after this --> <ul>
<li>In Italy, don’t look for plates of spaghetti and meatballs-they don’t serve it.
<li>Dad’s don’t make great little league coaches for girl’s softball
<li>Last week, I bought 100 shares of WebEnvisions. It went up $8 per share that day.
<li>Today, WebEnvisions dropped $12 per share. Don’t buy WebEnvisions!
<li>A company named IDG publishes g-r-e-a-t computer books. <li>Businesses should put their phone numbers on their outside signs more than they do.
<br>People with cell phones in their cars would inquire more.
</ul>
<!-- Dad’s text updates stop here --> </font>
</td>
</tr>
REVIEW
Add linked pages to your home page to complete your site.
You’ll reuse HTML code as you create your site’s pages.
A general and consistent Web site design makes the creation of secondary pages simple.
Session 25—Creating and Connecting the Web Site’s Pages |
347 |
QUIZ YOURSELF
1.True or False: Embedded meta tags help get your site noticed by search engines. (See “Getting the Barkleys’ Site Noticed by Search Engines.”)
2.What is the advantage of allowing the home page to reload when users click the logo rather than letting the logo be a dead link, in which case, when users click it, nothing happens? (See “Turning the Logo Into a Hyperlink.”)
3.Describe three ways to render thumbnail pictures into their larger pictures. (See “Linking the Thumbnails to Larger Images.”)
4.Why should you keep from opening a new window when the user clicks a link on your page, such as a thumbnail’s larger image? (See “Linking the Thumbnails to Larger Images.”)
5.Why would you want to keep the same meta tags throughout your site? (See “Making Mom’s Corner.”)
6.Where can you find HTML code to use as the starting point for secondary pages on your site? (See “Making Mom’s Corner.”)
Morning Sunday—V Part
25 Session
S E S S I O N
26
Adding Special Elements
to the Web Site
Session Checklist
Optimize the placement of graphics on the Barkley Family Picture page
Create the Barkley Family Picture page and the pictures
Create the Barkley Kids’ page with frames, drawings, and sound
In this session, you will create two new Barkley Family Web pages: the Family Picture page and the Kid’s Playground page. As you create these pages, you will apply some of the tools covered in the previous sessions for adding special
elements. This section focuses on handling graphics-intensive Web pages and adding frames and sound. The next session will cover additional special elements.
Deciding How to Place Pictures on the Family Web Pages
In a graphics-intensive page, such as the Kid’s Playground page, you must consider how to present the graphics so that your audience enjoys the pictures while not thinking too much about the load time. The Kid’s Playground page is linked from the home page site, so the load time is not as critical as on the home page; users
have specifically requested the Kid’s Playground page and will wait for the page to load. Nevertheless, you need to present the graphics in a manner that is pleasing.
Even though your users show they are more hooked when they request a secondary page than they do by just visiting the home page, you should still consider how long your user must wait when visiting a graphics-intensive page. When putting pictures on a site, you must decide on one or more of the following options:
Use thumbnails that link to larger images such as those that appear on the Barkley Web home page (see Session 10 for thumbnail information).
Use a low-resolution set of pictures that the user can view with the option of viewing a higher-resolution set of the same pictures (see Session 8 for graphics placement information).
Use interlaced images that appear quickly but blurry and then slowly get crisper as more of the image loads (some graphics programs can convert regular images to interlaced images that load as described here).
Use the lowsrc= attribute when you place graphics on a Web page; this attribute can quickly load a low-resolution version of the image while the browser loads the higher-resolution version in the background. When the background image finishes loading, the browser replaces the lower-resolution image with the higher-resolution image. The load time increases, but the user doesn’t notice it because the pictures can be viewed immediately (see Session 15 for resolution information).
The Barkleys have decided not to put too many pictures on their Family Picture page at any one time. If they happen to have several photos to show, as may happen at a successful birthday party, they will create a twoor three-page set of pictures that the user can click to with a Next hyperlink placed on the page. Keeping only three or four photos on the page, and replacing those regularly with fresh pictures, enables the Barkleys to keep their Web site’s HTML simple to maintain.
The Barkleys did use frames for this particular page just to keep the special children’s heading on the screen no matter what the user does to scroll the page. The pictures are clear and large for easy viewing. For a family Web site, that is probably an appropriate decision. If you develop a site for a more professional audience, however, you will have to give weight to each of the options just mentioned.
Before tackling the specific HTML code that’s left on the page, consider how you would lay out the pictures on the page. Figure 26-1 shows one of the most obvious ways to lay out pictures. Just place the pictures in table cells, one per cell with a caption below each picture. With this method, the pictures fill the page. Don’t worry about the user having to scroll to see all the photos, because on a page such as this, the user expects to scroll.
Figure 26-1
The pictures fill the page.
Listing 26-2 shows the code needed to produce Figure 26-1. (The code for the header and navigation bar is not shown.) The code is simple, using simple <img> tags (that were introduced in Session 8) to display the pictures in four table cells, each with a caption. The pictures all use alt= attributes so that the pop-up descriptions appear in the user’s browser even when the images do not.
Listing 26-2
Creating the photos, captions, and pop-up descriptions
<td width=315 bgcolor=white valign=top align=left>
<img src=images\thegirls.jpg valign=top align=left width=266 height=230
