Resources for Web Page Design and Page Layout Applications

Page Layout Applications:  Adobe InDesign

(These resources are courtesy of Rich Path, Academic Technology Specialist, Edgewood College)

• http://www.uwec.edu/help/indesignCS3.htm  - InDesign CS3 tutorials developed at UW-Eau Claire; very nice for getting started with the program
• http://www.adobe.com/designcenter/video_workshop  - video tutorials direct from Adobe (for InDesign and a number of other programs)
• The InDesign program itself has a "getting started" option on its Welcome screen when the program is launched.
• See the handout from class for additional training resources that are accessible for Edgewood students.

Getting Started

• Internet Learning Modules: An excellent set of instructional modules to help you get started designing web pages. Appropriate for beginners, but also useful for somewhat more advanced users. Provided by Michigan State University Writing Center.
• Web Design Resources: A good collection of links to instructional materials and resources for learning HTML and for designing and upgrading web pages. Provided by Rensselaer Polytechnic Institute Writing Center.
• A Beginner's Guide to HTML : An excellent guide to HTML. Especially useful as a reference tool for beginning and intermediate web page designers. (NCSA at U. of Illinois/UC)
• HTML Goodies: The Basics: Another useful set of tutorials for HTML.
• FrontPage in the Classroom: Almost unbearably cutesy (it is designed for a much younger audience), but includes a good basic tutorial for getting started on FrontPage, Microsoft's popular HTML-editing suite.

Quick Reference Guides

• The Bare Bones Guide to HTML: A reference list of HTML tags. Very useful as a quick reference tool.

Useful Design Tools

• RGB Color Chart: A quick and easy guide to defining background, text, and link colors for a web page. Includes an RGB Hexadecimal Color Chart, which lists the HTML color codes, with an example of each color. Also check out Dougie's Color Picker, which lets you test color combinations quickly to see what they are going to look like on the screen.
• ColorMaker:  An easy-to-use tool for designing colors and backgrounds for web pages.  (Sam Choukri)
• TableMaker:  An interesting tool for designing tables for web pages.  (Sam Choukri)
• Browser compatibility checking:  Different web browsers will display your web page differently--what you see when you design it isn't necessarily what users will get when they download it to their own computers.  TechTV.com recommended these three sites to check the compatibility of your web page with a variety of older and newer browsers:
  • AnyBrowser.com
  • Web Site Garage (no longer active)
  • Net Mechanic

Backgrounds, Clipart, and Fancy Touches*

• GifsNow.com:  A mediium-sized free clipart site, including a useful array of backgrounds, many animations, etc.
• Cool Archive:  A fairly large free clipart site, including fonts, icons, images, animations, etc.
• Free GIF files: Primarily textured backgrounds for web pages. A limited selection, but easy to use and includes some nice backgrounds.  (Priism Enterprises)

More Resources and Advanced Tools

• HTML Goodies: An extensive site which includes a wide variety of more advanced tools for web pages. Includes a JavaScript Primer.
• Library of Congress Guidelines for HTML 4.01: A good overview, including more advanced features such as cascading style sheets.
• W3C Technical Reports and Publications:  For those who really want technical information -- specifications, working papers, etc. from the World Wide Web Consortium.
• JavaScripts.com: Includes some JavaScript samples, in case you want to play around with them.

Class Project

• Group Web Page Project: Guidelines and requirements for completing the group project (web page design).

Simple Templates and Samples for Class Use

• Sample Page #1: A very simple page, using the following tags: html, header, title, body, paragraph, heading, line break, bulleted list, horizontal rule, and center.
• Sample Page #2: A slightly dressier page, using these additional tags: background- and text-color attributes, simple .jpg image, simple hyperlink, simple table.
• Sample Logos: Sample logos to use for mock letterheads.