Goodies to Go (tm)
May 5, 2003-- Newsletter #231

By Vince Barnes



Goodies to Go (tm)
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.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date