Welcome to your new web site. This tutorial will take you from a brand-new, freshly minted SimpleSite through logging in to edit it, updating the home page and adding a new page.

What we'll be covering is only the tip of the iceberg in terms of the capabilities of your web site. More help is available in the how-to section of the documentation. And, don't be afraid to play around. You may always just delete or hide your tests.

Would you like to read this tutorial while you experiment? You might just print the tutorial, and keep it by your side. Or, just open up a new browser window and switch back and forth as you experiment.

Starting at the Very Beginning

When your new site was created by the web team, you should have been sent a Web address (URL) for your new site. Type or copy it into the address bar of your web browser, and you should be seeing something like the window below:

This is a one-page web site. The title should reflect the name of your organization. The "Log in and edit..." text in the center of the page is boilerplate added when the site was created.

To make changes in the site, we're going to need to "log in." Logging in is the process of establishing that you have the credentials necessary for editing. Those credentials are a login id and password. Both should have been issued to you when the site was created.

Take a look in the shaded bar under the search form (at the upper-right corner of the page). You should see a link labeled log in. Click on it and you should be transported to a page containing a login form.

If you don't see the log in link, it may have been hidden. If that's the case, just navigate to your site's web address plus "/edit". For example, if your site's address is http://groups.dcn.org/neworg, you may navigate to http://groups.dcn.org/neworg/edit.

The Log In Form

The log in form asks for your login name (i.e., login id) and password. Type them in to the matching fields and clock on the Log in button.

Both the login name and password are case sensitive. You'll need to make sure that you don't have your keyboard caps lock set, and you'll need to enter the two bits of information exactly as you received them.

The Remember my name function just tells your browser to remember your login name for future use.

If you have trouble logging in, be patient and give it a few tries. If problems continue, contact the web team to make sure you were set up correctly.

A successful login will take you to a page that confirms your action with the message "You are now logged in." Click on "Continue" to move on to editing.

If you're logging in by directly navigating to an edit page, you'll bypass the confirmation page.

Editing Mode

Logging in to edit will change your page display in some important ways. Look in particular for the green box surrounding the central content area.

The green-bordered area has several options at the top. The tabs allow you to select different views of the current context: its contents, public view, content editor, properties editor and others. The are also several drop-down menus, each of which has a small downward-pointing triangle to indicate that clicking on the item will produce a menu.

Also, you may see some new side-bar (or portlet) boxes that are meant to help site editors. The Recent Changes portlet, for example, lists the most recenly changed content.

If you've successfully logged in to edit your site, you should see a green border surrounding the central content section of the page. At the top of the green box you should find the action tabs.

Two of these tabs are important for our current purposes.

• The View tab: click on this tab to see the public view of the content; and,
• The Edit tab: click on this tab to edit the current content.

Click on the Edit tab to open a form that will allow you to edit your home page.

This form has three fields (editable areas): Title, Description and Home Page Body Text. (The body text field has been vertically compressed in the illustration above.)

Title

This is the title for the page. It will appear at the top of the page's text, in the title bar for the browser and in navigation lists and search results. This field is special on the homepage because it also sets the title for the site.

Description

A short, generally only a sentence or two, summary of what the page is about. This shows up at the top of the page's text and in content lists and search results.

Body Text

The bulk of the text for the page. This field is special because it may be more richly formatted. The green-shaded formatting button bar controls formatting.

Let's make some changes. First, change the title as necessary to get your organization's name correct. In this case, we're just adding "The" to the beginning.

Then, put the shortest introductory text you can manage into the Description field.

Now, move on to the Body Text field. Type some text into the field. Don't worry about formatting except to press the Enter key at the end of each paragraph. Make your first line be something that you'd like to use for a header.

You should be able to edit the text you've entered via conventional text editing commands.

Now, let's turn that first line into a header. Position your editing caret (which marks the point of action) in the first line and click in the style-selection drop-down (which will initially read Normal).

The drop-down style menu should offer some basic text formatting choices.

Choose Subheading from the menu.

The result should be something like that in the illustration at the right: the current paragraph will be bold and larger.

If it doesn't look exactly like this, or what you want, play around! Get a feel for what the styling buttons do to the current paragraph or selected text.

Saving Your Work

Look at the bottom of the form to find the Save button, which will be in a group with Next and Cancel. Press the Save button.

After the server and its content-management system do a bit of work, you'll be returned to the View action page.

Note our new title, description and body text.

Log out, if you're done for now, or follow along in our next step.

When we left off with the last portion of the tutorial, our new web site had one page, and looked something like this:

Note that the green-shaded content box and associated action options, along with the Recent Changes sidebar, would only be visible to a logged-in editor. If you're not logged in, do that now.

An About Page

Let's add a page to our site. A good choice for a first page is one describing your organization in more detail.

To add a page to the site, look in the green-shaded action options bar and find the Add Item drop-down menu. Drop down menus are indicated by the downward-pointing triangles. Click on Add Item to see the menu.

While the drop-down menu is visible, you'll see a list of content types. You add a particular kind of content by choosing the appropriate type from this list. In this case, we want to add a web page, so click on Page on the list.

For more information on the content types available, see the Adding Content How To.

The Edit Page Form

Choosing Page from the Add Item menu will take you to a form that will allow you to specify the page content. The form should look much like this:

Title & Description

The first fields on the form are for the page's title and description. Our title here is simple: "About Us." Keep titles short and to the point. Long titles will make a mess of the site's left navigation sidebar (portlet).

Note that the title field works a bit differently than when you were editing the homepage. The title field of the homepage sets the title for the entire site. A page's title only affects the individual page.

The contents of the Description field shows up in several places (like when you hold the mouse for a second above a page's title) and in search results. Make it useful, but not too long.

Body Text

The Title and Description are plain text. The Body Text of a page may be richly styled to reflect structure and emphasis. You may enter the text in several formats, but if you're using a web browser with a rich-text control (like recent versions of Firefox, Camino and Internet Explorer) the easiest way to format text is using the What You See Is What You Get (WYSIWYG) editor. If it's available, you'll see a large green button bar.

As with the home page body text, the easiest way to style text is to enter it simply, then go back and use the style chooser to pick your headings and subheadings.

You may also copy formatted text from another browser window or word processor and paste it into the body text field. This works best with simply formatted text, and is a recipe for vexation if the pasted text has much in the way of margin or font manipulation.

Related Items

We're not going to do anything with the Related Items field at the moment, but keep it in mind. This field provides the answer to the question of How may I attach something else -- like a PDF form -- to a web page? The answer is to create a new File item, upload your PDF to it, then attach it to a page as a Related Item.

Allow Discussion ... ?

If you choose to allow discussion of a page, and if you've turned on anonymous discussion for your site, readers will be able to add comments to the page. If you allow this, remember that it is your responsibility to keep up with the comments.

Finishing Up

Your work on the page isn't complete until you press the Save button at the bottom of the form. Don't forget about it!

The Results

After you save your work, you'll be taken to the View display of your new page. Now, take a look at the site navigation sidebar on the left. There's the new page, automatically added!

It's conventional for web sites to have simple contact information at the bottom of each web page. Let's take care of that nicety.

If you haven't done so already, log in and navigate to your site's home page. Choose the Edit tab from the green-shaded action bar. You should see something like this:

Take a look at the set of bracketed titles under the Edit Mini Portal title. These are all site administrative options. You already used one of them, [default] when you edited your home page text. Now, click on the [footer] link to get to the footer edit form:

The footer edit form has only one field: a text editor (WYSIWYG if you're using a supported browser) that allows you to set your footer text. Click the cursor inside the field.

Look in the editor button bar for the Center icon (the centered stack of horizontal lines). Press it to indicate we want our text centered. Do the same to the B button to indicate that we want bold text.

Type your organization's name. Press the B button again to turn off the bold. Then press the Enter key to break the line. Add your organization's address and phone number, so that it looks something like this:

Look to the bottom of the form. Press the Save button to save your work. Then, take a look at the bottom of the page. You'll have a simple contact info footer that will show up on every page: