Modifying OCMRC�s Sample Website for Your Community

Once you have downloaded the CuteSITE Builder software and OCMRC�s
Sample Website on to your computer, you are ready to begin the process
of modifying OCMRC�s Sample Website to display your own community
resources.  (Note - these instructions assume the use of the CuteSITE
Builder software.  If you are using other software, such as Microsoft FrontPage,
you will need to make the appropriate adjustments to these instructions.)

Section A - Getting Started.

1) To get started, turn on your computer and start up the CuteSITE software.
(From your Windows opening menu, select "Start", "All Programs",
"GlobalSCAPE", "CuteSITE Builder", "CuteSITE Builder").

2) From the menu entitled "Start Using CuteSITE Builder", select
the third option, labeled "Open an existing web site file".  Press the
blue-shaded drop-down box and see if the name of the file you used
to save OCMRC�s Sample Website shows up; if so, select it and then
press "OK", and then proceed to the next step (#3, below).  If that file
name does not show up, select "More files" and then press "OK" - you
will be taken to a standard "Open" menu which you can use to find the file.
Once you find it, double click on it to make it active.  You should now
be looking at the Home Page of the Sample Website.

3) Use your mouse to move your pointer directly over the "O" which
is the first letter in the current website�s title "Orange County Marriage
Resource Center", and then do a "left-click".  You should notice that
the field has changed colors.  Use your "Delete" keys to delete the words
"Orange County" and then type in a community name which represents
the geographic area you are creating a Marriage Resource Center for
(don�t worry about what name you use right now; you can always change it later),
and then press enter.  The title for this - and all the other web pages - have
now been changed to that for your community.  (To verify this for the other
pages, use your mouse to move your pointer over the phrase "Engaged Couples"
(third line down, in the middle), and then click on it.  You will be taken to the page
for "Engaged Couples" where you should notice that your community�s name
has been substituted for Orange County�s in the page�s banner.  After verifying
this, select "home", which is just to the right of the words "Marriage Resource Center",
to be taken back to the website�s Home Page).

4) Use your mouse to move your pointer over the word "File" at the top left
section of the screen.  Do a left click, then select "Save As", and then enter
in the name of the file you want to use for your prototype website, and then
select "Save".  We suggest using a different name than was used for the file
that you received from the Orange County Marriage Resource Center so that
your revised website file can be saved while maintaining a copy of OCMRC�s
original file for reference purposes.   Future "Saves" to this same file can be
made by selecting "File" and "Save" from any place in the website file, which
we suggest you do on a relatively frequent basis.  In future times when you
open CuteSITE Builder, you will select your own website�s file name from the
opening menu "Start Using CuteSITE Builder", mentioned in paragraph #2, above.

Section B - Overview of Basic Approach

The basic approach we are suggesting is that you use the website you
received from the Orange County Marriage Resource Center (OCMRC) as a
model to create a website for your own Community�s Marriage Resource Center
by modifying the content of the website from the OCMRC with information and
resources from your own community.  If you have followed the instructions in
Section A, you have already started that process by changing the actual Title
of your website.  Everything else you do will follow that basic pattern of replacing
Orange County�s information with that from your own community.

The software we are using, Globalscape�s CuteSITE Builder, is a (relatively)
easy-to-use web site design software package.  It has many features and functions,
most of which you do not need to learn how to use in order to modify this sample
website into one that can work for you.  One of the CuteSITE Builder�s features is
an extensive "Help" function, which will provide you directions on how to use the
functions that you will need to use.  You can access the "Help" function by Selecting
"Help" from the right side of the menu bar at the top of the page.  (After selecting
"Help", click on "Help Topics", and then "Index".  From there you have two ways to
find a topic that you are interested in.  Either type in the first few letters of the word
you are looking for in the box under the number "1", or scroll down the alphabetical
list of topics under the number "2".)  In addition, if you ordered the CD-ROM version
of CuteSITE Builder, you should also have received a printed "Quick Start Guide",
which is another resource that you can refer to.

Section C - Exploring OCMRC�s sample website
Before you begin making changes, we suggest you become very familiar
with the workings of the sample OCMRC website by taking the time to fully
explore that website.  There are two ways to do this, and we suggest you use
both of these approaches as follows:

- Approach #1 - Use the "Preview" function.  Using your mouse, move your
pointer to the word "File" on the top left menu, then do a left click.  Highlight
"Preview Web Site", and then do a left click.  (If you have made any changes
since you have saved last, it will ask you if you want to save; select "OK").  Your
web site browser software will be activated (whether or not you are connected
to a phone line) and the website will seem to appear.  I use the phrase "seem to
appear" because you are not looking at the actual website; you are looking at a
"preview" version of the website which is contained entirely on your computer.
Almost all of the functions of the actual website are contained on your computer,
which means that you can explore the website to your heart�s content, without
tying up a phone line.  (The only limitation is that if you are not connected to the
internet, you will not be able to access any of the links to external websites, as
discussed below).

You will notice quite a few places where a field is color-underlined, which indicates
an active link.  These links fall into three categories:
- Internal website links - which take you to another place within the website.
When you move your pointer over these types of links, the name of the page
that the link will take you to will show up in a small box to the right and below where
the pointer is.  If you click on this link, you will be taken to the appropriate place in
the website.
- External website links - which take you to another website.  When you move your
pointer over these types of links, the website address that the link will take you to
will show up in a small box to the right and below where the pointer is.  If you are
connected to the internet and you click on this link, you will be taken to that other website.
- A "mail to" link, which will allow the website visitor to send an e-mail to the
particular e-mail address.  When you move your pointer over these types
of links, the e-mail address for the intended recipient will show up in a small box
to the right and below where the pointer is.  If you click on this link, an outgoing
e-mail window, addressed to that address, will be displayed.

Later, you will be shown how to create these links.

-  Approach #2 -  Use the "Site Map".  About an inch and a half from the top of
the screen (when you are in "edit" as opposed to "preview" mode) you will notice
a horizontal black section, about an inch high.  (These dimensions may be different
on your computer screen because of certain settings.)   Inside this black section are
a number of white boxes, and one yellow box, many of which are connected to one
another with white lines.  This is a graphical representation of the website and is called
the "Site Map".  Each of the boxes represents an individual web page on the website
and the lines indicate how the pages relate to each other.  You can use this Site Map
to explore the website as follows:
- When you use your mouse to move your pointer over the various boxes shown,
the name of the page that each box represents will appear in a small box above
and to the right of the pointer.  In addition, if that page is mentioned on the page
that is currently "active", a "box" will appear around that page�s name on the page as well.
- If you click on any of the white boxes, you will be taken to that particular page,
and the box for that page will turn yellow.

Section D - Common Website Modifications
The following sections of this document will show you how to perform the
most common functions you will need to perform to successfully modify the
Sample Website in order to create a website of your own community�s
marriage resources.  These functions are as follows:

D1)  Replacing existing text with new text;
D2)  Table Functions:
A) Deleting a row;
B) Adding a row;
C) Modifying data in a row
D3)  Linking Functions:
A) Linking to a place within your own website;
 i. To the top of another page
 ii. To an "anchor" on another page
B) Linking to  another website
C) Creating a "mail to" link
D4)  Formatting Functions
D5)  Page Functions
A) Deleting a page
B) Adding a page
C) Moving a page
D6)  Information for Search Engines

D1 - Replacing existing text with new text.
Yes, this is as easy as you would think.  Most of the time,
it is a simple matter of finding the text you want to replace,
deleting it, and typing in the new text.  That is exactly what
we did in Section A3, when we changed the Title of the website
on the home page, which also affected all the other pages.

Microsoft�s standard "cut and paste" and "copy and paste" functions
are also fully functional in CuteSITE Builder.  You will notice the
familiar icons for these functions on the second row of the menu bar
at the top of the screen.

D2 - Table Functions:
We use Tables to organize quite a bit of information in the website
(for example, in the Engaged Couples Section, and in the Weekend Events,
Marriage Classes and Ongoing Activities Sub-Sections of the Marriage Enrichment Section).
 We took this approach for the following reasons:
- It allows us to display quite a bit of information, using a consistent format, in a small amount of space;
- It makes it easy to "link to" more detailed information, when that is available;
- It fits in nicely with the chronological nature of most of the resources;
- It is user-friendly.

The approach to Tables within CuteSITE Builder is consistent with the
approach to Tables within Microsoft Word, so if you have used Tables
within Microsoft Word, this will be very familiar to you.  But if you haven�t
used Microsoft Word, don�t worry; it is very straightforward.  Let�s look at
the three main "Table Functions" you are likely to use:
A) Deleting a row.  Position your cursor in the row you want to delete.
(You will do this by using the mouse to move your pointer anywhere
within the row, and then doing a left-click).  Select "Table" from the top
tool bar (second from the right).  Then select "Delete Rows", and the row will be deleted.
B) Adding a row.   Position your cursor in the row BELOW where you want
to add a row.  Select "Table" from the top tool bar.  Select "Insert Rows" and then
"Before Current Selection", and the new row will be ready for you to add information
into.  It will appear that there is only enough vertical space in the new row to enter in
a single line of information.  However, once the first line is entered in, and you hit "Enter",
room for a second (and then third) line of information will appear.
C) Modifying data in a row.  Nothing difficult here.  Simply go the information you
want to change, delete what you don�t want, and type in what you do want.  Of course,
the "copy and paste" function also works in Tables, which is useful when the same
resource occurs more than once.

D3 - Linking Functions.   Links are the primary navigation vehicles within a website.
When a user clicks on an active link (which is usually designated by a colored underlined
word or phrase), they are "taken to" the appropriate place.   As mentioned in Section C,
Approach 1, there are three types of links within the OCMRC website; links to places within
the same website, links to other websites, and "mail to" links.  The approaches used to
create all three types of links are similar, and are discussed in this section.
A) Linking to a place within the website.  You will either want to take a User
to the top of a page, or to some specific place within a page.  Let�s look at each of these:

- Linking to the top of another page.  Start by moving your cursor to the place
where you will want the visitor to click on to activate a link.  Then type in the word or phrase
you want the User to click on.  Then highlight that word or phrase.  (To highlight it, move
the cursor to the beginning letter of the word or phrase you want to highlight, then press
and hold the Capitalization key while using the Right Arrow key to cover the word or phrase
you want to highlight; then release the Capitalization key.)  Then use your mouse to move
your pointer up to the symbol on the 2nd menu row (near the top of your screen) that looks
like a colored-in circle with a sideways eight in front of it (6th symbol from the right).  Click
on that symbol, and a symbol that resembles a paper click will appear.  Move your pointer
(with the paper click attached) to the Site Map (the black area with white boxes near the top
of the screen).  Find the white box that represents the page you want to link to (the names
of each of the pages will appear as you "hover" over each of them), and then do a left-click on that white box.

- To link to a specific place within one of the pages.  You will use this function
quite frequently.  Its most common use is to provide detailed information about the
resources listed in the Tables.  For one example of this, go to the Weekend Events Page
of the Marriage Enrichment Section.  (You should be in "Edit" as opposed to "Preview Mode"
to see this best).  Click on any of the "Marriage Encounter Weekend" lines you see in that table
and you will be "taken to" a description of Marriage Encounter.  In fact, your cursor will be blinking
directly to the right of an "anchor" symbol which is on the line directly above the phrase "Marriage
Encounter - All Denominations".   The steps to create this type of link are as follows:
1) Insert an "anchor" where you will want to be linking to.  Do this by moving your cursor
to that location, and then select the word "Insert" from the top Menu Bar (third from the right),
then select "Anchor" and then type in a name that you will use to refer to that anchor (you are
the only one who will ever see this label, but you should choose a label that you will recognize
as representing what you are linking to).  The information you will be linking to should go on
the line right under this anchor.
2) Go to the place where you will be linking from.  Highlight the word or phrase that you
will want the user to click on to activate the link.  (To highlight it, move the cursor to the beginning
letter of the word or phrase you want to highlight, then press and hold the Capitalization key
while using the Right Arrow key to cover the word or phrase you want to highlight; then release
the Capitalization key.)  Then select the word "Link" from the top Menu (6th from the left), then select
"Link to an Anchor on", and then select "Another Page".  At this point, a symbol that looks like a
paper clip will appear, attached to your pointer.  Move your pointer (with the paper click attached)
to the Site Map (the black area with white boxes near the top of the screen).  Find the white box that
represents the page you want to link to (the names of each of the pages will appear as you "hover"
over each of them), and then do a left-click on that white box.  At that point a box labeled
"Choose an Anchor" will appear, that lists all of the Anchors on that particular page.  Select
the appropriate Anchor, and then hit "OK", and the link will be completed.

B) Linking to another website.  This is done quite frequently within the website.
In each of the Tables, most of the fields labeled "Providing Organization" will be linked
to the website of the Providing Organization,  This serves several purposes including:
- Allows the user to find out additional information about the Providing Organization;
- Avoids you having to provide a bunch of information that is already provided on the
Providing Organization�s website;
- Creates goodwill from the Providing Organization to you.

These links are created in the following ways.   Go the place where you will be linking from.
Highlight the word or phrase that you will want the user to click on to activate the link.
 (To highlight it, move the cursor to the beginning letter of the word or phrase you
want to highlight, then press and hold the Capitalization key while using the Right
Arrow key to cover the word or phrase you want to highlight; then release the
Capitalization key.)  Then select the word "Link" from the top Menu (6th from the left),
then select "Create Link to URL or File".  The first box should have the initials "URL" in it
(if not, use the drop down box to select URL).  Use your mouse to move the
pointer to a location just to the right of the notation http:// and left-click there
in order to place your cursor there.  Enter in the website address that you want
to link to immediately after the second slash mark and then hit "OK", and
your link should be created.

C) Creating a "mail to" link.  This is used in most of the Tables as a way for
a user to be able to easily create an e-mail to the contact person for one of the resources.
You will notice that on most of the Resource Tables (one exception is the Monthly Calendar),
that the E-Mail Address for the contact person is provided in the third column, on the third line.
You will also notice that they have a color underline, indicating an active link.  When you click
on that link you will provided with an e-mail form that has that e-mail address already
provided in the "To" field.  The steps need to create this "mail to" link are as follows.

As with the previous links we created, the first step is to highlight the
place where you will be linking from.  Then select the word "Link" from the top
Menu (6th from the left), then select "Create Link to URL or File".  Click on the first
blue box, then select "Mail To".  The cursor should be blinking to the left to
the "m" in "mailto:" in the second box.  Use the right arrow key to move just to
the right of the colon in "mailto:", then enter in the appropriate e-mail address.
Press "OK", and the link should be completed.

 D4 - Formatting Functions.  Most of the standard formatting options that
you are probably familiar with from the standard Microsoft programs are also
available in CuteSITE Builder, and they operate the same in CuteSITE Builder as
they do in the Microsoft programs.  These formatting functions include (from left
to right across the menu bar), selection of font type and font size, the use of Bold,
Italics, and Underlining, justifying (left, center, and right), indents (greater and lesser),
and the use of bullets.  In all cases, simply highlight the area that you want to have
affected by the change and make the desired selections from the third line of the
menu bar at the top of the screen.

D5 - Page Functions.

A) Deleting a Page.  Go to the page you want to delete.  Select "Edit" from
the top Menu Bar (2nd choice from the left), then "Delete", and the page disappears.

B) Adding a Page.  This is actually a several step process, as follows:
1) To start the process, use your mouse to move your pointer into the black
"Site Map" area near the top of the screen.  Click on any of the white
boxes that are on the right side of the Site Map - one that is not connected
to any of the other white boxes.
2) Select "Insert" from the Top Menu line (7th from the left).  Select Page.
 Enter in the Title you want to give the page.  (This will show up on the top
of that page and in the Top Menu of pages that are on the same "level"
as this page in the Site Map).  Press "OK".  The new page will now appear.
3) To remove the left border, move the pointer into that area of the
new page, and do a left click.  The cursor should now be blinking in that
section of the page.  Do a right click.  Select "Properties", and then
"Page Area".  Then "un-check" the box on the top left that says
"Show this border", then press "OK", and the left border should disappear.
4) If you look at the Site Map, you will notice that the Yellow Box representing
this new page is not connected to any of the other boxes in the site map.
In addition, you will notice that the only page Name listed at the Top of this
new page is "home".  Those two facts are directly related.  In order to correct this,
you will have to "Move" the page, which is the next function we will be discussing.

C) Moving a Page.  In short, the way to move a page is to click on the box
in the Site Map which represents the page you want to move, and while
holding the left-click button down, use your mouse to drag the box to a
different location on the Site Map which represents where you want to move
the page to, and then release the left click button.

As was mentioned earlier, the "Site Map" gives a visual representation as to how the
Pages on the web site are organized.  If you look at the Site Map you will see that
the top row has only one box.  That is for the Home Page.  The second row
represents all the Pages that are on the first level directly under the Home Page.
Go ahead and click on any of the boxes in that second row and you will be taken
to that page.  As you use your mouse to move the pointer over each of the white
boxes on that second row, you will notice that the name for each of the boxes
appears directly and above each of the boxes, and a single-line rectangle appears
around the Name of the page on the Top Menu that the pointer is hovering over.
The order of the page Names on that Top Menu is the same order as is represented
on the Site Map.

Let�s work with the "Singles" page to illustrate how to move a page.  To do
this, use your mouse to move your pointer over the first box on the second row of
the Site Map, which represents the "Singles" page.  Click on that box, and the white
box turns yellow, and the Singles page becomes active.  While holding the left click
button down, drag that yellow box to any place on the Site Map that is not connected
with a line to any other box, and then release the left click button.  The little yellow box
representing the Singles page will stay "floating" where you left it.  You will also notice
that only page Name remaining on the Title bar of that page is home, representing the
Home Page.  Now move your pointer over any of the other boxes on the second level
of the Site Map, and do a left click.  You will notice that "Seriously Dating" is the first
page listed in the Top Menu of that page - taking up the space that "Singles" used to
be in.  Now, click on the Home Page, and you will see that the links to the "Single" page
are still present.  So even though you "moved" the page, the links to that page are
unaffected.  (If you wanted to delete the links to that page from the home page, all you
would have to do would be to delete the word "Single" from the home page, but I
don�t suggest you do that right now.)   To put things back the way they were, go ahead
and move the Singles page back to where it was (by moving the pointer over the
Singles box on the Site Map, then holding the left click button down while dragging
the Singles box back to where it was before - the first box on the line of boxes under "Home".)

D6 - Information for Search Engines.  If people do not know your website's
address, the way that they will find your website is by entering in key words or descriptive
information about what they are looking for.  The website template that you received
from the Orange County Marriage Resource Center contains this information for
Orange County's website.  You will need to modify this for your community's website.
To begin this process, go to your home page.  From the top menu bar select "Edit",
then select "Properties", then select "Page".  The "Page Properties" dialog box will appear.
Substitute your community's name for "Orange County" wherever it appears in the fields
labeled "Title", "Summary" and "Keywords" and/or make whatever changes to those
fields that you would like to make.  When you are finished, click on "OK".

Section E - More information about CuteSITE Builder
The following is a list of additional sources of information about CuteSITE Builder:
1) The Help File - in CuteSITE Builder.  As mentioned earlier, this can be accessed
by choosing "Help" from the top Menu bar, and then "Help Topics";
2) CuteSITE Builder Knowledge Base.  From the "Help" tab on the top Menu Bar,
you can select "CuteSITE Builder Knowledge Base" and be taken to a website
where a list of "How To" topics about CuteSITE Builder are displayed for you to
choose from.
3) A book entitled "Trellix Web Web Site Creation Kit" by Corbin Collins.  This book
was written in 2001 and is available on Amazon.  Trellix Web was the original name
for the CuteSITE Builder product, and this book provides a wealth of information about
the product in an easy-to-read format which uses lots of pictures and screen shots.
While a few of the functions of the software have changed since the book was written,
I believe the book is well worth obtaining.
 

Return to Orange County Community Organizing page.