Tutorial 1: Build a Faculty Web Site Home Page

You can use the GHC Faculty Website Management System to set up an individual faculty home page and to add and edit additional pages. What you are doing is establishing a small web site on the GHC “web server,”  a computer on the GHC network that displays web pages when a visitor goes to the GHC site.

Your site can consist of a single home page, the first page visitors see when they go to your site, or a home page and additional pages. You can include images, sound and video.  When you have set up your web site, visitors access your site home page by clicking a link to the page from your department web page, or by entering the site address (the “URL”) in the address box at the top of any web browser.

This handout explains how to set up a new GHC Faculty web site and how to create and edit a home page using CK Editor, an easy-to-use HTML editor that enables you to add and format text, add images and format a page on your web site (HTML is the code used to display pages on the web). The CK Editor works like the editor in Word, and is very user-friendly.  

You can download a CK Editor User Guide from:


http://docs.cksource.com/CKEditor_3.x/Users_Guide


There are 5 steps involved in setting up a home page:
1. Activate your site.
2. View/edit your home page.

3. Examine the CK Editor

4. Add text to your home page

5. Edit your home page

 

STEP 1: Activate your site

To set up and create your site you must be online. You can use a Windows PC or a Mac, and Internet Explorer, Firefox or Safari, and you can work on your site anywhere you can get online (i.e. wi-fi hotspots, the GHC campus network, etc.).

To activate your site, you will need the following information: Your primary campus, division and discipline, your office phone number.


1. Open any web browser and go to the GHC home page.


2. Log in to GHC Connect. The GHC Connect link is under “Student Interests.”  The GHC Connect logon page appears.

3. Enter your GHC network/email username and password. Where it says “Account,” select “Faculty”.

4. Click “Login”.  The GHC Connect Welcome Page appears.

5. Locate the GHC Connect menu on the left of the Welcome Page.

6. Click the “Web/SFTP” link. The GHC Website Management System Welcome Page appears (Fig. 1).

Figure 1: GHC Website Management System Welcome Page

Because you are setting up your site, your web site is not currently active, so you need to complete the form in Fig 1.

7. Complete the form. You must fill out boxes marked with a red asterisk.

8. Click the “Create my website now” button. The Manage your Website page appears (Fig. 2), confirming that your web site is now active and ready for you to edit and develop.

Proceed to Step 2 to view your web site home page.

Figure 2: The Manage Your Website Page

STEP 2: View/edit your home page

Now that you have activated your site, you can view your home page and manage your website. You do this using the Manage your Website page (Figure 2, above).

1. Locate the area where it states: “Your NEW website is currently active - Manage your website - or - View your website”.

2. Click “View your website.” Your web site home page appears.

The only information there will be your name, which was entered for you when you set up your site.

3. Note that your new web site address (“URL”) that visitors enter into the web browser to view your home page, is also given on the “Update Web Account” screen (Fig 3).

Figure 3: Your Web address

4. You may want to write down the URL on the second line, although you can get to your new site from the “faculty” list of contact information included in each academic department area on the GHC site.

5. Click the “Manage your Website” link. Your new web site home page appears (Figure 4).

Notice that there are boxes to fill in at the top, and below that 3 rows of text-editing icons and buttons.  The 3 rows are part of the CK Editor, which you will use to build your site and edit the home page. Below the CK Editor you see the text-entry area, which is where you enter and format text on the page.

Figure 4: Manage your new website home page

7. Before you can begin adding or editing information to your home page, you need to give the page a title. The page title is the name the visitor to your site sees as the page name at the top, and in links to this page from other pages.

To name the page, you will enter information in the form shown in Fig. 5.

Figure 5: Manage Your Website

8. All web pages need a title, so you can send visitors there from other pages or sites on the web, so you need to give your home page a title.

9. Locate the “Page Title” box at the top of the “Manage your website” window. Enter “Home” (no quotation marks) as the page title. For now, you do not need to fill in any of the other boxes.

STEP 3: Examine the CK Editor

The GHC Faculty Website Management System lets you edit your web site pages with an editor called “CK Editor.” Before continuing, take a brief look at the CKEditor interface at the following location.

http://docs.cksource.com/CKEditor_3.x/Users_Guide/Interface

When you are editing your site, you will switch between the Edit and the View modes.  Edit mode lets you make changes to a page or add additional pages. View mode shows your page as a visitor to your site sees them. You use the tools at the top right of whatever page you are working on to switch between modes, print, and to add or delete pages on your site.

If you are continuing from Step 2, you are already in Edit mode. If you are viewing your home page, you need to go to Edit mode. Click the pencil button to go to Edit mode (Fig. 6).

Figure 6: The Edit Mode Button

After you log in, 2 buttons appear: the print and edit buttons. The edit button (the pencil) brings you to the Edit mode.

In Edit mode, the six options shown below in Fig. 7 are available at the top right of the screen. We will use several of these tools in some of the other tutorials.

Figure 7: Edit Mode Options

1. Print

2. View mode (Exit edit mode)

3. Delete page

4. Create new page

5. Make page inactive (hide page)

6. Lists all pages you have access to

When you are in Edit mode, the CK Text editor (Fig 8) appears. The CK Editor is similar to that in Microsoft Word. You use the editor to format text, create links, tables, add pictures, and so forth.

You can find a one-page guide to what each tool in CK Editor does at:

http://docs.cksource.com/CKEditor_3.x/Users_Guide/Quick_Reference

Figure 8: The CK Editor Toolbar

To use the CK editor, you first enter text in the main area of your page (under the editor toolbar), select the text you want to modify or format, and use one of the toolbar buttons shown above to edit or format the text you selected.

The CKEditor toolbar buttons are illustrated with meaningful icons. If, however, you are not sure what functions they perform, hover over the buttons to see a “tool tip” with the name of the tool’s function.

STEP 4: Add text to your home page

It is easiest to enter all your text first and then apply formatting. For example, you should enter your contact information, office location, current courses and anything else you want on your home page, and then make the words “Contact Information” stand out by selecting the text and using CK Editor to format the text you selected.

Saving the changes you make is a 2-step process: first, you preview the changes, and then you either save them or make more changes. This 2-step process allows you to experiment with formatting without making changes permanent until you click the “Save Changes” button.

Your home page should contain basic information and, if you like, a picture (the “Tutorial 2: Design your Faculty Website” shows you how). Figure 9 shows an example of a basic GHC faculty home page. If the example seems rather “bare bones,” remember that on the web, less is often more.

1. Under the CK Editor toolbar, in the editing area, locate your name. Your name was entered automatically for you when you activated your site.

2. Place your cursor immediately to the right of your name and click the mouse button. The cursor moves down to the beginning of a new paragraph.  

3. Type “Contact information” and add your office, campus location.

4. Move the cursor to the end of the line of text and press the return key. The cursor moves down a to the next text insertion point.

5. Type “Current course schedule” and enter one of your courses.

6. Press return and enter another course.

7. Repeat this process to add each of your courses.

(Note: You can move the cursor down a single line or move it down so there is more space between lines. To move the cursor down a single line, place the cursor at the end of the line of text, hold down the shift key while you press return. To move the cursor to the beginning of a new paragraph, press return.)

8. Preview the changes you have made by clicking the “Preview Changes” button at the bottom of the page.

9. If you are satisfied, click the “Save Changes” button at the bottom of the page. If you do not want to save the changes, click the “Cancel all changes” button.

(To change the format of the text, you will hold down the mouse button while you drag over and select the text you wish to format, and then click the appropriate button from the CK Editor editing toolbar. We’ll make some editing changes to the text in the next step.)

10. To leave Edit mode so you can see what your home page looks like to a visitor, locate the Edit Mode Options buttons at the top right and click the magnifying glass button to go to View mode. Your updated home page appears in the browser window.

To return to Edit Mode from View mode, click the pencil button when you are viewing your updated home page.

Figure 9: Example of a home page

STEP 5: Edit your home page

To edit the text you entered on your home page, the page must be open, and you should be in Edit Mode.

In the example of a home page, the font has been enlarged to make it stand out. In Tutorial 2, you learn how to edit your home page to achieve a similar effect. In the example, there are also bulleted links to other web sites and a picture. In the next tutorial “Design Your Faculty Home Page” you will learn how to add links and a picture.

Remember, to see what each button on the CK Editor toolbar does, you can move the cursor over a button and the tool-tip appears.

1. To make formatting changes to text you have entered, you first select the text by dragging the cursor over text you wish to edit.

2. To make the name stand out, you will format it as a heading. Select the text and click the format drop-down button on the CK Editor toolbar (it says “Normal”). The formatting options appear. Select “heading 3” from the options.  

Next, you will format each subheading (i.e. “Contact,” “Courses” etc.)

3. Select “Contact” (or whatever you have named the second heading under your name) and use the format button to make it an h3 heading.

4. Repeat this for each subheading and click the Preview button at the bottom of the page to preview your changes.

When you are in preview, you can either save or make additional changes. You can also cancel all changes if you want to go back to where you were before you started editing.

5. Click the save button to save your changes.

A history of who has edited the page is viewable as well. Clicking the date/time will show a snapshot of how the page used to look.

Figure 10: Preview a Page

Importing Text Created in MS Word

In steps 4 and 5, you added basic information to your home page by entering and formatting text in CK Editor. In Tutorial 2, you will learn that you can also import text from a syllabus you have created in MS Word. For now, however, leave your home page as it is.

Although you can copy text directly from a Word document and paste it into the CK Editor, this is generally not the best approach. This is because Word uses a different method of formatting than that used for web pages. A better approach is to strip out all Word formatting first.

Importing Word text (.doc or .docx) is not difficult, but you will need to remove the formatting Word uses, paste it into CK Editor, and reformat it using CK Editor’ tools. It is easy to remove Word formatting because CK Editor has a tool for this. Step-by-step instructions for importing, reformatting and managing your MS Word text are given at the end of Tutorial 2.

Congratulations! 

You have completed Tutorial 1: “Build a Basic Faculty Homepage.”  

To learn how to add features such as links to other web pages and sites, and an image, go to Tutorial 2, “Design a Faculty Home Page.”