Goodies to Go ™
January 20, 2003–Newsletter #216
This newsletter is part of the internet.com network.
http://www.internet.com
Featured
this week:
* Goodies Thoughts –
Layout, Color and Sound.
* Q & A Goodies
* News Goodies
* 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 – |
Layout, Color and Sound. |
Last week I talked about the
importance of the design stage in the development of
a web site (see
https://www.htmlgoodies.com/letters). This week
I’m going to take a look at some of the details of
the first few design considerations; layout, color
and sound.
The Layout of a web site encompasses multiple
dimensions. First there is the question of how to
lay out the items that are to appear on a page; then
there is the hierarchy of pages in the site. To a
degree, these aspects must be considered together.
For instance, is the site going to have a "cover
page" like the cover of a magazine? If so, the
layout of the cover can include a more extravagant
graphical image and perhaps less detail, much like a
magazine cover. Also, if the site is going to have a
complex hierarchy, there may need to be a two (or
more) dimensional navigation mechanism which has to
be accommodated in the design of pages. Modern
trends in site design seem to indicate that covers,
while they are great for a personal, or family web
site, are usually not the best idea for a business
site. The key to informational sites is to provide
information access in the simplest possible fashion.
For commerce, the key is to provide access to
products and product information with as few clicks
as possible, including the checkout process. If a
business site is to have some sort of cover, it
should include and index (links) to all of the most
important information the site contains. It is not a
good idea to waste your visitors’ time with
superfluous levels of
"click&hyph;throughs".
There are several things to bear in mind when laying
out a page. Western languages, including English,
are read from left to right and top to bottom. This
provides a natural flow for elements on a page. For
instance, titles should be above the body of
material; introductory material should be to the
left of the material it introduces, much like a left
margin. The layout of a page in a legal notepad
follows this principle. Following this basic concept
yields a page whose layout is intuitively understood
by the reader. This is a good thing!
Provide space between different ideas on a page so
that the separation of the ideas is clear. Too much
information crammed onto a page has the effect of
concealing most of it. All intuitive navigation is
lost when the eye is overloaded, and the usefulness
of the page is diminished.
Color is also very important. Too little, and the
page looks dull and boring; too much and overload
sets in — the visitor will leave in a hurry to save
their eyes! If you have an artists eye, fantastic!
That is the talent needed to use color most
effectively on a page. With my particular level of
color skill, I find it best to consult a graphic
artist! To be most successful with your site be
realistic. If you have color skill, you don’t need
me to advise you. If your color skills are not that
great, or if you are not sure, it is best to consult
an artist. If that is not possible, make sure you
don’t overdo it! Too little color is better that too
much.
When it comes to sound, the notion that too little
is better that too much needs to be taken to its
extreme! With two exceptions, ANY sound is too much!
There is no such thing as too little sound! Sound on
a web page is an irritation, plain and simple. The
first exception is on a page whose known intent is
sound, such as a music sampler page or some humor
pages. The other exception is where the viewer has
been previously informed (that is, prior to linking
to this page) that they are going to hear something,
such as by a link to a flash presentation, or to a
video page. The golden rule is: don’t subject your
visitor to sounds unexpectedly. One of the joys of
web surfing is the ability to absorb yourself with
following an information thread around to global net
without disturbing anyone around you. As soon as you
hit unexpected sound, that joy is abruptly
shattered. The page that offends in this way is not
likely to be revisited!
Next week I’ll be continuing our journey into the
design of a site with a look at content.
Until then,
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 https://www.htmlgoodies.com/mentors/.
Q. IMy website is for a drama
company and I’m trying to write a cast list, ie:
Snow white……………..Freda Bloggs
Stepmother……………..Fred Bloggs
The only way I can find to make it look neat is
the <PRE> flag but this changes the font. I
don’t want to use <LI> as I don’t want a bullet
point.
A. You can use a table with a border set
at zero so it is not visible.
Like this example:
<table width="100%" border="0">
<tr><td>Snow white</td>
<td>………..</td>
<td>Freda Bloggs</td></tr>
<tr><td>Stepmother</td>
<td>………..</td>
<td>Fred Bloggs</td></tr>
</table>
Q. How can I place an image on my web
page? I tried <IMG SRC="joe.gif">. This doesn’t
work. A red cross appears.
A. The red "x" where the images is
supposed to be, can mean one of a few things.
The path to you image is possibly incorrect. I
checked your html code and noticed most of your
graphics are located in a folder called images.
If that is where you placed the image the path
to it would be something like <img src="images/joe.gif">
The path depends on exactly where the graphic is
located in relation to where (what directory or
folder) your web page calling it is located. It
can get a little confusing as first. If just
updating a page look at the html code of a
graphic thats displays properly and make a note
of the img src= code file path to it.
Also keep in mind, file name and the img src
code name must match exactly. Letter case must
be the same for both and extension names, like
.jpg or .jpeg must match.
To copy the files you can use a FTP program for
uploading and downloading files and graphics
from your site.
(Note that NT/Win2K hosting servers are not case
sensitive – Ed.)
Q. Is there a way of adding Powerpoint
presentations into a website without the viewer
having to download the file?
A. The user must have PowerPoint
installed on their computer to be able to view
the presentation. There may be a PowerPoint
viewer available but it still needs to installed
on the user’s computer. In PowerPoint 97 and up
you can save the presentation as HTML and it
will create all of the buttons and navigation
for you as HTML. The downside is that it creates
an enormous amount of files. I am not sure if
this will help but Microsoft offers the
Microsoft. Producer for PowerPoint 2002 Resource
CD. This is an "add-in for Microsoft PowerPoint.
version 2002 that makes it easy to create
media-rich presentations for the Web." The cost
is only about $6. Here is the link:
http://www.producerresourceCD.com
Q. I need a list of special characters in
HTML. Like the "a" with the two dots ontop of
it, and the copyright symbol… can you help me?
A. I don’t offhand know of a site with a
list of the codes. However, if you use Windows,
you have an application called Character Map
which is probably in the accessories folder. It
has the character codes. The HTML code is
&#[code];, like the code for the "a" with an
umlaut (two dots) is "ä".
Q. What is the html tag to prevent people
from "lifting" my artwork from my site?
A. There is no such tag. There is no
technical means to prevent copying that can’t be
gotten around. Nontechnically, there are a
couple things you can do. You can put a
copyright notice in big letters across the
picture so it can’t be removed without ruining
the picture. You can post just small versions
and and require viewers to contact you for
permission to see the larger image. You can have
pages and images which aren’t linked to, so no
one can find them without you giving them the
link.
Q. Can you please help me, I am after a
script that will close the page it is on after a
set amount of time; eg 0.1 seconds.
A. I saw a script that should do it for
you:
http://javascript.internet.com/navigation/autoclose-inactive-popup.html
Q. I am looking for a simple way to open
an alert box by clicking on a graphic on the
page.
A. Here is one way to open an alert box
by clicking on a graphic:
<A HREF="javascript:alert(‘Hello!’)"><IMG SRC="0.gif"
BORDER="0"></A>
And this just in…. DatabaseJournal (http://www.DatabaseJournal.com)
has a Forums section in which you can ask, and
receive answers to, database related questions.
Check it out! Here’s a sample (this represents a
short dialog in the forums):
Q. Our web
page that downloads excel format (csv), opens in
browser in lieu of excel without any options.
This is in ASPDB Classic Enterprise. What can I
do?
A. Here’s how you fix it…
1) Open up My Computer and click on Tools /
Folder Options
2) Choose File Types and scroll down to XLS.
Select it (turns blue)
3) Click the Advanced button on the bottom of
that window
4) UNCHECK the "Browse in Same Window" checkbox.
You can also CHECK the Confirm open after
download box if you wish.
5) Click OK / OK to close all windows. Try it!
A2. Just as a heads up – newer versions
of IE 6 also set themselves as the default
viewer for .XLS! You can also change that in the
Folder Options from the post above – just search
for the one called "Microsoft Excel Worksheet"
or .XLS and change the "Opens With" option.
A3. Excellent solution… I’ve already
include this procedure in the TED "How-To".
News Goodies
Well-Established Names Take Backseat at Linux
[January 20, 2003] It may be time for a new wave
of open source projects, like JBoss, to take
centerstage at LinuxWorld Expo as IT officials and
business executives find better ways to use open
source technology.
Click
here to read the article
Microsoft Releases New Anti-Piracy Software
Toolkit
[January 20, 2003] Software giant aims to protect
disc-based music, video copyrights
Click
here to read the article
AMD Clamps Down on Wireless Security
[January 20, 2003] New wireless Flash Memory
Device with 64-bit password protection claims to
deter signal thieves from mobile phone billing fraud
or pirating television.
Click here to read the article
IBM Jumps into LinuxWorld with a Bang
[January 20, 2003] Big Blue opens the first day
of LinuxWorld New York with a series of new
Linux-based product offerings for both software and
hardware, and a reference platform for low-powered
devices.
Click here to read the article
Yahoo! Buffs Up Personals
[January 20, 2003] Computer services company says
informal inquiry by the SEC has turned to a formal
probe over issues stemming from prior earnings
guidance and a stock repurchase.
Click here to read the article
Nissan Targets African Americans Online
[January 17, 2003] As part of its new ad campaign,
the carmaker will celebrate Black History month with
an inspirational manifesto on BlackPlanet.com and
NissanUSA.com.
Click here to read the article
Online Spending Forecast: $14.8B in Q1
[January 17, 2003] Yahoo-Nielsen Internet Confidence
Index takes a slight dip, but the overall outlook
remains positive; broadband users are significantly
more upbeat about the Net.
Click here to read the article
Parsons Replaces Case as AOL TW Chairman
[January 16, 2003] UPDATE: Ending speculation over
who would take over as chairman after Steve Case
departs AOL Time Warner, the board of directors
names CEO Richard Parsons to duel roles.
Click here to read the article
Broadband Surges in 2002, But Narrowband Declines
[January 15, 2003] A new report shows that broadband
adoption escalated to 59 percent year-over-year in
2002, with seniors leading the way.
Click here to 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 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
https://www.htmlgoodies.com/mentors/
We have received a flurry of offers from readers to
become mentors. We are going to be updating our
mentor lists in the very near future. If you feel
you have an expertise you would like to share with
our readership, let me know. Our mentors provide a
valuable service to HTML Goodies readers, answering
questions and providing guidance in their respective
fields of expertise. Our Mentor community can be
found at
https://www.htmlgoodies.com/mentors
Several people responded with suggestions regarding
the mouseover color change in last week’s Goodies To
Go. Many thanks for all the suggestions for
accomplishing the same end using styles/CSS. We were
aware of this alternative, but I included the
somewhat complex JavaScript example mainly for two
things. First, it works better in more browsers, so
it is a good cross-browser example. Second, it
contains lots of nice (commented) JavaScript
examples! Now I would like to present the style
example. As I said, lots of people sent in
variations of this solution; I have chosen this one
arbitrarily:
From Dr. David Leadley in the Department of Physics
at the University of Warwick in Coventry, England:
<head>
<style>
<!–
a{color:"#ff0000"}
a:hover{color:"#00ff00"}
–>
</style>
</head>
<body>
<a href="https://www.htmlgoodies.com">Try floating
mouse over this</a>
</body>
Top
And
Remember This . . .
On this day in…
1841: Hong Kong Ceded to the British
On this day in 1841 China ceded the Island of Hong
Kong to the British by signing the Chuenpi
Convention. Britain had invaded China in 1839 to put
an end to the resistance in China to Britain’s
interference in economic and political matters. One
of the first places occupied by the British in what
was known as the First Opium War was the small
island off the southeast coast of China known as
Hong Kong. At the time, there were vary few
inhabitants on the Island. Following the ceding of
the Island, the Treaty of Nanking was signed in
1842, formally ending the war. The colony flourished
as a commerce gateway for China and Southeast Asia.
Under the Second Treaty of Peking in 1989 the
British rule of the Island was extended for 99
years. Long negotiations in 1994 led to the signing
of a formal agreement to turn the Island back over
to China in 1997, with China pledging not to change
the Island’s capitalist system. Tung Chee Hwa, the
Island’s new chief executive, formulated a policy
under the principle called "one country, two
systems" to preserve Hong Kong’s position as a
capitalist center in Asia.
Thanks for reading
Goodies to Go!
