Goodies to Go (tm)
January 20, 2003-- Newsletter #216

By Vince Barnes



Goodies to Go (tm)
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 http://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&hyphthroughs".

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 http://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 "&#228;".

 


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".

 

 

 

 

Top

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

 

 

 

 

 


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/


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 http://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="http://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!

 




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