Transcript the Creating/Maintaining an Instructor Web Site

Planning and Designing an
Instructor Web Page
A. Craig Dixon & Tang Suppacheewa
October 26, 2007
Creating Steps
1.
2.
3.
4.
5.
Planning
Gathering Materials
Developing the Content & Designing
Creating the Site
Assessing and Evaluating
Planning Your Page
• When planning your page, you need to:
– Identify your goals, objective, and audience
– Use Storyboard
Gathering Materials
• Images, Documents, Presentations, Links, Etc.
– Electronic Copy
– Hard Copy
• Search Engines
– Copyright Law
– Educational Sources: SMART board, Microsoft, etc.
Developing the Content & Designing
• At minimum, your web page should contain:
– Your name, office number and hours, email address,
and office phone number
– The academic year and semester
– A list of the courses you teach (links to syllabi are
even better)
– Date of last revision
Creating the Site
• Choosing your applications
– Affordable / Accessible
– Easy and friendly to use
– Meet your needs / Serve your purposes
Page Layout
• There is a tendency in document design to center everything.
Resist this urge.
– Left-justified text is easier to read and looks more professional.
• Images should be medium to small size (no more than 400 pixels
on the longest side.)
– Images are complementary elements and should not be the focus of the
page.
• Common headers, footers, sidebars, and other page elements
make your site more coherent.
– Students learn to locate the common elements (like navigation links) on
your page, and are consequently able to find what they are looking for
more quickly.
Navigation
• Your site should have logical divisions (home, classes, schedule,
bio, etc.)
– Make sure a link to each logical section exists on each page.
• Make sure your navigation links appear at the same place on each
page.
– Common locations are in a header or in a sidebar on the left or (less
commonly) right side of the page.
• Make sure your unvisited links are a different color than your
visited links.
– This will help students determine whether or not they have already
viewed a page.
Formatting: Fonts
• Use common fonts; others may not render correctly in
the student’s browser.
• Use sans serif fonts. Studies show these fonts are easier
to read from electronic media.
• Examples of good web page fonts: Arial, Verdana,
Tahoma, and Trebuchet MS.
• Use bold and italics sparingly. Try to avoid underline
altogether.
Formatting: Colors
• Choose foreground and background colors with high
contrast.
– Black on white and white on black may be boring, but they
are the easiest to read.
– Remember that colors you think contrast well (e.g. red and
green) may not contrast well to a colorblind student.
• If you use background images, make sure they are
extremely faint and provide good contrast to your
chosen foreground color.
• Use a consistent color scheme throughout your site.
Formatting: Images
• Avoid blinking, flashing, or moving images.
– They are annoying to most users and can trigger seizures in some.
• Don’t include text in an image.
– If the image is resized, the text will distort.
– If the user resizes the text in his or her browser, text in graphics won’t
resize.
– Text in graphics doesn’t get indexed by search engines.
• Always provide “alt text” to describe your images.
– “Alt text” helps text only browsers and screen readers to make sense of
your images.
• Don’t overuse images. They can take a long time to download.
Tools and Formats
• There are three main tools of choice for instructors
designing personal web pages.
– Microsoft FrontPage
– Microsoft Word (Save as HTML)
– Adobe (Macromedia) Dreamweaver
• Additionally, there are a few choices for formats of
materials that won’t be converted to web pages.
– Microsoft Word (DOC)
– Adobe Portable Document Format (PDF)
– Rich Text Format (RTF)
Choosing a Tool
• The college does not mandate use of one web
authoring tool over another. However, we strongly
recommend Dreamweaver for the following reasons:
– FrontPage and Word HTML is hard to debug and maintain.
– FrontPage and Word HTML usually renders unpredictably
on alternative browsers like Firefox, Opera, and Safari.
– FrontPage and Word create web pages that are unnecessarily
large and take longer to download.
– Dreamweaver is installed in the TEC, and the TEC provides
professional development opportunities in Dreamweaver.
Choosing a Format
• It may be time consuming to convert syllabi and other class documents to
HTML format. Students can download them directly, but may or may not be
able to view them, depending on format.
– DOC – Only users with Microsoft Word can view the document. A bad choice,
since Word is expensive.
– PDF – Users can download a free viewer to see the files. The viewer is preinstalled on many computers.
• If the viewer isn’t installed, the download is prohibitively large for dial-up users.
• PDF also requires you, the site creator to have a (not free) PDF creation tool.
– RTF – All Windows users have Microsoft WordPad, which will open RTF files.
Word and WordPad supports RTF natively, meaning you can create them without
special tools.
• Though it is probably the least well-known of the three, the recommended
format is Rich Text Format (RTF).
Assessing and Evaluating
• After you’ve created your page, you may want to
ask students for their feedback.
• You may think you’ve done an excellent job, but
if the student doesn’t think so, it doesn’t matter.
• Students often have really great ideas about what
additions or changes would be helpful.