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
Top
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
flag but this changes the font. Idon’t want to use as I don’t want a bulletpoint.A. You can use a table with a border setat zero so it is not visible.Like this example:Snow white………..Freda BloggsStepmother………..Fred Bloggs Q. How can I place an image on my webpage? I tried . This doesn’twork. A red cross appears.A. The red "x" where the images issupposed to be, can mean one of a few things.The path to you image is possibly incorrect. Ichecked your html code and noticed most of yourgraphics are located in a folder called images.If that is where you placed the image the pathto it would be something like The path depends on exactly where the graphic islocated in relation to where (what directory orfolder) your web page calling it is located. Itcan get a little confusing as first. If justupdating a page look at the html code of agraphic thats displays properly and make a noteof the img src= code file path to it.Also keep in mind, file name and the img srccode name must match exactly. Letter case mustbe the same for both and extension names, like.jpg or .jpeg must match.To copy the files you can use a FTP program foruploading and downloading files and graphicsfrom your site.(Note that NT/Win2K hosting servers are not casesensitive – Ed.)Q. Is there a way of adding Powerpointpresentations into a website without the viewerhaving to download the file?A. The user must have PowerPointinstalled on their computer to be able to viewthe presentation. There may be a PowerPointviewer available but it still needs to installedon the user’s computer. In PowerPoint 97 and upyou can save the presentation as HTML and itwill create all of the buttons and navigationfor you as HTML. The downside is that it createsan enormous amount of files. I am not sure ifthis will help but Microsoft offers theMicrosoft. Producer for PowerPoint 2002 ResourceCD. This is an "add-in for Microsoft PowerPoint.version 2002 that makes it easy to createmedia-rich presentations for the Web." The costis only about $6. Here is the link:http://www.producerresourceCD.com Q. I need a list of special characters inHTML. Like the "a" with the two dots ontop ofit, and the copyright symbol… can you help me?A. I don’t offhand know of a site with alist of the codes. However, if you use Windows,you have an application called Character Mapwhich is probably in the accessories folder. Ithas the character codes. The HTML code is&#[code];, like the code for the "a" with anumlaut (two dots) is "ä". Q. What is the html tag to prevent peoplefrom "lifting" my artwork from my site?A. There is no such tag. There is notechnical means to prevent copying that can’t begotten around. Nontechnically, there are acouple things you can do. You can put acopyright notice in big letters across thepicture so it can’t be removed without ruiningthe picture. You can post just small versionsand and require viewers to contact you forpermission to see the larger image. You can havepages and images which aren’t linked to, so noone can find them without you giving them thelink.Q. Can you please help me, I am after ascript that will close the page it is on after aset amount of time; eg 0.1 seconds.A. I saw a script that should do it foryou:http://javascript.internet.com/navigation/autoclose-inactive-popup.html Q. I am looking for a simple way to openan alert box by clicking on a graphic on thepage.A. Here is one way to open an alert boxby clicking on a graphic:BORDER="0"> And this just in…. DatabaseJournal (http://www.DatabaseJournal.com)has a Forums section in which you can ask, andreceive answers to, database related questions.Check it out! Here’s a sample (this represents ashort dialog in the forums):Q.Our webpage that downloads excel format (csv), opens inbrowser in lieu of excel without any options.This is in ASPDB Classic Enterprise. What can Ido?A. Here’s how you fix it…1) Open up My Computer and click on Tools /Folder Options2) Choose File Types and scroll down to XLS.Select it (turns blue)3) Click the Advanced button on the bottom ofthat window4) UNCHECK the "Browse in Same Window" checkbox.You can also CHECK the Confirm open afterdownload box if you wish.5) Click OK / OK to close all windows. Try it!A2. Just as a heads up – newer versionsof IE 6 also set themselves as the defaultviewer for .XLS! You can also change that in theFolder Options from the post above – just searchfor the one called "Microsoft Excel Worksheet"or .XLS and change the "Opens With" option.A3. Excellent solution… I’ve alreadyinclude this procedure in the TED "How-To". TopNews GoodiesWell-Established Names Take Backseat at Linux[January 20, 2003] It may be time for a new waveof open source projects, like JBoss, to takecenterstage at LinuxWorld Expo as IT officials andbusiness executives find better ways to use opensource technology.Clickhere to read the article Microsoft Releases New Anti-Piracy SoftwareToolkit[January 20, 2003] Software giant aims to protectdisc-based music, video copyrightsClickhere to read the article AMD Clamps Down on Wireless Security[January 20, 2003] New wireless Flash MemoryDevice with 64-bit password protection claims todeter signal thieves from mobile phone billing fraudor pirating television.Click here to read the article IBM Jumps into LinuxWorld with a Bang[January 20, 2003] Big Blue opens the first dayof LinuxWorld New York with a series of newLinux-based product offerings for both software andhardware, and a reference platform for low-powereddevices.Click here to read the article Yahoo! Buffs Up Personals[January 20, 2003] Computer services company saysinformal inquiry by the SEC has turned to a formalprobe over issues stemming from prior earningsguidance 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 withan inspirational manifesto on BlackPlanet.com andNissanUSA.com.Click here to read the article Online Spending Forecast: $14.8B in Q1[January 17, 2003] Yahoo-Nielsen Internet ConfidenceIndex takes a slight dip, but the overall outlookremains positive; broadband users are significantlymore upbeat about the Net.Click here to read the article Parsons Replaces Case as AOL TW Chairman[January 16, 2003] UPDATE: Ending speculation overwho would take over as chairman after Steve Casedeparts AOL Time Warner, the board of directorsnames 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 broadbandadoption escalated to 59 percent year-over-year in2002, with seniors leading the way.Click here to read the article TopFeedbackGoodiesDid 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 somethingyou have seen in here, you can now send your input to:mailto:nlfeedback@htmlgoodies.comWe already receive a lot of email every day. This address will help us sort outthose relating specifically to this newsletter from all the rest. When you sendemail to this address it may wind up being included in this section of thenewsletter, to be shared with your fellow readers.Please don’t send your questions to this address.They should be sent to our mentors: seehttps://www.htmlgoodies.com/mentors/We have received a flurry of offers from readers tobecome mentors. We are going to be updating ourmentor lists in the very near future. If you feelyou have an expertise you would like to share withour readership, let me know. Our mentors provide avaluable service to HTML Goodies readers, answeringquestions and providing guidance in their respectivefields of expertise. Our Mentor community can befound athttps://www.htmlgoodies.com/mentorsSeveral people responded with suggestions regardingthe mouseover color change in last week’s Goodies ToGo. Many thanks for all the suggestions foraccomplishing the same end using styles/CSS. We wereaware of this alternative, but I included thesomewhat complex JavaScript example mainly for twothings. First, it works better in more browsers, soit is a good cross-browser example. Second, itcontains lots of nice (commented) JavaScriptexamples! Now I would like to present the styleexample. As I said, lots of people sent invariations of this solution; I have chosen this onearbitrarily:From Dr. David Leadley in the Department of Physicsat the University of Warwick in Coventry, England:<br /><!–<br />a{color:"#ff0000"}<br />a:hover{color:"#00ff00"}<br />–><br />Try floatingmouse over this TopAndRemember This . . .On this day in…1841: Hong Kong Ceded to the BritishOn this day in 1841 China ceded the Island of HongKong to the British by signing the ChuenpiConvention. Britain had invaded China in 1839 to putan end to the resistance in China to Britain’sinterference in economic and political matters. Oneof the first places occupied by the British in whatwas known as the First Opium War was the smallisland off the southeast coast of China known asHong Kong. At the time, there were vary fewinhabitants on the Island. Following the ceding ofthe Island, the Treaty of Nanking was signed in1842, formally ending the war. The colony flourishedas a commerce gateway for China and Southeast Asia.Under the Second Treaty of Peking in 1989 theBritish rule of the Island was extended for 99years. Long negotiations in 1994 led to the signingof a formal agreement to turn the Island back overto China in 1997, with China pledging not to changethe Island’s capitalist system. Tung Chee Hwa, theIsland’s new chief executive, formulated a policyunder the principle called "one country, twosystems" to preserve Hong Kong’s position as acapitalist center in Asia.Thanks for readingGoodies to Go! ArchiveHome Page. 