Homepage Design

When you first access your course, WebCT will have created a default homepage for you which you can now modify to suit your needs. The following figure shows the initial layout of your homepage:

The homepage is divided into two frames. The top frame contains the students' view of the homepage. The bottom frame contains the designer toolbar, which gives the course designer access to the options for each page. We'll be looking at a number of these options throughout this tutorial. The designer toolbar is only visible when the course designer has logged in; it will not be visible to students in the course.

Minihelp

Minihelp is a new feature in WebCT version 1.2. When Minihelp is enabled, it provides small textboxes at the top of many WebCT screens which give a brief overview of how each screen functions. For the purposes of this tutorial, we have taken screenshots with Minihelp disabled to save space and to avoid redundancy. To turn Minihelp off, click the Course Settings button in the bottom frame (the designer toolbar), then the Minihelp button. In the top frame, click Mark None followed by Update. To return to the homepage designer toolbar, click the Back button in the bottom frame. You are now ready to start the tutorial.

Tip: Click on Dr. CT in the designer toolbar to access online help for the current topic.

Here is a quick description of the homepage elements. Each one of these items is optional and may be omitted from your homepage.

Banner: The banner can be used as a graphical identifier for your course. The banner can be an image (GIF or JPG format) or text. We'll see how to customize the banner later.

Header: The header is placed between the banner and the homepage contents. The header can be formatted in HTML and may include images.

Course Content: The homepage is the access point to the rest of the course. The course content section contains the links to the various sections of your course. We'll look at the types of content a little later on.

Footer: The footer is placed directly below the course content section. Like the header, the footer can be formatted in HTML and may include images.

Counter: The counter keeps track of the number of accesses to the homepage. The counter may be placed either above the header or below the footer.

Customizing The Homepage

Let's start changing the look of the default homepage. To modify any part of the homepage, click on the Customize Page button in the designer toolbar. The following menu now appears in the designer frame:

Background Image

First, let's change the background of the homepage to take away the zig-zag border and texture. Click on the Bgd. Image button in the designer frame. The main frame now displays the background selection menu for the homepage (see Figure 2-3).

The current background image is displayed at the top. Below the image are 3 radio buttons which allow you to choose either no background image, the global default or an image file to use as a background image. The text-entry box allows you to enter the name of the image file. A Browse... button lets you use the WebCT File Browser to look for files you want to use.

For now, select the None radio button and press Update to return to the homepage. If you had pressed Cancel, the background image would have remained the same. The homepage background has now reverted to the colour specified in the colour selection menu. Let's see how to modify these colours.

Colour Schemes

Colours for the homepage are changed by clicking on the Colours button in the Customize Page menu. The main frame displays the colour schemes available to apply to the homepage (see Figure 2-4).

Currently, there are 4 pre-set schemes to choose from, as well as a Custom Colour set which allows you to define your own colour combinations. Each scheme consists of a colour for background, text, links and visited links. The schemes are identified by their numbers, from 1 to 4. Above the table you can see what the current colour scheme is set to. On the homepage, the Custom colour set is in effect, which is set to a white background colour, blue text, green hyperlinks and purple visited links. Right now, let's choose colour scheme 1 by clicking on the hyperlinked 1. This operation will return you to the homepage and change the background to a soothing sand colour. You may notice that the text of the header and footer are still a bright blue, even though the colour-scheme selector should have chosen a dark-purple text colour. The reason is that the header and footer editor allows you to choose a custom colour for the header and the footer text which then overrides the page's colour scheme. We'll see how to modify the header and footer messages soon.

Banner

Now let's change the banner appearing at the top of the homepage. Click on the Banner button in the Customize Homepage menu. The top frame now displays the banner selection page.

The current banner selection is shown at the top (see Figure 2-5).

The default ``WebCT'' image is a GIF file distributed with the WebCT installation. The complete path to the file is shown in the text-entry box beside the Filename radio button. Instead of using an image file, you can specify a text message. This text message is formatted in a large font and contains the Dr. CT icon. Let's change the banner to read ``Introduction to Vectors'': select the radio button beside Text and type Introduction to Vectors, then click on Update. The resulting homepage banner is shown in Figure 2-6.

When the WebCT site administrator creates your course, they have the option of generating a default title for your course. If you select Default for the banner type, this default title is used on the homepage, formatted in the same way as the Text option. If you decide not to place a banner on your homepage, choose the None option.

If you already have a banner image made up, and have uploaded it to WebCT (see Chapter 3, File Manager), you can replace the ``WebCT'' image with your own by typing in the name of the image file into the text-entry box beside the Filename radio button. If you can't remember the exact filename, you can click on the Browse... button. This will jump to the WebCT File Browser, which we'll tackle a little later on. For now, we'll stick with the Text banner.

Header and Footer

The header and footer areas on the homepage allow you to give your students additional information, a welcome message, or updates of changes to your course. Let's customize the header for our purposes by clicking on the Header button on the Customize Page menu.

WebCT now displays the interactive Content Generator, which allows you to create and format text as HTML without requiring you to know HTML commands. As with homepage design, the screen is divided into two sections. The top frame shows the header elements along with a radio-button beside each element (see Figure 2-7),

while the bottom frame shows the available options (see Figure 2-8). As the header only has one element, only 1 radio button is shown. Let's modify the header: select the radio button in the top frame, and then click on Edit in the bottom frame.

The top frame now displays the various ways that you can modify the particular element of the header. We'll ignore some of the sections for now; let's concentrate on the Text Heading and Text sections (see Figure 2-9).

Currently, the whole header message is placed into the Text section of the Content Generator. Note that you can use HTML tags within this section if you need more control over the layout of the header.

First of all, let's remove the whole text of the header: select the text by clicking your mouse at the beginning of the text area box and dragging the mouse downward to highlight the whole text. Once all of the text is highlighted, press the Delete button on your keyboard to clear the text. Now, we'll give our header a heading. In the Text Heading portion, type

Welcome to Physics 101

Let's also make the heading stand out by choosing Maroon from the Colour drop-down list, selecting the checkbox beside Bold in the Style section, and also selecting the radio button beside Center in the Alignment section (see Figure 2-10).

Now, let's also enter some additional comments in the Text area of the element. Type the following into the textarea box:

Remember to check the Bulletin Board for Class Announcements and Discussions.

We'll also center this bit of text, and we'll choose Default as the colour (which uses the colours specified for the homepage colour scheme). Let's also increase the size of the text from 2 to 3 (see Figure 2-11).

Once you've made the changes, scroll down to the bottom of the upper frame, and click on the Update button to save your changes. The top frame will now display the new header. If you are happy with how the header looks, click on Back in the bottom frame to return to the Homepage menu.

Now we'll delete the Footer of the homepage to simplify its appearance. Click on Footer in the bottom frame to again access the Content Generator. Select the radio button beside the footer's text in the top frame, and then click on the Delete button in the bottom frame. A dialog box will appear, asking you to confirm the deletion. After doing so, the text will disappear, and the footer will be blank. You can now click on Back in the bottom frame to return to the homepage. The homepage should now appear as shown below:

Counter

The final non-content item you can add to the homepage is a counter. Counters are a novelty feature which give you and your students a general indication of how much your course is being used (WebCT also provides a fairly sophisticated student tracking module which we'll look at later). The counter selector can be accessed from the Counter button on the Customize Page menu. A small menu appears which allows you to select the position of the counter on the homepage (see Figure 2-13) by selecting one of the three radio buttons.

The current setting, Bottom, is selected by default. If you select Top, the counter will be placed below the banner but above the header. Selecting None will remove the counter from the homepage.

The asterisk (*) beside the None label means that None is the global default for the counter, and we're currently overriding this default by having Bottom selected. Above the radio buttons is a sample of the current counter, which can be changed by clicking on the Configure... link. Click on Configure... now to see how you can change the look of the counter. The top frame changes and displays the Counter Editor menu (see Figure 2-14).

The counter display at the top of the frame shows the current counter configuration. Options that you can change are:

Digit Style - the style of the counter digits. Choose one of the 6 digits shown by pressing the radio button beside the style of your choice

Frame Thickness - the thickness of the border surrounding the counter. If you don't want a frame, choose a frame thickness of 0

Frame Colour - the colour of the border surrounding the counter. Choose one of the available options in the drop-down list

Number of Digits - the number of digits that should be displayed for the counter.

Text before - the text appearing immediately before the counter

Text after - the text appearing immediately after the counter

Tip: You can place HTML tags into the Text Before and Text After boxes to make the text appear above or below the counter.

Let's choose the large odometer-style digit, with the following values:

Frame Thickness: 8
Frame Colour: yellow
Number of Digits: 8
Text before: <b>Accessed
Text after: times</b>

Now press Update to return to the Counter Selector menu. The resulting counter is shown in Figure 2-15

Reorganizing the HomepageYou currently have 8 links on the default homepage. Some of these links are built-in WebCT tools, while others lead to course content pages. We'll show you how to add your own content later. First, however, let's look at how we can move these links around on the homepage.

Any modification to existing links on the homepage is done by clicking on the Organize Icons button on the Homepage menu. The designer frame will now display a new menu of options:

The main frame updates to show radio buttons beside each link on the homepage (see Figure 2-18).

To perform an operation on an item on the homepage, you must first select the radio button beside the item, then press one of the buttons in the Organize Icons menu. You can do one of the following:

Add - This section will be discussed in Chap 4. Course content under the title ``Toolpages and Adding Tools''.

Delete - deletes the selected item from the homepage.

Edit - allows you to edit the text-label beside the icon, as well as other information, depending on the type of item. We'll visit each item in more detail when we start adding to the homepage.

Hide - this option hides an item on the homepage from the students. This option is useful if a particular section of the course is under construction but should remain visible to the instructor. Hiding an already-hidden item does nothing. If you hide the Quiz icon, it will appear as in Figure 2-19.

Reveal - makes a hidden item visible again to the students. Revealing a visible item does nothing.

Layout - See below for details.

Forward - moves a particular item forward in the icon order on the homepage. For the four-column layout shown here, moving an item forward will move that item to the right if the item is currently in one of the first three left columns. If the item is in the rightmost column, the item will be moved down 1 row and into the leftmost column. Moving the last item on the homepage forward will make it the first item. For example, moving the Bulletin Board icon forward results in the layout shown in Figure 2-20.

Backward - functions as Forward except in reverse.

Move To Another Page - allows you to move an icon from the current page to a toolpage, if one has been created. We'll talk about toolpages in Chapter 4, Course Content.

Layout

Clicking the Layout button reveals the Icon Layout Editor screen. You will see a small menu which allows you to choose a one- to eight-column format for the homepage icons, as well as the position of the icon labels:.

Currently, the format is set to four columns with labels appearing below the icons. Just for fun, select a one-column layout with labels beside the icon and press Update to return to the homepage. The homepage icon layout now looks like Figure 2-16.

Since a one-column layout takes up a lot of vertical space, it is probably best to stick to a multi-column layout for most homepages. Click on Layout again and select ``4 columns'' with labels below the icons as before. Click Update to save your change.

Before advancing to the next section, click on the Back button in the designer toolbar to return to the course homepage.