HTML Web Magic, Second Edition

HTML Web Magic, Second Edition

by Raymond Pirouz, Ardith Ibanez

Paperback(REVISED)

$39.99

Product Details

ISBN-13: 9781568304755
Publisher: New Riders
Publication date: 07/14/1998
Series: Magic Series
Edition description: REVISED
Pages: 312
Product dimensions: 6.89(w) x 9.01(h) x 0.67(d)

Read an Excerpt







HTML Web Magic, Second Edition - Creating a Slide Show with META Refresh


[Figures are not included in this sample chapter]

HTML Web Magic, Second Edition

Creating a Slide Show with META Refresh


Use this technique to:


  • Create rotating banner links. Devote a single frame (within a framed site)
    to rotating graphics that engage the viewer.



  • Automatically cycle from page to page. Let your viewers sit back and relax
    as a virtual art gallery of images is automatically presented to them.



  • Tell an animated story. Reminiscent of traditional cel-based animation,
    you can create thematically linked Web pages and cycle through them to tell a story.

Creating a Loop


The slide show effect relies on using the META Refresh function to create
a linked series of HTML pages that continuously loop from the first to last page
and then back again to the first page. This figure illustrates a series of continually
looping HTML pages powered by the META Refresh function.
To create a
looping series of HTML pages, you need a minimum of two HTML pages (no maximum number).
Say you have the following four HTML pages: index1.html index2.html index3.html
index4.html
In each of these index.html files, you need to code the
META Refresh function (remembering to keep the META tag within
the <HEAD></HEAD> tags and after the <TITLE></TITLE>
tags) as such:


<META HTTP-EQUIV="Refresh" CONTENT="numberofseconds; URL=nexturl.html"> 

To create the loop, you must rename the nexturl.html text as such for
each of the four files: index1.html --> index2.html index2.html -->
index3.html
index3.html --> index4.html index4.html --> index1.html
Notice that in the fourth HTML page (because it's the last in the series), the META
Refresh function points back to index1.html to start the loop all over again.

See the Slide Show in Action


The following example demonstrates how R35 LLC employs the slide show technique
to deliver rotating graphic banner ads in one of the three frames within its Web
site: R35 LLC site with rotating middle graphic (filename=homead1.htm).
Here is the HTML for the rotating banner page shown here:


<HTML> 
<HEAD>
<TITLE>R35</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="15;URL=homead2.htm">
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0 BGCOLOR="#333300" LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff" TEXT="#000000">
<TABLE WIDTH=500 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TD WIDTH=500 ALIGN=CENTER>
<IMG WIDTH=428 HEIGHT=51 SRC="we.gif" ALT="We develop strategic visual communication for consumers of the information age." BORDER=0>
</TD>
</TABLE>
</BODY>
</HTML>

As you can see in the this code, a META Refresh function is telling the
page to wait 15 seconds before jumping to the next URL, in this case, homead2.htm.
R35 LLC site with rotating middle graphic (filename=homead2.htm).
Here is the HTML for the rotating banner page shown here:


<HTML> 
<HEAD>
<TITLE>R35</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="15;URL=homead3.htm">
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0 BGCOLOR="#333300" LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff" TEXT="#000000">
<TABLE WIDTH=500 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TD WIDTH=500 ALIGN=CENTER>
<A HREF="direct/index3.htm" onMouseOver="window.status='check it out at R35 direct.'; return true;" target="_blank"><IMG WIDTH=225 HEIGHT=51 SRC="chere.gif" ALT="click here."
BORDER=0></A>

</TD>
</TABLE>
</BODY>
</HTML>

This code is very similar to the HTML used for the first rotating banner page,
with one exception--the graphic has changed to chere.gif and the META
Refresh target destination after 15 seconds is now homead3.htm. As you can
see, each page is brought up with a different graphic, which then leads the viewer
to the next page in the series of ads. Notice also that each graphic is linked to
a URL. If the user were to click on any one of these graphics, they would be taken
to a product page (being advertised by these rotating banner pages). R35 LLC site
with rotating middle graphic (filename=homead3.htm).
Here is the HTML
for the rotating banner page shown here:


<HTML> 
<HEAD>
<TITLE>R35</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="15;URL=homead4.htm">
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0 BGCOLOR="#333300" LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff" TEXT="#000000">
<TABLE WIDTH=500 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TD WIDTH=500 ALIGN=CENTER>
<A HREF="direct/index.html" target="_blank" onMouseOver="window.status='check out those ultimate digital design tools.'; return true;"><IMG WIDTH=334 HEIGHT=51 SRC="webpadad.gif" ALT="The R35
webColor Pad." BORDER=0></A>

</TD>
</TABLE>
</BODY>
</HTML>

As you can see here, the META Refresh function will send the viewer to
homead4.htm, which is the last ad in the series of rotating pages. R35
LLC site with rotating middle graphic (filename=homead4.htm).
Here is
the HTML for the final rotating banner page. Note how the META Refresh function
points back to the first file (homead1.htm) in the group. This creates the
"looping" effect, where the viewer is taken from page 1 to 2 to 3 to 4
and then back to 1 again:


<HTML> 
<HEAD>
<TITLE>R35</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="15;URL=homead1.htm">
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0 BGCOLOR="#333300" LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff" TEXT="#000000">
<TABLE WIDTH=500 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TD WIDTH=500 ALIGN=CENTER>
<A HREF="direct/index2.htm" target="_blank" onMouseOver="window.status='check out those ultimate digital design tools.'; return true;"><IMG WIDTH=400 HEIGHT=51 SRC="sit.gif" ALT="The Aeron
Chair." BORDER=0></A>

</TD>
</TABLE>
</BODY>
</HTML>





TIP: When designing graphic ads with the slide show technique, make sure that
your pages appear for at least 10 to 15 seconds if they contain words or animations
or if you want them to stick around long enough to get clicked. However, be sure
not to bore your audience--there's a fine line between pages that change too fast
and ones that simply D-R-A-G on--it's up to you to experiment with the timing and
determine what works best for your graphics and target audience.




Designing graphic ads can be an effective way to lead viewers deeper within your
Web site. For a quick tour of other Web sites employing similar techniques, check
out the following:


  • HotWired (http://www.hotwired.com)



  • Suck (http://www.suck.com)



  • Macromedia (http://www.macromedia.com)



Table of Contents

HTML Web Magic, Second Edition
Part I - Introduction

  • Basic Web Design Tips

    • Basics of Web Design
    • Basic HTML Coding Tips
    • HTML 4.0 Quick Reference Chart
    • A Word About JavaScript


Part II - Magic with First Impressions

  • Using the <META> Tag to Get Listed
  • Creating a Slide Show with META Refresh

    • Creating a Loop
    • See the Slide Show in Action




  • Designing a Splash Page with META Refresh

    • Using the META Refresh Function




  • Eliminate Browser Offset

    • The Invisible Border
    • Specifying Invisible Margins
    • Tinkering with JavaScript
    • Browser Offset Resources




  • Determining Your Visitor's Browser and Platform

    • Sending Browsers to Specific Pages
    • Discriminating Between Browsers
    • Determining the Platform




  • Detecting Specific Plug-ins

    • Writing the Code




  • Design an Alternate Page for Older Browsers

    • Using the <NOSCRIPT> Tag
    • Design Tips




  • Make Descriptive Links

    • Integrating Descriptive Links


Part III - Magic with Images

  • Create Colorful GIF Rules and Frames

    • Creating GIF Rules
    • Putting It Together in the Browser
    • Designing a Frame




  • Create White Space

    • Using Spacer GIFs




  • Make Images Appear Magically

    • Creating the LOWSRC Effect
    • Creating a Mini-Animation for a Splash Page




  • Animate a Portion of a Large Image

    • Sectioning the Image




  • Serve PNG Format Graphics

    • The Benefits of PNG Graphics
    • Creating PNG Files




  • Create Image Maps

    • Working with Image Mappers




  • Design JavaScript Rollovers

    • Designing the Rollover Images
    • Creating the Rollover Effect
    • Putting It All Together




  • Design Image Map Rollovers

    • Creating the Single Image Map Rollover
    • Creating the Multiple Image Map Rollover




  • Create Rollover Animations



  • Develop Multiple Rollovers

    • Writing the Code


Part IV - Magic with Tables

  • Define White Space

    • Create Your Site Skeleton
    • Labeling Your White Space
    • Placing Your Elements Within the Structure




  • Color Table Data Cells

    • Attract Your Viewer
    • Speed Up Image Loading




  • Layer Typography and Images

    • Create Layered Typography
    • Cropping Animated GIFs




  • Design Invisible Linking Cells

    • Creating Image Maps




  • Align Images and Text

    • Creating a Table




  • Create Nested Tables

    • Creating a Simple Nested Table
    • Creating Multiple Nested Tables
    • Controlling Type Placement and Flow
    • Creating a Bordered Structure




  • Resize Tables Dynamically

    • Using Percentages


Part V - Magic with Frames

  • Create a No-Frames Option

    • Creation Options
    • Forwarding Users to an Alternative Page
    • Creating the Page




  • Create a Single-Frame Site

    • Hide Your Site's Directory Structure
    • Eliminate Browser Offset




  • Force Frames

    • Avoid Getting Framed
    • Limiting Access to Framed Pages




  • Design Frames Within Frames

    • Basic Frames Layout
    • Nesting Frames




  • Create Border Graphics by Using Frames

    • Get Creative!




  • Design Frames for Navigation

    • Using a Two-Frame Structure
    • The Navigation Without Frames




  • Target Multiple Frames with JavaScript

    • Updating Multiple Frames


Part VI - Magic with Windows

  • Open Windows with HTML TARGET

    • HTML Versus JavaScript
    • Coding the HTML




  • Open and Close Windows with JavaScript

    • Open New Windows
    • Close Windows




  • Design a Launch Pad Home Page

    • New Windows on Demand
    • Auto-Loading New Windows




  • Open Remote Navigation Windows

    • Making the Remote Control Appear Automatically
    • Coding and Using the Remote Control Page


Part VII - Magic with Type

  • Specifying Fonts with HTML

    • Specifying Size
    • Specifying Fonts




  • Specifying Fonts with Cascading Style Sheets

    • Creating Styles




  • Position and Layer Type with CSS

    • Layering Typographic Elements




  • Create Nonunderlined Text Links with CSS

    • Applying Styles




  • Wrap Type Around Images

    • Typographic Layout Limitations of Conventional HTML
    • Using Tables to Enhance Layout




  • Create Lists by Using Graphics Instead of HTML Bullets

    • HTML's Restrictive <UL> and <OL> Tags
    • Creating Graphically Enhanced Lists




  • Create Structured Type by Using Columns

    • The Nonbreaking Space (&nbsp;)
    • Creating the Columns Template
    • Filling in the Columns


Part VIII - Magic with Forms

  • Incorporate Color and Graphics into Forms

    • Designing Forms




  • Align Forms with Text and Images

    • Designing Forms




  • Create a Visual Submit Button

    • Designing the Submit Button
    • Inserting the Submit Button




  • Create Wrapping Text Fields

    • Using WRAP Property




  • Design Pull-Down Menus with JavaScript

    • Define the Function
    • Create the Pull-Down Menu


Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews

HTML Web Magic, Second Edition 4 out of 5 based on 0 ratings. 1 reviews.
ThePolyBlog More than 1 year ago
BOTTOM-LINE: Great resource . PLOT OR PREMISE: Instead of going through all the bits and pieces (which it does very quickly), Pirouz instead has focused on some elements that spice up web pages. . WHAT I LIKED: A programmer wouldn't necessarily want to use all of them, but a new designer will find some really great tips and tricks here. Definitely a fun read as you can say to yourself, "ah-hah, so THAT's how they do that!". . WHAT I DIDN'T LIKE: n/a . DISCLOSURE: I received no compensation, not even a free copy, in exchange for this review. I am not personal friends with the author, nor do I follow him / her on social media.