************************************************************
Navigation the Easy WayThe navigation of a web site brings up tons of questions.
Everybody has
their opinion of the best way to do it form the visitor
’
s perspective, from
the coder
’
s perspective, from the design cosmetics perspective or from their
own perspective.
Almost none of them will agree!
This poses quite a
dilemma for the burgeoning web designer who simply wants to know what they
should do right now.
Here then, are some simple answers for such a person
—
not the fanciest, perhaps not the most ideal from some points of view,
but these are quite simple and get the job done.
After all, as we all know,
it
’
s content that rules!
First there is the question of where to put the navigation links.
Basically
there are four options: top, left, bottom and right.
You could
theoretically place them in the middle and modify the surrounding area, but
to do so would mean you are dealing with a much more esoteric site than this
topic is intended to deal with!
Personally, I favor the left.
It seems to
me to be the most natural place for a contents list.
That being said, the
top is a great place for a group of headings.
The choice between these two
would have to depend on what makes sense for your content.
It may be that a
group of headings across the top takes you to different sections of the
site, while each section has a content list on the left to take you to the
various pages in that section.
I am not a big fan of contents on the bottom
or on the right, except for links to related information that may be in
other sites.
The bottom and the right also have to contend more with screen
resolution problems.
It is no fun the develop a site with lots of
interesting sections if nobody can find out they are there because the
contents have disappeared off the right or dropped off the bottom!
Now
let
’
s look at
"
How?
"
There are several possible methods to use for easy to maintain contents.
One method which does not fit this category is to create a table on each
page that contains the contents list.
Each time you change a link, you
would have to change every page on which that link appears.
It
’
s doubtful
you
’
ll do that more than once or twice without making any errors!
Next method: if you
’
re using FrontPage or a similar program, they typically
have a means of automatically generating navigation features.
In FrontPage
you can us
"
Shared Borders
"
(for more information, use the indicated term as
a search term in FrontPage
’
s Help system
—
for more about FrontPage, see
) into which you put navigation elements using the
"
Navigation
"
view.
This
method works, but depends on the particular program to support it and takes
you a little further away from the actual code, thereby reducing your level
of control a little.
Another method is to create pages (files) that are
"
include
"
d into your
various site pages.
This is called Server Side Includes (SSI).
We have an
article (see
) that
includes a very nice section with examples on how to do this.
The trouble
with this method is that it depends on the server permitting SSI.
While
most do these days, there are still some that don
’
t.
You might want to
check with your service provider before writing a ton of code using SSI
(unless of course, you just want the practice!)
In my opinion, the best method is to use frames.
"
Uggh!
"
I hear from the
peanut gallery!
In the old days (and the Internet is getting older!) frames
were shunned because they looked ugly and a lot of browsers didn
’
t support
them.
Almost every modern browser now support frames and those frames can
have zero width borders so you dont even have to know they
’
re there.
Judicious use of contents, sizes etc. should also prevent the need for
scroll bars appearing in the middle of your page.
"
How?
"
Easy!
There
’
s a
neat tutorial right here:
Go ahead and dig
right in!
With a frame on the left for contents, one on the right for the
body of the site and possibly one across the top for titles and even group
headings (see
for
advice on how to change both the contents and the main body frames with one
click of a subject header) you should be all set.
Hopefully you can now create a fairly simple to design, simple to use and
simple to maintain navigation system for your site.
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
Hello, I have a link question.
On my site I have the link color scheme
to be black, which works well on the left bordered side of my page, but not
on the right side which has a black background.
Is there anyway to change
the color just one or two links without changing the color of all the links?
A.Using CSS and assigning a class to each link you can use different colors
and other attributes to whichever links you want. For instance if you want
one of your links to be black and another to be white you would set up a
style sheet like this:
<
style type=
"
text/css
"
>
a.one:link {color: #000000}
a.two:link {color: #FF0000}
<
/style
>
Place the style between the
<
HEAD
>
tags.
Now apply the class to the actual
links in your HTML like this:
<
a class=
"
one
"
href=
"
default.html
"
>
This link will be black.
<
/a
>
<
a class=
"
two
"
href=
"
default.html
"
>
This link will be red.
<
/a
>
Q.My brother was on AIM when he clicked on a link in someone else
’
s
profile, when he did this it brought him to another page where he clicked
the first link on it.
After he did so his homepage was changed to this
site, which is a porn site.
it would change back after he tried deleting
all memory and stuff.
Also his AIM profile had the link added to it.
He
can erase it but whenever he signs on it comes back.
A.Unfortunately this is not a JavaScript or web development issue. This
problem falls into the realm of spyware or hijackware.
There is a lot of
information available on these topics as well as a variety of ways to fix an
infected system. I recommend doing a search with your favorite search engine
(Google, Lycos, Ask Jeeves,
…
) using the keywords
"
spyware
"
and
"
hijackware
"
. I
’
m sure you
’
ll find the solution to the problem.
[
You might also check out the lead piece in this issue:
-Ed.
]
Q.I
’
m trying to design a personal portfolio site and need to have people
click on my thumbnails to see larger images in a new window
…
easy.
However I found a site that makes it hard for people to save/steal copyright
materials- it makes the new window close when it is clicked on
…
I can
’
t
figure out how to do this.
A.You could use the onClick event in the body tag.
Of course they can
still steal your images because the images have to be downloaded to your PC
for your browser to display them.
The body tag would look like this:
<
body onClick=
"
window.close()
"
>
This will only work if the window was opened using the JavaScript
window.open command.
Q.This is a question based around HTML and Java. Firstly, how do you
specify a constant width for a drop down menu, and secondly, how to you
change its colours?
A.This is more of a HTML/CSS question, but you could use a style tag in the
select tag to specify that.
Here is an example:
<
select name=
"
sel
"
style=
"
width:80;color:red;background-color:yellow
"
>
<
option value=
"
yes
"
>
Yes
<
/option
<
option value=
"
no
"
>
No
<
/option
<
/select
>
This example would limit the select (dropdown) to 80 pixels, the text will
be red and the background color of the select will be yellow.
Q.Is there was a way to position a background image in the center of a page
regardless of screen resolution?
A.This code will position the image in the center:
body {
background-image : url(image.jpg);
background-position : center center;
background-repeat : no-repeat;
}
To position in the center of a table, try using this (be sure to replace __
with the height and width of the image):
<
body
>
<
table height=
"
100%
"
width=
"
100%
"
>
<
tr
>
<
td valign=
"
center
"
align=
"
center
"
>
<
table height=
"
__
"
width=
"
__
"
background=
"
image.jpg
"
>
Any text on the background
<
/table
>
<
/td
>
<
/tr
>
<
/table
>
<
/body
>
***********************************
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:
sort of javascript countup:
Cookie Guru Required!:
Checking to see if an image exists:
Create hyperlink from dynamic dropdown:
ASP.NET Force download of MS Word doc:
***********************************
The State of CDP[
January 17, 2006
]
After a breakout year for continuous data protection
technology, we examine the different players and approaches and look at what
the future may hold.
Read the article:
[
January 17, 2006
]
The first Linux kernel of the year gets a point upgrade
as work continues on the next version.
Read the article:
[
January 17, 2006
]
The search giant purchases dMarc to explore another media
source.
Read the article:
[
January 17, 2006
]
The software giant is looking to be a thorn in Big Blue
’
s
side ahead of next week
’
s Lotusphere event.
Read the article:
[
January 17, 2006
]
Without tiered service levels, Mark Cuban says, broadband
Internet will not reach its full potential.
Read the article:
[
January 17, 2006
]
New license takes aim at Patents and DRM.
Read the article:
[
January 17, 2006
]
The company buys AccelChip for DSP boost.
Read the article:
[
January 17, 2006
]
The coming year will be an important one for grid
computing, according to a report by The 451 Group.
Read the article:
[
January 16, 2006
]
Consumers report high confidence in software and services
that thwart online bad actors.
Read the article:
[
January 13, 2006
]
FCC sets May spectrum auction date for airline broadband
service.
Read the article:
***********************************
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
Thanks for all your feedback!
Windows Tech Goodie of the Week
***********************************
Accessing and Updating Data in ASP.NET 2.0: Data Source Control Basics
In this article series we’ll examine the five built-in data source controls in
detail. This first part, however, examines the concepts shared among all five
data source controls and how ASP.NET 2.0’s data Web controls work with their
associated data source controls at runtime. Read on to learn more!
http://aspnet.4guysfromrolla.com/articles/011106-1.aspx
*** AND ***
Bracket Your [Table Names] for Access via OLE DB
Having trouble switching from ODBC to OLE DB for your Access database queries?
Getting weird and unhelpful errors? This little tip might just be the solution.
http://www.asp101.com/tips/index.asp?id=129
*** AND ***
Visual Studio 2005, SQL Server 2005, & BizTalk Server 2006
Launch Event When I first heard that Microsoft was planning a series of events
to celebrate the launch of Visual Studio 2005, SQL Server 2005, and BizTalk
Server 2006, I was all excited. It was late October and I knew that the products
were due to ship any day. I’d be one of the first people to see all this great
new technology and I’d finally get my hands on the actual release versions… or
so I thought.
http://www.15seconds.com/issue/060112.htm
And Remember This …
***********************************
1966 The US Lost a Nuclear Bomb in Spain
For many years during the cold war, the US flew B-52 bombers carrying nuclear
weapons around the globe all the time. With this number of flights accidents
will inevitably happen. The Pentagon has admitted to more than three dozen
accidents with these planes in which nuclear contamination occurred or weapons
were lost. In 1966 one such "Broken Arrow" incident received world wide press
attention when a B-52 collided with a KC-135 tanker over Palomares, Spain. The
B-52, which was attempting to re-fuel, hit the fuel boom of the tanker, tearing
the fuselage of the bomber open and igniting the fuel. The KC-135 exploded,
killing all four of its crew members. The crew of the B-52 baled out and
parachuted to safety. The plane went down near Palomares. The bombs on board at
the time were not armed, but the explosive material in two of them did explode
on impact, cratering the fields and spreading radio-active Plutonium over the
area. 2,000 personnel were involved in the clean-up, during which 1,400 tons of
contaminated soil were shipped to the US for disposal. The US settled some 500
claims for damage to health by local residents. A third bomb was recovered
intact from a dry river bed nearby, but a fourth was lost at sea. A massive
search effort continued until the bomb was spotted by a submarine on April 7.
The US does not disclose information concerning nuclear accidents for security
reasons, and people may have been unknowingly exposed to radiation resulting
from such accidents. Today there are two H-Bombs and one Uranium core lost
somewhere in Wassaw Sound off Georgia (US), in the Puget Sound in Washington
state and in the swamplands near Goldsboro, North Carolina.
Today was also the day that in: 1861 patent for a flush toilet with a
water tank and pull chain granted to Mr. Thomas Crapper; 1871 patent
granted for a cable car (first went into service in 1873); 1926 George
Burns married Gracie Allen; 1928 patent granted for a fully automatic
film developing machine; 1929 Popeye made his first appearance; in the
cartoon "Thimble Theatre"; 1946 the first meeting of the United Nations
Security Council was held; 1969 the Beatles released Yellow Submarine in
the UK; 1969 Led Zeppelin’s debut album was released in the US; 1987
President Reagan signed a secret order permitting covert sale of arms to Iran;
1989 a gunman opened fire in a schoolyard in California, killing five
children and wounding thirty; 1994 a 6,6 earthquake hit Los Angeles,
killing 60 and causing $30B in damage; 1995 a 7.2 earthquake hit Kobe,
Japan, killing 5,372; 1998 Paula Jones filed sexual harassment charges
against President Clinton;
Born today were: in 1706 statesman Benjamin Franklin; 1820 English
novelist Ann Bronte; 1880 movie creator Mack Sennett (Keystone Kops);
1899 novelist Nevil Shute; 1899 gangster Al Capone; 1922
actress Betty White; 1925 actor Rock Hudson; 1927 singer Eartha
Kitt; 1928 English hairstylist Vidal Sassoon; 1931 actor James
Earl Jones; 1934 ventriloquist Shari Lewis; 1939 TV personality
Maury Povich; 1942 boxer Muhammad Ali (Cassius Clay); 1949
comedian Andy Kaufman; 1956 actor David Caruso; 1962 Canadian
actor/comedian Jim Carey;
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
