How to Create a Web Site Using CMS4Schools
Contents:
I. Plan Your Site ………………………………………………………. Page 1
II. Complete Your Profile……………………………………………… Page 2
III. Create your Web Site’s “Skeleton”………………………………. Page 4
Use the Navigation Builder ………………..…………………….. Page 4
to Create an Internal Page …………………………………… Page 5
to Link to an External Page …………………………………… Page 6
IV. Add Content to Your Pages ……………………………………..... Page 7
Create a Practice Page …………………………………...……..…Page 7
Add text and a photo using the Text/Graphic Editor ……..… Page 8
Add links using the Resources/News Tool ………………….... Page 10
Add a link to one of your web pages...…………….. Page 11
Add a link to a page out on the web ……………..... Page 12
Add a link to a file in your h: drive ……………..... Page 13
Add a photo gallery using the Photo Gallery tool …………….Page 14
Add a slide show using the Slide Show tool ………………….. Page 16
Fill in the "Skeleton" you made in III …………………………….Page 18
I. Plan Your Site
1. Start by looking through the example sites, to get an idea of what CMS4Schools
pages look like, and what pages you might include in your own web site.
a. Elementary:
http://www.cms4schools.com/mononagrove/faculty/esample/index.cfm
b. Secondary:
http://www.cms4schools.com/mononagrove/faculty/s_example/index.cfm
2. Think about/discuss/brainstorm/decide what pages you want to include in your
own site.
3. Make a list of the pages you want to include, and any sub-pages, for example:
Home
About Me
Photo Gallery
Daily Schedule
Homework
Newsletter
Helpful Links
Links for Students
Links for Parents
Projects
Vocabulary Lists
Calendar
1
II. Complete Your Profile
1. Look at your own page as it currently exists (undeveloped). Ed Jones would go
to
(Use your own first initial and last name, and make sure to capitalize as above.)
Note that there’s nothing on your page except this:
2. Now, open a new browser window and log in to your CMS Faculty
Administration page by going to
http://www.cms4schools.com/mononagrove/faculty
Log on with your username in the form e.jones and the starting password:
Spiderman
You should get to a screen that says “My Web site Administration” at the top.
You are now logged in to your Faculty Administration Page.
Important Notice!
You now have two browser windows open. One is your web page – as it
actually appears on the web right now. The other is your faculty pages
administration page, which no one can see but you. When you are editing
your pages, you’ll want to have both windows open, so you can make changes
from your administrative control pages, (the "back" of the page) and check
to see how they look on your web pages (the "front".)
Browser tab for your
web page
Browser tab for your
Faculty Pages
Administration
2
3. Edit your profile:
a. Choose “My Faculty Administration” in the upper left of the screen.
b. Then choose “Edit My Profile” from the upper left of the screen.
c. Enter your Title and Phone as shown below, and change your password –
consider using your e-mail password so you won’t forget it.
Edit your title so that it
describes what and you teach.
Confirm that your email address is correct
and fix it if need be.
Choose a new password.
Don’t upload
any photos for
the profile!
d. Now scroll to the bottom of the page and click on “update.”
4. Click on the browser tab for your web page to view the changes you’ve made to
the page,
Then click on the “refresh “ button of your browser to update your view of the
page.
Your profile should be updated and should look like this:
3
III. Create Your Web Site’s “Skeleton”
How To Use the Navigation Builder
You should still be logged in to your faculty pages administration area. If you are, open
the browser window by clicking on the Faculty Pages browser tab. If you aren’t, log on
as described on page 2 (II.2) above.
You should see the following menu on the left of your screen:
The Navigation Builder is the tool you will use to add
pages and set up their order on your web site.
1. Click on “My Navigation Builder Home.” You will now see the Navigation
Builder page, listing all of the pages in your site—currently just one, your home
page:
Note that the browser tab for your editing screen has changed:
2. Add pages to your site, and put them in the order you listed in I.3 when you
planned the structure of your site. There are two kinds of pages you can add:
Internal Pages, which are pages that you create, and External pages, which are
pages that already exist on the web – you add them by creating a link to them.
4
How to Create an Internal Page
From the Navigation Builder…
Click on "Add Page" and then choose “Internal Web Page,” -- you’ll see
a screen that lets you define your new page and determine its order among
your pages.
words that will appear as the
link on your home page
menu
CMS system file name
(needs to be unique among
the pages on your site; no
spaces allowed)
Title that automatically
appears on the top of the
page you’re creating – you
can leave this blank if you
don’t want text at the top
of your page.
Active pages are
on the web;
inactive pages
are hidden until
you activate
them.
Navigation Order
determines the
ordering of links
as they appear on
the left side of
your pages.
Navigation Level
determines if pages are
“sub-pages” of other
pages.
When everything is set the way you want it, click on “Add” at the bottom of the
page. Your new page will now be on the Navigation Builder’s list of your pages:
5
How to Link to an External Page
From the Navigation Builder…
Click on "Add Page and then choose “Web Site Link,” -- you’ll see
the same “Add Page” screen you used to create a page, but with
fewer choices:
words that will appear on the
link on your home page
menu
“Opens in new window” is
recommended for links to
external sites – it helps remind
people they’ve left your pages.
Type the address of the site
you’re linking to here:
Navigation Level
determines if pages
are “sub-pages” of
other pages.
Navigation Order
determines the
ordering of links
as they appear on
the left side of
your pages.
a. To check your work, click on the browser tab for your web page to view
the changes you’ve made to your site:
If your web page is closed, you can reopen it using the “Preview” link in
the Navigation Builder:
(Don’t forget to refresh your web page when the browser opens.)
6
IV: Add Content to Your Pages Using CMS “Tools”
Once you’ve created the skeleton of your web site – a set of empty, ordered pages – you
can fill them in using the CMS “Tools.”
1. Make sure you have your web page open in one browser window, and your
Navigation Builder page open in another. If they are already open, you’ll see the
following browser tabs at the bottom of your screen:
If they aren’t open, open them by following the directions in II.1 and II.2,
then click on “My Navigation Builder” on the left side of the screen.
If you have created some pages, your Navigation Builder will have these
elements:
Links to edit your
pages
Create a Practice Page
2. For practice, create a new page called “Practice Page.” (Follow the directions in
III. 2. a.) You’ll add four of the major tools of CMS4Tools to your practice page,
and then you should be ready to fill in your blank pages the way you want them.
3. Click on “Practice Page” in the grey area on the left of your screen:
7
The “tools” area of your practice page will open. You can think of this as
the back of the practice page; it’s where you work on your page behind
the scenes. The front of the page is what people will see when they visit
your pages on the web.
The back of the practice page
CMS Tools
Add Text and a Photo to Your Page
Add text and a photo to the practice page by using the Text/Graphic Editor.
Click “Add”
8
The top of the Text/Graphic editor is an area where you can add and format text:
Formatting
Tools
Text that’s been entered
The bottom of the Text/Graphic editor is an area where you can add pictures:
Photo selected from h:
drive
Caption added
here
9
There are several settings you can experiment with to adjust the size and placement of
your photo. You can also make the photo itself a link to another web page.
When you have added the text and picture, click “Update.” Here’s what the back of your
practice page looks like now:
You can look at the front of the page by clicking on
the browser tab for your web page,
or, if you’ve closed the page, by clicking on
“Preview.”
Add Links to Your Page
Add links to your own pages, other web sites, or files you want to publish by
using the Resources/News tool.
Click “Add.”
Use this control to determine where
your links will go on the practice page.
When you add a Resources/News element to your page, it lets you add one
or many links within that element. To add the first link, click on “Add
Resource/News Item”
10
Add a Link to One of Your Own Pages
Add a link to your one of your own pages (for example, your home
page):
What the link will say
Descriptive tag
that will appear
beneath the link
Button that makes the link
connect to one of your
own pages
The Page Title of the page you're linking to. (The Page
Title is the text that is printed at the top of the page.)
i.
Click “Add” when
everything is ready.
11
Add a Link to a Page Out on the Web
Once you have entered a link into the Resource/News Editor, the
tool looks like this on the back of your page:
Click here to add
additional links
This time, choose “Web Site Link” as the resource type:
Click “Add” when
everything is ready.
12
Add a Link to a File on Your H: Drive
Once you have entered a link into the Resource/News Editor, the
tool looks like this on the back of your page:
Click here to add
additional links
This time, choose “Link to a File” as the resource type:
Click “Add” when
everything is ready.
13
Add a Photo Gallery to Your Page
A photo gallery is a set of one or more "photo albums." Each album is a collection of
photos that can be displayed in CMS4Schools in a variety of ways. Add photo galleries
to your pages by using the Photo Gallery tool.
Use this control to determine where your
photos will go on the practice page.
Click “Add.”
Before you have added any albums, the new tool will appear as follows on the back of
your practice page:
Choose "Add Album" and you will see a screen that lets you define the characteristics of
your album. The top half of the screen lets you choose how the photos and the album
title appear. It can help to start with the default settings and experiment from there.
Thumbnails or previous/next arrows?
If thumbnails, how do they look and
work?
Maximum height in pixels. If you leave it blank, the
height will "self-size" based on the picture's width.
Maximum photo width. Start with the
default and experiment from there.
The bottom half of the "Add Album" screen lets you enter "Overview" text to accompany
the album in the album list that will get created on your page, and "Full Album" text to
accompany the photos in the album. Both are optional.
When you've got the album settings the way you want them, click "Add" at the bottom of
the page.
14
Now the album tool you've added appears on the back of your page with a new control
that lets you add and update pictures to the album:
Click on "Photos," and select a number of photos to add from1 to 10. You can add more
later, and as many as you want in total, but only 10 at a time.
Choose a
number of
photos to
upload
Click on "Add" and you'll get a screen that gives you a set of boxes that lets you upload
and label photos -- one box for each photo.
The title you enter will
appear under the photo.
Pick the photo from your
h:drive or some other device
on your computer.
Type in a description
(optional).
When you've added all the
photos, click "Add."
As always, to see what your changes look like on the front of the page, use the browser
tab to view the practice page (page 3, step 4), or if the practice page isn't open, click on
"preview" next to "Practice Page" in the Navigation Builder (page 4, step 1).
15
Add a Slide Show to your page
A slide show is a set of photos that change automatically from one to the next on your
web page. It's a great way to catch attention and to give your page a dynamic look, and
it's probably the easiest CMS4Schools tool to use.
Use this control to determine where your
photos will go on the practice page.
Click “Add.”
After you click "Add," you'll see a box that lets you choose:
Whether they appear in a regular
sequence or randomly
The time interval
between photos
The size of the photos
It's simplest to start by leaving the default settings, and experimenting later. Click
"update" when you're ready.
Now the slide show tool appears on the back of your practice page, and you're ready to
add pictures to the slide show. Choose the number of photos you want to upload, and
click on "Add."
16
Click on "Add" and you'll get a screen that gives you a set of boxes that lets you upload
and label photos -- one box for each photo.
Pick the photo from your
h:drive or some other device
on your computer.
The text people will see
when they "mouse over"
the photo. (Optional)
The description (optional)
will appear while the photo
is showing.
When you've added all the
photos, click "Add."
As always, to see what your changes look like on the front of the page, use the browser
tab to view the practice page (page 3, step 4), or if the practice page isn't open, click on
"preview" next to "Practice Page" in the Navigation Builder (page 4, step 1).
17
Now, fill in the pages you created in step III (page 4) above
Use the directions at the top of page 7 to access the back of the blank pages you have
already created, and use the tools explained in pages 8 through 17 to add content to your
pages.
When your site is ready to publish, delete the practice page and e-mail Bill Herman that
it's ready to go. You should delete the practice page, and any other material you don't
want the world to see, before March 2, 2009, because that is when this site will go public.
18