MA C101 Fundamentals of Web Design

CATALOG COURSE DESCRIPTION

This course introduces students to principles of web design. Students will acquire skills for creating attractive web pages that are easy to read and navigate and will learn to use a leading web development software application. No prior knowledge of HTML coding is required.

COURSE OBJECTIVES

Upon successful completion of the course, the student will be able to

1. Identify the unique characteristics of web content in contrast to print content.
2. Analyze page content to determine the number of columns and rows that are needed in a HTML layout table.
3. Create fixed-width and relative-width web pages with HTML tables or frames, using a leading web development software application.
4. Assemble page contents by inserting text, hyperlinks, images, media, layers, and animation.
5. Implement Gestalt principles and Bertin’s retinal variables for visually showing relationships or differentiation between page elements.
6. Explain the relationship between content organization and navigation.
7. Describe the difference between relative and absolute paths, and troubleshoot broken paths.
8. Create interactivity through the software’s built-in Javascript and Dynamic HTML scripts.
9. Manage site appearance through the use of cascading style sheets, libraries, and templates.
10. Identify and resolve basic usability and accessibility problems in a web page/site.
11. Create visually organized and functional HTML forms.
12. Edit HTML code in the software’s “code view.”
13. Articulate an aesthetic style and implement it consistently throughout a site.
14. Publish a site to the internet via File Transfer Protocol.

DETAILED TOPICAL OUTLINE

1. Introduction (A)
   1. Contrast of print and screen design
   2. Functions of a web site
      
2. Basic Page Design (B, C, D, J, L)
   1. Page Elements
   2. Layout and Design
   3. Essential elements “above the fold”
   4. Legibility and Readability
   5. Typography or the web
   6. Edit basic page elements in source code
      
3. Unity and Contrast (E, J)
   1. Gestalt theory
   2. Jacques Bertin’s retinal variables
   3. Techniques
      
4. Grid-Based Design (B, C)
   1. Layout grid
   2. HTML tables
   3. Fixed/relative widths
      
5. Site Structure and Navigation (F, G, H, J)
   1. Site organization
   2. Structural models
   3. Types of hyperlinks
   4. The roles of a graphic user interface
   5. Feedback
      
6. Fundamentals of Accessibility (J)
   1. Disabilities affected by the internet
   2. Governing authorities
   3. Levels of compliance
   4. Web Accessibility Guidelines Level 1 and Section 508 compliance
      
7. Controlling Page Appearance (I)
   1. Libraries
   2. Templates
   3. Cascading Style Sheets
      
8. Color Theory and Style (M)
   1. Fundamentals of color theory
   2. Chroma schemes
   3. Aesthetic styles on the web
      
9. Frames (C, L)
   1. Components and configuration
   2. Benefits and disadvantages
   3. Edit frames in source code
      
10. HTML Forms (K, L)
    1. Form components
    2. Form layout
    3. Form accessibility
    4. Edit forms in source code
       
11. Publishing (N)
    1. File Transfer Protocol
    2. The software’s site window
    3. Required settings
    4. Uploading files

METHODS OF PRESENTATION

Course instructional methods may include but are not limited to:

1. Lectures
   Example: A lecture explains the benefits and disadvantages of relative or fixed width web pages and describes how to implement both techniques with HTML tables.
2. Discussion
   Example: Instructor responds to student questions about converting a table-formatted Web page to one whose appearance is controlled by CSS.
3. Critique and Feedback
   Example: Feedback is provided when individual assignments are graded and submitted back to the student.

ASSIGNMENTS AND METHODS OF EVALUATION

Assessment of student performance may include but are not limited to:

1. Weekly Tutorials (C, D, F, G, H, I, J, K, L, N)
   Example: Students complete tutorials in textbook, dealing with specific software functions.
2. Weekly Exercises (A - N)
   Example: Students complete exercises integrating software functions with the principles in the current week’s readings and lecture.
3. Weekly Discussions (A - N)
   Example: Students select a web site and critique it for effective use of Gestalt principles in the organization of page elements.
4. Projects: (A - N)
   Examples: Students create a portfolio web site, to which they will later be able to add projects and artwork throughout the Web Design program. (A - H)
5. Final Exam (A-N)
   Example: Multiple choice exam covering all topics throughout the semester.

REQUIRED TEXTS

Macromedia Dreamweaver MX 2004: Training from the Source. Page, Khristine Annwn. Berkley, California: Macromedia Press, 2004

3.19.2004

  Courses Index