1/19/2025 8:50:25 AM	CS 50.21A Course Outline as of Fall 2015	Inactive Course
CATALOG INFORMATION
Discipline and Nbr:  CS 50.21A	Title:  WEB DESIGN-CSS/GRAPHICS
Full Title:  Webpage Design with Cascading Style Sheets and Graphics
Last Reviewed:11/8/2010

Units		Course Hours per Week			Nbr of Weeks	Course Hours Total
Maximum	1.50	Lecture Scheduled	1.50		17.5 max.	Lecture Scheduled	26.25
Minimum	1.50	Lab Scheduled	0		4 min.	Lab Scheduled	0
		Contact DHR	0			Contact DHR	0
		Contact Total	1.50			Contact Total	26.25
		Non-contact DHR	0			Non-contact DHR Total	0

Total Out of Class Hours:  52.50

Total Student Learning Hours: 78.75

Title 5 Category:  AA Degree Applicable
Grading:  Grade or P/NP
Repeatability:  00 - Two Repeats if Grade was D, F, NC, or NP
Also Listed As: 
Formerly:  CIS 58.53A

Catalog Description:

Create design elements for a mock client Web site using HTML (hypertext markup language), CSS (cascading style sheets), and graphics. Topics include: Web site templates, color palettes, background images, text and font, navigational design, Web graphic formats, compression, image creations and editing.

Prerequisites/Corequisites:
Course Completion of CS 50.11B ( or CIS 58.51B)

Recommended Preparation:
Course Completion of APGR 72 and CS 70.11A; Eligibility for ENGL 100 or ESL 100

Limits on Enrollment:

Schedule of Classes Information
Description:

Create design elements for a mock client Web site using HTML (hypertext markup language), CSS (cascading style sheets), and graphics. Topics include: Web site templates, color palettes, background images, text and font, navigational design, Web graphic formats, compression, image creations and editing.

(Grade or P/NP)
Prerequisites:Course Completion of CS 50.11B ( or CIS 58.51B)
Recommended:Course Completion of APGR 72 and CS 70.11A; Eligibility for ENGL 100 or ESL 100
Limits on Enrollment:
Transfer Credit:
Repeatability:00 - Two Repeats if Grade was D, F, NC, or NP

ARTICULATION, MAJOR, and CERTIFICATION INFORMATION

Associate Degree:		Effective:		Inactive:
Area:
CSU GE:	Transfer Area			Effective:	Inactive:
IGETC:	Transfer Area			Effective:	Inactive:
CSU Transfer:		Effective:		Inactive:
UC Transfer:		Effective:		Inactive:
C-ID:

Certificate/Major Applicable: Certificate Applicable Course

COURSE CONTENT

Outcomes and Objectives:
At the conclusion of this course, the student should be able to:

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

1.  Compile and use the software required to design a Web site.

2.  Design effective Web sites with consistent and pleasing look and feel, easy-to-use navigation, consistent visual and navigational elements, and branding.

3.  Analyze template CSS code and modify it to create a new site.

4.  Compare and contrast the strengths of the  JPEG (Joint Photographic Experts Group), GIF (Graphic Interchange Format), and PNG (Portable Network Graphics) formats.

5.  Choose the appropriate graphic file type for specific applications.

6.  Create a color palette for a Web site using color and  graphics.

7.  Apply techniques to edit poor quality images.

8.  Use filters and special effects.

9.  Produce a functional navigational interface for a Web site.

10. Make use of Web resources for current information on Web design and Web graphics.

Topics and Scope

1. Software  requirements for Web design

      a.  XHTML (eXtended HTML) and CSS editors

      b.  Graphics programs

      c.  Shareware graphics programs

      d.  FTP (File Transfer Protocol) software - "Fugu" or "SSH Client" (Secure SHell)

2. Web design principles

      a.  Critiquing existing Web sites

      b.  Using color and graphics to establish a look and feel.

      c.  Elements of effective navigation

      d.  Establishing site consistency

      e.  Using logos and text to establish effective branding

3. CSS and XHTML

               a. Review of CSS and XHTML

                b. Principles of Web page layout and site architecture using CSS and XHTML

4. Using a template

      a.   Downloading

      b.   Analyzing

      c.   Modifying

      d.   Uploading

5. Graphics formats and compression Portable Network Graphics (PNG) formats

      a.  Joint Photographic Experts Group (JPEG)

      b.  PNG

      c.  Transparency

6. Using CSS to apply color

7. Image editing

      a. Downloading

      b. Resizing

      c. Cropping

      d. Unusual cropping

      e. Using filters

      f.  Applying effects

      g. Selecting background

8. Using CSS to control text

      a.   Effective headings

      b.   Formatting  body text

      c.   Principles of text formatting

      d.   Text sizing - absolute vs relative

9. Using CSS and or graphics to modify navigation

      a.   CSS of horizontal navigation bars

      b.   Creating images for navigation bars

      c.   Using CSS to create linked text effects

10. Compiling Web resources in the areas of

      a.   Web design principles

      b.   CSS

      c.   XHTML

      d.   Graphics

      e.   Color

Assignments:

1. Evaluate three existing templates in terms of color, layout, navigation, text and graphics

2. Upload template files onto the Web server

3. Digitize a photo, save the file at various levels of the PNG and JPEG format

4. Create a transparent GIF and PNG

5. Modify Web page template to create a multi-page site, which contains the following elements:

  a.  Site color scheme

  b.  Site name and page name

  c.  Navigation

  d.  Formatted text

  e.  Graphics for site structure

  f.   Content images

6. Evaluate classmate's work regarding color, line, layout, navigation and graphics

7. Contribute Web resources to class resource page in the areas of design, CSS, XHTML, image creation and image editing.

8. 2-5 Quizzes

9. Reading approximately 20 pages per week

Methods of Evaluation/Basis of Grade.

Writing: Assessment tools that demonstrate writing skill and/or require students to select, organize and explain ideas in writing.		Writing 0 - 0%
None
This is a degree applicable course but assessment tools based on writing are not included because problem solving assessments are more appropriate for this course.
Problem solving: Assessment tools, other than exams, that demonstrate competence in computational or non-computational problem solving skills.		Problem Solving 55 - 70%
Website design assignments
Skill Demonstrations: All skill-based and physical demonstrations used for assessment purposes including skill performance exams.		Skill Demonstrations 0 - 0%
None
Exams: All forms of formal testing, other than skill performance exams.		Exams 20 - 35%
Quizzes: multiple choice, true/false, matching items
Other: Includes any assessment tools that do not logically fit into the above categories.		Other Category 0 - 10%
Attendance and participation

Representative Textbooks and Materials:

Designing Web Graphics-version 4, by Lynda Weinman - New Riders 2007

Print PDF