1. Concept of a web page.

       a. you have to have something you want to communicate

       b. visualize how on a printed page you would communicate—consider pictures and words and how the page will be laid out. (You can actually sketch the page on paper.)

2. Components of a web page

        a. background

        b. text (words)

        c. pictures

3. Beginning a page

        a. building a page with a composer: Netscape Composer, Frontpage 2000, Dreamweaver 3

        b. building a page with a composer at a web site

        c. finding a site to place your page

4. Begin your page

        a. sketch the page with the information you want to impart.

        b. write the text message(s) for your page.

        c. name the pictures you’d like to use.

                 1) do you have them available for scanning?

                 2) do you have them already on disks in a usable picture format? (jpg, gif, tiff, bmp.)

                 3) do you want to get them from other sites on the web?

                 4) will you have to take these pictures? (conventional or digital camera?)

                 5) do you want to use video? (how will you obtain the video?)

5. Begin to build your page; put all the components you have described in your sketch into a single folder in a place they can stay (suggest "My Documents" or on your "C" dirve)

        a. open a blank page on a composer.

        b. choose a background

                 1. solid color

                 2. pictures (Explain the use of a graphics editor to prepare pictires.)

Layout Considerations
Web pages can contain text, graphics, and hypertext links. To get a better understanding of web page layout, you must understand the web page text-stream model. Both text and graphics flow as if they were text. This attribute imposes real limitations on the design of an HTML document.

Using the text-stream model, page proportions and line breaks will vary depending on the following:

Size of the viewing monitor;

Size of the viewing window;

Preferences set in the web browser; e.g. default fonts sizes.

Since you cannot predict the above variables, it is necessary to make some educated guesses based on probabilities. A good practice would be to assume the following:

Font size is set to the web browser default value, whatever that may be;

Monitor size is a maximum of 640 by 480 pixels;

Usable screen width will be 640 pixels less the amount used by scroll bars-- something around 540 to 580 pixels.

Usable screen height will be significantly less than 480 pixels after space used for title bars, buttons, and tool bars at the top of the screen; and status areas and/or task bars (Windows95) at the bottom of the screen.

The "text-stream" model can effect your page layout in ways you might not expect. When you design the page, you might position a series of graphics all the way to the right of the page. When you view the page in your browser, everything appears as you would like it to appear. Later you view your pages using a computer with a smaller monitor. The small window had caused some or all of the graphics to re-flow or wrap-around and appear on the left of the screen -- upsetting the balance of the page layout.

---

To avoid this problem, it may be necessary to create a table or series of tables of fixed dimensions, and insert the graphics and text in various cells of the table(s).

Graphic Considerations
A picture is worth a thousand words -- and usually several times larger (in terms of bytes) then all of the text on a web page.

If you are like most of us, you connect to the Internet via a modem and a phone line. Under average Internet "traffic" conditions, you might be forced to wait a minute or more for a "graphically intense" page to download all of its graphic images. This can be very frustrating.

The number one reason people leave a web site and fail to return to it is it takes too long for the pages to load.

Also, some browsers don't support graphics, or perhaps the user has turned off the display of graphic images in their browser to speed up the loading of web pages. Provide alternate text-only pages where necessary and provide a text description for each "major" image.

Since most of us will insert images in our web pages, here are some guidelines to follow:

Keep all images as small in SIZE as possible;

The total of all images on a page should not exceed 50 to 60K, which will take about 25 seconds to download using an average modem connection;

Limit image width to 480 pixels, maximum;

Provide a small version of an image (thumbnail) with a link to a larger version -- be considerate of the viewer's time;

Use GIF images for line art, typeset text and icons;

Reduce the indexed color pallet of GIF images to remove unused colors;

Use JPEG images for gradient graphics and photographs;

Adjust the JPEG compression value to strike a balance between image fidelity and file size; less fidelity -- smaller file size, and vice versa.

Use a dither-free web palette in your image editing program;

Learn more about web graphics by visiting Lynda Weiman's Designing Web Graphics web site;

Use the same image more that once in a site -- if your browser handles cached images (most do), the image will load only once -- there is a free lunch;

When saving low-resolution images, save them using anti-aliasing to avoid jagged edges and to slightly blur the images.

d. insert your text. (Explain how text can be adjusted to flow around pictures.)

Some Stylistic Do's and Don'ts
Do:

Have something to say

Say it clearly

Consider your audience and their time

Create a series of short pages rather than a single large page

group ideas or a topics by page

maintain flow from page to page

provide a link to the home page

Create a meaningful title for each page

bookmarks (or favorites) use page titles to name bookmark entries

Clearly identify yourself or organization on each page

use a common title, logo or banner to identify a suite of related pages.

provide snail mail and email addresses for identity and comments

Create pages which are browser independent

use standard HTML tags

Create enough white space on the page to facilitate reading

Provide a text description of each image

essential for those with a text only browser

useful for those browsing with image loading deferred or turned off

Use smaller images with links to a larger image when necessary

include a reference to the file size of the larger image

On long pages

at the top of the page, create a linked index of topics found within the page

for each topic on the page, create an anchor to which a link can be created

Proof read and spell check your pages

Check page links

every time you modify your pages

periodically to assure that remote links are still valid

Provide an update timestamp

e.g. this page was updated 11/25/96

Don't:

Refer to HTML mechanics by using phrases like "click-here"

Try to dazzle your viewer with technology

excessive animated images (GIFs)

unnecessary frames

Java scripts

crawlers at the bottom of the page

Clutter pages with excessive graphics

Use copyrighted material from other sites

Use background images which:

conflict with color of text

conflict with color of images

6. What is HTML language and how does HTML language affect my page? (For a better discussion of HTML language than we can give here go to http://builder.cnet.com/Authoring/Basics/

This site will give a complete and detailed examination of the language that lies behind an web page.)

7. Save your page and call it "index."

1. Review of Day 1:

2. Finalize your index page by placing all pictures and text where you want. Make sure you have the background you want.

Typographical Considerations
If you are familiar with typesetting or desk top publishing, you have come to expect certain things when designing a document. Don't expect this kind of control when creating a web page. Limitations of HTML and your lack of control of the viewer's web browser, prohibit you from controlling the following:

Leading -- spaces between lines of text;

Tracking or kerning -- spaces between characters;

Tab positions -- no such feature;

Extended font capabilities -- outline, shadow.

To use any of the above, it is necessary to create a graphic image which represents the text.

With the advent of HTML 4.0 and Cascading Style Sheets (CSS), it is now possible to overcome some of the above listed layout and style limitations. However, HTML 4.0 and CSS require version 4.x web browsers -- which are only recently gaining wide acceptance. If you choose to use HTML 4.0 and CSS features, view your pages using an older browser to determine the viability of these pages.

3. Build hyperlinks

         a. to your own pages on your site.

         b. to other people’s pages

         c. within the same page

         d. to e-mail

4. Test your links

Before you load your web site onto the web server, test the page links. This can be accomplished in several ways.

If you don't have an Internet connection, you won't be able to test links to remote sites. Nevertheless, you should test all of your local links. To do so, do the following:

• Open the home page of your site in your web browser.
• Reset the browser's "visited links" option, if your web browser supports this option.
• Select each link that references a local page and observe the results.
• As each local link is visited, it will change color. This will allow you to keep track of your progress.
• If a local link fails, investigate possible causes:
  • local page or image file doesn't exist
  • local page or image file has been moved to another directory
  • local page or image file name is spelled incorrectly
  • file extension is incorrect

If you do have an Internet connection, you will be able to test both local and remote page links. To accomplish this test, do the following:

• Connect to the Internet.
• Open the home page of your site in your web browser.
• Reset the browser's "visited links" option, if your web browser supports this option.
• Select each link and observe the results.
• As each link is visited, it will change color. This will allow you to keep track of your progress.
• If a local link fails, investigate possible causes:
  • local page or image file doesn't exist
  • local page or image file has been moved to another directory
  • local page or image file name is spelled incorrectly
  • file extension is incorrect
• If a remote link fails, investigate possible causes
  • URL address of remote site doesn't exist
  • URL address of remote site has been changed
  • URL address is incomplete or spelled incorrectly

5. Upload you web page to a server

a. FTP them (to www.iron.net) A popular windows FTP program is
WS_FTP (Home users can use the Limited Edition, or LE, version).

b. If using Microsoft FrontPage, there is a Front Page Publishing Wizard or the publishing wizzard of any other cmposer you’re using

Create a directory structure on your development computer which exactly duplicates that which you plan to load on the web server. Do this before you create a single web page. Don't wait to do it after you have created numerous pages.

Create a directory to contain the entire web site. This is the root directory for your web site.

Within this site root directory, create a subdirectory for common items, such as images that will be used frequently on various pages.

Within the site root directory create additional subdirectories as required. Follow your layout sketch of the site. Example:

create subdirectories that correspond with sections or topics within your site

create a subdirectory for information about your organization

create a subdirectory for each service or product

further subdirectories as required

a subdirectory for Frequently Asked Questions (FAQ)

Save your home page in the site root directory and name it the "default name" assigned by your web server -- consult the site webmaster for the correct default name.

new visitors to your site will reach the home page first

provide links to topics or subcategories found on all other pages

1. Building the rest of your site. (If you are using a composer, you can build a site map to keep track of your pages; however, for our considerations here, since you site will probably be only 3 or 4 pages, we are not going to get into site maps.)

      a. your site should have a consistent appearance. For example you should probably use the same           background throughout the site and you may want to use some recurring graphics.

      b. Building a navigation bar to your side (that appears at the tops and perhaps bottom of each page) will           help your visitors get around your site with little confusion.

2. View your site in other browsers—see if your site works in netcape and explorer—not only recent versions but perhaps older versions of the browsers too.

2. Lots of other things that will help you build a page:

       a. manipulating graphics for fast loading pages—thumbnails, low resolution jpegs and gifs. Using            watermarks to change and protect your pictures. Using rollovers.

       b. using a validation program or site to make sure your HTML is clean

       c. using tables and layers

       d. writing pages with forms and using form wizzards—familiarity with javascript

       e. using frames

       f. using themes for consistent pages

      g. implementing multimedia functions—video, audio, animated graphics, powerpoint presentations

      h. using excel to put grades on the web

      i. log visitors/counters

      j. create a scrolling marquee

      k. using metatags and keywords

      l. getting your site on a search engine

      m. setting up a secure site

     n. gimmicks—using a splash page, contests, puzzles

     o. color psychology

     p. getting your own domain name and registering