The 10 Pillars Of Excellent Website Design

1. A picture, they say, is worth a thousand words.

A picture no doubt enhances the overall look and feel of your website. However, like the quote above a picture file is rather big in size and too much of it can make your website seem like a drag to download. Although most internet users are now cruising the information super highway at broadband speed you should still cater to those who are still using dial up connections ( and mind you there are more then a handful). As a rule of thumb I recommend you keep your image size to less then 30k where possible. Your webpage should be able to load within 5 seconds. Please do not forget about users who cannot see the images on your website by providing alternate texts as description to the images. Most webpage creation programs like Macromedia’s DreamWeaver allow you to this easily.

2. Navigability & functionality come before artistic excellence

It is absolutely of no use to make a website that is a masterpiece from an artistic point of view but a complete failure on the web! Why? Because the users simply don’t know how to get around the website! You should always bear in mind what car manufacturers always emphasize, ease of accessibility to functions. Make sure your navigation is clear and absolutely idiot proof (no offence to those of you out there who always get lost in a website no matter how good it is).

3. Avoid Mystery Meat Navigation.

This is one of the biggest mistakes a website can make as well as one of the most frustrating experience for users. This sort of navigation requires the user to mouse over an image in order to navigate to a link without actually having any idea where they are heading. It is only when they click and hold the mouse over the image that they can see the actual link.

4. Tables – Split them up

Ever been to a website whereby you find yourself staring at a blank screen for a certain period of time before finally as if by magic the whole website just pops out of no where? That is because the designer of that website probably put the whole web page within a single table. Tables are used in web design to help align images in a website as well as to create a structure to the layout of a website. It makes everything neater as well as enables the designer to create abstract layouts easily. I will show you how to use tables as part of your design later on but for now please take note that your user would be far better off if you split a single table on a page into smaller tables as required. It helps the user to prepare for the long wait in a way as the smaller tables with their contents and images will be downloading first so users can anticipate and not leave your website in frustration.

5. No Pop-up Windows Please

Pop-up windows have been on the rise recently on the web. These are small little windows that pop-up with some information or key advertisement on them. They do nothing but clutter the user’s screen unnecessarily. It is best if all links open within the same window. However exceptions for the use of a pop up window may be for situations like if a page contains a link list then it might good to place all these links within a pop up window. However as a general rule avoid using pop up windows they make your life as well as the user’s easier. Furthermore, operating systems like Microsoft Windows XP are now equipped with Pop-Up Blocker (this tells you how welcome pop ups are to users).

6. Use Plain Vanilla Fonts

Have you ever heard of fonts such as Neuropolitical? No? Well it exists and it is a fanciful font with a futuristic typography to it. You might be surprise to know that I am actually discouraging you from using such fanciful fonts. Why? Can you imagine the frustration for your users of having to read your entire website in default times new roman all because they do not have the font you used installed on their machines. Restrict the usage of such fanciful fonts to your graphical designs only. Stick to the good old combo of Arial, Verdana and Tahoma.

7. No revolutionary plug-ins

For those who have never heard of the word plug – in , do not be alarmed it is simply a executable such as a program or animation or audio/video stream that requires an external software to be installed or plugged in (hence the name) into your computer to run.

Most web designers would jump at the chance of using as many plug-ins some of which have never even been heard of before. They think that this fanciful plug-ins would impress the user however more often then not the opposite occurs. It draws visitors away from your website. No one likes to wait for an extra minute or two to allow software to download on their computer only to watch some senseless animation or listen to some audio which has no importance to the website’s core purpose. Have you ever seen websites like Yahoo! Google or Lycos? You will notice they do not have plug-ins at all. However like everything else in this world, there are exceptions even when it comes to plug-ins. For example, if you would like to use animation on your website you can use Macromedia Flash and you can create a link from your site to enable users to download its plug in via Macromedia’s website so they can view your site’s Flash content.

8. Never underestimate meta tags

Meta tags are a group of special key words which are used to describe some aspects of the content of your site. It is widely used in HTML based websites. The information that is provided within a meta tag will enable search engines to index your webpage so that people using the search engine to search for a particular information might be able to find it on your page more easily. In short, meta tags when properly chosen can help your webpage gain more exposure and better listings on search engines.

9. User is King

Like every business in the real world, the customer is always right and so it is on the Internet. Keep your customers happy and focus on providing services and features on your website which focus on adding value to your customer’s experience when they visit your website. How can you do that? Simple, just make sure you have a good storefront for your website and if you are selling services make sure your customers can easily find the service they need and get prompt service from you. Always remember to put your customers at the front of your mind! It can make all the difference between a casual surfer and a serious customer.

10. K.I.S.S. – Keep It Simple Stupid

This is the most common abbreviation we have all come across at one point or another in our lives. Yet, it holds so much of truth in it. Simplicity in anything; especially a website is the key to making it a huge success. Flashy graphics and fancy navigation may all be eye candy however, they serve no real purpose and in no way do they contribute to the website’s ability to draw visitors. Even if the website does draw in visitors it is mostly casual surfers who are just there to check out the website’s functionality and not actually utilize its services or buy from it.

Optimizing Flash Files For Search Engine Ranking

Flash Web Sites can be Optimized and Rank in Search Engines. Flash content is now ranking highly for some very competitive search terms. For example, a search on Google for the term 'luxury caribbean resort' returns http://www.parrotcay.como.bz is as the number 2 result (as of 3/26/06). If you search for the term, 'court room', http://www.courtroomtools.com is returned as the number 3 result in Google. This is a clear indication that Flash driven web site can be optimized and rank well with proper development and optimization techniques.

What is a Flash Movie?

A flash movie, or shock wave file (SWF), is the file format published when a Flash movie is exported. A SWF file can also be exported by several other Macromedia or Adobe Products. The SWF is usually an animation, dynamic menu, or highly interactive web-based application embedded into an HTML page. Flash files, when exported correctly for the best web-based optimization, are compressed, thus making their file size lightweight. The SWF format is ideal for presenting vector-based, interactive and animated graphics with sound and video for the web. Vector images are ideal because they will not "pixilize" if stretched or compressed. Flash files can also contain text which can be animated, static or dynamically populated from external sources, such an XML file or a database. Text embedded in a Flash file, for many years, could not be read by search engines. However, recent updates by Macromedia are making this a possibility.

Problems with Flash and Search Engines

Historically, it has been difficult to get Flash content indexed and ranked by search engines. In the past, search engines, such as Yahoo and Google, did not spider Flash content as they could not read the compressed file and much of the text inside the SWF appeared as graphics to the search engines.

The main page of a web site, if Flash-based, rarely ranked well, unless off-page factors such as link popularity or link reputation were sufficient enough to carry the page. Flash files that were indexed by Google, Lycos and other search engines, which did not have any text or key words associated with them in the search engine results pages (SERP).

Techniques Used in the Past to Make Flash Visible to Search Engines
Traditional Search Engine Optimization (SEO) techniques would help your site get indexed, but not rank for search terms. Every web site needs at least one HTML page to load into a browser. For a web site developed completely in Flash, developers would embed their flash files into an HTML document and then create the meta tags in the head section of the HTML file. They would also add descriptive HTML text for the search engines in the body section of the HTML page, then use CSS positioning and percentages to load the Flash move in a pixel-perfect location over the top of text. This particular technique should not be used any longer, as search engines will view this technique as an attempt to add hidden text, and hidden text will incur a penalty from the engines.

Another technique which could help your Flash ranking is to not compress your SWF files. One of the reasons search engines could not read flash files in the past is that the files are compressed. If the SWF is uncompressed, search engines can read the static text. This technique can be accomplished easily. Upon exporting a Flash file, you can set the compression to "not" if you want your text inside the Flash movie to be readable by the search spiders. However, this is not a good practice, as not compressing your SWF will increase the file size, consequently negating a major benefit to Flash file - a lightweight file.

What Macromedia has Done to Make Flash More Visible to Search Engines
In the past, Google did index Flash files. Anyone can test this fact out by searching in Google using the "filetype" operator to restrict your search. For example, try the following search: "Casino Games filetype:SWF". The SERP will include over 200 Flash files, which are indicated by the "Flash" text to the left of the listing.

Some search engines are now using the Macromedia Flash Search Engine SDK (Software Development Kit). For example, Google, AllTheWeb, Lycos, and other sites can readily display links to Flash content. Flash Search SDK is and open source tool that allows search engines to modify it to suit their needs. With this level of customization, it is likely that the major search engines will modify SDK, making it difficult for website owners to know exactly what information will be pulled out of the SWF file or how it will impact actual rankings.

The Macromedia Flash Search Engine SDK can be found at http://www.macromedia.com/software/flash/download/search_engine. According to the Macromedia/Adobe web site, The SDK includes an application named 'swf2HTML'. Swf2HTML extracts text and links from a Macromedia Flash SWF file, and returns the data to an HTML document. Swf2HTML is provided as a compiled application and as a static library for linked library implementation. SDK can interoperate any links that are in the action script so long as adhere to the following criteria:

- The link is contained within single quotes (' ') or double quotes (" "), and

- The link prefix is HTTP, and

- The link suffix is HTM, HTML, CFM, SWF, JPG, JPEG, MP3, or WAV

By default SDK extracts the following text from your flash file:

- Text on stage in the current movie (dynamic text, static text, or input text that has an initial value assigned)

- Text on stage in a movie that is called with movieClip.attachMovie()
Google can see certain text in Flash files now, but how and where certain text gets extracted depends on what you do with that text in the Flash presentation.

For example, text that is static or is used in a motion tween can be read as a single instance with SDK. However, some animation involves converting text into a symbol and then using multiple copies of that symbol to achieve a desired effect. This will create duplicate instances of your text to the SDK output, which may be viewed as duplicate content and not given much importance by Google.

Using the SDK tool, any developer can get the text output from the SWF and see how search engines view the extractable text of any SWF. On a Windows operating system, you can go to the DOS prompt and execute the swf2HTML application very easily. The following is an example from the DOS prompt: C:\sdk\swf2HTML -o test.HTML C:\sdk\crt_webfiles\test.swf

Search Engine Optimization (SEO) Techniques Used Historically for Flash
Each Flash file does not need to be uploaded independently and called as a SWF file; rather a Flash file can be embedded in a standard HTML document. One of the best techniques is to create a modular web site, where there are several Flash files which make up the web page combined with standard HTML elements. A hybrid site such as this, works especially well, if your navigation uses traditional HTML links. You can use cascading style sheets to give the appearance of flash text links. This type of hybrid site will always rank better than an all Flash site - all other factors being equal. It's also important to have your HTML page title correct, regardless of anything else. Several search engines look at meta titles first. In addition to the page title, you can add meta tags to the head of the file. Outside of the actual HTML page, off page factors are important. There has been much written in recent articles that reciprocal links are not as important any longer, but certainly, one-way links pointing to your site from highly relevant and high ranking pages will increase your page rank. In addition links from prominent directories, such as Yahoo and Business.com, placed in the most relevant categories will help. One-way inbound links from relevant sites is still the best way to increase your ranking with or without Flash.

There are programming techniques which work while in the Flash authoring environment. While you are in the Flash authoring environment, with your FLA open...click F12. It will generate the HTML page for you. Look at the code of the page; it creates a place for you to put the text and URL's used in the Flash.

New SEO Techniques for Flash

Today there are many techniques which can overcome the limitations of the past, where Flash files are concerned. With the inception of the new Macromedia Flash 8, there are techniques which can be implemented to greatly increase the ability of search engines to index Flash files and even rank for key words.

In the past, SWF files could not have titles. This is one important reason why Flash files didn't rank well. This title limitation has now changed. Flash 8 does allow you to input meta data. Flash 8 defines two fields with meta data for all Flash files. These two fields are Title and Description. You can access the meta data fields under Document Properties. To add meta data, fill in the text fields and the search engines will know what info to display about your Flash file.

SDK is fairly intelligent in terms of recognizing text and links that are embedded in the file. If text is static or dynamically driven by an XML or text file, it can be read. If your content is dynamically driven it must be done so using the latest version of ActionScript 2.0. The SDK does parse ActionScript 2 byte code looking for links. It could conceivably find the link to the XML file that way and hand it back to a search engine.

As referenced earlier, certain text can be modified into a symbol rather than strait text. For example, a button might have the text output two or three times. Alternatively, tweened text has motion associated with the action. Tweens result in a single occurrence in the output from the extraction process. You should also notice that the link text in the Google results page is identical to the first couple of lines of text at the very top of the text extracted by swf2HTML. Armed with the knowledge of how SDK parses your content, you can manipulate text in your Flash Movies more carefully and make your content key word dense, easily indexable, search engine friendly and, with a little more skill, even optimized.

What is the gist of all this? Flash is still not the best solution for a pure SEO-based project, but their have been giant leaps forward by both the search engines and Macromedia in allowing your flash files to be indexed and even rank for the key word phrases you covet. This Article was written by Mike Goldstein. Mike is the SEO Manager at Rock Coast Media, (http://www.rockcoastmedia.com) a Boston-Area search engine marketing firm that provides results-driven custom search marketing solutions. Read more Search Engine Marketing Articles from Rock Coast Media.

Designing Web Site

Web design is the design of web pages, websites and web applications using HTML, CSS, Images, and other Media collectively.

Web design is comparable with web development, which includes web server configuration, writing web applications in order to put it to use, and server security.

A website is a collection that’s a group of things or people working together in one place of information about a particular topic or subject. Designing a website is defined as the preparation and the bringing of something into existence of web pages that face in a particular direction to make up a website. A web page consists of definite knowledge for which the website is built up. For example, a website might be compared to a small booklet, where each page of the booklet is a web page of the site.

A website in most cases consists of text and images. The first page of a website is known as the Index or Home Page. Some websites use what is called a Come into Page. These pages could include a welcome message, language-country region selection. Each web page within a website is an HTML file. And if it is created on a desktop and saved to a disc and on the server side it is commonly called a directory or file directory which has its own URL path with an extension. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks such as button, image maps and contextual links.

Once a website is completed, it must be published or uploaded in order to be viewable to the public over the internet. This is done using an FTP client or through the web browser. Once published the webmaster may use a variety of techniques to increase the traffic or hits that the website receives. This may include submitting the website to search engines such as Google®, Yahoo® MSN® and many others, exchanging links with other websites and creating affiliations or associations with similar websites.

A comparison with others there is new procedure or skill for creating websites which is called Remote meaning operated or performed from a distance Scripting has allowed more dynamic meaning a sense of purpose and use of the web without use of Flash meaning to emit light or move quickly or other specialized plug-ins. The most important although not well known, various techniques is Ajax®, which is a sever side script l

Cascading Style Sheets (CSS) Website Design

Cascading Style Sheets (or CSS for short) have slowly but surely become a website design standard over the past few years. It was not that many years ago that people used Frames to position their content across their web pages and Tables gradually replaced this. Many low-end website developers are still very comfortable with Tables, as it ‘does what it says on the tin’. However, more and more people are now moving over to CSS, as virtually all the layout options can be achieved using the code.

One major problem with CSS is that not all Web browsers produce the same results and it has not been helped in the past by the various browsers employing their own way of interpreting certain CSS conventions. You can think your CSS design looks OK in the current version of your preferred browser and can then be crestfallen when you view your Web pages in another version that has destroyed the formatting. Therefore, when moving over to CSS, it is important that you use the capabilities that are consistently supported across the entire range of popular browsers. It is interesting that the new version 7 of Microsoft's Internet Explorer has fixed a number of earlier anomalies, but many people are now waking up to the reality that IE7 has in fact caused problems arising from their earlier workarounds!

So why not bother with CSS, if Tables work for you? The principal advantages are as follows:

1. Web page code is generally much easier to follow;

2. The amount of code used to achieve the same result is much less. The general view is that by switching to a CSS layout, the typical page size reduction is between 50 - 60 per cent;

3. Download speeds for CSS pages are generally faster than their Table-driven counterparts. This is because browsers have to read through the table code twice before they are able to display the contents. They do this firstly to figure out the structure and then again to understand the content. It should also be recognised that a Table's contents can only be presented to the screen in one go, whereas CSS content will drop in separately, thereby giving a better user experience. It is also possible to govern the order in which specific screen elements appear, so the user is not distracted by the more bulky and slower to load image files. Furthermore, because all the code involved with CSS page layout is held in one external CSS document and is cached, it is faster than Table layouts that need to be interpreted every time a new page is displayed;

4. It is much easier to edit existing pages and to add new pages, particularly in the area of subtle formatting amendments. For example, you can change the font or colour scheme across an entire website in literally minutes;

5. CSS delivers enhanced accessibility. In recent years the number of people using web browsers on hand-held devices has risen significantly and CSS plays an important function in delivering content to PDA's etc through additional CSS documents. This just isn't possible with Table-driven layouts;

6. CSS is considered to be more Search Engine friendly because they can spider CSS pages quicker. However, it remains to be seen if this has any tangible benefits such as an improvement on the your page ranking.

On the flipside, there are a few disadvantages to CSS web page design you should consider:

1. As compared with Tables, CSS involves a much bigger learning curve;

2. Because of cross browser support issues, the time spent implementing workarounds should not be underestimated;

3. New browser versions can catch website developers napping if you are not careful. You can find that earlier workarounds have been overcome and the look of your website has changed overnight.

Ultimately, your decision on whether or not to move over to see CSS will probably depend on your level of technical capability and the time you're able to devote to understanding CSS layout alternatives.

Summary

There has been an inexorable shift away from Table-driven website designs to a Cascading Style Sheet (CSS) approach. Ultimately, it is a personal decision whether to take the leap, as there are no particular technical imperatives to do so right now. But will this all change in the future?

About the author: Nigel Robinson is Product Manager with Fetcher the UK’s products and services directory. He is also a freelancer with Web Affinity

Adhering to Web Standards to Improve Business

Taking web standards into account when designing a web site may not be a primary concern for many site owners, but when it comes to finding an extra edge to improve their business, they are more than willing to do anything required to increase revenues. Let's see how complying with Web standards can help a business web site.

What are the Web Standards?

On the Web, the main standards are the languages used when creating web sites. The most wide-spread ones are HTML, XHTML and CSS. HTML or XHTML are used to create the backbone of web sites - the structure. CSS, in turn, is used to style, format and position the structure and content.

What is Web Standards Compliance?

Put simply, web standards compliance is using web languages correctly. This involves using HTML tags properly and the way they were and are intended to be used. For instance, one of the most common mistakes against the web standards is using table tags for layout, while the correct usage is to use them only for tabular data (information to be put in tables).

Advantages of Web Standards Compliance

Creating quality, Web standards compliant code has a number of benefits:

•Web site forward compatibility •Web site increased site download speed •Web site browser compatibility •Web site easier site maintenance •Web site broader target audience

The Power of CSS

by CLIFF RITTER

CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied. It is also always critical to always keep in mind your target audience and the average internet connection speed these users have. By using styles sheets to their full advantage, you can help keep your web page size down to a minimum.

When you sit down to think about the sitemap and the navigational structure of your website, you should consider using cascading style sheets wherever possible. This includes everything from your text attributes to your table padding. Each page you create should be tailored around one or two keyword phrases in order to maximize the relevancy of the content being displayed to the various internet browsers surfing your website. Using this technique allows you to have a web page which, in the search engines spiders view, only contains html and keyword rich text.

Let’s use an example to illustrate the power and capability of cascading style sheets.

Graphic Buttons with Rollover: In the past we created rollover buttons using graphics programs like Adobe Photoshop and/or Macromedia Fireworks, and embedded them on our web page with all the unfriendly code that is needed for the rollover effect. The problem with doing this can be two-fold. First, search engines prefer text links because text is always optimal and you can also put your desired keywords in the text of the link, which can help boost your rankings. Images are also seen as inferior to html, since search engine spiders are not able to scan images as effectively as plain text. When you create navigation with graphical buttons, you lose out on both of these benefits and risk having some of your web pages not indexed by the search engine spiders. This is why well-optimized web pages have text links at the bottom of the page; text makes it easier for search engines to spider your site and compensate for the primary navigation menu.

CSS allows you to create these buttons without having any images visible on your html code (which is where search engines spider). Furthermore, you can embed your desired keyword phrase(s) as the text for your links. Try these steps and you will see how easy it is to simulate the rollover button effect, how much more effective your web site will be for the desired targeted keywords and how much faster your web page will be to load.

Your CSS Code: In CSS you have the ability to create a background image on a particular style. Create your table with an individual cell for each link. In your CSS styles, you need to update the a:link and a:hover styles. For the a:link, make the graphic you have created to act as your button and/or the background image for that style. Then update the font attributes so the text will be visible on top of the background image. On the a:hover style, put the over state of the button as the background of that style and update the font attributes so you can see the text on the page. This is what your actual CSS code should look like for the a:link and a:hover styles:

a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; text-decoration: underline; color: #000000; font-weight: bold; width: 175px; height: 100px; background-image: url(images/home-button.gif); background-repeat: no-repeat; }

a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; text-decoration: underline; color: #006699; font-weight: bold; width: 175px; height: 100px; background-image: url(images/home-button-over.gif); background-repeat: no-repeat; }

This effect creates the perception of a rollover image. To site visitors, it will appear to be a regular rollover button created out of two graphics. The only difference is your cascading style sheet contains the images for both states of the link. This way when search engine spiders visit your website, they will only see clean html code – without any images used for navigation – and your keyword-rich text. As well, your web page should load much faster and be compatible with anyone still using an old dial-up connection.

CSS Above and Beyond: With cascading style sheets, as outlined above, you can create the perception to the user that images are present on the actual page when they are really embedded right into your cascading style sheet. Lets take the rollover button effect one step further. Suppose you want to manipulate your web page code in a way that your relevant keyword phrase(s) appear at the top of the page. With CSS, you have the ability to do this with ease. CSS allows you not only to adjust font and color attributes, but you can also adjust the spacing and alignment of certain elements on your web page. So with this in mind, creating your table structure using

tags allows you to layout your page in a way that the search engine spiders see your important, relevant keyword phrase(s) ahead of your tables and images. The next step is to incorporate your cascading style sheet so you can still use a header designed using graphics, while placing your important keyword phrase(s) at the top of your web page which search engines love. In your style sheet, add these two styles:

#header{ width: 373px; height: 53px; background-image: url(header.gif); background-repeat: no-repeat; color: f7f7f7; }

h1{ text-indent: -100em; margin:0px,0px,0px,0px; }

As you can see, in the #header style, we have included the dimensions of the image along with including the image you want to serve as your header as the background for this style. Make sure you input the correct dimensions for the header image. This needs to be accurate as the style sheet will only display what can fit in the outlined dimensions and will also affect the spacing of your tables and web page. On the h1 style, we have indicated we do not want the text visible on the web page, rather the header image we created which is contained in the #header style. We are able to do this by using the text-indent: -100em attribute of the h1 style. You also want to include the margin attribute so you avoid any unwanted spacing underneath the text contained in the

tag. Then, on your actual web page, put your keywords at the top of the page in an

tag and include the #header style. This is what your code should look like for the text you are trying to display as an

while displaying only the header graphic. (

YOUR IMPORTANT KEYWORD PHRASE

). This can give you a HUGE advantage when trying to optimize a website for a very competitive category and achieve top 10 search engine rankings by making your keywords visible right at the top of the page, in an

tag, while actually displaying a nice header graphic to the person browsing your website. Although many changes have occurred in the last few weeks in terms of Yahoo! adopting their own search engine spider and listings, Google making the switch to geo targeting and the ever growing importance in maintaining quality, theme related link partners, the placement of your keywords is still an important factor in adding to your search engine optimization and ranking success.

Another good practice when designing web pages using CSS is to make sure your web page conforms to W3 standards for both HTML and CSS. This is critical in ensuring your website works across all platforms and browsers and also helps to ensure ALL search engine spiders can index your site easily and effectively. There really is nothing worse then directing a few hundred hits per day in search engine traffic and having 50% of those people unable to view your website because of poor coding, corrupted style sheets or broken links. Always test your web site and have a friend navigate through your website both on a MAC and PC to ensure there are in fact no broken links and all pages are easily accessible and error free.

The power of cascading style sheets is incredible. The above example only scratches the surface of how much you can do for your page in terms of accessibility, functionality, speed and clean html. You can adjust your scrollbar, background image, and even the padding of your tables all in your style sheet. The only key is that you create an external css and link it from the web page using those styles file ( ). This way, you don’t add any cumbersome code on your page that will risk confusing the search engine spiders and use CSS to its full advantage.

By adjusting all these attributes in an externally linked css file, you are keeping your web page small in physical size along with ensuring good clean html code which as we have mentioned above, search engine spiders love! As well, css makes life MUCH easier on the web designer when future updates need to be made. It is far more efficient to manage a website using cascading style sheets then one that contains good old font tags.

Written By: Cliff Ritter, President of Logicalsense.ca

What you need to know about CSS?!

What you need to know about CSS!

Style sheet is a progressive breakthrough for the advancement of web. Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets have become – apparent -- and the disadvantage of continually creating more HTML tags -- galore -- for presentation effects with the gradual development of CSS.

Let's understand CSS in the right perspective.

Style sheets in retrospect

Style sheets have been around in one form or another since the beginnings of HTML in the early 1990s.

As the HTML language grew, however, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers . With such capabilities, style sheets became less important, and an external language for the purposes of defining style attributes was not widely accepted until the development of CSS.

Teething problems with implementation of CSS

Many implementations of CSS are fraught with inconsistencies, bugs and other Authors have commonly had to use hacks and workarounds in order to obtain consistent results across web browsers and platforms.

One of the most well-known CSS bugs is the Internet Explorer box model bug; box widths are interpreted incorrectly in several versions of the browser, resulting in blocks which appear as expected in most browsers, but are too narrow when viewed in Internet Explorer. The bug can be avoided, but not without some cost in terms of functionality.

This is just one of hundreds of CSS bugs that have been documented in various versions of Internet Explorer,Netscape Mozilla , and Opera, many of which reduce the legibility of documents. The proliferation of such bugs in CSS implementations has made it difficult for designers to achieve a consistent appearance across platforms.

Currently there is strong competition between Mozilla's Gecko layout engine, Opera's Presto layout engine, and the KHTML engine used in both Apple's Safari and the Linux Konqueror browsers - each of them is leading in different aspects of CSS. Internet Explorer remains the worst at rendering CSS by standards set down by World Wide Web Consortium as of 2005.

Some breakthroughs …

These problems have preisely led the W3C to revise the CSS2 standard into CSS2.1, which may be regarded as something of a working snapshot of current CSS support. CSS2 properties which no browser had successfully implemented were dropped, and in a few cases, defined behaviours were changed to bring the standard into line with the predominant existing implementations..

What makes style sheets significant enough?

Style sheet represents an enormous step forward for the Web. With the separation of content and presentation between HTML and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users

A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.

Functionality and Usage of CSS

CSS is well-designed to allow the separation of presentation and structure. Prior to CSS, nearly all of the presentational attributes of an HTML document were contained within the HTML code; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, in the midst of the HTML code.

CSS allows authors to move much of that information to a stylesheet, resulting in considerably simpler HTML code. The HTML documents become much smaller and web browsers will usually cache sites' CSS stylesheets. This leads to a reduction in network traffic and noticeably quicker page downloads.

For example, the HTML element h2 specifies that the text contained within it is a level two heading. It has a lower level of importance than h1 headings, but a higher level of importance than h3 headings. This aspect of the h2 element is structural .

Customarily, headings are rendered in decreasing order of size, with h1 as the largest, because larger headings are usually interpreted to have greater importance than smaller ones. Headings are also typically rendered in a bold font in order to give them additional emphasis. The h2 element may be rendered in bold face, and in a font larger than h3 but smaller than h1 . This aspect of the h2 element is presentational .

Prior to CSS, document authors who wanted to assign a specific color, font, size, or other characteristic to all h2 headings had to use the HTML font element for each occurrence of that heading type.

Moreover, CSS can be used with XML, to allow such structured documents to be rendered with full stylistic control over layout, typography, color, and so forth in any suitable user agent or web browser.

CSS has its share of inconsistencies as well

CSS may at times be misused, particularly by the author of web documents. Some developers who are accustomed to designing documents strictly in HTML may overlook or ignore the enabling features of CSS. For instance, a document author who is comfortable with HTML markup that mixes presentation with structure may opt to use strictly embedded CSS styles in all documents. While this may be an improvement over using deprecated HTML presentational markup, it suffers from some of the same problems that mixed-markup HTML does; specifically, it entails a similar amount of document maintenance.

Discrepancies compared: CSS vs programming languages

CSS also shares some pitfalls common with programming languages. In particular, the problem of choosing appropriate names for CSS classes and identifiers may afflict CSS authors. In the attempt to choose descriptive names for CSS classes, authors might associate the class name with desired presentational attributes; for example, a CSS class to be applied to emphasized text might be named "bigred," implying that it is rendered in a large red font.

While such a choice of naming may be intuitive to the document author, it can cause problems if the author later decides that the emphasized text should instead be green; the author is left with a CSS class called "bigred" that describes something that is green. In this instance, a more appropriate class name might have been "emphasized," to better describe the purpose or intent of the class, rather than the appearance of elements of that class.

In a programming language, such a misuse might be analogous to using a variable name "five" for a variable which contains the value 5; however, if the value of the variable changes to 7, the name is no longer appropriate.

CSS in a nutshell

CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document structure (written in HTML or a similar markup language) from document presentation (written in CSS).

This separation provides a number of benefits, including improved content accessibility, greater flexibility and control in the specification of presentational characteristics, and reduced complexity of the structural content. CSS is also capable of controlling the document's style separately in alternative rendering methods, such as on-screen in print, by voice (when read out by a speech-based browser or screen reader) and on braille based, tactile devices.

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure.

Deepak Sharma is a Web Designer at BlueApple, a Web Design and Development Company with a well connected development infrastructure in India having a strong offering superior web services and solutions at competitive costs.

Web Page Design for Search Engine Optimization

by ROBERT BELL

Most people agree that content is the most important factor that the search engines consider when they rank a page but many do not know that the web page design is also of paramount importance when it comes to search engine optimization.

The first thing to consider when optimizing a page's design is the page size. Most modern designers are using Cascading Style Sheets (CSS) to keep the page size small and tidy. Web pages designed by conventional tables can take up a lot of disk space. Thus, extending the indexing time required for a page.

Internal site navigation is also important as this is the only way to allow the spiders to follow through and index all the pages. Using textlinks for navigation menu is the most reliable way to ensure that search engine bots will not miss out any pages. However, if a fanciful JavaScript or Flash menu must be used, the site owner can include a textlink version at the bottom of the pages for bots indexing.

It is also advisable to avoid using frames on web pages. Frame-based page does not allow for unique URLs, which makes indexing pages separately problematic. Although there are ways to get around this problem, Google has also suggested web masters to avoid using frames.

Some Search Engine Optimizers have found that the search engines do consider where does the content on a page appears. Most search engine classify content nearer to the top as more important than anywhere else. Therefore, many web masters place their content right after the header. Some even go to the extend of using CSS positioning technique to generate a content-first template so that the content will appear before any navigation menu.

Search engines are known to ignore Flash powered sites as the bots cannot index the content inside a Flash plug-in. Therefore, it is advised to create a HTML based site with minimum Flash plug-ins than to have a full Flash site.

In conclusion, keeping a web page simple in design will help to facilitate the indexing of the content by the search engine bots. As far as SEO is concerned, a simple web page design with rich content is the key. KC is a SEO consultant with several years of related experiences. His advice has helped several Webmasters to increase their SERP. KC is the Founder of the free CSS templates website. KC also has a site providing free SEO techniques.

Why Use Cascading Style Sheets (CSS)?

This article explains the advantages that using CSS can bring to a website.

CSS are sadly not currently used by a large percentage of web designers. "Style" tags are much more commonplace, but utilising a separate style sheet to your XHTML code is far more beneficial than adding a separate line of code to each element of your page code to define its look. Besides, the clue is in the name, Cascading Style Sheets are meant to cascade down through multiple pages of your site - designers that use "Style" tags are missing the point.

An obvious advantage of using an independent style sheet for a web site is that it eliminates many lines of code from your pages, as multiple pages can reference the same style sheet. This means that download speeds for users are faster, and bandwidth is subsequently reduced, especially for sites where many pages are viewed per user visit.

CSS have many more features than this though. By using a single independent style sheet, the look of all the pages it references can be changed in seconds. For a designer this eliminates a large amount of copy-coding time and is the best tool for testing various superficial changes. Want to change your headings from Arial font to Verdana? You only need to change one line of code and it's reflected in all the pages that the stylesheet is referenced from.

Just like with style tags, utilising CSS you can change the look of any of your page elements, from images, tables, forms, horizontal rules, the list goes on. You can change them all with one line of code as mentioned above, or set up various classes for when you require variations. Therefore you could have a form where the buttons are blue with a white border, but then another form with white buttons with a blue border, to suit their surroundings appropriately.

The main benefit that can come from using a separate style sheet is the ability to create layouts using div classes to position elements freely on a page. This is a far superior and modern alternative to outdated layout methods, such as tables and frames. CSS layouts can give unparallelled precision and flexibility to a designer.

A much overlooked or misused feature from independent style sheets is using multiple stylesheets for the same HTML page, offering a completely different look and feel to a site.

These two pages use exactly the same XHTML base page, but are using different style sheets. This is a prime example of how different a page can look when the images and colours are changed.

Using this feature you can offer your site visitors a variety of page displays depending on their personal preference. It can also be used for more useful purposes, such as offering a "print" layout for printing out your pages without having to waste ink on superfluous image content.

Coupled with a valid XHTML site, CSS can be a very valuable tool when in the right hands.

Every web designer should be encouraged to use it and reap its many rewards.

Why CSS WILL save your online business?

by JAMES KINSLEY

Weather you are getting traffic to your site or not, CSS has many benefits you simply cannot live without. It will create a better user experience and also could be the deciding factor in the order of the top 10 Google ranking sites for your keywords.

CSS is vital to your websites success. The online world is very competitive so you need every edge you can get. In the constant battle for search engine domination, every single factor in your SEO campaign must be considered essential. CSS is without a doubt vital to your rankings. CSS has advantages as a coding practice because:- • The style of a whole website can be changed by editing one file (saving hours of re-coding) •
Code size is cut down and therefore so are loading times • Users of different browsers see the same end result when your page is loaded • It also has SEO benefits! (as discussed below) CSS files are a way to define the appearance of all/many of your web pages from one file.

This is great because it means that you can change the color of all the text in your website at once, or change its size. You can exercise a vast amount of control over the looks of your site from background color to the space between lines of text from just one CSS file! Having all these controls in an external file also makes your HTML code as small and simple as possible. Search engines love it. Your page code is cut down heavily and this will increase the prominence of your keywords. The more prominent a keyword is, the higher you will rank in search engine results. CSS could be just what you need to push your website to page one search results. CSS will also increase the download speed of your website.

This is a great advantage as visitors will often be put off by a slowly loading page. One massive advantage of CSS files are that they allows for web pages to be cross-browser compatible. In other words, the webpage is displayed exactly the same in, for example, internet explorer as it is in Firefox. You may not have known that there were differences, as it seems ridiculous, however different browsers interpret code differently and so display pages differently. Before implementing CSS, some websites look fine in Internet Explorer 6 but that are almost unreadable in Firefox and vice versa.

CSS files are read the same in all browsers and so you know what your users will be looking at when you publish a page using CSS.

Successful CSS template skins

by Saul Dobney

The CSS mantra is the separation of content and style. The content should be in the HTML and the CSS should take care of how the HTML is displayed on the page. However, most web-designs don't properly separate content and style. The HTML and CSS are there separately, but if you changed the HTML, the styling would fall apart because the CSS relies on elements in the HTML to do it's job properly.

Now this will not matter to anyone putting together a few fixed pages of content which are not going to change appreciably who will benefit from using the CSS for simple tweaks and to ensure accessibility criteria are met.

But if with a site that is properly managed and regularly refreshed and with a lot of dynamic content then it is important that it can be reskinned and adjusted without having to edit the HTML in every page, and without throwing out all the content so far accumulated. CSS is the answer, but only if the content is fully separated from style.

To have sites which have fully switchable CSS skins it is necessary to recognise that in any HTML there are actually two separate elements. There is the content: the text and images that people will read; and the page structure - that is the DIVs (or table) that defines the different elements on the page.

To be successful with CSS skins, the structural elements of the HTML page need to be planned and implemented so as to allow the CSS to make changes to the page regardless of the content.

To take an example, most pages will have a Header, a Left Column, a Main Area, a Right Column and a Footer. These are structural elements of the page. Into each of these structural elements you will place content - for example the company logo into the header, a menu into the left column, the main text into the main area and so on.

With the page considered in this structured way then the CSS can then target specific blocks or areas on the page, without worrying about the content. If the left column text is at 10px and the main area at 12px, you can target these in the CSS with things like .left p { font-size:10px } .main p { font-size:12px }

This means that so long as the pages have the same basic structural elements they can be radically switched around purely with CSS - for example make the left column float left, add background images to the header or main area and so on.

But recognising that HTML contains both structure and content is stage one. To generalise further needs a page structure that is almost flexible enough so that the CSS can produce almost any effect necessary, again without worrying about the content held in each area.

To do this, the basic structures need to be sub-divided one stage further. Within the header DIV for instance splitting out three internal DIVs - left, main, right, will cover almost all the possible combinations you will need to get the CSS to display in any style you want. You just need to place the content in the relevant area.

The benefit of this three part split is that all the standard fancy header tricks such as fade backgrounds to solid color, background images to add rounded corners, gradients in and out of images can now be accomplished just with CSS (use background: URL(); width: to accomplish anything you want). The inner DIVs can also be floated to place one image on top of another.

If this approach is applied to the other structural areas in the HTML, then you have a page where the layout is fully defined by the CSS and completely independent of the actual page content.

10 Great things NOT to do with Google AdSense

by Diane Nassy

There is no question that you can make some good money with Google AdSense, but you're setting yourself up for disaster if you make any of these Top 10 mistakes!

1. Do not use fake information when opening your Google AdSense account.

Google says that's a no-no and they will cut your account off and keep all the money you may have earned. Besides, trying to hide your true identity can cause serious problems with the I.R.S. or whoever your tax authority is.

2. Do not hack or modify Google AdSense code other than to change the parameters that Google authorizes you to change.

Any attempt to bypass Google's built-in algorithms not only poses a danger to the integrity of the network, but it threatens the financial modle that Google operates under. You're not dealing with some Mom-and-Pop company here, and Google has the legal muscle and deep enough pockets to drag you through every court in the land if you damage their business with your hacking antics.

3. Keep AdSense ads off of your registration, confirmation, and all "thank you" pages.

Don't ask me why you can't put your ads there. It makes sense to me that those would be wonderful locations. Google thinks otherwise, however, and doing so is a hanging offense according to their Terms of Service.

4. Do not display AdSense ads and a competitor's ads (like Overture's) on the same page at the same time.

That just makes plain good sense. Google doesn't demand 100% SITE loyalty from you, but they do insist that their own ads not be cluttered up by offerings from their competitors.

5. Don't "beg for clicks" or provide any incentive for clicking on your Google AdSense ads.

This is a biggie and you see this rule violated all the time. Any of the "get paid to do stuff" sites that put Google ads in the member's control panels are walking the plank and they don't even realize it. Even those sites with the polite little messages asking you to "help keep my site running by clicking on our sponsor's ads" are asking to be cut off if those happen to be Google ads.

6. Never click on the ads running on your own site, even if you are genuinely interested in the product or service and are thinking of buying it!

Nothing screams FRAUD louder than a webmaster running up his or her own click counts by happily clicking on ads fromtheir own site. The Google Gods can track this activity and it won't be long until you find yourself getting a goodbye note from their fraud team.

7. No misleading labeling

Google is very specific about what text can be placed around their ads. Their Terms of Service state: "Publishers may not label the ads with text other than 'sponsored links' or 'advertisements.' This includes any text directly above our ads that could be confused with, or attempt to be associated with Google ads."

This is to keep visitors from becoming confused and barking up Google's tree when they clicked on an ad that led to a porn site instead of the recipe site they were expecting to visit.

8. Avoid keyword spamming and other divisive tricks

You may be tempted to buy one of those "generates thousands of key-word rich pages in seconds" programs that are so popular these days but I'll tell you this: Their days are numbered. Google is wise to such shenanigans and they will be hot on your trail. Other prohibited gimmicks include:

* "Sneaky" page redirects that send a visitor off to a different site then they were expecting to visit.

* Multiple sites, domains, pages, etc. which have substantially duplicate content.

* Hidden text or links of any type.

* Excessive outbound links on any page. Google recommends no more than 100. I'd keep it way below that.

* And here is a nugget of wisdom straight from Google's mouth: "Do not participate in link schemes designed to increase your site's ranking or PageRank. In particular, avoid links to web spammers or "bad neighborhoods" on the web as your website may be affected adversely by those links.

9. Don't advertise anything on Google's prohibited items list.

It's a lot shorter lists than PayPal's or eBay's, but it includes a lot of the same stuff like hacking/cracking content, porn, illegal drugs, gambling sites, beer or hard alcohol (I guess wine is OK), weapons, and the other usual stuff.

10. And the 10th dumbest thing NOT to do with Google AdSense is to let the other nine things stop you from running an honest site that's designed to make the most out of this very profitable opportunity that Google offers!

Tables vs CSS - Which is better?

by Mike

When I started exploring the design possibilities of the internet back in 1996, NetObjects Fusion was (at that point) a revolutionary WYSIWYG editor that allowed you to place pretty much any components anywhere you wanted on the page. Unfortunately for Website Pros, Inc. Macromedia had also seen the potential in WYSIWYG editors and developed what is arguably the most popular web design tool ever - Dreamweaver.

Dreamweaver has managed to keep up with the requirements of the modern day web developer by constantly updating and improving aspects of its design, layout and functionality. With the latest release of Dreamweaver, Macromedia have again improved on various features but have also come to realise the potential and the need to support (in more detail) the new designer's technique - cascade style sheets (CSS).

Having always designed using table based layouts, I recently (less than 3 months ago in fact) decided it was time to look in more detail at CSS, to learn what it could do to improve the quality of my work, specifically in terms of positioning and layout of website elements. At that point I already had a basic understand of CSS and how to use CSS to influence text styling, link styles, table colours and borders etc. The challenge was (more clearly) to see if designing layouts using CSS instead of tables was (to me) easier and more beneficial - could I be persuaded to change despite my dedication to tables?

My choice of two books (which I'm still reading incidentally), are both written and published by Sitepoint. The first (The CSS Anthology - 101 Essential Tips, Tricks & Hacks) is an excellent practical guide, not only for beginners but also for people (like me) wanting to learn a bit more (or in fact a lot more) about the potential of CSS. Whether you want to know how to justify text, create a pure CSS drop down menu or implement a liquid, two-column layout, this book is an excellent start or continuation for anyone interested in CSS.

The second and probably more relevant book that I chose (again by Sitepoint) is the 2nd Edition HTML Utopia: Designing Without Tables using CSS. This book again goes over the basics of CSS, but in a more concise and brief manor. The main bulk of the book concentrates on more examples of positioning and layout. In short these are two books that I know I'm eventually going to read from cover to cover - two books that will always be to hand and provide the answer to my question when something goes wrong or I don't fully understand exactly what I'm doing (something that happens on a regular basis).

So what have I learnt in the last few months from reading these books, reading relational website articles and listening to peoples points of view on webmaster forums? Quite simply I was quite stubborn in the beginning. I had tried about a year ago to use CSS for layouts but hadn't got very far (although at that stage I had no books to use for reference). This time around I had the knowledge (or more accurately the books of knowledge) but was already expecting my own personal failure (based on my previous experiences). Luckily though I stuck with it and now know a lot more (although obviously not everything, by a long shot) about the potential of CSS.

Obviously (just by looking at my site) you can see that I have indeed changed from table based layouts to CSS layouts - but what truly changed my mind and would I ever go back to tables? Is this site simply a one off?

CSS: Weight loss for your code

by Sasch Mayer

One of the main drawbacks of traditional HTML web design is the tendency to produce almost insupportably large file sizes with anything but the simplest of page designs since formatting requires a substantial amount of code per component unless a rather plain 'default look' is to be retained.

Although there are a number of contributing factors, the burden of responsibility can largely be placed on the shoulders of font and other style tags which have to be added to every text element if an aesthetically pleasing result is to be achieved.

With web sites becoming more complex in their structure and appearance, this led to ever increasing document sizes as the years went on until the sheer amount of code required for presentation far outweighed the text contained within the page leading to slow loading times, a serious headache for search engine spiders and the coining of the phrase 'code to content ratio'.

Help became available to designers in the shape of CSS (Cascading Style Sheets).
Originally conceived in 1994 to provide an effective means for designers to control the appearance of their web pages, CSS became a W3C recommendation in 1998 and has been gradually gaining popularity within the web design community since about 2003.

By removing bulky text formatting code from HTML documents and placing it in a central data file which controls the appearance of the entire web site, CSS not only provides a means of achieving a more uniform overall appearance, it also serves to substantially reduce the size of each individual HTML document.

For example; to display text in a certain font, colour and in bold would require the following HTML code:
Note that < > brackets have been replaced with [ ] brackets to display the code correctly:

[font color="#0000FF" face="Arial, Helvetica, sans-serif"][strong]Example Text[/strong][/font]

Lots of code for very little content, as you can see.
With CSS controlled design however, the text can be displayed in the same manner with the use of a span tag controlled by the Style Sheet:

[span class="C1"]Example Text[/span]

Same end result, half the code.
If you repeat this process fifty or sixty times within a single page your code will be much more lightweight and easily indexed by search engines (if it is also W3C compliant).

Those of you not yet making use of Cascading Style Sheets to reduce the flab in your HTML would be well advised to read up on the technique.

How to make backgrounds for myspace?

by Brett Hull

Many people that owns myspace profiles have surely been visiting all these myspace resource sites trying to look for good backgrounds, but rarely have they found one good which they like. These people might have a photo or a drawed image that they want to implement in their profile. Sometimes, they also have a small image that they would like to use as a pattern. But they can't code themselfs.

So, what to do then? Well actually, you can easy add an image to a profile without any coding experience. It's funny that people don't know that they just can use a simple Myspace Background Generator which will do the job for them.

However, after using that generator. You will get a piece of code that you need to insert in your profile. But when you have finally done that and are looking on your profile, you might think: Hey, something is missing.

There's no transperancy. The image covers as a frame around the profile. But the background on the profile is still just white.

To make trasperancy, you must first decide; what should be transparant?

After you have decided which html-elemented that should be transperant, you might add this code inside the styletag: td, table, tr, span, li, p, div, textarea, DIV {background-color:transparent}

After you've done it, you will hopefully have a background image that fully cover your profile. If you aren't satisfied with the results, You might try to add and remove some elements until you're happy. Good Luck!

Centring Floated Divs With Clearing Divs

by Free CSS.info

When coding a website in CSS and XHTML many people like to have two columns. To get this you use the "float" attribute in your CSS. The can align one column to the left and the other to the right. What many people find troubling is having two floated columns in a centred holder. When coding a website you usually call this holder the "wrapper". Also when designing and coding a website you generally want to make the site centrally aligned. This is better for different screen resolutions. To do this we usually use the following CSS coding:

text-align:centre; - Placed in the CSS code for "body"

margin:0 auto; - Placed in the CSS code for "wrapper"

When using two column the wrapper must contain two floated divs. Since browsers interpret floats in different ways sometimes it is necessary to use a clearing div. When the wrapper is centred and the columns are floated a problem is presented to us in Firefox. The wrapper does not expand as the columns inside it do. The way we can get the wrapper to expand is to use a clearing div. A clearing div acts as a blank div placed just under the two columns to make the wrapper expand. This is a useful technique which does not involve browser hacks. To do a clearing div put the following in your CSS:

.clear { width: 100%;

height: 1px;

margin: 0 0 -1px;

clear: both; }

Now under the two columns or under a div which is not causing the wrapper to expand simple add the following code:

This is a useful and simple technique. It can be used for many different situations when coding a website.

Rollover CSS Image Menu

by Alan Who?

There are now loads of places on the Internet where one can access free CSS menu's. But of the many that are available very few suceed in replicating the prehistoric roll-over image menu using javascript image replacement techniques, with only lovely CSS. I have managed to create one that works in both decent web browsers and crap ones (Internet Explorer), view the finished CSS menu.

First I needed to remove all padding and margins from the page:

* { padding: 0em; margin: 0em; }

Then the CSS for the #nav container div:

#nav img { border: none; }
#nav li { display: inline; list-style:none; }
#nav li a { float: left; display:block; width: 37px; height: 50px; margin: 5%; }
#nav li a img { border:none; vertical-align:bottom; /* for IE6 */}
#nav li a:hover { visibility:visible; /* for IE6 */ }
#nav li a:hover img { visibility:visible; /* for IE6 */ }
#nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}

Internet Explorer requires something to happen on a:hover as well as a:hover img.

The menu list items all use different images on rollover so I defined each with a different ID on the anchor element:

#one { background:url(http://www.alanwho.com/examples/css/rollover_menu/1over.png) no-repeat left bottom; }
#two { background:url(http://www.alanwho.com/examples/css/rollover_menu/2over.png) no-repeat left bottom; }
#three { background:url(http://www.alanwho.com/examples/css/rollover_menu/3over.png) no-repeat left bottom; }
#four { background:url(http://www.alanwho.com/examples/css/rollover_menu/4over.png) no-repeat left bottom; }

Lastly I created a div with an id of nav and applied the CSS into the final XHTML:

The Final Rollover CSS Image Menu XHTML.

How To Make A Website?

by William Robinson

In todays day and age,where computer users are increasing by large numbers monthly,the website has developed as a means of self expression or as a launch point for business pursuits. There are countless ways of learning how to make a website using such tools as the WYSIWYG(What You See Is What You Get)HTML Editor.This is basically a point and click to create program.If you want a website fast,try it. Good places for these are myspace.com or your internet service provider.They can provide you with a free website where you can really be creative with there (what you see is what you get editor)

HTML stands for Hyper Text Markup Language and was the standard language when the graphical user interface(GUI)was implemented into the windows operating system. There are other languages that can be used to make a website,such as Flash,xml,dhtml and a few others.In my opinion,the most flexible language and most easy to learn is html. A great online source to learn html is html goodies(http://www.htmlgoodies.com).The online tutorials found here are second to none and range from basic to advanced.This is where I learned basic html and I recommend it to anyone who wants to learn the language.

Lets talk about the basic layout of your first page of your website. Is this a personal website? Will it be a website showcasing products that you intend to sell? If this is a personal website,You can start by having all your links on the left side of the page,your text content can be in the middle with images if you like.On the right side of the page can be more links and images.You will need to divide the page into 3 sections to accomplish this.It can be done with table commands or with the divison command.Please go to the html goodies(http://www.htmlgoodies.com)site for futher explanations of these and future terms in this article for the best clarification possible.

Now,lets say you want to make a website for your small business that your starting.For example,your going to be selling computer games. You will want people to know about your website and this entails submitting your website to the major search engines and directories,such as google,yahoo.msn,altavista and others. Here is a great list of directories,both paid and free. (http://www.seocompany.ca/directory/web-directories.html)

It is most advantageous for new online business's to register a domain name.This is important for two reasons. First,with a .com domain,your business will look professional.Secondly,from a search engine prospective,a domain name with a .com suffix is more prudent. You need to pick a domain name that is the most relevant to your business.For example,your selling computer games and accessories. How about http://www.best-computer-games.com ? You can do a search for available domain names at http://www.namesearch.com Relevancy is a big factor in how the search engines will rank your site,so keep this in mind when choosing a domain name.

You want your small business website to be informative,to the point,and to keep your viewers interested at all times they are on your website..Nothing turns off a website visitor more than the link to a page they click on(yours)to be slow loading into there web browser.

There are ways to speed up the loading process of a webpage into the web browser.If you have alot of images on your website,you should always denote the height and width of the image in the link. An Example: < src="http://www.yourpage.com/yourimage.jpg" height="175" width="60" border="0" alt=""> after the second quotation mark in the word alt.The opening tag is < alt="This is the best computer game" href="http://www.htmlgoodies.com/">http://www.htmlgoodies.com)for there image tutorial.

To keep the viewer staying on your website,you need to make sure all your links are operational and not dead links.Meaning,there is a page not found error(404) that displays when someone would click on one of your links from your main page.

Meta tags and Keywords are important so your site can receive the highest possible ranking and relevancy. To learn more about meta tags and keywords,go to html goodies(http://www.htmlgoodies.com)This is another topic all together that I wont go into in detail in this article.

I would just like to say that The WYSIWYG(What you see is what you get)html editors are good for the quick fix website,I dont get the gratification of building a website using that method. I code all my webpages by hand in windows notepad. This will take longer but I do receive more satisfaction designing my webpages this way.