Web Page Design: From Planning to Posting

Basic elements

Elements of design

Advanced techniques

Posting your site

Evaluation and polish

Web Page Design: From Planning to Posting
Basic Elements

Organizing your files:

You must make sure all your files are saved in ONE single folder, so create and name a new folder. (Each graphic and the text of each page will be stored as a separate file in this folder.)
Each page will need:
- Title
  - The title will show at top of browser window
  - The title will become the bookmark or favorites name
- Filename
  - Filenames may not include spaces!!
    --use only alphanumeric characters and ".", "-", and "_" in filenames
  - The filename will become part of web page address
  - Be sure to use "index.html" or default.html" for the homepage filename

Creating a "template" page:

It is a good idea to use a similar layout and color scheme for each page, so your site seems coherent. Open your webpage editor in order to begin to create a basic layout for a "template page".
Change the background color or pattern, if desired.
Add text, images, links, and clip art to your pages.
Enter a title for each page. (The title will appear at the top of your page's window.)
Save often! Each filename can contain no symbols or spaces and must end in .html. Name the homepage file either "default.html" or "index.html".

Text:

There is a saying among webmasters that "Content is King." This means that the information you convey is the most important thing. With most web editors, you can add and edit text just like you do in a word processing document.

Use a similar layout and color scheme for each page.
Add links, text, pictures, and clip art to your pages.
Enter a title for each page. (The title will appear at the top of your page's window.)
Save often! Each filename can contain no symbols or spaces and must end in .html. Remember to name the homepage file either "default.html" or "index.html".

Background Colors and Patterns:

You can use any color or GIF or JPEG formatted image as a background. If you use an image as a background, you will need to find or create one and save it in your site's folder. You can get properly formatted background images from several sources:

Many web sites offer free graphics.
You can convert your own images to the proper format.

When you choose an image to use as a background pattern, it will repeat itself to fill the screen. You can use plain colors or patterns, or you can use images that create a vertical edge along the left side of the page.

Remember that readability should be your main consideration when choosing a background color or graphic. Make sure that you have good contrast between the text and the background!

Graphics:

The use of graphics can enhance your web pages. You can find images from a variety of sources:

Many web sites offer free graphics
- http://www.clipart.com
You can scan pictures, design your own in a paint program, or find graphics in other formats and then convert them to GIFs or JPEGs in the following ways:
- Use a graphics converter.
- Many web editing programs will automatically convert a graphic to the proper format when it is copied and pasted onto the page.
- Some paint programs will allow you to save your images as a GIF or JPEG formatted file. (Adobe PhotoShop, Paint, and others)

Note - GIF images are used mostly for line drawings and clip art images that have solid blocks of colors. JPEG images are used for photos or images that contain gradients and a variety of colors.
Remember that the GIF or JPEG formatted graphic file MUST be located in your web folder before you put it on your page!

Tables:

Tables allow you to present your information (text and graphics) in columns and rows. Borders within and around the table can be used to separate your page into cells. The cells will expand as you type or add graphics.

Links:

There are several different kinds of links you can create:

Links between pages within your own site
Links to other web pages on the internet
links to downloadable documents
E-mail links