Guidelines for Making
Web Pages
MSAD#50
~ Tech Office ~ Skills
General Information
-
Pages should download quickly, so keep content
small.

-
Keep the most important information at top of
page so you can see it without scrolling down.

-
To break up large areas of text use various
graphic elements (photos, horizontal lines, subheads, etc.)

-
Try to make all the pages of a site look like
they belong together. (Have some consistent layout and organization on
pages)

-
Put a title for every page you make. The title
should tell the viewer what this page is about. It is the name used when
bookmarking a page.
-
How to give a web page a title using Composer
-
When you save a web page the first time after
giving the page a file name (e.g. boats.html) a dialog box appears with
the word boats in it. Enter the real title here.

-
If you have already saved a page go to Format
- Page Colors and Properties - Click on the General Tab - Enter the title
in the first line.

Organizing a site
-
The main page is always index.html
-
Names of files are lowercase including the file
extensions (e.g. jpg)
-
When site gets large, use folders to separate
topics/events/projects etc.

-
Every time you make a new page you don’t need
a new folder. Multiple sub topics can be in the same folder.
-
E.g. 1. A 4th Grade has an index and many
pages that are divided by topic. Multiple pages can go in each topic folder
or there can be more sub folders..

-
E.g. 2. LL Library. Has 3 pages but since they
are all closely related, contain very few support files and are not likely
to have sub topics there is no need for other folders.
-
For ease of identification it is useful to have
a common beginning to names of pictures and the page that they go with.

Text
-
Text should be big enough to read but not too
big

-
Text should be easy to read if it’s on a picture
or colored background.

-
Text should be about the width of a book page.
Use a table to narrow the area.
-
Text can wrap around pictures. To do this use
Image Properties.

-
Newsletters or other information that might
be sent out through the local mail often needs to be modified when converted
into web page to eliminate private information such as names, phone numbers
etc.
-
Check spelling.
-
Centering/Indenting
-
Use the centering tool to center the text on
the page or in a cell of a table whenever possible. Spaces will display
inconsistently.
-
Use the indent tool, tabs, bullets or numbering
instead of space bar
-
Vertical spacing
-
Use carriage returns to make page aesthetically
balanced but try not to over use them between sections. Keep the pages
compact so they are easier to navigate.
-
Remove all carriage returns from the bottom
of the page.
(Note: all the extra spaces at bottom of page.)
-
Sometimes you will find you get a double space
between lines when you use a carriage return. Try using a Shift+Return.
Student Names
-
Make sure kids have permission to have names/pix
on the web.
-
Never use kids last names
Links
-
Put navigational links on all pages.
-
Link all sites outside MSAD #50 with hard links.
(e.g. http://www.bob.com)
-
All links within your site should be relative
links, not hard links (e.g. “mytrip.html” not “file://c/windows/desktop/mysite/mytrip.html”
or “http://www.sad50.k12.me.us/techoffice/mysite/mytrip.html”)
Tables
-
Tables are very useful tools when making web
pages.
Use them to:
-
Make lists of info
-
Divide text into columns.
-
Highlight text.
-
Separate text from other text or pictures.
-
Reduce the size of the page to make text easier
to read.
-
Place text or pictures in specific places on
the page.
-
Put space between photos by increasing the cell
spacing.
-
Change the background color/pix of a certain
area of the page.
-
Hold other, smaller tables in place.
-
When creating a table and a cell isn’t going
to be used, you can put a space or carriage return so that the empty cell
looks just like the others.
-
Unused rows won’t be visible when borders and
cell spacing is 0 and don’t take space, but best to delete those rows when
not used.
-
Table Borders

-
You can border sections of text with a one-celled
table with a border, or even include more tables without visible borders
within a larger visibly bordered table.
-
Explore how cell borders, cell spacing, and
cell padding differ so that you will be able to use them effectively.
-
You can color a border.

-
Make a table with border line width, cell spacing,
and cell padding set to 0 and give it a background color.
-
Make a second table within the first, and give
it a border or cell spacing width that you desire. Make its background
color the same as the page, or another color or give it a picture.
-
Cell settings
-
You can set a single cell to span multiple columns
or rows. This, for example, lets you title a page with a single table
cell while maintaining 3 columns below.
-
You can also set an individual cell to be a
certain height or width. This affects all the cells in that cell's
row or column.
-
Each cell in a table can be aligned differently.
Pictures
- Usually photos are .jpgs and drawings
are .gifs but use whichever is smallest but still looks good.
- Use Alt Text for all pictures. This
is found at the bottom of Image Properties.

- Optimize photos in PhotoImpact by going
to the Web menu and choosing either SmartSaver (PhotoImpact 4.2) or
Image Optimizer (PhotoImpact 6)
- Make sure all pictures are the correct
size. Resizing by the web page makes the pictures look much worse
and they will load more slowly

- Use a reasonable number of photos per
page. If you have a lot of photos that you want to use consider making
a main page on that topic and then another or other sub pages.
- Example: I want to make a web page
on a visit to a farm. I have 25 pictures and want to use them all.

- I group my photos by topic with
no more than 6 per page, for example.
- I make a new folder called farm.
- Then I make a main page called index.html
with several photos and text about where we went and what we did
with links to each of those groups of photos.
- Then I make several sub pages called
cows.html (4 photos), sheep.html (6 photos), cheese.html
(6 photos), bustrip.html (2 photos), and eggs.html (3 photos).
- On each of the sub pages I would
explain the pictures or have a paragraph that clearly tells about
the page that kids wrote.
- When I name the photos I name each
with the name of the page they are on. E.g. cowfeed.jpg, cowmilkjohn.jpg,
cowmilkmar.jpg, cowbarn.jpg, cowani.gif, or cow1.jpg, cow2.jpg,
cow3.jpg, cow4.jpg. Keeps page and photos together inside the
folder.
Modifying existing
web sites
-
Make sure you download a copy of your web site
from the server before working on it. Someone may have corrected
syntax or linking errors on your page since you provided for uploading.
-
Keep track of and provide clear information
as to which files you have changed or added so that only these files will
need to be reviewed. This will also help speed up:
Putting Pages up
on Server
-
At present there are only 3 people that can
put pages on the server.
-
To avoid delays in getting pages up make sure
that:
-
All pictures are present and are the correct
size
-
Give clear information as to which folders/pages
and pictures are to be put up on the server
-
All navigation links are present.
-
Remove all files that aren’t used. Put them
in a separate folder, if you want, on your own computer.
|