Step by Step
Guide
This is a generic outline for how I plan
and create a web site.
Please note that you can now transfer
a complete instructional website template to your computer. All you'll
need to do is make a few changes to customize it for your use. See the
Generic Templates link in
the index on the left.
I should point out that you can get your
whole site set up on your computer, with all the links working and looking
the way you want. Then transfer the whole thing, folders, images, and pages
in one move. I keep a copy of this site on my computer and on the KORRnet
server.
Planning
I start with scratch paper, and I layout
what I want to see on each page. Usually, I plan to put a graphic banner
at the top, and index along the side with contact information, and the
date I last worked on the site at the bottom. Look for a site you like
on the net and use ideas from it.
Next, I decide what needs to go in the
index on the side. This depends on what kind of information you want to
provide. I try to break the site up into several pages, a page for each
topic.
The design I come up with here will be
what I use for a template for the rest of the pages on the site.
Outline
I like to make an outline on paper that
shows all the pages on my site so that I can see how they link up. Also,
if I have several topics, I may decide to use a separate folder for each
one. Take a look at the folders for this site:
The page you are reading is in the folder
labeled "sites." Every page in the "sites" folder is about creating web
pages. All the images for this web site are in the "images" folder. I do
this so that I don't have to sort through a huge list of files to find
what I'm looking for.
Template
Then I layout the page I drew in Composer,
trying to get it to look like my drawing. When I get it part way done I
save it with the name "template.html," and I use it as a model for all
the other pages I make.
Note: Name the page you
want your visitors to see first "index.html." The KORRnet server will automatically
open that page when someone visits your site. For example, the address
for this site is: http://www.korrnet.org/chic/. The page that opens at
that address is my index page, named "index.html."
In fact, I name one page in each folder
on my site "index.html." When a link moves your browser to another folder,
the index page is the first one that opens.
I work with my template until I get everything
looking just right. I adjust the page colors, link colors, text sizes,
and general appearance that I want the information to have. Once I have
the template exactly how I like it, I save it.
Now, I'm ready to create my first topical
page, probably the introduction to the site. With the template open in
Composer, I click File and select Save As. Then I save the
template with a different file name, in this case "index.html." I am now
editing the index page for my site, and I can add text or make changes
to the file as I need. When I'm ready to make a new page, I click the Open
button on the Composer tool bar to open "template.html" again. once I have
the template open again, I immediately click File and select Save
As to save the template with whatever page name I am ready to work
on next. I can use the template over and over to create blank pages that
are already formatted the way I want all the pages on my site to
look.
I also use the template to store features
that aren't on every page, but that I might need on more than one page,
such as a table to contain a photo. I can copy the stored table and paste
into any other page I am editing. See the discussion earlier about tables.
Index
The index, I've noticed as I develop web
sites, often changes as I go. This can be rather tedious because when it
changes, I have to go to all the pages with an index and change them too.
Alas, I know no simple way to resolve this. I do make a change to the index
on the template, then go one at a time to all the pages to paste the new
index in.
One thing that does speed the process up
is to use a word processor to find and replace parts of a document. I have
used Word and WordPerfect to do this. I can open several pages up at once
in my word processor, taking care to tell the program to open them as ASCII
DOS Text files. This is so that whatever word processor you use will
not add unwanted tags to your page. Then I tell the processor to find some
keyword that will allow me to highlight the index that I want to change.
I highlight the index and use the paste feature to paste in the new index.
Here's an illustration using WordPerfect:
First I open the template.html file in
Composer and look at the source code (click View and select Page
Source). Then I find the part of the page that I want to paste into
the existing pages (I'm updating the index). I highlight it by dragging
the mouse over it and copy it to the clipboard (click Edit and select
Copy).
Open WordPerfect (or the word processor
of your choice). I usually open about five pages at a time when I do this.
Depending on what word processor you use,
the program should ask if you want to convert your web page from HTML.
I tell it to convert from
ASCII DOS Text.
Then, I tell it to find a key word that
will let me see where my index is in the HTML code. I chose "preliminaries"
because it is at the top of my index. WordPerfect will jump to that spot,
and you can highlight the part you want to replace.
Here is the code highlighted and ready
to be replaced. All I need do is click Edit and select Paste.
Experiment around with a test file first
so that you can identify the code you are looking for. The first time you
try this, it looks pretty messy. But, a little practice, and you'll be
zipping through changes. One last thing . . . when you save each edited
page be sure to tell your word processor to save the file as ASCII DOS
Text.
