Web Design help/guidelines
We have many members designing some of our project pages, or wanting to learn
web design for their own sake. Here are some pointers, links, etc to help, as
well as some requested guidelines for design of pages intended to go on our web site.
HTML editors
There are many programs out there to create web pages for you.
- The simplest way is to use your favorite text editor (Notepad, emacs,
etc) and code your HTML directly (see references below). Most likely free.
- Dreamweaver
by Macromedia. (commercial product) $$
- Front Page by
Microsoft. (commercial product) $$
- Many word processors (like MS Word) will save documents as HTML. They
may not be as full-featured, and quite hoestly they produce some gnarly
HTML code, but they work, and most people already have access to one.
- .....There are certainly many other ways as well.
HTML and Style Sheets
Image size vs. download speed
- Reduce your
image size so your pages
will download faster. Remember, most of your audience may have only 56k
modems. Just in case you don't follow the link, remember to limit your
images to 72dpi. This is as much as most monitors display. Beyond
72dpi you are just adding in information that will be thrown away and
just make the page take much longer to display.
- Want to know how long that image will take to download?
Use this
downloadspeed estimator.
Guidelines for pages for this site
- If you are using Front Page (gack) PLEASE do whatever it
is you have to do to get it to not set all the file paths to your local
directory (eg. Joe Smith/My files/Web stuff/images/pic1.jpg). Instead
this ref should probably just be pic1.jpg or at most images/pic1.jpg.
- Please do not put spaces in file names. Use an underscore (_) instead
to separate words. eg. Ski_trip_pic.jpg.
- Please limit image sizes. 40k REALLY is big enough to
look good for most images. Save your image as a jpg and crank that
quality down to 60%, 50%, even 40%. You'll be suprised how good the
images still look in a browser, and your pages will download much faster.
- We have a style sheet we use for many of the top-level pages. You may
include this style into your page by adding the line
<LINK rel="stylesheet" TYPE="text/css" HREF="http://www.raleighjaycees.org/main_style.css">
into the HEAD section of your page.
- For any project pages (eg. Haunted House), please design your page to
live in a subdirectory (eg. Haunted_House). Make any subpages of this
project page be relative to this subdirectory.
- Do not put a full path in your hrefs
(eg. http://www.raleighjaycees.org/Haunted_House/coupon.html). Simply
make the href be coupon.html. This allows us to rearrange things much
more easily.