Web Design Specialist Lesson1

Web Design Specialist
(Adobe CS6 Web Edition)

Self-Study Guide Volume 1
Web Design Series
CCSSM-CDWDSG-PR-1305 version 1.1 rd0513

Self-Study Guide
Volume 1
President/Chief Certification Architect

James Stanger, Ph.D.
Vice President, Operations
Todd Hopkins
Senior Content Developer
Kenneth A. Kozakis
Managing Editor
Susan M. Lane
Editor
Sarah Skodak
Project Manager/Publisher
Tina Strong
Customer Service
Certification Partners, LLC

1230 W. Washington St., Ste. 201
Tempe, AZ 85281
(602) 275-7700
Copyright 2013, All rights reserved.

Developers
Irina Heer; Kenneth A. Kozakis; James Stanger, Ph.D.;
Jeffrey Brown; Chris Minnick; and Susan M. Lane
Contributors
Stephen Schneiter, Brian Danks, Martin Heltai and Robert Barrett
Editors
Susan M. Lane and Sarah Skodak
Project Manager/Publisher
Tina Strong
Trademarks
Certification Partners is a trademark of Certification Partners, LLC. All product names and services identified
throughout this book are trademarks or registered trademarks of their respective companies. They are used
throughout this book in editorial fashion only. No such use, or the use of any trade name, is intended to convey
endorsement or other affiliation with the book. Copyrights of any screen captures in this book are the property of the
software's manufacturer.
Disclaimer
Certification Partners, LLC, makes a genuine attempt to ensure the accuracy and quality of the content described
herein; however, Certification Partners makes no warranty, express or implied, with respect to the quality, reliability,
accuracy, or freedom from error of this document or the products it describes. Certification Partners makes no
representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of
fitness for any particular purpose. Certification Partners disclaims all liability for any direct, indirect, incidental or
consequential, special or exemplary damages resulting from the use of the information in this document or from the
use of any products described in this document. Mention of any product or organization does not constitute an
endorsement by Certification Partners of that product or corporation. Data used in examples and labs is intended to be
fictional even if actual data is used or accessed. Any resemblance to, or use of real persons or organizations should be
treated as entirely coincidental. Certification Partners makes every effort to ensure the accuracy of URLs referenced in
all its material, but cannot guarantee that all URLs will be available throughout the life of a course. When this course
was published, all URLs were checked for accuracy and completeness. However, due to the ever-changing nature of the
Internet, some URLs may no longer be available or may have been redirected.
Copyright Information
This training manual is copyrighted and all rights are reserved by Certification Partners, LLC. No part of this
publication may be reproduced, transmitted, stored in a retrieval system, modified, or translated into any language or
computer language, in any form or by any means, electronic, mechanical, magnetic, optical, chemical, manual or
otherwise without written permission of Certification Partners, 1230 W. Washington Street, Suite 201, Tempe, AZ
85281.
Copyright 2013 by
Certification Partners, LLC
All Rights Reserved
ISBN: 0-7423-3230-6
iv
2013 Certification Partners, LLC All Rights Reserved
Version 1.1
Table of Contents
Course Description ....................................................................................................................... xii
Self-Study Courseware................................................................................................................. xiii
Course Objectives......................................................................................................................... xv
Course Setup Guide and System Requirements ............................................................................ xv
Conventions and Graphics ............................................................................................................ xx
Lesson 1: Overview of Web Design Concepts ................................................................................ 1-1
Pre-Assessment Questions ................................................................................................................ 1-2
Web Technology ................................................................................................................................ 1-3
The Nature of the Web ....................................................................................................................... 1-3
Web Design Concepts ........................................................................................................................ 1-5
New Technologies .............................................................................................................................. 1-6
Evaluating Your XHTML Skills .......................................................................................................... 1-6
Case Study ........................................................................................................................................ 1-9
Lesson 1 Review .............................................................................................................................. 1-11
Lesson 1 Supplemental Material ...................................................................................................... 1-12
Lesson 2: Web Development Teams ............................................................................................. 2-1
Web Teams and Tasks ....................................................................................................................... 2-3
Web Project Management .................................................................................................................. 2-4
Web Project Collaboration ................................................................................................................. 2-6
Your Web Design Portfolio ................................................................................................................. 2-9
Your Web Design Business .............................................................................................................. 2-12
Case Study ...................................................................................................................................... 2-17
Lesson 2 Review .............................................................................................................................. 2-19
Lesson 3: Web Project Management Fundamentals ...................................................................... 3-1
Web Project Management Phases ....................................................................................................... 3-3
Project Documentation and Communication ...................................................................................... 3-8
Case Study ...................................................................................................................................... 3-11
Lesson 3 Review .............................................................................................................................. 3-13
Lesson 4: Web Site Development Process..................................................................................... 4-1
Bottom-Up Approach to Web Development ........................................................................................ 4-3
Understanding the Business Process ................................................................................................. 4-3
Defining a Web Site Vision................................................................................................................. 4-4
From Vision to Strategy ..................................................................................................................... 4-5
Web Site Specifications...................................................................................................................... 4-6
The Metaphor .................................................................................................................................. 4-10
Mystery Meat Navigation ................................................................................................................. 4-14
The Mindmapping Process ............................................................................................................... 4-15
Creating a Web Site Wireframe ........................................................................................................ 4-18
Creating a Web Page Wireframe ....................................................................................................... 4-19
Case Study ...................................................................................................................................... 4-20
Lesson 4 Review .............................................................................................................................. 4-22
Lesson 5: Web Page Layout and Elements .................................................................................... 5-1
Web Users and Site Design ................................................................................................................ 5-3
Effective Web Page Layout ................................................................................................................. 5-5
Branding and the Web..................................................................................................................... 5-18
Color and Web Design ..................................................................................................................... 5-18
Fonts and Web Design..................................................................................................................... 5-23
Case Study ...................................................................................................................................... 5-27
Version 1.1
vi
Lesson 5 Review .............................................................................................................................. 5-30

Lesson 6: Web Site Usability and Accessibility ............................................................................ 6-1
Audience Usability and Accessibility .................................................................................................. 6-3
Defining Usability ..............................................................................................................................6-3
Web Site Usability Testing ................................................................................................................. 6-4
Web Page Accessibility....................................................................................................................... 6-6
Case Study ........................................................................................................................................ 6-9
Lesson 6 Review .............................................................................................................................. 6-11
Lesson 7: Browsers ...................................................................................................................... 7-1
Browsers and Navigation ................................................................................................................... 7-3
Browsers and Design Considerations ................................................................................................. 7-4
Browser Adoption .............................................................................................................................. 7-6
Major, Minor and Alternative Browsers .............................................................................................. 7-7
Creating Aliases with TinyURL......................................................................................................... 7-20
Utilizing CAPTCHA .......................................................................................................................... 7-21
Case Study ...................................................................................................................................... 7-25
Lesson 7 Review .............................................................................................................................. 7-27
Lesson 8: Navigation Concepts .................................................................................................... 8-1
Why Is Navigation Critical? ................................................................................................................ 8-3
Primary and Secondary Navigation .................................................................................................... 8-3
Navigation Hierarchy ......................................................................................................................... 8-3
Site Structure, URLs and File Names ................................................................................................. 8-6
Familiar Navigation Conventions ....................................................................................................... 8-7
Guided Navigation ............................................................................................................................. 8-8
Navigation Action Plan ...................................................................................................................... 8-8
Case Study ...................................................................................................................................... 8-11
Lesson 8 Review .............................................................................................................................. 8-13
Lesson 9: Web Graphics ............................................................................................................... 9-1
Web Site Images ................................................................................................................................ 9-3
Digital Imaging Concepts ................................................................................................................... 9-9
Raster vs. Vector Graphics .............................................................................................................. 9-10
Graphics Applications ..................................................................................................................... 9-12
Image File Formats .......................................................................................................................... 9-13
Creating and Optimizing Images ...................................................................................................... 9-16
Essential Graphic Design Concepts ................................................................................................. 9-22
Case Study ...................................................................................................................................... 9-27
Lesson 9 Review .............................................................................................................................. 9-29
Lesson 10: Multimedia and the Web ......................................................................................... 10-1
Pre-Assessment Questions .............................................................................................................. 10-2
Multimedia and Web Sites ............................................................................................................... 10-3
Current Multimedia Capabilities ...................................................................................................... 10-3
Animation and the Web ................................................................................................................... 10-4
Audio and the Web .......................................................................................................................... 10-5
Video and the Web .......................................................................................................................... 10-7
Goals of a Multimedia Site ............................................................................................................... 10-7
Multimedia Site Design Basics......................................................................................................... 10-8
User Interaction .............................................................................................................................. 10-9
Selecting Multimedia Elements ...................................................................................................... 10-10
Case Study .................................................................................................................................... 10-13
Version 1.1
vii
Lesson 10 Review .......................................................................................................................... 10-15

Lesson 10 Supplemental Material .................................................................................................. 10-16
Lesson 11: Ethical and Legal Issues in Web Development .......................................................... 11-1
Ethics and Law in Web Development ............................................................................................... 11-3
Ethical Issues and the Web ............................................................................................................. 11-3
Legal Issues and the Web ................................................................................................................ 11-5
Case Study .................................................................................................................................... 11-11
Lesson 11 Review .......................................................................................................................... 11-13
Lesson 12: HTML and the Evolution of Markup ......................................................................... 12-1
Function of Markup Languages ....................................................................................................... 12-3
SGML: A Short History .................................................................................................................... 12-3
What Is HTML? ............................................................................................................................... 12-4
HTML Goals .................................................................................................................................... 12-5
The HTML Standard ........................................................................................................................ 12-7
HTML 1.0 and 2.0 ........................................................................................................................... 12-8
HTML 3.0 and 3.2 ........................................................................................................................... 12-8
HTML 4.0 and 4.01 ......................................................................................................................... 12-8
Separating Format from Structure in HTML..................................................................................... 12-9
Extensible HTML (XHTML)............................................................................................................. 12-10
Reference Sites for Web Developers ............................................................................................... 12-10
Case Study .................................................................................................................................... 12-11
Lesson 12 Review .......................................................................................................................... 12-13
Lesson 13: XML and XHTML ...................................................................................................... 13-1
What Is XML?.................................................................................................................................. 13-3
XML Goals ...................................................................................................................................... 13-5
What Is an XML Document? ............................................................................................................ 13-6
Rules for Well-Formed XML ............................................................................................................. 13-7
HTML Transition to XML ............................................................................................................... 13-10
What Is XHTML? ........................................................................................................................... 13-13
Applying a Single Standard Consistently ....................................................................................... 13-15
Case Study .................................................................................................................................... 13-16
Lesson 13 Review .......................................................................................................................... 13-18
Lesson 14: Web Page Structure Tables and Framesets............................................................ 14-1
Creating Structure with X/HTML Tables.......................................................................................... 14-3
Diagramming a Basic X/HTML Table ............................................................................................... 14-4
Borderless Web Page Structure........................................................................................................ 14-6
X/HTML Frames and Framesets ...................................................................................................... 14-9
The X/HTML <frameset> Tag ......................................................................................................... 14-11
The X/HTML <frame> Tag ............................................................................................................. 14-12
Targeting Hyperlinks in X/HTML ................................................................................................... 14-16
The X/HTML <noframes> Tag ........................................................................................................ 14-24
Case Study .................................................................................................................................... 14-25
Lesson 14 Review .......................................................................................................................... 14-27
Lesson 15: Cascading Style Sheets ............................................................................................ 15-1
Style Sheets .................................................................................................................................... 15-3
Cascading Style Sheets.................................................................................................................... 15-3
Defining and Using Styles................................................................................................................ 15-4
Changeable Style Attributes ............................................................................................................ 15-5
Style Guides .................................................................................................................................. 15-14
Version 1.1
viii
Changes from CSS1 to CSS2 ......................................................................................................... 15-15

Page Layout with CSS ................................................................................................................... 15-16
The CSS Box Model ....................................................................................................................... 15-16
Document Flow and Positioning .................................................................................................... 15-18
CSS Positioning Schemes .............................................................................................................. 15-25
Case Study .................................................................................................................................... 15-38
Lesson 15 Review .......................................................................................................................... 15-40
Lesson 16: Site Content and Metadata ..................................................................................... 16-1
Written Web Site Content ................................................................................................................ 16-3
Internet Marketing and Search Engine Optimization (SEO) .............................................................. 16-5
Metadata ....................................................................................................................................... 16-13
The <meta> Tag and Document Identification ................................................................................ 16-14
The <meta> Tag and Search Engines ............................................................................................. 16-17
The <meta> Tag and Delayed File Change ...................................................................................... 16-21
Case Study .................................................................................................................................... 16-23
Lesson 16 Review .......................................................................................................................... 16-26
Lesson 17: Site Development with Microsoft Expression Web 4 Introduction ......................... 17-1
The Transition from FrontPage ........................................................................................................ 17-3
Microsoft Expression Web 4 ............................................................................................................ 17-4
Expression Web Views ..................................................................................................................... 17-4
Expression Web Menus and Toolbars .............................................................................................. 17-6
Opening Web Sites and Files in Expression Web .............................................................................. 17-7
Developing W3C-Compliant Code with Expression Web ................................................................. 17-13
Case Study .................................................................................................................................... 17-19
Lesson 17 Review .......................................................................................................................... 17-21
Lesson 18: Site Development with Expression Web 4 Basic Features ..................................... 18-1
Page Layout Options in Expression Web .......................................................................................... 18-3
Creating a New Web Site Using Expression Web .............................................................................. 18-3
Page Layout with CSS ..................................................................................................................... 18-5
Inserting Images with Expression Web........................................................................................... 18-16
Creating Hyperlinks with Expression Web ..................................................................................... 18-20
Creating Image Maps with Expression Web.................................................................................... 18-22
Creating Navigation Bars Using CSS.............................................................................................. 18-23
Expression Web's Dynamic Web Templates ................................................................................... 18-28
Pasting Formatted Text with Expression Web ................................................................................ 18-34
Pasting X/HTML content with Expression Web .............................................................................. 18-37
Case Study .................................................................................................................................... 18-39
Lesson 18 Review .......................................................................................................................... 18-41
Lesson 19: Site Development with Expression Web 4 Advanced Features ............................... 19-1
Expression Web Styles .................................................................................................................... 19-3
Adding Interactivity to Web Pages .................................................................................................. 19-12
Creating Web Forms with Expression Web ..................................................................................... 19-15
Connecting to Databases ............................................................................................................... 19-21
Expression Web Reports ................................................................................................................ 19-26
Options for Replacing Old Webbots................................................................................................ 19-28
Case Study .................................................................................................................................... 19-30
Lesson 19 Review .......................................................................................................................... 19-32
Index ................................................................................................................................... Index-1
Version 1.1
ix
List of Labs
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
1-1: Creating a basic Web page ...................................................................................................... 1-6

2-1: Creating a Web portfolio ........................................................................................................ 2-10
3-1: Evaluating project-tracking software ....................................................................................... 3-9
4-1: Creating a vision statement for a Web site ............................................................................... 4-4
4-2: Developing tactics to support a Web site strategy .................................................................... 4-6
4-3: Developing the specifications for a Web site ............................................................................. 4-7
4-4: Mindmapping a Web site ....................................................................................................... 4-17
6-1: Identifying common accessibility issues .................................................................................. 6-8
7-1: Investigating Google Chrome ................................................................................................. 7-13
7-2: Testing a site in multiple browsers ........................................................................................ 7-17
7-3: Creating an alias with TinyURL ............................................................................................. 7-20
7-4: Adding a CAPTCHA to a Web page ......................................................................................... 7-22
9-1: Adding tags to a photo ............................................................................................................ 9-7
9-2: Optimizing images for Web use ............................................................................................. 9-18
11-1: Discovering copyright infringement ................................................................................... 11-10
14-1: Creating a simple XHTML table ........................................................................................... 14-5
14-2: Creating a simple Web page structure ................................................................................. 14-8
14-3: Creating a rows frameset in XHTML .................................................................................. 14-13
14-4: Creating a columns frameset in XHTML ............................................................................ 14-14
14-5: Hyperlinking frame content in XHTML .............................................................................. 14-15
14-6: Creating targeted hyperlinks in XHTML ............................................................................. 14-16
14-7: Targeting links to the top frame in XHTML ........................................................................ 14-19
14-8: Combining columns and rows in nested framesets ............................................................ 14-20
14-9: Combining frames in XHTML ............................................................................................ 14-22
14-10: Adding attributes to the frameset .................................................................................... 14-24
15-1: Creating and using embedded styles ................................................................................... 15-7
15-2: Applying inline styles .......................................................................................................... 15-9
15-3: Linking to an external style sheet ...................................................................................... 15-10
15-4: Using CSS class selectors .................................................................................................. 15-13
15-5: Creating a basic two-column layout with CSS ................................................................... 15-26
15-6: Creating a three-column layout with CSS .......................................................................... 15-30
15-7: Converting a table-based page layout to CSS positioning ................................................... 15-34
16-1: Using the <meta> tag to refresh a page automatically ........................................................ 16-22
17-1: Launching Expression Web ................................................................................................. 17-7
17-2: Validating code with Expression Web ................................................................................ 17-14
18-1: Creating a new Web site with Expression Web ..................................................................... 18-4
18-2: Preparing to lay out the home page with Expression Web .................................................... 18-6
18-3: Nesting divisions with Expression Web .............................................................................. 18-11
18-4: Inserting images with Expression Web .............................................................................. 18-17
18-5: Modifying division properties with Expression Web ............................................................ 18-19
18-6: Creating hyperlinks with Expression Web.......................................................................... 18-21
18-7: Creating an image map with Expression Web .................................................................... 18-22
18-8: Creating navigation bars using CSS .................................................................................. 18-24
18-9: Adding and styling links using CSS ................................................................................... 18-26
18-10: Creating a dynamic Web template with Expression Web .................................................. 18-29
18-11: Adding supporting Web pages with Expression Web ........................................................ 18-32
18-12: Detaching pages from a dynamic Web template with Expression Web .............................. 18-33
18-13: Pasting formatted text with Expression Web .................................................................... 18-35
18-14: Pasting X/HTML data into an Expression Web document ................................................ 18-37
19-1: Working with external style sheets in Expression Web ......................................................... 19-6
19-2: Creating embedded styles with Expression Web .................................................................. 19-7
19-3: Using inline styles in Expression Web ................................................................................. 19-9
19-4: Attaching multiple style sheets with Expression Web......................................................... 19-11
19-5: Adding behaviors with Expression Web ............................................................................. 19-13
19-6: Creating Web forms with Expression Web ......................................................................... 19-16
19-7: Connecting to an Access database ..................................................................................... 19-22
19-8: Using Expression Web reports ........................................................................................... 19-26
Version 1.1
List of Activities
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
Activity
1-1: Evaluating Web design .................................................................................................... 1-13

2-1: Developing a simple Web design methodology .................................................................. 2-21
3-1: Managing your time and resources .................................................................................. 3-15
4-1: Creating a vision statement for a personal goal ................................................................ 4-24
5-1: Identifying Web page layout elements .............................................................................. 5-32
5-2: Identifying numeric color formats .................................................................................... 5-33
6-1: Conducting a Web site usability test ................................................................................ 6-13
7-1: Reviewing browser terminology ........................................................................................ 7-29
8-1: Identifying Web site structure .......................................................................................... 8-15
9-1: Identifying graphic formats and files ................................................................................ 9-31
10-1: Identifying multimedia elements .................................................................................. 10-17
11-1: Reviewing Web-related legal terms ............................................................................... 11-15
12-1: Identifying HTML terms ............................................................................................... 12-15
12-2: Identifying HTML issues .............................................................................................. 12-16
13-1: Creating a well-formed XML document ........................................................................ 13-20
14-1: Reviewing X/HTML table tags ...................................................................................... 14-29
15-1: Using inheritance with styles ....................................................................................... 15-42
16-1: Developing Web site metadata ..................................................................................... 16-28
List of Optional Labs

Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
1-1: Practicing your XHTML skills .................................................................................. 1-16

2-1: Using a Wiki site ..................................................................................................... 2-22
3-1: Researching project management principles ............................................................ 3-16
4-1: Analyzing the competition's strategy and tactics ...................................................... 4-26
5-1: Using Web page colors and fonts to convey a message ............................................. 5-34
6-1: Evaluating a Web site's usability ............................................................................. 6-15
7-1: Exploring various browsers ..................................................................................... 7-30
8-1: Identifying navigation elements ............................................................................... 8-17
9-1: Comparing image file formats .................................................................................. 9-32
10-1: Evaluating multimedia site design principles ....................................................... 10-18
11-1: Exploring the public domain ............................................................................... 11-15
12-1: Learning about HTML standards ......................................................................... 12-17
13-1: Examining XML documents ................................................................................ 13-21
14-1: Adding the <noframes> tag.................................................................................. 14-31
15-1: Validating your style sheets ................................................................................ 15-44
16-1: Using Web site metadata ..................................................................................... 16-29
17-1: Exploring Expression Web sites........................................................................... 17-23
18-1: Modifying Expression Web-generated code .......................................................... 18-43
19-1: Observing the effects of multiple style sheets in Expression Web ......................... 19-34
19-2: Modifying a manually coded X/HTML page in Expression Web ............................ 19-35
List of Quizzes
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
1 Quiz ..................................................................................................................................... 1-23

2 Quiz ..................................................................................................................................... 2-23
3 Quiz ..................................................................................................................................... 3-17
4 Quiz ..................................................................................................................................... 4-28
5 Quiz ..................................................................................................................................... 5-40
6 Quiz ..................................................................................................................................... 6-18
7 Quiz ..................................................................................................................................... 7-31
8 Quiz ..................................................................................................................................... 8-21
9 Quiz ..................................................................................................................................... 9-36
10 Quiz ................................................................................................................................. 10-21
11 Quiz ................................................................................................................................. 11-16
12 Quiz ................................................................................................................................. 12-19
13 Quiz ................................................................................................................................. 13-23
14 Quiz ................................................................................................................................. 14-33
15 Quiz ................................................................................................................................. 15-47
Version 1.1
xi
Lesson
Lesson
Lesson
Lesson
16
17
18
19
Quiz ................................................................................................................................. 16-32

Quiz ................................................................................................................................. 17-26
Quiz ................................................................................................................................. 18-46
Quiz ................................................................................................................................. 19-40
List of Tables
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
5-1: Page size and download time .............................................................................................. 5-14

5-2: RGB and hexadecimal color value examples ....................................................................... 5-21
5-3: Browser-safe color palette................................................................................................... 5-22
5-4: Browser-safe color intensities ............................................................................................. 5-23
9-1: Image file formats ............................................................................................................... 9-13
10-1: Audio file types ................................................................................................................. 10-6
15-1: Changeable style attributes .............................................................................................. 15-6
15-2: CSS2 features ................................................................................................................ 15-15
16-1: Values of <meta> tag http-equiv and content attributes .................................................. 16-16
18-1: Hyperlink states ............................................................................................................. 18-27
18-2: Hyperlink selectors ......................................................................................................... 18-27
18-3: Paste options .................................................................................................................. 18-34
Version 1.1
xii
Course Description
The Web Design Specialist course teaches you how to design and publish Web sites. General topics
include Web Site Development Essentials (such as the site development process, customer expectations,
and ethical and legal issues in Web development), Web Design Elements (such as aesthetics, the site
user's experience, navigation, usability and accessibility), Basic Web Technologies (such as basic
Hypertext Markup Language [HTML], Extensible HTML [XHTML] and extended technologies, image files,
GUI site development applications, site publishing and maintenance) and Advanced Web Technologies
(such as multimedia and plug-in technologies, client-side and server-side technologies, and Web
databases).
In this course, you will work with popular production tools such as Microsoft Expression Web, and Adobe
Dreamweaver and Flash. You will study design and development technologies such as Cascading Style
Sheets (CSS), Extensible Markup Language (XML), JavaScript, Java applets, Dynamic HTML, plug-ins,
multimedia and databases. You will also explore the extensibility of design tools, incompatibility issues
surrounding these tools, and the functionality of current Web browsers.
Web Design Specialist will also teach you to manage the Web site development process. You will learn
about new technologies and traditional strategies involving the Web designer job role. Throughout this
course, you will learn how Web sites are developed as managed projects, relate Web site development to
business goals, and apply guidelines for user accessibility to Web site development. You will also consider
site design from several perspectives. You will approach design from the Web user's perspective so that
you can identify with user interests and needs. You will also assume the roles of Web designer and project
manager, as you work through the Web site development process by evolving a Web presence site into a
working prototype Web project. Hands-on labs include real-world scenarios based on a previously live
version of the Habitat for Humanity International Web site. Note that you will build prototype pages using
Habitat for Humanity content. This content is provided by Habitat for Humanity with permission to use it
in labs teaching site development skills. The prototype pages that you build do not necessarily represent,
duplicate or simulate the current live Habitat for Humanity Web site, which can be visited at
www.habitat.org.
This course provides a balance of training in theory, technology, project management and hands-on
development. The skills and concepts taught in this course enable corporations to overcome the
challenges of bringing mission-critical business information to the Internet and intranet environments.
All CIW courses offer Case Studies about real-world skills applications, and updated topics such as
project management and the relationship between technology and business operations. Guided, step-bystep labs provide opportunities to practice new skills. You can challenge yourself and review your skills
after each lesson in the Lesson Summary and Lesson Review sections. Additional skill reinforcement is
provided in Activities, Optional Labs and Lesson Quizzes.
This coursebook includes supplemental material located on CIW Online. To practice the skills presented
or to perform any labs that were not completed, refer to the Course Setup section for information about
system requirements and using the lab files.
The CIW Web Design Specialist course prepares you to take the CIW Web Design Specialist certification
exam.
Version 1.1
xiii
Series
CIW Web Design Specialist is the first course in the CIW Web Design Professional series:
E-Commerce Specialist
Prerequisites
Individuals taking this course need a basic understanding of Internet functionality and tools, and
X/HTML. No prerequisite courses or certifications are required prior to taking this course or the
corresponding certification exam. However, the course and exam are challenging and comprehensive. CIW
offers the Web Foundations Associate curriculum to provide the base of foundational X/HTML and
Internet knowledge necessary for this course. The CIW Foundations courses are not required, but for
many candidates they are extremely helpful.
Certification
The CIW Web Design Specialist course prepares you to take the high-stakes CIW Web Design Specialist
certification exam (1D0-520). Those who pass this exam earn the highly respected CIW Web Design
Specialist certification, which is recognized throughout the industry as validating essential Web
development skills for the workplace. Those who also pass the CIW E-Commerce Specialist exam
(1D0-525) earn the CIW Web Design Professional certification, which validates advanced skills in Web site
and e-commerce solution development.
To register for a CIW exam online, visit Prometric at http://securereg3.prometric.com/ or VUE at
www.vue.com/. For more information about CIW exams, visit www.CIWcertified.com/.
Target audience
The CIW Web Design Specialist course is for individuals who want to develop the skills necessary to
specialize in Web site design:
Web designers
Internet consultants
IT professionals
Marketing professionals
Web and graphic artists
Business professionals
Entrepreneurs who want to develop their own Web presence
Individuals with little or no background in Web design should consider starting with the CIW Site
Development Foundations course to learn the basics of Web site authoring and development.
Self-Study Courseware
This coursebook was developed for self-directed training. Along with comprehensive instructional text and
objectives checklists, this coursebook provides easy-to-follow hands-on labs and a glossary of coursespecific terms. It also provides Internet addresses needed to complete some labs, although due to the
constantly changing nature of the Internet, some addresses may no longer be valid. The coursebook also
includes margin notes that provide additional tips and commentary to supplement course narrative, and
that direct you to material relating directly to specified CIW exam objectives. Each course lesson includes
Version 1.1
xiv
practice, study and assessment materials such as preview and review questions, Case Studies,
Application Projects, pen-and-paper-based Activities, Optional Labs and Quizzes.
Online resources
You can visit CIW Online at http://education.certification-partners.com/ciw/ to access supplemental
course materials and to get help in preparing for the CIW Web Design Specialist certification exam. CIW
Online provides a variety of online tools you can use to supplement the Official CIW Courseware.
CIW Courseware Supplemental Files

This coursebook includes supplemental material that can be accessed from CIW Online. Online materials
include some elements required to complete the coursework and other optional elements that are
provided for your interest or further study. Materials include lab files used to complete the course labs,
answers to exercises and quizzes, and appendixes with related information (including the CIW Web
Design Specialist Objectives And Locations Appendix). See the CIW Supplemental Files section under
Course Setup for information about accessing these files.
CIW Movies
The CIW Web Design Specialist course offers movie files from LearnKey that discuss selected technology
topics. To view the movies, log on to CIW Online at http://education.certification-partners.com/ciw/. Use
the access code provided to register for the movies and view them online. If you have any questions,
please contact Product Support at (866) 370-3511 or support@certification-partners.com.
Consider the following points about the CIW Movies:
The movies provide supplementary instruction in a multimedia format, and enhance the coursebook
narrative and labs. However, movie content does not comprehensively address CIW Web Design
Specialist certification exam objectives and is not intended to replace coursebook content.
The CIW Web Design Specialist coursebook includes a Movie Time appendix that indicates appropriate
points at which to view the supplemental movies.
You are strongly encouraged to watch the movie clips. You are provided access to CIW Online to view
the movies. Do not distribute the code to unauthorized users.
CIW Online Exercises

These interactive activities are instructional supplements to the official print and online books, designed
to offer a blended-learning approach. Mapped directly to the Official CIW Courseware, the CIW Online
Exercises enable you to review important concepts from the Web Design Specialist course and measure
your proficiency on content relevant to the CIW Web Design Specialist certification exam. CIW Online
Exercises challenge you with a wide range of activities, including glossary flashcards, matching exercises,
fill in the blank, crossword puzzles and true/false questions all providing immediate feedback.
CIW Course Mastery

CIW Course Mastery is designed to assess your knowledge of the concepts, skills and best practices of
Web technology taught in the Official CIW Courseware. The CIW Course Mastery assesses lesson
knowledge, reinforces learning and enhances instruction. This online review program contains multiplechoice questions that cover Web Design Specialist courseware content lesson by lesson. The Course
Mastery program is based on a unique method that maximizes knowledge retention.
CIW Certification Practice Exams

After you have mastered the Web Design Specialist course material, you are ready to prepare for the highstakes CIW Web Design Specialist certification exam. The online CIW Certification Practice Exams
program helps you build confidence with your knowledge of the CIW exam objectives. This program
provides you with:
Version 1.1
xv
Timed practice exams that simulate the high-stakes testing environment and help predict actual
performance on CIW certification exams.
A feedback review mode that allows you to check answers while taking the practice exam and gain
valuable feedback that relates each question to a CIW exam objective and a lesson in the Official CIW
Courseware.
Exam results that report on your mastery of each CIW exam objective.
Personalized performance reports and study plans.
Course Objectives
After completing this course, you will be able to:
Identify and implement Web design concepts, including page layout, multimedia, font and color
selection, graphic images, audience usability, file hierarchy, and navigation.
Manage the Web site development process, develop a Web strategy with goals and tactics to support
it, and implement techniques such as mindmapping and the site metaphor concept.
Choose and implement basic Web technologies, such as X/HTML tables and frames, metadata, and
Cascading Style Sheets (CSS).
Use Web production applications and tools to create and manage pages and sites, create animated
GIFs, edit graphic image files, and create multimedia files.
Define and implement advanced Web technologies, including scripting languages, Dynamic HTML,
Extensible Markup Language (XML), Secure XML, RSS feeds, server-side technologies, Java applets
and plug-ins.
Explain the functions of Web servers, server administration ports, cookies, databases and database
management systems.
Compare in-house Web site hosting to hosting with an Internet Service Provider (ISP) or Application
Service Provide (ASP), and publish sites to the Web using various tools and techniques.
Complete development of a functional Web site, and maintain and update a site using common site
and server security principles.
Course Setup Guide and System Requirements

In order to implement this course, you will need to set up your computer based on the hardware, software
and connectivity requirements listed in the following sections. However, you may want to use additional
software to further explore network interaction or related technologies.
Hardware requirements
The following table summarizes the hardware requirements for all courses in the CIW program.
Version 1.1
xvi
Hardware Specifications
Minimum Requirements
Processor
Intel Pentium 4 or AMD Athlon 64 processor
L2 cache
256 KB
Hard disk
Windows 7: 16 GB available hard disk space (32-bit) or 20 GB

available hard disk space (64-bit)
Expression Web 4: 2 GB or more of available hard disk space
Adobe Creative Suite 6 (CS6): 11 GB of available hard disk space
for installation; additional free space required during installation
RAM
2GB of RAM (3GB recommended) for 32 bit; 2GB of RAM (8GB

recommended) for 64 bit
DVD-ROM drive
32X
Network interface card (NIC)
10BaseT or 100BaseTX (10 or 100 Mbps)
Sound card/speakers
(Optional)
Video adapter
DirectX 9 graphics device with Windows Display Driver Model

(WDDM) 1.0 or higher driver
Monitor
1280x800 display required (1280x1024 recommended) with 16bit color and 512MB of VRAM
Router*
Multi-homed system with three NICs

(Windows 7/2008 server)*
* Router only required for some security and networking courses. Please review the connectivity or
network requirements for each course to determine if a router is required. Must meet universal CIW
hardware requirements.
Software requirements
The recommended software configurations for computers used to complete the labs in this book are as follows.
Microsoft Windows 7 (typical installation) *
Microsoft Internet Explorer 8.0 (typical installation) *
Mozilla Firefox 3.6 (or later) browser *
Microsoft Expression Web 4 *
Adobe Creative Suite 6 (CS6) Design & Web Premium (recommended package, which includes the
following individual applications required for this course):
Adobe Dreamweaver CS6 *
Adobe Fireworks CS6 *
Adobe Flash Professional CS6 *
Adobe Creative Suite 6 (CS6) requires the following:

o
Java Runtime Environment 1.6 (included) *
QuickTime 7.6.6 software (required for HTML5 media playback and multimedia features) *
Adobe Flash Player 10 software (required to export SWF files) *
Microsoft Word (any version) *
* This software is provided in a virtual lab environment (see next section), or you can use your own software.
Version 1.1
xvii
Adobe Flash Player security settings

Some labs in this self-study course require the use of Adobe Flash Player to test multimedia elements you
create using Adobe Flash Professional CS6. If a multimedia element is configured to access a Web page
when you click on it in your browser, you may see the following Adobe Flash Player Security dialog box.
The Adobe Flash Player Security dialog box indicates that the multimedia element is unable to
communicate with the Internet. Perform the following steps to enable Internet communication for all
multimedia elements you create in this course.
1.
Click the Settings button to display the Flash Player Settings Manager dialog box, shown in the
following figure.
2.
Click the Advanced tab, then scroll down and click the Trusted Location Settings button.
3.
In the Trusted Location Settings dialog box that appears, click the Add button.
4.
In the Add Site dialog box that appears, click the Add Folder button.
5.
In the Browse For Folder dialog box that appears, navigate to the C:\CIW\Web_Dsgn_Spec\LabFiles
folder, then click OK. The Add Site dialog box will reappear, as shown in the following figure.
Version 1.1
xviii
6.
In the Add Site dialog box, click the Confirm button to specify the trusted folder location. The Trusted
Location Settings dialog box will reappear, as shown in the following figure.
7.
In the Trusted Location Settings dialog box, click the Close button, then close the Flash Player
Settings Manager dialog box.
Virtual labs
Some labs in this self-study course can be performed using virtual labs hosted by Hatsize
(www.hatsize.com). All software for these labs resides on Hatsize servers in a virtual lab environment.
Hatsize virtual labs provide all software and files for use in the virtual lab environment.
Note: If you have or obtain your own software for this course, you can use it (instead of the virtual lab
environment) to complete the labs as written. Use only properly licensed software. All course files are
provided on CIW Online at http://education.certification-partners.com/ciw/. The supplemental files
needed for this course are already provided in the virtual environment; you do not need to upload
supplemental files to the virtual lab environment.
Accessing virtual labs

You can access the virtual labs from CIW Online at http://education.certification-partners.com/ciw/. You
will receive an e-mail message containing an access code for the virtual labs one to two business days
after your CIW Self-Study Kit order is fully processed (typically prior to receiving this coursebook). To view
and complete the virtual labs, log on to CIW Online and click the link for the virtual labs for this course. If
you have not received your access code by the time you receive this coursebook, please contact our
customer service department at customerservice@certification-partners.com.
Version 1.1
xix
Connectivity requirements
Internet connectivity is required for this course. You will experience optimal performance with a dedicated
Internet connection (e.g., a cable/DSL modem or a T1 line). However, you can complete the course using
slower connections (e.g., 56-Kbps modem).
CIW Web Design Specialist supplemental files

This coursebook includes supplemental materials that are referenced and used throughout the course.
These supplemental materials are provided online at http://education.certification-partners.com/ciw/.
You will need to create a directory for all supplemental materials for the course. The default location is
C:\CIW\[Course_Title]. To view or download the materials, go to CIW Online, click the link for each file
and save to this directory. You can then create a shortcut to this directory on your Desktop. As you
perform the course labs, you can use this shortcut to quickly access your lab files.
Version 1.1
xx
Conventions and Graphics

The following conventions are used in this coursebook.
Terms
Technology terms defined in the margins are indicated in bold type the first time
they appear in the text. However, not every word in bold is a term requiring
definition.
Lab Text
Text that you enter in a lab appears in italic bold type. Names of components that
you access or change in a lab appear in bold type.
Notations
Notations, comments, and code and utility keywords appearing in narrative are
indicated in italic type.
Program Code or
Commands
Program code or operating system commands appear in the Lucida Sans

Typewriter font (in examples) or in italic type (in narrative).
The following graphics are used in this coursebook.

Tech Notes point out exceptions or special circumstances that you may find when
working with a particular procedure. Tech Notes that occur within a lab are
displayed without the graphic.
Tech Tips offer special-interest information about the current subject.
Warnings alert you about cautions to observe or actions to avoid.
This graphic signals the start of an exercise or other hands-on activity.
The Movie Time graphic signals appropriate points in the course at which to view
movie clips. All movie clips are 2013 LearnKey, Inc.
Each lesson summary includes an Application Project. This project is designed to

provoke interest and apply the skills taught in the lesson to your daily activities.
Each lesson concludes with a summary of the skills and objectives taught in that
lesson. You can use the Skills Review checklist to evaluate what you have learned.
This graphic indicates a line of code that is completed on the following line.
Version 1.1
1Lesson 1:
Overview of Web
Design Concepts
Objectives
By the end of this lesson, you will be able to:
1.2.1: Balance customer needs and usability with site design principles and
aesthetics (includes distinguishing site design customer from site audience).
2.2.1: Identify Web site characteristics and strategies to enable them, including
interactivity, navigation, database integration.
2.2.5: Identify purpose and usefulness of multimedia.
3.1.2: Write X/HTML code to create a static Web page with text and images.
4.1.1: Identify multimedia Web design principles, and choose appropriate multimedia
technologies for a site based on usability criteria.
1-2
Pre-Assessment Questions
1.
By its nature, the Internet is:

a.
b.
c.
d.
2.
Aside from customer or design requirements, you should only consider using
multimedia on a site:
a.
b.
c.
d.
3.
transactional.
linear.
passive.
self-reflective.
when
when
when
when
it
it
it
it
makes the site look more impressive to other developers.

increases download time only for certain pages.
is Adobe Flash or a related SWF technology.
has either no effect or a positive effect on the usability of the site.
What does the acronym GUI stand for, and what does it mean?
Version 1.1
Lesson 1: Overview of Web Design Concepts
1-3
Web Technology
NOTE:
Think about how
often you use the
Web and for what
types of activities.
In a relatively short period of time, the World Wide Web has become an indispensable tool
for both work and leisure. Many people now turn to the Web in their daily lives to find
information, rather than using the telephone or other traditional means. The Web allows
information to be disseminated with speed, accuracy and detail. Web addresses are now
included in most businesses' radio, television and print advertisements, offering
customers a more personalized and specific method of information access to assist in
learning and decision making.
However, today's Web is more than just an information dissemination tool. Increasingly,
people are regularly using Web-based software applications to perform their job tasks, as
well as to manage aspects of their personal lives. The ability to connect directly with other
people and organizations through an easy-to-use and widespread computer network
technology has the potential to improve business productivity and to positively influence
our lives by streamlining many processes that were formerly very complex.
It is the Web designer's responsibility to ensure that a Web site or Web-based application
conveys the appropriate message and is usable by the intended audience. Thus, the
concepts of design are as important in a Web site as the content and functionality.
Web designers are not the only people who need to be educated about design. To be
competitive, people in both technical and non-technical positions (and those who support
them) must be familiar with Web design concepts. Everyone in the modern office
environment will contribute to the development of the information infrastructure.
Tools and technologies abound to make Web page design easier. In addition to
understanding design and being able to create usable Web sites, designers must be
familiar enough with the technical aspect of Web design to be able to choose the tools
that will give them the competitive edge for their organizations.
The Nature of the Web

OBJECTIVE
2.2.1: Web site
characteristics and
strategies
Most Web site designers approach development from a self-reflective point of view. They
are interested in presenting themselves to a mass audience with the known metaphors of
mass advertising. However, the Internet offers an alternative: the capability for one-to-one
relationships. Users of Web sites respond better to information and product offerings that
are tailored to their specific needs.
Later in this course, you will examine the tools of the Web designer. You should
understand that by its nature, the Internet is a medium that enables the user to choose
which information to access and when to access it. This fact makes the Internet a one-toone medium as opposed to a broadcast medium. Thus, the concepts and applications of
mass media are not necessarily valid for the Internet.
Mass media is mostly passive. Its goal is to create in the viewer or reader enough interest
that eventually he or she will translate that interest to a desired transaction (such as
buying an advertised product). An interruption exists between the act of reading or
viewing and the act of transaction. That is, the customer does not interact directly with a
television or newspaper. Thus, creating information for mass media requires a different
strategy than creating information for the Internet.
By its nature, the Internet is transactional. The entire Internet experience, from logging
on to Web browsing, is predicated on user requests and server responses in other
words, transactions and interactivity. Furthermore, by its nature the Internet is non-
Version 1.1
1-4
linear. The user constantly makes transactional decisions, first leading to and arriving at
the site, then navigating within the site, performing searches (often within the site's
integrated databases), conducting e-commerce, and finally deciding to return to the site.
However, users can switch to another site and another business any time they
choose.
You can see that characteristics such as interactivity, navigation and database
integration set Web sites apart from other media that do not implement these strategies.
Current Web development direction

Web services
A group of XMLbased technologies
and open standards
that enable
computers with
various platforms
and software to
exchange data and
share functionality
over the Web.
The most recent trends in Web content have been toward increasingly up-to-date
information and ease of collaboration. An example of such technology that is currently
revolutionizing Web development is Web services. Web services technology is a group of
XML-based technologies that enable computers using different operating systems and
software to easily exchange information and share functionality over the Web using a
standard language. Development platforms currently supporting Web services include
Microsoft's .NET and Sun's Sun One.
The benefit of Web services to a Web developer is that the developer can use third-party
services on his or her own site or Web application without needing to know the details of
any service's functionality. The developer needs to know only necessary information for
connecting with the service. For example, a search engine may publish its Web services,
allowing subscribers to use its search technology. The search engine service does not
explain its search technology or functionality to users only the required information for
accessing it.
blog
A collection of
personal thoughts
posted on a public
Web site. Blogging is
the act of adding
entries to a blog.
Another example of recent Web content trends is Web logs, or blogs. A blog is a
chronologically organized personal Web journal. Many free or low-cost Web-based tools
enable people with very little technical ability to publish blogs. The result is that everyone
from teenagers to CEOs can and do use blogs to self-publish their thoughts on the
Web.
One of the greatest aspects of emerging technologies and trends such as XML, Web
services and blogs is that the World Wide Web community has agreed on them and has
enthusiastically adopted them. The result is that communication and collaboration on
the Web is currently moving forward as never before.
Tools and technology

graphical user
interface (GUI)
A program that
provides graphical
navigation with
menus and screen
icons.
NOTE:
The acronym GUI is
pronounced
"gooey."
For years, there has been much debate about whether or not to use specialized tools to
assist in the Web development process. Today's graphical user interface (GUI) Web
page-editing tools are good enough that the majority of Web designers see them as useful,
and even necessary, for Web development. When using tools to automate development
tasks, Web developers still need to understand the underlying technologies (including
Hypertext Markup Language [HTML]), but developers should still use the tools available
to help them do their jobs efficiently.
GUI site-development tools use a display format in which the file being edited
appears on the screen just as it will appear to the end user. These applications
are sometimes also called WYSIWYG (pronounced "whiz-ee-wig") tools, which is
an acronym for What You See Is What You Get.
This course will introduce you to two GUI Web development tools: Adobe Dreamweaver
and Microsoft Expression Web. In future lessons, you will explore these two tools and
consider the features that will maximize your organization's HTML development
efficiency. You will learn about the design options in both programs, as well as the
Version 1.1
NOTE:
It is important to
understand that a
basic knowledge of
X/HTML gives you a
great advantage in
the Web
development
market. If you have
no HTML skills, you
can learn X/HTML in
the CIW Site
Development
Foundations course.
If you need practice
or a refresher, you
can review the
basic tags and
page structure in
this course's
Optional Lab 1-1:
Practicing your
XHTML skills.
1-5
important features for site management and search engine optimization (SEO).
Expression Web and Dreamweaver are not the only GUI development tools available, and
they are not necessarily the best tools for every job. However, both are widely used, and
together they cover most of the spectrum of features available in the latest generation of
Web development tools.
This course sometimes refers to X/HTML to signify an interchangeable reference
to HTML and/or Extensible HTML (XHTML), the most current HTML standard.
Generally, many tools are used in unison for Web development; this course focuses on
the collaborative application aspect of Web design. For more advanced topics such as
images and animation, other applications will be used to facilitate rapid development.
Adobe Flash is another product that is increasing in popularity and functionality, and it
is also profiled in this course. Flash enables media-rich content to be delivered while also
conserving bandwidth, which is a valuable commodity to the Web designer.
Web Design Concepts
push technology
A Web delivery
format that allows
Web page content
to automatically
download to a
computer at userdefined intervals.
Web design has many similarities with print design. The Web, like printed media, was
originally designed for distributing text to be read widely by people.
OBJECTIVE
4.1.1: Multimedia
Web design
principles
Multimedia
NOTE:
Consider the
primary goal in Web
design defined
here. Can you think
of some examples
of Web sites you
have visited that
achieve or fall short
of this goal?
OBJECTIVE
2.2.5: Multimedia
purpose
interactivity
The ability for
software to respond
differently to the
user's actions; the
system's response is
directly
communicated to
the user.
OBJECTIVE
1.2.1: Needs and
usability vs. design
and aesthetics
As multimedia was introduced on the Web, many people began to make comparisons
between the Web and television. Push technology, in which information is sent to the
user automatically, was introduced as a way of making the Web more of a passive
medium. However, the comparison between the Web and television is still not accurate.
One of the most common misconceptions about Web design is that a good site must
dazzle the user with a multimedia experience, and that the content of the site is of
secondary importance.
As a Web designer, you want your site users to have a satisfying experience, but dazzling
them is not necessarily your goal. The primary goal in Web design is to give users what
they want, not what you think they want. This goal can be achieved with a complex
balance of well-planned design, high-quality content, and proper use of available media.
If multimedia makes sense and enhances the usability of a site, you should use it. If
multimedia does not enhance the user experience, or if it degrades the user experience by
creating an unnecessarily long download, then you should not use it.
Interactivity
Web design actually has much more in common with software interface design than
either print design or television.
The key difference between Web design and design for traditional media such as print or
television is interactivity. Web designers must be aware of the way that information is
presented on the screen, and also of the ease with which site visitors can use the site's
navigation and other interactive elements.
Ultimately, if you do not satisfy your Web users' needs or desires, they will find other sites
that will. The Web designer who thinks only from his or her own perspective, and not from
the users' perspective, will certainly find dissatisfied Web visitors, clients and customers.
Version 1.1
1-6
New Technologies
Soon after you learn the different tools available for designing Web sites, you will need to
evaluate those tools for their abilities to function at the next level. Both Microsoft
Expression Web and Adobe Dreamweaver implement Dynamic HTML (DHTML) functions
that will take advantage of available technology.
NOTE:
You can see how
some Web
developers apply
concepts of Web
design in Activity
1-1: Evaluating Web
design.
NOTE:
Knowledge of
X/HTML is a
prerequisite for this
course. However, if
you do not have
solid HTML skills and
you find Lab 1-1 too
difficult, you can
begin by reviewing
the basic XHTML
tags in Optional Lab
1-1: Practicing your
XHTML skills. Note
that the rsum file
you create in
Optional Lab 1-1
can be used in later
labs and optional
labs in this course.
This course will discuss other recent technologies as well, such as new and alternative
browsers, Cascading Style Sheets (CSS), Extensible Markup Language (XML), and the use
of JavaScript in your Web design for additional functionality. You will also learn about
the World Wide Web Consortium (W3C) advancement of the newest standards, and the
ways in which browser manufacturers contribute to development of new technologies.
Remember that you will use several tools to develop Web sites in this course. The goal of
this course is not to make you an expert user of these tools, but to give you enough
information about the key components of each tool that you can make educated decisions
about which tools will most benefit your organization's needs.
Evaluating Your XHTML Skills

In the following lab, you will test and evaluate your Extensible HTML (XHTML) skills by
creating a basic Web page similar to the example given. Suppose a prospective employer
wants to know about your XHTML coding skills. The site development job for which she is
hiring would require you to compare and use Web development tools. Although XHTML
knowledge is not required for this job, the employer feels that these skills could be
helpful. By creating a basic page such as this one, you can demonstrate to the employer
that you have the XHTML knowledge to more effectively evaluate and use Web
development tools.
Lab 1-1: Creating a basic Web page

OBJECTIVE
3.1.2: Basic X/HTML
code
In this lab, you will create a basic Web page to evaluate your XHTML skills. Solution code
for the example page is given at the end of the lab and included with the supplemental
files.
1.
NOTE:
Try to create this
entire XHTML page
before you look at
the solution code.
You will learn more
by guessing,
comparing and
correcting mistakes
than you will by
copying code.
Verify that you have created the C:\CIW\Web_Dsgn_Spec\LabFiles\ directory on

your computer, and that the LabFiles\ folder contains subfolders and files for
lessons in this course. If this directory does not exist, access the supplemental files
now, and extract the files for the Web Design Specialist course.
Note: Instructions for using the supplemental files are provided in the front matter
section of this book.
2.
Editor: Open a text editor such as Notepad, and write the XHTML code to create a
Web page document. In addition to the four basic structure tags and the
<!DOCTYPE> tag, use XHTML tags to create or modify the following elements on a
basic Web page:
Table
Font
Version 1.1
NOTE:
The four basic
structure tags used
to create an XHTML
document are
<html>, <head>,
<title> and <body>.
3.
1-7
Hyperlink (using HTTP as the protocol)
Image
Open Windows Explorer and navigate to the directory C:\CIW\Web_Dsgn_Spec

\LabFiles\Lesson01\Lab_1-1\. To re-create the page shown, the following images
are provided with the supplemental files in the Lab_1-1 folder:
ciw-logo.gif
arrow.gif
The following colors were used to create the sample Web page:
4.
Blue (#164470)
White (#FFFFFF)
Use your creativity to modify your page. Your page's basic structure should resemble
Figure 1-1. Try to re-create the page without looking at the code in the following step.
Refer to that code only as necessary. Save your file as CIWskills.htm to the C:\CIW\
Web_Dsgn_Spec\LabFiles\Lesson01\Lab_1-1\ folder.
Figure 1-1: Basic Web page structure
5.
Notepad: To compare your work, open the file CIWskills(completed).htm from the
C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson01\Lab_1-1\ folder of the supplemental
files. Compare the code in this file to the code you wrote on your own. This file
includes the following XHTML code, which was used to create the page shown in the
preceding figure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Version 1.1
1-8
<head>
<title> CIW Certification </title>
</head>
<body bgcolor="#ffffff">
<a href="http://www.ciwcertified.com"><img src="ciw-logo.gif" alt="CIW logo"
width="231" height="84" border="0"/></a>
<p>
<span style="font-size:14pt">
The CIW certification program</span>
offers individuals the ability to benchmark and improve their Internet
technology skills while earning certifications that will enhance a career. CIW
courses and curriculum offer the following advantages over other training
options:
</p>
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center"><img src="arrow.gif" alt="arrow"/></td>
<td width="80%"><b>Job role</b>-oriented curriculum</td>
</tr>
<tr>
<td width="80%">Industry-wide <b>recognition</b></td>
</tr>
<tr>
<td width="80%"><b>Hands-on</b> learning </td>
</tr>
<tr>
<td width="80%"><b>Real-world</b> scenarios & applications</td>
</tr>
</table>
<p>
CIW offers Associate, Specialist and Professional certifications and training
in the following job-role tracks:
</p>
<table width="100%"
border="0" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#164470" align="center">
<td><b><span style="color:#ffffff">
CIW Web Foundations
</span></b></td>
CIW Web Designer
</span></b></td>
CIW Web Development
</span></b></td>
CIW Web Security
</span></b></td>
</tr>
</table>
<p>
Visit <a href="http://www.ciwcertified.com">www.CIWcertified.com</a> to learn
how you can get CIW certified!
</p>
</body>
</html>
6.
Browser: Open this file in your browser. It should resemble the page shown in the
preceding figure. How does it compare to the page for which you wrote your own
code?
Version 1.1
1-9
Case Study
Taming of the Shoe

Jose works as a contract Web site developer. He accepted a job developing an
informational site for a small, independent shoe-repair business. His employer provided
the written content he wanted on the site and a few photos of the store, and left the rest
of the design up to Jose.
As he was developing the site, Jose worried that his design would be very bland because
he had so little content to work with. So he enhanced the site with a lot of multimedia,
flashy effects, artistic enhancements of the photos, customer surveys, and humorous
captions and quotations. Jose was pleased with the design because he felt it would dazzle
the site users, increase interactivity, and make the shoe-repair business seem more
interesting.
However, Jose's employer was not happy with the design. He asked Jose to redesign the
site; otherwise, he said, he would not pay the contract.
*
Consider this scenario and answer the following questions.
What problems do you see with Jose's design for this site?
Why do think Jose's employer did not like Jose's design for the site?
How do you think the site's intended audience would respond to the site Jose
designed?
Are there any aspects of the design that Jose, as a Web development professional,
should try to persuade the employer to keep?
Version 1.1
1-10
Lesson Summary
Application project
This lesson defined the primary goal in Web design as giving users what they want.
Consider a Web site that you enjoy using. How does this site give you what you want? For
what purpose do you visit the site? What aspects of the site make you return?
Skills review
In this lesson, you were introduced to the concepts of Web technology and the tools used
to implement it. You also briefly considered new technologies and strategies involved in
Web design. Finally, you evaluated your XHTML skills by creating a basic Web page.
Now that you have completed this lesson, you should be able to:
9
1.2.1: Balance customer needs and usability with site design principles and
aesthetics (includes distinguishing site design customer from site audience).
2.2.1: Identify Web site characteristics and strategies to enable them, including
interactivity, navigation, database integration.
2.2.5: Identify purpose and usefulness of multimedia.
3.1.2: Write X/HTML code to create a static Web page with text and images.
4.1.1: Identify multimedia Web design principles, and choose appropriate multimedia
technologies for a site based on usability criteria.
Version 1.1
1-11
Lesson 1 Review
1.
In relation to Web site design, what is the purpose of tools and technologies?
2.
Describe briefly why the Internet is transactional in nature, as opposed to media

such as magazines or television.
3.
The Web site designer should design to provide users with a satisfying experience
when they visit the site. What is the primary goal of this focus?
4.
What is the key difference between Web design and print or television design?
5.
Why is it important for Web designers to know XHTML?
Version 1.1
1-12
Lesson 1
Supplemental Material
This section is a supplement containing additional tasks for you to complete in
conjunction with the lesson. These elements are:
Activities
Pen-and-paper activities to review lesson concepts or terms.
Optional Labs
Computer-based labs to provide additional practice.
Lesson Quiz
Multiple-choice test to assess knowledge of lesson material.
Version 1.1
1-13
Activity 1-1: Evaluating Web design

In this activity, you will study some Web pages (shown in screen captures) to evaluate
how their developers applied concepts of Web design. After studying each screen capture,
write your answers to the accompanying questions in the spaces provided. The openended questions posed in this activity are intended to promote thoughtful discussion.
Answers will vary.
1.
Study the Animal Planet home page, shown in Figure A1-1.
Figure A1-1: Animal Planet home page
2.
Does the design of this Web page convey an appropriate message to users? What
message do you think it conveys? What elements contribute to that message?
3.
This lesson defined the primary goal in Web design as giving users what they want,
instead of what the developer thinks they want. Do you think this page achieves that
goal? Why or why not?
4.
Study the Barnes & Noble home page, shown in Figure A1-2.
Version 1.1
1-14
Figure A1-2: Barnes & Noble home page
5.
In what ways does this page present a personalized one-to-one medium instead of a
passive, broadcast medium?
6.
What components on this page, if any, indicate the presence of data-driven content?
7.
Study the House of Blues home page, shown in Figure A1-3.
Version 1.1
1-15
Figure A1-3: House of Blues home page
8.
Does the design of this Web page convey an appropriate message to users? What
message do you think it conveys? What elements contribute to that message?
9.
In what ways does this page present a personalized one-to-one medium instead of a
passive, broadcast medium?
10. This lesson defined the primary goal in Web design as giving users what they want,
instead of what the developer thinks they want. Do you think this page achieves that
goal? Why or why not?
Effective Web design requires a complex balance of well-planned design, quality content,
and proper use of available media. Giving users what they want can be a straightforward
task or a guessing game, depending on the purpose of the Web site. Remember to take a
user's perspective when you are developing Web sites.
Version 1.1
1-16
Optional Lab 1-1: Practicing your XHTML skills

In this optional lab, you will practice your XHTML skills by creating a basic Web page.
This lab offers suggested examples of content, but you can substitute any content you
choose. See the course appendixes for a complete list of XHTML tags and their functions.
Note: The example content is located in the supplemental material in the files Resume.txt
(without XHTML tags) and Resume.htm (with XHTML tags). The steps in this lab refer to a
file called MyResume.htm, which you will create yourself. However, the example code and
figures use the example from Resume.htm.
1.
Verify that you have created the C:\CIW\Web_Dsgn_Spec\LabFiles\ directory on

your computer, and that the LabFiles\ folder contains subfolders and student files
for lessons in this course. If this directory does not exist, access the supplemental
files now, and extract the files for the Web Design Specialist course.
Note: Instructions for using the supplemental files are provided in the front matter
section of this book.
NOTE:
Later labs and
optional labs in this
course will use the
MyResume.htm file
that you create in
this lab. However, if
you choose not to
create your own
content, a copy of
the completed
example file
Resume.htm is
available with the
supplemental files.
NOTE:
If you choose not to
create your own
content, the text
(without XHTML
tags) given in this
example is provided
with the
supplemental files in
the file Resume.txt.
The supplemental
file Resume.htm
includes the XHTML
tags for the finished
file shown in this lab.
2.
Notepad (or other text editor): Open a new text file and save it as MyResume.htm
to the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson01\OptLab_1-1\ folder.
3.
Notepad: Create a basic Web page structure using the <!DOCTYPE>, <html>,
<head>, <title> and <body> tags in the order shown. Be sure to give your page an
appropriate descriptive title.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Resume </title>
</head>
<body>
</body>
</html>
4.
Notepad: Add some opening text between the <body> tags. The example shows
entries for a rsum, but you can substitute any text you prefer.
<body>
Samson P. Lang
255 Clawhill Road
Marinita, CA 92629
(714) 555-6055
Objective:
To contribute my Web design skills to an entrepreneurial organization
Skills:
Knowledge of Web design concepts
Site development and management skills
Knowledge of basic Web technology concepts
Experience with Web applications and tools
Knowledge of advanced Web technology concepts
</body>
Version 1.1
1-17
5.
Notepad: Save MyResume.htm.
6.
Browser: Open MyResume.htm in your browser. Your page formatting should

resemble Figure OL1-1. Note that although you used returns in your text file to
separate lines of content, you will need to add XHTML formatting tags to make
content formatting appear on your Web page.
Figure OL1-1: Basic Web page content
7.
Notepad: Open MyResume.htm in your text editor. Add XHTML paragraph <p> and
line break <br> tags as shown to separate lines of text. Add XHTML heading tags to
change to a larger (or smaller) bold serif font (use heading levels one through three to
enlarge text).
Note: Remember that the XHTML specification requires you to close all tags properly,
using either a pair of container tags or a single closed tag. Thus, the <h#> and <p>
elements always require separate closing </h#> and </p> tags, and the <br> element
should always be written as a closed stand-alone <br/> tag.
<body>
<h1>
Samson P. Lang
</h1>
255 Clawhill Road
<br/>
Marinita, CA 92629
<br/>
(714) 555-6055
<p>
Objective:
</p>
<p>
Skills:
</p>
Knowledge of Web design concepts
Version 1.1
1-18
<br/>
Site development and management skills
<br/>
Knowledge of basic Web technology concepts
<br/>
Experience with Web applications and tools
<br/>
Knowledge of advanced Web technology concepts
</body>
8.
Notepad: Save MyResume.htm.
9.
Browser: Open MyResume.htm in your browser. Your page formatting should

resemble Figure OL1-2.
Figure OL1-2: Basic Web page with <h1>, <p> and <br> tags
10. Notepad: Open MyResume.htm in your text editor. Change the formatting on the
Objective and Skills lines from paragraph style to heading-level-two style. Use the
XHTML <div> tag to center the first four lines of text. Use the unordered list <ul> and
list item <li> tags to change the Skills section items to a bulleted (unordered) list.
<body>
<div align="center">
<h1>
Samson P. Lang
</h1>
255 Clawhill Road
<br/>
Marinita, CA 92629
<br/>
(714) 555-6055
</div>
<p>
<h2>
Version 1.1
1-19
Objective:
</h2>
</p>
<p>
<h2>
Skills:
</h2>
</p>
<ul>
<li> Knowledge of Web design concepts </li>
<br/>
<li> Site development and management skills </li>
<br/>
<li> Knowledge of basic Web technology concepts </li>
<br/>
<li> Experience with Web applications and tools </li>
<br>
<li> Knowledge of advanced Web technology concepts </li>
</ul>
</body>
11. Notepad: Save MyResume.htm.

12. Browser: Open MyResume.htm in your browser. Your page formatting should
Figure OL1-3: Basic Web page with centered heading and list
13. Notepad: Open MyResume.htm in your text editor. In the opening <body> tag,
change the background color of your page to black, and change the color of your text
to white. Use the <hr> tag to add a horizontal rule that extends across three-quarters
of the screen under the name and address section of your page.
Version 1.1
1-20
<body bgcolor="#000000" text="#ffffff">

<h1>
Samson P. Lang
</h1>
255 Clawhill Road
<br/>
Marinita, CA 92629
<br/>
(714) 555-6055
</div>
<hr width="75%"/>
<h2>
Objective:
</h2>
<h2>
Skills:
</h2>
<ul>
</ul>
</body>

Figure OL1-4: Basic Web page with horizontal rule, colored text and background
Version 1.1
1-21
16. Notepad: Open MyResume.htm in your text editor. Change the background color of
your page to gray. Insert an image at the bottom of the page using the <img> tag, and
be sure to add an alternative text description of the image. Use the <div> tag to
center the image on the page. Make the image a hyperlink to a Web page using the
anchor <a> tag. (You can add any image and link to any page you like; the example
image file used here is available in the supplemental files.) Be sure that any image
you reference resides in the same location as your Web page file.
Note: When using multiple tags on a section of text, remember to use good coding
practice by closing tags in the order that you opened them.
<body bgcolor="gray" text="#ffffff">
<h1>
Samson P. Lang
</h1>
255 Clawhill Road
<br/>
Marinita, CA 92629
<br/>
(714) 555-6055
</div>
<hr width="75%"/>
<h2>
Objective:
</h2>
<h2>
Skills:
</h2>
<ul>
</ul>
<a href="http://www.ciwcertified.com">
<img src="ciw-logo.gif" border="0" alt="CIW logo"/>
</a>
</div>
</body>

resemble Figure OL1-5. Verify that your image acts as a hyperlink by passing your
mouse pointer over the image: Your mouse pointer should change into a pointing
hand when it passes over a link, and the status bar at the bottom of your browser
window should state the URL to which the link points. Check that your hyperlink is
functional by clicking the image.
Version 1.1
1-22
Figure OL1-5: Basic Web page with image as hyperlink
This optional lab reviewed basic XHTML tags and page creation. Remember that a basic
knowledge of XHTML gives you a great advantage in the Web development market. If you
completed this optional lab as an introduction or refresher before attempting Lab 1-1,
you can begin Lab 1-1 now for a more challenging exercise that includes XHTML tables.
Version 1.1
1-23
Lesson 1 Quiz
1.
Which technology trend in Web development can be defined as a group of XMLbased technologies that enable computers using different operating systems and
software to easily exchange information and share functionality over the Web?
a.
b.
c.
d.
2.
Web design is as important as the site content because Web design helps to
convey:
a.
b.
c.
d.
3.
Passive
Broadcast
One-to-one
Electronic print
Advances in technology have provided sophisticated tools that Web designers can
use to create and manage Web sites. Why is it still useful to know HTML?
a.
b.
c.
d.
5.
reasons to buy the company's product.

the appropriate message to site visitors.
a sample of the designer's technological skills.
proof of the company's professional standards.
The Internet is which type of medium?

a.
b.
c.
d.
4.
Blogs
Multimedia
Web services
Web site management applications
Because
Because
Because
Because
GUI tools cannot write HTML code

it is easier and faster to write your own HTML code
HTML knowledge helps you use GUI tools more effectively
you need to know HTML in order to publish blogs
Which choice lists the element(s) you must include in a proper XHTML
document?
a.
b.
c.
d.
An image with the hyperlink tag using HTTP as the protocol

The four basic structure tags and <!DOCTYPE>
Both textual content and graphical images
Multimedia that will dazzle users and provide interactivity
Version 1.1
1-24
Version 1.1

Web Design Specialist Lesson1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design Specialist Lesson1

Uploaded by

Copyright:

Available Formats

Web Design Specialist

(Adobe CS6 Web Edition)