1 Web Design Specialist (Adobe CS6 Web Edition) Self-Study Guide Volume 1 Web Design Series CCSSM-CDWDSG-PR-1305 version 1.1 rd05 13
3 Web Design Specialist (Adobe CS6 Web Edition) Self-Study Guide Volume 1
4 President/Chief Certification Architect James Stanger, Ph.D. Vice President, Operations Senior Content Developer Managing Editor Editor Project Manager/Publisher Todd Hopkins Kenneth A. Kozakis Susan M. Lane Sarah Skodak Tina Strong Customer Service Certification Partners, LLC 1230 W. Washington St., Ste. 201 Tempe, AZ (602) Copyright 2013, All rights reserved.
5 Web Design Specialist (Adobe CS6 Web Edition) 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 Copyright 2013 by Certification Partners, LLC All Rights Reserved ISBN:
7 v 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 Pre-Assessment Questions Web Technology The Nature of the Web Web Design Concepts New Technologies Evaluating Your XHTML Skills Case Study Lesson 1 Review Lesson 1 Supplemental Material Lesson 2: Web Development Teams Pre-Assessment Questions Web Teams and Tasks Web Project Management Web Project Collaboration Your Web Design Portfolio Your Web Design Business Case Study Lesson 2 Review Lesson 2 Supplemental Material Lesson 3: Web Project Management Fundamentals Pre-Assessment Questions Web Project Management Phases Project Documentation and Communication Case Study Lesson 3 Review Lesson 3 Supplemental Material Lesson 4: Web Site Development Process Pre-Assessment Questions Bottom-Up Approach to Web Development Understanding the Business Process Defining a Web Site Vision From Vision to Strategy Web Site Specifications The Metaphor Mystery Meat Navigation The Mindmapping Process Creating a Web Site Wireframe Creating a Web Page Wireframe Case Study Lesson 4 Review Lesson 4 Supplemental Material Lesson 5: Web Page Layout and Elements Pre-Assessment Questions Web Users and Site Design Effective Web Page Layout Branding and the Web Color and Web Design Fonts and Web Design Case Study
8 vi Lesson 5 Review Lesson 5 Supplemental Material Lesson 6: Web Site Usability and Accessibility Pre-Assessment Questions Audience Usability and Accessibility Defining Usability Web Site Usability Testing Web Page Accessibility Case Study Lesson 6 Review Lesson 6 Supplemental Material Lesson 7: Browsers Pre-Assessment Questions Browsers and Navigation Browsers and Design Considerations Browser Adoption Major, Minor and Alternative Browsers Creating Aliases with TinyURL Utilizing CAPTCHA Case Study Lesson 7 Review Lesson 7 Supplemental Material Lesson 8: Navigation Concepts Pre-Assessment Questions Why Is Navigation Critical? Primary and Secondary Navigation Navigation Hierarchy Site Structure, URLs and File Names Familiar Navigation Conventions Guided Navigation Navigation Action Plan Case Study Lesson 8 Review Lesson 8 Supplemental Material Lesson 9: Web Graphics Pre-Assessment Questions Web Site Images Digital Imaging Concepts Raster vs. Vector Graphics Graphics Applications Image File Formats Creating and Optimizing Images Essential Graphic Design Concepts Case Study Lesson 9 Review Lesson 9 Supplemental Material Lesson 10: Multimedia and the Web Pre-Assessment Questions Multimedia and Web Sites Current Multimedia Capabilities Animation and the Web Audio and the Web Video and the Web Goals of a Multimedia Site Multimedia Site Design Basics User Interaction Selecting Multimedia Elements Case Study
9 vii Lesson 10 Review Lesson 10 Supplemental Material Lesson 11: Ethical and Legal Issues in Web Development Pre-Assessment Questions Ethics and Law in Web Development Ethical Issues and the Web Legal Issues and the Web Case Study Lesson 11 Review Lesson 11 Supplemental Material Lesson 12: HTML and the Evolution of Markup Pre-Assessment Questions Function of Markup Languages SGML: A Short History What Is HTML? HTML Goals The HTML Standard HTML 1.0 and HTML 3.0 and HTML 4.0 and Separating Format from Structure in HTML Extensible HTML (XHTML) Reference Sites for Web Developers Case Study Lesson 12 Review Lesson 12 Supplemental Material Lesson 13: XML and XHTML Pre-Assessment Questions What Is XML? XML Goals What Is an XML Document? Rules for Well-Formed XML HTML Transition to XML What Is XHTML? Applying a Single Standard Consistently Case Study Lesson 13 Review Lesson 13 Supplemental Material Lesson 14: Web Page Structure Tables and Framesets Pre-Assessment Questions Creating Structure with X/HTML Tables Diagramming a Basic X/HTML Table Borderless Web Page Structure X/HTML Frames and Framesets The X/HTML <frameset> Tag The X/HTML <frame> Tag Targeting Hyperlinks in X/HTML The X/HTML <noframes> Tag Case Study Lesson 14 Review Lesson 14 Supplemental Material Lesson 15: Cascading Style Sheets Pre-Assessment Questions Style Sheets Cascading Style Sheets Defining and Using Styles Changeable Style Attributes Style Guides
10 viii Changes from CSS1 to CSS Page Layout with CSS The CSS Box Model Document Flow and Positioning CSS Positioning Schemes Case Study Lesson 15 Review Lesson 15 Supplemental Material Lesson 16: Site Content and Metadata Pre-Assessment Questions Written Web Site Content Internet Marketing and Search Engine Optimization (SEO) Metadata The <meta> Tag and Document Identification The <meta> Tag and Search Engines The <meta> Tag and Delayed File Change Case Study Lesson 16 Review Lesson 16 Supplemental Material Lesson 17: Site Development with Microsoft Expression Web 4 Introduction Pre-Assessment Questions The Transition from FrontPage Microsoft Expression Web Expression Web Views Expression Web Menus and Toolbars Opening Web Sites and Files in Expression Web Developing W3C-Compliant Code with Expression Web Case Study Lesson 17 Review Lesson 17 Supplemental Material Lesson 18: Site Development with Expression Web 4 Basic Features Pre-Assessment Questions Page Layout Options in Expression Web Creating a New Web Site Using Expression Web Page Layout with CSS Inserting Images with Expression Web Creating Hyperlinks with Expression Web Creating Image Maps with Expression Web Creating Navigation Bars Using CSS Expression Web's Dynamic Web Templates Pasting Formatted Text with Expression Web Pasting X/HTML content with Expression Web Case Study Lesson 18 Review Lesson 18 Supplemental Material Lesson 19: Site Development with Expression Web 4 Advanced Features Pre-Assessment Questions Expression Web Styles Adding Interactivity to Web Pages Creating Web Forms with Expression Web Connecting to Databases Expression Web Reports Options for Replacing Old Webbots Case Study Lesson 19 Review Lesson 19 Supplemental Material Index... Index-1
11 ix List of Labs Lab 1-1: Creating a basic Web page Lab 2-1: Creating a Web portfolio Lab 3-1: Evaluating project-tracking software Lab 4-1: Creating a vision statement for a Web site Lab 4-2: Developing tactics to support a Web site strategy Lab 4-3: Developing the specifications for a Web site Lab 4-4: Mindmapping a Web site Lab 6-1: Identifying common accessibility issues Lab 7-1: Investigating Google Chrome Lab 7-2: Testing a site in multiple browsers Lab 7-3: Creating an alias with TinyURL Lab 7-4: Adding a CAPTCHA to a Web page Lab 9-1: Adding tags to a photo Lab 9-2: Optimizing images for Web use Lab 11-1: Discovering copyright infringement Lab 14-1: Creating a simple XHTML table Lab 14-2: Creating a simple Web page structure Lab 14-3: Creating a rows frameset in XHTML Lab 14-4: Creating a columns frameset in XHTML Lab 14-5: Hyperlinking frame content in XHTML Lab 14-6: Creating targeted hyperlinks in XHTML Lab 14-7: Targeting links to the top frame in XHTML Lab 14-8: Combining columns and rows in nested framesets Lab 14-9: Combining frames in XHTML Lab 14-10: Adding attributes to the frameset Lab 15-1: Creating and using embedded styles Lab 15-2: Applying inline styles Lab 15-3: Linking to an external style sheet Lab 15-4: Using CSS class selectors Lab 15-5: Creating a basic two-column layout with CSS Lab 15-6: Creating a three-column layout with CSS Lab 15-7: Converting a table-based page layout to CSS positioning Lab 16-1: Using the <meta> tag to refresh a page automatically Lab 17-1: Launching Expression Web Lab 17-2: Validating code with Expression Web Lab 18-1: Creating a new Web site with Expression Web Lab 18-2: Preparing to lay out the home page with Expression Web Lab 18-3: Nesting divisions with Expression Web Lab 18-4: Inserting images with Expression Web Lab 18-5: Modifying division properties with Expression Web Lab 18-6: Creating hyperlinks with Expression Web Lab 18-7: Creating an image map with Expression Web Lab 18-8: Creating navigation bars using CSS Lab 18-9: Adding and styling links using CSS Lab 18-10: Creating a dynamic Web template with Expression Web Lab 18-11: Adding supporting Web pages with Expression Web Lab 18-12: Detaching pages from a dynamic Web template with Expression Web Lab 18-13: Pasting formatted text with Expression Web Lab 18-14: Pasting X/HTML data into an Expression Web document Lab 19-1: Working with external style sheets in Expression Web Lab 19-2: Creating embedded styles with Expression Web Lab 19-3: Using inline styles in Expression Web Lab 19-4: Attaching multiple style sheets with Expression Web Lab 19-5: Adding behaviors with Expression Web Lab 19-6: Creating Web forms with Expression Web Lab 19-7: Connecting to an Access database Lab 19-8: Using Expression Web reports
12 x List of Activities Activity 1-1: Evaluating Web design Activity 2-1: Developing a simple Web design methodology Activity 3-1: Managing your time and resources Activity 4-1: Creating a vision statement for a personal goal Activity 5-1: Identifying Web page layout elements Activity 5-2: Identifying numeric color formats Activity 6-1: Conducting a Web site usability test Activity 7-1: Reviewing browser terminology Activity 8-1: Identifying Web site structure Activity 9-1: Identifying graphic formats and files Activity 10-1: Identifying multimedia elements Activity 11-1: Reviewing Web-related legal terms Activity 12-1: Identifying HTML terms Activity 12-2: Identifying HTML issues Activity 13-1: Creating a well-formed XML document Activity 14-1: Reviewing X/HTML table tags Activity 15-1: Using inheritance with styles Activity 16-1: Developing Web site metadata List of Optional Labs Optional Lab 1-1: Practicing your XHTML skills Optional Lab 2-1: Using a Wiki site Optional Lab 3-1: Researching project management principles Optional Lab 4-1: Analyzing the competition's strategy and tactics Optional Lab 5-1: Using Web page colors and fonts to convey a message Optional Lab 6-1: Evaluating a Web site's usability Optional Lab 7-1: Exploring various browsers Optional Lab 8-1: Identifying navigation elements Optional Lab 9-1: Comparing image file formats Optional Lab 10-1: Evaluating multimedia site design principles Optional Lab 11-1: Exploring the public domain Optional Lab 12-1: Learning about HTML standards Optional Lab 13-1: Examining XML documents Optional Lab 14-1: Adding the <noframes> tag Optional Lab 15-1: Validating your style sheets Optional Lab 16-1: Using Web site metadata Optional Lab 17-1: Exploring Expression Web sites Optional Lab 18-1: Modifying Expression Web-generated code Optional Lab 19-1: Observing the effects of multiple style sheets in Expression Web Optional Lab 19-2: Modifying a manually coded X/HTML page in Expression Web List of Quizzes Lesson 1 Quiz Lesson 2 Quiz Lesson 3 Quiz Lesson 4 Quiz Lesson 5 Quiz Lesson 6 Quiz Lesson 7 Quiz Lesson 8 Quiz Lesson 9 Quiz Lesson 10 Quiz Lesson 11 Quiz Lesson 12 Quiz Lesson 13 Quiz Lesson 14 Quiz Lesson 15 Quiz
13 xi Lesson 16 Quiz Lesson 17 Quiz Lesson 18 Quiz Lesson 19 Quiz List of Tables Table 5-1: Page size and download time Table 5-2: RGB and hexadecimal color value examples Table 5-3: Browser-safe color palette Table 5-4: Browser-safe color intensities Table 9-1: Image file formats Table 10-1: Audio file types Table 15-1: Changeable style attributes Table 15-2: CSS2 features Table 16-1: Values of <meta> tag http-equiv and content attributes Table 18-1: Hyperlink states Table 18-2: Hyperlink selectors Table 18-3: Paste options
15 xiii Series CIW Web Design Specialist is the first course in the CIW Web Design Professional series: Web Design Specialist 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 or VUE at For more information about CIW exams, visit 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
16 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 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 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) or 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:
17 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.
18 xvi Hardware Specifications Processor L2 cache Hard disk Minimum Requirements Intel Pentium 4 or AMD Athlon 64 processor 256 KB 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 DVD-ROM drive Network interface card (NIC) Sound card/speakers Video adapter 2GB of RAM (3GB recommended) for 32 bit; 2GB of RAM (8GB recommended) for 64 bit 32X 10BaseT or 100BaseTX (10 or 100 Mbps) (Optional) DirectX 9 graphics device with Windows Display Driver Model (WDDM) 1.0 or higher driver Monitor 1280x800 display required (1280x1024 recommended) with 16- bit 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): o Adobe Dreamweaver CS6 * o Adobe Fireworks CS6 * o Adobe Flash Professional CS6 * Adobe Creative Suite 6 (CS6) requires the following: o Java Runtime Environment 1.6 (included) * o QuickTime software (required for HTML5 media playback and multimedia features) * o 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.
19 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.
20 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 ( 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 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 You will receive an 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
21 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 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.
22 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.
23 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) : Identify Web site characteristics and strategies to enable them, including interactivity, navigation, database integration : Identify purpose and usefulness of multimedia : Write X/HTML code to create a static Web page with text and images : Identify multimedia Web design principles, and choose appropriate multimedia technologies for a site based on usability criteria.
24 1-2 Web Design Specialist Pre-Assessment Questions 1. By its nature, the Internet is: a. transactional. b. linear. c. passive. d. self-reflective. 2. Aside from customer or design requirements, you should only consider using multimedia on a site: a. when it makes the site look more impressive to other developers. b. when it increases download time only for certain pages. c. when it is Adobe Flash or a related SWF technology. d. when it has either no effect or a positive effect on the usability of the site. 3. What does the acronym GUI stand for, and what does it mean?
25 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-
26 1-4 Web Design Specialist 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. 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. blog A collection of personal thoughts posted on a public Web site. Blogging is the act of adding entries to a blog. Current Web development direction 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. 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. graphical user interface (GUI) A program that provides graphical navigation with menus and screen icons. NOTE: The acronym GUI is pronounced "gooey." Tools and technology 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
27 Lesson 1: Overview of Web Design Concepts 1-5 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. push technology A Web delivery format that allows Web page content to automatically download to a computer at userdefined intervals. OBJECTIVE 4.1.1: Multimedia Web design principles 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 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 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. 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. Multimedia 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.
Web Design Specialist (Adobe CS6 Web Edition) Student Guide Volume 1 Web Design Series CCL05-CDWDSG-PR-1211 version 1.1 rd110712 Web Design Specialist (Adobe CS6 Web Edition) Student Guide Volume 1 President/Chief
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
UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing
CIW Web Design Specialist Description The Web Design Specialist course (formerly titled Design Methodology and Technology) teaches you how to design and publish Web sites. General topics include Web Site
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
Your Course Information CIW Web Design Specialist CIW 1D0-520 Examination Swaledale 4 Coaley Lane Houghton-le-Spring Tyne & Wear DH4 4SQ The CIW Web Design Specialist Course is for students who want to
Site Development Associate Self-Study Guide Web Foundations Series CCSSM-CF2SDF-PR-1208 version 2.0 rd082712 Site Development Associate Self-Study Guide President/Chief Certification Architect James Stanger,
Web Foundations Series Internet Business Associate Internet Business Associate prepares students to work effectively in today's business environment. In this course, you will learn about the tasks involved
Site Development Associate Academic Student Guide Web Foundations Series ECL02-CFSDFN-PR-1208 version 2.0 rd072212 Site Development Associate Academic Student Guide President/Chief Certification Architect
Curriculum Map for Web Design SEPTEMBER Targeted NJ Core Curriculum Content Standards: Design develop, test, implement, update, and evaluate web solutions Technology Use, Media Literacy, Responsible Use
WEB DESIGN STATEMENT OF PURPOSE This course is intended for the student interested in learning how to create web pages for the World Wide Web. Instruction on how to program using the HTML language is provided.
Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design Series Instructor Guide CCN02-CDHTCS-CK-1405 version 1.0 rd042214 Advanced HTML5 and CSS3 Specialist Instructor Guide Chief Executive Officer
10 IT Academy Lesson Plan Microsoft Sharepoint Turn potential into success Microsoft Office SharePoint 2010: Lesson Plans Introduction Preparing to teach courses on Microsoft SharePoint 2010 for the first
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
Accessing Websites Mac/PC Compatibility: QuickStart Guide for Business 2 Accessing Websites QuickStart Guide for Business The Basics People use the web for research, entertainment, and business. And it
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
JOB READY ASSESSMENT BLUEPRINT WEB DESIGN - PILOT Test Code: 3750 Version: 01 Specific Competencies and Skills Tested in this Assessment: Internet Basics Describe the process of information exchange between
Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related
Web Design and Development Program (WDD) Course Descriptions TI 0550 Fundamentals of Information Systems Technology: This course is a survey of computer technologies. This course may include computer history,
Trend Micro Incorporated reserves the right to make changes to this document and to the products described herein without notice. Before installing and using the product, please review the readme files,
Online Master of Science in Information Technology Degree Program User s Guide for Students Copyright 2006, Bisk Education, Inc., and Florida Tech. All rights reserved. i Online User s Guide for Students
BusinessObjects Enterprise InfoView User's Guide BusinessObjects Enterprise XI 3.1 Copyright 2009 SAP BusinessObjects. All rights reserved. SAP BusinessObjects and its logos, BusinessObjects, Crystal Reports,
Adobe Flash Catalyst CS5.5 Create expressive interfaces and interactive content without writing code Use a new efficient workflow to collaborate intelligently and roundtrip files with developers who use
Trend Micro Incorporated reserves the right to make changes to this document and to the products described herein without notice. Before installing and using the software, please review the readme files,
Internet Business Foundations: Self-Study Guide CIW v5 Foundations Series CCSSM-CF2IBF-PR-909 version 2.0 rd082609 Internet Business Foundations: Self-Study Guide President James Stanger, Ph.D. Vice President,
Getting Started with Microsoft Office Live Meeting Published October 2007 Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless
Dreamweaver Domain 2: Planning Site Design and Page Layout Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Identify best practices for designing
Course Description Web Design Foundations is a course that prepares students with work-related web design skills for advancement into postsecondary education and industry. The course is intended to develop
NDA-30141 ISSUE 1 STOCK # 200893 CallCenterWorX-Enterprise IMX MAT Quick Reference Guide MAY, 2000 NEC America, Inc. LIABILITY DISCLAIMER NEC America, Inc. reserves the right to change the specifications,
COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA ADOBE DREAMWEAVER AUTHORING TOOL DTM 3612 SEMESTER 1 SESI 2010/2011 DTM 3612 ADOBE DREAMWEAVER AUTHORING
Unit (Domain): Part I: Evaluating Current Websites Part II: Creating Web Pages Using Google Sites, Docs and Forms Part III: Using Animation Media for the Web Essential Question(s): How does the World Wide
CompuScholar, Inc. Alignment to South Carolina Web Design and Development I Standards South Carolina Course Details: Course Name: Web Design and Development I a.k.a. Fundamentals of Web Design and Development
Getting Started with Microsoft Office Live Meeting Published October 2007 Last Update: August 2009 Information in this document, including URL and other Internet Web site references, is subject to change
www.novell.com/documentation Advanced User Guide Vibe 4.0 March 2015 Legal Notices Novell, Inc., makes no representations or warranties with respect to the contents or use of this documentation, and specifically
Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design Series Student Guide CCL02-CDHTCS-CK-1405 version 1.0 rd042214 Advanced HTML5 and CSS3 Specialist Student Guide Chief Executive Officer Barry
Web Design Course Outline I II 1 Course Content 5 5 Student Evaluation Employment Opportunities 2 XHTML 10 10 Creating an HTML Document Formatting Text with HTML Adding Graphics with Multimedia Using forms
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * email@example.com Information Technology Group  Institute
38 Essential Website Redesign Terms You Need to Know Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you re getting ready
Job Ready Assessment Blueprint Web Design Test Code: 2750 / Version: 01 Copyright 2011. All Rights Reserved. General Assessment Information Blueprint Contents General Assessment Information Written Assessment
Trend Micro Incorporated reserves the right to make changes to this document and to the products described herein without notice. Before installing and using the product, please review the readme files,
Information Management & Design Course Descriptions Contact Drew Hunt at Andrew.firstname.lastname@example.org for more information IMD 100 Introduction to Information Systems (3) Essential computer concepts and terminology
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
Adobe Training Services Exam Guide ACE: Dreamweaver CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation
UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series email@example.com Revised 4/28/2014 CONTENTS The eclps Overview... 3 Objectives... 3 Adding the Syllabus or Lessons Tool to
SC-T35/SC-T45/SC-T46/SC-T47 ViewSonic Device Manager User Guide Copyright and Trademark Statements 2014 ViewSonic Computer Corp. All rights reserved. This document contains proprietary information that
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Using ADOBE CONTRIBUTE CS5 Legal notices Legal notices For legal notices, see http://help.adobe.com/en_us/legalnotices/index.html. iii Contents Chapter 1: What s new Chapter 2: Setting up Contribute The
Information Technology, Certified Internet Webmaster & Web Design Making home learning easy... www.ukdlp.com Information Technology, CIW & Web Design Studying For Information Technology, CIW & Web Design
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
WEB& WEBSITE DESIGN TRAINING Introduction to Websites Course Content: Introduction to Web Technologies Protocols and Port Numbers Domain Names, DNS and Domaining Client and Server Software. Static, Dynamic
WEB PAGE DESIGN AND DEVELOPMENT 2 COURSE CODE: 5033 (COURSE NAME CHANGES TO ADVANCED WEB DESIGN AND DEVELOPMENT IN 2016-17) COURSE DESCRIPTION: This advanced course is designed to provide students with
TASKSTREAM FAQs Why do I not receive emails from TaskStream? It could be that your email program is interpreting incoming TaskStream mail as spam, which is a term for junk mail Spam is not typically stored
Cisco Cius Development Guide Version 1.0 September 30, 2010 Americas Headquarters Cisco Systems, Inc. 170 West Tasman Drive San Jose, CA 95134-1706 USA http://www.cisco.com Tel: 408 526-4000 800 553-NETS
Sitecore CMS 6.2 Content Author's Reference and Cookbook Rev. 091019 Sitecore CMS 6.2 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents
WebEx Meeting Center User s Guide Version 8 Copyright WebEx Communications, Inc. reserves the right to make changes in the information contained in this publication without prior notice. The reader should
Unit 20: Web Fundamentals Unit code: R/601/3512 QCF Level 2: BTEC Specialist Credit value: 7 Guided learning hours: 60 Aim and purpose This unit provides knowledge of web architecture, components and technologies.
126.47. Web Design (One Credit), Beginning with School Year 2012-2013. (a) General requirements. Students shall be awarded one credit for successful completion of this course. This course is recommended
Scope And Sequence Timeframe Unit Instructional Topics Course Description Web Design students will learn how to create and maintain web pages using the prevailing techniques and software. Students will
Classroom Setup Guide-1 Classroom Setup Guide The Fundamentals of CGI Using Perl Classroom Setup Guide is divided into three sections: 1. Before you begin includes Courseware Update links for instructors,
Tivoli IBM Tivoli License Compliance Manager Version 2.3 Administration SC32-1430-03 Tivoli IBM Tivoli License Compliance Manager Version 2.3 Administration SC32-1430-03 Note Before using this information
HP Web Jetadmin Database Connector Plug-in reference manual Copyright notice 2004 Copyright Hewlett-Packard Development Company, L.P. Reproduction, adaptation or translation without prior written permission
Interworks Interworks Cloud Platform Installation Guide Published: March, 2014 This document contains information proprietary to Interworks and its receipt or possession does not convey any rights to reproduce,
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
Oracle WebCenter Content Service for Microsoft Exchange Installation and Upgrade Guide 10g Release 3 (10.3) November 2008 Oracle WebCenter Content Service for Microsoft Exchange Installation and Upgrade
Website Development and Design: Real World Experience Debra Oglethorpe University CRS410 Internship in Communications Debra, Web Content Intern December 10, 2012 Experience Website Development and Design:
TIBCO Administrator User s Guide Software Release 5.7.1 March 2012 Important Information SOME TIBCO SOFTWARE EMBEDS OR BUNDLES OTHER TIBCO SOFTWARE. USE OF SUCH EMBEDDED OR BUNDLED TIBCO SOFTWARE IS SOLELY
The will provide a step-by-step walkthough of how to download and install the application, activate each feature of the product, install any of the feature's prerequisites, extend the license, and deactivate
CIWv5 E-Commerce Designer The CIW E-Commerce Designer series May 2005 release consists of one course: E-Commerce Strategies and Practices. This blueprint lists the following information for that course.
Cisco Unified Workforce Optimization Desktop Requirements Guide Version 10.5 First Published: June 18, 2014 Last Updated: March 6, 2015 THE SPECIFICATIONS AND INFORMATION REGARDING THE PRODUCTS IN THIS
Wiki Server Innovative tools for workgroup collaboration and communication. Features Single site for group collaboration Project-specific wiki accessible via web browsers on Mac, PC, iphone, and ipod touch
Oracle Virtual Desktop Client Release s for Version 3.0 Oracle Virtual Desktop Client: Release s for Version 3.0 Published August 2011 Abstract Part Number: E23537-01 This manual provides information about
1 The Environment and the Tools Web Design, 4 th Edition Chapter Objectives Describe the Internet and the World Wide Web Discuss ways to access the Internet and the Web Categorize types of Web sites Identify