Creating a web site involves planning as well as creativity.  Not only should you consider what images and graphics to use, but you must also keep in mind the browser and site navigation.  Try to take advantage of the medium by making a document that is multi-dimensional.  Unlike television or printed imagery, you can use motion and interactivity to enhance the site.  The best way to realize the site you want is to look on the web and find sites that appeal to you.

Things to remember when making the site:

• Download time (large image files may look nice, but limit accessibility to your site)
• Audience (Advertise your site!)
• Readability (Shorter is more manageable.)
• Variability (You cannot control how your site appears on different browsers.)

Some basic vocabulary (informal definitions):

• HTML (Hyper Text Markup Language): the code behind a basic web site that web browsers (like AOL and Netscape Navigator) interpret.  HTML uses “tags” to mark up or designate the appearance of text and images.
• Javascript:  more advanced code that allows you to create actions and movement on the site (ex. moving images, advanced hide/show commands, form specifications, etc.). Many web design programs write the code (whether html or Javascript) for you.
• FTP (file transfer protocol): how one can transfer files from a local computer to the internet provider’s server (from where the web site is “broadcast”)
• URL (uniform resource locator): your web site’s address on the world wide web
• Mouse-over: exchanging one image with another when the mouse goes over
• Button: a button is a link which is usually also a mouse-over
• Home Page: the first page of the site, it is named “index.html” 
• Flash:  a vector-based (vector uses geometric calculations rather than pixels to reduce download time) animation program that can create advanced interactive animations and sites that have fast download time.
• Director:  like Flash, a Macromedia program that creates interactive animation

Basic Instructions: 

A couple of key points to remember from your initial planning: 

                 Keep your pages looking similar by using a template 
                 Call the first page: index.htm
                 Keep all your files on one disk on onefolder
                 Observe the 8.3 naming rule rigorously - all lowercase with no spaces

Page properties and saving your first page:

The first step is to open FPXpress and set its Page properties. 

You will find Page Properties under File.

Choose the General tab if it is not already chosen. You will notice there are lots of options to choose from. You will need to ignore all but one of them.

Change the Title of the page to My Home Page. 

Select the Background tab and change the: 

Background colour to white 
Text colour to black 
Hyperlink properties to default 

You can choose any colours you want, experiment a bit, but it is preferable for you to create something legible on this first attempt at a Web site. You can always go back and change the page properties later on.

Leave the Margins but go to the Custom tab and add the following to the User Variables:

Name - Author 
Value - My Name 

            ..................................................

Now save your file. Choose File | Save As

You will notice that the page title is My Home Page, and that the Page Location where the file is going to be saved has an HTTP:// ... address. 

Do not save your file here.

If you click on <OK> you will receive the following error "unable to save the page via WebPost".

You will not be able to save your page here as FPXpress is trying to update it directly to the Web (Internet), which is not the manner we will use to update our Web sites.

Instead, choose the <As File> button.

FPXpress will open another Save As file dialogue box. Browse to the A: drive and save your file on your diskette

Before you press the <Save> button rename the file from myhome to index (FPXpress already knows you are creating a Web page and so automatically saves your page with an .HTM extension).

Now press <save>.

Open Windows Explorer and go and search for your file, INDEX.HTM. If you double click on it, your browser will open and you can view the page (although it will be blank as we still have to add some text to it). 

Adding text:

Add a heading to your page. I have chosen "Welcome to my Web site" as my title.

Just as in MSWord, all you need to do is type in the heading you want. It will appear as simple text, Times New Roman font, and justified to the left, as these are the defaults of FPXpress.

Press <enter>.

Now add the following line of text.

This Web site is the creation of My Name.

Save the page by choosing File | Save.

            ..................................................

OK. So now you have a page with two lines of the text which look the same. So let's format the heading.

Select the heading of your page using your mouse.

Now choose Format | Font from the menu bar.

Select MS Sans Serif, Regular, Normal. Click <OK>.

With the heading still selected, choose Format | Paragraph.

In the Paragraph Properties box, select Heading 2, and change the Paragraph alignment to Center. Click <OK>.

 Save your file.

Adding links:

Go back to FPXpress and at the bottom of your Web page (index.htm) add the following text.

Visit the Claremont McKenna Web site

Now you need to use your mouse to select just the Claremont McKenna part of the line. 

With this selected choose Edit | Hyperlink and the Create Hyperlink dialogue box will open.

There are three tabs in this box and the World Wide Web one should be selected.

Check that the Hyperlink Type is set to http: and then type in the McKenna Web site address into the URL field. Remember, an URL is the WWW address of a Web site.

In case you don't know the McKenna  address is: -
   http://www.mckenna.edu

Click <OK>.

You will notice that your text Claremont McKenna is now underlined and in blue. It has become a hyperlink to the McKenna Web site.

Save your file.

Inserting Images:

Place the cursor at the beginning of your heading "Welcome to my Web site" by clicking at the beginning of the word welcome.

Press <Enter> to add a blank line above the heading of your page.

Move your cursor up to this blank line. You will notice that as it blinks on and off it is sitting in the middle of the line as it has taken on the formatting of your title.

Now insert your image by choosing Insert | Image. You will get an Image dialogue box. The tab selected should be Other Location, and the From File field should be selected. Browse to where you have saved the image (your A: drive). 

Select the image image name by clicking on it once and then click <Open>.

The image should now be at the top of your page.

Previewing your site:

Make certain that your Web page is saved. Make even more certain that it is saved as index.htm on your floppy diskette.

Now to check it in your browser you should open a new session of your default Web browser (you will have FPX and your browser open, so you can move between this Web site and editting your web page) and choose File | Open File and use the dialogue box to navigate to your index.htm file on your floppy diskette.
 
 

The following clip art pages have web art and information about making your own.  There are links to other pages about web design and hopefully these can serve as a starting place for exploring various aspects of web page creation.

• Clip Art Universe
• Cool Graphics on the Web
• fOUR bEES
• EOS Development