Randy's
Ed551 & 552 Web Page Design Reminders and Help
This document is intended as a supplement
to the teaching in Randy's Ed 551 & 552 classes at Chapman University
in Concord, CA. Our focus in this course has always been on providing teachers
with the know how to create web pages for themselves, their class and to
teach their students with no additional cost involved beyond an internet
connected computer. With these comments in mind, this document is focused
on the use of Netscape Composer, a free html design tool, as the page creator
and Angelfire, a free
web hosting service, as the site host.
This page will be split into two main sections.
The first deals with Netscape Composer and how to perform many of the tasks
that consistently give students the most problems when creating pages.
It may be useful to review each section periodically to prevent common,
avoidable errors. The second section deals with the Angelfire site and
getting your pages successfully to the web.
Using Netscape |
Using
Angelfire
The Page Creation Cycle
When creating a web page on your computer,
the page only exists locally (i.e. on whatever disk you save to) until
you upload to an internet server such as angelfire. Once uploaded to an
internet server, the page is "served" to any user that requests it. Thus
it will be visible globally. Following simple mantra may help you if you
get stuck during the process:
Create - Save - Upload - Repeat
Create using composer, save following
the guidelines here, upload to angelfire, repeat the process if you have
new pages to create or existing pages to edit.
Using
Netscape Composer text
| images
| links | tables | saving
and naming
As mentioned above, Netscape Composer
is a free web design tool. Netscape already exists on virtually every machine
on the planet. However, if you cannot find it on your machine or wish to
have the most up to date version you can click here to go to the download
page. To open Composer simply open Netscape and choose File>New>Blank
Page. To open an existing page, open Composer first, then click the open
button on the Composer tool bar. This will bring up the editable version
of the page.
In this section I deal with the most common
problems I witness with my students. The following link provides much more
detailed descriptions and assistance for anything not covered in this brief
section:
http://wp.netscape.com/browsers/using/newusers/composer
Text Manipulation:
return
to top
Remember to stick with "boring" fonts
when creating pages. Fonts do not travel with the html document and depend
on the computer viewing the site. If your page depends on dazzling and
super fancy fonts to achieve its effect, many users will be disappointed
in your site. I recommend Arial and Times for the bulk of text on your
pages. These fonts are common on virtually every machine whether PC or
Mac and will give you greater control over what the user sees.
Additionally:
-
Avoid using underlines for any text. Underlines
specifically indicate linked text and, used otherwise, will confuse your
users.
-
Bold and italic text is an effective way to
draw eyes to items of emphasis and should not be used as the primary font
setting throughout. Do so and you take away people's ability to scan your
document effectively.
-
Use font sizes that are appropriate for your
audience. Unless you are designing exclusively for very young children,
you should use a font no larger than 14(4) for body text, no larger than
18(5) for section headings and no larger than 24(6) for main headings.
-
Do not use the space bar to position text
on a page. Spaces are variable in width and may look different on different
monitors. To space your document use the justification tools (left, center,
right), the indentation tools, or bulleted or numbered lists. (This section
was created with a bulleted list.)
Images:
return
to top
You can insert images effectively in two
ways:
-
If an image is coming from another web page,
and needs no editing before being added to your page, you can simply copy
it from the web and paste it to your page. (right-click on the image and
select copy, click to your page and right-click and select paste)
-
If an image is coming from a disk, click the
image button on the toolbar in Composer, click choose file in the dialog
box, and find the image you wish to add.
Note: If you need an image to be much smaller
on your page than it appears in your original source, you should resize
the image before placing it on your page. By resizing in Composer you are
not affecting the memory required to display the image and are forcing
users to wait longer than necessary to view your page. If you first resize
the image in a program such as Microsoft Photo Editor, you will decrease
the memory required by an image and, more importantly, decrease the amount
of time for your page to load. This is especially important on pages that
contain many images.
Remember that you can create cool custom
banners at Flaming Text. These
make a great accent to pages and are FREE.
Example:
Links:
return
to top
There are different types of links for
different situations. However, all of the following links are added by
highlighting the text or image you wish to apply the link to and clicking
the link button on the Composer tool bar and adding the link to line.
-
Links to other web sites must contain the
entire address. To link to yahoo, you must type "http://www.yahoo.com".
Simply typing "www.yahoo.com" or "yahoo.com" will result in a dead link.
-
Links to pages within your site can be completed
by simply typing the full name of the file you wish to link to, i.e. "page2.html"
or "resume.html".
-
E-mail links are created with the line "mailto:address@server.com".
(Of course you must substitute your own e-mail address ;-)
Tables:
return
to top
Tables are the best, most effective way
to achieve more complex page formatting. Working with tables in Composer
takes a little practice, but your pages will be better for your efforts.
i encourage you to explore. Some reminders are provided here.
-
To make your table invisible set the border
to "0".
-
If you have table content that varies in width
(i.e. thin image in one cell, text in another), make sure the "equal column
widths" box is unchecked.
-
I recommend setting the width of the table
to pixels instead of % of window. This will give you greater control over
how the table looks by preventing the table from resizing on bigger or
smaller monitors.
-
To align a table (left, center, right) you
must use the table properties window, the justification buttons on the
Composer bar will not work with tables. However, use the toolbar justification
to align content within cells.
-
To modify any properties of a table, or to
delete or insert rows or columns, simply right-click on the table (or specific
row or column) and select the appropriate item from the list.
Saving
and naming: return to top
Saving and naming files is an extremely
important and often overlooked part of the process. Failure to follow the
guidelines listed here will lead to sites that don't work and creators
(you) who hate their computer and this process. Conversely, and more positively,
following these guidelines consistently will lead to many happy carefree
days of design and maintenance of your site.
-
Every file you save should contain only letters,
numbers, dots ( . ), and underscores ( _ ). Never use any of the other
special symbols on your keyboard, including commas, slashes ( / , \ ),
dashes ( - ), colons or semi-colons, quotation marks, etc.
-
Every file you save should have the appropriate
suffix attached. PC's should do this automatically, but on Macs you must
do it manually. The following suffixes are the most common ".html" for
pages, ".gif" or ".jpg" for images, if you are unsure what format an image
is in, you can open it in another program and it should tell you.
-
Your homepage should be named "index.html".
As a rule, web servers will load any file entitled index.html first.
-
Links are case sensitive. If you use capital
letters, you must remember each instance and apply that to your links.
Because of this I never use capital letters when naming files (never use
them, never have to remember when I did).
-
All of the files within a given page must
be saved to the same directory. One of the good thing about Composer is
that it does this for you, however, you must make sure that you do not
remove any of the files from the folder that contains the page. This will
result in broken images and headaches. I recommend that beginners create
a separate folder for each page you create and only put files for that
page in the folder.
Using
Angelfire return to top
Angelfire is a free web hosting service
provided by Lycos. It allows you 20 MB of space for your site (about 17
floppy disks worth of storage) in exchange for a 1" advertising banner
on each page. Using Angelfire is really easy, this section contains a rundown
of the steps involved to upload a page from beginning to end.
-
After going to Angelfire,
you can log in by clicking the "web shell" button. Your member name contains
your directory and member name both, for example, my member name is "space/rdepew".
Your password is self evident. (Important Note: if you are using
a computer that more than one angelfire member uses, like in the lab, make
sure that you are the user that is logged in. This information exists at
the top of the web shell window. If another user is logged in click "logout"
and log in again.)
-
The left side of the web shell lists all of
the files on your angelfire's server. Think of this as a remote floppy
disk and remember that for any file to be visible on the web it must be
listed here.
-
From the web shell you can select a file to
view, rename, or delete using the buttons at the top.
-
To upload files to the site use the file upload
section below the directory. To upload a single file click the "browse..."
button, select your file, and click "upload". If you have more than one
file to upload you can click the "upload multiple files" button. This will
allow you to choose up to 10 files at a time. Click "upload" when done
selecting files. If you have more than 10 files to upload, repeat this
step until you have all of the files.
-
Remember that every item on your page must
be uploaded separately. Thus, if you have a page with 7 pictures you must
select the page itself and each image for a total of 8 files to upload.
-
If you are uploading corrections or changes
to page that already exists on angelfire, you must make sure the "overwrite"
box is checked. Without this, the original file will not be replaced. (If
you are unsure, checking this box will not hurt.)
-
Only files that have been changed or that
are new to your site need to be uploaded. If you correct content on an
uploaded page, but do not change any images, only the page needs to be
uploaded, the images are already there. However, if you add images to an
existing page, any new images do need to be uploaded with the page.
-
Your site address, if using angelfire will
be www.angelfire.com/directory/username (i.e. www.angelfire.com/space/rdepew).
This address will load the file index.html. If you do not have a file entitled
index.html you will need to add the file you want to view to your address
(i.e. www.angelfire.com/space/rdepew/webquest.html).
Remember the cycle: create
- save - upload - repeat. Create in Composer, Save to your disk,
Upload to Angelfire, Repeat if changes are necessary
Other FREE web services:
I recommend Angelfire due to my experience
using it and its ease of use for Chapman students, however, there are many
other free web hosting services available on the web and I encourage you
to check the out if you become dissatisfied with Angelfire. Here is a list
of few others that I am familiar with and there are many others:
Page created and maintained by Randy Depew
Instructor, Chapman University, Concord,
CA
rdepew@yahoo.com
Last update: August 20, 2002