Goodies To Go! Newsletter #373

By Vince Barnes

************************************************************
Goodies to Go (tm)
January 24, 2006 -- Newsletter # 37
3
 
This newsletter is part of the internet.com network.
http://www.internet.com
 

************************************************************

Featured this week:
 
*   Goodies Thoughts - Includes For Navigation
*   Q & A Goodies
*   News Goodies
*   Feedback Goodies
*   Windows Tech Goodie of the Week 
*   And Remember This...
 
************************************************************
 
Includes For Navigation
 
Last week I discussed the notion of using frames for easily creating a website navigation mechanism for your site visitors.  There can be a problem with this method, however, especially as it relates to optimizing the site for search engine placement.  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.  I have also put a copy of the source for the individual pages in a viewable text page on the site 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
and the source code is at:
http://www.upperlowerbury.com/menusample.html
 
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.
 
 
 

Thanks for reading!
 
 
 
 
 
- Vince Barnes
 
 
 
 
 
************************************************************
 
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. Is there a way of naming spans partly with a variable? I.e. insted of doing this:
 document.all.sp1.innerHTML=('<img src=pt1.gif>');
 document.all.sp2.innerHTML=('<img src=pt1.gif>');
 document.all.sp3.innerHTML=('<img src=pt1.gif>');
 document.all.sp4.innerHTML=('<img src=pt1.gif>');
 document.all.sp5.innerHTML=('<img src=pt1.gif>');
 document.all.sp6.innerHTML=('<img src=pt1.gif>');
 document.all.sp7.innerHTML=('<img src=pt1.gif>');
 document.all.sp8.innerHTML=('<img src=pt1.gif>');
is there any way like:
 for( var n = 1; n < 9; n++)
 {
 document.all.sp + n + .innerHTML=('<img src=pt1.gif>');
 }
 

A. You could try to use the eval() method like this:
 eval("document.all.sp" + n + ".innerHTML=('<img src=pt1.gif>')");
 
 
 

 
Q. I want to have a small window open when someone clicks a link on my page.  I don't want a full size window, just a small one.  Can JavaScript do this?
 
A. Since you will probably have more than one link on a page you should set up a function in your head section of your document that will be used by multiple links.  You can pass the html page you want to load in the window to the function when the link is clicked on.  With window.open() you can set the
width, height, postion and other attributes.  Here is an example:
<script language="javascript"> function OpenWin(linkid)
    {  NewWin=window.open (linkid,"newwin",config="width=200,height=250,location=no,status=no,directories=
no,toolbar=no,scrollbars=no,menubar=no,resizable=no,top=30,left=30");
    NewWin.focus()
    }
</script>
The variable "linkid" contains the page you want to load.  This was passed to the function when the link was clicked on.  Then in the body section of your document your link could look like this:
<A HREF="javascript:OpenWin('somepage.html')">Apples</A>
You would wrap the link around the word that you want to click on for more info.  The HTML Goodies site does have a tutorial on window.open()
(see
http://www.htmlgoodies.com/primers/jsp/hgjsp_11.html and http://www.htmlgoodies.com/primers/jsp/hgjsp_12.html  -- Ed.)
 
 
 

    
Q. I  have been working on trying to come up with a better menu for my index page. I used Sothink DHTMLMenu to generate one. I have it working, but it takes quite a while for the menu to load. What is my problem?
 
A. I can't see your menu, but I can make a couple guesses. You have a bunch of images that need to load to make the menu work. The browser looks for them when you do your mouseover, which means calling the server and asking for the image, and repeating the process for each image. My first guess is you could fix your problem with a preloader, so the images are already in the browser cache. Here's an example of a preloader:
// preload images
        var an_image1 = new Image(151,37);
        an_image1.src = "images/navigation/options_home_over.jpg";
        var an_image2 = new Image(151,37);
        an_image2.src="images/navigation/easement_over.jpg";
        var an_image3 = new Image(151,37);
        an_image3.src="images/navigation/mutual_over.jpg";
This is a JavaScript that declares a variable as an image and specifies the size so the browser doesn't have to figure it out, and then give the variable a value consisting of a URL.
My second guess is that your images are large and taking a long time to download. Keep them small, like 3k each, or even eliminate them if you can.
Get rid of the "best viewed at" message. No visitor will change their screen setting just for your site, nor take the blame for he site not working at their screen setting. You just have to make it work at different sizes.
 
 
 
 
Q. I am working with a button on my page:
<STYLE>
.start {font-size: 8pt; color:#ffff00; background:#cc3333}
.end {font-size: 8pt; color:#cc3333; background:#ffff00}
</STYLE>
<SCRIPT LANGUAGE="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
The above is placed above </head>
Then the <FORM></FORM> lines are placed where I need them to be below <BODY>
<FORM NAME=highlight onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<INPUT TYPE="button" VALUE="Hot Computer Deals Of The Week!" onClick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'">
</form>
I would like the button to start out as it appears for onMouseout="highlightButon('end')"
When the page loads, it is the standard grey default size button. Using <STYLE></STYLE> I now have some control over the button size by specifying font-size: 8pt; Of course, nothing happens until the cursor is passed over the button.
I tried some [ onload= ] ideas that didn't work. Is there a way to control the initial appearance of the button?
 
A. I added a class attribute to the INPUT tag. I just used one of the classes you had already set in your styles, but you can create another one. The javascript helps with the changes.
<form name="highlight" onmouseover="highlightButton('start')" onmouseout="highlightButton('end')">
<input class="end" type="button" value="Hot Computer Deals Of The Week!" onclick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'" />
</form>
I'm not sure which version of HTML you are using... I'm used to writing in XHTML 1.0, so I've made the tags lowercase and added a / to the end of the INPUT.
 
 
 

    
Q. I currently have a couple  of javascripts that are used throughout my website.  One for a date and another for rollovers.  Can these two be placed onto one external js page with a single link to it, or should each be on separate pages with its own individual link?
 
A.  Yes you can place both scripts in one ".js" file and point to it this way:
<script src="myscript.js" language="JavaScript"></script>
One thing you will have to be careful of though is that if both scripts use variable names that are the same one of them will have to be changed or you will have a conflict.  If you are already using them both on the same page then this should not be a problem.
 
 
 
 
 
 
 
 

Discussion Goodies
***********************************
 
Have you seen the discussion forums on the HTML Goodies website?  It's a great place to get help from others who, just like you, are developing web pages.  Many different topics appear in the forum, and a new one will appear if you create it!  Here's a sample of recent topics:
 
 
 
 
 
 
 
 
 
 
 
 
News Goodies
***********************************
 
Open Source Flash Player Revealed
[January 24, 2006] New effort to produce GPL Flash player a top free software priority.
Read the article:
http://www.internetnews.com/dev-news/article.php/3579371
 

'Botmaster' Pleads Guilty to Zombie Profits
[January 24, 2006] L.A. man faces 25 years for using botnet to spread spam, adware.
Read the article:
http://www.internetnews.com/security/article.php/3579591
 

A More Personal Side to Google News
[January 24, 2006] The company adds new customization options to its online news aggregator.
Read the article:
http://www.internetnews.com/xSP/article.php/3579501
 

IBM: Users Are The Weak Link in Security
[January 24, 2006] Widespead outbreaks are declining, but don't get too comfortable.  
Read the article:
http://www.internetnews.com/security/article.php/3579356
 

180solutions Spyware Practice Far From Perfect
[January 24, 2006] CDT fingers the online advertising firm for causing 'immeasurable' harm to consumers.  
Read the article:
http://www.internetnews.com/xSP/article.php/3579576
 

EMC Shows No Signs of Slowdown
[January 24, 2006] Technology stocks have been battered in recent weeks on earnings that have failed to live up to Wall Street's expectations, but EMC showed no signs of a slowdown in its quarterly report Tuesday.  
Read the article:
http://www.internetnews.com/storage/article.php/3579471
 

Time Swings For Golf.com
[January 24, 2006] The acquisition expands the media giant's portfolio of online sports content. 
Read the article:
http://www.internetnews.com/ec-news/article.php/3579536
 

Yahoo's Spanish Connection
[January 24, 2006] Yahoo Research Expands to Spain and Chile. 
Read the article:
http://www.internetnews.com/dev-news/article.php/3579406
 

Feds Slam Microsoft on Compliance
[January 23, 2006] UPDATED: Response to Microsoft's monthly status report says Redmond's response time is slipping.
Read the article:
http://www.internetnews.com/ent-news/article.php/3579321
 

Report: Online Retail on Easy Street
[January 23, 2006] Online retail spending will enjoy a healthy few years.
Read the article:
http://www.internetnews.com/ec-news/article.php/3579351
 
 
 

 
 
 
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 helps 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/
 
 
 
 
 
Thanks for all your feedback!
 
 
 
 
 
 
 

Windows Tech Goodie of the Week 
***********************************
 
Improved Debugging with Visual Studio 2005's Debugger Visualizers
 
In this article we'll look at the basics of debugger visualizers, examine some of the built-in visualizers, look at a few free visualizers developed by various folks in the community, and see how to create our own visualizer! Read on to learn more!
 
 

*** AND ***
 

Multi-User Login With Database-Based Authentication
 
This article gives a brief overview of a multi-user login system that uses a database for authentication. The code includes new user registration, login, password retrieval, account information, admin accounts, etc. The code is written in ASP and VBscript.
 
 

*** AND ***
 

Using Apache-Style HTTP Authentication on IIS
 
Have you ever wished you could easily set up password protected areas of your web site without creating system user accounts? What about moving a password protected website from Apache to IIS? This article examines a free product that makes both of these tasks amazingly simple.
 
 
 
 
 
 
 
 
 
 
 
 
And Remember This ...
***********************************
 
1908 The Boy Scout Movement was Started
 

Robert Baden-Powell's "Scouting For Boys" was published on this day in 1908, prompting the start of the Boy Scout Movement.  A war hero who defended Mafeking for 217 days during the South Africa war, Baden-Powell was already well known for a soldiers' handbook entitled Aids for Scouting.  The book, which included lessons in tracking and observation, had become popular with boys, who invented many games based on the lessons in the book.  Baden-Powell was inspired to write "Scouting For Boys" by this popularity.  By the end of 1908 there were 60,000 Boy Scouts in troops all over England, and more troops were starting up around the world.  A publisher from Chicago, William Boyce, became lost in a London fog and was guided to safety by a Boy Scout who refused Boyce's offer of a tip because it would "be improper for a Boy Scout to take a tip for a good deed."  Inspired by this act, Boyce organized some regional American organizations, including the Woodcraft Indians and the Sons of Daniel Boone into the Boy Scouts of America, which was incorporated on February 8, 1910.

 

 

Today was also the day that in: 1839 Charles Darwin was elected a member of the Royal Society; 1908 General Baden Powell formed the Boy Scouts; 1924 Russian city of St Petersburg was renamed Leningrad; 1939 30,000 were killed by earthquake in Concepcion Chile; 1943 Hitler ordered Nazi troops at Stalingrad to fight to death; 1958 After warming to 100,000,000:, 2 light atoms were banged together to create a heavier atom, resulting in the first man-made nuclear fusion; 1962 Brian Epstein signed a management contract with the Beatles; 1984 Apple Computer Inc unveiled its Macintosh personal computer;
 

Born today were: in 1883 actress Estelle Winwood (Goodwin); 1913 TV producer Mark Goodson; 1915 actor Ernest Borgnine; 1918 Televangelist Oral Roberts; 1919 author Nora Beloff; 1924 English landowner, father of Diane, the 8th Earl Spencer; 1928 English zoologist Desmond Morris; 1941 singer Neil Diamond; 1941 singer Aaron Neville; 1943 actress Sharon Tate; 1947 musician Warren Zevon; 1949 actor/comedian John Belushi; 1960 German actress Nastassja Kinski; 1969 actress Stephanie Romanov; 1970 actor Matthew Lillard; 1993 daughter of Howard, Ashley Jade Stern;


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