Advanced Web Design

COURSE OUTLINE

1. Course Title: Advanced Web Design

2. CBEDS Title: Other visual communications/graphics course
3. CBEDS Number: 5798
4. Job Titles:
Web Design Technicians
Desktop Publishers
Web Designers

5. Course Description: This program is designed for students interested in developing

advanced Web page design skills. Student will work both independently and as a class
through units of instruction in order to develop a variety of Web design skills. Students
will be expected to produce work and conduct themselves in a businesslike manner, work
with a minimum of supervision, and complete units of work as selected and assigned.
Students will be expected to use word-processing, spreadsheet, database, desktop
publishing, and graphic software skills in order to successfully work in Web design
applications. Throughout this course, students will use “Web 2.0” technologies for adding
interactivity to their projects in the form of content management systems, blogs, and
podcasts, and to participate in the course, to turn in assignments, and to collaborate with
other students.This course is not intended for the beginning computer user.
Student Outcomes and Objectives:
Working in a networked environment under Windows the students will be
introduced to the following as they relate to Web Page Design: Layout; Color
Theory; Typography; Information Architecture; HTML; HTML Editor Software;
Image Editing Software; Digital Cameras and Scanners; Career Search Skills
In addition to the above, students will be able to:
1. Demonstrate advanced skills in Web Page Layout & Software incorporating the
following:
Color Theory; Typography; Information Architecture; HTML; Dreamweaver;
Fireworks; Flash
2. Effectively use Digital Cameras and Scanners
3. Operate and take advantage of the R-3 Network
4. Demonstrate advanced Information Design for the World Wide Web
5. Utilize Vector and Raster Graphics in Web Page design
6. Effectively use HTML Editing Software
7. Complete Complex Page Design with HTML Editing Software
8. Add Interactive Elements in HTML Editing Software
9. Apply Cascading Stylesheets in HTML Editing Software
10. Demonstrate appropriate use of DHTML and Timelines in HTML Editing
Software
11. Perform effective Site Management in HTML Editing Software
12. Apply Design Concepts such as Color and Typography for the World Wide Web
13. Add Graphical Pizzazz with Image Editing Software
Italicized refers to negotiated curriculum versus guaranteed curriculum.
G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 14. Effectively Export and Optimize Images in Image Editing Software
15. Create Animations in Image Editing Software
16. Build Interactivity into Fireworks PNGs
17. Demonstrate Advanced Graphical Interface Design in Image Editing Software
18. Work with Masks
19. Create Vector Animations Using Macromedia Flash

Pathway
Recommended Courses
Sequence
Introductory Introduction to Computers
Skill Building Beginning Web Page Design
Advanced Skill Advanced Web Page Design

6. Hours: Students receive up to 180 hours of classroom instruction

7. Prerequisites: Introduction to Computers

8. Date (of creation/revision): July 2010

Italicized refers to negotiated curriculum versus guaranteed curriculum.

G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
9. Course Outline
COURSE OUTLINE
Upon successful completion of this course, students will be able to demonstrate the following skills necessary for entry-
level employment.
Model Curr. CA
Instructional Units and Competencies Course Standards Academic
Hours Content CAHSEE
Standard
s
I. CAREER PREPARATION Information Language Lang.
A. Career Planning and Management. 20 Technology Arts Arts
1. Know the personal qualifications, interests, aptitudes, Industry (8) R 8.2.1
Additional R 1.3, 2.6
knowledge, and skills necessary to succeed in careers. hours are
Sector
W1.3, 2.5. (9/10)
a. Students will identify skills needed for job success integrated LC 1.4,1.5, R 2.1,
b. Students will identify the education and experience throughout Foundation 1.6 2.3
required for moving along a career ladder. the Standards: LS1.2, 1.3, W2.5
course.
2. Understand the scope of career opportunities and know the (9/10)
requirements for education, training, and licensure. Reading R2.1,2.3,2 Math
a. Students will describe how to find a job. 2.0 (2.6) W2.5 (7)
b. Students will select two jobs in the field and map out a Writing LC1.4 NS 1.2,
timeline for completing education and/or licensing 2.2 (2.5, LS 1.1, 2.3 1.3, 1.7
(11/12) MR 1.1,
requirements. 2.6)
R2.3 2.1, 3.1
3. Know the main strategies for self-promotion in the hiring W2.5
process, such as completing job applications, resume Career LC1.2
writing, interviewing skills, and preparing a portfolio. Planning & Math
a. Students will write and use word processing software Mgmt. (7) NS1.2,
to create a resume, cover letters, thank you letters, and 3.1, 3.2, 1.7
job applications. 3.3, 3.4, MR 1.1,1.3
b. Students will participate in mock job interviews. 3.5,3.6, 3.7 2.7,2.8, 3.1
4. Develop a career plan that is designed to reflect career
interests, pathways, and postsecondary options. Technology
a. Students will conduct a self—assessment and explain
how professional qualifications affect career choices. 4.1, 4.2 4.3,
5. Understand the role and function of professional 4.4, 4.5, 4.6
organizations, industry associations, and organized labor
in a productive society.
a. Contact two professional organization and identify the
steps to become a member.
6. Understand the past, present and future trends that affect
careers, such as technological developments and societal
trends, and the resulting need for lifelong learning.
a. Students will describe careers in the business industry
sector.
b. Students will identify work-related cultural
differences to prepare for a global workplace.
B. Technology.
1. Understand past, present and future technological advances
as they relate to a chosen pathway and on selected
segments of the economy.
2. Understand the use of technological resources to gain
access to, manipulate, and produce information, products
and services.
3. Use appropriate technology in the chosen career pathway.
C. Problem solving and Critical Thinking.
1. Understand the systematic problem-solving models that
incorporate input, process, outcome and feedback
components, and apply appropriate problem-solving
strategies and critical thinking to work-related issues and
Italicized refers to negotiated curriculum versus guaranteed curriculum.
G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 tasks.
2. Use and apply critical thinking and decision making skills
to make informed decisions, solve problems, and achieve
balance in the multiple roles of personal, home, work and
community life.
D. Health and Safety.
1. Know policies, procedures, and regulations regarding
health and safety in the workplace, including employers’
and employees’ responsibilities.
2. Understand critical elements of health and safety practices
related to a variety of business environments.
E. Responsibility & Flexibility.
1. Understand the qualities and behaviors that constitute a
positive and professional work demeanor.
2. Understand the importance of accountability and
responsibility in fulfilling personal, community, and work-
place roles and how individual actions can affect the larger
community.
3. Understand the need to adapt to varied roles and
responsibilities.
F. Ethics and Legal Responsibilities
1. Know the major local, district, state, and federal regulatory
agencies and entities that affect the industry and how they
enforce laws and regulations.
2. Understand the concept and application of ethical and legal
behavior consistent with workplace standards.
a. Contact a business and obtain a copy of their rules for
employment.
b. Role play difference ethical scenarios.
3. Understand the role of personal integrity and ethical
behavior in the workplace.
G. Leadership and Teamwork.
1. Understand the characteristics and benefits of teamwork,
leadership, citizenship in the school, community, and
workplace settings for effective performance and
attainment of goals.
2. Understand the ways in which professional associations,
such as Int’l Webmasters Assn. (IWA) and competitive
activities enhance academic skills, career choices, and
contribute to promote employability.
4. Know multiple approaches to personal conflict resolution
and understand how to interact with others in ways that
demonstrate respect for individual and cultural differences
and for the attitudes and feelings of others.

Italicized refers to negotiated curriculum versus guaranteed curriculum.

G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 Hours Model Curr. CA CAHSEE
Instructional Units and Competencies Standards. Academic
Standards
A Basic Introduction to Windows/MAC in a Networked 5 Information
Technology
Environment Industry
1. Procedures employed in Computer Lab Sector
Media
2. Use of the Computer lab Support &
a. Login Services
Pathway
b. Accessing (and SAVING to) the student 4.1
directories
c. Accessing files from the Data drive
d. Printer Selection and Options
3. Solicitation of Guidelines; what people want to
make
Assignment of Passwords
5 Information
B. Introduction to the World Wide Web Technology
Industry
1. History and Precursors Sector
2. TCP/IP, Hypertext, Interactivity, Nonlinear 4.4
Programming Information
3. GUI Services
Pathway
4. Evolution of Web Page Design/Production Values: A7.5
Various generations’ site design Media
Support &
5. Web Site Development Process Services
6. Web Design Jobs and Roles Pathway
B2.2
C. Basic Image Manipulation with Image Editing 10 Media ELA
Support &
Software Services
11-12;
Pathway W; 1.9
1. Acquiring Images: Digital Camera B1.1, 1.2
2. Acquiring Images: Scanner
3. Acquiring Images: Web
4. Cropping, Color Adjustment, Resolution, etc.
5. Copy Write Issues
D. Introduction to Hypertext Markup Language [HTML] 5
1. What is HTML?
2. Browser differences; World Wide Web Consortium,
Industry Standardization
3. Reading URLs
4. Structural Tags: html, head, body
a. Students will create a simple page in notepad
using the tags above, and save with the .html
file extension
5. HTML Semantics: tag, attribute, value
a. Students will view source and locate tags,
attributes, and values
b. Students will control color with hexadecimal
codes and keywords using attributes and
values
6. The Anchor Tag: making links
Italicized refers to negotiated curriculum versus guaranteed curriculum.
G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 a. Students will use relative and absolute links
b. Students will create a “table of contents”
using anchor with the name attribute, to link
to different places on the same page
c. Students will use the anchor to create email
links
7. HTML Lists: ordered, unordered, and definition
a. Students will answer questions about
themselves in the appropriate list format;
save as index.html in their web folder; and
use course website to view each others’ work
8. The Img Tag: optimizing images for the web
a. Students will use the image tag and its
attributes, width, height, alt, border
b. Students will optimize images for the web,
gif, jpg, png
i. Vocabulary: bit-depth, quality,
transparency, dither,
interlace/progressive
9. Other Structural HTML Tags: hI-h6; p; strong, em,
blockquote, cite, hr
a. Students will complete Quiz I HTML
10. Planning a site
a. Working in teams
b. Working with clients
c. Using the Project Planner
i. Students will complete a Site Plan
project
d. Web Usability
i. Students will participate in a Mock
Usability Test
ii. Students will participate in a Mock
Focus Group
E Creating Web Graphics 5 Media
Support &
1. Bitmap image editing Services
a. Students will correct common image Pathway
B5.6
problems
b. Students will create raster images from
scratch
2. Vector image editing
a. Students will create 3D shapes by combining
standard primitives
b. Students will use the pen tool
c. Students will recreate a client logo as a
vector graphic from a scanned image
d. Students will create different button styles as
vector graphics
3. Color Theory: Color Harmony for the Web
Italicized refers to negotiated curriculum versus guaranteed curriculum.
G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 a. Students will create a styleboard for a client
and use color theory to create a color palette
appropriate for the target demographic
b. Students will complete Quiz 2 Web Graphics
c. Students will create an Interface Design
Project
F More Control with HTML 5 Media
Support &
1.Frames and Framesets (deprecated) Services
a. Frame-based navigation systems Pathway
B5.0, 5.1
b. iFrames
c. Controlling the look of Framesets with
HTML attributes
2.Tables in HTML (deprecated)
a. Image splice tables
i. Students will create a web interface
image and slice it up, put it back
together in a seamless table with
working links
b. Flexible tables
i. Students will use nested tables and
background images to create flexible
tables
ii. Students will use frames and tables to
organize the content they have
collected for their project “Content is
King” project
iii. Students will complete Quiz 3 Web
Layout and Usability

Italicized refers to negotiated curriculum versus guaranteed curriculum.

G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 G Introduction to Cascading Style Sheets 10 Media
Support &
1. In-line, embedded, and external style sheets Services
a. Students will utilize three kinds of styles and Pathway
B5.6
show the complete code for performing the
same task (i.e., make the background color of
a paragraph orange) using all three possible
locations for the style information
2. Topography with CSS
a. Typography on the web: web-safe font
families
b. CSS properties for working with text.
c. Students will create styles for different
structural levels of their site and include font,
color, and spacing information
3. Layout with CSS
a. The Box Model
b. Controlling margin and padding
c. Using float to create layouts
i. Students will build a page layout with
float, margin, and padding
d. Absolute and relative positioning
i. Students will build a page layout with
positioned elements
e. Using classes and IDs
i. Students will create a stylesheet for a
news system so that each post looks
the same, but has different
positioning
ii. Students will create a new style for
CSS Zen Garden
iii. Students will complete Quiz 4 Web
Design with CSS
iv. Students will complete an online
Style project
H Using a WYSIWYG HTML Editor 5 Media
Support &
1. Dreamweaver interface Services
2. Working with images in Dreamweaver Pathway
B1.1
3. Links and layout in Dreamweaver
4. Behaviors in Dreamweaver
5. Working with library items
6. Managing large sites with Dreamweaver
a. Students will edit an existing site using
Dreamweaver

Italicized refers to negotiated curriculum versus guaranteed curriculum.

G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc
 I Encouraging Interactivity and Developing Social 15 Media
Support &
Networks Services
1. RSS, Blogs, CMSs, Podcasts, Wikis and other ways Pathway
B5.6
to share
a. Students will create and comment on Forums on
the course website (Moodle) and use the chat
feature
2. Introduction to WordPress
a. Students will install, configure and post content
3. Editing a WordPress theme
a. Students will add their own background image to
the default WordPress theme
b. Students will use Dreamweaver and CSS to
customize a WordPress theme to match their site
“myBlog” project
4. Podcast Examples and Segment ideas
a. Students will use Audacity to record tagline,
intro, and stringers for podcast
5. RSS publishing
a. Students will complete a Podcast project
Students will complete Quiz 5 WYSIWYG, CMS and
Interactivity
J More Multimedia and Interactivity on the Web 20 Media
Support &
1. Introduction to Flash Services
2. Flash Illustration tools Pathway
B5.6
3. Simple animation in Flash
2. Adding sound to Flash
3. Creating buttons and adding actions
a. Students will complete Quiz 6 Interactivity
with Flash
b. Students will complete an e-motion project
10. Additional recommended/optional items
a. Articulation: None
b. Academic credit: None
c. Instructional strategies:
Methods of Instruction:
a. Lecture
b. Audio Visual Materials
c. Demonstrations
d. Research Readings and Written Presentations
e. Homework Assignments
f. Group & Individual Activities
g. Discussion & Group Dynamics
h. Quizzes, Tests & Final Exam
i. Guest Speakers
j. Internet Exploration
d. Instructional materials: Teacher Generated
e. Certificates: None
Italicized refers to negotiated curriculum versus guaranteed curriculum.
G:\CDWP\Course Outlines (pb)\Industry Sectors\Arts, Media, Entertainment\Media & Communications\SCOE Course Outlines Web Design\SCOE Advanced
Web Design 07.01.10.doc