Tutorial 2: Design Your Faculty Home Page

In this tutorial you will learn how to:

1. add an image to your homepage

2. add a link
3. use a list
4. import Word files
5. format and add links to Word and PDF files

To complete this tutorial, you should have either set up a GHC Faculty Web site, or completed the tutorial “Build a Faculty Web Site Home Page.”

When you created your new faculty site, the homepage contained just your name. In the first tutorial you added information and made some text-editing changes. The CK Editor has the capability of allowing you to do many more things. But first, consider what you want your faculty site to accomplish.

If you use a learning management system for your courses (like D2L) you may want your GHC faculty site just to consist of a basic home page with contact and schedule information. However, you might want to add an image and links.

If you do not use a learning management system, in addition to the homepage, you may want to add a page for each course you teach. If you decide to add pages, you’ll need to make links from your home page to the new pages and back again. These topics are covered in Tutorial 3, “Expand Your Faculty Web Site.”)

In general, it is a good idea to limit the amount of information you include on a single web page, so consider limiting your home page to basic contact/schedule information, and add more pages for other things. For example, you can add a new page for each course you teach, allowing visitors to get an idea of what each of your courses is like --perhaps by posting generic syllabui for each course.

In general, however, you should avoid creating a multitude of pages on your site. If you want to add a lot of information, you must carefully consider how to make that information accessible to visitors. So, consider building a site with a homepage, a page for each course you teach, a biographical page, and a page with useful links.

Remember that each time you add a new page, you have to give visitors a way to get to it.  You must also add a link on the new page so visitors can go back to the home page. Fortunately, the Website Management System makes this easy. If you build a site with 5 pages, for example, visitors can easily navigate by using the navigation menu you build in the Management System that will appear on the left side of each page on your site.

Before you Begin

Before you begin, you’ll need a small image to add to your home page. If you have a picture, make sure it is in a format that works on the web: GIF, JPEG or PNG. Most cell-phone cameras save pictures as JPEGs, so these are suitable.

If you don’t want to add your own picture, download an image from the web to use for practice. For example, if you go to the GHC home page, you can right-click the GHC shield logo and click “Save image as” (leave it as a PNG) and save it to your computer. Be sure you make a note of where you save it! You will be uploading it to your home page in the tutorial.

If you want to use another image, go to Google images and select one you like. Make sure it is medium or small so it doesn’t overwhelm your home page. In Google “Images” use the “Size” and “Type” options to narrow down choices. Note that the GHC logo shown above is about 200 X 200 pixels. This is about the size you need.  Try to find an image with a white background, because your homepage has a white background. The GHC image has a white background, but you can’t see it because it is on a page that is also white.

You can enter a search term in Google Images: For example, I entered “fall leaves” and selected the small image shown below with a white rectangular background (which you don’t see because the page background is also white).

STEP 1: Open your home page

If you are continuing from Tutorial 1, your web site home page is already open and ready to edit so you can skip step 1. If your home page is not open, continue.

1. Go to the GHC website.

2. Click “GHC Connect” and log in.

3. Click the “Web/SFTP” link on the left navigation menu.

4. The “Update Web Account” window appears.

5. Locate the line that states “Your new website is currently active.” (Fig 1)

Fig 1

6. Click the “Manage your website” link.

7. Your home page appears. Note the green text alerting you to the fact that “This page is currently active.” This means that you are working “live” and any changes you preview and save will be made to the page and can be seen by a user visiting your home page. (Fig 2)

Fig 2

STEP 2: Add an image

A graphic can add a lot to an otherwise plain web page. But on the homepage it is probably a good idea to keep the image relatively small.  The GHC logo is a good size (images can be measured in “pixels” and the GHC image is about 200x200 pixels).

1. On your home page, place the cursor under your name and click the mouse button so the cursor blinks (indicating an insertion point).

2. Click the insert image button on the CK Editor toolbar. (Fig 3)

(Fig 3)

3. The “Image Properties” window appears. (Fig 4)


(Fig 4)

Examine the Image Properties dialog box (Fig 4).

You can use the turquoise “Browse Server” button on the Image Properties window to tell your browser where the image you want to upload is located. For now, you will not use any other setting.

4. Click the turquoise  “Browse Server” button in the Image Properties dialog.

The “Upload a New File” dialog box appears (Fig 5).

(Fig 5)

The “Upload a New File” dialog serves two functions. The grey area at the top is where you browse your PC for files to upload to your site root directory. The white area, where it states “Browse the Server for Images,” lists files that you have already uploaded to your faculty site, and which are ready for you to insert into a page on your web site.

In the white area, under where it says “Browse the Server for Images” there is a list of the files that have already been uploaded from the designer’s computer. Note that the image is shown, along with its dimensions, file name, and options for editing or deleting it.

5. If the image you want to upload is on your computer, locate the “Upload a New File” text entry box and click the “Browse” button.

6. Navigate to the location of the image you want to upload on your computer, select the image you want, and click the “Open” button. In the gray part at the top of the “Upload a new file” dialog, notice that the text entry box now shows the path to the file you selected on your PC.

7. Click the “Upload file” button.

Now that you have uploaded the image to the root directory of your website on the GHC web server, you still need to insert the image into your home page.

8. The image you uploaded now appears in the white part of the dialog, indicating that it is in the root directory where all the files for your site reside.  Click the image to insert it onto the page at the cursor location.

9. The “Image Properties” window appears. Notice that the image width and height are shown. You can make changes to the image in this window, but for now, leave all the settings as they are. (Fig 6)

There are various options in the Image Properties window. You are only going to use the “Alternate Text” text-entry field now. Be careful about changing the image width or height, you can easily distort an image.


(Fig 6)

10. In the “Alternative Text” text-entry box in the Image Properties dialog, you should enter a brief descriptive phrase or title.

11. Click “OK.” The image is inserted at the place on your page where you put the insert cursor. (Fig 7)

(Fig 7)

12. You can click the image to make it “active.” Making an image active is like selecting text; it allows you to move it on the page. When you click an image, “handles” appear around the image. Be careful not to drag one of the handles, because this causes the image shape to change!

13. Click the image and use center-text tool on the CK Editor tool move it to the center of the page.

14. It is easy to undo the last action you did in CK Editor. Locate the curvy left-pointing arrow on the top row of the CK Editor toolbar and click it. The image position reverts to the left hand side of the page. For now, leave the image on the left side. In Tutorial 3 we will consider various design choices for your faculty site home page.

STEP 3: Add a link

If you have followed Tutorial 1 and the steps so far in this one, your home page should resemble the one below. (Fig 8)

(Fig 8)

If you maintain other, external web sites, or if you use a Learning Management System like GeorgiaVIEW for your courses, you may want to put links to those sites on your home page. If you have many links, you can add a page just for them. For now, we’ll insert 3 links on the page you have been working on.

The screenshot below (Fig 9) shows 3 links to external sites on the web. Notice how the title of the site or article serves as the text the user clicks to be taken to the site or page. It is also good practice to add a brief description of what the visitor will see on clicking the link you provide. The final link allows the user to download an ebook in pdf format. It is good practice to warn the user if clicking the link might begin a lengthy download (a 4Mb pdf, for example.

(Fig 9)

1. Place the cursor at the end of the last line of text currently on your home page and click the return key. The cursor moves down to the next insertion point.

2. Type “Galileo Scholar.” (no quotes), the text that will serve as the link to the site a visitor will go to when they click the text you type.

3. On the same line, and right after the text you typed in the previous step, type the following (no quotes):
“Galileo Scholar allows you to serch by subject. You will be taken to the search screen for your chosen subject category. Enter a search, or choose another tab to see content related to that subject: Articles and Databases, Journals, Other Tools, and Books and More.”

4. Carefully select only the “Galileo Scholar” part (that part that will act as the link), and click the link button on the CK Editor toolbar. (Fig 10)

(Fig 10)

5. The link window appears (Fig 11)


(Fig 11)

6. Enter www.galileo.usg.edu/scholar/highlands/subjects/ (no underline) in the Link Type box, making sure that the pulldown menu is set to “URL.” Note that you do not need to enter the “http://” part, because this information is already present in the “Protocol” text box in the Link dialog.

7. Click “OK”.

8. Click the “Preview Changes” button at the bottom of the page.

9. Test the link, and if it works as expected, click Save.

10. On your own, add two more links by first entering text that will serve as a link, adding a description if you want, selecting the text that will serve as a link, clicking the Link tool and entering the new site URL as in the previous steps (no “http;//” remeber!).

Finally, you will make the 3 links stand out by adding “bullets” to each one, making them part of a “bullet list.”

11. Place the cursor to the left of the “Galileo Scholar” link text and click the bulleted list tool in the CK Editor toolbar . A bullet point is inserted. Note that the text is indented.

12. Insert bullets to the left each of the other links.

13. Preview and save the changes. Click the magnifying glass icon at the top left (above CK Editor) to see how visitors to your site will see the home page.

5. Importing and Managing Word files

Many instructors prepare their course syllabi in Word. How do you make this kind of document available to visitors to your site?

How you manage the transfer of Word-generated files to your web page depends on what you want to do with the document when it has been transferred. One method is best if you do not plan on editing the transferred text on your web page; the other is best when you do.

If you do NOT plan on editing the Word .docx after you transfer it to a web page, you can  select and copy text from the document in Word and paste it directly into the CK Editor. This approach works best if you use keyboard commands to copy text (ctrl+c) and paste text (ctrl+v), or (command+c), (command+v) on a Mac.

If you use this method, expect to lose some formatting when the text is pasted into the CK Editor. Do not expect to achieve the same formatting on a web page as you achieved in the original Word document. This is because Word is designed to format text destined for paper, not for display in a web browser.

Paper is a static medium; web pages are dynamic. When viewing a web page, for example, the user can alter the size the text, and text lines wrap depending on the width of the browser window. Remember that the formatting applied to text in a word processing application works with text and graphics destined for printing; the formatting applied to text on a web page works when text and graphics are viewed in a browser.

If you DO plan on editing the text you import from a Word document, you will find it much easier if you remove all the formatting used when the text was a Word doc, which makes it easy to edit. You then use CK Editor to apply web-page formatting as in the previous tutorials. There are several ways to accomplish this: One way is to remove Word formatting in Word itself before copying and pasting it to CK Editor; another is to copy the document in Word, paste it into CK Editor, and remove the formatting with the “Remove formatting” tool in CK Editor. Instructions for both methods are next.

6. How to remove formatting

To remove formatting in Word before you copy and paste text to the CK Editor for a page on your site, open the document in Word and select the “Clear Formatting” button from the Word toolbar.

You can then copy and paste (using keyboard commands) the “unformatted” text into the CK Editor, where you can use the tools to re-format the text. This approach produces “clean” html, uncluttered with Word formatting, which is most likely to appear the same in all web browsers, and is most accessible to screen-reading technologies (like Jaws).

Another approach is to copy text directly from the document in Word, paste it into CK Editor and remove the formatting with CK Editor’s tool. CK Editor makes it easy to not only change the style of your text, but it makes it equally easy to remove styles.

To remove text styling applied to the document text, select the text fragment and press the  toolbar button. All text styling will be removed and the text will be displayed in the default font.

The figure below shows a sample text with some styling — typeface, font size, italics, colors — applied.


After you select the text and use the Remove Format function, all text styling is gone and the text is displayed with default paragraph formatting.


Other Approaches and Management

If you have carefully formatted a document (a syllabus, for example) in a word-processing application and you want to maintain the formatting but also let site visitors see the document, either upload it as-is (i.e. as a “.docx” word file) and let users download the file to view it in the original application (i.e. Word), or save it as a pdf.

If your document includes images, you should also consider using the “Portable Document Format” (pdf). The pdf file format can be viewed directly in the web browser, and turns your document into a graphic, which preserves all your formatting and images. The downside of using pdfs is that editing them is not as easy as editing Word files, and if you need to change the document each semester, keep this in mind.

One workable solution to the management of documents that change on a semester-to-semester basis is to post a “representative” syllabus containing non-changing, basic information on your web site, and place a link to the current-semester version at the top.

 This model assumes that you are updating the current syllabus each semester in Word or other application. The representative syllabus is not semester-specific, so all you need to do each semester is to upload the current syllabus to your site, and redo the link so that it points to the new one. Instructions for doing this are in the next section.

How to set up a link to a downloadable file

To set up a link on a page on your site that users can click to download a file, follow the steps below. You upload Word files to your site the same way you upload an image file (we did this earlier in this tutorial). Although we will be uploading a Word file in this section, you use the same procedure to upload any of the supported file-types. The supported file types are the most commonly used ones found on the web and are as follows:

.pdf .doc .docx .rtf
.xls .xlsx
.ppt .pptx
.jpg .gif .bmp .png

Here are the instructions for setting up a link that users can click to download a file:

1. On the page where you want a visitor to your site to be able to click a link and download a file, type the words that will serve as the link. A good way to do this is to begin with the word “Download” and add the name of the file the user will get if they click the link.

2. Select the word or words that will act as the link.

3. Click the “Link” button on the CK Editor toolbar.

4. Make sure the Link type is set to “URL.”

5. Click the turquoise “Browse Server” button. The “Upload a new file” dialog appears showing the kinds of file you can upload. (Supported file types: .pdf .doc .docx .rtf .xls .xlsx .ppt .pptx .jpg .gif .bmp .wav .mpg).

6. On the gray panel click “Browse,” and navigate to the file on your PC that you want users to be able to download when they click the link you just typed above, and when you have selected it, click “Open.”

7. Click the “Upload” button under on the gray top panel.

8. The file you just uploaded now appears in the bottom part of the dialog, which contains all images, etc. that you have uploaded to your site’s root directory.

9. Click the file name to establish a link to it (from the word you selected in number 2, above.

10. The file name appears in the Link dialog box. Click OK.

11. Preview and save your work.

Test the link to see if it works as expected


You have completed Tutorial 2: Design Your Faculty Home Page. To add pages and navigation to your site, and to consider some design suggestions for your new site, continue with Tutorial 3: Expand Your Faculty Site.