Thursday, March 28, 2024

Goodies to Go ™
May 5, 2003– Newsletter #231


Goodies to Go ™
May 5, 2003–Newsletter #231

This newsletter is part of the internet.com network.
http://www.internet.com
 


Featured this week:

* Goodies Thoughts Including Easy
Maintenance
* Q & A Goodies
* News Goodies
* Goodies Peer Reviews

* Feedback Goodies  
* And Remember This

 


 

Goodies Announcement

Just in case you missed
it before, the new Beyond HTML Goodies book is now available!

 

Go beyond the basics
and learn how the pros add and use dynamic HTML features and advanced
JavaScript techniques. Beyond HTML Goodies demonstrates dozens of new and
different features readers can add to their existing Web pages using HTML and
JavaScript. The book starts with simple text and image tips, such as adding a
clock to a Web page or causing text to appear when the mouse moves over an
image. It gradually builds to more complex tricks, including manipulating forms
or working with cookies behind the scenes. Throughout the book, readers enjoy
Joe’s snappy style and “to the point” discussion of each “goody” in the book.

 

http://books.internet.com/books/0789727803

 

 


Goodies Thoughts
Including Easy
Maintenance




In last week’s newsletter we built a menu for a site that used the
window.setTimeout() JavaScript function to invoke code that enables the menu to
maintain its position in the viewable window, even as the page is scrolled up
and down (see http://www.htmlgoodies.com/letters). This is a very useful aid to
usability in a site, but may present a maintenance nightmare if it was featured
in each page on the site, and had to be changed on every page whenever the
navigation links within the site need to change. There is, of course, a way
around the problem. In fact, there are several, but this week I present a method
that uses "Server Side Includes" to hold the page headings, menu navigation bar
and page footings in individual files that are "included" in each page in the
site.

For the purposes of illustration, I have set up an example in the Upper
Lowerbury website (those readers who have been here a while will remember that
site, no doubt!). I have also put a copy of the individual pages at the bottom
of this newsletter (see "Goodies Footnotes", below) so that you can easily refer
to them. Viewing the source of the resulting page on the site doesn’t show you
where the breaks occur, nor does it show you the "include" instructions. These
copies show all. The address of the example is
http://www.upperlowerbury.com/menusample.asp

To use Server Side Includes (SSI), they must be enabled on the server that is
hosting the site. Most servers these days are configured to allow SSI, but if
you have any doubt, check with your service provider. If the server is running
Unix (or Linux or similar) with SSI enabled, any page can have an include
instruction. On a Windows system (NT, XP, 2000, 2003) includes are handled by
the ASP preprocessor (asp.dll). By default, the ASP preprocessor is invoked
every time the server delivers a page with a ".asp" extension. It will therefore
be necessary to name pages that have an include instruction with this extension.
In my illustration, which I have placed on a Windows 2000 server, I have named
all the pages this way including the "included" pages. This is for the sake of
my ease. It is only essential that pages which actually have the "include"
instruction follow this naming convention.

The format for an include instruction is as follows:
<!–#include virtual="/ssi/head.asp" –>
Enclosed in the quotes is the pathname and filename of the file to be included.
For good housekeeping purposes, I like to keep my "include"d pages in their own
directory, named here "ssi".

To accomplish our desired end, we first need three files, on each for the
Headings, Navigation and Footers. These three parts will then be "included" into
each page of the site. These are the files "head.asp", "nav.asp" and "foot.asp".

The header file contains all the page style information, the JavaScripts and
<body> tag parameters we discussed last week, and the page header that is to
appear on each page. All this information is in this file alone, so changing it
once, right here, will affect every page in the site that uses this "include"d
file. I have added comments in the code to make it easy to tell where each
section of the resulting page (as seen, for example, with "View Source") came
from. This is a good idea for making life easier in the future!

The navigation file holds the menu, as we built it last week. It then starts a
table definition which includes a cell to create space for the menu (see last
week’s discussion) and then begins a cell which will contain the main body of
the page. Remember, this file will be "include"d in each page in the site, and
so the cell start will precede the content in that page.

The footer file holds the close of the main body table cell and row. In my
example, it then provides another table row that holds copyright information.
This information will now also appear in every page in the site that "include"s
this footer file.

The sample page I have provided illustrates the use of the "include" statements.
Notice that the content in this file doesn’t care that it is contained within a
table cell (the one started in the navigation file and ended in the footer
file.) In this page file we can lay out page elements however we want them. The
table that contains them will be wrapped around them when the page in rendered
to the site visitor. In my example, I have placed a bunch of paragraphs
containing the letter "a" so that the page will be long enough to show off the
place holding capability of the navigation menu.

At first, this example may seem to be a bit complicated, but if you look at the
various components, and at the resulting pages on the site, you should be able
to follow it easily enough. Once you get the hang of it, you will have mastered
a quite sophisticated technique for easy web site maintenance. By the way, there
is another example of a website that is constructed in this way. It is http://www.htmlgoodies.com
— check it out!
 




Thanks for Reading!
– Vince Barnes


 

Top

Q & A Goodies


Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to

http://www.htmlgoodies.com/mentors
.



Q. I’m making a web page and for the menu I’m using a (menu.js) file to
be included into the page through javascript. However, this is not
working. I don’t know why because I’ve got it to work before. I’ve tested it on
geocities.com and also offline on my web browser.
(Another question, could the include file be in the form menu.txt or must it be
.js?)
Here’s the code:———-
menu.js
————
document.write("<ol>
<li><a href="i.intro.html">Introduction</a></li>
<li>Functions of the Nervous System</li>
<li>Components of the Nervous System</li>
<li>Comparison Between Humans and Other Organisms</li>
<li>Diseases that Affect the Nervous System</li>
<li>Interaction of the Nervous System with Other Body Systems</li>
<li>Conclusion</li>
<li>Bibliography</li>
<li>Glossary</li></ol>
<h2>Links According to Component</h2>
<ol><li>Neurons</li>
<li>Central Nervous System</li>
<li>Peripheral NervousSystem</li>
<li>Senses</li>
<ul><li>Sight</li><li>Hearing</li>
<li>Smell</li><li>Taste</li>
<li>Touch</li></ul></ol>");
————
i.intro.html
————
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="author" content="Jeffrey Bridgman">
<meta http-equiv="content-type" content="text/html;
charset=shift_jis"<meta http-equiv="content-style-type"
content="text/css"<meta name="robots" content="none"<link
href="bio.css" type="text/css" rel="stylesheet"<title>The Nervous
System</title</head>
<body>
<script language="javascript" type="text/javascript"
src="include/menu.js"></script>
<p class="bnav">&lt; Home | Next &gt;</p>
</body>
</html>

A. I believe the problem is with the link you have in the document.write()
statement. You cannot have double quotes within double quotes. Change those to
single quotes and see if that works. Like this:
<a href=’i.intro.html’>

 

Q. I was curious about shopping carts and wondering what type programming
was need to created these.

A.
Shopping carts are written in different languages and use different
technologies. You server type will determine what you can use and cannot use. I
use Active Server Pages(ASP) and for that I need to host on a Windows server. A
UNIX server will support PERL and PHP. There are JavaScript carts but I have
never used them. The shopping cart features will tell you if it updates the
product amount.

Q. I’m having trouble understanding how to get an image map to work like
a frame page. I want my map in one place, but the links to come up in another
frame.

A. It sounds as if you are not using the "target" correctly. If you have
two frames, one on the left and one on the right and you have the navigation in
the left frame. When you click on a link in the left, you want the page to open
in the right frame. If the name of the right frame is "right" then in the
hyperlink tag you have to have target="right"
<a href="some_page.htm target="right">Click Here</a>
That should do it. Change the target name to the frame name that you have
designated in your own frames.
[Exactly the same appies to the href’s in your maps. Note that if you create the
map with a graphics program like Painshop, however, you might have to add the "target"s
manually, after the mapis created. Ed.]

 

Q. My site uses 3 frames, heading, links and the third is the body, which
is the only thing that changes as you move through different parts of the site.
I’m using css for fonts, colors and background images on the site. I would like
to use a watermark logo, but I do not want to show it in the heading or links
frames, only the body. Is there some way to override the background image in the
css file in my heading and links frame so it remains as just a white background?

A. Put a class="withbg" in the body tag of your BODY.
Put the background declaration in body.withbg {background-image….}

 

Q. When clicking on a selection, it opens the new page in a new window.
How do I get the script to open the page in the same window?

A. If you remove the target="_blank" in each link it will open the
document in the same page.

 

 

 

 

Top

News Goodies


Sun CEO: Thin is In (with VoIP)
[May 5, 2003] Scott McNealy looks at extending his Sun Ray vision to be
able to access his phone and office data at home and abroad
using standard network configurations.

Click
here to read the article

 

USAi Gets Into Finance Business
[May 5, 2003] LendingTree to become another branch of the quickly expanding
USA Interactive.

Click
here to read the article

 




Microsoft Shows Off Longhorn’s Guts at WinHEC
[May 5, 2003] Attendees of Microsoft’s Windows Hardware Engineering (WinHEC)
trade show will get a chance to explore the forthcoming Windows ‘Longhorn’
operating system’s drivers, audio/video architecture and display
architecture.

Click here to read the article

 

 

 

RealNetworks Gets Behind Mobile Media Services
[May 5, 2003] Real lines up carriers, content providers; analyst still
bullish on online media subscription market.

Click here to read the article

 

 



Survey: IT Job Growth to Remain Soft
[May 5, 2003] With hiring predictions for 2003 falling below half a
million, demand for workers at historic lows.

Click here to read the article

 



 

European Businesses Favor Mature Technologies
[May 5, 2003] Despite difference with early adapting American corporations,
both regions have similar top line growth rates.

Click here to read the article

 

 

Hitwise Launches U.S. Online Measurement Service
[May 5, 2003] The Australian company arrives in the U.S. market, promising
more in-depth reports on Web use for small-and medium-sized businesses.

Click here to read the article

 

 

Startup Writes Language to Replace .NET, Java Products
[May 2, 2003] Clear Methods is looking to tackle areas of the market its
says the giant vendors can’t — on-the-fly Web services operations for
embedded systems. Oh, and theoretically, its software could replace .NET and
Java products in some circles.

Click here to read the article

 

 

Big Apple Considers Taking Bite from Open Source
[May 1, 2003] New York City is quietly conducting its own
fact-finding study on the merits of open source.

Click here to read the article

 

 

 

Sony Tags BREW for Content
[April 30, 2003] The company’s music division is the first to use
BREW to go beyond ringtones and offer users songs and games.

Click here to read the article

 

 

 

 

Top


Goodies Peer Reviews


 

Every week a site selected each week for review. Each week,
reviews of the previous week’s selected site are chosen for
publication on the HTML Goodies website.

 

The current week’s selected site is published in Goodies To
Go and in the Peer Reviews section of the website. 
Current contact email addresses for submitting your site and
for submitting reviews are published in Goodies To Go.

If you would like to have your site reviewed, sign up for
the Goodies To Go newsletter in the Navigation Bar on the
left side of this page. 

For full details about this program, see

http://www.htmlgoodies.com/peerreviews

 

 

 

Top

Feedback
Goodies


Did you ever wish your newsletter was an easy two way communications medium?
Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on something
you have seen in here, you can now send your input to:

mailto:nlfeedback@htmlgoodies.com

We already receive a lot of email every day. This address will help us sort out
those relating specifically to this newsletter from all the rest. When you send
email to this address it may wind up being included in this section of the
newsletter, to be shared with your fellow readers.
Please don’t send your questions to this address.
They should be sent to our mentors: see
http://www.htmlgoodies.com/mentors/

My apologies to those who tried to access the Peer Reviews
this past week and couldn’t. By the time you get to read
this, the problems should be straightened out.

Jason Morris expressed concern that last week’s newsletter
contained too much in the way of examples that he had to
scroll through. I hope you like this week’s format, Jason,
where I have moved the bulky code pieces to the "Goodie
Footnotes" section that I added at the bottom of the letter.

Once again, thank you to all who sent in kind, encouraging
words. It makes me feel great to know how much you
appreciate these efforts!

 

Top
And Remember This . . .

On this day in…

1862 Victory at Puebla!
In the French-Mexican war a greatly outnumbered rag-tag
group of 2000 Mexicans defeated a force of 6000 French army
soldiers led by General Charles Latrille de Lorencez. The
French General, convinced that he would have a swift
victory, set out to attack the small town of Puebla de Los
Angeles in east-central Mexico. General Ignacio Zaragoza and
his loyal group of 2000 fortified the town and prepared for
the assault. The battle started at dawn and lasted to dusk.
The French, despite having superior arms, including heavy
artillery, lost 500 men to the Mexicans’ 100. The success
convinced the Mexicans that they could successfully resist
the much stronger foreign forces, and though it took them
another six years they did indeed succeed in gaining their
freedom and independence. Today, Mexicans celebrate the
anniversary of the Battle of Puebla as Cinco de Mayo, a
national holiday in Mexico.

Born today were: in 1818: Karl Marx (Author, "The
Socialist Manifesto", "Das Kapital"); 1914: actor
Tyrone Power; 1942 singer Tammy Wynette; 1943
actor, comedian Michael Palin
 

 

 


Goodies Footnotes


 

The following are the pages used in the example for "Goodies
Thoughts", above. Please see the note under "Q&A Goodies,
above, about our use of "<.".

This is the heading file, head.asp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Duwey, Cheetam & Howe, P.L.</title>
<STYLE TYPE="text/css">
BODY {background-image: url(‘../images/BGH.jpg’);
background-repeat: repeat-y }
</STYLE>
<style type="text/css" media="screen">
p { color:"#000080"; font-family: "Verdana, Arial,
Helvetica"; font-size:"80%"}
h1 { font-size: 100%; font-family: verdana, arial, helvetica;
font-weight: bold; margin-top: 0em;}
p.indent { margin-left: 3em; margin-top: .5em; line-height:
1.25em; margin-bottom: .2em; margin-right: 1em;}
.button {
FONT-FAMILY: Verdana, Helvetica, Arial, San-Serif;
font-weight:normal;
font-size:70%;
color:#000000;
background-color:#ffffff;
border-color:#6699ff;
margin-top:6pt;
margin-left: .5em;
}
.topspace {margin-top: .08em; }
A:link, A:active { text-decoration : none; color : #0000ff;
background : transparent; }
A:visited { text-decoration : none; color : #0000ff;
background : transparent; }
</style>
<style fprolloverstyle>A:hover {color: red;}</style>

<SCRIPT LANGUAGE="JavaScript">
function setVariables()
{
if (navigator.appName == "Netscape")
{
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else {
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}
}
function checkLocation()
{
object="object1";
yy=eval(y);
eval(dS+object+sD+v+yy);
setTimeout("checkLocation()",10);
}
</script>

</head>

<BODY OnLoad="setVariables();checkLocation()">

<!– Start Page Heading –>

<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="100%" id="AutoNumber1" height="100">
<tr>
<td width="130">&nbsp;</td>
<td>
<p align="center"><b><font size="6">D</font><font size="5">uwey,
</font>
<font size="6">C</font><font size="5">heetam &amp;
</font><font size="6">H</font><font size="5">owe,
P.L.</font><font color="#000080"><font size="6"><br>
A</font><font size="5">TTORNEYS AT </font><font
size="6">L</font><font size="5">AW<br>
</font></font><font face="Times New Roman">LAWYERS WITH A
REPUTATION</font></b></td>
</tr>
</table>

<!– Vertical Spacing –>

<p>&nbsp;</p>

<!– End Vertical Spacing –>

<!– End Page Heading –>

<!– End Head, Start Body/Nav –>

This is the navigation file, nav.asp:
<!– Nav Begin –>

<div id="object1" style="position:absolute; visibility:show;
left:0px; top:0px; z-index:2">

<table width=130 border=0 cellspacing=10 cellpadding=0>
<tr><td>&nbsp;</td></tr>
<tr><td><a target="_top" href="../MenuSample.asp">Home
Page</a></td></tr>
<tr><td><a href="../MenuSample2.asp" >Page 2</a></td></tr>
<tr><td><a href="../MenuSample3.asp" >Page 3</a></td></tr>

</table>
</div>

<!– End Nav –>

<!– Main Body Begin –>

<table width="100%">
<!– Body Row –>
<tr>
<!– Spacer Cell –>
<td width=130><font color="white"> </font></td>
<!– Body Cell –>
<td>

This is the footer file, foot.asp:
<!– End Body Cell/Row –>

</td></tr>

<!– Footer Row –>
<tr>
<!– Spacer Cell –>
<td width=130><font color="white"> </font></td>
<!– Footer Cell –>
<td align="center">
<p><br><br><font color="#C0C0C0" size="1">Copyright &copy;
2003<br>
Duwey, Cheetam &amp; Howe, P.L.<br>
All Rights Reserved</font></p>

<!– End Footer Cell/Row –>
</td></tr>

<!– End Page –>
</table>
</body>
</html>

This is one of the actual pages from the site, as seen by
the site visitor (the others used in the illustration are
copies of this page). This page contains the "include"
instructions:
<!–#include virtual="/ssi/head.asp" –>
<!–#include virtual="/ssi/nav.asp" –>
<p>
The rest of your site goes here<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<!–#include virtual="/ssi/foot.asp" –>

 

 




Thanks for reading Goodies to Go!


 



Archive Home Page.


Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured