About Web Pages

Package Deals | Optional Features | Tutorials | Samples

All About Web Pages ;-)

Overview

This tutorial covers web pages, how they are displayed and what you can put on them. At least some of the things you can put on them. There are so many things you can put on a web page. If you are an experienced pro at making web sites then you probably use templates for the basic design and then change the content. It's faster, cheaper and safer than starting from scratch.

Browsers

The browser is a program that web surfers use. It's running on their computer. It's a client program. Microsoft Internet Explorer, Netscape Navigator and Opera are just a few. They all have different versions that display "render" web page code differently. This is especially true when advanced functions are used. Sometimes you must make different versions of web pages for different browsers. You need to detect what browser is being used and modify your code accordingly. What a pain. Especially for someone who is just starting. There are different versions and levels of programming code. The lower the level the more likely the code will be displayed the same in different browsers. The object is to make code that breaks on a as few browsers as possible and when it breaks it will degrade gracefully. Not mess the page up or remove some critical functionality like navigation. If you are viewing this web page with an old browser the popup menus might not work.

Page Navigation

Navigation
Navigating through Web pages must be simple, obvious and consistent.
Hot spots are links that move your browser from page to page or other websites. There are many ways to navigate through a website.

Navigation buttons - This is the most common is the button. People know how to click buttons and what they do. Nothing has to pop up or slide down. Buttons add color to your page and give it style. Simple Javascript programming can change the button image.
Popup menus - Like the ones above. They can provide many links in a very compact space. They use Javascript programming. There is a single location that can be changed to effect all the pages. This is great for adding pages. They can be attached to images, text or anything that can be a normal link. They can be made to popup when the mouse goes over them or when they are clicked. Each item can have it's own sub menu.
Expandable Menu - This is similar to the popup menu but moves items in the list down showing sub menu items.
Image Map - This is an image that has several hotspots on it. Different areas of the image go to different pages. Their use can add that special look and esthetics appeal. They can also be used for maps like the Roster Optional Feature. See Samples.

If you use frames you should always include a home link on every content page. It is best to have more than one navigation system. The easiest and safest is placing simple links at the bottom of each page.

Page Layout

Frames or No Frames

A frame layout divides the viewing screen into areas called frames. Each frame displays a web page. You can tell a frames page when some of the content does not scroll with the page. The areas that no not scroll are used for logo/header and page navigation.

There are major problems with frames. Your navigation structure must fit inside the frame and they are difficult to print. If you use navigation buttons and have several pages the space needed for them can get large. This limits the area for content. Printing a frames page is difficult. If you expect your guests to print the web page do not use frames.

The advantages are:

Your company logo is always visible.
Navigation buttons are always visible.
There is no need to put navigation buttons on the content pages.
You can show other web sites inside the content frame. Webmasters can prevent this and simply take over the screen. However, many don't. We typically don't. Any hit "displaying your page in someone's browser" is a good hit.

The detriments are:

Printing a frames page requires selecting the frame to print, before printing. This is confusing to many people. If you expect your guests to print the web page do not use frames.
All navigations buttons must fit inside the frame when viewed with the smallest screen used by your guests. This rules out palm devices and severely limits their effectiveness on small monitors. If you use more than 6 or 7 buttons don't use frames.
Search engines can get confused. For example, You have a page with information that a search engine has found an indexed. However, the search engine indexed the content page, not the frame. When someone finds the information on a search engine and click the link the content page is displayed without being inside any frames. If you don't have any navigation or easy way to get back to the top frame page. A page won't display correctly and it is a dead end.
If you display other websites in your content frame, some programmers take over the entire viewing screen. This exits your web site.
The viewing area of the content pages is decreased.
Some very old browsers don't allow frames. Almost all do.

Liquid Vs Fixed Layout
Web pages are viewed using a variety of screen widths. You can take advantage of this using liquid layouts. A liquid layout flows to the viewing screen width. This takes advantage of the full screen width. However, there is a problem. Browsers seem to have more inconsistencies in rendering these layouts than fixed width page layouts. A fixed width format web page is normally centered in the screen. They typically use small text to place their content in the limited space. The majority of the pages on this site use liquid layout. If you use a large display the text will be abnormally wide.

Themes

The design of a website should reflect the look and feel of your company. Every website should have a consistent theme. The theme includes your color scheme, background, lines, dots and text style. Please see "Samples", "Themes Samples" fore some typical themes.

Style Sheets
Style sheets and themes go hand in hand to give a web site it's look and feel. Style sheets control text on a page. They control the size, font, color and layout attributes. There greatest benefit is to be able to change the text on an entire web site by changing the style sheet.

Templates
Templates make the job of creating a website easier, less time consuming and less prone to errors. A template contains the page layout. Changing a templates style sheet and theme changes the look and feel of the page. Please see "Tutorials", "All About Templates" for additional information.

Web Page Content

What do you want?
This is a difficult question. Do you need 5 pages or 10,000 pages. If you have a need for 10,000 pages, contact us and we will have a representative contact you. If you have enough content for 5 pages

There is so much functionality available and it can be put together in so many different ways. What do you want to do with it?

Organization
A web site is like a book with an index on every page. The best way to think about web site organization is a tree with branching limbs. You start at the root and can navigate through the branches.

Text

Text is the meat and potatoes of web pages. A picture is only worth a thousand words sometimes. It's text that counts much of the time. If you are describing a flower, a picture is worth more than a thousand words. If you are describing your address or policies and procedures, you need more than pictures. All text should be in a standard computer file format. All formatting will be removed before it is formatted for the web in HTML.

Images

Images can have a large file size. They can take allot of your storage space. Images must be processed for the best tradeoff of file size verses image quality.

Images can't be adjusted in size like text. You may have found that you can adjust the size of text displayed on your browser. You can.

When gathering images focus on what your website is about. Pictures of your dog may be good. If it's name is Spot and TV star.

This image uses 30,000 Bytes. That is larger than all the text on this page. Images don't do justice to the giant trees.

Graphics
Graphics are a special type of image. They are created without pictures as their central theme. You know them when you see them. Logos are graphics.

Lines

and dots

are graphics.

Backgrounds
Backgrounds that cover the entire page are not used very often. At one time they were the rage. They are mostly used in only part of a web page. Backgrounds have several drawbacks.

It takes longer to process images that have backgrounds, unless they are rectangular.
Backgrounds can make it difficult to read the text.

Backgrounds should be in contrast to the text that is on top of them. For black text a very light background should be used. White on dark also works.

Search Engine Optimization

Search engines like Google, Lycos, MSN and many others supply lists of web sites using keywords. Your ranking on their list is very important. Search engines all have different rules for ranking, they change the rules quite often and they don't tell you what the rules are. Optimizing a web site for search engines takes time and needs to be performed periodically.

Search engines send out robot programs called spiders to check and index the web for keywords. You need to submit your website to them. The main thing to remember about spiders is they are deft, dumb and blind. They don't read Javascript, can't see images, can get confused by frames and won't tell you why you don't have a high ranking. You need to make the navigation as easy for them as possible. You can add information just for them "Spider Food".

The trick is getting a high rankings on keywords that are used often by people that are looking for what you have. The keywords, page title, description and content are used to determine ranking. Achieving high ranking is highly competitive. It's big business and can get very expensive.

How much you should spend on search engines depends on how much revenue it will bring in. A chief factor is your geographic market. The web is world wide. The question is how many people in your geographic market will search for your keywords.

Keywords
Keywords are a list of words or phrases that someone might enter when looking for your web site. You should have a maximum of 30 words or phrases and a maximum of 1024 characters. You should use one, two and three word keywords. It's best not to repeat the same word to many times.

If you are not a world wide operation, include keywords for your business area. Such as USA, California, Orange County, Anaheim, etc.

Page Titles
Every page must have a name. It should describe the page and use the keywords. It should be a few words long.

Description
It should be short and to the point. It should be 20 words or less. It should contain your keywords.

Content
The page content should contain all the keywords as often as possible and convey your information in well written text. The keyword relevancy and keyword density are both factors in determining ranking.

Web Page Optimization

Keyword Optimization
There are databases that hold the keyword popularity that people search for.

Links to other pages
Search engines love links to other web sites. Especially if they use the same keywords.
If you know other people outside of your area of business you can ask them for reciprocal links (From your site to theirs and from their site to yours). Most people welcome reciprocal links if you are not in competition.

Keywords in links
Links to other pages in your web site should use the your keywords.

Images
Images should all have descriptions that contain your keywords. The descriptions don't have to appear on the page but they should be in code. If you don't the spiders won't know what is there.

Page Changes
To get higher ranking you should change the content of your web page. Spiders like to sites that are changed and updated on a regular basis. This isn't as important as keywords, but to achieve the highest ranking it should be done.

Each page should be optimized separately

Search Engine Submission
After you have optimized your pages you need to prod the spiders into action. You can manually submit your page to search engines one at a time. This is best. You can tailor your submission for each one. Often there are categories that need to be dealt with that vary from one to another. You can have the page submitted to thousands search engines through an automated submission tool. It is best to do both. Search engine submission should be performed on a regular basis.

Dynamic Web Pages

A dynamic web page is created on the server. This allows the variety of additional functionality that is not present on static web page is that are simply served to the client without any modifications. The program runs on the server that creates the web page and since it to the client. The pages are basically custom generated code for each request from the client. Please see "Tutorials", "All About Programming", "Server Side."