Date post: | 10-Jan-2016 |
Category: |
Documents |
Upload: | justin-blake |
View: | 215 times |
Download: | 1 times |
Planning and Designing an Instructor Web Page
A. Craig Dixon & Tang Suppacheewa
October 26, 2007
Creating Steps
1. Planning2. Gathering Materials3. Developing the Content &
Designing4. Creating the Site5. 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 pre-installed 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.