Web Design Certificate Course
Home About the Course Syllabus Instructor Test Yourself Other courses


syllabus

Sharon Almquist, almquists@nku.edu, instructor

This syllabus is subject to modification and is intended as a general outline only.

Note: I will take your picture with a digital camera during the first class. You will manipulate this picture with Photoshop and Fireworks then include it in your HTML resume.

Class 1: The Internet 101; The Web Design; Introduction to FrontPage and web design issues

  • The Internet 101: brief history and overview of the Internet, the web, browsers, navigation, and hyperlinks. (lecture)
  • Windows file management brief review (hands-on)
  • The Web Design Process: elements of good web design (lecture)
  • The Design Scenario for The Mermaids Rest Inn (lecture)
  • Introduction to FrontPage (lecture)
  • Design a website for the Mermaids Rest Inn (hands-on)
    • Create a new web in a specific folder
    • Enter and format text
    • Insert and edit existing text
    • Layout and navigation
    • Insert images
    • Create tables
    • Hyperlinks
    • Bookmarks/Anchors
    • META tags
  • Supplementary readings
  • Textbook chapters
    • Chapter 3. Just what are web pages, anyway?
    • Chapter 4. Things to know before you begin a web site
  • Textbook chapters for review
    • Chapter 1. What is the World Wide Web?
    • Chapter 2. How to search the Internet
  • FrontPage list price: $149.00. Discounts and educational version available. FrontPage 2002 is the latest release. It works very much like the 2000 version.
  • Free FrontPage Express: If you've installed Internet Explorer 4 or 5, you most likely have FrontPage Express also installed. Start>Programs>Internet Explorer. Click on FrontPage Express. FrontPage Express is an HTML editor, a "lite" version of the full FrontPage. If you do not find it using this method, search your hard drive for the program. Oftentimes, it is hidden in a cabs folder.

Top

Class 2: More about FrontPage and web design; Web Graphics 101
  • Creating the Mermaids Rest Inn website (in-class exercises)
  • Web Graphics 101 (lecture)
    • Typography, readability vs. legibility, text alignment
    • Monitor resolution
    • Bit depth
    • Color; web-safe colors
    • Scanning and digital cameras; clip art
    • Web graphics file formats (GIF, JPEG, PNG).
  • Web Graphics Editors and Editing, part one: Positioning images with HTML using FrontPage's image editing tools
    • Picture editing in FrontPage
    • Transparent GIFS
    • Aligning text to a picture
    • Image maps, creating and editing hotspots
  • Supplementary readings
  • Textbook chapters
    • Chapter 7. Designing the interface and navigation
    • Chapter 6. Basic design principles for non-designers
    • Chapter 12. Typography on the web

Top

Class 3: Web Graphics: Photoshop and a Few Fireworks

  • Web Graphics Editors and Editing, part two: Photoshop
    • Editing your digital photo
    • Making selections: marquee and lasso tools; the magic wand
    • Enhancing selections: feather, the select menu
    • Adjusting image settings
    • Photoshop layers
    • Photoshop type
    • Photoshop filters
    • Optimizing for the web
  • Web Graphics Editors and Editing, part three: Fireworks
    • Introduction to Fireworks (lecture)
    • Fireworks overview
    • Fireworks tools
    • Creating, editing, and selecting vector objects/shapes
    • Trim and Fit Canvas
    • Changing document size and color
    • Using the styles library
    • Text editing
    • Layers and Frames. Hotspots and Slices
    • Create a ready-made button rollover
    • Create the 2-State Button Rollovers for The Mermaids Rest Inn (Simple rollover)
  • In class exercises
  • Supplementary readings
  • Textbook chapters
    • Chapter 9. Color on the World Wide Web
    • Chapter 10. Graphics definitions you must know
    • Chapter 11. How to prepare image files for the web
  • Homework. Point your browser to www.angelfire.lycos.com and sign up for a free web account. Bring your account information (user name and password) that you receive via email to the last class (class 5).
  • Midterm released on Blackboard. 20% of final grade.

Top

Class 4: Concluding Fireworks and Just Enough HTML/XHTML

  • Midterm Q & A
  • Concluding Fireworks exercises
  • Good and Not so Good Design (Lecture)
  • Hands-on with HTML/XHTML
    • Creating an HTML/XHTML document: your resume with your picture
    • Creating tables
    • Formatting text
    • Adding graphics
    • Creating lists
    • Named anchors and links
      • Free HTML editors (EditPad Classic, Arachnophilia, 1st Page 2000, Netscape Composer)
  • Word HTML
    • Converting a document from Word to HTML
  • Cleaning up Word HTML in Dreamweaver
  • Supplementary readings
    • HTML
  • Textbook chapters
    • Chapter 5. Print vs. web and how it affects design
    • Chapter 8. How to recognize good and bad design

Top

Class 5: Web design issues with Dreamweaver; Current trends in web design; Uploading and checking your resume

  • Introduction to Dreamweaver (lecture)
  • Hands-on exercises in Dreamweaver
    • Define a Site in Dreamweaver
    • Checking your HTML code (resume) in Dreamweaver
    • FTP the resume to your Angelfire account using Dreamweaver's FTP interface
      • Check your resume with Dr. HTML
    • Define a site in Dreamweaver for The Mermaids Rest Inn
      • Create a form
      • Import Fireworks rollover navigation into Dreamweaver
      • Create a JavaScript Previous Page button
      • Create a new browser window
  • Cascading Style Sheets (lecture)
    • CSS exercises in Dreamweaver
  • Frames
    • Frames exercise in Dreamweaver
  • Making your site accessible with Bobby (hands-on)
    • Check your resume in Bobby and the Lynx Viewer
  • Supplementary readings
    • Grossnickle, Joshua and Oliver Raskin. Webmonkey Supercharged Beta Test. Guidelines for testing your site. "While the beta test is deeply integrated into most launch schedules, few developers, managers or marketers currently leverage the full potential of this stage of development. Beyond its traditional role as an exercise in bug squashing and usability testing, the beta test can yield a huge amount of useful customer information, if you take the time to ask for it."--website.
    • Calore, Michael. Webmonkey Dreamweaver 4 Overview.
    • Webmonkey Reference. Domain registry. Webmonkey has compiled a list of sites where you can find out if a domain name is taken and then, if it isn't, go ahead and claim it as your own.
    • Nielsen, Jakob. Drop-down menus: use sparingly.
    • Usability and Access
      • Jakob Nielsen maintains a website devoted to usable information technology. Includes permanent articles and changing news about all aspects of web accessibility and usability. The New York Times has dubbed Dr. Nielsen "the guru of web page usability."
      • Access according to ADA and WWW3 standards. Check out Bobby. "Bobby is a compliance web accessibility software tool designed to help expose and repair barriers to acessibility and encourage complaince with existing accessibility guidelines."-Bobby website.
      • Web Accessibility Initiative. "The World Wide Web Consortium's (W3C) commitment to lead the Web to its full potential includes promoting a high degree of usability for people with disabilities. WAI, in coordination with organizations around the world, pursues accessibility of the Web through five primary areas of work: technology, guidelines, tools, education and outreach, and research and development."-Web Accessibility Initiative website.
    • HTML validators and Text browser
      • Dr. HTML. Type in your web page address and let Dr. HTML check it out for you. The doctor gives you a report verifying hyperlinks, meta tags, spelling, document structure, image syntax, table analysis, browser and font support.
      • Lynx is the most widely used text-mode browser on the Internet. See how your pages measure up without any graphics! Are your alt tags in place?! Is the navigation usable?! We'll check it out using the Lynx Viewer.
    • WYSIWYG Editors
    • Textbook chapters
      • Chapter 13. Advanced tips and tricks
      • Chapter 14. Test and fix your web site
      • Chapter 15. How to upload and update your site
      • Chapter 16. How and why to register your site

Class 6. Final Exam

Demonstrate your skills in a final exam consisting of:

  • a timed segment of multiple choice and fill in the blank questions taken online in Blackboard, NKU's online course component
  • creating a small website from client specifications using your choice of tools.

The exam is open book, open notes. You have two chances to pass the exam. It is worth 80% of your final grade: 40% multiple choice, fill-in-the-blank, short answer, 2.5 hours maximum timed; 20% revision project; 20% create a website from client specifications.

Top

NKU Community Education Home • Northern Kentucky University Home

This page was last modified on January 16, 2003

You are visitor # 2810 since September 25, 2002.