Web Site Creation and Design
Now that you have your domain and hosting, it's time to design your site. Even
if your not yet sure exactly what type of site to build, we have some suggestions
that may help. In addition, don't worry if you've never designed a site before.
There are plenty of programs that can help you do this. We'll mention some of
these as well.
Table of Contents:
The Basics
The first step in designing a web site is to at least get familiar with the
HyperText Markup Language, which is the code that all web sites are primarily
made of. This is really a simple code which nearly anyone can learn. Below are
a few resources to get your started learning HTML.
[ Top ]
Using Pre-Made Templates
If you are not sure how to create a web site layout, you can try using a pre-made
template. These are templates made by others in which you can usually open in
a text editor, add your own content, and then upload them to your web server.
Be sure you read the author's terms of use and/or license agreement first, as
some templates may not be used under certain circumstances, such as commercial
use, etc. Below are a couple sites you may want to check into for downloadable
templates.
[ Top ]
Useful Software
There are useful programs that can help you create your web site. Simple sites
with no graphics can be made easily in any text editor. More involved sites with
graphics and such will require an image program, and it might be easier to use a
special HTML editor as well. The links below are a good place to find some of the
items you'd need to develop your own site. We also have some tutorials on our
FAQ & Tutorial Index Page.
Image Programs
HTML Editors
[ Top ]
Planning Your Site
When you're designing a web site, it's best to start off with an idea of what
type of web site you want to have. We're going to cover a few of the most
popular types of sites on the internet. If none of these seems to fit your
plans, sometimes it's best to just go with a Personal Home Page and let it
grow from there. If you get interested more in any one topic, you can always
start another site. Remember, Active Web Hosting gives you
discounts
if you have more than one domain, so you need not worry if you end up wanting
more than one site.
In addition to the recommended pages, it's also a good idea to have a
copyright notice at the bottom of your page. Remember, you should use only
your own content. If you use other's content, be sure that you have
their permission to do so first. Privacy statement and Terms of Use pages are
also a good thing to have on your site, as well as a counter on the main page.
These are usually found at the bottom of the pages.
Blog or Web Log
This is where you record some of your random (or not so random) thoughts. You
don't have to have a specific theme for your blog. You can just use it as a
daily journal or diary. However, some blogs do have a theme, such as Movies,
Sports, Current Events, or a journal of a specific research, programming or
other project. Do be careful with your blog that you do not write anything
that can be too offensive. For more information and tips on safe blogging,
please see the Electronic Frontier Fondation's
Legal Guide for
Bloggers. Share your thoughts and do so responsibly. Blogging is a fun
activity and probably one of the simplest sites to create. There are also
scripts that
actually can create a whole blog site for you. These let you also customize
the look of the site the way you'd like, allow visitor comments and possibly
voting, and some even include a calendar.
Pages:
Home:
Return to the home (Blog) page.
About:
A little about your self and/or what your blog is about.
Archives:
Older blog posts.
Links:
Favorite Links or other favorite Blogs (this can be optional).
Home Page:
A link to your regular home page if you have one.
Contact:
A page or link to your email address so people can contact you.
Colors:
Blogs can use nearly any color scheme, but reading text is often easier with
either white text on black or more commonly black text on white. This is
common among current events and other such blogs. More personal journals tend
to be more colorful, using different color schemed ranging from black and
color text to shades of yellows and oranges, greens, purples or your favorite
colors. Whatever color scheme you choose, be sure to choose something that is
easy to read.
[ Top ]
Personal Home Page
This is a good starting place if you are not sure what type of web page to
make, but just want a web page online to keep in touch with family and
friends, and maybe share with the world your interests and possibly make new
friends. Here you could add a page for each of your interests, a blog page, or
even a resume page. Unlike many other types of sites, this type of web site is
not devoted to just one thing.
Pages:
Home:
Return to the home page. You can also put your site updates here.
About:
A little about yourself and your primary interests.
Interest Pages:
You can have a page for each interest, such as pets, sewing, woodworking,
golfing, or whatever else you like to do. It's best to put each interest on
it's own page, than combine them all on one page.
Links:
Links to other sites you enjoy visiting.
Guestbook:
A guest book for people to sign when they visit your page.
Contact:
A page or link to your email address so people can contact you.
Colors:
Like blogs, home pages can be of any color you wish. Some like to use fancy
graphics they created themselves, and patterned backgrounds. It's best if
you're using a patterned background to have your text inside a table that has
a solid color background so that the text is easy to read.
[ Top ]
Business
If you own a business, having a web page may help people learn more about your
business, and contact you no matter where they are living. Think of it as an
electronic brochure that anyone all over the world can have access to 24/7.
Pages:
Home:
The main or home page your customers can return to. This page should be a
general introduction, some related photos and pictures, and updates or news.
Products (and/or Services):
Here is where you can link to an online catalog of describe the different
products or services you have available.
Support:
A page where your customers can get help and answers to common questions such as
shipping, etc.
Downloads:
Do you offer free trials of software or updates to your products? This would
be a page where your customers can download your programs.
Log In:
If you wish, you can have users sign up for a free account to make purchases.
You can use this opportunity to also keep customers updated in email of new
products, services and updates. Do be sure to give them the opportunity to opt
out of the email list when the sign up and in future emails.
About Us:
Tell people a little about your company, and what type of products or services
you provide. You may have links to some employee pages or executives if you
wish. And don't forget your contact information and company's physical
address/location.
Contact Us:
It's best to have a page for customers to contact you. This can be anything
from a list of email addresses to different departments, to an online form or
phone numbers and mailing addresses, or a combination of these.
Colors:
Normally, business sites use mostly subdued, concervative colors and most
perfer black text on white backgrounds. Other schemed are possible depending
on the type of company image you wish to present. Technical companies usually
go with blue colors with a hint of one other color, with a white background
and black text. Manufacturing companies prefer greys and blues, with maybe
some reds or orange colors, or maybe the official colors of the company or
it's logo. Financial services usual go with touches of green on ivory or
greys, with the main text area white or ivory with black text. More executive
companies sometimes even go with black and gold theme, maroon and ivory,
maroon and grey, or black, white and grey. Usually blacks and ivory are colors
of elegance.
[ Top ]
Resumé Page
If you are looking for work or a career, it's nice to have your resumé
online to show that you are also technologically capable. These days,
technology is everywhere and it may be to your advantage to have both a print
and an online resumé. You could hand out business cards with the web
address to your resumé while networking for jobs and talking to people.
Of course this should not be a replacement for a well-written print
resumé, but mearly a way to get a prospective employer interested.
A resumé page is usually only one page, which contains your contact
information, a nice current photo of yourself (men should wear a suit and tie
in the photo, women should wear something conservative), your last two
employers and what you had done for them (you may leave out contact
information since you can provide that on your print resumé), what
skills you have and what type of work or career you would like to get into.
Also include a brief of hobbies and interests, and any organizations or
charities you may have participated in. Like a print resumé, you want
the online one to be brief and cover the basics. You can leave out your home
phone number, address, and any other contact information if you wish to
preserve your privacy. At least give a valid email address, and preferably
something other than a popular free web mail address. Active Web Hosting gives
you unlimited email accounts with your domain, so this would be perfect to
create an account for inquiries to your resumé.
Here are some resources to help you build a good resume. Then you can adapt it
to a web page.
Colors:
Just like business sites, resumé pages are normally not too fancy. Just
like your print resumé, it should be easy to read. Most commonly,
resumé's are on white background with black text and dull blue links.
However, you could use other color links and off-white color backgrounds such
as with a tint of blue or yellow. Though the background should at least stay
nearly white, at least. You can use dull blue links with bluish
backgrounds and a maroon color for links on a ivory or yellow tint background,
for example.
[ Top ]
Specific Hobby or Interests
You could also have a site about a specific hobby or interest, such as perhaps
classic cars, cats or dogs, golfing, sewing, robots, astronomy, or whatever
you enjoy doing and would like to share your knowledge about with others.
These pages are more specific and dedicated to only that one topic. The site
layout and design can be as elaborate or as simple as you like. You can also use a
Content Management System
which is a set of PHP scripts that can help you build an interactive site where visitors
can sign up and add to your site and discuss your hobby or interest.
Pages:
Home:
A link to the main page should be on all pages. Here you can also have site
updates and new articles, news, etc.
About:
A bit about your hobby or interest, for those that may not know much about the
subject.
News:
Anything you find of interest to your readers that is new about your hobby or
interest. Perhaps you hit a hole in one and have a tale to tell, or maybe you
want to let people know about a car show in your town. Perhaps a commet will
soon be seen in the night skies. Do be careful not to take articles from other
sites. It's best to just write your own brief description and then post a
link to the article for others to read.
Articles (or Tutorials, or Tips & Tricks, etc.):
Here you can share your own experiences, tips and tricks or instructions
regarding your hobby or interests. Like the News section, if you want to share
other's work, write your own brief description of the article and provide
a link for further reading.
Books (or Merchandise):
You could list books or magazines, or other merchandise related to your hobby.
You could try affiliate and other programs from sites such as
Amazon.com or build your own store at
Cafe Press and even sell some of your
own merchandise. Be careful not to use anything that is already copyright in a
store of your own, if you build one.
Downloads:
Do you have a pattern you made for a stuffed toy? Or maybe wallpaper of your
classic car? You could build a special page for people to download these items.
Links:
You can put a list of links to related sites here.
Guestbook:
You could have a guestbook for visitors to sign.
Forum:
There are some
forum programs
you can install on your CGI server which can allow your visitors to converse
with each other, and share tips, tricks and other information on your hobby.
It's a great way to make new friends!
Contact:
A page for visitors to contact you.
Colors:
Just like many other sites, you can pick out any color scheme you'd like.
Although it's best to try and match the color scheme to the site theme. For
example, Classic Car sites may be on a white background with black and white
checkered flag and some red for links, or a combination of red, white and blue.
Cream and red are also classic car colors. Golf sites, due to the fact the sport
is played on grass, are usually green and white. Astronomy or space enthusiast
sites usually have a black background and light blue or white text. Some
technology sites could use either white and blue or black and green for color
themes. Use your imagination and pick colors you think would fit your site theme.
[ Top ]
Program Distribution
If you are a programmer and would like to distribute your program, be it
shareware or freeware, your own domain and site is ideal for this. You could
go with a full
Content Management System
to help you set up your site, or make your own pages.
Pages:
Home:
This page is where you and put recent updates and news, and a brief explaination
of what your program does.
About:
A little more detail, including any screen shots and/or examples regarding your
program.
Downloads:
This is where you can have people download your program and any updates or fixes.
Purchase:
If you are selling the program or released it shareware, you can use this page
to take orders on the full version.
Documentation:
This area you can have tutorials, FAQs and online documentation for your program.
Bug Reports:
It's always nice to have some way for your users to report bugs so you can plan
on fixes.
Support:
This page will give users a way to contact your or other means (maybe such as a
community forum
to get help with your program.
Contact:
If users still need to contact you, they should be able to do so here, via email
or an online form.
Colors:
Most program sites are on white background with black letters, but may have other
colors in the graphics or links. Choose any secondary color you like.
[ Top ]
Graphics and Web Template Sites
If you are an artist and enjoy making graphics for people to use or web site
templates, you can create a site to share your work with others. Some like to
sell some of their work while others are generous enough to give their work away.
Pages:
Home:
Your main page, and a good place to put updates and feature new works.
Graphics (or Templates):
This is the area where you can provide your work for people to use. You may have
to create a main page in that area, then have additional pages for each of your
templates or category of graphics. Be sure that each of those pages links back
to your main page and the Graphics (or Templates) page.
Tutorials:
Would you like to share with others how you create some of your work? Or maybe
help others to build their own sites? You can add a section where you can have
tutorials to do this. Be sure that you provide pages you write yourself. If
you'd like to feature someone else's tutorial, be sure to get their permission.
Many tutorial writers also prefer linking to their main page and not their
individual tutorials.
License:
It's good to have a page dedicated to displaying your terms or license that
people using your work must follow. Make it brief yet to the point.
Links:
You could provide some links to tutorial sites, other graphics or web template
sites, or other places you think may be of use to your visitors.
Contact:
This is a page for people to contact you if they need to.
Colors:
You can do virtually anything you wish here. It's always great to show off your
talents by creating a very decorative and fancy web site, using your own
graphics, backgrounds, divider lines, buttons and bullets. Show off your
talents!
[ Top ]
Photo or Art Gallery
If you enjoy taking photos and sharing the breathtaking scenery, or enjoy
painting, sculpting or digital art, a photo gallery site may be just the thing.
There are instant scripts that let you create your own gallery, such as
4Images. If you wish to design
your own site on your own, here are a few pages you'll probably want to have:
Pages:
Home:
The main page, where you could put up updates, and maybe a thumbnail (small
version) of one or more of your recent works.
Gallery:
This of course should be the entry page to your artwork or photos. It would be
best to put each photo or piece of art then on a separate page of it's own and
maybe a date and a little bit about the picture. Be sure that you keep the
images small. For web use, 640 x 480 is a good size. If you wish to provide
desktop wallpaper, you could go as high as 1024 x 768 or even 1600 x 1200. Keep
in mind that too many files that are too large may cause your site to slow down
or even halt if you have a good many visitors accessing these large files. On
the main gallery page, you'll want to show smaller versions (thumbnails) of each
image. A good size for thumbnails is no bigger than 150 pixels to 250 pixels
width or height.
Calendar (or Schedule):
This could be a page to list any dates you'll be showing your work at an art
gallery, festival, etc. if you submit your work anywhere.
Purchase (or Store):
If you decide to sell prints of your work, this can be a link to the storefront,
or you can create your own. Some online stores allow you to integrate their
software into your own web site.
About (or Profile):
Here you can show a photo of yourself and tell everyone a little bit about
yourself and the type of art work or photography you do, what got you started,
who you are inspired by, etc.
Links (or Resources):
You may want to list links to art books, supplies, photographic equipment stores,
tutorials, articles, etc. that relate to your work.
Guestbook:
Sometimes a guestbook is a nice touch to an art or photography site. Your
visitors' comments may provide some useful critique and encouragement for your
work.
Contact:
Be sure to have a page or link for people to contact you about your work.
Colors:
Art sites can be elegant (using black background and gold text and graphics) or
splashy (using white background and a rainbow of color), or retro (using odd
color combinations such as pink and blue, or olive and orange). Let your
artistic style show through here! Photography sites normally range from elegant
(black background with gold graphics and text) to white background and either
black, white and grey for text, links, images, etc. (if you are a black and
white photographer), to sepia tones (if you do antique, country or other nastaliga
type photography), to modest tones like dull blue, red or even bright orange links
on white background, and a banner using one or more of your photographs.
[ Top ]
Charity or Non-Profit Organization
Perhaps you are starting a worthwhile organization to help humanity, or would
like to support a charity (it's best to get their permission first and let them
know you'd like to support their cause on your own web site). These worthwhile
causes have several pages geared towards interactivity with visitors to the site:
Pages:
Home/News:
This is the page where you can post any new updates and news regarding your
cause, what your charity or organization is doing and how others can help. If
you wish to share a news or other article, please get the original author's
permission first or write your own brief description of the article and
provide a link for further reading.
Mission Statement:
Use this page to tell about your cause and why it's important. State your goals
and how you hope to accomplish them. Also state how you hope others may help in
accomplishing these goals. It's also useful to mention others who are involved
and what their jobs are and how they help. Usually, this is also where you would
put your organization's physical mail address, phone number and other contact
information.
Information pages:
This page could include further reading material (maybe a page called Reading
Room), photos (Photo Gallery), log or journals, or whatever your
organization needs to keep people updated on what is going on. You can have any
one or more of these different pages to keep everyone informed.
How You Can Help
Use this page to encourage people to help. Maybe provide downloadable fliers and
posters in .pdf format and ask people to give them out to people they know,
banners and buttons for web pages, stickers, or other things that may help raise
awareness for your cause.
Join:
Invite your visitors to join up and help out your organization. You could use
this page to solicit donations to help with the organization's expense and
provide a free gift incentive. Be sure to check your local laws on this to be
sure you have taxes and other legalities covered.
Contact Us:
Provide a page with emails to members or departments for visitors to contact or
an email form.
Colors:
Colors should be consistant with the organization or cause. For example, if you
are hoping to get a politician elected, you may want to use your country's flag
colors. If you are hoping to save the environment, green colors on white
background may help. If you want to help animals, you could use any variety of
colors, as long as they are not too bright or distracting. In any case, having
black text on a very light or white background is best and easiest to read.
[ Top ]
Tribute
These types of sites are usually focused on one person or event. Perhaps a happy
event happened in your life or that of a loved one, or you lost a pet or want to
honor a loved one's memory. Perhaps a current event has made you feel you want to
show your support to those involved and the rest of the world.
Pages:
Home:
This can be the main page where you can put a picture of the subject or event
you're paying tribute to, and a little bit about what happened, and in your own
words, your support.
Story:
This page you can have any title, such as My Story or
In Memory, etc. This can go into depth about the event or person you are
commemorating. If it's a person, maybe remember their accomplishments and what
they have done that inspired you. If it's an event, tell about what happened,
including date, time and place, and how you felt about it. Use pictures if you
can but be sure if you use pictures that you didn't take yourself, that you have
permission to use them on your site. This is particularly true if you are
commemorating a living person.
Press:
You could put links here to other articles and news stories about the event or
person you're commemorating. Again, use links to the articles. If you want to
post an actual article, be sure to get permission first.
Support:
Here you can ask people to show their support in the way of web site banners or
buttons, donations, stickers, or other things they can obtain online at your site.
Contact:
If you wish, you can also provide an email address where you or someone can be
contacted regarding your tribute. If it's someone other than yourself, be sure
that you have their permission to give out their email address.
Colors:
Most tribute sites are usually on black background with white or other light
color text. Especially if the event was a tragic event or a death of a loved one.
Pet sites tend to have bright color backgrounds but not very bright. A dull lemon
yellow, nearly white is a good choice, as is a very light violet, blue or green.
If you are celebrating a happy event then you can use lighter colors or white
background as well. If you would like to show support for something your country
is doing, then you could use a white or black background (depending on the type
of event) and the colors of your country's flag.
[ Top ]
Web Design Tips
When creating a site, some good precautions to take to make the site as readable
to everyone as possible are:
Use light backbround and dark or black text, or dark background and light or
white text. Don't use bright backrounds if it can be avoided. If you still
would like to, create a table with a plain white or black background to put
your text in.
Do not center all your text! The best and most readable is justified text,
which you can do by placing your text between <p
align="justify"></p> tags or just use the <p></p> tags to
align the text on the left.
Do not use overly large or overly small text. Usually 10-point sans serif
(Arial, Verdana, MS Sans Serif or just Sans Serif) or 12-point serif (Times
New Roman, Serif) fonts are best and compatible with most browsers.
Some people may be visiting your site with a screen reader that speeks what is
on the pages as they may not be able to see the page itself. Because of this,
you will want to use the alt= in the <img src=> tags when you display
your images or give image descriptions. This way people can still understand
what your site is about and not miss anything important. Here is an example of
such a tag:
<img src="mydogspot.jpg" alt="My Dog Spot">
Do not put online files that are too large or images which are too big. This
may slow down your site and may even cause your site to go offline if too many
people are viewing or downloading large files. Try to avoid use of large video
and audio files.
It can not be stressed enough to always use your own content. This will ensure
that your site is original and unique to you. If you would like to use
something created by someone else, do be sure to get their permission first.
This may be a great opportunity for them and you both may be able to link to
each other's sites and bring in more visitors.
Be sure that there is a set of navigation links to all your pages on every
page of your site. Some people may find your site in search engines and may
arrive to one of the other pages other than the main page. Because of this,
you want to be sure those visitors can still have access to the rest of your
web site.
[ Top ]
| 