This tutorial has two parts: In part 1, “Site Navigation.” you work out the navigation for your site, adding pages and links. In part 2, “Designing a Usable Web site,” you consider hw to make your site easy to get around, and you learn how to upload files.
PART 1: Site Navigation
If you plan to have more than a home page on your site, you’ll need to figure out a way for visitors to navigate between the pages. Consider how the navigation functions on the faculty site shown below.
The site-navigation panel shows the visitor their current location and provides links to each of the pages on the site. Above the image there is a “breadcrumbs” trail which shows the name of the current page and the path the visitor took to get there.
When you click the “About me” link on the navigation panel of the home page of the Daws site (Fig 1), the “About Me” page appears, sharing the identical navigation. The difference is that the “About Me” link is now highlighted, and the breadcrumbs trail changes to reflect where the visitor is now on the site (Fig 2).
If you plan on expanding your site so that it has a separate page for each course you teach, and an identical navigation panel on each page, you will need to sketch on paper how you plan to structure your site, and you will need to establish page names. In planning how the site navigation will work, keep in mind that every page should have a navigation panel on the left with links to every other page ---including a link to the page itself.
If you are already on your home page and in edit mode, proceed to step 2, otherwise you will need to log on so you can manage or edit a page on your website:
1. Go online and launch a web browser. Go to the GHC home page and click “GHC Connect.” Log in using your GHC network credentials.
2. When the GHC Connect web page opens, click the “Web/SFTP link on the left-side navigation menu. The “Update web account” page appears.
3. Locate the line where it states: “Your new NEW website is currently active” and click the “Manage your web site” link. Your home page appears, with the CK Editor ready for you to expand your site.
It is generally best not to put a large amount of information on a single page because people don’t like to do a lot of scrolling. If a page requires the visitor to scroll down more than 3 screens, you should consider adding a page. If you are thinking about developing a site with more than 3 pages you can use “stickies” to plan your site on paper.
When you use the Web Site Management System to create a new page and add a link to another page, the navigation panel is created. You can see in the image below (Fig 3) that the panel is divided into boxes, each one containing a link. Keep page names short because if the name is too long it will wrap, taking up two lines in a box, and you don’t want this to happen. The top box name is about as long as you can make a link name to avoid wrapping (about 30 characters).
When you add a link, the navigation menu expands downwards, adding a box to accommodate the new name. You can change the order of the links, but remember to make the same change on the navigation panels on each page.
As the site designer, think about what visitors to your site are there for and plan accordingly. Your home page is the page users will see first, so it should contain key contact information and links to other key pages on your site. A visitor who wants quick information about a course would probably want to look at the syllabus and get an idea of the assignments. In this case, the visitor should be able to get to the course syllabus from the home page with one click. You don’t need to put your entire syllabus on the course page. List the key parts so the visitor can get a general idea of goals, requirements, assignments, etc. You can easily provide a link for the user (or your students) to download the complete paper version.
There are various ways to set up your site structure if you teach several courses. If your site serves mainly as a source of basic information, with a home page and a page for each course listing just the key points (course description, textbooks, objectives, assignments, etc), the navigation is simple.
If the site is where you post most of your course material, you’ll probably want to create a number of pages for each course. If you do this, you need think about the page names and how the names will appear in the navigation menu. By using typographic devices, such as CAPS to denote each course and small case for pages that belong under each course, you can make the site structure clear and easy to navigate.
One final point before you continue. When you add a new page, as you will do in the next step, you give the page a title: “English Composition 1”, for example. The page title is used in the page address (the URL) that you can give visitors if you want them to get directly to that page rather than to the home page. However, because long names wrap in the navigation panel, you may want to use a different name for the page link (“ENGL 1101” for example).
In this step, you will add a new page and give it a title. Look the icons that appear at the top of the page when you are Edit mode (Fig 4). You have already used the first two: the “Printer Friendly” icon and the “View this page -exit edit mode” icon. In this tutorial you use the others, shown below in red.
1. “Delete this page.”
2. “Add a new page.”
3. “Set page inactive.”
4. “View all pages.”
1. You should be on your home page and in Edit mode. Click the “Add New Page icon.”
2. The “Confirm” window appears. Click OK. The new page appears (Fig 5).
3. Fill in the “Page Title” text entry box in the top text-entry field with the name of the new page. The name you enter will be the link that appears in the grey site navigation panel on the left.
4. If you want to use a different name for the link in the navigation panel, fill in the “Page Link Name” text-entry field. The title of the page and the link users click to get there can be different.
5. Next, type the page title on the new page itself in the white text-entry and formatting area.
6. In the text entry area of the CK editor, drag the cursor over the page title you just typed (you can also select a word by double-clicking it) and from the “Normal” drop down menu on the CK Editor toolbar select “Heading 2.” You will use the “heading 2” formatting for all page titles on your site.
7. Make sure the cursor is at the end of the title you just typed and click return. Clicking the return key moves the cursor entry point down two lines.
8. Scroll to the bottom of the page, and click the “Add New Page” button. The new page appears. Note the green text “This page is currently active.” Note too that the “Page parent” is now listed as the home page.
9. If you want to restrict who can see the page, use the “Protect Page?” pulldown menu. This is useful if you are working on the page and you don’t want visitors to see it.
You now have a site with 2 pages. When a visitor goes your site, they automatically land on the home page. In step 3, you add a navigation panel to the page you just created in step 2, including a link back to the home page.
1. With the new page you added in step 2 open, locate the gray navigation panel on the left and click “+ Add a Link.” The drop down menu appears, showing all the pages you have created so far. Take a moment to examine the names in the list. You are looking for your home page in the list, which will appear as “faculty-[your name]. You may need to click a few times before the drop down menu appears, so be patient!
2. Select the “faculty-[your-name]” page name from the pull down menu. This is your home page. You are selecting the home page as the page users get to when they click the “Home” link on the grey navigation panel.
3. Click the “Add Link” button. The link to the home page “Home” appears at the top of the gray navigation panel. Note that you can’t change the name of the home page. (Fig 6)
To delete the link, click the red x. You can use the pull down menu and the “Refresh Order” command to change the order of the links if you have more than one.
4. Scroll down to the bottom of the page and click the “Preview changes” button. Your new page appears.
5. Click “Save.”
6. Test the link you just created to make sure it works as expected.Click the magnifying glass (the 2nd icon on the top right) to view the new page as the visitor sees it.
7. Using the grey navigation panel, click the “Home” link you just added. It should take you to your home page. Note the breadcrumbs trail, which indicates where you are. It updates automatically to reflect the current page location and the path back to the home page (Fig 7).
In step 3, you made a link from the new page to the home page; in step 4 you’ll make a link from the home page to the new page you just added.
1. Go to your home page and make sure you are in Edit mode. If you are still on the new page, you can use the (green) “Home” link you just made in step 3.
2. On your home page, on the gray navigation panel on the left of the page click “+Add a link”.
3. Use the pull down menu that appears when you have clicked the add a link to select the new page name.
4. Click the "Add Link” button.
5. Click the “Preview Changes” button at the bottom of the page. Use the magnifying glass on the menu at the top right to view the home page. Test the link to make sure it works as expected.
6. Click the “Save Changes” button.
To delete a link from the navigation panel, make sure you are in Edit mode, go to the page with the link you want to delete. Next to the link, click the red X to delete it. Note that in edit mode the links appear in green; in “View mode,” the links appear as users see them.
PART 2: Designing a usable web site
Visual consistency in the colors and fonts you use on your site is more than just eye-candy. Visual consistency helps visitors quickly learn how to use your site. In general, use the same formatting for each page on your site, and make a note of the formatting style so you can refer to it when you add pages.
Fortunately, the Web Site Management System handles most of this this task for you, so that the same font, (Ariel, which is particularly good for screen-reading) is used on all pages, and the links are the same color. To do this, the Management System uses Cascading Style Sheets (CSS) that apply to all pages on the GHC site (including ones you add).
You can override some information controlled by the site-wide style sheets. For example, the standard font (Ariel) and size are defined as “Normal” across the entire GHC site. And that is what will be the “default” when you build your site. When you apply the “heading 2” setting to the title on each page you are overriding the “Normal” setting applied by the site-wide CSS and replacing it with the heading style for the words you select.
Remember that visitors can enlarge the font size in the web browser, so staying with the “normal” font and size allows users flexibilty.
Tips: Color, fonts and legibility
“Look and Feel:” Design within the GHC web site
The “look and feel” you want for your site pages are constrained by the fact that you are designing a page that is part of a larger web site, and you must consider how your page will look within the framework of the GHC banner and navigation scheme and colors. These colors, blue and orange, dominate each page, and your page must live surrounded by them.
Certain colors “work” with other colors, and it is not by chance that, in addition to the blue and orange, the navigation panel is grey, the text and links are black, and the page background color is white. Experience suggests that you will achieve the effect you want by judicious tweaking, trying out various colors for your subheadings, for example.
When you have set up your basic site and added text to the pages, you may want to think about giving your site a unique “look and feel.” Because your site is a professional “front door,” it should probably be fairly restrained. However, you can do a lot with a few well-chosen graphics that are both professional-looking and stylish. For example, consider using a graphic image rather than plain text for your name on the home page:
It is fairly easy to create a custom graphic of your name, as in the image above. The drop-shadow is a commonly-used graphic device to make the word stand out.
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 (Fig 8).
You can then copy and paste (using keyboard commands) the “unformated” text into the CKEditor, 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, and remove the formatting in CK Editor. CKEditor makes it easy to not only change the style of your text, but it also makes it equally easy to remove these styles.
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.
For additional information on managing various file formats on the web, see the guidelines on the Instructional resource Web site: http://www.highlands.edu/site/gaview-tips-
Congratulations! You have completed Tutorial 3!