CIW Web Design Specialist Study Guide Vol1

Web Design Specialist
(Adobe CS5 Web Edition)

Self-Study Guide Volume 1 Web Design Series
CCSSM-CDWDSG-PR-1102 version 1.0 rd012511

(Adobe CS5 Web Edition) 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. 111 Tempe, AZ 85281 (602) 275-7700
Copyright 2011, All rights reserved.

(Adobe CS5 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/CD-ROM was published, all URLs were checked for accuracy and completeness. However, due to the everchanging 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 111, Tempe, AZ 85281.
Copyright 2011 by Certification Partners, LLC All Rights Reserved ISBN: 0-7423-2802-3
iv
2011 Certification Partners, LLC All Rights Reserved
Version 1.0
Table of Contents
Course Description....................................................................................................................... xv Self-Study Courseware................................................................................................................. xvi Course Objectives...................................................................................................................... xviii Course Setup Guide and System Requirements ........................................................................... xix Conventions and Graphics......................................................................................................... xxiii 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 Pre-Assessment Questions ................................................................................................................ 2-2 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 2 Supplemental Material...................................................................................................... 2-20 Lesson 3: Web Project Management Fundamentals ...................................................................... 3-1 Pre-Assessment Questions ................................................................................................................ 3-2 Web Project Management Phases....................................................................................................... 3-3 Project Documentation and Communication...................................................................................... 3-8 Case Study...................................................................................................................................... 3-11 Lesson 3 Review .............................................................................................................................. 3-13 Lesson 3 Supplemental Material...................................................................................................... 3-14 Lesson 4: Web Site Development Process..................................................................................... 4-1 Pre-Assessment Questions ................................................................................................................ 4-2 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 4 Supplemental Material...................................................................................................... 4-23 Lesson 5: Web Page Layout and Elements.................................................................................... 5-1 Pre-Assessment Questions ................................................................................................................ 5-2 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.0
vi
Lesson 5 Review .............................................................................................................................. 5-30 Lesson 5 Supplemental Material...................................................................................................... 5-31 Lesson 6: Web Site Usability and Accessibility............................................................................ 6-1 Pre-Assessment Questions ................................................................................................................ 6-2 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 6 Supplemental Material...................................................................................................... 6-12 Lesson 7: Browsers ...................................................................................................................... 7-1 Pre-Assessment Questions ................................................................................................................ 7-2 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 7 Supplemental Material...................................................................................................... 7-28 Lesson 8: Navigation Concepts .................................................................................................... 8-1 Pre-Assessment Questions ................................................................................................................ 8-2 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 8 Supplemental Material...................................................................................................... 8-14 Lesson 9: Web Graphics ............................................................................................................... 9-1 Pre-Assessment Questions ................................................................................................................ 9-2 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 9 Supplemental Material...................................................................................................... 9-30 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.0
vii
Lesson 10 Review .......................................................................................................................... 10-15 Lesson 10 Supplemental Material.................................................................................................. 10-16 Lesson 11: Ethical and Legal Issues in Web Development .......................................................... 11-1 Pre-Assessment Questions .............................................................................................................. 11-2 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 11 Supplemental Material.................................................................................................. 11-14 Lesson 12: HTML and the Evolution of Markup ......................................................................... 12-1 Pre-Assessment Questions .............................................................................................................. 12-2 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 12 Supplemental Material.................................................................................................. 12-14 Lesson 13: XML and XHTML...................................................................................................... 13-1 Pre-Assessment Questions .............................................................................................................. 13-2 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 13 Supplemental Material.................................................................................................. 13-19 Lesson 14: Web Page Structure Tables and Framesets............................................................ 14-1 Pre-Assessment Questions .............................................................................................................. 14-2 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 14 Supplemental Material.................................................................................................. 14-28 Lesson 15: Cascading Style Sheets ............................................................................................ 15-1 Pre-Assessment Questions .............................................................................................................. 15-2 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.0
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 15 Supplemental Material.................................................................................................. 15-41 Lesson 16: Site Content and Metadata ..................................................................................... 16-1 Pre-Assessment Questions .............................................................................................................. 16-2 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 16 Supplemental Material.................................................................................................. 16-27 Lesson 17: Site Development with Microsoft Expression Web 3 Introduction......................... 17-1 Pre-Assessment Questions .............................................................................................................. 17-2 The Transition from FrontPage ........................................................................................................ 17-3 Microsoft Expression Web 3 ............................................................................................................ 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 17 Supplemental Material.................................................................................................. 17-22 Lesson 18: Site Development with Expression Web 3 Basic Features ..................................... 18-1 Pre-Assessment Questions .............................................................................................................. 18-2 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-21 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 18 Supplemental Material.................................................................................................. 18-42 Lesson 19: Site Development with Expression Web 3 Advanced Features............................... 19-1 Pre-Assessment Questions .............................................................................................................. 19-2 Expression Web Styles .................................................................................................................... 19-3 Adding Interactivity to Web Pages.................................................................................................. 19-12 Creating Web Forms with Expression Web..................................................................................... 19-15 Connecting to Databases............................................................................................................... 19-20 Expression Web Reports................................................................................................................ 19-25 Options for Replacing Old WebBots ............................................................................................... 19-27 Case Study.................................................................................................................................... 19-29 Lesson 19 Review .......................................................................................................................... 19-31 Lesson 19 Supplemental Material.................................................................................................. 19-32 Index ................................................................................................................................... Index-1
Version 1.0
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-27 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-34 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-21 19-8: Using Expression Web reports........................................................................................... 19-25
Version 1.0
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-33 19-2: Modifying a manually coded X/HTML page in Expression Web ............................ 19-34
List of Quizzes
Lesson 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 16 Quiz ................................................................................................................................. 16-32
Version 1.0
xi
Lesson 17 Quiz ................................................................................................................................. 17-26 Lesson 18 Quiz ................................................................................................................................. 18-46 Lesson 19 Quiz ................................................................................................................................. 19-39
List of Figures
Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure 1-1: Basic Web page structure ................................................................................................... 1-7 A1-1: Animal Planet home page................................................................................................ 1-13 A1-2: Barnes & Noble home page ............................................................................................. 1-14 A1-3: House of Blues home page .............................................................................................. 1-15 OL1-1: Basic Web page content................................................................................................ 1-17 OL1-2: Basic Web page with <h1>, <p> and <br> tags .............................................................. 1-18 OL1-3: Basic Web page with centered heading and list ............................................................. 1-19 OL1-4: Basic Web page with horizontal rule, colored text and background ............................... 1-20 OL1-5: Basic Web page with image as hyperlink....................................................................... 1-22 2-1: Skills contributing to Web design teams.............................................................................. 2-5 2-2: Wiki Wiki Web site .............................................................................................................. 2-7 2-3: Editing interface for Wiki page ............................................................................................ 2-8 2-4: Simple Web design portfolio .............................................................................................. 2-11 4-1: Handyman Connection home page .................................................................................... 4-11 4-2: Eco Mulch & Fulton Grass home page .............................................................................. 4-11 4-3: Hershey's Happiness home page ....................................................................................... 4-12 4-4: PhysicianBoard home page ............................................................................................... 4-12 4-5: Hux Records home page.................................................................................................... 4-13 4-6: Donkey Konga microsite home page .................................................................................. 4-13 4-7: Nokia Snowboard World Cup home page ........................................................................... 4-14 4-8: Web site mindmap ............................................................................................................ 4-16 4-9: Sample Web site wireframe ............................................................................................... 4-18 4-10: Sample Web page wireframe............................................................................................ 4-19 5-1: Inverted pyramid model ...................................................................................................... 5-5 5-2: Left-margin layout (traditional)............................................................................................ 5-7 5-3: Top-margin layout .............................................................................................................. 5-8 5-4: Distributed left- and top-margin layout ............................................................................... 5-8 5-5: Right-margin layout ............................................................................................................ 5-9 5-6: Distributed layout............................................................................................................... 5-9 5-7: Symmetrical balance in page layout .................................................................................. 5-12 5-8: Asymmetrical balance in page layout ................................................................................ 5-13 5-9: Page displayed at 800x600 resolution ............................................................................... 5-15 5-10: Page displayed at 1024x768 resolution............................................................................ 5-15 5-11: Page displayed at 1152x864 resolution............................................................................ 5-16 5-12: Resolution history sample ............................................................................................... 5-17 5-13: Basic color combinations ................................................................................................ 5-21 5-14: Serifs .............................................................................................................................. 5-24 5-15: Sans serifs ...................................................................................................................... 5-24 5-16: Plain text next to anti-aliased text ................................................................................... 5-25 OL5-1: Web page with default font and black text on white background ................................... 5-35 OL5-2: Web page with gray background and navy blue text...................................................... 5-36 OL5-3: Page with orange background, blue text, and sans-serif font ......................................... 5-37 OL5-4: Page with lavender background, yellow text and calligraphic script font ........................ 5-38 OL5-5: Page with alternate fonts, green background, and orange, blue and yellow text ............. 5-39 6-1: HiSoftware Cynthia Says home page ................................................................................... 6-8 OL6-1: Cooking.com home page ............................................................................................... 6-15 7-1: Web browser layers ............................................................................................................. 7-3 7-2: Firefox 3.6 browser interface ............................................................................................... 7-8 7-3: Internet Explorer 8 browser interface .................................................................................. 7-9 7-4: Opera 10.51 browser interface with Opera Standard skin.................................................. 7-10 7-5: Opera interface with Windows Native skin to modify appearance ....................................... 7-10 7-6: Safari 4.0.5 browser interface ........................................................................................... 7-11 7-7: Google Chrome browser interface ...................................................................................... 7-13 7-8: Google Chrome New Tab page ........................................................................................... 7-14 7-9: Customize And Control Google Chrome menu ................................................................... 7-15
Version 1.0
xii
Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure
7-10: Displaying cookies in Chrome ......................................................................................... 7-16 7-11: Selecting browsers for testing.......................................................................................... 7-18 7-12: BrowserCam site and browser testing results .................................................................. 7-19 7-13: Short URL alias in TinyURL ............................................................................................ 7-21 7-14: Example CAPTCHA text .................................................................................................. 7-22 7-15: Form page with CAPTCHA............................................................................................... 7-24 8-1: Navigation toolbar............................................................................................................... 8-5 8-2: Labeled icons ...................................................................................................................... 8-5 8-3: Sample company Web site directory structure..................................................................... 8-6 8-4: Expanded directory structure.............................................................................................. 8-6 8-5: Well-designed site navigation example................................................................................. 8-8 OL8-1: J. Paul Getty Museum home page................................................................................. 8-17 OL8-2: Getty Museum Mythology page ................................................................................. 8-18 OL8-3: Getty Museum Heroes page ...................................................................................... 8-19 9-1: Picasa 3 interface................................................................................................................ 9-7 9-2: Picasa 3 Tags panel............................................................................................................. 9-8 9-3: Updated picture properties.................................................................................................. 9-8 9-4: Magnified view of raster image .......................................................................................... 9-11 9-5: Vector image using mathematical interpretation................................................................ 9-12 9-6: SVG image file syntax ....................................................................................................... 9-16 9-7: NetMechanic GIFBot page ............................................................................................. 9-19 9-8: Entering URL to test images.............................................................................................. 9-19 9-9: Image evaluation report .................................................................................................... 9-20 9-10: Image file sizes................................................................................................................ 9-20 9-11: Comparing optimized image versions............................................................................... 9-21 OL9-1: Image file baby.jpg........................................................................................................ 9-33 OL9-2: CIW home page ............................................................................................................ 9-34 OL9-3: Image file CIW.bmp ...................................................................................................... 9-35 10-1: Relationships between file size and media format .......................................................... 10-10 OL10-1: Atlantis resort home page ......................................................................................... 10-18 OL12-1: World Wide Web Consortium (W3C) home page......................................................... 12-17 OL12-2: W3C HTML 4.01 Specification document .................................................................. 12-18 13-1: Specifically structured document .................................................................................. 13-11 OL13-1: XML document displayed in browser......................................................................... 13-21 OL13-2: XML document with more structure.......................................................................... 13-22 OL13-3: XML document with more structure, some elements collapsed.................................. 13-22 14-1: Habitat for Humanity page structure with table layout .................................................... 14-3 14-2: Page content in appropriate tabular format ..................................................................... 14-4 14-3: Page structure diagram ................................................................................................... 14-5 14-4: Finished table ................................................................................................................. 14-6 14-5: Simple page structure from table .................................................................................... 14-9 14-6: Web page using frames ................................................................................................. 14-10 14-7: Frames after clicking Page 2 link................................................................................... 14-10 14-8: Frameset rows .............................................................................................................. 14-11 14-9: Structuring frames........................................................................................................ 14-13 14-10: Modified frameset structure ........................................................................................ 14-14 14-11: Hyperlinked frameset structure................................................................................... 14-15 14-12: Result of link opening in wrong frame ......................................................................... 14-16 14-13: Result of clicking properly targeted link....................................................................... 14-17 14-14: Hierarchy of files and frame names ............................................................................. 14-18 14-15: Simple frameset showing sibling frames ...................................................................... 14-18 14-16: Frameset with rows and columns ................................................................................ 14-20 14-17: Nested header frame with banner ad ........................................................................... 14-21 14-18: Two framesets combined ............................................................................................. 14-21 14-19: Combined framesets in 3-D illustration ....................................................................... 14-22 15-1: File styles.htm ................................................................................................................ 15-7 15-2: File styles.htm with formatting changes .......................................................................... 15-8 15-3: Class selectors used to apply same style to multiple individual elements ....................... 15-14 15-4: CSS box model.............................................................................................................. 15-16 15-5: Container boxes ............................................................................................................ 15-18 15-6: Page elements in normal flow ........................................................................................ 15-19
Version 1.0
xiii
Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure
15-7: Elements out of normal flow.......................................................................................... 15-19 15-8: Relatively positioned content ......................................................................................... 15-20 15-9: Content with fixed position ........................................................................................... 15-22 15-10: Image with float applied .............................................................................................. 15-23 15-11: Styling top banner ...................................................................................................... 15-27 15-12: Achieving two-column look.......................................................................................... 15-28 15-13: Two-column layout complete....................................................................................... 15-29 15-14: Adding float left and float right .................................................................................... 15-31 15-15: Formatting maincontent div ........................................................................................ 15-32 15-16: Three-column layout complete .................................................................................... 15-33 15-17: File tour4_converted.htm using CSS positioning instead of table for page layout ......... 15-36 15-18: File tour4_converted.htm with vertical alignment adjusted .......................................... 15-37 A15-1: Example of style outline showing inheritance .............................................................. 15-43 OL15-1: W3C CSS Validation Service page ............................................................................. 15-44 OL15-2: Pasting CSS code into W3C CSS Validator ................................................................ 15-45 OL15-3: Results from CSS Validator....................................................................................... 15-45 16-1: Flow of information between Web server and user's computer ....................................... 16-15 16-2: Adding content to response header................................................................................ 16-15 16-3: Response header with name attribute ........................................................................... 16-16 OL16-1: Results of Google keyword search ............................................................................. 16-30 OL16-2: Source code for Web page showing metadata ............................................................ 16-31 17-1: Expression Web Page view .......................................................................................... 17-5 17-2: Expression Web Web site interface ............................................................................. 17-6 17-3: Expression Web menu bar and Common toolbar ............................................................. 17-6 17-4: New dialog box Site tab ............................................................................................... 17-8 17-5: Web site templates in New dialog box .............................................................................. 17-8 17-6: firstWeb site default.html in Page view ....................................................................... 17-9 17-7: Quick Tag Selector bar.................................................................................................... 17-9 17-8: Expression Web Picture Properties dialog box................................................................ 17-10 17-9: Expression Web Split view ........................................................................................ 17-10 17-10: Expression Web Preview In Browser menu .................................................................. 17-11 17-11: Expression Web Hyperlinks view ............................................................................. 17-12 17-12: Expression Web Reports view.................................................................................. 17-13 17-13: Expression Web Page Editor Options dialog box Authoring tab ................................ 17-15 17-14: Expression Web Compatibility Checker dialog box....................................................... 17-16 17-15: Checking compatibility in Expression Web .................................................................. 17-16 17-16: Expression Web Accessibility Checker dialog box ........................................................ 17-17 17-17: W3C Markup Validation Service results....................................................................... 17-18 OL17-1: Expression Web Page Properties dialog box ............................................................... 17-23 OL17-2: Expression Web Save As dialog box .......................................................................... 17-24 18-1: Import dialog box ............................................................................................................ 18-5 18-2: Modify Style dialog box.................................................................................................... 18-7 18-3: New Style dialog box ....................................................................................................... 18-8 18-4: New Style dialog box position properties...................................................................... 18-9 18-5: Expression Web applying style .................................................................................. 18-10 18-7: Adding divisions to page................................................................................................ 18-13 18-8: Nested divisions code view ........................................................................................ 18-14 18-9: Layers for home page layout complete ........................................................................... 18-15 18-10: Insert Picture From File button on Standard toolbar ................................................... 18-16 18-11: Picture dialog box ....................................................................................................... 18-16 18-12: Accessibility Properties dialog box ............................................................................... 18-16 18-13: Inserting images into home page ................................................................................. 18-18 18-14: Previewing page that requires adjustments.................................................................. 18-19 18-15: Previewing adjusted home page ................................................................................... 18-20 18-16: Insert Hyperlink button on Standard toolbar ............................................................... 18-21 18-17: Pictures toolbar in Page view ....................................................................................... 18-22 18-18: Mouse pointer becomes pencil icon, indicating readiness to draw ................................ 18-23 18-19: Styling unordered list.................................................................................................. 18-24 18-20: Styling unordered list elements ................................................................................... 18-25 18-21: Unordered list styled and in place ............................................................................... 18-26 18-22: Editable regions in dynamic Web template .................................................................. 18-29
Version 1.0
xiv
Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure Figure
18-23: Page Properties dialog box settings for HH_WebPage template ................................. 18-30 18-24: Editable Regions dialog box......................................................................................... 18-31 18-25: Attach Dynamic Web Template dialog box ................................................................... 18-32 18-26: Get Involved page with text inserted ............................................................................ 18-36 18-27: How It Works page after inserting X/HTML content..................................................... 18-38 OL18-1: Source code for index.html displayed in Code subview of Page view .......................... 18-43 OL18-2: Page with modified XHTML showing border lines ...................................................... 18-44 19-1: Page Editor Options dialog box CSS tab ...................................................................... 19-5 19-2: Code for inline styles....................................................................................................... 19-9 19-3: Styling links using inline styles ..................................................................................... 19-10 19-4: Attach Style Sheet dialog box ........................................................................................ 19-11 19-5: Behaviors panel ............................................................................................................ 19-12 19-6: Change Property dialog box........................................................................................... 19-13 19-7: Property settings for behavior........................................................................................ 19-14 19-8: Adding behaviors .......................................................................................................... 19-14 19-9: Form controls in Expression Web.................................................................................. 19-15 19-10: Adding form control .................................................................................................... 19-16 19-11: Form Properties dialog box.......................................................................................... 19-17 19-12: Creating form in Expression Web ................................................................................ 19-18 19-13: Completed form .......................................................................................................... 19-18 19-14: Text Box Properties dialog box..................................................................................... 19-19 19-15: Push Button Properties dialog box............................................................................... 19-19 19-16: ASPX page before adding ASP.NET control .................................................................. 19-21 19-17: GridView control ......................................................................................................... 19-22 19-18: Adding GridView control to ASPX page ........................................................................ 19-22 19-19: Select statement for retrieving database data .............................................................. 19-23 19-20: Fields dialog box ......................................................................................................... 19-24 19-21: ASPX page complete.................................................................................................... 19-25 19-22: Reports View dialog box .............................................................................................. 19-26 19-23: Verifying links in Expression Web ............................................................................... 19-26 19-24: Application Options dialog box Reports View tab ..................................................... 19-27 OL19-1: Manually coded XHTML in MyResume.html .............................................................. 19-34 OL19-2: Manually coded file MyResume.html displayed in browser ........................................ 19-35 OL19-3: Manually coded file MyResume.html in Expression Web Page view............................ 19-35 OL19-4: Manually coded file MyResume.html in Expression Web Code view ........................... 19-36 OL19-5: Changing text alignment with Align Text Left button ................................................. 19-36 OL19-6: MyResume.html with formatting changes made in Expression Web........................... 19-37 OL19-7: MyResume.html code with changes made in Expression Web.................................... 19-38
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-35
Version 1.0
xv
Course 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 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. 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.
Series
CIW Web Design Specialist is the first course in the CIW Web Design Professional series: Web Design Specialist E-Commerce Specialist
Prerequisites
You will 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 Web Foundations courses are not required, but for many candidates they are extremely helpful.
Version 1.0
xvi
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 validates 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
Students 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 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 Web Design Specialist exam objectives. 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. Labs are based on the not-for-profit organization Habitat for Humanity site. 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 that are included in the coursebook. The coursebook includes online supplemental files (see next section) that provide files needed to complete labs. The supplemental files also include an appendix listing the CIW Web Design Specialist certification exam objectives and locations of corresponding material in the coursebook. The online supplemental files provide all answers to Activities, Optional Labs and Lesson Quizzes. To practice the skills presented in the coursebook or to perform any labs that were not completed, refer to the Course Setup Guide and System Requirements section for information about system requirements and using the lab files. Note that all review and assessment materials are provided as study and self-assessment resources only; success on these materials in no way guarantees a passing score on the CIW Web Design Specialist certification exam. The movies provide supplementary instruction in a multimedia format, and enhance
Version 1.0
xvii
the coursebook narrative and labs. However, movie content does not comprehensively address CIW Web Design Specialist exam objectives and is not intended to replace coursebook content. After you have finished the course, you will find this coursebook to be a valuable resource for reviewing labs at home or in the workplace and applying the skills you have learned.
Additional online resources

In addition to the material found in the coursebooks, you can visit CIW Online at http://education.certification-partners.com/ciw/ to help you master the Web Design Specialist course material and prepare for the CIW Web Design Specialist certification exam. CIW Online provides a variety of online tools that 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 Guide and System Requirements for information about accessing these files.
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 Reviews

CIW Course Reviews are designed to assess your knowledge of the concepts, skills and best practices of Web technology taught in the Official CIW Courseware. The CIW Course Reviews assess lesson knowledge, reinforce learning and enhance instruction. This online review program contains multiplechoice reviews and quizzes that cover Web Design Specialist courseware content lesson by lesson.
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: 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 to track individual progress and view overall performance trends.
Version 1.0
xviii
CIW Web Design Specialist Movies

The CIW Web Design Specialist course offers movie files from LearnKey that discuss selected technology topics. To view the movies, log on to the CIW Online Campus at http://education.certificationpartners.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@certificationpartners.com. Consider the following points about the CIW Web Design Specialist 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. The access code provided allows you a single-user license to view the movies. Do not distribute the code to unauthorized users.
Online resources and certification exams

Note that all CIW Online content is provided as study and self-assessment resources only; success on these materials in no way guarantees a passing score on the CIW Web Design Specialist certification exam. 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 exam objectives and is not intended to replace coursebook content.
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.
Version 1.0
xix
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. Note: The CIW hardware requirements are similar to the minimum system requirements for Microsoft Windows 7 and Adobe Creative Suite 5 (CS5) implementation.
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 3: 1.5 GB or more of available hard disk space Adobe Creative Suite 5 (CS5): 9.1 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 Monitor
1 GB RAM (32-bit) or 2 GB RAM (64-bit) 32X 10BaseT or 100BaseTX (10 or 100 Mbps) Required for movie clips DirectX 9 graphics device with Windows Display Driver Model (WDDM) 1.0 or higher driver 1280x800 display required (1280x1024 recommended) with qualified hardware-accelerated OpenGL graphics card, 16-bit color, and 256MB of VRAM
Software requirements
Your system must be able to access the Internet in order for you to perform the hands-on labs in this selfstudy course. 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 3 * Adobe Creative Suite 5 (CS5) Web Premium or Master Collection (recommended packages, which include the following individual applications required for this course): o o o Adobe Dreamweaver CS5 * Adobe Fireworks CS5 * Adobe Flash Professional CS5 *
Version 1.0
xx
Adobe Creative Suite 5 (CS5) requires the following: o o o Java Runtime Environment 1.6 (included) QuickTime 7.6.2 software (required for multimedia features) Adobe Flash Player 10 software (required to export SWF files)
* This software is provided in a virtual lab environment (see next section), or you can use your own software.
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.
Installing and configuring Microsoft Windows 7 on your system

Install Windows 7 with the default settings. The only requirements are: Your system must be able to communicate via TCP/IP. You must be able to access the Internet in order to perform the hands-on labs in the CIW Web Design Specialist course.
Note: If you have already installed Windows 7 (or another Windows OS) and have Internet access, you can skip this section. Labs performed in the virtual lab environment use Windows 7 Professional. The instructions for installing Windows 7 are as follows: 1. 2. 3. 4. 5. Obtain a valid license for all copies of Windows 7. Begin setup by setting the boot sequence for your computer so that it will boot from the DVD drive, then insert the Windows 7 DVD-ROM and reboot. When prompted, specify your language preferences, then click Install Now. Accept the Windows license agreement. Specify to conduct a Custom (advanced) installation. Use the following parameters to perform a custom installation of Windows 7.
Version 1.0
xxi
When This Information Is Required
Use
Phase 1
Partition Location
Default (C:) Phase 2 (after Windows formats and installs files to your hard drive)
User Name Computer Name Type Administrator Password Confirm Password Activation Key Windows Update Settings Time and Date Settings
(Your name) (A name of your choice) password (all lowercase letters) password (all lowercase letters) (Your 25-digit product key) Use Recommended Settings (Customize for your location)
Configure Windows 7 for your use by specifying the following settings:
Specify valid IP addresses

1. 2. 3. 4. 5. Log on as Administrator. Select Start | Control Panel, click Network And Internet, then click Network And Sharing Center. Click the Local Area Connection link to display the Local Area Connection Status dialog box. Click Properties to display the Local Area Connection Properties dialog box. In the list box, click Internet Protocol Version 4 (TCP/IPv4), then click Properties to open the Internet Protocol Version 4 (TCP/IPv4) Properties dialog box. Select Use The Following IP Address, then manually enter specific IP address information if you like. You can use DHCP if you prefer; however, prepare the system for networking. Note: Do not enter DNS configurations unless you have a DNS server. 6. Click OK, then close all open dialog boxes and windows.
Disable the Windows 7 firewall

1. 2. Select Start | Control Panel, click System And Security, then click Windows Firewall to open the Windows Firewall window. In the left pane, click the Turn Windows Firewall On Or Off link. Select the Turn Off Windows Firewall (Not Recommended) option in both sections of the window (Home Or Work [Private] Network Location Settings and Public Network Location Settings), then click OK. Close the Control Panel.
3.
Version 1.0
xxii
When you are finished configuring Windows 7, verify that your system is working and that it can communicate with other systems on the Internet.
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 supplemental files

Each 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 conduct the course labs, you can use this shortcut to quickly access your lab files.
Version 1.0
xxiii
Conventions and Graphics

The following conventions are used in Certification Partners coursebooks. 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. 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 or comments regarding screenshots, labs or other text are indicated in italic type. Program code or operating system commands appears in the Lucida Sans Typewriter font (in examples) or in italic type (in narrative)..
Lab Text
Notations
Program Code or Commands
The following graphics are used in these coursebooks. 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 2011 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.0
xxiv
Version 1.0
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. transactional. linear. passive. self-reflective.
Aside from customer or design requirements, you should only consider using multimedia on a site: a. b. c. d. 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.
3.
What does the acronym GUI stand for, and what does it mean?
Version 1.0
Lesson 1: Overview of Web Design Concepts
1-3
Web Technology
NOTE: Begin this course by thinking about how you use the Web. Do you use it regularly? 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.0
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. 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.
blog A collection of personal thoughts posted on a public Web site. Blogging is the act of adding entries to a blog.
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.0
1-5
NOTE: 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 Associate course. For practice or a refresher, review the basic tags and page structure in this course's Optional Lab 1-1: Practicing your XHTML skills.
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. 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.
OBJECTIVE 4.1.1: Multimedia Web design principles NOTE: Consider the primary goal in Web design defined here. Describe examples of Web sites you have visited that you think achieve or fall short of this goal.
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.
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
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.0
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. 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.
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. If 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.
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. 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 files for lessons in this course. If this directory does not exist, access the supplemental files and copy the files for the Web Design Specialist course. Note: Instructions for accessing 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
NOTE: Try creating this entire XHTML page before looking at the solution code. You will learn more by guessing, comparing and correcting mistakes than you will by copying code.
Version 1.0
1-7
NOTE: If you do not know the four basic structure tags used to create an XHTML document, they are <html>, <head>, <title> and <body>.
3.
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 in 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 in 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.0
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="20%" align="center"><img src="arrow.gif" alt="arrow"/></td> <td width="80%">Industry-wide <b>recognition</b></td> </tr> <tr> <td width="20%" align="center"><img src="arrow.gif" alt="arrow"/></td> <td width="80%"><b>Hands-on</b> learning </td> </tr> <tr> <td width="20%" align="center"><img src="arrow.gif" alt="arrow"/></td> <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> <td><b><span style="color:#ffffff"> CIW Web Design </span></b></td> <td><b><span style="color:#ffffff"> CIW Web Development </span></b></td> <td><b><span style="color:#ffffff"> 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.0
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.0
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: 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.0
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.0
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.0
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 thought and do not necessarily have "correct" answers. 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.0
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.0
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.0
1-16
Optional Lab 1-1: Practicing your XHTML skills

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 in the supplemental files.
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 available in the supplemental files 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 and copy the files for the Web Design Specialist course. Note: Instructions for accessing the supplemental files are provided in the front matter section of this book. 2. 3. 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. 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>
NOTE: If you choose not to create your own content, the text (without XHTML tags) given in this example is provided in 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.
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.0
1-17
5. 6.
Notepad: Save MyResume.htm. 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> To contribute my Web design skills to an entrepreneurial organization <p> Skills: </p> Knowledge of Web design concepts
Version 1.0
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. 9.
Notepad: Save MyResume.htm. 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.0
1-19
Objective: </h2> </p> To contribute my Web design skills to an entrepreneurial organization <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 resemble Figure OL1-3.
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.0
1-20
<body bgcolor="#000000" text="#ffffff"> <div align="center"> <h1> Samson P. Lang </h1> 255 Clawhill Road <br/> Marinita, CA 92629 <br/> (714) 555-6055 </div> <hr width="75%"/> <h2> Objective: </h2> To contribute my Web design skills to an entrepreneurial organization <h2> Skills: </h2> <ul> <li> Knowledge of Web design concepts </li> <li> Site development and management skills </li> <li> Knowledge of basic Web technology concepts </li> <li> Experience with Web applications and tools </li> <li> Knowledge of advanced Web technology concepts </li> </ul> </body>
14. Notepad: Save MyResume.htm. 15. Browser: Open MyResume.htm in your browser. Your page formatting should resemble Figure OL1-4.
Figure OL1-4: Basic Web page with horizontal rule, colored text and background
Version 1.0
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"> <div align="center"> <h1> Samson P. Lang </h1> 255 Clawhill Road <br/> Marinita, CA 92629 <br/> (714) 555-6055 </div> <hr width="75%"/> <h2> Objective: </h2> To contribute my Web design skills to an entrepreneurial organization <h2> Skills: </h2> <ul> <li> Knowledge of Web design concepts </li> <li> Site development and management skills </li> <li> Knowledge of basic Web technology concepts </li> <li> Experience with Web applications and tools </li> <li> Knowledge of advanced Web technology concepts </li> </ul> <div align="center"> <a href="http://www.ciwcertified.com"> <img src="ciw-logo.gif" border="0" alt="CIW logo"/> </a> </div> </body>
17. Notepad: Save MyResume.htm. 18. Browser: Open MyResume.htm in your browser. Your page formatting should 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.0
1-22
Figure OL1-5: Basic Web page with image as hyperlink
This optional lab reviewed basic XHTML tags and page creation for those who need practice or a refresher in XHTML. 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.0
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. Blogs Multimedia Web services Web site management applications
Web design is as important as the site content because Web design helps to convey: a. b. c. d. 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.
3.
The Internet is which type of medium? a. b. c. d. Passive Broadcast One-to-one Electronic print
4.
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. 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
5.
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.0
1-24
Version 1.0
2Lesson 2: Web Development Teams

Objectives
By the end of this lesson, you will be able to: 1.1.1: Identify job responsibilities and tasks of a Web designer or Web development team member. 1.1.2: Develop and update your Web design portfolio with demonstration pages and sites. 1.1.3: Define the collaborative nature of a Web development project. 1.1.13: Identify Web site characteristics (e.g., interactivity, navigation, database integration) and the project resources they require. 4.4.7: Identify elements of a successful Web marketing campaign (e.g., working with marketing team members to determine audience and central message, creating HTML e-mail messages with images, scheduling Webcasts).
2-2
1. List at least three areas of expertise that should be represented in a well-rounded Web development team.
2.
Which of the following is least likely to be part of the job description of a Web designer? a. b. c. d. Web graphics creation XHTML coding Server configuration Quality assurance and testing
3.
An intranet is: a. b. c. d. a very small Web site on the Internet. a small network hosted within an organization's office. a Web site that is accessible only to an organization's internal members. a Web site that is accessible only to an organization's internal members and selected external partners.
Version 1.0
Lesson 2: Web Development Teams
2-3
NOTE: Do you think a team approach is necessary for all Web projects? Consider a small business, for example. What if the team resources are not readily available, as they are at a larger company?
Web Teams and Tasks

The concept of teams in the workplace is not new. However, only recently have teams been used to develop Web projects. In earlier Web development models, one person was often responsible for the development of an entire Web project. A common reason for the one-person Web department was the lack of common knowledge about Web technology. In addition to the limited knowledge pool, management often displayed uncertainty and a lack of commitment to allocate resources to Web development. This situation has changed. Organizations worldwide know the need for Web-enabling technologies. Design and engineering teams are now regularly used for Web projects. Depending on the phase of development in a Web project, various skill sets are needed on a team. For example, marketing and writing professionals are more likely to be involved in Web development during the early phases, when the site's message is being crafted. When this work is done, Web designers, programmers and people with other technical skills will implement various components of the site. The team approach to Web development is critical to create a well-rounded design and a functional Web site.
NOTE: Name other types of projects in which you have participated that benefited from using a team approach. What projects might not benefit from a team approach?
Nature of Web teams

In print or software design, the members of a team may be the same over the course of many projects. In Web development, however, the team's composition often fluctuates from one project to the next, depending on the skills required. Also, Web teams are frequently dispersed geographically. It is not uncommon for some members of a Web project team never to meet in person.
Composition of Web teams

OBJECTIVE 1.1.3: Web project collaboration
Although Web development projects vary, and one person may serve several roles, a Web project team will typically have people performing each of the following jobs: Project management The project manager is involved with the project from start to finish. He or she is in charge of determining and documenting the requirements of a project, creating specifications for the project, assembling a team, and ensuring that the project stays on schedule and on budget. Information architecture The information architect is responsible for translating customer requirements into a blueprint for site development. This may include planning the site's navigation and determining whether database integration is needed. Graphic design The job of the graphic designer is to create a consistent and visually appealing look for a Web site. Graphic designers may also create Flash animations or design user interfaces for Web applications. Information technology This group includes people with the more technical jobs involved in Web development, such as programmers, database administrators and networking professionals. The technologies these people enable in the site make it the interactive medium that it is. Marketing Marketing professionals are responsible for developing the strategy for communicating a company's message, image and brand identity. As such, they are often involved in developing the site's look and feel, as well as its content.
OBJECTIVE 1.1.13: Site characteristics and resources
NOTE: To which of these areas of expertise do you think you could best contribute if you participated in a Web development team?
Version 1.0
2-4
Writing and editing These professionals are responsible for writing, editing and proofreading the content on the Web site. Web site content requires concise information and adherence to a consistent style that appropriately reflects the company's desired message, tone and image.
The personnel and resources required for a project depends on the characteristics of the Web site that will be built. If the project requires database integration, for example, then a database administrator must be part of the team. If the project has complex information organization needs, then an information architect should be involved. Depending on the type of interactivity the project requires, the project team may need programmers or graphic designers with specialized skills.
Web designer's job role

OBJECTIVE 1.1.1: Web development job tasks
No one can possibly be an expert in every aspect of Web development. As a result, the trend in Web development jobs is toward specialization. The primary job of a Web designer is usually to design a visually appealing Web site that satisfies the requirements specified by the project manager or client. Depending on the organization, however, the job description of a Web designer will vary widely. Web designers are often still expected to have a very wide range of skills. The skills required of a Web designer may include any combination of the following: Web site planning based on management or client goals and priorities Web graphics design Site structuring and navigation scheme design XHTML coding Programming and scripting languages coding Customer service and client relations Web site testing, troubleshooting and debugging
Web Project Management

NOTE: Do you see yourself doing project management (managing people, resources, production and maintenance of a site) after completing this course? Can you see yourself performing all the tasks in the skill disciplines listed here?
Although it is ideal to have an experienced project manager assigned to every Web development project, this is not always practical. Many Web designers, especially at smaller companies or on small teams, must perform project management tasks in addition to their Web design responsibilities. The project manager's job is to understand the requirements for building and maintaining the site, to evaluate his or her organization's available resources, and to use those resources as efficiently as possible so that the project can progress smoothly. Web sites are complex entities requiring the management of many technological and human resources. As with any complex system, your goal as a project manager is not to become an expert in all components of the system, but rather to creatively manage the resources that enable your Web site. The Web professionals on your development team each have different skill sets that serve different areas of Web development. Generally, a Web development team contains the skill disciplines illustrated in Figure 2-1.
Version 1.0
2-5
Creative Management Technical
Web Design Team

Figure 2-1: Skills contributing to Web design teams
Each professional brings a different skill set to the project. Project management is an exercise in bringing the right people and technologies together to achieve the desired result. Because we deal with finite resources and limited skill sets in the real world, project management is more an art than a science. It is an art that requires you to make the best product possible with the limited resources available to you.
Pace of Web development

Web development projects generally proceed at a frantic pace. Evolving technologies, changes in project teams and fierce market competition all contribute to the need for rapid development, changing requirements and regular updating of Web sites. Web projects are notorious for requiring late-night pushes to finish. However, Web projects do not need to be chaotic. Proper planning, communication and organization can substantially increase a project manager's ability to properly estimate the time and resources required for a project, and can increase the Web team's ability to complete projects on time and within budget.
Benefits of Web development methodologies

Most Web development teams use some sort of system, or methodology, for handling projects. A methodology usually specifies the steps and the order of steps that a project team will take to implement a project from its earliest stages through to completion. Numerous standardized methodologies have been created for software development and other engineering disciplines. These range from informal ideas about better ways to work, to rigid systems that seek to regulate the entire process in hopes of making the process completely predictable. Web teams especially small teams usually follow a less formal and often in-house set of processes rather than subscribing to a rigid system. Even a basic list of steps and a general set of guidelines for a project's progress from start to finish can result in great improvements for most Web teams. Following are some advantages of establishing a basic process methodology for your Web development projects: Quality and deadlines can be more closely managed, because each step of the process has a specific goal and timeline. Duplication of effort is reduced, and processes become more efficient. Each person on the team knows his or her job, and the expectations and goals at each point in the process.
Version 1.0
2-6
Planning and thoughtfulness are encouraged, which generally results in less stress for everyone involved in the project.
Later lessons will discuss in greater detail the steps involved in a typical Web development project.
Web Project Collaboration

OBJECTIVE 1.1.3: Web project collaboration
Because of the fast-paced and evolving nature of Web development, it is important that Web teams have methods for sharing information among themselves, as well as with all project stakeholders. The most basic collaboration tools for Web teams are e-mail, meetings and telephone calls. Although these may suffice for many projects, each one fails to address some important aspects of team collaboration. For example, telephone calls do not allow participants to share files. Meetings are helpful for planning and tracking progress, but are not an arena in which team members can accomplish work. E-mail works well for exchanging files, but real-time communication is important in some situations. Other collaboration tools feature combinations of these capabilities that may prove more useful. Examples of additional Web team collaboration tools include:
NOTE: Consider the shortcomings of e-mail, meetings and telephone collaboration. Think of instances in which one of the additional collaboration tools listed here would be useful.
Intranets. Wiki sites. Online conferencing. Instant messaging.
Intranets
An intranet is a Web site that can only be accessed from within a company's network by internal employees. Intranets are frequently used by management to share information (such as company policies and employee directories) with employees. Intranets are also often used for sharing information among internal project team members. Examples of information that could be stored on a company's intranet to improve collaboration among Web development team members include: A library, or repository, of frequently used images, fonts and pieces of code. Key documents associated with each project, such as the project timeline, client requirements and technical specifications. Links to Web addresses associated with each project, such as the test site.
Wiki sites
Wiki site A collaborative Web site that uses Web-based Wiki software to allow visitors to update the site using only a browser. Useful for team collaboration, information repositories and portals.
A Wiki site is a collaborative Web site that can be easily modified by anyone with access to it. A Wiki site uses specialized Web-based software (called Wiki software) that allows any visitor to update the site using a Web browser. Specific pages of a Wiki can be locked down while leaving others available for public or permitted editing. A Wiki can be used to create an information repository or portal.
The word wiki comes from the Hawaiian phrase "wiki wiki," which means "very quick."
Version 1.0
2-7
Many Web development and software development teams use Wiki sites to create and maintain documentation related to projects, or to easily share and archive information for future use. Figure 2-2 shows a popular publicly accessible Wiki site named Wiki Wiki Web (http://c2.com/cgi/wiki?WikiWikiWeb).
Figure 2-2: Wiki Wiki Web site
Figure 2-3 shows the editing interface for this same Wiki page. Notice that Wiki pages use their own language to indicate formatting for text. Wiki pages are hyperlinked using WikiWords. A WikiWord is simply two or more words, each capitalized and typed together without spaces between them. The Wiki software translates a WikiWord into a link to a new page. In this way, Wiki sites can be built quickly and hyperlinks can be created between pages very easily.
Version 1.0
2-8
Figure 2-3: Editing interface for Wiki page
Following are other examples of Wiki sites and vendors offering Wiki software: Wikipedia (www.wikipedia.org) OpenFacts (http://openfacts.berlios.de/index-en.phtml?title=Main_Page) MemoryAlpha (http://memory-alpha.org/en/wiki/Main_Page) Open Wiki (www.openwiki.com) Wiki Base (http://c2.com/cgi/wiki?WikiBase) Wiki Choicetree (http://c2.com/cgi/wiki?WikiChoicetree)
Online conferencing
Online conferencing allows groups of people who work at different locations to have virtual "face-to-face" meetings without traveling. Some of the capabilities of online conferencing applications include: Video conferencing. Program sharing. Remote control (in which one person controls other computers remotely). Virtual whiteboard. Voice and text chat.
Version 1.0
2-9
Instant messaging
instant messaging (IM) A computer-based method of communication in which users can type and view messages sent to one or more recipients, and view the responses immediately.
Instant messaging (IM) has become a very common tool among Web and software development teams. IM allows the user to quickly ask a teammate a question or provide a brief response in real time, generally without causing too much of an interruption for either person. Instant messaging applications can also be used to have text conferences between more than two people, and may include video and voice capabilities as well. IM is a useful tool when used correctly and with consideration. The key is to use it sparingly and to know when another form of communication, such as e-mail or a phone call, is more appropriate.
Your Web Design Portfolio

OBJECTIVE 1.1.2: Web design portfolio
A Web design portfolio is a single Web location that allows you to show off your best work to friends, family or potential employers. It is also a helpful tool for tracking your own progress as a Web designer. As with any Web site, it is important to consider the purpose and goal of your portfolio while you are designing it. The purpose of a portfolio is to demonstrate your Web design skills and display your work. The goal is generally to impress your visitors often people who may decide to hire you.
Web portfolio contents

Considering the purpose and goal of your Web design portfolio, you should make sure that it is attractive, easy to use, and up to date. Consider including the following items in your Web portfolio: Your rsum Samples of graphics you have created Links to Web pages or sites you have designed or contributed to Demonstrations or samples of any other relevant special skills you want to emphasize, such as drawing or painting, programming, photography, or print design
Portfolio content to avoid

Your portfolio should be crafted to impress and delight your visitors, but it must also be accurate. Do not link to sites that you have not contributed to or that you did very little work on, unless you have a good reason and you explain it. For example, if you designed a banner ad that is currently appearing on CNN.com, do not just link to CNN.com from your portfolio. Instead, create and link to a separate page that contains the banner ad, and state the fact that the ad appears on CNN.com. If you must link to a site for which you cannot take credit, include a statement with the link describing the work you did on that site. Also consider the quality of the work you make available. Works in progress or rough draft versions may not be the best work for you to show off, unless you have a specific reason to provide examples of your creation process. Clearly label any older work meant to demonstrate a "before and after" process.
Version 1.0
2-10
Updating your portfolio

After you create your portfolio, it is very important to maintain it regularly. Be sure to update your portfolio as quickly as possible when anything on it changes. Unlike a printed rsum, your online portfolio is always available, and visitors expect it to be current and accurate. Any inaccurate or outdated information can be seen by visitors who assume it to be current. You should also perform regular updates to your portfolio to add new sites and remove old ones. Consider that a site, graphic or other design that reflected well upon your skills five years ago may not impress anyone today. In the following lab, you will create a basic Web design portfolio page to which you can add as you develop more pages. Suppose you are interviewing for a job on a Web development team at a large company, and the hiring manager asks to see samples of your work. Rather than providing verbal descriptions of your designs or printouts of various pages, you can provide a single Web address that houses live samples of all your best work. The hiring manager can peruse your designs during the interview or at her convenience. A Web portfolio also allows you to provide samples of your skills when applying for a job, before hiring managers choose whom they will invite for interviews. This preview of your work may win you an interview and an advantage over other applicants for the job.
Lab 2-1: Creating a Web portfolio

In this lab, you will begin creating a basic Web design portfolio. This site will serve as a central online location from which you can link your best Web work. 1. From the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson01\Lab_1-1\ folder, copy the XHTML document you created in the previous lesson's Lab 1-1 (CIWskills.htm) plus the related image files, and save them to your C:\CIW\Web_Dsgn_Spec\LabFiles\ Lesson02\Lab_2-1 folder. From the \Lesson01\OptLab_1-1\ folder, copy the XHTML document you created in the previous lesson's Optional Lab 1-1 (MyResume.htm) plus the related image file, and save it to your Lesson02\Lab_2-1 folder. Note: Completed example versions of these files (CIWskills[completed].htm and Resume.htm), along with the related image files, are provided in the \Lesson02\Lab_21\Completed\ folder. You can use these files for this lab if you did not create your own files in the earlier labs. However, you should use your own personalized versions of these pages if you completed them. 3. Notepad: Use a text editor to create a new XHTML document. Save the document as MyPortfolio.htm to your C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson02\Lab_2-1 folder. Create a structure for the page using the basic XHTML elements. Use your name as the title and as an <h1> header on the page. Add an <h2> heading that reads Web Design Portfolio.
2.
4. 5. 6.
Version 1.0
2-11
7.
Create links from this page to CIWskills.htm and MyResume.htm (the XHTML documents you created in the previous lesson and copied to the \Lesson02\Lab_2-1 folder in Steps 1 and 2). Provide a short description of each document to which you link. Note: Always be sure to use the correct syntax when creating hyperlinks to other pages. If you reference files by different names, or directory locations other than the same folder in which you save this page, you must adjust your hyperlink syntax accordingly.
8. 9.
Save MyPortfolio.htm. Browser: Open the file MyPortfolio.htm in your browser. Figure 2-4 shows an example of how your portfolio page might look at this point.
Figure 2-4: Simple Web design portfolio
10. Browser: Test the hyperlinks to your rsum and to the CIW Skills page to be sure they work properly. Do both documents appear as they should? If they do not appear, check that you have entered the correct file names, and that the link syntax is correct for each file's directory location. Do the images appear in each document? Remember that any image files used in a page must also reside at the same location as the XHTML file. 11. Notepad: Compare the code you wrote to the example code used to create the portfolio page shown in the preceding figure. The example code is provided in the file Portfolio(completed).htm in the C:\CIW\Web_Dsgn_Spec\LabFiles\ Lesson02\Lab_2-1\Completed\ folder. Following is the Portfolio(completed).htm code:
<!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.0
2-12
<head> <title> Samson P. Lang </title> </head> <body> <h1> Samson P. Lang </h1> <h2> Web Design Portfolio </h2> <p/> <ul> <li> <a href="Resume.htm"> My Resume </a> </li> <li>A Basic Web Page: <a href="CIWskills(completed).htm"> CIW Skills </a> </li> </ul> </body> </html>
12. Now that you have a basic and functioning Web portfolio page, make it your own. Add graphics, use different fonts and colors, and add other information about yourself. Personalize your portfolio to express your skills, design sensibilities, personality and professionalism.
Your Web Design Business

Whether you are an entrepreneur, a freelance contractor, or part of a corporate Web design team, the success of your Web design business is rooted in your firm understanding of the skills and knowledge required, your diligence in planning and execution, and your willingness to keep your skills up to date. Throughout this course, you will learn skills and practices that will allow you to expertly perform Web design tasks. This section provides a brief introduction to the purpose of Web design, the nature of good and bad Web sites, and the importance of good writing skills.
Business sense
Before you ever type a tag, you should understand that a Web site is part of a business's marketing effort. Marketing is essentially presenting your product to potential customers in such a way that they want to buy it, and they want to buy it from you instead of from someone else. A Web site should communicate your client's central message. The central message informs the audience about the purpose of the Web site (and the purpose of the business or individual to whom the site belongs). For example, the central message of Staples (www.staples.com) is that the company is an office-supply retailer. The central message of the Shark Foundation (www.shark.ch/) is that the organization is a scientific research and preservation foundation dedicated to the protection and study of sharks. The purpose of your job as a Web designer is to effectively communicate your client's central message.
Know your client and your focus

To design an effective Web site, you must determine what your client needs. A client may come to you with an idea of what he wants his Web site to say, but you should clearly understand the client's central message before you begin your work.
Version 1.0
2-13
You will need to apply listening and discernment skills in order to clarify the central message in your own mind. Listen carefully to what the client says, apply your own good judgment and common sense, and if necessary, help the client verbalize his goals for the Web site. If you are still unsure about the central message, attend a focus group or work closely with members of the marketing or sales teams to get a clear understanding of what the Web site needs to communicate. After you have outlined the specific goals of the Web site, you should determine how success will be measured and evaluated.
Know your audience

In order to make a Web site useful to visitors, you must know who the visitors are: How do they find what they want? What stimulates their interest? How do they like to interact? You must identify the type of visitors you are trying to reach. For example, are you marketing snowboards to teenagers and young adults, computer hardware to IT professionals, or health care options to the elderly? After you have identified the type of visitor to whom you are marketing, you must keep that visitor in mind as you design your site so that your site will be appealing and useful to him. For example, a Web-savvy business professional might demand a well-designed site that offers search capabilities and a streamlined online checkout process. A visitor with an IT background might prefer a site that offers online chat with a customer service representative or that provides user forums and newsletters. On the other hand, many older people are somewhat uncomfortable using the Internet and distrustful of online payment processing. They may prefer to speak to a customer service representative via telephone, and therefore will want to see telephone numbers as part of the contact information on the site.
The good, the bad and the ugly

Throughout this course you will learn the principles of effective design, including the use of font, color, spacing, graphics and other elements. Your understanding of flow and how the eye moves across the page will help you lay out pages that capture interest and move users to the places you want them to go (whether that be to a page where they can place an online order to or a page where they can find contact information). This section provides a brief overview of what makes a Web site good, or not so good.
Good design: Fast and easy

You have little space and time to convince visitors that they want what you have. Essentially, visitors look for a summary of what the site is about, and they want to find it quickly and easily. Visitors do not read Web pages they scan them, picking out individual words and sentences. To help a visitor "get" the central message quickly, many designers structure page text so that it is easy for visitors to scan. Highlighted keywords, meaningful subheadings and bulleted lists are ways to capture visitors' attention and help them find the information they are looking for. To capture a visitor's interest, a good designer conveys the central message in the first two paragraphs of the page and makes sure that all subheadings, paragraphs and bullet points start with information-carrying words that users will notice as they scan the page.
Version 1.0
2-14
Effectively designed pages: Feature crisp, concise text (limiting the word count to half of what would be used in conventional writing). Include one idea per paragraph. Include search engine keywords in the main portions of text. Convey the central message using the inverted-pyramid writing style (that is, the conclusion is presented at the top of the page, followed by supporting information).
Simplicity
Although a stunning Web site may draw in visitors initially, a Web site that is simple to use will keep users coming back. Navigating a Web site should be easy. Each page should include a navigation bar directing users to major parts of the site. The site should provide multiple ways to navigate back to the home page so that users can start over if they get lost.
Bad design: Poorly planned navigation

Although a great deal of the criteria for evaluating a Web site is subjective, there are some elements that simply make a Web site bad. Poorly planned or insufficient navigation is one of them. If a visitor gets lost while trying to navigate your site, or while trying to make an online purchase or locate your store hours, he may simply leave and not return. Another element that can render your site ineffective or unappealing is meaningless text. The use of a promotional writing style that makes exaggerated claims (e.g., "The hottest deals ever!"), should be avoided, as it forces users to hunt for the facts.
Ugly Web sites

NOTE: If time permits, visit www.webpages thatsuck.com to view some examples of bad Web sites. Despite the somewhat inappropriate name, this site provides valuable lessons for anyone learning about Web design.
It is worth mentioning that there are a number of ugly yet highly successful Web sites. Although this seems to go against the principles of good Web design, consider the type of marketing message these sites convey: You can trust us. We are a small business and we concentrate our efforts on customer service, not on marketing and developing a snazzy Web site. The unpolished appearance of a Web site can make people feel as if they are interacting with real individuals Henry the shoemaker, or Joe the garage mechanic as opposed to dealing with an impersonal corporation with a slick Web presence. The perception here is you may not be able to trust an impersonal Web site, but you can trust a "real" person. The success of this approach depends upon the target audience. Web-savvy visitors would most likely be unimpressed with a simplistic site, but a large population of Internet novices might find a certain level of comfort dealing with Joe the mechanic, who knows he has to have a Web site but really knows very little about all this Internet stuff. Here the perception is that Joe and his Web site visitor share a common ground they both have to use the Internet (Joe to find customers, and the site visitors to find a mechanic), but all Joe is really interested in is repairing cars, and all his visitors are interested in is finding a trustworthy person who can repair their brakes and mufflers.
Writing
The importance of good writing skills in Web design cannot be overstated. After all, your Web pages should engage your audience in a conversation and should communicate, inform, and even lead visitors to take action (such as ordering a product).
Version 1.0
2-15
Effective wording
To be an efficient and successful Web designer, you must be able to use words effectively. The wording on your pages (or in your HTML e-mail messages) communicates your company's central message. Do not waste the user's time. Use words that carry information and communicate efficiently. Words are labels and can be more effective than icons for site navigation. Words in navigation allow visitors to see where they are, where they can go and what they can do. If your writing skills are not as good as they should be, ask one or two team members (perhaps from the Editing or Marketing departments) who possess excellent writing and communication skills to review and edit your copy before you post it to the Web site.
OBJECTIVE 4.4.7: Web marketing campaigns
E-mail marketing campaigns

Many companies engage in HTML e-mail marketing campaigns, and this responsibility may fall to you as a Web designer. An HTML e-mail marketing message is more than merely an e-mail message sent in HTML format. Like any marketing piece, an e-mail marketing message must convey the central message quickly and concisely. It must also be well formatted and make an impact. To achieve the desired impact, your e-mail marketing piece should adhere to the following guidelines: It should be brief. Try to keep the message to 60 words or fewer. It should be aimed at a specific target. Are you marketing an iPod to college students, or a Mercedes Benz to corporate executives? The language and writing style of your message should be geared toward your target audience. It should be professional. Make sure to run it through a spelling and grammar check before you send it. It should be properly formatted. That is, it should include the following elements: o Date and time. Most marketing pieces are time-sensitive, so the recipient needs to know the age of the message. Greeting. Central message in a pithy, well-written statement. While it is acceptable and often appropriate to include an image, your message should not rely solely on the image for relaying a message because most e-mail clients block images unless the recipient specifically opts to display them. Action item. The marketing piece is sent for the purpose of eliciting a particular response (such as purchasing an item during a sales event or reserving a seat for a lecture). Tell the recipient what action is required. A hyperlink to more details and information. Contact information. Providing a name and an e-mail address and/or phone number conveys a message of trust and makes the message more personal. An opt-out clause. The courtesy of allowing your recipients to opt out of future mailings demonstrates that you value their time.
o o
o o
Version 1.0
2-16
As part of a marketing campaign, your company may provide Webcasts so that customers can get more information about a product or upcoming event. A Webcast is an audio and/or video file that is distributed over the Internet using streaming media technology. If you want to invite your customers to a Webcast, you will need to include the pertinent details in your e-mail marketing piece. These details include: The URL where the Webcast is available and the timeframe during which it is available. Simple instructions for accessing and viewing/downloading the Webcast. You might also want to include a toll-free telephone number users can call for technical assistance with viewing the Webcast, if your company provides such resources. Minimum system and browser requirements, including any required plug-ins, and links for obtaining the plug-ins. Details about any information that will be requested from Webcast participants, such as a user name. You should explain what data will be collected and how it will be used.
At all times, you should keep the process as simple and user-friendly as possible.
Keeping your skills up to date

Web technology is always evolving, and it is important that you keep your skills up to date. Taking the time to truly learn your craft and learn how to use the available tools is a good start. Web design, however, is a continual process of learning. Keep an open mind and be willing to learn new styles and techniques. Here are a few ways you can stay apprised of current trends and technologies: Subscribe to an industry newsletter or magazine. Subscribe to a few high-quality news feeds or visit sites that focus on the latest industry news. Build a network of other skilled professionals with whom can you can share knowledge, or join a forum. Frequent successful Web sites, try to discern what makes them successful, and look for ways to apply similar techniques to your own sites and pages.
Version 1.0
2-17
Case Study
Herding Cats
Everyone in the staff meeting agreed the idea was great. Cat's Meow Pet Store would create a mini Web site to promote its spring kitten sale, which would start in two weeks. As the company's only Web technician, Carmen tried to ask questions, but the VP leading the meeting dismissed the topic, saying, "You are the Webmaster, Carmen, just go for it." Raj from marketing told Carmen to let him know how he could help. When Carmen followed up with him later, however, Raj said he did not have time to talk about it but he could review Carmen's designs. Jeanne, the graphic artist from advertising, was not at the staff meeting, and had heard nothing about the mini site when Carmen asked her for graphics. Jeanne was so busy designing the newspaper inserts for the next month that she could not help Carmen anyway. Shirley, the office administrator, asked Carmen how the Web site was coming along. When Carmen said she had made very little progress, Shirley offered to help. She recruited Jonas, the VP's executive assistant, to help write some text for the Web pages, and Shirley herself volunteered to take digital photos of some kittens that would be for sale. Carmen was relieved to have some help and began setting up some Web pages. By the end of the week, Carmen had designed some page layouts and was ready to incorporate content. Shirley provided some digital photos, but the photos were mostly poor quality and large file sizes. Jonas had written a few lines of text for the site, but he was busy performing his own duties and could not contribute more. Raj from marketing looked at Carmen's page designs and asked if this was all she had. He pointed out that the designs did not really match the company's usual look and feel, then he was called away to an appointment. Jeanne, the graphic artist, said, "What Web site?" At the next staff meeting, the VP asked about the kitten sale Web site. Carmen said she had made little progress and did not have enough resources. The VP frowned and said, "But Carmen, you are the Webmaster. Just go for it. What resources could you need?" * * *
Consider this scenario and answer the following questions. In what ways does this scenario demonstrate the importance of project management? Methodologies? Team-based development? How could Carmen have served as a better project manager for this Web development project? Who else might have been an appropriate project manager? The pace of a Web development project is often frantic. Can you think of ways that a Web professional such as Carmen could "just go for it" and quickly develop a basic but acceptable site in a situation where resources are tightly limited? In some companies, an individual Web development professional may be responsible for serving many roles and performing multiple tasks in Web development. How might a Web site benefit from this situation? How does it suffer?
Version 1.0
2-18
Lesson Summary
Application project
Developing a good Web site requires skills that extend far beyond technology. For a Web development project to succeed, you need people with expertise in management, visual design, writing, marketing and technology, as well as people who can observe, analyze, plan, empathize and think creatively about possibilities from a variety of perspectives. How many of these skills do you think you could contribute to a Web team, and which ones? Try this activity with a group of friends or colleagues. Suppose that this group of people will form a Web development team. Determine who can contribute which required skills to the team. Be sure to note who can contribute more than one skill and what all those skills are. Allow team members to advise the group about any skills they possess that are not specified in this lesson but that they think might be useful to a Web project. The team can decide whether to include any such skills. Now analyze the list of skills you have covered by your team. Which skills are more commonly available on your team? Which skills are in short supply? Now suppose your company just reduced funding to your Web development project, and you have to reduce your team by one memberby two membersby three members. If your remaining team members are required to contribute two or three separate skills to the project, which skills become more important to retain? Consider this activity when making decisions about the skills you want to use in your work and the skills you want to acquire as you pursue a career in Web development.
Skills review
In this lesson, you learned about team-based Web development and the various skills that need to be present in a well-rounded Web team. You learned about the wide range of skills that a Web designer is expected to possess, and about the importance of project management and Web development methodologies. You also saw examples of collaboration tools that can help make your team more productive and efficient. Finally, you learned about Web design portfolios and you began the process of building your own. Now that you have completed this lesson, you should be able to: 1.1.1: Identify job responsibilities and tasks of a Web designer or Web development team member. 1.1.2: Develop and update your Web design portfolio with demonstration pages and sites. 1.1.3: Define the collaborative nature of a Web development project. 1.1.13: Identify Web site characteristics (e.g., interactivity, navigation, database integration) and the project resources they require. 4.4.7: Identify elements of a successful Web marketing campaign (e.g., working with marketing team members to determine audience and central message, creating HTML e-mail messages with images, scheduling Webcasts).
Version 1.0
2-19
Lesson 2 Review
1. Why does the composition of a Web team often change from one project to the next?
2.
Name some of the tools that make it possible for Web teams to be geographically disbursed and still work closely together.
3.
What Web development team member is responsible for gathering client requirements and managing resources?
4.
What Web development team member converts requirements into a blueprint for the development of the Web site?
5.
What are the goals of a Web development methodology?
Version 1.0
2-20

Version 1.0
2-21
Activity 2-1: Developing a simple Web design methodology

A methodology is a series of steps that are followed in order to achieve a result. In this activity, you will develop a draft of a methodology for the development of Web sites. Note that the goal here is for you to think about the steps that may be involved in creating and assembling components of a Web site. You will learn more about planning Web projects and the larger issues later. 1. Create a list of features that many Web sites have in common. These features will serve as your base-model Web site. (The methodology you create in this activity should enable you to repeatedly create Web sites with the same features.)
2.
Consider the list of features you created. Make a high-level (not detailed) list of steps from this list. For example, if one of the features you listed in Step 1 was "Graphics," then one step you might specify would be "Design the Site's Graphics."
3.
Order these steps in a sequence that you think makes sense and that could be performed repeatedly to create multiple varying sites containing the same features.
4.
Now that you have developed your methodology, assign each step of the process to one of the typical Web team members discussed in this lesson. For example, the task of "Designing the Site's Graphics" should be assigned to the Web designer.
5.
Now, think about a specific Web site that you frequently visit. What tasks in developing that site would be performed by each typical team member? Does your methodology still make sense? Can you think of ways to improve it?
6.
Revise your methodology based on your answers in Step 5.
Developing and using a Web development methodology is an ongoing process. Because of the variables involved in Web development, it is not possible for sites to be developed in an assembly-line manner and no one wants to develop sites in this way. However, by regularly re-evaluating the way that your team works together and by looking for ways to improve your Web development process, you can greatly increase the quality of your work.
Version 1.0
2-22
Optional Lab 2-1: Using a Wiki site

In this optional lab, you will learn to edit pages on a Wiki site. 1. 2. 3. Browser: Open www.wikipedia.org, the home page of Wikipedia. Wikipedia is a free Wiki-based encyclopedia. Browse around the Wikipedia site to learn how it works. When you feel oriented to the site, open the How To Edit page at http://en.wikipedia.org/wiki/Wikipedia:How_to_edit_a_page, and read the information there. Wiki sites generally have a special page called the sandbox where users can practice editing text. Click the Sandbox link to locate the sandbox on Wikipedia, and make some edits. Do not worry about making mistakes; the sandbox is the safest place on a Wiki and you cannot cause any damage to the site here.
4.
5. What do you see as the benefits of a Wiki? What are the risks involved in a Wiki? What steps does Wikipedia take to address these risks?
Wiki sites are just one of many tools available for collaborating over the Web. Although Wiki sites are not ideal for every project collaboration situation, they can provide a useful tool for many jobs.
Version 1.0
2-23
Lesson 2 Quiz
1. Why is it critical to approach Web development as a collaborative effort? a. b. c. d. Because knowledge about Web technology is in short supply Because management tends to lack certainty and avoid resource commitment Because a team approach provides the Web project with a well-rounded design Because collaborative development is faster, even though one person can handle all the development tasks
2.
The trend in Web development jobs is toward: a. b. c. d. mobility. management. specialization. generalization.
3.
Which choice lists the three general skill disciplines into which Web development team job roles can be placed? a. b. c. d. Design, clerical, and customer service Administrative, design, and creative Management, creative, and technical Management, design, and writing
4.
What is the primary job of a Web designer? a. b. c. d. To improve search engine placement To create impressive graphics so that visitors will return to the site To create a consistent look for the site that conforms to the specifications To correctly implement the latest technologies so the site competes well in the market
5.
What should be contained in a Web design portfolio? a. b. c. d. Links to Web sites you like Samples of your Web design work Your personal Web journal, or blog Critiques of other designers' Web sites
Version 1.0
2-24
Version 1.0
3Lesson 3: Web Project Management Fundamentals

Objectives
By the end of this lesson, you will be able to: 1.1.11: Determine site project implementation factors (includes stakeholder input, time frame, scope, desired functionality, required technologies). 1.1.12: Create a Web project plan, including development timetable, site rollout plan. 1.2.2: Document customer expectations and feedback. 1.2.3: Communicate plans and progress regularly to ensure that completed project meets stakeholder/customer expectations. 1.2.4: Identify and manage changes in project scope (includes scope creep). 1.2.5: Document changes in development plan. 1.2.6: Create a project tracking report. 1.2.7: Conduct a project evaluation, including acceptance documentation, summary of technologies used, project style guidelines.
3-2
1. Which document defines the ways that project success will be measured? a. b. c. d. 2. Project plan Needs analysis Statement of Work Project schedule
How does the site rollout plan differ from the Web project development plan?
3.
Why should you create a project tracking report?
Version 1.0
Lesson 3: Web Project Management Fundamentals
3-3
Web Project Management Phases

As you saw in the previous lesson, a process (i.e., methodology) can increase the success rate of any project, including Web development projects. In this lesson, you will learn about project management fundamentals and the ways in which they relate to the process of developing a Web site. The phases through which a project progresses on its way to completion are collectively called the project life cycle. The Project Management Institute (PMI), a non-profit membership organization that sets ethical and professional project management standards, has defined a project management life cycle with the following five phases: Initiating phase Planning phase Executing phase Controlling phase Closing phase
Each phase is marked by the completion of one or more deliverables. The conclusion of each project phase usually includes a review of performance to date and a decision about whether to proceed to the next phase. Project management phases (and the Web development phases that you will see later in this lesson) often overlap. Typically, the executing and controlling phases of a project occur simultaneously. It is also important to note that some phases may occur more than once throughout a project's life cycle.
Initiating a Web development project

The initiating phase sets the foundation for a Web development project. This phase starts when a customer expresses a need for a Web site. A customer can be another company, an individual, another department within the same company, or even the Web team itself (in the case of internal Web site projects such as intranets or repositories).
OBJECTIVE 1.2.2: Customer expectations and feedback
The initiating phase of a Web project consists of the following tasks: Conducting a needs analysis Determining project objectives, assumptions and constraints Developing a Statement Of Work (SOW)
scope The goals and tasks of a project, and the work required to complete them.
Once the need for a Web site is determined, the next job is to document the scope of the project. In other words, you need to determine the goals of the Web site and the tasks that need to be performed to achieve those goals.
Version 1.0
3-4
Needs analysis
needs analysis The process of determining a customer's needs by acquiring information, processing and evaluating the information, then creating a plan of action to address the needs.
A needs analysis identifies the problems, challenges or needs that the project must resolve or address. In order to conduct a thorough needs analysis for a Web site development project, you must understand the customer's desires as well as the customer's business. As a Web project manager, when you meet with a customer for the first time about the customer's need for a Web site, your job is to elicit needs information, such as what the customer wants or the problem the customer is experiencing, the customer's time frame, and the budget. You must get as much information as possible from the customer, and from all systems and individuals that will be affected by the project. Many Web teams develop a standard customer survey or questionnaire for this purpose. A questionnaire will help you ensure that all important information is gathered prior to moving forward with the project. A company's Web site can have a major impact on the way that company does business and the way it is perceived by the world. A Web designer or development team has a responsibility to research the customer's industry and the customer in particular to gather as much detail as possible. After an initial meeting, the project manager should work with the customer to create the needs analysis document. Once a Web project manager understands the customer's needs, he or she can create a plan of action, which will be stated as a list of goals and objectives.
NOTE: The needs analysis is very important in determining the customer's needs to ensure that the project plan meets those needs.
OBJECTIVE 1.1.11: Site project implementation factors
Project goals, assumptions and constraints

The needs analysis determines a customer's requirements and desires. The project goals, or objectives, specify the steps you and your Web development team will perform to satisfy the customer's needs. Following are some examples of goals for a customer's Web project: Sell our widgets online. Create a community of people who are interested in our products. Recruit employees. Provide support to our customers. Increase awareness of our brand.
Ideally, project goals should be measurable as well as specific. For example, rather than stating a goal as "decrease customer support phone calls," a better objective would be stated as "decrease customer support phone calls by 20 percent over the next 6 months."
stakeholder A person or group with an interest in a project and the power to exert influence (either positive or negative) over the project and affect results.
All stakeholders must understand and agree to the project objectives. These objectives are the yardstick by which the success or failure of your Web development project will be measured. In addition to agreeing on the goals of the project, stakeholders must also discuss and agree on assumptions and constraints. Project assumptions are circumstances and events that are partially or completely outside of the project team's control, but are necessary for the project to succeed. For example, the Web site project plan might assume that adequate staff will be available to develop the site, and that the new server on which the site will be deployed will be installed in time for testing the site. Constraints are factors that limit the project and that are outside of the project team's control. Examples of constraints include deadlines, budgets and available technology.
Version 1.0
3-5
Statement Of Work (SOW)

Statement Of Work (SOW) A contract to initiate a project; the contract contains project goals and specifies how those goals will be met.
Finally, you and all stakeholders should define the ways that project success will be measured. At the end of the initiating phase, the project manager should complete a Statement Of Work (SOW) before proceeding to the next phase. The SOW outlines the requirements for each project task to ensure that the objectives are met. The SOW should contain clearly defined goals and an agreed-upon plan to achieve them. The SOW can be created between individuals, between departments, between individuals and departments, and so forth. If the SOW is completed between your organization and an outside organization or individual, the payment structure can be included in the SOW. By determining the customer's needs during the initiating phase, you can create a Web site that meets those needs, and you can determine the tasks, time and cost required to complete the Web site.
Planning a Web development project

OBJECTIVE 1.1.12: Web project development and rollout plan
The Web project planning phase addresses project details the specific ways that you are going to achieve the goals and objectives of your Web development project. Project planning involves identifying all the tasks required to achieve the project goals, the people who will perform those tasks, and the resources that will be required. Planning also involves estimating the time each task will take to complete and determining project tasks that are dependent upon one another.
The project schedule

project schedule A document that lists the planned dates for performing tasks and meeting goals defined in a project plan.
During the planning phase, you must develop a project schedule, or development schedule. A project schedule lists the planned dates for performing tasks and meeting goals identified in the project plan. To develop a project schedule, you should meet with the entire Web development project team to determine the time and money required to complete each task. You should then outline the required tasks and assign resources (money, time and people) to each task. The development schedule should also include a site rollout plan. A site rollout plan details the implementation steps for launching the site after it is built. In the site rollout plan, it is important to include the time, money and skills that will be required to test and deploy the finished Web site. You will learn more about site rollout later in this lesson and the course.
The Web development project team

As you saw in the previous lesson, project teams can (and often do) consist of individuals from different departments. For example, your Web development project team may consist of Web designers, programmers, HTML coders, a project manager, and representatives from the marketing and accounting departments. By contrast, you may work as part of a very small Web team in which each person serves several roles. Each person, or each role that a person is serving, offers a different perspective and perhaps a different set of priorities. Consider the following examples: The person from the accounting department is primarily concerned with the costs of developing, testing and maintaining the Web site, and the project's budget constraints. The person from the marketing department is concerned with the Web site's tone, style and message, its effect on customers' perceptions of the products or company, and its promotional or advertising functions.
Version 1.0
3-6
The Web designer is concerned with the way the site looks and its functionality (the ways that end users will interact with it). The IT department members are concerned with the site's effect on the company's computer infrastructure, and the amounts of bandwidth and server resources it will require. The project manager is responsible for satisfying these disparate priorities as he or she seeks to complete the Web development project on schedule and within the project constraints.
The final goal of the planning phase is to have a development plan that outlines tasks, responsibilities, budgets and deadlines. However, remember that planning is a constantly evolving process that lasts throughout most of the project life cycle.
Executing and controlling a Web development project

During the executing and controlling phases of a Web development project, work is performed (executed), progress is monitored, and corrective action is taken as needed (controlled). It is during the executing and controlling phases the actual work of designing and creating the Web site takes place. For Web development, the executing phase can be divided into five subphases: Conceptualization Structure Design and analysis Production and testing Evolution
Conceptualization
Conceptualization is the process of developing the vision and strategy for the Web site. The site vision will encapsulate the overall objectives of the site. This vision is similar to a company mission statement that provides the overview for its purpose, creation and existence. You will learn more about conceptualization, vision statements and strategy in the next lesson.
Structure
The structure subphase involves preparing the transactional, navigational and hierarchical construction of the Web site's content. During this phase, the information architect will create the overall structure of the site. Mindmaps, storyboards and flow charts are used in this phase. You will learn more about methods of planning and structuring a Web site in the next lesson, and about Web site navigation later in the course.
Design and analysis

Once the navigation scheme has been created and all stakeholders have agreed on the information architecture, the designer's work begins. During this subphase, the designer will create the Web site's look and feel. This process often starts with the designer(s) creating quick design sketches that show a variety of ways that the information architecture could be implemented. These sketches
Version 1.0
3-7
are called "comps," an abbreviation for composites or comprehensive artwork. The designer will show these to the customer, gather feedback, and revise the comps until the customer is satisfied. Analysis is the process of testing concepts for achieving the site vision. Analysis allows you to determine whether modifications must be made to the design before the next phase. Once the customer has signed off on a design comp, the designer's job is to develop completed versions of the comps, and create graphics or Web page templates that can be used by the Web team members who will implement the fully functional site. You will learn about the process of designing Web sites in more detail later in the course.
Production and testing

During this subphase, the completed design is translated into XHTML pages, and any necessary functionality is programmed or implemented. The production team commonly works closely with the designers at the beginning of this phase to decide the best ways to implement the design. By the end of this phase, the different parts of a Web site, including graphics, XHTML, scripts and so forth, all come together to make a complete and functional site. In later lessons, you will learn about the various processes involved in producing a Web site, as well as the technologies involved. Once the Web site is complete, the customer and the Web development team members must test and debug the site.
Evolution
Evolution is the process of refining and updating the site design. This subphase depends upon the feedback from stakeholders and the results of your testing. Evolution is ongoing in Web development.
OBJECTIVE 1.2.7: Project evaluation
Closing and evaluating a project

The final phase of a Web development project is the closing phase. During the closing phase, your team should evaluate the project schedule, budget, scope, resources and assignments to determine the aspects of the project that worked well and the changes that should be implemented in the future. A project is deemed a success when it is completed within the budget and time frame specified, and the finished product meets quality standards. At the end of the closing phase, you should receive a formal acceptance of the Web site from the customer, a documented history of the development project, and recommendations for revising the project plan for future Web development projects. You must also establish how or at what point the Web site will be turned over to the customer. This step includes defining the responsibilities and duties of the project team and the customer. In some cases, the Web development team may stay involved with support and maintenance of the site; in other cases, the customer takes on these responsibilities after receiving the finished Web site. You should document the technologies used on the site (such as programming languages and server components) and project style guidelines (such as fonts and colors used in the design) that will be needed by the people who will maintain the site, whether it is your team members or someone else's. The transition may be difficult if you assume that the customer will be ready and able at any time to accept the Web project and associated maintenance.
NOTE: Consider that in many cases, you may also be responsible for ongoing maintenance of a Web site.
NOTE: The Web designer's job does not necessarily end when the completed site is posted to the Web.
Version 1.0
3-8
Project Documentation and Communication

OBJECTIVE 1.2.3: Communicating progress to stakeholders
As a Web development project progresses, the project manager is responsible for keeping project participants informed in order to keep the project running smoothly. Regular communication with the customer and all stakeholders helps to keep the project on track and avoid unnecessary work. Understanding the status of a project can also help participants focus on areas that need immediate attention. Documentation of progress is an important part of communication both during and after a project.
Scope and scope creep

OBJECTIVE 1.2.4: Changes in project scope
The end product or ultimate goal of a project (in this case a Web site), along with the tasks required to achieve that goal constitute the project scope. A common problem associated with project management is the tendency for the project's scope to increase over time. Any changes in the schedule, cost or performance required to complete the project can affect its scope. Issues often arise during the project that were not initially considered. You may be able to contain the scope of the project, but only by introducing subprojects, which also must be managed.
scope creep Gradual increases in project scope that can undermine the success of a project. NOTE: Scope creep is usually second only to insufficient funding as the most common problem in implementing a project. Insufficient funding can often occur because of scope creep. One forgotten step can put a project behind schedule, which can cause project costs to dramatically increase. OBJECTIVE 1.2.5: Changes in development plan
Changes in project scope tend to occur in small increments, and therefore might seem negligible. For example, when a customer sees the Web site design comps, he may have a great idea for another section of the site or for additional functionality. Small increases in scope will add up. These gradual increases are called scope creep. Increases in scope should be documented in the same way that the initial goals and objectives were documented. Although it is tempting to accept every additional request made during the project, the project manager needs to know when to accommodate requests, and must advise the customer that increases in scope will require increases in resources and time, or that additional features could be implemented in a separate project as part of a "phase 2." If you do not adequately manage scope creep, the success of your Web development project may be compromised.
Adjusting the project plan

Certain features are critical in every Web site. In an e-commerce site, the basic e-commerce functionality must be functional before you can launch the site. In order to meet a rollout deadline or stay within budget, however, it may be necessary to delay or scale down some secondary features, such as customer review functionality or recommendation functionality. After the planning stage, you should be able to identify the tasks that are most important and the tasks that can be delayed without affecting the completion of other tasks or the overall project. Being aware of critical tasks will help you make adjustments to ensure that the project is completed on time.
Paper trail and project tracking report

OBJECTIVE 1.2.6: Create a project tracking report
During the executing and controlling phases of a Web development project, you should document project tasks to provide a paper trail, or record, of the team members who worked on tasks, and the dates they started and completed them. The project tracking report is the document that records this information and provides your paper trail.
Version 1.0
3-9
Team members should sign and date this document to confirm that they completed the tasks. By documenting who did what and when on the Web site as the project advances, you can track its progress by determining whether tasks are starting and finishing on time, and whether tasks are being completed within the budget. The paper trail does not need to be documented on paper; many team-based Web development applications can help to automate parts of the project documentation processes. By tracking these factors while the project is still in progress, you can solve problems as they occur and make necessary adjustments. Documenting a project promotes team member accountability and enables stakeholders to monitor various stages of the project. Tracking the progress of a Web site development project from beginning to end is essential for keeping stakeholders informed and for keeping the project on track. Many complex project management software applications exist that can manage every part of the project, including documents, contacts, tasks, schedules, issues logs and more.
Issues log
You should keep an issues log in which you document problems that need to be escalated to managers or executives outside the Web development team for resolution. Issues often arise during the course of a project that require authoritative decisions in order for the team to complete tasks and keep the project on track. Examples of issues that may arise during the Web development process include design or programming bugs, requested changes to the design or content of the site, and server or browser incompatibilities that need to be addressed. You can use the issues log as backup documentation to support any time, resource or cost changes that may accrue due to circumstances beyond the project team's control. In the following lab, you will learn about some software applications available for creating project tracking reports. Suppose you have just been assigned as the project manager for a Web development project. Although you may not have much experience managing projects, you realize immediately that you have many details to organize. Choosing a reporting application with features that are appropriate and helpful for your project can help you manage resources and progress, and will provide records of all you accomplished and learned by the end of the project. You can also budget the cost of this software into your project.
Lab 3-1: Evaluating project-tracking software

In this lab, you will review descriptions of various project-tracking software to learn about available applications. Then you will consider the reporting features you would use for a Web development project, and determine which applications might be most useful. 1. 2. 3. Browser: Open the CNET Download home page at www.download.com. Search for the term "Project Tracking." Look through the descriptions of software applications that are categorized under project tracking. Then answer the following questions in the spaces provided.
Version 1.0
3-10
4.
What types of information about projects can be tracked?
5.
Which of the information types you listed in Step 4 would you track for a Web site development project in which you are the project manager, Web designer or HTML coder?
6.
Consider that you could budget the cost of this software into your project. Compare the reporting features of applications with their relative costs. Which applications seem to provide the features you need at the most reasonable price? Do you think that a more costly application may be a better investment for this and future projects?
The process you use for tracking a project does not need to be complex. In this lab, you were introduced to some of the project-tracking software available, and you compared the different features, costs and types of information they report.
Version 1.0
3-11
Case Study
Because When You Assume

In his three years as project manager for Wow Web Design, Andre had overseen the development of several Web sites for coffee shops. So, when Coffees R Us contacted Wow saying that they sell coffee and need a Web site, Andre was pretty sure he knew what they wanted. At the initial meeting with the customer, Andre began by describing his ideas for the Coffees R Us site. It would be a "hip place where customers could learn about the coffee drinks and atmosphere at Coffees R Us, and get a schedule of poetry readings and musical acts." After the first 30 seconds of Andre's presentation, the CEO of Coffees R Us was shaking her head. Andre clearly knew very little about Coffees R Us, which was not a caf but a coffee distributor that sells its products wholesale in bulk to grocery stores and restaurants. The CEO waited patiently while Andre finished his presentation, then she thanked Andre and left. The next day, she sent Andre an e-mail message explaining that she was seeking a Web development company that takes the time to understand its customers, and that she was not interested in working with Wow Web Design. * * *
Consider this scenario and answer the following questions. Consider the five phases of project management described in this lesson. Which important steps did Andre skip? Which steps did he perform? Would project documentation have helped Andre in this scenario? Why or why not? If so, what type of documentation? Would project-tracking software have helped Andre in this scenario? Why or why not? If so, in what ways?
Version 1.0
3-12
Lesson Summary
Application project
In this lesson, you learned about the importance of gathering and documenting the needs of the customer as part of the initiating phase of a Web development project. You learned that the result of this process should be a needs analysis. Try this activity with a small group of friends or colleagues. Have one person act as a customer who needs a Web site. The person playing the role of the customer should communicate what he or she wants to the project manager. The project manager should then determine the information that is lacking in order to create a needs analysis, and should ask appropriate questions to determine all the customer's needs and objectives. After the initial meeting between the project manager and customer, the project manager should create a list of the customer's needs, constraints and assumptions. The project manager and customer should then discuss this list and use it to develop a list of objectives for the project. How did the project manager do? Did the customer agree with everything on the project manager's list?
Skills review
In this lesson, you learned about the basics of Web development project management. You learned that the first step in creating any Web site is to determine and document the needs of the customer. Once you fully understand the customer's needs, as well as the constraints and assumptions of the project, you can begin the process of creating a project plan, then implementing that plan to develop and deploy a Web site or other Web project. Now that you have completed this lesson, you should be able to: 1.1.11: Determine site project implementation factors (includes stakeholder input, time frame, scope, desired functionality, required technologies). 1.1.12: Create a Web project plan, including development timetable, site rollout plan. 1.2.2: Document customer expectations and feedback. 1.2.3: Communicate plans and progress regularly to ensure that completed project meets stakeholder/customer expectations. 1.2.4: Identify and manage changes in project scope (includes scope creep). 1.2.5: Document changes in development plan. 1.2.6: Create a project tracking report. 1.2.7: Conduct a project evaluation, including acceptance documentation, summary of technologies used, project style guidelines.
Version 1.0
3-13
Lesson 3 Review
1. What is the Project Management Institute (PMI)?
2.
What is the purpose of an issues log?
3.
How can project scope be controlled and scope creep avoided?
4.
Why must all stakeholders agree to the Web site project objectives?
5.
Briefly describe a situation in which a stakeholder on a Web development project may require a change to the project plan.
Version 1.0
3-14

Version 1.0
3-15
Activity 3-1: Managing your time and resources

In this activity, you will practice managing a project by considering the steps you take to perform everyday tasks you are already familiar with. 1. Consider a challenge or need in your life that will require you to takes steps and complete tasks to resolve the situation. For example, you may need to complete homework or a term paper, find a job, or buy a car. Without realizing it, we approach many of our regular or everyday functions as projects. Write your chosen project in the space provided.
2.
Conduct a needs analysis for the personal project you chose in Step 1. In other words, list the specific needs and desires you have that completing this project will address.
3.
Create a list of objectives, or goals, from the needs analysis you created in Step 2. Also list the assumptions and constraints that affect your project.
4.
Create a plan listing the specific steps that you need to take to achieve each goal that you listed in Step 3. Include a schedule for performing and completing tasks.
5.
Later, as you are executing and controlling your project, consider the project plan you created here. Did you need to modify your project plan at any point during the project? Did you experience scope creep?
Version 1.0
3-16
6.
Later, after your project is complete, write a summary of its progress and results. Are there aspects of your project plan that should have been different? Did you successfully determine all your needs upfront, or did you realize additional needs as the project progressed? Were your goals appropriate to achieve your project needs? Would you include more or fewer steps to achieve each goal next time?
Although you may not always be aware of it, the principles involved in the project life cycle can be applied to many daily and common personal activities. Of course, it is not always feasible or necessary for an individual or small group to apply a formal structure to every project. However, understanding that all projects consist of needs, objectives and a plan will help your completion of nearly any task.
Optional Lab 3-1: Researching project management principles

In this optional lab, you will use the Web to learn more about general project management principles and those specific to Web development project management. 1. 2. 3. Browser: Open http://en.wikipedia.org. You should see the main page for the Wikipedia site. Perform a search on Wikipedia for the term Project Management. Read the results page, and explore some of the Web pages that it points to in your results. Return to the results page, and consider the first result, which includes Wikipedia's definition of project management. This definition cites several approaches to project management. What are these approaches?
4.
Which approach to project management does this coursebook lesson discuss?
5.
What is PERT?
6. 7.
Browser: Open www.adobe.com/resources/techniques/. Explore the Website Production Management Techniques page. Is the process described on the Adobe site the same or similar to the five phases of project management you studied in this coursebook lesson? How are they similar? How are they different?
Version 1.0
3-17
Project management is a much larger subject than can be covered in this course. If you are interested in more information or a project management career, you can learn much more on the Web, in numerous books, and through the Project Management Institute resources.
Lesson 3 Quiz
1. Each project objective should answer which of the following questions? a. b. c. d. 2. Who are the stakeholders? What is the customer's problem or needs? What tasks will we perform to meet this goal? What steps will we perform to satisfy the customer's needs?
What is the final product of the initiating phase in the project life cycle? a. b. c. d. Project plan Project schedule Statement of Work (SOW) Non-disclosure agreement (NDA)
3.
A project's scope can be defined as: a. b. c. d. the resources available to the Web development project team. the project plan created by the Web development project manager. the end goal of the project and the tasks required to achieve that goal. the legal contract that details the customer's expectations and the project team's deadlines.
4.
Where should you document problems that need to be escalated to managers or executives outside the Web development team for resolution? a. b. c. d. Issues log Project plan Project schedule Statement of Work
5.
Which document lists the planned dates for performing tasks and meeting goals identified in the project plan? a. b. c. d. Project plan Needs analysis Project schedule Statement of Work
Version 1.0
3-18
Version 1.0
4Lesson 4: Web Site Development Process

Objectives
By the end of this lesson, you will be able to: 1.1.4: Determine the audience for the site. 1.1.5: Develop a Web site vision statement. 1.1.6: Develop a site strategy and identify strategy implementation tactics. 1.1.7: Use the mindmapping process to structure a Web site. 1.1.8: Set design goals appropriate for the business/organization represented by the site and the site's intended audience. 1.1.9: Create a site metaphor. 1.1.10: Develop site design and architecture specifications. 1.1.16: Use flowcharts and Web wireframes to determine page layout. 1.2.8: Create Web page and site templates that fulfill design specifications. 1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers.
4-2
1. Which of the following defines the scope and intent of a Web site? a. b. c. d. 2. Tactic Strategy Metaphor Vision statement
Which Web design approach suggests an analogy with other ideas or objects, creating a familiarity for users of a Web site? a. b. c. d. Tactic Strategy Metaphor Vision statement
3.
During which phase of the Web development process would the development team create the vision and strategy for its Web site?
Version 1.0
Lesson 4: Web Site Development Process
4-3
Bottom-Up Approach to Web Development

OBJECTIVE 1.1.4: Determining site audience
As you saw in the previous lesson, it is important for Web designers to learn the customer's needs and the site's audience before forming ideas about the design and objectives for the site. These factors determine all the components needed for the site to be successful, from its look and feel to its functionality. You can establish a set of desired user behaviors for a Web site. Each of these desired behaviors introduces possible scenarios to be considered. Scenarios greatly facilitate the process of developing a Web site. They first provide you with a clear image of the project scope, and then they serve as a tool during site development to keep the project on track, budget and schedule.
NOTE: You should consider the goal of establishing desired user behaviors: What do you want users to do at your Web site?
It is tempting to approach the design process from the top down: Define and design the look and feel of the site, then conform user interaction to that particular design. However, the scenario-development process is centered on identifying desired system behaviors in response to user behaviors. Thus, the Web site design process is reversed. The look, feel and functionality of a Web site emerge as the various user scenarios are developed from the user's point of view a bottom-up approach.
Understanding the Business Process

OBJECTIVE 1.1.8: Design goals for customer and audience
The role of the Web designer is becoming more complex. In the past, Web designers could suffice with the skills to create a Web presence for the customer organization. Today, having a Web presence is not enough. The Internet is no longer a repository of electronic brochures, but rather a collection of increasingly sophisticated technologies that offer the ability to develop lucrative Internet-based businesses. The concepts for these successful electronic businesses are varied. Generally, they can be placed into two categories: sites that deliver products intrinsically dependent on the Internet (such as interactive games or tools for searching the Internet), and sites that deliver existing products and services to a global market via the Internet. What the known successful Web sites have in common is that they focused on the goal of fulfilling unmet needs for Web site users. Book selling is an excellent example. Bookstores in major metropolitan areas are exciting, large and comprehensive. However, they cannot each carry 5 million titles, and these stores are only accessible to people near the major metropolitan areas. Amazon.com responded to this need. Anyone with access to the Web now has access to the millions of book titles at www.amazon.com. How does one start such a business? It begins with a vision. In this case, the vision was to sell books on the Internet without maintaining an inventory. Jeff Bezos, founder and CEO of Amazon.com, realized that publishers are always faced with a difficult dilemma: They must invest heavily in the production of a book. In turn, they sell this book to a retail store at wholesale price. If the retailer is conscientious, it will pay the publisher 30 days later. Amazon.com approached publishers and told them that each book it sells on the Internet will be paid for before it is shipped from the publisher. In return, Amazon.com wanted the capability to "drop-ship" books directly from the publisher to the reader. Due to its success, Amazon.com's model has changed somewhat. The company now has huge inventories of many books and other products, which results in a quicker turnaround for high-volume items. More than 70 percent of Amazon.com's business is with repeat customers.
NOTE: Again, understand that the Web designer's job does not necessarily end when the completed site is posted to the Web.
Version 1.0
4-4
The Amazon.com success story still provides a strong and useful example for electronic business models.
Defining a Web Site Vision

OBJECTIVE 1.1.5: Web site vision statement
As mentioned in the previous lesson, defining a Web site vision statement is a key activity that takes place during the conceptualization phase of a Web development project. The vision statement is the fundamental framework that defines the scope and intent of a Web site. This statement should be concise enough that everyone involved in the development process can focus on fulfilling the intended vision. The vision statement should include a value and a measurable goal. The following example can be considered a good vision statement for a business such as Amazon.com: We will become the world's pre-eminent Internet book retailer, selling $1 million in books per day by the end of next year. Inherent in this statement is a value ("pre-eminent Internet book retailer") and a measurable goal ("$1 million per day by the end of next year"). Many companies post some version of their vision statements (also often called mission statements) on their Web sites. These statements may include other details to appeal to their customers, but generally define the scope and intent of the businesses they represent. In the following lab, you will create a vision statement for a Web site. Suppose that you want to start your own online business. You might develop the Web site yourself or you might employ a team of professionals to develop it for you. In either case, creating a vision statement is a good place to start your Web-based business. If you understand the questions your vision statement must answer and the information it must provide, then your vision statement will help you focus your efforts as you launch your business, as well as focus your team on creating the most appropriate and effective site for your business.
NOTE: A vision statement provides a solid goal toward which to work. Vision statements are just as useful for a small site as for a large ecommerce business because they help all developers focus on achieving goals of any size.
NOTE: Vision statements are as useful for personal goals as they are for business goals. Have you ever written your personal goals in this type of format? Was it helpful? You can try applying vision statements to personal goals in Activity 4-1: Creating a vision statement for a personal goal.
Lab 4-1: Creating a vision statement for a Web site

In this lab, you will create a vision statement for your Web site. Write your answers in the spaces provided. 1. What are some values that can be stated for your Web-based business?
2.
What are some measurable goals that can be stated for your Web-based business?
3.
Combine these values and goals, and write a concise vision statement.
Version 1.0
4-5
4.
Browser: Visit a search engine such as Yahoo! or Google, and conduct a search for the phrase "Company Vision Statement." (For more results, you may also try searching for "Company Mission Statement.") Also visit the Web sites of some of your favorite online businesses, and look for the company vision statement at each site. Do many Web sites post their vision statements for the public to view? What details are generally omitted from a company vision statement posted on its public site? What new details are included? What version of your company vision statement would you post on your site for customers to see?
From Vision to Strategy

So far, you have created a vision statement that will guide your efforts to create a successful Web site. The next step is to determine how you will achieve that vision. For this, you need a strategy.
OBJECTIVE 1.1.6: Site strategy and tactics
Defining the Web site strategy

Your strategy must be focused on persuading users to spend time on your Web site and return to it in the future. In fact, the goal of electronic commerce indeed, of any business is to attract and keep customers. To accomplish this goal, you can use the unique features of the Internet to your advantage. As stated earlier in this course, the Internet can address individual needs. It is more similar to the local grocery store than to the media of television or publishing. You enter a grocery store when you please. Inside, you decide whether to just browse or to buy, and you choose how you move around the store. Thus the Web strategy is not to build the best looking or most useful Web site. The basic strategy of a business Web site is to attract and retain customers. The details of implementing a Web strategy make the task complex.
NOTE: The vision statement gives focus to all the efforts that follow it because all efforts (strategy) need to support the vision. This focus can help streamline all tasks that follow.
NOTE: You can analyze a competitor's strategy for attracting and retaining customers, and tactics for supporting site strategy in Optional Lab 4-1: Analyzing the competition's strategy and tactics.
Defining the Web site tactics

A tactic is a method used to implement your strategy. For example, if you want to gather personal information from your users, you need a tactic. A widely used tactic is to offer something in exchange for that information. A business might offer a screen saver, software, discounts or a free product in return for the requested information. Another common tactic rewards the "first-time buyer." If you place an order now, you will receive an additional discount or bonus. The net effect is that you now have the customer's information. The next time he or she visits your site, you can use this data to complete the customer's purchase or transaction much more quickly. You can also market to users based on their preferences from previous purchases. In the following lab, you will develop tactics to support a Web site vision and strategy. Suppose you are launching your own online business. Your vision for your site is strong, but you need ways to attract customers to your site so you can share and implement your vision. If you can develop solid strategies that help accomplish your vision, and devise tactics for carrying out your strategies, you will be able to create a Web site that appeals to users, builds a customer base, and helps your business to flourish.
Version 1.0
4-6
Lab 4-2: Developing tactics to support a Web site strategy

In this lab, you will develop some guiding principles to support your Web site's vision statement and associated strategy. Write your answers in the spaces provided. 1. Consider the vision statement you created in the previous lab. Develop two strategies to support your vision.
2.
Consider the strategies you specified in Step 1. Develop two tactics for each strategy to support your vision.
3.
Browser: Visit the Web sites of some of your favorite online businesses. Can you identify some of the strategies these sites are using to support their visions? What tactics do you see employed to promote these strategies? Which tactics do you think are most effective? Which tactics are least effective? Why?
Web Site Specifications

OBJECTIVE 1.1.10: Site design and architecture specifications
After you have determined the audience for the site, and you have created a strategy for your Web business and tactics to achieve that strategy, it is time to create specifications. Specifications define the features, content, functionality and structure (or architecture) that the site requires in order to meet the customer's needs and achieve the site's goals. Specifications can be divided into four types: Functionality specifications Content specifications Architecture specifications Design specifications
Functionality specifications
Functionality specifications indicate the functions or activities that the site should be able to perform. For example, the functionality specifications for an e-commerce site will usually include search features, a shopping cart, credit card processing and so forth.
Content specifications
Content specifications indicate the general types and topics of content that the site will include, such as text describing the company, product descriptions and images, shipping information, and frequently asked questions.
Version 1.0
4-7
Architecture specifications
Architecture specifications indicate the way that the site will be structured and ways that users will navigate it. For example, an online shoe store might organize the shoes into a group for men and a group for women, with additional subgroups of dress shoes, casual shoes and athletic shoes. The shoes might also be separately grouped by price range, brand, color and so forth. The site architecture specifications help you to determine ways to organize and relate these types of information for navigation and searching.
Design specifications
Design specifications are used to plan the general look and feel of the site, including the fonts, colors and images that will be used. For example, many companies have standards for the sizes in which their logos can appear for designated uses, as well as the colors and fonts that should be used for specified purposes and areas on the site. These design requirements are discovered and recorded during the requirements gathering phase of the project. When the design specifications are created, the Web designer determines how to satisfy these requirements. Generally, site design templates (which will be discussed shortly) are most useful for this purpose.
Creating site specifications

Web site specifications do not need to be complicated. Often, they can be created on a white board or developed through a series of e-mail messages. The important point is that the final document whatever its form should answer this question: What are we going to create? The customer and any other stakeholders should review and approve all specifications before the project moves forward to the design phase. In the following lab, you will determine the functions that your Web site will offer. Suppose you have created a vision for your own Web-based business, and you have identified the strategies and tactics that will help you realize your vision. The next step is to create the functionality, architecture, content and design specifications for the site. Begin by considering the functions that your Web site must offer in order to accomplish your goals. Functions include site capabilities such as animation, interactivity, catalogs, downloadable files, streaming audio or video, site and database searching, user-input forms, e-commerce capabilities, and so forth. The best plans will not be successful if they are implemented poorly or incompletely.
Lab 4-3: Developing the specifications for a Web site

Now that you have a vision, a strategy and tactics, you can continue the planning process by defining your Web site's specifications. Write your answers in the spaces provided. 1. What products will your Web site offer?
2.
What services will your Web site offer?
Version 1.0
4-8
3.
What information will your Web site offer?
4.
Consider some of the functions that your Web site must offer, based on your answers in Steps 1, 2 and 3. What functions are crucial for the success of your site? What functions might be helpful but are not required? What functions are unnecessary? Use this information to create functionality specifications for your site.
5.
Browser: Visit the Web sites of some of your favorite online businesses. What functions do these sites commonly offer? Do any of the sites offer an unusual function? Do the unusual functions seem useful, intriguing or unnecessary? What functions do you see on other sites that might be useful on your site?
6.
Consider the functionality specifications you determined in Step 4. What types of content will your site need to provide the desired functionality? What content might be helpful but is not required? What content is unnecessary? Use this information to create content specifications for your site.
7.
Consider the functionality and content specifications you determined in Steps 4 and 6. How will you structure and organize the content on your site to provide the desired functionality? How will users navigate this information to maximize the desired functionality? Use this information to create architecture specifications for your site.
8.
Consider the functionality, content and architecture specifications you determined in Steps 4, 6 and 7. With these requirements in mind, consider the general look and feel you want the site to have. Think about logos, images, colors, fonts and so forth, which you will use consistently throughout the site. What choices do you prefer? What choices seem necessary to enable your other specifications? What choices might inhibit your other specifications? Use this information to create design specifications for your site.
9.
Browser: Visit the Web sites of some of your favorite online businesses. What types of content do these sites typically offer to provide their functionality? What types of architecture do these sites employ to organize their content? What design features are common or unusual? How does design complement or distract from the functionality, content and architecture of these sites?
Version 1.0
4-9
Site design templates

OBJECTIVE 1.2.8: Web page and site templates
You will implement the design specifications that you create for your site during the design phase of the Web project. Generally, this phase begins with the designer creating a design "mock-up" or sample, which is often a simple example image of the site's proposed appearance. Typically, you will revise the mock-up until the customer is satisfied that it fulfills his or her requirements as stated in the specifications, and all stakeholders agree on the look and feel for the site. You will generally create your design mock-up at the same time that the functionality of the site is programmed or acquired and the site's content is being finalized. After your design mock-up has been approved, you can begin creating Web pages based on the mock-up design. Design professionals prefer to use templates when creating their Web pages. Using a Web page template will help you apply your design consistently and quickly to each page in your site, ensuring that the site has a unified look and feel that does not vary from page to page. A Web page template is an X/HTML page structure (and sometimes an associated style sheet) that acts as the foundation for each page you create. Your page template must always fulfill design specifications, so it is critical to ensure that all stakeholders reviewed and approved the template design (i.e., mock-up). Most major Web-development applications, such as Expression Web and Dreamweaver, allow you to create your own Web page design templates. You can also find examples of ready-made page templates at the following sites, some of which you can use free of charge: Free Website Templates from Virtual Promote (http://freesitetemplates.com) TemplateMonster.com (www.templatemonster.com) Hoover Web Templates (www.hooverwebdesign.com/templates)
Ready-made templates can provide you with some good ideas for your site's look and feel. However, these pre-designed templates are unlikely to fulfill all your design specifications, so be sure to modify any ready-made templates you use according to your site's needs. Later in this course, you will create and apply design templates to your Web pages so you can see how they ensure consistency and speed development.
Designing for PDA-based vs. traditional browsers

OBJECTIVE 1.2.9: Designing for PDA-based vs. traditional browsers
When you are designing the layout of your site, it is important to consider the growing number of people who surf the Web on mobile devices, also known as PDAs (personal digital assistants). It is often well worth the time to create separate pages or at least separate style sheets for PDA-based browsers, as the individuals who use them often have disposable income they can spend on your site. Keep in mind that PDA browsers are not as powerful as traditional browsers, and do not handle client-side scripting (e.g., Jscript) very well. Stick to basic XHTML and style sheets, and avoid interactive elements. Also keep in mind that size matters. PDA screens are small. Avoid using static page widths, and keep in mind that users are paying for the time they are using their devices, so use few words and small images so that your pages load quickly.
Version 1.0
4-10
Remember to validate your code. The W3C provides a validation site that will check your code for mobile friendliness: http://validator.w3.org/mobile/. As with pages that you create for traditional browsers, test, test, test. For mobile pages, you may want to test your site on a BlackBerry, an iPhone, and an Android (Google) phone, for example.
OBJECTIVE 1.1.9: Site metaphor
The Metaphor
A metaphor suggests a likeness or pre-existing identification with other things or experiences. The most common representations used by Web sites are brochures, prospectuses and catalogs all metaphors of the print medium. Some sites use the familiar metaphor of television. As often pointed out, the Internet offers different opportunities for user interaction. The Web site visitor is more like a visitor to a store or an art gallery who is interested in the total experience of the visit, and not just a product purchase or a look at a work of art. Even when it is appropriate to use print medium as the metaphor, it should be done intentionally, using the best principles from that medium. Consider the concept of metaphor you may recall from language classes. A metaphor suggests analogy between two ideas or objects without using the words "like" or "as." In site design, a site can be presented as a particular object or experience to emphasize or stylize the site's purpose.
Metaphor guidelines
Metaphors can be valuable to Web site design. Consider the following guidelines when developing a metaphor for your site.
NOTE: Can you think of any sites you have visited that effectively used metaphor in the design? Can you think of metaphors you have not seen used that might be effective on the Web?
Consider whether a metaphor is needed to express the desired idea. Select a metaphor that is familiar to the chosen audience. Use the familiar to explain the unfamiliar. Keep metaphors light and effective. Be sure that the comparison shares characteristics with your theme. Use the metaphor consistently in the design. Do not overuse the metaphor. Do not use a metaphor that may have any negative connotation. Choose a metaphor that is easy to remember. Do not mix metaphors.
Metaphor examples
NOTE: If time permits, visit these sites and compare the current sites to the screenshots shown here. Which version of each site do you like better? Do you think these sites use metaphor effectively?
One design metaphor that has become very widespread in Web design is the tabbed folder metaphor. Resembling a stack of tabbed folders in which a tab can be clicked to "open" each folder, the tabbed folder format has long been a standard in software design most notably in the design of software preferences dialog boxes. Tabs are used for navigation on many of the biggest sites, including Amazon.com, Expedia and PayPal. Study the following screenshots of sites using example metaphors and see whether you can identify with them. Note that many of the screenshots show older versions of these sites. Today, ease of use and functionality have taken on primary importance in Web
Version 1.0
4-11
design, and site design metaphors have become less common and more subtle than some of the samples shown here. However, these samples provide clear examples of the use of metaphor in Web design. Figure 4-1 shows a previous version of the Handyman Connection home page at www.handymanconnection.com.
Figure 4-1: Handyman Connection home page
Figure 4-2 shows a previous version of the Eco Mulch & Fulton Grass home page at www.ecomulch.com.
Figure 4-2: Eco Mulch & Fulton Grass home page
Version 1.0
4-12
Figure 4-3 shows a previous version of the Hershey's Happiness home page at www.hersheyshappiness.com.
Figure 4-3: Hershey's Happiness home page
Figure 4-4 shows a previous version of the MedBoard USA PhysicianBoard employment service home page at www.physicianboard.com.
Figure 4-4: PhysicianBoard home page
Version 1.0
4-13
Figure 4-5 shows a previous version of the Hux Records home page at www.huxrecords.com.
Figure 4-5: Hux Records home page
Figure 4-6 shows the Donkey Konga microsite posted by Nintendo Europe (http://194.192.82.242/donkeykonga/flash/player.asp?language=uk) for the launch of the Donkey Konga game.
Figure 4-6: Donkey Konga microsite home page
Version 1.0
4-14
Figure 4-7 shows a previous version of the World Cup page of the Nokia Snowboarding World Cup site at www.nokia.com/snowboard/.
Figure 4-7: Nokia Snowboard World Cup home page
How do these and other Web sites you have browsed use metaphors to their advantage?
Benefits and drawbacks of using site metaphors

It is not always necessary to choose a site metaphor. In fact, strictly adhering to a metaphor might hinder creativity, resulting in a boring site. However, creating a site metaphor can be beneficial because it helps you focus on a strong, controlling visual theme for the site. Beginning designers find site metaphors especially helpful because the metaphor helps create a consistent look for the site. Using a site metaphor can, in many cases, help a designer think through potential problems and then solve or avoid them. Having a strong visual theme for a site can actually help you anticipate various issues, including accessibility. As Robert Frost once said, "Poetry without rhyme is like tennis without a net." The same could be said for some Web sites and the importance of creating a strong site metaphor.
Mystery Meat Navigation

The term "mystery meat navigation" was coined by Vincent Flanders to describe a Web page or graphical user interface (GUI) in which it is difficult for the user to determine the destination of hyperlinks, or in more extreme cases, to locate the hyperlinks on the page. As a result, the user has great difficulty determining the site's navigation structure. A site that suffers from mystery meat navigation is less accessible and less useful than sites that feature clear and simple navigation. Mystery meat navigation can also cause accessibility issues because screen readers may not be able to interpret the navigation. You could argue that Figures 4-1 and 4-3 could lead to mystery meat navigation, if done improperly. The way to correct the problem is to clearly show users the hyperlinks of a site. You can do this by using standard hyperlinks, or by making sure that any animated images and Flash files you use readily show hyperlinks when a mouse passes over the link. Even
Version 1.0
4-15
then, it is best to always make navigation quite plain. Having an alternative form of navigation such as text-based navigation links is another way to avoid some of the confusion caused by mystery meat navigation. Flanders' original example of mystery meat navigation is in a Flash video at the following URL: http://www.webpagesthatsuck.tv/saturn/saturn.html You can read more information about mystery meat navigation at the following URL: http://www.webpagesthatsuck.com/mysterymeatnavigation.html
The Mindmapping Process

OBJECTIVE 1.1.7: Mindmapping site structure
Mindmapping is a process that allows you to structure ideas on paper in the order your brain follows, rather than the linear process normally used when documenting ideas. Imagine creating an entire Web site or report page-by-page, and writing down all your ideas. If you were to write these thoughts on a piece of paper, describing each page and its content, you would have a list. This list might be incomplete, however, because forcing the linear process stifles your thinking and limits your ideas. In the end, could you correlate all these thoughts easily, and would they flow together? Now consider mindmapping. Instead of beginning in the upper-left corner of the paper and proceeding down line-by-line, place your subject in the middle of the page and circle it. From there, draw branches, which are ideas about your topic. If any topics are related in a more definitive way, create another branch off the current idea branch. Within minutes, you will see your mindmap develop into a dynamic sketch. You might find that a standard sheet of paper is not enough to contain all your thoughts. Use more paper, create more branches, and keep the ideas flowing. Mindmapping is a process of moving ideas from thought to document. Do not judge whether ideas are good or bad; just write them down and move on to the next thought. After you complete your mindmapping process, you can go back and refine or eliminate ideas.
NOTE: Have you ever heard of or used the mindmapping process before? In what types of projects have you used it?
NOTE: Compare mindmapping to a brainstorming session. Have you used the mindmapping technique during a group brainstorming session? Do you think it could be useful in this setting?
Some techniques for mindmapping include using a large chalkboard or whiteboard. You can also use different colors to designate specific categories or items, or use thick markers and thin markers whatever you can find to help stimulate the process. Remember that mindmapping is a very different paradigm for transferring your ideas to paper, and you might be unaccustomed to it. However, in a short time, mindmapping will feel as natural as reading or writing.
Mindmapping a Web site

Figure 4-8 illustrates the way you can use mindmapping to develop a Web site. This example is simplistic. Your mindmap might have dozens more branches, which will help you develop a better Web site.
Version 1.0
4-16
Figure 4-8: Web site mindmap
In the following lab, you will try mindmapping a Web site of your own. Suppose you are leading a Web site development project, and you are ready to get your team started on the development tasks. After you have determined the customer's needs, you could gather your development team together for a mindmapping session. Using a large whiteboard, you can record all the ideas from all team members in a brainstorming session, then later you can refine the details to help determine the specific pages and functions your site will need to provide. This process allows everyone to think creatively and focus on any part of the site at any time.
Version 1.0
4-17
Lab 4-4: Mindmapping a Web site

NOTE: This lab can be used to begin planning your own Web sites or for simple practice in mindmapping.
In this lab, use the space provided to mindmap the Web site you described in this lesson's previous labs. Use additional sheets of paper if you need more space.
Version 1.0
4-18
Creating a Web Site Wireframe

OBJECTIVE 1.1.16: Flowcharts and Web wireframes
A Web site wireframe is a sketch of the skeletal view of a site's architecture. Creating a wireframe is the next step you would usually take after creating a mindmap. Whereas a mindmap is the result of brainstorming, a Web site wireframe is a finalized representation of the site. A Web site wireframe does not focus on the contents of a page. Rather, it focuses on how pages on the site work together to create a complete solution. A Web site wireframe also allows you to confirm that your mindmap is being applied properly. When you are developing a new site or restructuring an existing site, you should first make sure that the site's navigation is as coherent as possible, then focus on page content. Figure 4-9 provides an example of a Web site wireframe. Notice how the hierarchical format helps describe the relationships between the pages.
Newsfeed
Landing Page
Blog feed
About us
News
Search
User profile
Product
Product
Product
Product
Product
Product
Database
User info Backup
Figure 4-9: Sample Web site wireframe
Elements of a Web site wireframe include: A description of each page on the site. A listing of all elements necessary for the site to fulfill its business purpose. This includes discussion of database connections, scripts, Web applications and other programming required to make the site fully functional.
You can use a Web site wireframe to: Help set customer expectations for the final site. Describe the need for specific programming to additional members of the team. For example, a properly created Web site wireframe may help explain the need for a single-sign-on scheme.
Vector graphics applications are usually used to create simple Web site wireframes. Some applications, such as the drawing function in most office suites, are quite simple. Others are more advanced. Specific tools you can use to create Web site wireframes include:
Version 1.0
4-19
Microsoft Visio Adobe Illustrator OmniGraffle Inkscape Graffletopia Microsoft Office or OpenOffice.org Axure
The concept of a Web site wireframe is derived from the more traditional concept of a wireframe, which is a way to outline the look and feel of the user interface on an application.
Creating a Web Page Wireframe

A Web page wireframe allows you to focus on the flow of content on an individual Web page, as opposed to an entire site. See Figure 4-10.
Banner Ad
Global Site Navigation
Site Login
Create A Login
Featured content for the entire page
Blog Feed
Search
About Us
News
User Profile
RSS Feed
Footer
Figure 4-10: Sample Web page wireframe
Creating wireframes for your site and pages can help you think through each element to make sure you are making the proper high-level decisions. Once you have a complete overall picture of your site and each page, you can then focus on creating the code and designing the site's pages.
Version 1.0
4-20
Case Study
Double Vision
Janice is the Web designer for a large computer-manufacturing company. She works on projects for several departments within the company. While creating the design for a new Web microsite about the company's latest computer offering, Janice is given conflicting messages about the audience for the site. The corporate sales department wants to appeal to corporate users, and the educational sales department wants to appeal to schools, teachers and students. The audience that Janice's site targets will determine the page's look and feel, as well as the tone and style of the text, the photos used for demonstration, the graphics used in the design, and much more. * * *
Consider this scenario and answer the following questions. How would a Web site vision statement help Janice in this situation? How would Janice's Web site strategies and tactics differ for the two different audiences described in this scenario? How might they be the same? How can Janice use a knowledge of her site's audience to develop an appropriate metaphor for this Web site? What metaphors might she use to appeal to these audiences? Should they be different? Janice is mindmapping this Web site. Would the intended target audience for her site affect the mindmapping process? How might changing the target audience change the mindmap?
Version 1.0
4-21
Lesson Summary
Application project
Developing a good Web site or a Web business requires that you start with a specific vision for the site or business. The vision can then be translated into a strategy and implemented using specific tactics. Web site visitors can often determine the vision of the site's creators by examining the site's tactics. Visit several Web sites, and try to guess the vision that the Web site owners intended for the site or business. If the site posts its vision or mission statement, find the statement after you try guessing the vision, and compare your ideas to those described on the site.
Skills review
In this lesson, you learned about the Web development process and the steps for forming a Web site's concept. To form the concept, you focused on creating a vision for your Webbased business, and strategies and tactics to fulfill your vision. You also learned about the role that a metaphor can play in the look, feel and overall understanding of a site. Finally, you learned how the mindmapping process can help you design a site structure that fulfills the site's goals. Now that you have completed this lesson, you should be able to: 1.1.4: Determine the audience for the site. 1.1.5: Develop a Web site vision statement. 1.1.6: Develop a site strategy and identify strategy implementation tactics. 1.1.7: Use the mindmapping process to structure a Web site. 1.1.8: Set design goals appropriate for the business/organization represented by the site and the site's intended audience. 1.1.9: Create a site metaphor. 1.1.10: Develop site design and architecture specifications. 1.1.16: Use flowcharts and Web wireframes to determine page layout. 1.2.8: Create Web page and site templates that fulfill design specifications. 1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers.
Version 1.0
4-22
Lesson 4 Review
1. What is the bottom-up approach in Web design?
2.
What is a tactic?
3.
What is the basic business premise followed by successful online businesses?
4.
Name at least one tactic you could use to implement a Web strategy in which your goal is to create a mailing list of customers.
5.
Briefly describe an example of an effective metaphor you could use when designing a Web site for a travel company, a zoo, or a candy seller (or some other business of your choice).
Version 1.0
4-23

Version 1.0
4-24
Activity 4-1: Creating a vision statement for a personal goal

In this activity, you will practice creating vision statements by focusing on personal goals. The purpose of this activity is to learn how a simple act such as defining specific values and writing them down can help you achieve a goal of any kind. Focusing on your goals when developing a Web site is an important discipline. This activity can benefit you for your personal use. Consider whether creating a vision statement has any effect on achieving goals. Write your answers in the spaces provided. 1. Consider two personal goals that you would like to set and meet. The first should be a short-term goal (a month or less to complete), such as a skill you want to begin learning, an activity or club you want to join, a book you want to read, or a home project you want to complete. Any goal that is realistic, pertains to you, and has an identifiable point of accomplishment is acceptable. What is your short-term personal goal?
2.
The second goal should be a longer-term goal (several months or longer to complete), such as an exercise or fitness achievement, a career change or advancement, a travel or family event, a savings or investment goal, or a skill or activity you want to master. Any goal that is realistic, pertains to you, and has an identifiable point of accomplishment is acceptable. What is your long-term personal goal?
3.
Write a value statement for your first (short-term) goal in the space provided. Be sure to specify values that apply directly to this goal. Is a title associated with completing this goal? What qualities will you obtain by completing this goal?
4.
List some measures that can be stated for your first (short-term) goal. Be sure to specify quantifiable values such as numbers, dates, duration or other measures whose attainment can be verified.
Version 1.0
4-25
5.
Combine the values and measures you wrote in the two previous steps, and write a concise vision statement for your short-term personal goal.
6.
Based on what you learned in this lesson, can you name any strategies and tactics that will help you realize this vision statement?
7.
Write a value statement for your second (long-term) goal in the space provided. Be sure to specify values that apply directly to this goal. Is a title associated with completing this goal? What qualities will you obtain by completing this goal?
8.
List some measures that can be stated for your second (long-term) goal. Be sure to specify quantifiable values such as numbers, dates, duration or other measures whose attainment can be verified.
9.
Combine the values and measures you wrote in the two previous steps, and write a concise vision statement for your long-term personal goal.
10. Based on what you learned in this lesson, can you name any strategies and tactics that will help you realize this vision statement?
Creating a vision statement is a simple act of identifying and writing down specific values that you want to achieve. A simple statement such as this helps define goals and provide focus. Focusing on your goals when developing a Web site or pursuing any project or activity is an important discipline. Be sure to revisit this activity as you work toward your goals and after time has passed to see whether the vision statements helped you achieve success.
Version 1.0
4-26
Optional Lab 4-1: Analyzing the competition's strategy and tactics

In this optional lab, you will briefly analyze a competitor's strategy for attracting and retaining customers. A complete competitive analysis is beyond the scope of this course. However, you can evaluate whether a Web site's approach to achieving its goals seems to support its vision by studying the site and answering some questions about what you see. Write your answers in the spaces provided. 1. Browser: Open www.yourcompetitor.com. You can visit any site you choose. If possible, select one whose goals are similar to those you set for your own possible Web site. Write the URL and name of the site in the space provided.
2. 3.
Browser: Examine your competitor's site. List the services and/or products your competitor provides.
4.
What features does your competitor include to keep users interested in its site?
5.
What features does your competitor include to encourage visitors to return to the site?
6.
What tactics does this site use to support the strategies used to attract and retain customers at this site? Do you think these tactics are effective? Why or why not?
7.
What changes would you suggest to improve this site?
Studying the strategies and design plans used by other Web sites to attract and retain customers can help you design your own Web site with a solid strategy in mind.
Version 1.0
4-27
Optional Lab 4-2: Analyzing Web site and Web page wireframes
In this optional lab, you will investigate some of the reasons to create a Web site wireframe. 1. Go to the following Web sites to learn more about creating a Web site wireframe: 2. The "To the Web" site: http://totheweb.com/learning_center/website-wireframe.html Web Site Wireframes Samples, Examples: http://www.fatpurple.com/2010/03/04/web-site-wireframes-samples-examples/
Answer the following questions: How can a Web site wireframe help you create a cost estimate for a customer? How can a Web page wireframe help you ensure that content is easy to read?
3.
Using a vector graphics application such as the Drawing application in OpenOffice.org (www.openoffice.org), create a Web site wireframe for a relatively simple site that you have spent a few minutes mindmapping.
In this optional lab, you learned about the advantages of creating a Web site wireframe.
Version 1.0
4-28
Lesson 4 Quiz
1. Which of the following describes a good Web project vision statement? a. b. c. d. 2. A A A A method used to implement a Web site strategy dynamic sketch that documents ideas for a site's structure concise statement that includes a value and a measurable goal statement that specifies financial and technological requirements
When designing a Web site, you must invent the tactics you will use to implement your Web strategy. What is the fundamental Web strategy? a. b. c. d. To To To To inform and refer users attract and retain users create the most useful site create the best looking site
3.
You are creating the specifications for a customer's Web site. One of the requirements is a list of frequently asked questions. Which type of site specification is this? a. b. c. d. Design specification Content specification Architecture specification Functionality specification
4.
What is the main purpose of a page template in the Web site development process? a. b. c. d. To supply text and images that comply with content specifications To provide stakeholders with a mock-up of the proposed site design To apply a consistent look and feel that complies with design specifications To provide stakeholders with a diagram of the proposed architecture specifications
5.
In Web site design, what is a metaphor? a. b. c. d. A A A A visual suggestion of similarity to another thing or idea strict formula for effective layout of images on a home page dynamic sketch that documents ideas for a site's structure comparison of dissimilar things using the words "like" or "as"
6.
Mindmapping is a process that allows you to: a. b. c. d. document ideas in a linear order. document ideas in the order that they occur. quickly develop a site map to place on your site. quickly develop a plan to mastermind a Web project.
Version 1.0
5Lesson 5: Web Page Layout and Elements

Objectives
By the end of this lesson, you will be able to: 1.1.14: Apply branding to a Web site. 2.1.1: Define and use common Web page design and layout elements (e.g., color, space, font size and style, lines, logos, symbols, pictograms, images, stationary features). 2.1.2: Determine ways that design helps and hinders audience participation (includes target audience, stakeholder expectations, cultural issues). 2.1.3: Manipulate space and content to create a visually balanced page/site that presents a coherent, unified message (includes symmetry, asymmetry, radial balance). 2.1.4: Use color and contrast to introduce variety, stimulate users and emphasize messages. 2.1.5: Use design strategies to control a user's focus on a page. 2.1.6: Apply strategies and tools for visual consistency to Web pages and site (e.g., style guides, page templates, image placement, navigation aids). 2.1.7: Convey a site's message, culture and tone (professional, casual, formal, informal) using images, colors, fonts, content style. 2.1.8: Eliminate unnecessary elements that distract from a page's message. 2.1.9: Design for typographical issues in printable content. 2.1.10: Design for screen resolution issues in online content. 2.2.1: Identify Web site characteristics and strategies to enable them, including interactivity, navigation, database integration. 2.2.9: Identify audience and end-user capabilities (e.g., lowest common denominator in usability). 3.1.3: Use hexadecimal values to specify colors in X/HTML. 3.3.7: Evaluate image colors to determine effectiveness in various cultures.
5-2
1. The most effective Web page layout scheme can be best compared to which of the following media types? a. b. c. d. 2. Television A brochure A magazine A newspaper
Which is more important: content, or layout and delivery? Why?
3.
According to numerous surveys, do most users actually read Web pages? Why or why not?
Version 1.0
Lesson 5: Web Page Layout and Elements
5-3
Web Users and Site Design

NOTE: Do you agree from your own experience that this scanning behavior (rather than reading) is typical of Web users?
How much text on a Web page would you guess that Web users really read? All of it? Most of it? The truth is that users read almost none of it. Numerous surveys confirm that as many as 80 percent of Web users merely scan Web page content, looking for key words and phrases. Furthermore, the average person reads 25 percent slower from a computer monitor than from print. So how does this fact affect Web page layout? As a designer, you must create a page that allows users to quickly scan and find the information they seek. Remember that one of the misconceptions of Web design is that the Web is just another form of print media. If a designer creates a Web page with the same content as a brochure or newsletter, users may take a look but are likely to move on to another site. When users arrive at your site, their first impressions are important. The Web site may be the only window to the world for your business. If it is unappealing to the customer, you may lose the customer to a competitor. So if you know that users only scan your Web pages, why try to force them to read a lot of content that may not interest them? Keep users satisfied, give them what they want, and they will come back. Users do not want to see cluttered pages with irrelevant content and images. Content is essential; however, the layout and delivery are just as important. Users usually visit your site because they want specific information, whether for research or purchases. The easier you make their tasks, the more likely you are to earn their business. Remember as you design your Web sites that the design choices you make can help your audience experience the site as you intend it or hinder your audience's participation. The Web medium is self-centric: Users are interested only in what they want. People who work in the retail business will agree that customers are selfish because they know they pay the bills that keep business's doors open. If you understand this, you will create Web pages with layout features that will earn your users' business. Consider a Web site such as www.cnn.com. Upon arrival, you are greeted with the lead headline, a picture from that story, a paragraph summarizing the story, and a link to the full story. You know the story immediately from the picture and summary, and you can find out more if you want. Otherwise, you can scan down the page to the next headline, determining just about every leading story on the CNN site in about a minute. You are only one click away from any full story. The CNN site provides easy scanning, and you are more likely to return because you got what you wanted quickly.
OBJECTIVE 2.1.2: Design and audience participation
Design restrictions
OBJECTIVE 2.2.9: Audience and end-user capabilities
For a Web designer, it is exciting to think about new technologies and ways to implement them into the latest designs. Generally, Web designers are likely to have the most recent hardware, software and plug-ins. However, as tempting as it may be to create the most dynamic and interactive site that new hardware and software can support, the vast majority of the Web audience is not seeking high-end design or an exciting multimedia experience. As a designer, your job is usually to create a Web site that meets the stakeholders' needs and that can be used by the site's target audience. For example, if you are designing an intranet, and you know the browser and connection speed that everyone using the site will have, you are free to use any technologies you want that can be supported by this audience. If you are designing a site that will be used
Version 1.0
5-4
by anyone on the Web who finds your site, however, then the range of your audience's potential browsers and bandwidth limits your technology choices.
NOTE: How do you feel about this guideline of designing for the lowest common denominator? Is this practice fair to those users who have higher-grade equipment, and who probably use the Web more widely and frequently? In what creative ways might a Web developer design for the lowest common denominator without losing the interest of more advanced users?
A good guideline to follow when designing for the masses is to design for the lowest common denominator. Although there is no real agreement on what the lowest common denominator is today, the following guidelines will help you choose "safe" specifications: Many users still have 15-inch monitors. Some users set resolution to 800x600, but 1024x768 (or higher) is more common today. Many users still use modem connections, although modems are most likely 56 Kbps or faster. Most users have 4.x or newer versions of browsers. Although you should always be careful about using plug-ins, some plug-ins such as the Flash Player and MP3 players very commonly used.
If you are designing for a technical audience, or for an audience you know to generally have higher-end computers and monitors (such as graphic designers), you can adjust your specifications upward. Even though the lowest common denominator system specifications continue to move upward, it is still important to try to accommodate users with lower-end systems when possible. You can do this through the use of alternate, text-only versions of multimedia rich pages, or by checking for browser and plug-in versions and informing users if their settings do not meet the minimum requirements for your site.
Site characteristics
OBJECTIVE 2.2.1: Site characteristics and strategies
Before choosing the elements to include in your site (and those to exclude), you must consider some basic Web site characteristics and the strategies that you can use to implement them. Your target audience, the stakeholders' requirements and your design restrictions will determine how you enable these characteristics and how you will integrate them into your page layouts.
Navigation
Navigation controls the user's movement through the site. Clear and easy navigation is critical to a site's success, and therefore must be well planned and carefully implemented to enable visitors to effectively use your site. You can use many types of navigational elements in a site, including text and image links, labels, positional indicators, menus, searching features and more. You will study navigation in detail in a later lesson.
Interactivity
Interactivity is a feature of Web sites that distinguishes it from other media types. As discussed in an earlier lesson, the Web is transactional in nature because Web use is based on the interactions between Web users and the sites they visit and explore. Some Web sites offer little interactivity beyond providing several pages for users to browse among and read. Other sites offer a high level of interactivity, with forms for users to complete and submit, multimedia to watch or listen to, games to play, catalogs to search, and products to buy. Interactivity that serves your site's purpose well can attract users to your site, persuade them to stay longer, and give them reasons to return.
Version 1.0
5-5
Database integration
Database integration allows Web pages to use dynamic data, often in conjunction with interactivity. The site designer's job role does not necessarily include the skill of database integration, but it is an important and common site characteristic that you may need to incorporate into your design and page layout features. Databases provide the ability to store and sort vital information, such as customer data and product information. For example, your site might use a database to store and inventory information about the products your company sells. A visitor can thus search for a specific product, and your Web site can retrieve this data and display it in a Web page for the user to view, check inventory, make selections and so forth. As a site designer, you may need to design pages that will be populated by the results of database queries. To do this, you must determine: The amount of page space you need to correctly present the information. You must allocate enough space so that users can clearly see all text and images that might be returned from the database query. The party responsible for creating scripts and database connectivity. You may not need to create database scripts, but you will probably be working with a programmer who can implement this functionality in your design. You must ensure that your pages return expected results in a usable and aesthetically pleasing display.
You will learn more about databases and ways to integrate them into your site design later in this course.
Effective Web Page Layout

Consider the way that your favorite newspaper is laid out. The front page has the lead story, and it also may contain brief summaries of other feature stories in the paper. How does this arrangement change your reading experience? The layout does not force you to read one story on the front page then flip through all pages to see what the other stories are. If you see a story summary on the front page that you want to investigate further, a page number reference points you to the full story. This layout style is often compared to an inverted pyramid, as depicted in Figure 5-1. This style offers the user a list of story summaries first, then references to the details of each story for those interested. This model is different from the way we think of story telling: Instead of the main point of the story coming at the end, the conclusion comes first in the inverted pyramid model. The Web is an ideal medium for this type of delivery.
Figure 5-1: Inverted pyramid model
On a Web site, you can use hyperlinks to send users to any number of elaborations on subjects, stories, news, schedules, products or services. You can also use related links to
Version 1.0
5-6
provide archived or extended information, which traditional newspapers cannot provide due to lack of space, time and resources. In any case, if users want further information on any topic, they can browse to it at their discretion. Otherwise, they can move on to other pursuits.
Web page layout elements

OBJECTIVE 2.1.1: Web page design and layout elements
Before you begin the Web production process, consider the look and structure of your site. You must understand the elements that compose the completed Web page, and how they interact with each other, from a visual standpoint as well as a technical standpoint. You should then carry the chosen elements throughout the Web site. These Web page elements include layout, color, fonts and images, and other multimedia. Page layout refers to the way in which the Web designer presents information to users. The format should be logical and easy to understand. Like documents or reports, structured formats help categorize, simplify and clarify information for distribution. As a Web designer, you must develop a structure and adhere to it so the user's experience will be meaningful and productive. Consider the following items and their functions when planning your Web page layout. Space (also called white space) separates elements on the page and reduces page element clutter Color conveys a visual tone or message, and provides a consistent look and feel Font conveys a visual tone or message, provides a consistent look and feel, and enhances readability Rule or line, divides the page content into related sections List organizes information into items Paragraph groups text characters on a page Heading level creates various sizes of text to designate and organize content Image provides visual appeal, information and navigation (includes symbols and pictograms) Logo provides branding and site navigation Margin controls the proximity of content to the browser window edges Border can be applied to XHTML tables and frames Navigation elements control the user's movement through the site Table formats data into rows and columns; also used to distribute elements into position on a page Frameset allows multiple pages to be displayed simultaneously
NOTE: Web page layout and Web design are not the same. Layout refers to the visual components of a page and how they are arranged. Design is a larger issue that incorporates the whole site, including the visual presentation with theme, purpose, content and the multimedia available to this medium.
NOTE: Can you cite examples of Web sites you have visited that used any one of these layout components particularly well or poorly? Examples that stand out may be worth examining more closely.
NOTE: What other common layout features can you name? Are there any new types of layout features that you have seen?
Determining which of these elements your site will include helps focus the development process. If you do not address these items early in the development process, you might waste resources correcting problems that develop later. Many times, a site's design and functionality can be greatly improved by eliminating design elements from the page rather than by adding new elements. Knowing which layout elements to use and which to omit is at least as important as knowing the technical aspects of using different XHTML and multimedia elements.
OBJECTIVE 2.1.8: Eliminating unnecessary elements
Version 1.0
5-7
Common layout formats

NOTE: You can review the common concepts and elements of layout in Activity 51: Identifying Web page layout elements.
Web sites use some common basic structures to perform certain important functions. You can see these common features in action by browsing several sites. For example, navigation elements are generally located on the left and top margins. The background for these navigation elements often has a slightly different color or appearance than the rest of the page. Also, additional navigational features are frequently included at the bottom of the page. Black text on a white background is common, as are company logos in the upper-left corner of the display. These and other common layout features actually help each other and the user, which is the reason they are used so often. When users visit your site, they should know what to expect. This is not to say that they know the content or products you offer, but rather that they understand the basics of using the site. These basics include common uses of navigation, text and images. Site layout can be categorized by the way the navigational elements are placed. The type of layout that is chosen depends largely on the type and amount of content. Following are some samples of common layout types. Figure 5-2 shows an example of the traditional left-margin layout. You can see the navigational elements in the left margin.
Figure 5-2: Left-margin layout (traditional)
Version 1.0
5-8
Figure 5-3 shows the top-margin layout, in which navigational elements are placed along the top of the page.
Figure 5-3: Top-margin layout
Figure 5-4 shows the most commonly used layout, the distributed left- and top-margin layout.
NOTE: This layout is the most commonly used. What are some possible reasons for this? For example, the English language is read from left to right and top to bottom. Also, using two margins for navigational topics allows more topics to branch off. Does this approach streamline the site or make it more complicated?
Figure 5-4: Distributed left- and top-margin layout
Version 1.0
5-9
Figure 5-5 shows the less commonly used right-margin layout.
Figure 5-5: Right-margin layout
Figure 5-6 shows an example of the distributed layout, which works well for sites with an extensive amount of content.
Figure 5-6: Distributed layout
Version 1.0
5-10
Controlling user focus

OBJECTIVE 2.1.5: Design strategies for user focus
The location of Web site elements within the user's browser window has a large effect on how the user will perceive your site. Usability studies have shown that site visitors focus on the site's content, rather than the navigation or user interface elements. You should design your sites so that the content important to your audience occupies at least 50 percent of the screen space, but preferably 80 percent. This guideline is particularly vital in the page area that a typical user sees without scrolling the area known as "above the fold" in newspaper jargon. Eye-tracking is a technique used to study the ways that people focus on Web pages. By tracking the motion of users' eyes when they visit Web sites, researchers can discover which parts of a Web page a user looks at and for how long. Eye-tracking studies have consistently found that most Web users first look at the center of the page (where they expect content to be), then to the left of the page, then to the right. Users rarely look at the bottom of the page unless they are seeking something they expect to find there. By considering these facts as you design and lay out your Web pages, you can learn to emphasize elements that you consider important. Ways to ensure this include the following: Conduct your own reviews of Web pages using a representative group of users. Assembling your own group can help ensure that you address cultural concerns. Consult with marketing and others to determine common browsing habits and ways that you can adjust your Web pages to focus user attention where you want it.
Visual consistency
OBJECTIVE 2.1.6: Tools for site's visual consistency
Visual consistency within a site helps users to understand your site. Using a limited and specific color scheme throughout the site makes each page look like it belongs to the whole. Using pre-designed page templates helps you to quickly and consistently style each page to your site's look and feel. Creating and following a style guide a company's collection of guidelines and specifications for standardizing the appearance and tone of the Web site or other products also helps designers focus on the details of presentation, such as color schemes, fonts, language usage, content tone and more. Placing an image (such as the company logo) in the same place on every page increases visual consistency and aids navigation. Using such layout techniques that are common within your site and those common to all sites helps Web site visitors to use your site more comfortably and effectively.
White space
OBJECTIVE 2.1.3: Visually balanced page/site
Recall your Web browsing experiences at various sites you have visited. When a page initially loads into your browser, you are greeted either with content on every part of the page, or with limited well-distributed content resulting in less clutter. What is your initial impression of both these scenarios? If you are like most users, you prefer the page with even distribution and some blank space, known in the development community as white space.
Version 1.0
5-11
NOTE: If a Web page should contain approximately 50 percent less text than an equivalent printed page, what is the best approach for a Web developer? Divide the content into two or more pages? Omit some content entirely? Or thoroughly edit content and try to communicate the same information with fewer words?
Remember that users do not appreciate useless clutter and masses of content on Web pages. Users quickly scan pages, and the more they must scan through, the more information they will miss. This fact does not mean that you cannot provide the user with a lot of information, just not all on one page. Each Web page should contain approximately 50 percent less text than a printed version of the same information would contain. A Web page should be designed to offer information concisely. Provide users with the basics then give them links to more depth and detail. Not every user wants every piece of information; let each user choose whether to go deeper with links. Also, do not divide a page just to make it shorter unless it is at a logical breaking point. Each page should be able to stand on its own. After determining what users need to know, you can lay out the page to position content and provide content-free areas.
Page layout with transparent GIFs

A fully transparent image file can be inserted into the page as a blank-space placeholder. You can assign height and width attributes in the XHTML <img> tag to create the desired white space dimensions. For example, if you want to indent a paragraph, you can insert the following tag prior to the first letter of the new paragraph:
<img src="transparent.gif" height="2" width="15"/>
This value will indent the paragraph 15 pixels from the left. The same procedure can be used to increase the line space between paragraphs by placing the following tag between them:
<img src="transparent.gif" height="20" width="2"/>
This value places 20 pixels of space between the paragraphs. Transparent GIFs can also be placed into table data cells to control column or row size if necessary. Keep in mind that the goal is to reduce clutter on the page, enabling users to easily scan the document and select links if they choose.
Page layout with tables

The W3C now recommends against using tables for page layout in favor of using CSS. However, tables are still widely used for this purpose, so the XHTML designer must understand the construction and use of tables in page-layout design. By default, everything in XHTML aligns to the left. Developers use XHTML tables to distribute content over the entire browser display. A table structure can be populated with content, and table borders can be set to zero so the user never sees the table. Later in this course, you will practice using tables for page layout.
Page layout with frames

Frames can be used for page layout, although they also play a vital role in navigation. Whether frames will be used in a site should be discussed early in the design and planning process because frames can dramatically affect layout and navigation. Frames affect other factors in the development and deployment of the site as well. Later in this course, you will explore frames creation and learn how they can help or hinder your site.
Version 1.0
5-12
Page layout using CSS positioning

The preferred way to lay out a page in XHTML is with CSS positioning. However, important differences exist in the ways that various browsers have implemented this standard, which sometimes make it less predictable than using tables. You will learn about CSS positioning later in this course.
Visual balance
OBJECTIVE 2.1.3: Visually balanced page/site
Another important concept in page layout is visual balance. If you divide a Web page vertically down the middle, you can imagine the objects on either side of that line working like a see-saw: A large object on one side of the page can visually balance an equally large object or several smaller objects on the other side. Balance can be related to the size or type (image or text) of objects on a page, as well as to the darkness or lightness of colors of objects. There are three types of balance: symmetrical, asymmetrical and radial. Each of these principles helps you to create a clear, easy-to-browse and coherent Web site.
Symmetrical balance
Symmetrical balance is created when all elements on one side of the page are mirrored on the other. Although they may not be exactly the same, the mirrored objects are similar in terms of color and weight. An example of symmetrical design is a site with two similar columns (of color, text or image content, etc.) on either side of a larger area. The page shown in Figure 5-7 provides a good example of this type of symmetrical balance. Note that every element on the left side is mirrored on the right.
Figure 5-7: Symmetrical balance in page layout
Version 1.0
5-13
Asymmetrical balance
Asymmetrical balance is created when a single object on one side of the page is balanced by a number of smaller (or more lightly colored or weighted) objects on the other side. The page shown in Figure 5-8 uses a single large image on the right to balance several smaller elements on the left.
Figure 5-8: Asymmetrical balance in page layout
Radial balance
Radial balance is created when elements on the page radiate or spiral out from a central point. Radial balance is not used much in Web design. Examples of radial balance include the petals of a sunflower or a round stained-glass window.
Speed and scrolling

Users demand speed. You can fulfill this demand by designing pages of limited file size. Users feel interrupted after about one second; after 10 seconds, you are likely to lose their attention. Therefore, the Web designer must use images sparingly and choose file formats carefully. Optimizing graphics is an important component to quick downloads. We will discuss file formats in detail later in the course. Table 5-1 shows the maximum page size allowable to produce desired download times for various connection speeds. Note that these are theoretical download times. Because of network overhead (e.g., the time it takes for servers to respond), actual download times will be longer.
Version 1.0
5-14
Table 5-1: Page size and download time

NOTE: Consider the importance of file size in relation to downloading and browsing speed. You may tend to downplay the importance of limiting file size when you are designing Web pages, but you may relate to the frustration of waiting for pages while you are using the Web. Remember to take a user's point of view when developing Web pages.
Connection Type
Connection Speed
Maximum Page Size for One-Second Download Time

7 KB (kilobytes) 32 KB 187.5 KB
Maximum Page Size for 10-Second Download Time

70 KB 320 KB 1.875 MB (megabytes)
Modem DSL Cable modem
56 kilobits per second (Kbps) 256 Kbps 1.5 megabits per second (Mbps)
The numbers in this table were determined by converting the connection speeds to bytes to calculate kilobytes per second (Kbps). That is, 1 byte equals 8 bits. So, 56 Kbps (or 56,000 bps) divided by 8 equals 7000 bytes, or 7 kilobytes.
Page size is defined as the sum of the file sizes for all elements that make up a page, including the XHTML file and all embedded objects (e.g., GIF and JPG image files).
Design with screen resolution in mind

OBJECTIVE 2.1.10: Screen resolution issues
You must consider screen resolution during development because the appearance of a Web page will vary on different monitors based on their resolution settings. Several years ago, the most common setting was 640x480; this setting was considered the lowest common denominator. However, no one uses this resolution anymore. Most Web users are now using a resolution setting of 1024x768 or higher. It is acceptable today to consider either 800x600 or 1024x768 as the lowest common denominator. Of course, there are exceptions to the rule. For example, MSN TV (formerly known as WebTV) has a fixed resolution and will not accommodate 800x600 designs. As a result, users of MSN TV (as well as users with small monitors) may be forced to scroll left and right to view the entire page layout. If you design for 1024x768 resolution, for example, you can still make your design accessible to those using lower resolution if you use percentage values instead of pixels to help adjust the screen display for the lower-resolution monitors. Additionally, JavaScript programs can be used to direct low-resolution users to alternative pages that are better suited for their display setups. If you know that much of your audience is still using 800x600, then you should design to that lowest common denominator.
NOTE: A good resource for display issues can be found at the following URL: http://webdesign.a bout.com/sitesearc h.htm?terms=resoluti on&SUName=webd esign&TopNode=30 42
NOTE: Have you ever been annoyed by having to scroll horizontally to see a Web page? Does this type of scrolling actually discourage you from using a site?
Figures 5-9 through 5-11 show the same Web page displayed at three different resolutions. You can see that the page shown in Figure 5-9 was designed for a resolution of 800x600. In higher resolutions, extra white space appears to the right of the page layout.
Version 1.0
5-15
Figure 5-9: Page displayed at 800x600 resolution
NOTE: Visit www.meritweb. com/resolution.htm and change the resolution of your monitor to see the amount of screen area that each resolution offers to page designers.
Version 1.0
5-16
Overview of acceptable screen resolutions

Historical screen resolutions include: 640x480 (VGA) now considered legacy 800x600 (Super VGA) 1024x768 (XGA) 1280x1024 (SXVGA) 2048x1536 (UXGA)
Figure 5-12 shows each resolution size in context. Understand, however, that there is no real way to show the true resolution size on paper. Go to the following URL to see at least part of this image in true resolution size: http://www.CIWcommunity.org/drupal5/?q=node/108.
Version 1.0
5-17
Figure 5-12: Resolution history sample
You should design to the highest common resolution because you want as much space as possible to design in. However, if you assume a resolution that is in any way uncommon, then your image or page will not render properly in customers' browsers. This can drive customers away.
A moving target
The highest common resolution keeps changing, however, as monitor technology improves. For years, designers assumed a 640x480 screen size. It remains popular among very conservative designers to assume an 800x600 screen size. However, this resolution is overly conservative in many situations, as the majority of people use resolutions of 1024x768. This size will likely change as technology improves.
Consider your audience

When choosing a screen resolution for your pages, it is best to consider the monitor size and resolution your audience will most likely be using. If you are creating pages for an audience that uses cutting-edge equipment, you can assume a more aggressive resolution level. If you are working in a corporate setting in which your image or multimedia solution must fit into a certain portion of a page, then you will need to ask your customer about the proper resolution size. For more information about screen resolutions, consult the following URLs: http://webdev.entheosweb.com/2007/12/01/maximising-web-site-viewabilityresolution/ http://www.z-oc.com/blog/2007/12/the-ultimate-answer-to-screen-resolutions-forweb-design http://editor.actrix.co.nz/byarticle/changeres.htm
Version 1.0
5-18
Branding and the Web

OBJECTIVE 1.1.14: Web site branding
Branding is the practice by which a company tries to create an image of itself in the minds of the public with the hopes that consumers will purchase its products or services. The most important element of a company's brand is its logo. Think of several well-known companies, such as Pepsi, Coca-Cola, Apple Computers or Nike. Everyone knows what these companies' logos look like, and we instantly associate certain shapes or colors with these companies. It is important for an established company to ensure that its Web site enhances its brand. A poorly designed site that does not reflect the company's other marketing or branding efforts can negatively impact the company's image. By contrast, a high-quality Web site that is designed to enhance the company's image and support its other branding efforts can be an important component of any company's marketing strategy. New companies that do not already have well-known or established brands can use the Web to build recognizable brands. To be successful, a branding effort should be unique, attractive and memorable. If a company's Web site is sloppy and does not incorporate a visual theme or coherent look, users are unlikely to remember the site or the company. Some of the ways that a company can apply and strengthen its brand on its Web sites include: Consistently using colors that it wants associated with its brand. Placing the company logo on every page, generally in the upper-left corner. Creating a company style guide that standardizes the ways to which its products or services are referred. Using page templates to ensure a consistent page appearance throughout the site. Requiring the use of the trademark symbol whenever the company's name, logo or products are mentioned on the site.
Color and Web Design

OBJECTIVE 2.1.4: Color and contrast OBJECTIVE 2.1.2: Design and audience participation OBJECTIVE 2.1.7: Site message, culture and tone
The element of color plays a vital role in the perception and presentation of a Web site. A company's style, culture and mood can be conveyed by the colors presented in the site and how they blend, coordinate or contrast. Color is perceived as a representation of the type of culture and industry in which a company participates. For example, a Web site with primarily hard, bright colors such as red, pink, yellow and green may give the impression of a flashy, artistic type of industry and culture, such as a high-tech software design or graphic art firm. By contrast, a site with more subdued colors such as white and soft blue or gray might be perceived as a more conservative or traditional organization. Web developers must address these perceptions when selecting a color scheme for a company Web site. Which colors are most complementary? How many colors should be present? Background design also plays a role, even after the color scheme has been chosen. Should you use basic horizontal or vertical lines? Will other geometric objects be included, such as triangles or other polygons? These and other questions must be addressed to best represent the image a company wants to portray to the audience.
Version 1.0
5-19
OBJECTIVE 3.3.7: Image colors and audience cultures NOTE: How important is color to business image? Think of examples of color schemes used to represent businesses. For example, some airlines and fastfood chains use color schemes that are instantly recognizable. What do these color schemes say about these businesses?
Cultural perceptions
Because colors and images convey information about the organization that created a Web site, you must take care to evaluate the effectiveness or appropriateness of the colors you choose based on your intended audience. Certain color schemes may have gained negative connotations on the Web. For example, red text on a black background is often associated with hostility or hackers. Other color schemes such as the colors used in a specific country's flag may suggest geographic or cultural biases. Images portrayed in one color scheme may convey a different message in another (consider again a country's flag colors, or a puddle of liquid shown in blue compared to the same puddle shown in red). As you consider your audience, make sure that you identify the following: Color combinations that might be attractive or acceptable to specific audiences or cultures Color combinations that might be unattractive to specific audiences or cultures Symbols, objects or images that may attract or repel an audience
Remember that colors and images that attract one audience might offend another. Also, be ready to consider and adopt different perspectives. Otherwise, your design efforts will be less successful. For example, the previous example suggesting that certain color schemes might be associated with hackers tends to assume a European/North American perspective. If your site is intended for an audience that will not include this perspective, then you may have different results with this color combination.
Additive color display

pixel Short for "picture element." A unit of measure that represents a minimum amount of graphical information as a single dot on a display screen.
A computer monitor consists of thousands of picture elements called pixels. Each pixel can display only one color at a time. When viewing an image onscreen, you see hundreds or thousands of pixels that each have a particular color and combine to create the image you see. Colors that create black when mixed together are called subtractive colors. In print media, all colors are a combination of cyan, magenta, yellow and black; this color scheme is referred to as CMYK. Adding more colors to the mix with CMYK results in the movement of the color toward black. Colors that create white when mixed together are referred to as additive colors; this color scheme consists of red, green and blue, and is called RGB. The computer monitor displays additive colors. Adding more colors to the mix with RGB results in the movement of the color toward white.
Color formats
Colors on your computer screen are standardized in two numeric formats: Red, green and blue values (RGB) Hexadecimal code
Both RGB and hexadecimal colors can produce any color in the visible spectrum when combined in various proportions. These color formats are each capable of displaying 16,777,216 colors (256 times 256 times 256).
Version 1.0
5-20
To comply with XHTML, a Web designer should use hexadecimal values exclusively. However, for discussion purposes and to help you learn hexadecimal values, this lesson will consider the use of both.
RGB color values

RGB values are formatted in base-10 numbers ranging from 0 to 255. Base 10 refers to the use of the digits 0 through 9 in the decimal system; when the digit 1 is reached, the value increases from 0 to 1 (the next whole number), and so forth. Using the RGB scheme, the color white is stated as follows: R (red) = 255 G (green) = 255 B (blue) = 255 Thus, the RGB value for white is written as 255,255,255, which represents the maximum presence of red, green and blue. The RGB value for the color green is stated as follows: R=0 G=255 B=0 Thus, the RGB value for green is written as 0,255,0, which represents no presence of red, maximum presence of green, and no presence of blue. You can declare the RGB value for green in XHTML code as follows:
NOTE: The color-value sites listed in the Tech Note are very useful for anyone designing pages or graphics for the Web. You can bookmark these sites in your browser for quick access.
<body bgcolor="0,255,0">
RGB value is a 24-bit coloring scheme that forms 1 byte (8 bits) for each RGB value: 8 bits (red) + 8 bits (green) + 8 bits (blue) = 24 bits
For a complete listing of RGB colors and their corresponding hexadecimal values, visit the Browser-Safe Web Palette page www.lynda.com/resources/webpalette.aspx (provided by Lynda Weinman) or the VisiBone Webmaster's Color Laboratory at www.visibone.com/colorlab/ (provided by Bob Stein).
Hexadecimal color values

OBJECTIVE 3.1.3: Hexadecimal color values
Hexadecimal code values range from 00 to FF (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Hex code correlates to the base-10 values but is stated in hex (base-16) values. The value 00 represents no presence of a color, and the value FF represents maximum presence of a color. The color white is represented in hexadecimal code as follows: Red=FF Green=FF Blue=FF Thus, the hexadecimal value for white is written as FFFFFF, which represents maximum presence of red, green and blue.
Version 1.0
5-21
The color green is represented in hexadecimal code as follows: Red=00 Green=FF Blue=00 Thus, the hexadecimal value for green is written as 00FF00, which represents no presence of red, maximum presence of green, and no presence of blue. As you can see, hex code assigns each color a two-character code for each red, green and blue value, whereas the RGB scheme uses digits between 0 and 255 for each red, green and blue value. RGB values are also separated by commas, whereas hex values are not. Table 5-2 shows some examples.
NOTE: Be sure that you understand how to read hexadecimal and RGB values. Most graphic design applications use these values for color. You can test your understanding of these code conversions in Activity 5-2: Identifying numeric color formats.
Table 5-2: RGB and hexadecimal color value examples
Color RED GREEN BLUE WHITE BLACK
RGB Value
255,0,0 0,255,0 0,0,255 255,255,255 0,0,0
Hex Code
FF0000 00FF00 0000FF FFFFFF 000000
When hex-code values are used in HTML, they are preceded by the # (number) symbol, which is not required but is part of the HTML 4.0 specification. In the <body> tag, for example, the background color green is specified as follows:
<body bgcolor="#00FF00">
Color on computer monitors

To display color, a common cathode ray tube (CRT) computer monitor uses three electron guns. Each gun is responsible for a single color: red, green or blue. Various combinations of guns and intensities of electron streams form all colors in the full palette.
NOTE: If you have taken art classes and mixed paint, this color model may seem contrary to the subtractive color model used for print media (CMYK). Remember that colors combine differently when mixing light (for electronic monitor display) rather than pigment and dyes.
The simultaneous full-intensity firing of these guns produces white on the screen. Firing the red and green guns produces yellow. Firing the green and blue guns produces cyan. The combination of red and blue produces magenta. Figure 5-13 illustrates these color combinations and the relationships between them.
red yellow magenta
green cyan
blue
Figure 5-13: Basic color combinations
Version 1.0
5-22
Several inconsistencies exist among monitor displays. These variables include monitor type and design, graphics cards, computer configurations, and even ambient room lighting. Liquid crystal display (LCD) monitors such as those used in laptop displays or flatpanel screens present another complexity. LCDs use transistors to determine the color and brightness of the images on the screen. Although the quality of LCD has improved dramatically in the last few years, images and colors on LCD screens will look different than on CRTs. You should always test the Web pages you design on both flat-panel monitors and CRTs.
Browser-safe colors
Most personal computer systems today offer 24-bit or 32-bit true color, allowing the monitor to display 16 million colors. In the late 1990s, however, when the browser-safe color palette was developed, the majority of Internet users owned computer systems with 8-bit video cards capable of displaying only 256 colors. Any browser running on an 8-bit system could display a maximum of 256 colors, with 40 of those colors used by the operating system, and 216 colors remaining that could be guaranteed to display without dithering.
dithering The ability for a computer to approximate a color by combining the RGB values.
Dithering is the process by which the browser approximates a color to the closest browser-safe color it supports. Table 5-3 lists the RGB and hexadecimal values that will render safely in multiple browsers in a 256-color environment. If you used values other than these in your page designs, the browser would dither them to the nearest values it could determine.
Table 5-3: Browser-safe color palette
RGB Value
0 51 102 153 204 255
Hex Code
00 33 66 99 CC FF
NOTE: Lynda Weinman's Browser-Safe Web Palette page (www.lynda.com/ resources/ webpalette.aspx) and Bob Stein's VisiBone Webmaster's Color Laboratory page (www.visibone.com /colorlab/) both list only browser-safe (i.e., non-dithering) color values.
Each of these values corresponds to the matching value. For example, using a value of 51 in RGB is the same as using the value of 33 in hexadecimal code. In other words, an RGB value of 51,153,204 is the same as the hexadecimal value of #3399CC. Using any combination of these values will result in a browser-safe color that will render consistently across platforms. The intensity of each red, green and blue combination determines the color to be displayed. Table 5-4 represents the intensity in percentages for each of the browser-safe color values, from least to greatest.
Version 1.0
5-23
Table 5-4: Browser-safe color intensities
Hex Code
00 33 66 99 CC FF
Intensity in Percentage
0% 20% 40% 60% 80% 100%
RGB Value
0 51 102 153 204 255
The Browser-Safe Web Palette page (www.lynda.com/resources/webpalette.aspx) and the VisiBone Webmaster's Color Laboratory page (www.visibone.com/colorlab/) provide complete listings of browser-safe RGB and hex color values.
NOTE: With the abundance of colors and choices available for Web design, it may seem boring to conform to a black-text-onwhite-background scheme. Have you ever visited a site that was distracting or difficult to read because it used a different color combination? What other color combinations do you think might work well?
Color combinations
Color combinations should complement each other and, more importantly, allow the user to easily discern and read any text that resides on the page. Black text on a white background provides the highest possible contrast, and usability studies have shown this to be the most readable text. Most situations allow for the use of this black-text-on-white-background scheme, and it should be used whenever possible. Many sites have colors that represent the company (its branding colors), which will not always conform to the black-on-white scheme. Generally, the only place that a site can venture away from black-and-white without repercussions to usability would be the site's home page. Beyond the home page, content becomes more abundant, and the site should aim to make the user feel comfortable. Business or branding colors can be used in other page elements, such as images and borders, to give the desired look and feel. As previously discussed, audience and cultural issues should also be considered when choosing color combinations.
NOTE: You can experiment with color combinations in Optional Lab 5-1: Using Web page colors and fonts to convey a message. NOTE: Some Web users are colorblind. You should keep this fact in mind if your design depends on the user's ability to distinguish between certain colors. For more information, color-deficiency simulations and links to color-blindness tests, visit www.visibone.com/ colorblind/.
You can test different background and text color combinations at the VisiBone Webmaster's Color Laboratory (www.visibone.com/colorlab/).
Color transitions
Color transition describes the way in which adjacently placed colors blend together or stand apart from each other. Color transitions are especially noticeable between text and background colors, and can be used to help separate various parts of a Web page. However, transitions become more of an issue when colors are introduced to the page in images. Although smooth color transitions are desirable in images, they require higher color support, which in turn requires longer download times.
Fonts and Web Design

As the Web evolves, styles change as much as technologies. Two fonts are most commonly used on the Internet. The first is Times New Roman for the PC, which is equivalent to Times on the Macintosh platform. The second is Arial for the PC, equivalent
Version 1.0
5-24
to Helvetica on the Macintosh platform. Technologies such as dynamic and embedded fonts are rapidly emerging to offer more choices. However, these common fonts provide a site with a clear, attractive presence. If you have used the Web for some time, you probably do not notice these fonts as you look at them. On occasion, you may see a site with a different font that catches your eye simply because it is not widely used.
Limitations
One of the limitations of font usage is that the chosen font must be registered on the user's system to be rendered in the browser. If the user does not have that font, the browser will render its default font instead (typically Times New Roman for the PC and Times for the Mac). If you intend to use an obscure font, the source of the font should be made available to users so they can download and install it on their systems. In this way, you can ensure the intended browsing experience.
Typography
Because fonts are a necessary component to any site, choose a font and color that make a nonverbal statement along with the other elements of the page. Much like anything you read, too much text can be overwhelming, distracting or tedious. A clear font choice properly laid out on the document speaks to the users, even if they take only a quick glance.
Serif fonts
Serifs are the small decorative strokes added to the ends of a letter's main strokes, as shown in Figure 5-14. Times New Roman is an example of a serif font.
AFst
Figure 5-14: Serifs
Serifs improve readability by leading the eye along the line of type. However, they are more difficult to read in small scale (smaller than 8 point) and very large sizes. Therefore, serif fonts are best suited for body text. Serif form contains four designs called Old Style, Transitional, Modern and Slab Serif designs.
Sans-serif fonts
Sans-serif fonts do not have serifs, as shown in Figure 5-15. Arial is an example of a sans-serif font.
AFst
Figure 5-15: Sans serifs 2011 Certification Partners, LLC All Rights Reserved Version 1.0
5-25
NOTE: Readability is the key consideration in font choice. You can experiment with fonts in Optional Lab 5-1: Using Web page colors and fonts to convey a message.
The letters' appearance is reduced to the essential strokes. Traditionally, sans-serif fonts are used for small (smaller than 8 point) and very large-scale text, such as footnotes and headlines respectively. However, sans-serif fonts such as Verdana and Georgia have been specifically designed for reading on the screen, and today are often used for body text as well. After you have selected a font, it should be used consistently throughout the site. More than one font can be present in the site, but data or information of the same type should be represented by the same font. For example, all navigation text should look the same. Normal text within paragraphs should look the same. But text that needs to be differentiated from other text (such as numbers or headers or facts) works well with a different font. However, avoid using a large mix of fonts within a page because it tends to make the page busy and difficult to read. The ideal page is consistent and provides the user with easy viewing. Font colors should also remain consistent so the user has an understanding of what the text and colors represent.
Font size
All Web browsers have a default font size. If you do not specify a font size in your XHTML or CSS documents, then this default size will be used. Although users can control the default font size, most users do not change it. As a result, the default font size is usually set to Medium, which is typically 12-point text. A common problem relates to font-size display differences between the PC and Macintosh. Macs display images at 72 dots per inch (dpi), whereas PCs displays at 96 dpi. This disparity will result in the Macintosh displaying fonts smaller than the PC display for any given size. For this reason, if you are designing on a PC and the font looks small, remember that it will look even smaller when displayed on a Macintosh.
TrueType
Many fonts are known as TrueType, which means they can be rendered in any point-size value without degradation of letter quality. TrueType is a digital technology developed by Apple Computer, and is now used by both Apple and Microsoft operating systems. Times New Roman is a TrueType font, as is Arial. Some relatively new TrueType fonts appearing more frequently are Verdana and Georgia. These fonts render nicely and provide a richer look on the page.
Anti-aliasing
NOTE: Anti-aliasing must be performed in a graphics creation and editing application.
The anti-aliasing process maintains rich-looking letters that do not have jagged edges. Often, graphics are used to represent letters, words or sentences. The anti-aliasing process makes the text look smooth by blurring the lines between text and background. This technique removes the harsh, jagged edges of the letters, which are especially noticeable with large fonts. One drawback to anti-aliasing is that it adds more colors to the image, resulting in larger file sizes and longer downloads. Figure 5-16 shows an example of normal text next to text that has had the anti-aliasing process applied.
Figure 5-16: Plain text next to anti-aliased text
Version 1.0
5-26
Horizontal line length

To make reading easy, avoid long lines of text that span the entire browser window. It is difficult to read line after line, returning to the left margin each time, if the lines are long. It is advisable to keep the lines in your paragraphs no more than 10 to 12 words long for normal reading and browsing.
Other considerations
To find the best font to fulfill your purpose and match your general concept, you need to recognize a font's scope for variation and its range of expression. You must use all techniques and materials in the best ways. The following considerations can help you avoid common mistakes, and you will develop a personal style over time. Always consider an individual font's contributing factors and how that font relates to the whole design. No single font can serve all purposes at once. Design elements, such as size and proportions of format, margins, line spacing, background color and foreground color, all help determine the end result. Even a relatively neutral typeface such as a sans-serif font can produce a rich variety of forms simply through different arrangement.
Typographical issues in printable content

OBJECTIVE 2.1.9: Typographical issues in printable content
Web pages have quickly become a way to distribute and present printable content. However, content that appears properly in a browser window will not necessarily appear the same when printed on paper. If you expect that users will print content from your Web site, you must be aware of certain issues and differences between the Web and paper media, and then design your site with printing in mind. When a user clicks the Print button on his or her browser, the browser will attempt to scale the width of the current Web page to paper size (about 650 pixels for 8.5x11-inch paper). If the page consists mostly of text, it can usually print well without a problem. However, if the design is rigid, includes large images or contains objects positioned outside the printable area, then the browser will generally crop the page, and the right side of the page will not print past the paper width. Also consider that many users will be printing your pages using a black-and-white printer. If your site makes extensive use of typographical effects such as various font colors and backgrounds, this information may be lost when users print the page. To make your Web pages usable in a printed format, you can design printable versions of pages that you think users are likely to print. Printable versions of Web pages are typically simplified and slimmed versions of the page. They usually contain all of the content, but none of the navigation and other elements that are not useful when printed. These pages should also use standard fonts such as Times New Roman or Arial, and UTF-8 coding. For maximum usefulness, printable versions of your Web pages should include the full URL of the page and any important links so that users of the print version can reference and return to the source or referenced sites. Alternatively, you can offer printable content in a different, print-friendly format, such as a word-processing document, presentation slides or Portable Document Format (PDF). File types such as these allow you to distribute content from your Web site by providing files that users can download, view and print with other applications or plug-ins. For example, PDF documents (which you will learn more about in a later lesson) require
Version 1.0
5-27
users to install a browser plug-in, but this file type ensures that the content's original formatting is retained in display and print, and not interpreted differently by various browsers.
Case Study
Compromising Positions
Fabulous Design Company has an admittedly uncreative slogan: "The customer is always right." So when a potential customer named Tex said that he wanted the Web site for his car dealership to be "shaped like Texas," "have barbed wire and rifles," and "use a lot of cool fonts," the Web design team was concerned they did not want to be involved with the design of such a tacky Web site. The design team's project manager, Wendy, met with the potential customer and explained to him that although the customer is always right, the job of a Web designer is to create a site that will help the customer achieve his goals. So, rather than focusing on the customer's ideas for the look of the site at the beginning of the project, Wendy suggested that they start by analyzing the goals that Tex wanted the Web site to achieve. Tex agreed, but insisted that he knew exactly what the Web site should look like, and he just needed someone to build it. After Wendy and Tex had defined the goals and vision for the site, Tex realized that perhaps his original design idea was a bit elaborate and might cause some customers to look elsewhere. During her research and talks with Tex, Wendy discovered that car dealership sites particularly in Texas are often very colorful, that Texas themes tend to be very important to some buyers, and that being Texan is an important part of this business's brand identity. With her understanding of the project, and with Tex's new flexibility regarding the site's appearance, Wendy turned the job over to the production team. The designers interpreted Tex's vision and filtered it through their knowledge of design, branding, layout, fonts and colors. After seeing the comps, Tex was very happy with the results, and he thanked Wendy and her team for doing so much more than simply creating the site that he had originally requested. * * *
Consider this scenario and answer the following questions. Do you feel that the customer in this scenario should have compromised with the Web design team he was hiring? Should the design team have compromised with the customer? Was the compromise appropriate? Why or why not? Suppose either party in this scenario had not been so flexible. How else might this situation have turned out? Suppose you are a Web development project manager dealing with a customer whose ideas you do not agree with. On what issues do you think a Web designer should stand firm? On what issues should you compromise? What would you do if the customer insists on a design you do not like?
Version 1.0
5-28
Lesson Summary
Application project
This lesson discussed several layout elements that help make Web pages visually appealing, and easy to scan and understand. Although your site should be designed to deliver all your content efficiently, the goals of Web design focus in many ways on the first impressions of new users. What Web sites have you visited for specific information, only to find that the design was displeasing or difficult to use? Did you remain at that site long enough to obtain the information for which you initially visited? Or did you seek out a competitor whose site was designed better? What sites have you found whose designs are so enjoyable or easy to use that you return repeatedly, even if that site is not the best source for information? Visit at least one site that fits each of these descriptions, and as you browse, list page layout elements that contribute to your overall impression of the site. If you do not know of any such sites offhand, go to a search engine such as Yahoo! and enter keywords related to a hobby, favorite food or other topic that interests you. Visit some sites that match your keywords and see what you find. In general, what percentage of sites seems to use good Web page layout practices?
Skills review
In this lesson, you examined the elements of Web page design and ways to use them to your advantage. You learned how white space, tables and frames can be used in page layout. You learned about branding, and ways to convey a site's message and tone. You also studied color application and formats, and you learned about font styles and how to choose them. Now that you have completed this lesson, you should be able to: 1.1.14: Apply branding to a Web site. 2.1.1: Define and use common Web page design and layout elements (e.g., color, space, font size and style, lines, logos, symbols, pictograms, images, stationary features). 2.1.2: Determine ways that design helps and hinders audience participation (includes target audience, stakeholder expectations, cultural issues). 2.1.3: Manipulate space and content to create a visually balanced page/site that presents a coherent, unified message (includes symmetry, asymmetry, radial balance). 2.1.4: Use color and contrast to introduce variety, stimulate users and emphasize messages. 2.1.5: Use design strategies to control a user's focus on a page. 2.1.6: Apply strategies and tools for visual consistency to Web pages and site (e.g., style guides, page templates, image placement, navigation aids). 2.1.7: Convey a site's message, culture and tone (professional, casual, formal, informal) using images, colors, fonts, content style. 2.1.8: Eliminate unnecessary elements that distract from a page's message. 2.1.9: Design for typographical issues in printable content.
Version 1.0
5-29
2.1.10: Design for screen resolution issues in online content. 2.2.1: Identify Web site characteristics and strategies to enable them, including interactivity, navigation, database integration. 2.2.9: Identify audience and end-user capabilities (e.g., lowest common denominator in usability). 3.1.3: Use hexadecimal values to specify colors in X/HTML. 3.3.7: Evaluate image colors to determine effectiveness in various cultures.
Version 1.0
5-30
Lesson 5 Review
1. Studies have found that most users do not read Web pages instead, they scan them looking for key words and phrases. How does this user habit affect Web page layout?
2.
Web users demand speed. How can you design your Web pages to fulfill this demand?
3.
What are the two numeric formats used to define color values on the Web?
4.
What is the main limitation of font usage on Web sites?
5.
Name two layout elements you can use to create white space in your Web page design.
6.
What is branding, and how can a Web site contribute to it?
Version 1.0
5-31

Version 1.0
5-32
Activity 5-1: Identifying Web page layout elements

In this activity, you will reinforce what you learned about Web page layout elements in this lesson. Write your answers to questions in the spaces provided. Some questions are open-ended to promote thought and may not necessarily have a "correct" answer. 1. If the content is the reason users will visit your Web site, then why is page layout important?
2.
Name at least three basic elements of Web page layout.
3.
Choose one of the basic layout elements you named in the previous question, and describe how that element affects the appearance and readability of a Web page.
4.
In the previous question, did you describe a layout element that relates more to pure aesthetics or to logical organization of content?
5.
Name the most effective page layout style, and briefly describe how it compares to another major media type.
Page layout is crucial in Web design to ensure the success of your Web page content. Understanding the different elements of Web page layout and their effects on the user experience will help you design effective and appealing pages to present your content.
Version 1.0
5-33
Activity 5-2: Identifying numeric color formats

In this activity, you will identify colors by their RGB and hexadecimal codes. Write your answers to questions in the spaces provided. 1. What is the color code for white, which is the maximum presence of all colors? RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 2. What is the color code for black, which is the absence of all colors? RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 3. What is the color code for red? RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 4. What is the color code for green? RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 5. What is the color code for blue? RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 6. What is the color code for yellow? (Hint: Yellow consists of a maximum presence of red and green but no blue.) RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 7. What is the color code for magenta? (Hint: Magenta consists of a maximum presence of blue and red but no green.) RGB value: ________________________________________________ Hexadecimal value: ________________________________________ 8. What is the color code for cyan? (Hint: Cyan consists of a maximum presence of blue and green but no red.) RGB value: ________________________________________________ Hexadecimal value: ________________________________________ Understanding numeric color values is important for anyone designing pages or graphics for the Web. This activity discussed only basic colors consisting of maximum and null color intensities to give you practice in converting colors to code values.
Version 1.0
5-34
Optional Lab 5-1: Using Web page colors and fonts to convey a message
In this optional lab, you will experiment with different color schemes and fonts on a Web page to see how appearance affects the mood or personality of the message. This lab uses a fictitious business as an example, but you can use other content if you prefer. The example XHTML code is available in the file ColorsandFonts.htm in the supplemental files. 1. Notepad: Copy the file ColorsandFonts.htm from the C:\CIW\Web_Dsgn_Spec\ LabFiles\Lesson05\OptLab_5-1\ folder to your Desktop. Open ColorsandFonts.htm in your text editor to read the code. If you prefer, you can substitute or create your own content. For the purposes of this lab, you need only a simple Web page structure that includes some text in different sizes, such as the following content from ColorsandFonts.htm.
<!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>Colors and Fonts</title> </head> <body> <div align="center"> <h1> SALSA FIESTA </h1> <h2> Mexican Appetizers and Tequila Bar </h2> <h3> Hot Salsa, Wild Drinks <br /> and the Loudest Mariachi in Town! </h3> <hr width="75%" /> <p> Menus </p> <p> Mariachi </p> <p> Special Events </p> <p> Directions </p> <p> Hours </p> </div> </body> </html>
2.
Browser: Open ColorsandFonts.htm in your browser. Your page should resemble Figure OL5-1. What does the appearance of this page say about this business?
Version 1.0
5-35
Figure OL5-1: Web page with default font and black text on white background
3.
Notepad: Open ColorsandFonts.htm in your text editor. Change the page background and text colors of the page by adding the following information to the opening <body> tag:
<body bgcolor="#cccccc" text="#3333cc">
4. 5.
Notepad: Save ColorsandFonts.htm. Browser: Refresh ColorsandFonts.htm in your browser. Your page should resemble Figure OL5-2. Does this color scheme seem appropriate for this business? Why or why not? What type of business might these colors better represent?
Version 1.0
5-36
Figure OL5-2: Web page with gray background and navy blue text
6.
Notepad: Return to ColorsandFonts.htm in your text editor. Change the page background and text colors of the page as shown, and change the document's default font type by inserting a CSS style block within the <head> element, as indicated in bold. Note that you must remove the text styling from the <body> tag and place it in the CSS style block. In XHTML, using CSS is the preferred way to apply any type of formatting, colors or text styling.
. . . <title>Colors and Fonts</title> <style type="text/css"> <!-body { background-color: #cc6600; color: #3399ff; font-family: arial; } --> </style> </head> <body bgcolor="#cccccc" text="#3333cc"> . . .
7. 8.
Notepad: Save ColorsandFonts.htm. Browser: Refresh ColorsandFonts.htm in your browser. Your page should resemble Figure OL5-3. How do the new color scheme and font affect this page? Does the tone or mood seem more appropriate to the content? Do the color combination and the font improve or reduce readability? Is the effect the same for the whole page or just certain parts?
Version 1.0
5-37
Figure OL5-3: Page with orange background, blue text, and sans-serif font
9.
Notepad: Return to ColorsandFonts.htm in your text editor. Change the colors and font of the page as shown in bold:
<style type="text/css"> <! body { background-color: #9966cc; color: #ffff33; font-family: "Monotype Corsiva"; } --> </style>
Note: Remember that some fonts are less universal than others and may not appear to users who do not have them installed on their systems. If you cannot see this calligraphic font, check the list of fonts on your system's word-processing application to see which fonts are available to you. 10. Notepad: Save ColorsandFonts.htm. 11. Browser: Refresh ColorsandFonts.htm in your browser. Your page should resemble Figure OL5-4. How do the new color scheme and font affect this page? Does the lavender-and-yellow combination seem appropriate for this business? What about the calligraphic typeface? What message do these features convey? For what type of site might they be more appropriate?
Version 1.0
5-38
Figure OL5-4: Page with lavender background, yellow text and calligraphic script font
12. Notepad: Return to ColorsandFonts.htm in your text editor. Change the colors and fonts of the page as shown in bold, adding new styles for the heading levels:
<style type="text/css"> <!-body { background-color: #339900; color: #ffff33; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { color: #ff9900; font-family: "Gill Sans Ultra Bold"; } h2 { color: #9999ff; font-family: "Gill Sans Ultra Bold"; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; color: #9999ff; } --> </style> </head> <body>
Note: If you cannot see the fonts used here, check the list of fonts on your system's word-processing application to see which fonts are available to you. 13. Notepad: Save ColorsandFonts.htm. 14. Browser: Refresh ColorsandFonts.htm in your browser. Your page should resemble Figure OL5-5. Do these colors and fonts seem to be more fitting for the business advertised on this page? What other color combinations might convey an appropriate message for this content? What font styles might suit this page?
Version 1.0
5-39
Figure OL5-5: Page with alternate fonts, green background, and orange, blue and yellow text
15. Browser: Visit the Browser-Safe Web Palette page (provided by Lynda Weinman) at www.lynda.com/resources/webpalette.aspx, and link to the View The Full Browser Safe Palette Organized By Hue or View The Full Browser Safe Palette Organized By Value page. These pages provide hexadecimal and RGB values for all colors in the browser-safe palette. Keep this page open for reference. 16. Notepad: Return to ColorsandFonts.htm in your text editor. Experiment with other color schemes and fonts on this page. Consult the Browser Safe Palette pages to choose colors and find codes. Note which color combinations seem to improve readability and which ones reduce it. For font names, check the list of fonts on your word-processing application to see which fonts are available on your system. 17. Notepad: Save ColorsandFonts.htm after applying changes so you can view it in your browser. 18. Browser: Open ColorsandFonts.htm and view the effects of your changes on the page. What changes might you make if the Web page you were working on represented an airline? A wedding announcement? A toy store? Color schemes and fonts may seem to be less important to Web design than other aspects of layout and content, but these elements have the ability to change the message your Web pages convey. The first impression made by your Web pages can affect the success of your site. An appropriate tone and easy readability are important elements of a Web page that can be created without changing your content.
Version 1.0
5-40
Lesson 5 Quiz
1. You are designing a Web site for a general public audience. Which of the following guidelines should you follow? a. b. c. d. 2. Create a very dynamic site using high-end software. Use the newest multimedia and plug-ins available. Design for the lowest common denominator of hardware. Design for the most recent browsers but slower modems.
Elements such as a company's logo and color scheme can help the company create a memorable image in consumers' minds and strengthen the company's marketing efforts. Which term applies to this practice in a Web site? a. b. c. d. Layout Branding Resolution Consistency
3.
Which is the correct RGB value for the color blue? a. b. c. d. 0,0,255 0000FF FF0000 255,255,0
4.
Which is the best font choice when designing for the Web? a. b. c. d. One or two commonly used fonts A combination of serif fonts in various sizes A variety of fonts that look artistic together An unusual font that expresses uniqueness
5.
Which of the following elements is essential to Web design because it distributes content and reduces clutter on a page? a. b. c. d. Sans-serif fonts White space Hyperlinks Headings
Version 1.0
6Lesson 6: Web Site Usability and Accessibility

Objectives
By the end of this lesson, you will be able to: 1.1.4: Determine the audience for the site. 1.1.15: Conduct audience usability tests. 2.2.6: Identify and apply user-accessibility standards and laws (e.g., W3C WAI/WCAG, ADA, Section 508, international standards). 2.2.7: Identify common user-accessibility challenges and solutions. 3.5.2: Perform site testing (functionality, usability, browser compatibility).
6-2
1. What is the most valuable information a Web designer can have to maximize a site's usability and increase its chances for success?
2.
Why is it important to conduct usability tests on a Web site? a. b. c. d. So So So So the the the the customer can approve the color scheme and images design team can try using the live site online developer can continue planning the rest of the design developer can obtain an objective evaluation of the site
3.
At what point in the production of a Web site should usability testing be conducted? a. b. c. d. As As As As close as possible to the finished product close as possible to the beginning of the project soon as some pages are developed and available for testing soon as the development team is assembled and available to test pages
Version 1.0
Lesson 6: Web Site Usability and Accessibility
6-3
Audience Usability and Accessibility

OBJECTIVE 1.1.4: Determining site audience
Among the most valuable information a Web developer can have is knowledge of his or her audience. Along with strong navigation, knowing your audience is crucial to the success of a site. For example, if you are creating a site for an older audience yet you choose to implement cutting-edge multimedia technology, you do not know your audience. Knowing the audience requires you to learn demographics about its members: age, education, income and location. In addition, you need to determine the technology these users can support with their current computer systems, including connection speed, browser versions and available plug-ins. When you know these factors, you can tailor your content to maximize user support. However, it is impossible to completely know your audience on the Web because the Web makes your site available to anyone with a browser. This fact makes accessibility important. To make your Web site usable to your entire audience, you need to consider all users, including users with various system capabilities and users with disabilities. A Web site with small text that cannot be adjusted may be usable for people with good vision, but that same site is not user-friendly for people with visual disabilities.
Defining Usability
NOTE: You can learn more about ISO at www.iso.org. The ISO 9241 document can be purchased from ISO at www.iso.org/iso/ store.htm.
In the ISO 9241 document, the International Organization for Standardization (ISO) defines usability as "the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments" (www.w3.org/2002/09/usabilityws.html). In other words, usability is the measure of how easy a given item is to use. Although usability may seem basic and straightforward, it is actually a complex subject because there is no single type of user, and because Web sites can be used with so many different combinations of operating systems, browsers and system settings.
Elements of usability
The usability of a site can be divided into several distinct elements that are essential to high-quality design. These elements are in no particular order; each has equal importance because it is the combination of these elements that determines usability. Removing even one element will diminish usability.
NOTE: Name examples of Web sites you consider to be highly "usable," based on the elements listed here. These sites are most likely sites to which you return repeatedly. What specific characteristics do you like about these sites?
High-quality content The quality of the content offered by a site is ultimately the value that the site provides. Easy navigation Users must be able to navigate the site intuitively with little effort on their part. Otherwise, they will become frustrated and likely go elsewhere. Coherent information architecture High-quality content is of little use if it is not organized in a way that the average user can effectively navigate. Therefore, a site's information must be organized in a logical structure in the most simple, straightforward way possible. Search capability All users are familiar with conducting searches, so providing a search engine capability will enhance content identification and retrieval. Relevant services Consider what your audience needs. If users need your site to purchase your company's products, to network and build communities, or to
Version 1.0
6-4
download the latest applications, make sure you provide the capability to do these things. These usability elements can be addressed, implemented and improved even as Web and browser technology are in fluctuation.
Software technology
NOTE: Do you find it surprising that Web users are reluctant to accept innovations in design? Does this fact seem to misrepresent Web users? Does it seem contrary to the modern, "new medium" image that the Web tends to portray? Are users catching up to the Web? Is the Web slowing down to users?
Imagine if the location of the File menu changed every time you started up a new software application, or if the print function always worked differently between programs, or if Microsoft released a new version of Word where the menus were totally rearranged and moved to the bottom. Unheard of, right? Over the years, software developers have discovered that having standards for the placement and the functionality of common software elements increases the usability of their software. Today, expectations for Web navigation and user options are beginning to emerge, and users want pages to stay within these expectations. The Web constitutes a single interwoven user experience, rather than a set of separate publications accessed one at a time like traditional books and newspapers. The Web as a whole is the foundation of the user interface, and individual sites are mere particles in the Web universe. At first, Web design conventions such as left-margin navigation, Home buttons, column layouts and tabs may seem limiting to designers. However, as is the case with any product designed to be used by people, the conventions make it possible for designers to move forward. Having standards and conventions for the placement and functions of certain Web site elements makes users more comfortable with navigating the Web. This frees up designers because they do not need to continually reinvent these conventions; they can focus on and be innovative with other aspects of Web design.
Web Site Usability Testing

OBJECTIVE 1.1.15: Audience usability tests
OBJECTIVE 3.5.2: Site testing
The only way to achieve maximum site usability is to conduct a usability test. Without sufficient testing, the developer cannot validly determine that his or her site design will be functional for the audience. The developer has an intimate knowledge and understanding of the intentions of the site from his or her production efforts. However, this closeness gives the developer a biased perspective of the site's actual usefulness. The developer can navigate and find information mainly because of his or her close relationship to the project. A site's effectiveness should be tested with users who have had little or no exposure to the site and, if possible, limited experience with the Internet. Conducting a usability test gives the developer an objective view of the site.
NOTE: Have you ever participated in evaluation testing for a Web site or any other product? Did you think the tests seemed useful? Were you asked to participate as an objective evaluator or expert evaluator?
Before the test

The first step in testing usability is to develop the site to a point very close to the finished product. If the project is not yet at this stage, a usability test cannot provide an accurate evaluation.
Who should test usability?

The test pool can range from as few as five or six users, to as many as you can accommodate. Testing the site with other design team members is inconclusive. Further, the test subjects should include actual target audience members. For example, you
Version 1.0
6-5
NOTE: You can conduct an unofficial usability test on a public Web site in Optional Lab 6-1: Evaluating a Web site's usability.
should not test an online stock-trading site only with teen-agers, nor should you limit yourself to professional stockbrokers. A good cross-section should include some professionals, some users who are moderately familiar with online trading, and some users who know little about trading or have never traded stock online. This type of pool provides valuable input from professionals, while non-traders can gauge how effectively your site accommodates an entry-level audience (which also provides a stream of new online traders to build the business). Whoever the testers are, be sure you clearly understand their backgrounds so that their evaluations can be put into perspective. An exception to the diverse-background rule exists if the site is for internal corporate use as an intranet. In this case, the project team is very likely a part of the audience. However, you should still include others members of the organization, particularly those who are removed from the development process. This more objective group is the most accurate representation of successful site usability.
Usability tasks
NOTE: You can devise tasks and interview questions to use when conducting a usability test in Activity 6-1: Conducting a Web site usability test.
During the test, participants should be asked to perform actual tasks. If the testing is choreographed with no real-world circumstances, you are unlikely to discover potential problems. Provide a list of tasks and operations to each participant, with no indication of how to perform them. The site itself should tell users all they need to know to navigate and complete tasks. Participants should also be asked to note elements they like as well as those they do not. This feedback will make the site more effective. As a developer, you may find it difficult to watch test participants stumble through tasks or become frustrated, but you must not interfere in the process. In fact, if you feel observation is necessary, conduct it through video or a one-way mirror. This method precludes any contamination of the testing.
NOTE: Leading your usability test participants into evaluating certain aspects of a site is acceptable during a post-test interview. However, eliciting specific information during the testing process can affect the participants' visit to the site and alter their perceptions of the experience. NOTE: You should be familiar with the concept of constructive criticism, but consider that its importance is emphasized in Web development because Web sites are almost always designed for audience consumption. It is crucial to elicit honest feedback from other people.
Results
After testing, be sure to interview the participants upon exit. You can often help them recall observations they forgot or did not have time to write down. You can include questions such as the following: What was your first impression when you saw the site? What type of company image did the site portray? Do you understand the site structure? Can you recall the site's major elements?
Written data should be compiled and analyzed from a distance. How many users had the same experience? Were any problems consistently noted? These trends are the real indicators of usability. Be sure to take a closer look at these problems individually, to see how you as the developer can heighten user awareness and usability.
Applying the results

Some insufficiencies will probably surface during the testing. As a designer, you may find it difficult to accept criticism for a site that you put much effort into producing, but you must consider feedback constructively and address the issues. The sting of critique from a few participants will be short-lived compared with a Web site catastrophe that could
Version 1.0
6-6
occur if you go online with a faulty site and receive widespread criticism for preventable or foolish mistakes.
Web Page Accessibility

OBJECTIVE 2.2.6: Useraccessibility standards and laws
Web pages should be accessible to all people, including those with disabilities. To assist in this mission, the World Wide Web Consortium (W3C) has created the Web Accessibility Initiative (WAI). According to the WAI, the Web's full potential can be realized only by "promoting a high degree of usability for people with disabilities" (www.w3.org/WAI/about.html). The WAI works with worldwide organizations in five main areas: technology, guidelines, tools, education and outreach, and research and development. WAI aims to ensure that core technologies used on the Web, such as HTML, CSS, XML and DOM, are equally accessible to users with physical, visual, hearing and cognitive disabilities. For example, a person with a visual disability may be unable to view a multimedia presentation on the Web. One way to solve this problem is to include text equivalents of the presentation in the code. The multimedia player, such as RealNetworks RealPlayer or Microsoft Windows Media Player, could then access the text equivalent and present it to the user in Braille or as speech. The WAI works with various W3C Working Groups to ensure that the standards for various W3C technologies include accessibility options. For example, the HTML standard supports improved navigation, extended descriptions of complex graphics, and multimedia captions. It also supports device-independent user interface descriptions that allow users to interact with Web pages using a mouse, keyboard or voice input. You can visit the following Web sites to learn more about Web page accessibility for disabled users: Web Accessibility Initiative (WAI) www.w3.org/WAI/ Curriculum for Web Content Accessibility Guidelines 1.0 www.w3.org/WAI/wcag-curric/ ADA Standards for Accessible Design www.ada.gov/stdspdf.htm
NOTE: Consider the challenges inherent in making Web pages accessible to people with visual disabilities. The WAI offers many good solutions that every Web developer should be aware of.
WAI conformance
NOTE: Visit WAI on the Web (www.w3.org/WAI) to learn more about accessibility considerations.
The WAI Web Content Accessibility Guidelines (WCAG) 1.0 specification (www.w3.org/TR/WAI-WEBCONTENT/) divides conformance requirements into a hierarchy with three levels. Note that in accordance with accessibility guidelines, conformance level names are spelled out in text so they may be understood when rendered to speech. The conformance levels are defined as follows. Conformance Level "A" All Priority 1 checkpoints are satisfied. Conformance Level "Double-A" All Priority 1 and 2 checkpoints are satisfied. Conformance Level "Triple-A" All Priority 1, 2 and 3 checkpoints are satisfied.
Each level of conformance encompasses a specific set of checkpoints, each with an assigned priority level. The WAI defines the three priority levels of checkpoints as follows. Priority 1 A Web content developer must satisfy this checkpoint to provide accessibility for all users. If a Priority 1 checkpoint is not satisfied, then one or more groups of users will be unable to access information in the Web document. This checkpoint is a basic requirement for some groups to access Web documents.
Version 1.0
6-7
Priority 2 A Web content developer should satisfy this checkpoint. If a Priority 2 checkpoint is not satisfied, then one or more groups of users will have difficulty accessing information in the Web document. This checkpoint removes significant barriers to accessing Web documents. Priority 3 A Web content developer may address this checkpoint. If a Priority 3 checkpoint is not satisfied, then one or more groups will have some difficulty accessing information in the document. This checkpoint improves access to Web documents.
All checkpoints are organized under 14 specific guidelines. The guidelines are developed with consideration for groups of users with specified disabilities or needs. The WAI defines the 14 guidelines as follows.
NOTE: Notice that most of these guidelines seem sensible for all Web pages, whether the developer is considering user disabilities or not. Good Web design practices such as these are often a simple matter of common sense.
1. 2. 3. 4. 5. 6. 7. 8. 9.
Provide equivalent alternatives to auditory and visual content. Do not rely on color alone. Use markup and style sheets properly. Clarify natural language usage. Create tables that transform gracefully. Ensure that pages featuring new technologies transform gracefully. Ensure user control of time-sensitive content changes. Ensure direct accessibility of embedded user interfaces. Design for device independence.
10. Use interim solutions. 11. Use W3C technologies and guidelines. 12. Provide context and orientation information. 13. Provide clear navigation mechanisms. 14. Ensure that documents are clear and simple. Although different situations should be considered when designing Web documents, each accessible design choice generally benefits several disability groups, and the Web community as a whole. For more detailed information, you can read the WAI specification at www.w3.org/TR/WAI-WEBCONTENT/.
Section 508 of the Rehabilitation Act

NOTE: Section 508 is presented by the U.S. government. The WAI is presented by the W3C, which is concerned with international (worldwide) standards.
In 2001, the U.S. government implemented Section 508 of the Rehabilitation Act: Electronic and Information Technology Accessibility Standards. Section 508 requires that all electronic and information technology developed, procured, maintained or used by federal agencies be comparably accessible to users with disabilities. Section 508 is based on the Priority 1 and 2 checkpoints of the W3C's WAI Web Content Accessibility Guidelines (WCAG) 1.0. You can learn more about Section 508 by visiting the following URLs:
Version 1.0
6-8
Section 508 Homepage: Electronic and Information Technology (www.access-board.gov/508.htm) Section 508: The Road to Accessibility (www.section508.gov)
In the following lab, you will use a Web site that helps you identify common user accessibility issues and find ways to remedy problems. Suppose you are designing a Web site for a customer who has mentioned that many of her business's users have disabilities and use specialized software for accessibility. Whether your customer has specified that the site must conform to accessibility standards or not, you can ensure that you address accessibility during development of the site. Your customer will have happy customers, and she will not have to return to you with requests to investigate and repair complaints. Complying with accessibility standards is not as difficult as you might think.
Lab 6-1: Identifying common accessibility issues

OBJECTIVE 2.2.7: Useraccessibility challenges and solutions
In this lab, you will use a site that tests Web pages for compliance with accessibility guidelines and suggests solutions to the problems it finds. 1. Browser: Open your browser and go to www.cynthiasays.com/. You should see the HiSoftware Cynthia Says home page, as shown in Figure 6-1. Cynthia Says is a free service for testing the accessibility of Web pages.
Figure 6-1: HiSoftware Cynthia Says home page
2. 3.
Enter the URL for any Web site into the Web Page (Required) field on the form. Then click the Test Your Site button to display the resulting accessibility report. Scroll the page and review the results that Cynthia Says returns. Note the accessibility issues that Cynthia Says cites, and its suggestions for making the reviewed Web site more accessible.
Version 1.0
6-9
4.
Try analyzing additional sites. Do most of the sites you visit meet Conformance Level "A"? Do any of them meet this level? Of the problems that were found under Conformance Level "A," are any of them issues that would dramatically change the way the site looks or works?
Case Study
Eating It
Jean and his small team of developers had finished creating the Web site for a new online business called I8IT, which sells unusual artistic and sculptural food items. I8IT's products are unique and unconventional, and its owners had asked the Web team to design a very visual, unusual, ultra-modern site to match the business's personality. Jean's team proposed design ideas that the customer loved: graphical icons for all the navigation links and buttons, visual images in place of descriptions, a minimum of text, and text that did appear consisted of clever and unusual spellings and abbreviations. The completed site was unique and eccentric, and both Jean's team and I8IT's owners were pleased. The business's desired launch date was very close, so there was little time for testing the site. Jean asked all the members of the development team and the I8IT owners to join him in spending half a day browsing and using the site to check for errors in design or functionality. Some invited their spouses or close friends to participate in the testing. Although the testing elicited a few questions, Jean and his team were easily able to answer them. Shortly after the site and marketing were launched, I8IT noticed that they had received almost no orders, but a great many complaints and puzzled inquiries through the site feedback. Some site visitors said they could not find their way around the site because they did not understand the navigational icons. Others were confused by the clever shorthand text descriptions. Some wondered whether the products were food, toys or art. Several mentioned that when they tried to purchase items, they had trouble backing out of the shopping cart to do more shopping and eventually gave up. I8IT's owners were no longer pleased. Although they liked the design, they did not understand why site visitors had such trouble with the site when the owners themselves thought it worked just fine. In any case, they held Jean and his development team responsible for the site's poor usability because, as they said, Jean was the Web professional he should know what works and what does not. They insisted he redesign the site for free. * * *
Consider this scenario and answer the following questions. With this site's design, what mistakes did Jean and his team make in relation to site usability? Which site design elements should be changed? What particular accessibility challenges did this site's design pose for users with disabilities or special accessibility software? What mistakes did Jean make in his usability testing process? How should the steps and participants have been different?
Version 1.0
6-10
Lesson Summary
Application project
This lesson explained that a good usability test should be conducted using objective participants who represent a cross-section of actual audience members. It makes sense that you may not learn much from the opinions of people who never use the Web. However, technical experts are not necessarily recommended to represent your audience in a Web usability test either. Why not? By contrast, subject matter experts can present a different level of feedback because they are familiar with the content and thus know what to look for when evaluating a site's usability. Those who are unfamiliar with the subject matter can only help you gauge the site's usefulness to a novice. Conduct an unofficial usability test on the Web site posted by your company or school. What is your first impression of the site? Is it easy to use? Is the site missing any features that you think would improve its usability? Does it offer all the information you might look for? Do you have questions that are left unanswered after visiting the site? Look for a Contact link or e-mail address for the site's Webmaster or technical team, and send an e-mail message with feedback. Be sure to note positive aspects of the site in addition to any problems or questions. Now visit a site whose subject matter is unfamiliar to you. For example, if you know little or nothing about Java programming, bocce ball or the social traditions in Tonga, use a search engine to find a Web site that discusses that topic. Conduct another unofficial usability test, asking the same questions as you did for your school or company site. Do you find that you have more questions about the site's usability, or fewer? Do you think any difference in your evaluation is related to your lack of familiarity with the content?
Skills review
In this lesson, you learned that audience usability is an integral part of user satisfaction. You also learned how to conduct a usability test. Finally, you studied accessibility guidelines to help you create Web sites that are equally accessible by Web users with disabilities. In the past, usability and accessibility for Web design have been vague topics that were considered to be good ideas, but not necessarily as important as other aspects of Web design. Today, best-selling books on usability, as well as efforts by standards organizations and governments, are changing all that. Now that you have completed this lesson, you should be able to: 1.1.4: Determine the audience for the site. 1.1.15: Conduct audience usability tests. 2.2.6: Identify and apply user-accessibility standards and laws (e.g., W3C WAI/WCAG, ADA, Section 508, international standards). 2.2.7: Identify common user-accessibility challenges and solutions. 3.5.2: Perform site testing (functionality, usability, browser compatibility).
Version 1.0
6-11
Lesson 6 Review
1. Name three types of information about the user audience that a Web designer can use to increase usability.
2.
What are the five elements of Web site usability?
3.
Why is it important for Web pages to have conventions, or functions that are similar across many sites?
4.
Should a site developer participate in the usability testing of his or her own site? Why or why not?
5.
Describe the most effective test pool for conducting a Web site usability test.
6.
What types of tasks should participants in a usability test be asked to perform?
7.
What is the WAI, and what is its purpose?
Version 1.0
6-12

Version 1.0
6-13
Activity 6-1: Conducting a Web site usability test

In this activity, you will devise tasks and questions that you could use to conduct a Web site usability test. Your questions will be based on the five distinct elements of Web site usability. Write your responses in the spaces provided. Questions are open-ended to promote thought and may not necessarily have a "correct" answer. 1. Consider the type or purpose of the Web site you might design. For example, might you develop a travel reservations site? An online store that sells handmade greeting cards? A site that reviews music CDs? For the purpose of this activity, specify the subject and purpose of your Web site.
2.
Now suppose that you have five participants reviewing your Web site for usability. First, you must provide a list of specific tasks that you want each participant to perform after he or she arrives at your home page. State at least three tasks you would ask participants to perform at your site. Make the tasks as specific to your subject matter as possible.
3.
After your test participants complete the list of tasks you have asked them to perform, you will ask each one a few questions to review whether your site satisfies the four elements of usability. The first element of Web site usability is high-quality content. Write at least one question you could ask participants about how they perceived the content on your site (relative to subject matter).
Version 1.0
6-14
4.
The second element of Web site usability is easy navigation. Write at least one question you could ask participants about their experience moving around your site (relative to subject matter).
5.
The third element of Web site usability is information architecture. Write at least one question you could ask participants about whether content was organized into a logical, flowing order (relative to subject matter).
6.
The fourth element of Web site usability is search capability. Write at least one question you could ask participants about whether the Web site offered them the ability to quickly search for and find a particular topic (relative to subject matter).
7.
The fifth element of Web site usability is relevant services. Write at least one question you could ask participants about whether the Web site offered them the services they want and expect.
When you recruit others to help you evaluate your Web site, asking the right questions can help you obtain the exact information you need. Phrasing questions to elicit opinion ("what do you think?") as well as fact ("what did you find?") can help you learn more. Both fact and opinion are important to consider when designing a Web site for an audience.
Version 1.0
6-15
Optional Lab 6-1: Evaluating a Web site's usability

In this optional lab, you will conduct an unofficial usability test on a public Web site and evaluate the quality of the site's audience usability design. Your evaluation will be based on the five distinct elements of Web site usability. Write your responses in the spaces provided. Questions are open-ended to promote thought and may not necessarily have "correct" answers. 1. Browser: In your browser's Address field, enter www.cooking.com. You will see the Cooking.com home page, which should resemble Figure OL6-1 (headlines and featured products will differ).
Figure OL6-1: Cooking.com home page
2.
Browser: You will review the usability of this Web site's design by performing specific tasks, then answering questions related to usability elements. Start by spending a few minutes browsing the home page and a few others to see the type of content that is offered. Browser: Return to the home page. Now, suppose you want to buy a coffee grinder. Try to locate a coffee grinder on this site without using the keyword search. Did you find what you were looking for? How quickly? How many clicks did it take?
3.
4.
Browser: Once you locate a coffee grinder that you like, specify that you want to buy it, then return to the main pages to look for more items. Remove any items from your shopping cart. How easy was it to add the grinder to your shopping cart? How easy was it to continue shopping after adding an item to your cart? How easy was it to remove items from your cart?
Version 1.0
6-16
5.
Browser: Suppose you want to try a recipe for baklava. Try to locate a baklava recipe on this site. What method did you use to find it? Did you find what you were looking for? How quickly?
6.
Browser: Suppose you want to order a country-style ham to be shipped to your home. Try to locate ham on this site. What method did you use to find it? Did you find what you were looking for? How quickly?
7.
Browser: Suppose you ordered a waffle iron from this site last week. You have not received it yet, but you hope to have it in time to make waffles for a brunch this weekend. You want to know your order's progress and when you can expect to receive it. Can you find this type of information on the site? How quickly?
8.
Now that you have performed some tasks on this Web site, you can answer questions about its audience usability. The first element of Web site usability is high-quality content. Do you think that this Web site provides useful, accurate, relevant information about cooking and related products? Why or why not? Were recipes and product descriptions clear, concise and well-written? Were images clear? Did you have a question related to a recipe, product or order for which you could not find an answer? Does the site appear to offer highquality products, good variety and a complete selection?
9.
The second element of Web site usability is easy navigation. Was it easy to find the information you were seeking? Were pages and topics clearly labeled with easy-tointerpret conventions or descriptive words? Did you get trapped on any dead-end pages? Did you have to backtrack because you were misled by a label or icon?
10. The third element of Web site usability is information architecture. Did this site's information seem to flow logically? Did appropriate subtopics appear under topics, or the other way around? Did you find products under the topic you expected? Was information located in places that you think made sense?
11. The fourth element of Web site usability is search capability. Were you able to quickly search for a specific topic or product without having to visit and read many pages? How often did you use the keyword search field? How quickly were you able to locate a specific item without using the keyword search? Were you unable to find any topics?
Version 1.0
6-17
12. The fifth element of Web site usability is relevant services. Were you able to shop efficiently and keep track of items in your cart? Were you able to see a subtotal of items in your cart? How quickly were you able to add or remove items and then resume your shopping? Was it easy to navigate between the shopping cart and the catalog pages?
How did you rate this Web site's usability? Do you think there would be any difference in the perceptions of site visitors who were very interested or very uninterested in the selected subject matter, cooking products? What did you learn about site design from this site's strengths and its shortcomings? If you believe you have useful feedback, you can send an e-mail message to the site's technical team. Be sure to note positive aspects of the site in addition to any problems or questions.
Optional Lab 6-2: Determining usability

In this optional lab, you will learn about specific methods for ensuring usability. 1. 2. Browser: In your browser's Address field, enter http://www.usability.gov. Browser: Conduct research on this Web site on the following methods for ensuring usability: 3. Prototyping Focus groups Heuristic evaluation techniques Web writing techniques
Browser: Visit the following Web sites: http://webdesign.about.com/od/webdesignbasics/a/aa010603a.htm http://www.webcredible.co.uk/user-friendly-resources/web-usability/usabilitytesting.shtml
4.
In the space provided, write down key usability insights you gathered from these sites.
In this optional lab, you learned about methods you can use to ensure usability on your Web site.
Version 1.0
6-18
Lesson 6 Quiz
1. An important usability factor in designing for the Web is knowledge of your audience. Designers can study demographics to determine the audience's hardware and software capabilities, then use this information to: a. b. c. d. 2. tailor content to maximize user support. persuade users to upgrade their browsers. create a site that users can test for usability. create customized navigational elements.
The usability of a Web site can be divided into several distinct elements. Which usability element is ultimately the value that the site provides? a. b. c. d. Easy navigation Search capability High-quality content Information architecture
3.
Which of the following groups would provide the best test pool for conducting a usability test on a travel-reservations Web site? a. b. c. d. Young computer experts Retired senior citizens who travel a lot Travel agents from competing agencies Users with various backgrounds and skill levels
4.
During a usability test, the site developer who is conducting the test should: a. b. c. d. observe the test participants, but not assist them. proctor the test participants and answer their questions. resist the temptation to interview participants when they exit. provide a list of tasks and indicate exactly how to perform them.
5.
What is the purpose of the Web Accessibility Initiative (WAI)? a. b. c. d. To enforce the rules of the XHTML standard on public Web sites To promote a high degree of Web usability for people with disabilities To raise funds that provide computers and Internet access in schools To ensure the widest possible audiences by testing Web sites with various browsers
Version 1.0
7Lesson 7: Browsers
Objectives
By the end of this lesson, you will be able to: 1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers. 1.3.3: Identify site strategies and technologies to avoid, including pop-up windows, single-browser sites, spam. 3.5.2: Perform site testing (functionality, usability, browser compatibility) 4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning). 4.2.12: Identify the functionality of pop-up/pop-under windows (e.g., creation, benefits, disadvantages, reasons to omit from your site). 4.2.13: Define CAPTCHA and create a CAPTCHA for a Web site. 4.2.14: Explain how the TinyURL service works.
7-2
1. Which function is part of a Web browser's Internet access layer? a. b. c. d. 2. SSL encryption Browser window Pop-up windows History list
Which of these technologies should you avoid in order to maximize the number of browsers on which your site can be used? a. b. c. d. ActiveX GIF JPEG XHTML
3.
Are there instances in which pop-up windows are useful?
Version 1.0
Lesson 7: Browsers
7-3
Browsers and Navigation

The functionality of Web browsers can be divided into the following three components, or layers. Internet access layer functionality that includes the protocols for communicating with remote Web sites, ranging from HTTP to various encryption types such as SSL. Navigation layer functionality that tracks locations that the user has visited on the Web, and helps the user go where he or she wants to go. This layer can include a history list, which lists the sites that the user has visited. Presentation layer the browser window that displays the page requested by the user.
These three basic components, illustrated in Figure 7-1, work together to allow you to navigate the Web.
Figure 7-1: Web browser layers
Version 1.0
7-4
NOTE: You should be familiar with all of the basic browser features listed here. If not, take a moment to open your browser and review these features and their functions.
Although differences exist among browsers and even versions of the same browser, all browsers have some common user features: Back button. Forward button. URL or Address field. Browser history. Bookmarks or Favorites. Status bar. Colored hyperlinks (unless changed, unvisited links are blue and visited links are magenta).
Browsers and Design Considerations

OBJECTIVE 1.3.3: Site strategies and technologies to avoid
During the earlier days of Web browsers, the two major browsers of the time Netscape Navigator and Microsoft Internet Explorer each added unique features with expanded HTML to try to gain an advantage over the rival browser. Although it is tempting to utilize all the features that Web browsers provide when you design a Web site, you must be careful that you do not make your site unusable by users with less dominant browsers. Whenever possible, design your Web pages using standards established by the W3C and widely supported by various browsers. Some technologies and some design techniques limit your site's usefulness to certain audiences. Others commonly annoy users. You should avoid such technologies and techniques in your site designs, unless you have compelling reasons to use them and are not concerned about alienating some sectors of the Web audience. Following are some examples of technologies and site strategies that you should avoid when designing a Web site.
Single-browser technologies
Single-browser technologies are generally those created by a vendor and thus functional only when that vendor's browser is used to view the page in which they reside. Such technologies limit your Web site's audience to users who are using the one specific browser. So unless you know that all of your site's users will be using a specific browser (such as with a corporate intranet at a company in which all users have a standard browser), you should avoid these types of browser-specific functionality in your site designs. Two almost ancient examples of single-browser technologies are the <blink> and <layer> tags, which were created by Netscape. The <blink> tag caused text to appear and then disappear in the browser window. The <layer> tag was an early technique for positioning elements on a Web page, and Netscape's support for this tag ended with its version 6 release. Today, the universal standard for element positioning is to use Cascading Style Sheets (CSS). Another example of a single-browser technology is ActiveX controls.
ActiveX controls
The Internet Explorer browser supports the use of Microsoft's ActiveX components, or controls, which can be used to enable interactive content on the Web. For example,
Version 1.0
Lesson 7: Browsers
7-5
ActiveX components enable users to view Microsoft Word or Microsoft Excel documents in the Web browser, and allow users to edit HTML within a browser window. However, ActiveX technology is owned by Microsoft, so non-Microsoft browsers and nonWindows operating systems usually do not support it. In addition, ActiveX components may pose some security risk, although Microsoft has been making progress in addressing this problem. Unless you know that only Internet Explorer browsers will be used to access your Web site (which may be the case for a company intranet, for example), you should avoid relying on ActiveX components for important parts of your site.
Reliance on browser navigation

Although many users prefer to use the browser's Back button to return to the previously viewed page on a site, they should not have to rely on this browser button. Browser elements are designed to assist the user, but they should be a subordinate form of navigation. You will learn more about designing Web site navigation in the next lesson. In general, if the user must use the browser's Back button to navigate your site, then the site's navigation elements are insufficient.
Pop-up and pop-under windows

OBJECTIVE 4.2.12: Pop-up/popunder windows
Every Web browser has the ability to display multiple windows and to create new windows, and this functionality can be controlled programmatically. This ability is necessary (for example, so that you can access more than one Web site at a time). However, the ability to launch additional windows is often abused by programmers to force users to view things (usually advertisements) that they did not request. These new browser windows are called pop-ups or pop-unders (depending on whether they appear above or below the browser window that launched them). Pop-ups are fine if the user requests the content and if they complement the content of the main browser window. For example, a link to a movie or audio clip may be labeled, "Click here to launch this clip in a separate window." But pop-ups that appear unexpectedly and present advertising or other unwanted content to the user tend to be annoying. Another reason to avoid pop-ups is that many browsers now feature pop-up blockers, which prevent pop-ups from appearing as the user browses sites. As a result, pop-ups and pop-unders are much less effective as advertising today than they were when they were new, and using them for legitimate purposes may exclude many users from some valid functionality of your site. Consider your Web site's purpose and audience before adding pop-up and pop-under windows to it. If pop-ups will serve a legitimate and useful purpose in your site, you can create them using a scripting language such as JavaScript. You will learn about JavaScript and creating pop-up windows later in this course. Some online resources for pop-ups include the following: HTML Code Tutorial, Popup Windows (www.htmlcodetutorial.com/linking/linking_famsupp_70.html) DesignerWiz (www.designerwiz.com/adframer.htm?http&&&www.designerwiz.com/generator/popup_window_generator.htm)
Version 1.0
7-6
Spam
Spam is unsolicited, bulk commercial e-mail that the recipients did not ask to receive. Spam is the equivalent of junk mail, and the vast majority of Web users consider it highly annoying.
blacklist Also known as blackhole list. A published list of IP addresses known to be sources of spam.
Many businesses use bulk e-mailing lists legitimately for advertisement and promotion by sending e-mail messages only to recipients who have requested or approved the messages. This type of advertising strategy is not considered spam because it is based on user request, and thus can provide a very useful tool for your business. Advertising on the Web is fine, but any content that is unsolicited and intrusive (such as pop-ups and spam) is very likely to make users unhappy with your site and perhaps your business. Such content may even result in legal consequences or blacklisting. Sending unsolicited spam is a site strategy to avoid because it reflects poorly upon your organization and because in some cases it may be illegal. You will learn more about spam practices, and the ethics and laws related to spam in a later lesson.
Browser Adoption
The rate at which users upgrade their browsers has actually decreased as more users have come online. Studies indicate that the rate for users to upgrade their 3.x versions of browsers to the 4.x versions took twice as long as upgrades from 2.x versions to the 3.x versions. Following are some factors involved in the slower browser migration: The user base has grown beyond technically adept users who are interested in the Internet for its own sake. Most current users care about content, not technology or software. Therefore, they are not as motivated to upgrade. Many new users do not know how to upgrade their browsers, so they continue to use whichever version they have. Early Internet users were more skilled; many users today are less skilled in their abilities to download, install and configure software. Recent browser upgrades have been less compelling than previous ones in terms of added features or improved usability. The earliest browsers were primitive. The relative improvements from one release to the next were thus fairly significant, offering past users increased benefits for upgrading. The download size (in megabytes) of upgrades has grown faster than available bandwidth, thus upgrading requires more time or more costly connection services.
NOTE: Perform a Google search to find out which browser version most people use. Have you ever upgraded your browser yourself?
According to W3Schools (www.w3schools.com/browsers/browsers_stats.asp), Mozilla Firefox was the most widely used browser on the Internet as of February 2010, followed by Microsoft Internet Explorer version 8.
Browser elements
All browsers, regardless of vendor, include basic elements that enable them to perform browsing-related tasks. Differences arise in how the elements are implemented. Basic browser elements include (but are not limited to): Rendering engine reads the Web page and presents it to the user. The rendering engine reads, parses and represents HTML, XHTML, XML, images and other objects. Interpreter reads and processes programming languages such as Java and JavaScript. Most browsers have several interpreters installed by default. Sandbox a programming method wherein applications and processes are isolated from one another and from the local system. Sandboxing prevents a process running
Version 1.0
Lesson 7: Browsers
7-7
in a browser tab from reading or accessing information located in another tab or stored locally on the system. Thread an instruction from a running application that executes a particular task. Single-threaded browsers can lead to slow performance because the browser must wait for a given process to complete before beginning another one. Single-threaded browsers can also crash if an error occurs in a running process. Authentication information storage provides the ability for the browser to manage and store user names and passwords. Encryption engine includes applications and certificates that enable encryption in the browser. Most Web browsers support various versions of Secure Sockets Layer (SSL) and Transport Layer Security (TLS). These are required for conducting secure transactions. Download controls determine how the browser processes downloads (e.g., default locations, security settings, etc.).
As a Web site developer, you should be acquainted with how browsers implement these elements to ensure that your pages will function as expected in various browsers.
Major, Minor and Alternative Browsers

Although most Web users use one of the major Web browsers, more technical users have switched to newer browsers that may be faster or offer features that Firefox or Internet Explorer do not yet support. This section will explore the major browsers (Mozilla Firefox and Microsoft Internet Explorer), as well as some of the more popular minor and alternative browsers.
NOTE: Are you familiar with phishing scams, in which e-mail is sent to users requesting they correct or verify personal account or financial information? The email points users to sites that appear to belong to reputable businesses but are in fact imposter sites carefully designed to trick users into providing sensitive data.
Mozilla Firefox
In early 2009, Mozilla Firefox eclipsed Internet Explorer as the most widely used browser. Created by the Mozilla project (www.mozilla.org), Firefox is a free, highly customizable browser. The current version is 3.6. Firefox was an early favorite among technical users because of its emphasis on security and because it is open-source; therefore, an international community of thousands of experts has examined the code for weaknesses and contributed improvements. Its security features include protection against viruses, spyware and phishing scams. Firefox includes useful user-interface features such as tabbed browsing. Tabbed browsing allows you to open more than one Web site in a single window and toggle among sites, the way you can with the tabs in a Windows preference box. Figure 7-2 shows the Firefox 3.6 browser interface with several Web sites open in a tabbed window (the tabs appear in a row beneath the menu bar).
Version 1.0
7-8
Figure 7-2: Firefox 3.6 browser interface
Firefox includes support for many of the latest standards, as well as user-interface features such as pop-up blocking and automatic updates. Firefox is also easily customized through the use of add-ons. Add-ons are Firefox plugins; that is, they are small programs that extend the functionality of the browser. For example, you can install the NoScript add-on to prevent scripts from running unless you specifically allow them, or you can install the AdBlock add-on to block banner ads from displaying. Instead of installing add-ons from the operating system, you install them from Firefox itself. As a result, Firefox (and not the operating system) becomes the launch pad for the end user's experience. Firefox is available for various platforms, including Windows, Macintosh and Linux/UNIX.
Microsoft Internet Explorer

In the recent past, Internet Explorer was the winner of the so-called browser wars and was used by more than half of all Web users. By early 2009, however, Mozilla Firefox had surpassed Internet Explorer. The current version of Internet Explorer in wide use is version 8. Internet Explorer 8 is also the default browser for the Windows 7 and Windows Server 2008 R2 operating systems. Internet Explorer 8 has updated security features, including protection against viruses, spyware and phishing, and includes features such as tabbed browsing. Internet Explorer 8 includes the following new features: Web slices allow you to receive up-to-date information from frequently updated Web sites (such as eBay) in the Favorites bar. Microsoft has made it easy for developers to add a few lines of code to existing pages to make them Web slices. Tab groups color-codes and groups tabs that contain related pages so you can quickly see which tabs contain related content.
Version 1.0
Lesson 7: Browsers
7-9
Accelerators reduce the number of keystrokes and clicks required to perform certain tasks such as translating words or obtaining driving directions. For example, if you are viewing a restaurant's Web page, you can click an accelerator icon to display a map directly on the page without the need to copy and paste the address into separate, map-related Web page.
Figure 7-3 shows the Internet Explorer 8 browser interface with several Web sites open in a tabbed window.
Figure 7-3: Internet Explorer 8 browser interface
One of the reasons Internet Explorer is still so widely used is that it comes pre-installed with every PC. When Internet Explorer 6 was released, it featured good support for Web standards such as XML and CSS. Internet Explorer 6 also offered an e-mail client (Outlook Express), a news reader, image and media management tools, security features to manage cookies and help block objectionable content, and auto-complete functionality for Web forms. However, numerous bugs and security flaws appeared in Internet Explorer 6. Although Microsoft had been quick to release patches for security vulnerabilities, and the releases of Internet Explorer 7 and 8 have improved upon the performance of Internet Explorer 6, the effect of these security problems has been that many people have switched to alternative browsers.
Opera
Currently in version 10.51, Opera is a fast and highly standards-compliant browser with support for the same features as Firefox. Opera is also highly customizable and supports "skins," which are themes that can be applied to the browser interface to customize its appearance. The two skins installed with Opera are Opera Standard and Windows Native. Figure 7-4 shows the Opera 10.51 interface with the Opera Standard skin, and Figure 75 shows the Opera interface with the Windows Native skin. (The differences between the two skins are very subtle. Notice that the Windows Native skin includes a browser title, whereas the Opera Standard skin does not.)
Version 1.0
7-10
Figure 7-4: Opera 10.51 browser interface with Opera Standard skin
Figure 7-5: Opera interface with Windows Native skin to modify appearance
Opera's features include built-in fraud and phishing protection, a digital certificate provider, a Web feed aggregator, a built-in e-mail client and chat client, and a BitTorrent client for transferring large files. Opera has had limited success in the PC browser market, but has had more success on mobile phones, smartphones and personal digital assistants (PDAs). Experienced ecommerce developers take the time to test their sites with Opera quite often because
Version 1.0
Lesson 7: Browsers
7-11
people who have higher-end mobile phones often have additional disposable income that they can spend on your site.
Apple Safari
NOTE: You can experiment with using a new browser in Optional Lab 7-1: Exploring various browsers.
Safari is Apple Computer's Web browser. It was originally designed for Mac OS X systems, but in 2007 became available for Windows systems and can run on Windows XP, Vista and 7. The latest version of the browser, Safari 4.0.5, is shown in Figure 7-6.
Figure 7-6: Safari 4.0.5 browser interface
Because it is optimized for Mac OS X, Safari is faster on the Macintosh than other browsers are. Safari includes a built-in RSS and Atom reader, and also supports tabbed browsing, pop-up blocking and the latest Web standards. As of version 2, it has included a private browsing feature, the ability to search bookmarks, and the ability to archive and e-mail Web pages. Safari is among the fastest browsers to load Web pages from the Internet. Safari also has a very simple interface to allow maximum screen space in which the Web page itself can be viewed, which is becoming more important to users. When the development team at Google created the new Chrome browser (see next section), it adopted much of the look and feel from Safari. Safari is also the native browser for the iPhone OS.
Google Chrome
Google's Chrome browser provides a reliable and pleasant Web-browsing experience for users. The interface is intuitive, secure and uncluttered. Google wanted the browser to be as clean and transparent as possible, operating under the premise that the information inside the browser is more important than the browser itself.
greenfield A project that lacks any constraints imposed by prior development.
The project began with a fresh set of assumptions and no specific limitations thereby freeing developers of the constraints that come with revising an existing product. This approach to development is called the greenfield approach. This fresh approach allowed developers to choose only the most relevant browser features, and led to a clean interface.
Version 1.0
7-12
Google Chrome is open-source, and although at first it supported few add-ons and helper applications, many applications have been contributed by the open-source community. Chrome features include: Uncluttered interface The browser window is clean and uncluttered, including only one toolbar. You can type a URL or enter a search term in the address bar and Chrome will suggest popular sites, searches, and pages that you have already visited that contain your search terms. Multithreading The browser is able to create new processes and recover from problem threads, thereby avoiding crashes. Improved sandboxing Each of the processes running in Chrome are sandboxed, which means they are more fully separated from each other as they run in the computer's memory. Chrome also isolates plug-ins, such as Adobe Flash or Microsoft Silverlight. This feature enhances security. Isolated tabs As a result of multithreading and sandboxing, each tab is a separate instance of the browser. Therefore, the tabs that you open in Chrome are protected from each other, and you can set options in one tab (for example, browsing in privacy mode) without affecting the other tabs. Incognito mode This mode provides the ability to surf the Web privately, leaving no cached information on the local system. This is a controversial feature, but one that has since been imitated by many other browsers. Support for Web applications The Chrome browser is designed to deliver sophisticated Web applications, most notably Google Apps, which are part of Google's cloud computing strategy. (In cloud computing, document creation and conversion services, customer relationship management applications, and file storage and management services are hosted on Internet servers, and a user needs only a Web browser to access them.)
The free Google Chrome browser is shown in Figure 7-7. Notice that, unlike in other browsers, the tabs for open Web pages appear at the top. Each page contains its own address bar, toolbar and commands.
Version 1.0
Lesson 7: Browsers
7-13
Figure 7-7: Google Chrome browser interface
As a Web developer, you should keep Chrome's simplicity in mind as you create your pages. Because the clean interface allows users to focus less on the browser itself, and focus more on what is inside the browser window, your design becomes increasingly important as it is viewed in this browser. Chrome is also designed to blur the traditional distinction between the Web and the Desktop. A designer should take this into consideration when creating pages. Simplicity is key. In the following lab, you will install and use Google Chrome. Suppose you have been asked by your supervisor to evaluate Google Chrome for use in your office. You should investigate some of the features, evaluate the browser for "user-friendliness," and draw comparisons to other browsers currently in use in your office environment.
Lab 7-1: Investigating Google Chrome

In this lab, you will install Google Chrome and investigate some of its features. 1. Desktop: Open your browser, go to www.google.com/chrome, click the Download Google Chrome button and follow the instructions to download and install Chrome, accepting the default options. Once the installation has begun, you may need to close your browser in order to allow Chrome to import bookmarks and settings. Note: The ChromeSetup.exe binary file is located in the LabFiles\Lesson07\Lab_7-1 folder in the supplemental files. You can use this file to install Google Chrome if you wish.
Version 1.0
7-14
2.
Desktop: Launch Google Chrome. Notice that the Google home page appears by default. Click the plus sign (+) to the right of the Google tab to open a New Tab page, as shown in Figure 7-8. As you surf the Web, thumbnails of sites that you frequently visit will appear whenever you open a new tab.
Figure 7-8: Google Chrome New Tab page
3.
Browser: Position the cursor in the Address bar if necessary, then type travel agent. Notice that Chrome displays search terms as you type. Press ENTER to display the search results page. In Chrome, you can use the address bar to enter URLs or search terms. Browser: Click one of the links to visit another Web page. Notice that the tab for the page appears above the address bar and toolbar. Notice also that the domain name is highlighted in the address bar. Domain name highlighting helps you verify the actual domain of the Web page and helps you avoid phishing scams. Browser: Click the plus sign (+) to the right of the tab to open another New Tab page. Browser: Enter the URL of your favorite Web site in the address bar and press ENTER. Three tabs now display Web pages, and the plus sign (+) displays to the right of the existing tabs. Browser: The Customize And Control Google Chrome toolbar button appears to the right of the address bar. Click the button to display the menu shown in Figure 7-9.
4.
5. 6.
7.
Version 1.0
Lesson 7: Browsers
7-15
Figure 7-9: Customize And Control Google Chrome menu
8.
Customize And Control Google Chrome menu: Click History to open the browser history for today. Notice that you can click a link to delete the history for the day. As you use Chrome over time, each day's history displays in reverse chronological order. You have the option to delete the history for each day. Browser: Display the Customize And Control Google Chrome menu again and click Options to open the Google Chrome Options dialog box. If necessary, click the Basics tab. You use this tab to set startup options, specify a home page, specify a default search engine and specify whether to make Google Chrome the default browser.
9.
10. Google Chrome Options dialog box: Click the Personal Stuff tab. Notice that you can specify to synchronize your bookmarks, save your passwords, view any saved passwords, save text from forms to make them easier to fill out, import data from another browser, and apply themes to the Chrome interface. 11. Google Chrome Options dialog box: Click the Under The Hood tab. You use this tab to set privacy options, specify proxy settings, specify download locations, and handle Web content and security settings. 12. Google Chrome Options dialog box: In the Privacy section, click the Content Settings button to display the Cookies tab of the Content Settings dialog box. Click the Show Cookies And Other Site Data button to display the Cookies And Other Data dialog box, shown in Figure 7-10.
Version 1.0
7-16
Figure 7-10: Displaying cookies in Chrome
13. Cookies And Other Data dialog box: Click the Remove All button to delete all cookies, then close the open dialog boxes.
NOTE: Google proposes that incognito mode could be used to shop for a surprise gift online without leaving telltale clues. Can you identify potential problems that incognito mode might cause in a corporate office? How might incognito mode clash with a corporate security policy?
14. Browser: Display the Customize And Control Google Chrome menu, then click New Incognito Window to open a new tab in "incognito browsing mode." Web pages that you open in this tab and files that you download while working in this tab are not logged in your browsing and download histories. All new cookies from sites that you visit in this tab are deleted after you close the incognito tab. 15. Incognito tab: Visit www.expedia.com and shop for airline tickets to Edinburgh, Scotland (or some other city of your choice) for two adults. When you are finished, close the incognito tab. 16. Browser: Display your browser history. Notice that www.expedia.com does not appear in the history. View the cookies on your system. There are no cookies from expedia.com. 17. Browser: Close all open dialog boxes and close your browser. 18. Compare Google Chrome with other browsers you have used. What similarities do you find in regard to the interface? What do you like or dislike about the Chrome interface? What do you think are the advantages or limitations of Chrome? In this lab, you explored the interface and some of the default settings of Google Chrome.
Version 1.0
Lesson 7: Browsers
7-17
Testing your site on multiple browsers

OBJECTIVE 3.5.2: Site testing
As a Web developer, you must test the sites you create on multiple browsers and versions. Every browser functions somewhat differently, so a Web page that looks good in one browser might not work at all in another. Visit www.w3schools.com/browsers/browsers_stats.asp to see the different browsers in widespread use today. Check back often as Web trends change over time. Further, you must remember to consider your site's intended audience as you develop. Discuss with your customers any particular browser requirements they might have, and do your research to determine which browsers you can expect your audience to be using. You should also take operating systems into consideration. Although Windows users are the most predominant group, consider how your pages will render in a Macintosh or a UNIX or Linux system. Even if you know your audience will use the Windows operating system, consider how your pages will render in systems running XP, Vista or Windows 7. Also, consider how varying service pack levels may affect the way your pages render. Web development companies often have dedicated testing computers that can be used to browse Web sites using various operating systems, browsers and screen resolutions. However, most Web designers are not equipped to test their sites with every possible combination of browser, operating system and screen resolution. In the following lab, you will use a service that allows you to see how your site looks on various browsers. Suppose you are developing a Web site for a customer who expects a wide audience that will include users of various ages, skill levels and equipment. Although you may be limited in the hardware tools you can use for site testing, you always make sure to test your sites on as many browser types and versions as possible because you know your page designs can render differently in different browsers. You have a variety of browsers installed on your computer for testing; however, it can be timeconsuming to open each page of your site in multiple browsers and compare them. To make your testing process quicker and more thorough, you could use an online browsertesting service to test your pages in multiple browsers simultaneously.
Lab 7-2: Testing a site in multiple browsers

NOTE: This lab requires you to have access to an e-mail account you can use to receive the free trial. The free trial is available for 24 hours once activated.
In this lab, you will sign up for a free trial of the BrowserCam service and use it to test Web sites in multiple browsers. 1. 2. Browser: Open www.browsercam.com. BrowserCam.com: Click the Free Trial tab. Complete and submit the registration form to request a free trial of the BrowserCam service. The free trial activation will be sent to you via e-mail. Open your e-mail client and activate your free trial. Once your account is activated, close all browser windows, then relaunch your browser and open www.browsercam.com again. Enter your user name and password in the Member Login area, then click the Sign In button to log on to the BrowserCam site. Click the Website Capture link on the left. The Website Capture tab opens and the first page of the Perform Captures service appears. This service provides screen captures of the Web pages you specify as they render in the browsers you specify.
3.
4.
Version 1.0
7-18
5.
Select the Create A New Project radio button if necessary, and enter a project name, such as Site Testing. Select the Enter URL(s) Manually radio button if necessary. Enter the following URLs in the fields provided (one URL per field): www.habitat.org www.CIWcertified.com www.yahoo.com
6.
Scroll down and click the Continue button. You should see a page that allows you to select options and select browsers. Scroll down and click a version release number to select different releases of various browsers running on different platforms. A selected version release will display with a blue background, as shown in Figure 7-11.
Figure 7-11: Selecting browsers for testing
7. 8.
Leave the other settings on this page set to the defaults, then click the Continue button. The Screen Capture Order Summary page will appear. Click the View Projects link to see a complete list of the site and browser test combinations you ordered, as shown in Figure 7-12. Note that some screenshots may be labeled "Queued," "Capturing" or "Not Started." Refresh your browser window after a minute or two to see the latest status of the images.
Version 1.0
Lesson 7: Browsers
7-19
Figure 7-12: BrowserCam site and browser testing results
9.
Look through the screenshots. Do any of the sites not display correctly in any of the browsers? Which ones? Do you see any patterns in which certain browsers display sites incorrectly or in which certain sites frequently display incorrectly?
Because many site designers do not have the resources to test their sites in every possible browser, operating system and screen resolution, testing services such as BrowserCam can be extremely helpful for ensuring that your site will appear correctly for the widest possible range of users.
Specialized browsers and accessibility

OBJECTIVE 4.1.2: Accessibility issues with images and animation
In addition to the variety of browsers just discussed, several Web browsers are available for specialized purposes. Some offer text-reader capability or captioning to provide Web accessibility for users with disabilities. Others make the Web accessible in a limited capacity to users on the go. Examples include the following: Mobile device browsers The earliest Web browsers designed for mobile devices (such as mobile phones and PDAs) required that Web designers create special versions of their sites. Later releases were simplified versions of Web browsers optimized for small screens and low processing power. These typically were not full-featured, and some did not display images or multimedia. Today, however, many modern mobile browsers such as Opera Mini and Apple Safari offer desktop-class Web browsing (rich content, CSS 2.1, Ajax, etc.) on the touch screen of a handheld device. Adaptive browsers/voice browsers Web browsers that enable users with disabilities to use the Web are referred to as adaptive browsers. They typically feature screen magnification; the ability to use text readers, captioning and speech synthesis to convey Web page content; and voice recognition functionality to receive commands from users. They may also feature the ability to translate Web pages to Braille.
OBJECTIVE 1.2.9: Designing for PDA-based vs. traditional browsers
NOTE: You can review the browser-related terms from this lesson in Activity 7-1: Reviewing browser terminology.
Version 1.0
7-20
Remember that it is important to design your Web sites so that they can be used by people with disabilities. Designing for accessibility includes using the alt attribute with all images (especially navigation elements) so that they can be read by voice browsers and text readers.
OBJECTIVE 4.2.14: TinyURL TinyURL A free Web service that generates short aliases for long URLs.
Creating Aliases with TinyURL

TinyURL is a free Web service that provides aliases for long URLs. The aliases are short, will not break in e-mail postings, and never expire. The TinyURL home page (http://tinyurl.com/) includes a form in which you can enter a long URL for shortening. You can either have TinyURL create a randomly generated alias for you, or you can create a custom alias that is more meaningful. When users click the short URL alias, they will automatically be redirected to the long URL. TinyURL offers a plug-in for your browser's toolbar that allows you to generate a short URL at the click of a button. By clicking the toolbar button, you can create a TinyURL for the current Web page.
Advantages and disadvantages of using TinyURL

Short URL aliases are useful because they are easier to remember and type. They are also easier to use than long URLs in situations in which space may be limited, such as in e-mail signature lines and microblogs, and with e-mail clients that create line breaks after a certain number of characters are entered. A potential disadvantage to using TinyURLs is that they are subject to linkrot. If the URL of the original Web page changes, all URLs related to the short URL alias will become invalid. In the following lab, you will use TinyURL to create a short alias for redirection to a long URL. Suppose you want to send members of your project team links to several Web pages containing information that will be useful for the application you are developing. However, you want to replace the excessively long links with text that is more meaningful and succinct.
Lab 7-3: Creating an alias with TinyURL

In this lab, you will use TinyURL to create a short URL alias to provide redirection to a long URL. 1. 2. 3. 4. 5. Browser: Open your browser and go to www.CIWcertified.com to display the CIW Certified home page. Browser: Click several links of your choice to penetrate deep into the Web site. Notice that the deeper you go, the longer the URL for the current page tends to be. Browser: When a long URL appears in the Location Bar, select it and copy it to your Clipboard by pressing CTRL+C. Browser: Go to http://tinyurl.com/ to display the TinyURL home page. Browser: Paste the long URL you copied in Step 3 into the Enter A Long URL To Make Tiny text box. Click the Make TinyURL button to create a short URL alias for the long URL. Your screen should resemble Figure 7-13. In the example in the figure,
Version 1.0
Lesson 7: Browsers
7-21
notice that TinyURL replaced a URL that has a length of 55 characters with a TinyURL that has a length of 26 characters.
Figure 7-13: Short URL alias in TinyURL
6. 7.
Browser: Click the Open In New Window link that appears immediately below the TinyURL. Notice that you are now redirected to the page specified by the long URL. Browser: Close your browser.
In this lab, you used TinyURL to create a short URL alias to provide redirection to a long URL.
OBJECTIVE 4.2.13: CAPTCHA
Utilizing CAPTCHA
A CAPTCHA is a method that attempts to ensure that a user is a real person and not a spam bot or crawler. The term CAPTCHA is an acronym for Completely Automated Public Turing Test to Tell Computers and Humans Apart. A CAPTCHA is an automatically generated graphic presented to a user who has just submitted information or otherwise made a request of a Web server. The user must correctly enter the text shown in the graphic. Once the user provides the correct response to a CAPTCHA, the user's input is accepted for processing.
Version 1.0
7-22
A CAPTCHA image is generally distorted, but should be legible enough to read. For example, the distorted text shown in Figure 7-14 should be legible to a human, but a computer program cannot read it.
Figure 7-14: Example CAPTCHA text
A typical use of a CAPTCHA is during registration with a Web site. For example, sites such as Yahoo! Or Google that offer Web-based e-mail accounts must guard against automated scripts that can apply for thousands of e-mail accounts. Use of CAPTCHA in blog sites can ensure that only humans can enter comments on a blog. You can use a CAPTCHA to protect your Web site from spam or other abuse. When implementing a CAPTCHA, it is recommended that you ensure that the CAPTCHA is accessible to all users. For example, if the CAPTCHA relies only on reading text, then you may make your site inaccessible to people who are visually impaired. In the following lab, you will add a free CAPTCHA implementation from www.snaphost.com to a Web page. Suppose your supervisor instructs you to add a newsletter sign-up page to your company's Web site so that visitors can add themselves to your company's mailing list. You can add a CAPTCHA to the sign-up page to ensure that only humans and not bots are able to create an account.
Lab 7-4: Adding a CAPTCHA to a Web page

In this lab, you will you insert a free form-to-e-mail CAPTCHA from www.snaphost.com to prevent automated form completion and spam.
NOTE: You may want to view the form first in a browser before editing the code.
1. 2.
Use a text editor to open the Lab_7-4.xhtml file from the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson07\Lab_7-4 folder. Editor: Add the text shown in bold to the code, and delete the line shown in strikethrough. The additional code specifies to validate the CAPTCHA through the SnapHost service and to forward the output to an e-mail address and results page. Be sure to substitute your e-mail address for e-mail@address.com where the code reads: value="e-mail@address.com".
<!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> <meta content="CIW, Web Design Specialist, CAPTCHA, Example" name="Keywords" /> <meta content="For the CIW Web Design Specialist Course" name="Description" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  <title>Basic Form using CAPTCHA</title> </head> <body> <h1>Basic Information Form</h1> <form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">
Version 1.0
Lesson 7: Browsers
7-23
<form id="myform" method="post" action="http://www.SnapHost.com/captcha/send.aspx"> <input value="e-mail@address.com" name="skip_WhereToSend" id="skip_WhereToSend" type="hidden" /> <input value="Testing CAPTCHA Script" name="skip_Subject" id="skip_Subject" type="hidden" /> <input value="http://ss1.ciwcertified.com/formreply.html" name="skip_WhereToReturn" id="skip_WhereToReturn" type="hidden" /> <input value="6RFR4MQ7JA6A" name="skip_SnapHostID" id="skip_SnapHostID" type="hidden" /> Enter Your Name: <input size="40" name="Name" type="text" /> <br /> <br /> ...
3.
Editor: Scroll down in the file and add the text shown in bold to the code to insert the CAPTCHA image and response input field:
... What aspect of Web design do you prefer to work with? (check all that apply):<br /> <input name="Coding" type="checkbox" /> Coding<br /> <input name="Graphics" type="checkbox" /> Graphics<br /> <input name="Animation" type="checkbox" /> Animation<br /> <br />
<table bgcolor="#FFCC66" border="0" cellpadding="8" cellspacing="0"> <tbody> <tr> <td><input maxlength="6" style="width: 130px; height: 48px; font-size: 38px;" name="skip_CaptchaCode" id="skip_CaptchaCode" type="text" /><br /> <i>Enter web form code</i></td> <td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=6RFR4MQ7JA6A" alt="Web Form Code" border="0" /></a> </td> </tr> </tbody> </table> <br /> <br /> <input type="submit" /> <input type="reset" /> </form> </body> </html>
4. 5.
Editor: Save the modified code as MyCaptcha.xhtml. Browser: Load your file. The form should appear as shown in Figure 7-15.
Version 1.0
7-24
Figure 7-15: Form page with CAPTCHA
6. 7.
Browser: Complete the form and enter the CAPTCHA text, then click Submit Query and view the results page. Close your browser. If time permits: Complete the information in the form but enter the CAPTCHA text incorrectly, then view the results.
In this lab, you inserted a CAPTCHA image into a Web form to ensure that a person (and not an automated program) completes the form. Adding CAPTCHAs to your Web forms assists in reducing the number of spam responses.
Version 1.0
Lesson 7: Browsers
7-25
Case Study
Depends on your Point-of-Viewing

While redesigning a Web site for a customer, Lucy purchased a new tool for creating a cool multimedia navigation bar that she wanted to include in the site. The problem was that the navigation bar was guaranteed to work as expected only in Internet Explorer 7 (or newer) browsers. After a quick check of the server log files determined that 95 percent of the site's users were using Internet Explorer 7 or newer, Lucy felt sure that it would be OK to use this new component. However, to be safe, she added a note on the home page that read, "This site works best with Internet Explorer version 7 or newer." When the first draft of the redesigned site was ready, Lucy sent the customer a link to the test site. The customer wrote back that he could not figure out how to use the site at all. After some research, Lucy discovered that the customer's IT department had standardized all of its company's computers on Opera browsers, which made her cool multimedia navigation effect completely unusable by anyone at the customer's company. * * *
Consider this scenario and answer the following questions: What important step of site testing did Lucy skip? How important is it for the minority 5 percent of site users in this scenario to be able to use the feature that does not work in some browsers? Would Lucy's navigation effect feature be acceptable if the minority users could still navigate using other site or browser elements? Would it be acceptable if this effect feature were used for something other than navigation? If so, what might be some acceptable alternatives? What does this scenario demonstrate about a Web designer's need to be familiar with the various browsers used on the Web?
Version 1.0
7-26
Lesson Summary
Application project
This lesson discussed several design practices that you should avoid, including browserspecific functionality and pop-up windows. Of course, there are exceptions to every rule. Browser-specific elements, such as ActiveX components, can be very useful in environments where you know all users will be able to support them, such as an intranet site. Pop-up windows are useful at times when the user wants to view an additional element of the current page without leaving the page, such as an enlarged product photo or a term definition. However, you are generally advised to avoid both technologies in your site designs. Why? Browse the Web for examples of sites using features or techniques that might not always be considered good Web practices. Some examples might include pop-up windows, large file downloads, multimedia or browser-specific functionality. Are these elements used in a way that makes the sites more usable or less usable?
Skills review
In this lesson, you learned about browser functionality. You learned about some technologies and techniques to avoid when designing your Web pages. You also learned about a variety of available Web browsers. Now that you have completed this lesson, you should be able to: 1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers. 1.3.3: Identify site strategies and technologies to avoid, including pop-up windows, single-browser sites, spam. 3.5.2: Perform site testing (functionality, usability, browser compatibility) 4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning). 4.2.12: Identify the functionality of pop-up/pop-under windows (e.g., creation, benefits, disadvantages, reasons to omit from your site). 4.2.13: Define CAPTCHA and create a CAPTCHA for a Web site. 4.2.14: Explain how the TinyURL service works.
Version 1.0
Lesson 7: Browsers
7-27
Lesson 7 Review
1. Studies show that users are taking longer to upgrade their browsers as more users come online. What are two factors involved in the decreasing rate of browser migration?
2.
What are some of the reasons that people switch to an alternative browser?
3.
What are ActiveX controls?
4.
What type of pop-up windows should you avoid using?
5.
Why are pop-up windows less effective for advertising today?
Version 1.0
7-28

Version 1.0
Lesson 7: Browsers
7-29
Activity 7-1: Reviewing browser terminology

In this activity, you will review some of the browser terminology you learned in this lesson by matching each browser-related term in the left column with the appropriate description in the right column. 1. Internet access layer A. An alternative browser available free with advertisements or for a fee without ads.
2.
Navigation layer
B. Additional browser window that can be launched automatically and often contains unsolicited content. C. Browser functionality that allows you to open more than one Web site in a single window and toggle among them. D. An Apple Computer browser originally designed for use on Mac OS X systems. E. A published record of IP addresses known to be sources of spam. F. A browser that offers an intuitive, uncluttered interface, improved sandboxing and isolated tabs and processes.
3.
Presentation layer
4.
Tabbed browsing
5.
ActiveX control
6.
Pop-up
7.
Blacklist
G. Browser functionality that includes communication protocols such as HTTP and SSL. H. An open-source organization that created the Firefox browser and standards-compliant browser development tools. I. Browser functionality that tracks locations the user has visited on the Web, and helps the user go where he or she wants to go. A specialized browser that enables users with disabilities to access the Web.
8.
Adaptive browser
9.
Chrome
10. Mozilla
J.
11. Opera
K. Technology owned by Microsoft and supported by the Internet Explorer browser that can be used to enable interactive content on the Web. L. The browser window, which displays the page that the user requested.
12. Safari
Version 1.0
7-30
Optional Lab 7-1: Exploring various browsers

In this optional lab, you will try using a browser you have not used before. Answer questions about the browser in the spaces provided. 1. Browser: Using your current Web browser, locate the download page for a Web browser you have not used before, such as Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Opera or Lynx. If you like, you can visit the Yahoo! Directory's list of browser sites for ideas and locations: http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_ Web/Browsers/ Browser: Follow the instructions on the browser's site to download and install the new browser. Browser: Launch your new Web browser, and use it to browse some of your favorite Web sites. Try some of the browser features that your current browser does not have. What features does the browser you just sampled offer that the browser you normally use does not?
2. 3. 4.
5.
What features were the same as the features in other browsers you have used?
6.
Did the browser you just sampled seem faster or slower than other browsers you have used, or was there no difference?
7.
Do you prefer the browser you just sampled to other browsers you have used? Will you use this browser in the future? Why or why not?
Version 1.0
Lesson 7: Browsers
7-31
8.
If time permits: Repeat these steps with other browsers you have not used before, and answer the same questions.
As a Web designer, it is important that you get as much experience as possible with as many Web sites as possible and also with as many Web browsers as possible. Not only should you install and try other browsers, you should also test the Web sites you design on a wide variety of browsers to make sure that your sites are usable by the greatest possible number of users.
Lesson 7 Quiz
1. Which of the following is a reason that most users are slow to adopt new browsers? a. b. c. d. 2. New browsers do not offer any new features. Users may not know how to upgrade their browsers. Users may not consider browsers important to Web use. Only one browser can be used on Windows systems, and it comes pre-installed.
Which browser was created by the Mozilla project? a. b. c. d. Opera Safari Firefox Internet Explorer
3.
Which of the following is a reason to avoid using pop-up windows on your Web sites? a. b. c. d. Users with disabilities may not be able to access the pop-up content. Users may have blocked pop-ups because pop-ups tend to be annoying. Users would be forced to use the browser Back button to navigate your site. Users with browsers other than Internet Explorer may not be able to see the pop-up content.
4.
In which layer of Web browser functionality do communication protocols such as HTTP and SSL operate? a. b. c. d. Navigation Presentation Internet access Browser window
5.
What is the purpose of adaptive browsers? a. b. c. d. To To To To block pop-ups allow users with disabilities to use the Web enable Web access on handheld and wireless devices allow users to apply skins that customize interface appearance
Version 1.0
7-32
Version 1.0
8Lesson 8: Navigation Concepts

Objectives
By the end of this lesson, you will be able to: 2.2.2: Identify Web site hierarchy/architecture concepts, including appropriate page depth for content. 2.2.3: Identify common navigation conventions. 2.2.4: Develop and apply a navigation action plan.
8-2
1. What is navigation in relation to a Web site, and how is it different from aimless browsing?
2.
What is the "three-click rule"?
3.
How does primary navigation differ from secondary navigation? a. b. c. d. Primary navigation uses browser buttons, whereas secondary navigation uses elements of the Web site. Primary navigation is relevant to the entire site, whereas secondary navigation is relevant only to a specific part of the site. Primary navigation is directed by the Web site, whereas secondary navigation refers to decisions made by the user. Primary navigation refers to clickable elements on a Web page, whereas secondary navigation refers to visual cues that are not active.
Version 1.0
Lesson 8: Navigation Concepts
8-3
Why Is Navigation Critical?

The navigation process of a Web site is often left to chance during design. When creating a Web site, you generally start with one page, then you create links as you add other pages. However, if you do not give some forethought to how users will navigate these pages, confusion and frustration will result.
NOTE: This paragraph contrasts two definitions of navigation. Exactly how do you think these definitions differ?
Navigation does not simply mean moving from one location to another. Navigation is moving from one point to another in an understood and controlled manner with purpose. Without planning, you will not achieve true site navigation, but rather aimless browsing. When you drive your car, you might navigate to the store or to work. The first time you made the journey, you were uncertain how to get to your destination. The second time, it was much easier because you were familiar with the roads and signs along the way. Now you probably make the trip without even thinking about where to turn or which freeway to use. You are comfortable; you do not feel confused, and you know where you are at all times. Now, think about traveling in a new city. How do you feel? That uncertainty of where you are and how you will navigate to your destination resurfaces. Contributing to the confusion are different types of road signs, street lights and freeway structures. You feel out of your element because what you see is new. New users have this same feeling when visiting your Web site. They are "tourists" and do not know where to go when they arrive at the home page.
NOTE: A well-designed site requires only a few clicks for navigation to be understood. Do you think this goal is realistic, based on your browsing experiences?
As a Web designer, you are responsible for providing the navigation so users can simply enjoy the ride. After they become familiar with the site, users will recognize where they are going and how to get there. This learning curve need not take days, weeks or hundreds of visits; a well-designed site requires only a few clicks for navigation to be understood.
Primary and Secondary Navigation

Navigation is commonly classified as either primary or secondary in nature. Primary navigation consists of the navigation elements that are accessible from most locations within the site. Secondary navigation elements allow the user to navigate within a specific location. For example, many sites have a page that offers information about the company. The primary navigation element may be an About Us link. After the user arrives on the About Us section of pages, there will be other links (secondary links) that navigate within the About Us section. For example, there may be links to Investor Information, Corporate Locations, Press Releases, and so forth. These links are secondary navigation elements because they are relevant to the About Us section but not to other pages of the site, and therefore these links will not be found in other areas of the site.
NOTE: Be sure you understand that primary navigation does not refer to browser buttons but to features of the Web pages themselves.
Navigation Hierarchy
OBJECTIVE 2.2.2: Site hierarchy/ architecture concepts
The most dynamic aspect of the Web is that any page on any site is only one click away. This feature removes the limitations you must follow in a linear world. Most activities you normally perform reading, working, driving follow a linear model. You start at the beginning, move through the task, and reach the end. This mindset contributes to many Web-design practices that limit the Web's usefulness.
Version 1.0
8-4
NOTE: You may find it difficult to conceptualize your Web activity without following a beginning-middleend process. Consider the idea of non-linear structure as it applies to the site itself and to the wide variety of options a user has at every step of Web browsing or transactions.
Your place of work uses a hierarchy or organizational chart to visually define the dynamics of the organization. Your home may have an organizational structure as well: The parents are at the top, and the children are layered below. This concept clearly describes how a family or business operates. A Web site is no different. At the top is the home page or site entrance; below are the other pages, which are referred to as child pages. These pages do not follow a linear model; they branch out and grow to various depths, depending on how much content supports each branch. This structure is known as the information architecture of the site.
Positional awareness
For users to understand your site, they need to understand its organizational chart or architecture. Users should never wonder where they are within the site. At all times, there should be indicators that users can reference for positional awareness. Positional awareness includes understanding any parent, peer or child pages relative to the current location. Many techniques can be used to provide the user with this important information, including the following. Headings Current page headings provide an effective means for users to determine where they are within the site. A limitation of using only headings for positional awareness is that they provide only the current location, not the relative location of parent, peer or child pages. Colors Some sites use colors to indicate position by applying different color values to different content. One limitation of using colors is that the user must first understand the color scheme and then associate it as he or she moves through the site. Another drawback is the ineffectiveness of this strategy for visually impaired or colorblind users. Images Images provide useful indicators of positional awareness. For example, consider the tabs in a day-planner. All or most of the tabs are always visible, each tab has a name, and the tabs change appearance at each location. This scheme provides better positional awareness because many peer and parent pages are visible from any given location. Path markers Symbols such as arrows or lines indicate the navigational path that the user took to arrive at the current location. These are helpful as the user moves through multiple pages on many levels of the site. Path markers are also called "breadcrumbs." Site map The site map exists in a separate HTML document, and each page of your site can be represented by a simple text or graphical description. Users can then follow links from the site map to the desired page. The disadvantage is that the user must leave his or her current location to visit the site map.
NOTE: Positional awareness is particularly important for e-commerce sites. If users become lost while they are shopping, they are likely to abandon their purchases and visit competitors.
site map A graphical representation of a Web site's hierarchy.
Navigation depth, icons and controls

NOTE: Remember the "three-click rule" of site navigation. This guideline is very useful when you are developing your own Web sites.
Depending on your Web site's purpose, remember the "three-click rule" for managing user access to linked files: Users should not need to click more than three times during their navigation of a site to find the information they seek. This guideline is especially important for informational or research-oriented Web sites. Unclear navigational paths will confuse users and discourage them from returning to the site. Also consider whether any multimedia will provide the navigational framework for the site or merely supplement it. For example, using an Adobe Flash navigation bar on your site will present navigational problems for users who cannot support Flash. A clear sense of direction is very important to the user.
Version 1.0
8-5
Navigation toolbars should be simple, easily understood and intuitive. Figure 8-1 shows one example.
Figure 8-1: Navigation toolbar

NOTE: Consider the labeled icons in Figure 8-2. If these icons were not labeled, could any of them be mistaken for some other function?
Icons are very popular and most people are familiar with them. Icons include two types: labeled and unlabeled. If users must guess where the icon link will take them, the icon should be labeled. Figure 8-2 shows examples of labeled icons.
Figure 8-2: Labeled icons
Other common navigation elements include (but are not limited to): Buttons. Image maps and hotspots. Rollover mouse events. Arrows. Navigation bars and menus. Drop-down select menus.
Beyond the browser

Browsers provide limited navigational support. Therefore, you should design your Web site with extensive navigation to help users overcome the limitations of their software. Site identifiers Include a site identifier on every page to let users know where they are. A corporate logo is often placed in the upper-left corner of each page for this purpose (upper-right corner for sites in languages that read right to left). Landmark page access Make it easy to get to landmark pages. Every page should be linked to the home page (typically by hyperlinking the logo) and the search page, for example. Browser history Do not use <meta> tags or scripts to prevent access to the browser history. Some sites use the <meta> tag to automatically refresh pages in an effort to prevent users from going back to previously visited pages. This strategy is considered poor design. Information architecture Emphasize the structure of your information architecture. Make every page show structural elements, and include links to the overview page or main pages at least one level up in the structure. Such links should not have generic names such as "Go Up One Level" but should be specific and name the level to which they point. Link colors Do not change the default link colors if possible. Links to unvisited pages should be some shade of blue; links to previously visited pages should be some shade of magenta. Using the default colors helps users know which pages they have already seen. Users can form a mental picture of the site when they can relate its structure to their personal navigation history.
Version 1.0
8-6
Site map Include a site map that shows the most important levels of your information structure and how different parts of the site relate.
Site Structure, URLs and File Names

Uniform Resource Locator (URL) A text string that supplies an Internet or intranet address, and the protocol by which that site can be accessed. NOTE: Uniform Resource Locator, not Universal Resource Locator. Either is correct but the first is preferred usage. NOTE: Note that the divisions between subdirectories in a computer file path are generally indicated with backslashes ( \ ), whereas in a Web address these divisions are indicated with forward slashes ( / ). NOTE: This organizational process of appropriately naming files and directories begins as soon as the developer creates his or her first page.
Web sites are structured in a hierarchical format. This format provides the information that a browser needs to find a given Web page using a Uniform Resource Locator (URL). File names play an important part in Web page addressing. Together, file names and URLs help give Web users a better understanding of a Web site's structure.
Site structure
Site structure describes how a Web site is stored on the Web server. You can think of files residing on the server just as they do on your PC. The primary drive is C:\ followed by subdirectories, such as Program Files, Windows, My Documents and so forth. Each directory is further subdivided into more directories. This arrangement creates a file hierarchy that helps you manage your system. When a user enters a URL such as http://www.company.com in the browser Address field, he or she accesses the Web Root directory. This path can be compared to the root of your C:\ drive. Beyond that, the structure is determined by how the files were named and uploaded to the server. The Web server also stores files and images in directories that you designate. Structuring files on the server into directories and subdirectories is recommended to maintain order and manageability. Imagine all the files on your PC residing in one directory; this structure would be very difficult to manage. Figure 8-3 shows a sample site directory structure.
Figure 8-3: Sample company Web site directory structure
When expanded, the directory structure might resemble Figure 8-4.
Figure 8-4: Expanded directory structure
Version 1.0
8-7
NOTE: Remember: A site organization method must be just as meaningful and simple to others as it is to the developer.
Notice that each folder resides under the root, and each has a subdirectory into which to place images. It is good practice to keep files of similar types in their own directories for better organization. This structure could be further expanded. For example, subdirectories of Marketing might include New Products, Sale Products or Discontinued Products. The point is that however you choose to organize your site architecture, use a method that is meaningful and easily understandable by others.
URLs
NOTE: You can practice reading URLs to identify site structure in Activity 8-1: Identifying Web site structure.
URLs can be used to determine location and depth. For example, a user who is unsure where he or she is in the site hierarchy could look at the URL in the browser window to help visualize his or her location. Consider how the following URL can indicate a user's current location: http://www.companyname.com/marketing/newproducts/pricing This technique only works if the directories were given meaningful names. Again, it is important to name files on the Web server descriptively to aid in navigation and organization.
File names
File names can be as helpful as directory names. If the name of the HTML file confirms to the user which page he or she is viewing, it helps in the process of navigation and awareness. For example, the following file name tells the user exactly which page is being viewed: http://www.companyname.com/financials/Quarter2.htm As with directories, give your HTML files meaningful names.
Familiar Navigation Conventions

OBJECTIVE 2.2.3: Common navigation conventions
The type of site navigation you choose need not be unique to your site. In fact, it is advantageous for it to be similar to other sites. Many common elements used throughout the World Wide Web have become familiar to users and therefore have predefined meanings. Some of these elements can be referred to as labels. For example, when users see a button or link labeled "Home Page," they know exactly where that link will take them. Do not attempt a clever label such as "Entry Point" for a link to the home page. Remember that visitors are tourists and you should try to make them feel as if they are still in their own neighborhood. In addition, any corporate logo or branding image should be linked to the home page. Users have come to expect this link. Other common labels include Search or Find, which links users to a page at which they can conduct a site search. FAQ or Frequently Asked Questions, Downloads, News, Site Map, About Us, Contact Us and Help are all common labels as well. Do not try to be unique; it is wise to use recognized labels because users expect them.
NOTE: Name as many familiar Web navigation conventions as you can think of.
Version 1.0
8-8
Guided Navigation
Another popular technique for helping users through a convoluted process is to guide them. Provide a link to the next step, and continue the process by establishing links that keep users on track. These links should supply the necessary information, as well as an alternate course clearly marked to allow the user to exit. For example, an online purchase should lead the user through shipping information, then on to payment information, then to receipt information. If you use a graphic interface, it must be intuitive. The audience must be able to navigate easily through the site and recognize which elements are clickable. The FedEx site (www.fedex.com) offers a good example of user-friendly navigation and technological adeptness. It is well organized, functional and attractive, as shown in Figure 8-5.
Figure 8-5: Well-designed site navigation example
Navigation Action Plan

OBJECTIVE 2.2.4: Navigation action plan
Navigation is difficult partly because it is subjective. Every designer has different opinions about which strategies work best. This observation is extremely important from a usability perspective. If the site's navigation does not function as it should, the site may risk losing customers. When navigation works well, users flow smoothly from action to action, from page to page. Navigation must be tested; this process takes careful planning. When designing your Web sites, remember the following practices: Determine users' goals and needs. Learn from navigation that works.
NOTE: You should recall the importance of well-designed navigation features from an earlier lesson, in which you explored the elements of audience usability.
Version 1.0
8-9
NOTE: You can often learn from your own Web experiences as well. Consider what you want when you visit a Web site. Remember to always take a user's perspective when developing for the Web.
Go deeper than the home page. Provide quick links. Design for various user preferences.
Determine users' goals and needs

Navigation design is about predicting your site users' actions and building a site to support them. To do this, you must understand your audience's goals and needs. Determining your users' goals and needs may require you to interview the people who will use the site. In the case of an intranet, spend time talking with employees about their daily activities. For a commercial site, talk to potential customers and discuss their preferences. Try to learn the goals behind their comments. Real solutions must be uncovered, not constructed; talking to your audience is the fastest way to accomplish this goal.
Learn from navigation that works

NOTE: You can study and evaluate the navigation plan of a public Web site in Optional Lab 8-1: Identifying navigation elements.
Much can be learned from studying sites that are easy to navigate. Consider the elements common to successful navigation, regardless of the approaches used. Those sites that share certain qualities display good navigation planning. Generally, good navigation includes several characteristics: Offers easy-to-learn elements Remains consistent Provides feedback Appears in context Offers alternatives Provides clear visual messages Offers clear and understandable labels Remains appropriate to the site's purpose Supports user goals and behaviors
NOTE: Feedback is key to any process in which one is expected to make progress.
All these qualities are important, but the concept of providing feedback probably has the biggest impact on users. Navigation should tell people where they are and, if possible, where they have been. Users should also be able to easily determine linked or clickable material. They need to know whether they successfully made a purchase, conducted a search or completed some other task. You can meet these fundamental navigation needs by providing feedback.
Go deeper than the home page

Even on sites with truly poor navigational design, it is usually possible to move from the home page to an interior page without incident. However, planning your home page is only a small fraction of your job as a navigation designer. The deeper you can plan your site's structure and navigation, the more successful your site's navigation will be. The more detailed you are in the early planning phases, the fewer unpleasant surprises your users will encounter.
Version 1.0
8-10
NOTE: It is important to include as many lower-level pages as possible in usability testing tasks.
Most navigation problems have nothing to do with moving from the home page to another page. Problems tend to involve being stranded inside a site. Typically, this happens because great attention has been paid to navigation design, but only in one direction or on the top level. In navigational design, the details count. Plan out as far as you can, down to the deepest level you can predict. The worst problems usually do not occur on a site's top level.
Provide quick links

After you consider the structure of the site as a whole, spend some time thinking about shortcuts through this structure. Shortcuts provide quick links and easy access to small pieces of content. Some common shortcuts include search features, site maps and tables of contents. The goal of shortcuts is to help users find information easily and rapidly. Design your shortcuts with this goal in mind. Many examples of search screens are unusable because they offer a confusing array of options, site maps that take many minutes to load, or tables of contents that require endless scrolling. Shortcuts should by nature be streamlined, brief, fast and clear. They should also be convenient and close at hand.
Design for various user preferences

NOTE: For more tips on navigation and design, visit Alertbox at www.useit.com /alertbox/.
An example of how users' personal preferences affect your approach to navigation can be found in searching and browsing behaviors. Some people like to search for the exact information they need, and they refuse to browse unless forced. Others prefer to browse through information to find what they need. For example, children generally respond better to browsing than searching when they are looking for information. Researchers generally prefer a direct route to information to save time and retain focus. Shoppers may prefer either method, depending on whether they know exactly what they want to buy. By providing multiple ways to find information on your site, you can accommodate different styles of browsing. Navigation design is complex, but it is key to helping your users accomplish their goals. Remember that a navigation system that supports users is vital to the success of your Web site.
Version 1.0
8-11
Case Study
Pure and Simple Navigation

Mary Jane was developing the site for 100% Pure, a new company that sells all-natural and organic products. Her customers provided the images and content for the site, and left the rest of the site's design and structure up to Mary Jane. Their only request was that they wanted the site to have a "simple" look and feel, to reflect the values of their business and the nature of their products. Mary Jane developed the site with an appealing but simple greenery theme. She structured the site carefully, organizing it well with clearly labeled topics, subtopics and pages. Even with the company's extensive catalog of products for purchase, Mary Jane was able to develop very clear and easy-to-use navigation for the site. Each page that a user might visit provided positional awareness relative to the rest of the site. A multitude of well-organized and clear links ensured that visitors could find anything on the site with just three clicks. The site had no dead ends, and it even provided users with feedback elements to guide them easily through any visit or transaction. Throughout the testing process, the site revealed no questions or problems regarding navigation. When Mary Jane presented the site to her customers at 100% Pure, however, they did not seem pleased. They liked the greenery theme, but they felt that the site had too many links and labels crowding the margins. They thought that the "breadcrumb" indicators added too many extra words to pages. They felt that all the extra information provided by the navigational features made the site pages look busy and complex, instead of simple and clean as they wanted. They asked Mary Jane: Is all this really necessary? * * *
Consider this scenario and answer the following questions. Answer the customers' question for Mary Jane: Is all this really necessary? Is Web site navigation important enough that it should override preferences for a particular look and feel in a Web site? Are there compromises that could be made in this scenario to eliminate some elements on the pages? What are they, and how will they affect usability for site visitors? Can you think of ways to reduce visible elements on the page while still retaining all the navigation features that Mary Jane included?
Version 1.0
8-12
Lesson Summary
Application project
A well-designed navigation scheme makes your site easy to use, whether your visitors are looking for specific information or just want to browse. Making your site intuitive and comfortable lets your users focus on your content rather than on their browsing activity. The number of navigation elements a Web site requires will vary depending on the size and purpose of the site. What types of sites might need less structured navigation? What types might need more? Consider a small non-profit organization that creates a Web page to spread its message and provide contact information. Now consider a large e-commerce site that sells products to worldwide customers. How might the navigation scheme requirements of these two sites differ? How are they the same?
Skills review
In this lesson, you learned that structured navigation is critical to Web design. You examined Web site hierarchy and how it is constructed on the server. You also learned about different types of navigational elements and how they are used to provide positional awareness to users. Finally, you previewed an action plan for navigation design. Now that you have completed this lesson, you should be able to: 2.2.2: Identify Web site hierarchy/architecture concepts, including appropriate page depth for content. 2.2.3: Identify common navigation conventions. 2.2.4: Develop and apply a navigation action plan.
Version 1.0
8-13
Lesson 8 Review
1. Why must a Web designer provide navigation in a site?
2.
What is the difference between primary and secondary navigation?
3.
Name two types of indicators that users can reference to gain positional awareness.
4.
What is site structure, and what role does it play in site navigation?
5.
Name three of the five points to consider when formulating a navigation action plan.
Version 1.0
8-14

Version 1.0
8-15
Activity 8-1: Identifying Web site structure

In this activity, you will try to identify Web pages by reading URLs and determining the file structure of Web sites. Write your responses in the spaces provided. 1. Study the following URL: http://www.hometheatermag.com/frontprojectors/ What can you identify about this Web page without accessing it in your browser?
2.
Study the following URL: http://www.CIWcertified.com/Certifications/Exam_Info/exam_faq.php What can you identify about this Web page without accessing it in your browser?
3.
Study the following URL: http://www.travelalaska.com/Specials/ What can you identify about this Web page without accessing it in your browser?
4.
Study the following URL: http://www.msnbc.msn.com/id/6973740/ What can you identify about this Web page without accessing it in your browser?
Version 1.0
8-16
5.
Study the following URL: http://animal.discovery.com/fansites/meerkat/meerkat.html What can you identify about this Web page without accessing it in your browser?
6.
Study the following URL: http://www.wdvl.com/WDVL/Stats/Top/100.html What can you identify about this Web page without accessing it in your browser?
7.
As you can see, some sites use file or directory names that are not easily read by users. The structure makes sense to the site's technical team but not necessarily to the site's audience. Do you think this practice has an adverse effect on navigation? Under what circumstances might you need to identify a Web page without accessing it in your browser? Consider your own activities on the Web. Does a clearly identified file path improve your Web experience?
Understanding how to read URLs can be useful when you are navigating a Web site. Although not all file and directory names are specific, you can often determine the site you are visiting and the depth within the site you have moved by looking at a URL. Reading URLs also helps increase your understanding of the hierarchical structure of Web sites.
Version 1.0
8-17
Optional Lab 8-1: Identifying navigation elements

In this optional lab, you will identify navigation elements on a public Web page. Write your responses to any questions in the spaces provided. Questions are open-ended to promote thought and may not necessarily have "correct" answers. 1. Browser: In the Address field, enter www.getty.edu/museum/. You should see the home page for the J. Paul Getty Museum, similar to Figure OL8-1.
Figure OL8-1: J. Paul Getty Museum home page
2.
Browser: Study the J. Paul Getty Museum home page. Can you tell from looking at this page which elements are hyperlinks? Do you think this design choice affects navigation for most users? Why or why not?
3.
Browser: Pass your mouse over the icons and their associated links on the home page. What are the major first-level child elements (major topic sections) of the home page?
Version 1.0
8-18
4.
Browser: From the home page, can you determine the major child elements of the first-level elements you named in the previous question? Or do you have to visit each major topic to determine its child elements? How does this affect your understanding of this site's navigation scheme?
5.
Browser: Click the Explore Art link. What content is offered in this major subsection? Are you able to reroute to another section without using your browser's Back button?
6.
Browser: From the Explore Art page, select Mythology from the drop-down list under Subjects. (Note the various subtopics available from this list.) You should see a page similar to Figure OL8-2.
Figure OL8-2: Getty Museum Mythology page
Version 1.0
8-19
7.
Browser: Study the Mythology page. Note the navigation elements provided on this page. What elements, if any, provide positional awareness?
8.
Browser: Continue to study the Mythology page. What familiar navigation conventions, if any, are used?
9.
Browser: Continue to study the Mythology page. What elements of a good navigation action plan can be seen on this page?
10. Browser: Click the Heroes link. You should see a page similar to Figure OL8-3.
Figure OL8-3: Getty Museum Heroes page
Version 1.0
8-20
11. Browser: Study the Heroes page. What are some primary and secondary navigation elements of this Web site, based on looking at this page?
12. Browser: Note the URL shown in the Address field of this Web page. How well does this URL identify your current location? Imagine that a friend sent this URL to you in an e-mail message, telling you to look at this page. Before visiting the page, what would you expect to see? Does this URL represent the site's structure well? Why or why not?
13. Browser: Spend a few minutes browsing this site independently. What is your overall impression of this site's navigation design? What elements would you replicate in your own design? What elements might you improve upon? Do you think this site follows the "three-click rule" of navigation design?
A Web site's navigation scheme must be well planned and executed to make the site userfriendly. Studying the design elements that other sites use to improve navigation can help you design your own navigation scheme from a user's perspective.
Version 1.0
8-21
Lesson 8 Quiz
1. Navigation is: a. b. c. d. 2. the same as browsing. not a critical factor in Web design. movement from one location to another. movement among locations in an understood, controlled manner.
Which of the following is an example of a primary form of navigation? a. b. c. d. Underlined hyperlinks A link to the home page A Back button on a browser Links within the About Us section
3.
What is the term for understanding the navigational hierarchy of any parent, peer or child pages relevant to the current location? a. b. c. d. Positional awareness Organizational chart Navigational depth Site structure
4.
As a Web designer, why should you use familiar navigation conventions in your site? a. b. c. d. Because the familiar conventions are required by the W3C Because inventing unique site navigation takes more development time Because it is advantageous for your site navigation to be different from that of other sites Because common elements have predefined meanings and their familiarity makes users comfortable
5.
A good navigation action plan includes taking several steps to ensure that your site navigation works well. One step involves studying other sites that are easy to navigate. Which of the following is a common characteristic of good navigation? a. b. c. d. Few alternatives should be offered so that you can direct users' paths and progress. Each page should be designed differently so users can identify the page topic by its unique design. Feedback should be provided so users can see where they are and have been, and whether they completed a task. Visual messages should be artful and abstract so users can guess their meaning and approach the site as a game.
Version 1.0
8-22
Version 1.0
9Lesson 9: Web Graphics

Objectives
By the end of this lesson, you will be able to: 3.3.1: Distinguish between vector and raster graphic types. 3.3.2: Identify and choose appropriate image file formats, including browsercompatibility issues and lowest common denominator in audience usability (e.g., GIF 87a, GIF 89a, JPEG, JPEG 2000, PNG, BMP). 3.3.9: Insert metadata into images to ensure accessibility and to ensure higher page ranking in search engine result pages. 3.3.10: Identify the benefits and drawbacks of using stock photography when developing a site (e.g., license-free vs. licensed stock photos, increase in project speed, reduction in creative control). 4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning). 4.1.5: Identify Scalable Vector Graphics (SVG) characteristics (e.g., XML-based, twodimensional, searchable, scalable, zoom support).
9-2
1. Name three characteristics of good Web graphics.
2.
Web images can be categorized into what two graphic formats?
3.
Which term describes the approximation or reconciliation of colors between an image palette and the system palette? a. b. c. d. Palette flash Resolution Dithering Color depth
Version 1.0
Lesson 9: Web Graphics
9-3
NOTE: Graphics are not used only for aesthetics. Images are memorable and can be used to underscore a point or sell a product. Web images should be made functional whenever possible.
Web Site Images

Images are essential in Web site design. Users have come to expect a visually pleasing experience that can only be achieved with the use of images. Images can also be used for navigation in the form of image maps and graphical buttons that link to other pages or resources. On a corporate site, the organization's logo and trademarks are crucial for name recognition and branding. Graphics illustrate content, provide backdrops for other activities, and offer a means of navigating a Web site. Several concepts are important to Web graphic artists.
OBJECTIVE 3.3.10: Stock photography in site development
Using stock images

Stock photography refers to images for which you can purchase the rights to use the images in printed material or on a Web site. Photographers file their images with an agency that negotiates licensing fees on the photographer's behalf. Stock images are then licensed from the agency. Many modern stock photography distributors offer still photos, videos and illustrations. Millions of photos are available for licensing, and all images on stock photography Web sites include embedded metadata that makes it easy to search for images based on keywords.
Licensing
To use a stock image, you must purchase a license for the image. The license is a onetime fee that allows you to use the image multiple times for multiple purposes. Generally, there is no time limit for using the image, but there is usually a restriction on how many times the image can be reproduced. The specified number of times an image can be reproduced is often referred to as a print run. For example, a license might allow the purchaser to print 500,000 copies of a brochure using the image. Two types of licensing are available: Royalty-free license allows the buyer to use an image without having to pay a royalty each time the image is used. Royalty-free does not imply that the image is free to use without purchasing a license or that the image is in the public domain. The buyer also does not have the right to resell or transfer the image. The fee for the image is usually based on the size of the digital file. For example, a 600-KB image might cost $50, whereas a 10-MB version of the same image might cost $200. Rights-managed license allows the buyer to "rent" an image through negotiation of a specific price for a specific use. Some rights-managed licenses stipulate exclusivity; that is, the buyer may restrict similar use of the image by others for the duration of license. Rights-managed licenses are usually more expensive than royalty-free licenses, but they allow for much larger print runs. For example, a magazine with a large print run would use a rights-managed license instead of a royalty-free license. Generally, the fee charged is based on the scope of the project. For example, you might pay $200 to use an image in a small brochure, or many thousands of dollars to use an image in a national advertising campaign.
Version 1.0
9-4
Advantages and disadvantages of using stock images

When developing a Web site, there are both advantages and disadvantages to using stock photography. Advantages include saving time and money. Image databases are quick and easy to search, licenses can be purchased online, and images are downloaded immediately for use. Licenses (especially royalty-free licenses) are much less expensive than hiring a photographer and models for a photo shoot, in most cases. Even if you were to use internal resources for conducting a photo shoot (thereby saving the cost of the licensing fee), you must consider the time factor. Using stock photos increases project speed. Another advantage to using stock photography is that you know exactly what the finished image looks like, while an assignment photo shoot may deliver photos that require editing. Disadvantages to using stock photography are (in some cases) the cost associated with the licensing fees, and a reduction in creative control. You have to select from the images that are available, and you may not be able to find exactly what you want.
Online stock photography resources

There are numerous stock photography Web sites with large databases of searchable photos and videos. These include but are not limited to the following: Jupiter Images (www.jupiterimages.com) Getty Images (http://gettyimages.com) Shutterstock Images (www.shutterstock.com)
In addition to licensing single images, many sites offer access to collections of images on a monthly or yearly subscription basis.
Microstock photography
Microstock photography is an offshoot of stock photography. Online microstock photography provider iStockphoto (www.istockphoto.com) pioneered the microstock photography industry. Microstock providers deal almost exclusively over the Internet, accept photographs from amateur photographers as well as professionals, and sell their images at a very low cost (generally from US $0.20 to US $10). Image prices are based on credits. An image may cost between 1 credit and 20 credits, depending on size, and credits may range from less than US $1 to US $1.40 each. Contributing photographers categorize their images with keywords and upload them to the site's inspection queue, where they are reviewed for quality. Photographers receive a commission of between 20 percent and 40 percent of every sale. iStockphoto also sells vector graphics and raster illustrations. Critics of iStockphoto contend that the company is devaluing the stock photography market by selling images so far below accepted price standards. The commission rate is also below the industry norm (50 percent) and is based on much lower purchase fees.
Free images
Some Web sites offer free use of digital photos for personal and commercial use. Certain restrictions can apply to these images, such as the domain name of the Web site must not be removed from the photo, the photos may not be resold, and the photographer retains the original copyright. A few sites that offer images free of charge include the following:
Version 1.0
9-5
FreeStockPhotos.com (www.freestockphotos.com) FreeImages.co.uk (www.freeimages.co.uk/) Freepixels (www.freepixels.com)
Another possible source for free images is photosharing Web sites. Although the images do not require a license, photographs on these Web sites are copyrighted to the photographer, and you will need to contact the photographer or owner of the photo to obtain permission to use the images.
Photosharing
Photosharing Web sites allow you upload, organize, view, share and download photos and other image files. Some sites are free, while others offer subscription-based services. Free sites generally rely on advertising or the selling of prints for revenue. Some sites offer subscriptions for their premium services, and they offer a free package that has a scaleddown feature set. Some photosharing sites require you to download an application for uploading and managing photos. Some sites also support only specific platforms or browsers.
NOTE: Tags and tagging will be discussed in the next section.
The best sites allow you to create private and public photo albums (and include password-protected access); prevent unauthorized downloading of photos (for example, through right-clicking and selecting a save option); provide online tools for editing photos (cropping, red-eye removal, etc.); offer the ability to buy and sell prints and other gifts; and allow you to search for photos by keyword "tags" or date. Several sites accept pictures taken with cameraphones, and some allow you to upload and share videos as well.
History
The first photosharing sites appeared in the late 1990s, offering photo finishing such as touch-ups and red-eye removal, and online ordering of prints. As digital cameras and cameraphones became more widely used, more and more users signed up for photosharing services. Today, many photosharing sites include social networking and business elements, such as the ability to create and join communities, the ability to create private and public photo albums, and the ability to sell your personal photographs online. Modern photosharing services strive to make organizing, storing and sharing digital photos convenient, safe and easy. These sites offer various ways to share pictures, including the purchase of prints, and the creation of unique photo gifts such as luggage tags, post cards, mugs, mouse pads, calendars, etc. Some sites are also geared to professional and semi-professional photography enthusiasts who want to sell their work, or who want a forum where they can display their photos and receive feedback from other photographers around the world.
Selecting a photosharing service

When selecting photosharing sites and services, consumers may consider ease of use, tools available for managing photo albums and videos, tools available for photo editing, service fees, storage space and daily upload limits, absence of ads and spam, the ability to buy and sell prints, and password-protected access, among other features. Several sites advertise themselves as "family-friendly," prohibiting photos or other media portraying explicit nudity.
Version 1.0
9-6
Popular photosharing sites include the following:

OBJECTIVE 3.3.9: Metadata in images
dotPhoto (www.dotphoto.com/) Webshots (www.webshots.com/) Fotki (www.fotki.com/us/en/) Flickr (www.flickr.com) SmugMug (www.smugmug.com) Picasa (http://picasa.google.com) Shutterfly (www.shutterfly.com)
Adding metadata to images

Metadata is data about other data. On the Web, metadata often provides a description or synopsis of a Web page, can include keywords used by search engines, and can denote authorship of a file. Including metadata in your pages and images can help visitors find your site. Metadata for photographs typically includes the date and time a picture was taken and the details of the camera settings. Many digital cameras record metadata in exchangeable image file format (EXIF). A key feature of photosharing sites is the ability to tag items in order to categorize them. A tag is a non-hierarchical keyword or term that you can assign to an item such as a Web page or an image file. Tagging or "image tagging" an item allows it to be found again by browsing or searching; that is, a tag is metadata. Tags are considered a bottom-up system of classification, in contrast to hierarchies, which are top-down systems. In a hierarchical system (also called a taxonomy), a designer specifies a limited number of terms that can be used for classification, and there is one correct way to classify each item. In a tagging system, users decide how to tag an item. There is an infinite number of ways to classify an item, and there is no wrong way. An item may have several tags, and thus belong to several different categories. Many photosharing sites allow users to tag their images, making the pictures highly searchable. Some sites even allow for geotagging, which is the process of adding geographical identification metadata to photos and videos. Geographical metadata usually includes latitude and longitude coordinates, and can also include place names.
NOTE: Metadata will be discussed in detail in a later lesson.
tag A user-defined nonhierarchical term assigned to an item for categorization purposes.
NOTE: Search engine optimization (SEO) will be discussed in detail in a later lesson.
Using metadata in your images (along with properly naming your Web pages and using keywords in your pages) can help you achieve higher rankings in searches. In the following lab, you will use Picasa to add metadata tags to an image. Suppose you are creating a Web site for a dog trainer, and she has several photos of her "clients" that she wants posted to her Web site. You can add metadata tags to the images so that people searching for photos of dogs or of a particular breed will see some of the images and thereby increase the chance of a visit to her Web site.
Version 1.0
9-7
Lab 9-1: Adding tags to a photo

In this lab, you will use Picasa to add tags to a digital photo. 1. 2. Desktop: Copy the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson09\Lab_9-1 folder to your Desktop. Browser: Go to http://picasa.google.com and download and install Picasa 3 (The current version as of this writing is 3.6). Accept the suggested defaults. When the installation is complete, close and reopen Picasa. Note: The picasa36-setup.exe binary file is located in the LabFiles\Lesson09\Lab_9-1 folder in the supplemental files. You can use this file to install Picasa 3 if you like. 3. Picasa 3: In the Folder list on the left side of the window, click the Lab_9-1 folder to display its contents in the main portion of the window. Click the image to select it. Notice that file properties for the picture (file name, creation date, picture dimensions and file size) display in the blue bar that separates the upper portion of the window from the lower portion, as shown in Figure 9-1. Note: If you cannot locate the Lab_9-1 folder, select File | Add File To Picasa, navigate to the Desktop\Lab_9-1 folder, then double-click Age7.jpg.
Figure 9-1: Picasa 3 interface
4. 5.
Double-click the Age7 image to open it in an editing window. Select Picture | Properties to display the file properties in a dialog box. A few additional properties such as resolution, JPEG quality and unique ID are indicated. Click OK to close the properties dialog box.
Version 1.0
9-8
6.
Select View | Tags to open the Tags panel on the right side of the window, as shown in Figure 9-2. You use this panel to add tags to your pictures.
Figure 9-2: Picasa 3 Tags panel
7. 8. 9.
In the Type In A Tag To Add box, type dog, then click the plus sign (+) to add the tag. Add the following tags to the image: pit bull, female, trampoline, family pet. Redisplay the properties for the picture. Notice that your user-defined tags now display as properties, as shown in Figure 9-3.
Figure 9-3: Updated picture properties
Version 1.0
9-9
10. Close the properties dialog box. In the top-left portion of the window, click the Back To Library button to exit the editing window, then quit Picasa 3. In this lab, you added tags to a photo.
Digital Imaging Concepts

All digital images have certain attributes that can drastically affect quality and file size. A few of these attributes are discussed in this section.
Pixels
NOTE: You were introduced to pixels in the lesson that discussed page layout and color theory.
The term "pixel" is short for "picture element." The pixel is the smallest unit displayed by a computer monitor. Pixels in a grid form the building blocks for images a computer can display.
Color depth
Pixels provide some amount of color information. This information, measured in bits, determines how many colors each pixel can display. For example, pixels with 4 bits of grayscale information can display up to 16 shades of gray. Eight bits of color information per pixel produces up to 256 bits of color information, and so forth. Higher bit values (also called bit depths) result in more intense or realistic colors. As the color depth increases, however, so does the file size.
NOTE: Be sure you understand the difference between image resolution and color depth. Resolution relates to the clarity of an image, without regard to color.
Image resolution
A user's monitor resolution determines how large onscreen images will be displayed. Screen resolution depends on the number of pixels present in a monitor's height and width. Higher screen resolutions display more pixels per inch (ppi). For example, a 15inch monitor set to a resolution of 800x600 will not display as many pixels per inch (ppi) as a 15-inch monitor set to 1024x768. For printing, greater detail is achieved with higher-resolution images, and this detail is measured in dots per inch (dpi). When scanning images from a print source or importing pictures from a digital camera for use on the Web, it is generally accepted that you should set the resolution to 72 dpi in order to display the image on screen at approximately the same size as the original image. For Web images, the dimensions of the image in pixels rather than the dpi or ppi are most important. When designing a Web site, you will typically resize images to the dimensions you want to use on your Web page. The relationship between actual size and pixel size can be a bit confusing at first. To understand it, consider an image that is 100 pixels wide by 100 pixels tall. If this image is displayed on a 17-inch monitor set to 800x600 resolution, the image will occupy oneeighth of the width and one-sixth of the height available on the monitor screen. If the monitor is set to a resolution of 1280x960, then the image will take up less space on the screen. The monitor has not increased in size, and the image is still 100 pixels by 100 pixels. What has changed is that the monitor is displaying more pixels per inch (ppi). Because monitors can be set at different resolutions, there is no way to specify that an image should be 1 inch long, for example, on a Web page. Instead, you specify image size in pixels, such as 100 pixels or 224 pixels.
Version 1.0
9-10
Palettes
Although an 8-bit color display can show millions of colors, it can only display 256 colors at one time. The system maintains these 256 colors in a system palette. A 16-bit display can display 65,536 colors at once, and a 24-bit display can show 16.7 million colors at once. Most users currently have the ability to view at least 16-bit color, so limiting the number of colors you use is not as big an issue for Web designers as it was several years ago. When you create an 8-bit image using a vector or paint program, the program builds a palette based on the colors used in the image. The system palette then adjusts slightly to convey the correct colors when the image is displayed. When you display several images, either in sequence or simultaneously, you might experience a disconcerting flash of colors known as palette flash or palette shift. Palette flash occurs when a significant discrepancy exists between the image bit depth or palette and the system bit depth or palette. To overcome this limitation, the browser automatically applies a technique called dithering to the image.
NOTE: As discussed in the lesson about page layout, dithering will not occur if you limit colors to those in the browser-safe color palette. Browser-safe colors are listed at www.lynda.com/ resources/webpalet te.aspx.
Dithering
Dithering is the approximation or reconciliation of colors between an image palette and the system palette. The dithering process works by placing two colors from the system's palette next to each other in order to trick the eye into seeing a third color that is desired but not part of the palette. Dithering makes it possible to display images that contain more colors than the system displaying them can support. When a Web browser encounters an image that contains colors not supported by the current monitor settings, the browser will automatically use dithering to try to approximate the correct colors in the image. Unfortunately, dithering can alter the image's appearance in ways you might not want. In particular, a high-color image such as a photo can appear grainy when displayed on a computer that supports only 256 colors. When you create Web images using a graphics-editing program, you can specify whether the image should use dithering or whether the graphics application should change the image colors to the closest browser-safe colors. If you use only colors in the safe 216color palette that can be displayed on both Firefox and Internet Explorer browsers (i.e., browser-safe colors), then your images will not dither when viewed on any browser. However, using only browser-safe colors severely limits the range of colors and types of images you can use on your pages, and is rarely an option for photographic images. The consensus among designers today is that you should use browser-safe colors whenever possible. Fortunately, this issue is becoming less problematic because most computers in use today support resolutions higher than 8-bit display.
Raster vs. Vector Graphics

OBJECTIVE 3.3.1: Vector vs. raster graphics
Web images can be categorized into two graphic formats: raster (or bitmap) and vector. Each format has different file subtypes.
Version 1.0
9-11
Raster graphics
The most common graphic format is raster, also known as bitmap. Raster graphics use small dots to create images and colors. Raster graphics include the JPEG, GIF and PNG formats.
NOTE: Raster graphics are frequently called bitmap graphics. It is important to understand that these two terms mean the same because both terms are widely used.
The larger the dimensions of the image, the larger the associated file size. When viewed with magnification, a raster graphic resembles a series of little squares, each of which has a color value that contributes to the overall shape. Because raster graphics are created using actual dots of color, making a raster graphic larger decreases the image resolution. In other words, if a raster graphic has 72 dots per inch (dpi) and is 1 inch wide, it will have 36 dpi if you make it 2 inches wide using magnification. Figure 9-4 shows a raster image as it looks when magnified.
Figure 9-4: Magnified view of raster image

NOTE: Remember the key characteristics of raster images in Web development: They work best for photos, and image size affects file size.
For a raster graphic to render its shape, the browser and the available RAM work in unison to load the graphic. The information for each pixel is stored, and then rendered in the browser to create the image. The reason that larger raster images result in larger file sizes is that more pixels must be instructed on the values to display. Removing pixels and compressing files will decrease file size, but will also reduce image quality. Raster graphics are best suited for photographs and realistic graphics.
Vector graphics
NOTE: You can review and apply concepts of appropriate use for raster and vector graphics in Activity 9-1: Identifying graphic formats and files.
Vector graphics are quite different from raster graphics in their rendering process. Vector graphics store the information about the image in mathematical instructions that are then interpreted and displayed. For example, to create a circle, the vector graphic need only know the center coordinates, radius and color values. With this information, mathematical instructions are used to render the graphic. To increase the size of the circle, only the information values need to change, therefore increasing the size of a vector does not increase the file size of the image. Figure 9-5 shows a sample graphic and illustrates how the graphic uses lines to interpret and render the shape.
Version 1.0
9-12
Figure 9-5: Vector image using mathematical interpretation

NOTE: Remember the key characteristics of vector images in Web development: They work best for line art and illustrations, and image size does not affect file size.
Another advantage of vector graphics is their ability to scale to the output device being used. Vector has this ability because it is not resolution-dependent. Vector graphics are best suited for line art, shapes and illustrations.
Graphics Applications
You can create, retouch and export Web-ready digital images with a variety of graphics programs. These programs can be divided into two general groups: vector-based drawing programs and paint-type programs.
Vector-based drawing programs

Vector-based drawing programs map shapes that you create onto an invisible grid. Image information is stored as a set of mathematical instructions. As previously discussed, vector graphics are resolution-independent, meaning that computer monitor settings do not affect their size or appearance. Vector files are also smaller than similar paint-type image files. Vector graphics are commonly used in high-end three-dimensional and Virtual Reality Modeling Language (VRML) environments. Currently, vector graphics cannot deliver truly photo-realistic detail, and they display somewhat more slowly on screens. They also require a browser plug-in or helper application for viewing on the Web. However, vector graphics work very well for industrial, manufacturing, scientific and educational purposes. If you want to develop your own graphics, vector-based drawing applications commonly used in the industry include the following: Adobe Illustrator CS5 Adobe FreeHand MX CorelDRAW X5 Inkscape Adobe Fireworks CS5
Note that Fireworks supports both vector and raster graphics. You will be introduced to this application later in the course.
Version 1.0
9-13
NOTE: You may find it difficult to remember how to distinguish between paint and draw programs. Draw programs use mathematical vectors to draw lines, whereas paint programs can spread color over an area of a bitmap.
Paint programs
Paint-type programs create raster images from scanned photos and video frame captures, or can be used to create original artwork. Raster files can represent highly detailed images. As previously discussed, a raster graphic is an arrangement of small dots, and each dot corresponds to a pixel on the screen. Raster images can be edited pixel-by-pixel if necessary. One drawback of rasters, however, is that the original files are large. Both JPEG and GIF formats are raster graphic types. If you want to develop your own graphics, paint-type applications commonly used in the industry include the following: Adobe PhotoShop CS5 Microsoft Image Composer Corel PaintShop Photo Pro X3 Adobe Fireworks CS5
NOTE: You can review and apply concepts of appropriate use for draw-type and paint-type applications in Activity 9-1: Identifying graphic formats and files.
Note that Fireworks supports both vector and raster graphics. You will be introduced to some basic functions of this application later in the course.
Image File Formats

Graphic images come in numerous file formats: bitmap (BMP), Tagged Image File Format (TIFF), Windows Metafile (WMF), Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and Scalable Vector Graphics (SVG). Only GIF and JPEG are natively supported by all browsers; other file formats can be viewed with the aid of a plug-in. Native support means that the browser does not require any special software or plug-in to display the image. When creating Web graphics, designers must choose between GIF and JPEG based on the type of images they want. Table 9-1 lists various image file formats and their file name extensions.
Table 9-1: Image file formats
OBJECTIVE 3.3.2: Image file formats
File Name Extension

NOTE: How many of the file formats named here are familiar to you? Have you seen others used on the Web?
File Format
Joint Photographic Experts Group (JPEG) Graphics Interchange Format (GIF) Tagged Image File Format (TIFF) Bitmap (BMP) WordPerfect Graphic Portable Network Graphics Bitmap (BMP)
Origin
Joint Photographic Experts Group CompuServe Inc. Aldus Corporation Microsoft Corporation WordPerfect Corporation (Novell) Codelab Inc. ZSoft Corporation
.jpg, jpe, .jpeg .gif .tif .bmp .wpg .png .pcx
Version 1.0
9-14
Graphics Interchange Format (GIF)

NOTE: "GIF" is pronounced with a hard G, as in "graphic" (not a soft G as in "giraffe").
GIF is a platform-independent file format that is limited to a display of 256 colors. Originally developed by CompuServe for its online service, GIF has been adopted by most developers because of its small file size. Graphic interlacing (the progressive rendering of images) is unique to GIFs and is a preferred method for display of large graphic files. GIF is considered a "lossless" format; this term means that as the image is compressed, no information is lost. Consequently, a GIF file may not compress as much as a JPEG file of the same size. The amount of compression cannot be determined by the designer for a GIF file, though it can for a JPEG file. GIF files exist in two versions: 87a and 89a. The original 87a format supports most of the GIF's advantageous features, such as small file size, lossless compression and transparency. The 89a version of GIF also supports animation and interlacing.
Animated GIF
The 89a version of GIF allows storage and playback of a sequence of still images to create the illusion of animation. GIF files can provide many full animation and video effects without the need for plug-ins. Regular GIF files contain only one static image; the animated GIF functions much like a cartoon flipbook. Animated GIF files consist of sequential frames that reload from a browser's cache and replay in an infinite or predetermined loop to simulate motion. One advantage that animated GIFs have over other image animation is that they do not depend on client-pull or server-push. Both server-push and client-pull require a file to be downloaded sequentially with numerous exchanges between the user's computer and the server.
Transparent GIF
Another advantage that a GIF image has over a JPEG image is that the designer can designate a color of the GIF image to be transparent. This feature removes the constraints of square or rectangular graphics. For example, the designer can create a circular logo in a square image by making the background color transparent. Thus the image appears circular when, in fact, it is square with information for the square background to appear transparent.
Joint Photographic Experts Group (JPEG)

NOTE: "JPEG" is pronounced "jaypeg."
NOTE: Considering the many advantages that GIF images seem to have over JPEGs, what reasons can you think of to use JPEG images?
Graphics in the JPEG format are capable of much greater color depth than GIFs, but usually require more time to download. JPEG files can contain up to 24 bits of color information (16.7 million colors) and work particularly well for photographs. JPEG files are compressed automatically. They are decompressed when they arrive at the Web page. Compression effects vary: The greater the compression, the greater the level of degradation in the final image. JPEG is considered a "lossy" format type; this term means that as the compression of the image is increased, colors are dropped from the image color palette, resulting in image degradation. For example, a 100-KB JPEG file can be compressed to perhaps 10 KB. However, this amount of compression may diminish the image quality to an unusable degree. One drawback to this format is that the designer has no control over how the 24 bits are mapped into the 256-color palette used by a client's display. Also, considerable differences exist between the way Firefox and Internet Explorer display images. Further, the display results of PCs and Macintoshes also differ. Designers should test their images in these two and other browsers, as well as multiple operating systems, before deciding which format best serves their purposes.
Version 1.0
9-15
JPEG 2000
NOTE: You can review and apply concepts of effective use for GIF and JPEG file formats in Activity 9-1: Identifying graphic formats and files.
A newer JPEG format enhances the compression feature of standard JPEGs and improves scalability and editability. As discussed, the original JPEG format is lossy, which results in information about the image being discarded upon compression. This loss of data effectively creates "holes" in the image, which are filled and thus create a speckled effect. With JPEG 2000, the compression includes a Wavelet technology that stores the information differently, reducing the amount of speckling that occurs when the JPEG is decompressed. The file name extension for JPEG 2000 is .jp2.
Portable Network Graphics (PNG)

The PNG file format is emerging as the new format for Web graphics. PNG brings together the best features of the GIF and JPEG formats into one format. PNG files are lossless and support transparency like GIFs, yet also support compression and high bit depth like JPEGs. In addition, PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must be 8-bit and 24-bit depth, respectively. Compression is enhanced in PNGs by using compression filters that can support up to 48-bit color.
NOTE: You can compare file size of GIF, JPEG and PNG files in Optional Lab 9-1: Comparing image file formats.
However, browser support for the PNG format is currently not complete. Older versions of the major browsers offer little support for PNG. Internet Explorer version 6 had incomplete support for transparent PNGs, and Internet Explorer 7 and 8 are unable to correctly display PNG images with color correction. PNG-compatible browsers include Apple Safari, Google Chrome, Mozilla Firefox and Opera, with partial support available in the various versions of Internet Explorer. As a result, it is not advisable to rely on PNG as a fully supported format for the Web.
Scalable Vector Graphics (SVG)

OBJECTIVE 4.1.5: SVG characteristics
Scalable Vector Graphics (SVG) format is a W3C Recommendation that uses Extensible Markup Language (XML) to describe certain shapes. Similar to other vector graphics, SVG is best for working with two-dimensional line art and shapes. To read the SVG 1.1 specification, visit www.w3.org/TR/SVG11. Because SVG is a vector graphics format, it is also scalable. A circle image stored as a vector graphic has the same file size whether it is saved with a diameter of 90 pixels or 900 pixels. In addition, the use of XML in SVG files allows the graphic to become an object in the X/HTML page, enabling access to the full XML document object model. Therefore, filters, masks, scripting and mouse events can be tied to SVG files. And because SVG graphics are stored as simple XML files, they are searchable and can be easily manipulated with Web programs to support zooming, rotation, movement and other types of image manipulation. (XML will be discussed in more detail later in this course.) Figure 9-6 shows a brief sample of well-formed SVG code syntax. This example shows XML code, which is case-sensitive but does not strictly require the use of lowercase letters for tags. If this code were XHTML, all of the tags would need to be typed in lowercase letters.
NOTE: Have you heard of XML? This course introduces XML in a later lesson.
Version 1.0
9-16
<?xml version="1.0" standalone="no"?> <SVG WIDTH="5in" HEIGHT="4in" XMLNS = 'http://www.w3.org/2000/svg-2000-stylable'> <DESC> </DESC> <G> </G> </SVG>
Figure 9-6: SVG image file syntax
For more information about SVG, you can visit the following URLs:
NOTE: Copyright infringement is an important subject. It is commonly believed that images and text on the Web can be "borrowed" simply because it is possible and easy to copy them. The ability to copy material from the Web does not make it legal to do so.
www.w3.org/Graphics/SVG www.mozilla.org/projects/svg/
Creating and Optimizing Images

Creating Web-quality images requires the knowledge and use of a graphics application. This aspect of Web design can be the most difficult to master. Depending on the size of your organization, a graphic artist might design all the images. If you are not artistically inclined, many resources on the Web offer images for free use. High-quality graphics are not usually free. As an alternative, you can subscribe to Web sites that offer tens of thousands of graphics. These subscriptions can range in price from a nominal monthly fee to more substantial annual fees.
Be sure that any graphics you use on your Web site are copyright free. Web site text must also be your company's original creation or licensed for you to use. Always check the legal statements on any Web site whose material you want to borrow. Copyright infringement is illegal and punishable by fine and imprisonment.
Web images and accessibility

Good Web graphics must be aesthetically pleasing, relevant to the site's purpose and, most importantly, small in file size. File size directly affects download time and is a key consideration for the Web developer. Developers must consider bandwidth requirements for the images used on a page. According to WebSiteOptimization.com (www.websiteoptimization.com), about 95 percent of the Internet connections in the United States are broadband (as of December 2009). Although this does mean that most users can view content that requires high bandwidth, it also means that some users are still connecting with a modem. The most common modem connection speed today is 56.6 Kbps. Even with a high-speed Internet connection, images that are unnecessarily large will take longer to download than users may be willing to wait. A graphic-intensive page can initiate poor reviews if the content is overwhelmed by a lengthy download time due to image misuse.
Version 1.0
9-17
NOTE: The effect of images on Web page file size and download times is a key consideration for Web developers.
If the site is intended for use as an intranet application over a network, then many obstacles are removed. At the same time, remember that an intranet serves a different purpose than an Internet application. An Internet presence is for public use and represents the face of the organization to the outside world. It should provide an enjoyable experience. An intranet is for business purposes; it is intended for quick and easy access to information and resources. If an intranet application is too graphical and flashy, it reduces worker productivity. You can think of the intranet as more functionoriented, and the Internet as more presentation-oriented.
The alt attribute

The alt attribute provides alternative text in place of an image on an XHTML page. The syntax for using the alt attribute is as follows:
<img src="filename.gif" alt="This is a link to the search page"/>
For reasons of user accessibility, the XHTML Transitional specification requires the alt attribute for your code to validate to the standard.
NOTE: The alt attribute is easy to add to Web page images. This simple addition does more than make a Web site more accessible. It also helps sites appear more thorough and professional even to users who do not require it for accessibility purposes.
The alt attribute is useful for several situations: Users who have disabled the image-viewing capability on their browsers can read the image name or link destination. Users can read the image name or description while an image loads. Software can provide accessibility options for vision- and hearing-impaired users.
Image optimization
For the Web designer, none of the benefits of the GIF, JPEG or PNG are realized unless optimization is considered. A misconception is that any one of these formats is better than the others. As you learned earlier, each image format has special benefits that make it unique. As a Web designer, you must learn which format to use for any particular graphic. Consistently using GIFs or JPEGs does not ensure that you are optimizing your image use. Following are some guidelines you can use to help optimize your Web graphics: Use colors from the browser-safe color palette. Use the fewest colors possible. Use solid colors whenever possible. Avoid anti-aliasing when possible. Use optimization utilities.
Optimization sources
Many sources are now available to help the Web designer optimize graphics. The basic procedure of optimization is determining the smallest color palette possible and choosing a file format that results in the quality required. The most commonly used optimization tools are included in graphics applications such as PhotoShop CS5, Fireworks CS5 and others. Two other common image optimizers are now in use as well: online versions and desktop versions. Online image optimizers typically require an annual subscription fee, which varies depending on the number of pages or graphics you want to optimize. Some other services are free. The Web designer simply enters a URL for the images. The online program visits
Version 1.0
9-18
the site to download and optimize the images. The designer is then granted access to the optimized images. The following services provide online image optimization: GIFBot from NetMechanic www.netmechanic.com/products/accelerate.shtml SiteScan from OptiView www.optiview.com/
The desktop image optimizers perform the same process, except the images being optimized need not be made available on the Web for the service to access them. The following services provide desktop image optimization: DeBabelizer Pro from Equilibrium www.debabelizer.com/Internet/Equil/Products/DeBabelizer/index.html Ulead SmartSaver Pro from Corel www.ulead.com/ssp/ GIFCruncher from Spinwave.com www.webreference.com/services/graphics/gc/
In the following lab, you will evaluate and optimize image files using a free online optimization service. Suppose your project manager tells your Web team that the site you are currently designing is exceeding file size limits recommended by the marketing team for your site's target audience. Your project manager asks you and your team members to review the site pages, and consider ways to reduce download time without sacrificing the content or design you have all been working hard to create. You can suggest using an image-optimizing tool such as this one to evaluate your site's images and reduce file sizes wherever possible.
Lab 9-2: Optimizing images for Web use

In this lab, you will use a free online image-optimization service from NetMechanic called GIFBot. This service will evaluate the graphics and links on a designated page, provide a summary of the site graphics, then provide optimized versions of the graphics for you to choose, download and keep. 1. Browser: Go to www.netmechanic.com/products/accelerate.shtml. You will see the NetMechanic GIFBot page, as shown in Figure 9-7. Click the Try It Now link.
Version 1.0
9-19
Figure 9-7: NetMechanic GIFBot page
2.
In the GIFBot Free Sample section, enter a URL to any Web site in the URL field (Section 1), as indicated in Figure 9-8. You can use your company Web site or any site you frequently visit and want to test. Or, if you prefer, you can upload a file from your computer by clicking the Browse button.
Figure 9-8: Entering URL to test images
3. 4.
Enter an e-mail address (Section 2). Select Both GIF And JPEG from the Output Format drop-down list (Section 3).
Version 1.0
9-20
5.
Click the Test Now button to proceed.
6. The service will begin downloading the images and evaluating them. Notice the progress indicator that appears as the images are being evaluated. When the evaluation is complete, a full report will appear, as shown in Figure 9-9.
Figure 9-9: Image evaluation report
7.
Scroll down to view the results. Notice the file size of each image. In the Image Size column (Figure 9-10), click a file size (which is a link) of one of the larger images listed in the report.
Figure 9-10: Image file sizes
Version 1.0
9-21
8.
You will see repetitions of the same graphic as you scroll down the page. Notice that next to each copy is information about the graphic, including type, image quality, size, download time and percentage of file size savings. You can now compare the optimized image with the original image by moving your mouse pointer over each image. As you do, the original image will appear. Move the mouse pointer away and the optimized image will reappear, providing a precise comparison. You may find that you must scroll down to test several images before noticing a change. In the example in Figure 9-11, there is a significant degradation of image quality as the file size is reduced. This indicates that the image is already fully optimized.
Figure 9-11: Comparing optimized image versions
9.
If one of the optimized images is acceptable, click that image. The image you select will open in a new browser window.
10. Right-click the image and select Save Image As. Specify a name for the image, then click the Save button. You now have an optimized version of the image. By optimizing all the images on a page (and a site), you can dramatically reduce download time, providing users with a faster browsing experience.
Image slicing and splicing

Another technique that is used to help shorten download time of large images (such as image maps) is a process called slicing. The slicing process involves dividing images into several smaller images. With the use of HTML tables, the image can be reconstructed or spliced back together in the browser window. Slicing does not change the file size of the image, but rather gives the appearance of faster loading because the user sees portions of the image (the smaller image sections) before the entire image has downloaded.
Version 1.0
9-22
Many slicing applications are available; some are freeware, whereas others are available for a fee.
Essential Graphic Design Concepts

Graphic design is a collection of disciplines (from visual arts and age-old printing to pagelayout methods) that are used in order to construct a piece of visual communication. You apply various graphic design principles in Web design to create successful Web pages that draw a visitor in, give him the information he wants, and move him around your Web site. Throughout this course, you will learn graphic design principles and apply various graphic design techniques. The following section discusses three essential concepts of graphic design that you can apply when creating your Web pages. These concepts are: composition, grid-based layout and typography.
Composition
Composition is the placement or arrangement of visual elements, whether on a canvas, a printed page or a Web page. Composition involves what draws the viewer's eye into the page, or where the viewer "enters" the page, and deals with how to lead the eye through the page. When considering composition, the designer must determine what the central point of interest on the page will be, and then compose other elements of the page accordingly. Each page should have a focal point. Avoid the mistake of trying to make everything on the page stand out.
Visual hierarchy
When viewing any form of visual communication, the eye is attracted to the point of highest contrast. Consider a painting. Objects that are most important in the work are closer than the less important objects in the background. The artist helps us to see which objects are closer by painting them larger than the rest, and with more intense color, color depth and clarity than objects in the background. You create a visual hierarchy in a Web page by varying text size, weight and color. Titles, subtitles and body text are used to create this hierarchy because the human eye is trained to look for the points of highest contrast first. By emphasizing the titles, and then to a lesser degree the subtitles, etc., you make the outline of the page readily apparent. This helps the visitor ascertain the organization of the page quickly. An outline is the simplest form of visual hierarchy.
Grouping
Grouping related elements on a page helps to define the page's structure. When we first glance at a page, we try to group the elements in our minds in order to simplify the visual field. We use grouping to ignore the details and grasp the main concepts. A good designer facilitates this process by grouping Web page elements on the page. Grouping occurs when objects have similarities in shape, color, size, location and proximity. Apply the same typeface, color, weight, etc., to all the objects in a group so that a viewer can easily identify all the elements that comprise the group.
Version 1.0
9-23
Visual cues
A basic principle of composition is that the eye follows lines, gesture and movement in the page (whether these are real or implied), and that it rests temporarily on masses before moving on. Masses include images and shapes (remember that words and paragraphs are shapes too). Therefore, the placement of elements on your page will affect or guide how the eye moves around the page. Human faces and gestures in images play a big part in overall compositional flow. Be sure to place these types of elements so that they point into (and not off of) the page. Our eyes also tend to move around the edges of shapes, including the page or browser borders, so placing visual cues along these boundaries redirects the eye back into the page to discover other levels of your visual hierarchy.
Integration of elements
Integration of page elements is achieved when the page appears as a whole unit instead of as a collection of various elements. In order to achieve integration, you should repeat colors, shapes, lines and patterns throughout a page. Repeat this use of color and pattern throughout all the pages of the Web site so that the entire site is unified.
Grid-based layout
A typographic grid is a two-dimensional structure consisting of intersecting vertical and horizontal lines. The modern typographic layout grid has been used for producing printed material since the 1940s. But the Web designer's interest in grids is a fairly recent development. The purpose of the grid is to help designers achieve coherency when organizing a page. As the vertical and horizontal lines of the grid intersect, boxes called grid units are formed. Text and graphics to be placed on the page are placed within the grid units. Because of the regular and balanced occurrence of grid units on the page, Web page elements placed within the grid units are aligned and balanced with each other. The grid becomes an underlying framework for the page, providing spaces in which to "hang" or attach various elements. The grid helps the designer create a balanced, harmonious composition. The theory behind using grid-based layout is that aesthetics can be constructed. That is, if you use a well-defined grid that fits the purpose of your content, and then you place elements within the grid units, you will most likely have a good start at creating a page that is aesthetically pleasing. There is no hard and fast rule concerning how many grid units to create, or how far apart they should be spaced, or whether they should be spaced evenly. Grids can be used to underpin one-, two- or three-column layouts, or even more. Some designers prefer evenly sized columns; others prefer to use ratios to determine the size of narrower and wider columns. The key is to determine a grid that is suitable for the content you want to display.
NOTE: Visit www.maths.surrey. ac.uk/hostedsites/R.Knott/ Fibonacci/fib.html for more information on the Fibonacci spiral and the golden mean.
The golden ratio

Ratios are often used for composition in art and print. For example, the golden ratio (also called the golden mean, the Fibonacci spiral and the divine proportion) has been used in art and architecture for centuries. This ratio is evident in nature as the number Phi (1.618033988749895) and is found in many places, such as in the spirals of a nautilus shell, in the petal distribution of various flowers, and in the seed heads of numerous plants.
Version 1.0
9-24
To create a design grid based on the golden ratio, do the following: Determine the width of your design area. For example, if you were designing for a monitor with a resolution of 1024x768, the page would not be more than 1004 pixels wide. Let us assume that our design width will be 984 pixels. Divide the design width by Phi (1.62 is sufficient). 984 / 1.62 = 607.4074. Round to a whole number, to arrive at 607. The width of the wider column (let us call it the main column) would be 607 pixels. Subtract the width of the main column from the design width to determine the width of the narrower column. 984 607 = 377. The narrower column would be 377 pixels wide.
Using these measurements, you would create a two-column layout with a main column that is 607 pixels wide and a secondary column that is 377 pixels wide. If you were designing for a monitor resolution of 800x600, assume the design width to be 760 pixels. Using the formula in the previous example, the main column would be 469 pixels wide and the secondary column would be 291 pixels wide. You can also use percentages for a flexible-width layout: 100% / 1.62 = 62% for the main column, leaving 38% for the secondary column. A flexible-width layout adjusts to the size of the browser window.
Typography
glyph An element of writing.
To a designer, the appearance of words is as important as their meaning. The designer strives to create balance and relationship between the elements on a page. Typography is the art of arranging and designing type and modifying type glyphs. This section is meant to be only a brief introduction to typography.
Definitions
Although typography is an ancient craft, many of its terms have fallen out of use and require defining.
measure The width of a body of type.
A measure is the name given to the width of a body of type. The three basic units for defining the measure's width are as follows: One point = 1/72 of an inch One pica = 12 points One em (pronounced "em") = the distance horizontally equal to the type size, in points, that you are using. For example, 1 em of 12-point type is 12 points.
On a Web page, a pixel may also be used as a unit for defining the width of a measure.
leading The amount of added vertical spacing between lines of type.
Leading (pronounced "ledding") is the vertical space in a text block; it is the distance from one baseline of text to the next. Leading strongly affects the legibility of text. Too much leading makes it hard for the eye to locate the next line of text. Too little leading makes it difficult to distinguish the lines of text from one another.
Legibility
The first thing a viewer sees upon arriving at your Web site is not the title or other details, but the overall pattern and contrast of the page. The repeating patterns
Version 1.0
9-25
established through the use of organized text and graphics increase legibility and help the reader grasp the organization of your content. Because Web browser windows are resizable and because some users may set their browses to display very large type, it is difficult to arrive at an optimal size for measure. In general, a measure of 52 characters to 78 characters (including spaces) should allow for comfortable online reading. Proper leading will keep the eye moving along the line of text. In print, a simple rule for legibility is that leading should be 2 points greater than the size of the type. On a Web page, you might want to consider making the leading 2 points to 4 points greater than the type size. If you use reverse text (white text on a black background), increase the leading and decrease font weight to improve legibility.
Typeface
When designing your pages, you want to create a harmonious fit between the text and the visual flow of content. While there are many typefaces from which to choose, each with its own unique tone, there are still some user systems on which only the default operating system fonts are installed. If the font you specify is not available, the browser will substitute the default font. Make yourself familiar with the fonts that are resident on various operating systems, such as those on a Windows system and those on a Mac. You can find a list of common and equivalent fonts for both of these operating systems at www.ampsoft.net/webdesignl/WindowsMacFonts.html. Instead of specifying a single font to be used in your Web page, specify a font family that includes at least one font from both operating systems (e.g., Verdana, Geneva, Helvetica). The most conventional scheme for typefaces is to use a serif font for body text and a sans serif font for headings. Whichever fonts you choose, make sure they look good on the screen. You should also consider the nature of your content and how the content on your page will be used. For example, Times New Roman is a good choice for pages with a lot of body text that will most likely be printed. Times New Roman looks good on the screen and it looks good in print as well. Georgia and Verdana were designed specifically for computer screens. They look good on a Web page, but they look oversized and cumbersome in print.
Case
Choosing uppercase or lowercase letters has a strong effect on the legibility of your text. As we read, our eyes scan over the text, recognizing words primarily by their shape, not by parsing each letter and then assembling a recognizable word. Words that are formed from all capital letters are shaped like rectangles they offer no visual clues as to what the word is. Reading text that is in all uppercase letters is tiring and monotonous. The use of initial caps (capitalizing the first letter of each word) in headings also disrupts a reader's ability to scan for word forms.
Emphasis
You will want to add emphasis to various elements on the page in order to give visual clues about the page's structure. Small variations are usually enough to establish visual contrast. A good rule of thumb when working with text is to add emphasis using one parameter at a time. For example, if you want to add emphasis to your section headings,
Version 1.0
9-26
increase their size by one measure, or keep them the same size as your body text and make them bold. Bold text gives emphasis because it contrasts in color from the body text. Bold text works well on section subheadings, for example. However, large blocks of bold text lack contrast and lose their effectiveness. Italic text attracts the eye because its shape differs from the body text. Italic text should be used for specific purposes, such as listing a book title, or for foreign words and phrases. Large blocks of italic text, however, are difficult to read. Underlining sections of body text or making the text a different color may cause users to assume that the text is a hyperlink. Colored text does work well to distinguish section headings, but you should avoid using colors that are too close to the default Web link colors of blue and magenta. You can also add extra spacing around a block of text to isolate it and thereby draw attention to it. This is a subtle but effective technique.
Type size and accessibility

We have all seen Web sites with absurdly large headings (or perhaps with ridiculously small headings). For this reason, many Web designers avoid using the standard heading tags (H1, H2, etc.). However, these tags help give the document structure. You can, of course, adjust the size of the headings to something more harmonious and give your page a more unified look. There is much room for artistic impression when determining the relative sizes of your text and headings. For example, since about the 16th century, typographers have been using a series of 16 typeface sizes (between 6 and 72) that have generally been accepted as both legible and pleasing to the eye. The sizes in this series are related to one another. Many designers prefer to use these old and established type sizes, while others seek to create their own relationships among varying sizes of type on the page. Conforming to accessibility standards has made the prospect of specifying type size more daunting than it has been in the past. If you specify your type size in pixels, for example, the size is absolute. This helps you keep a firm hold on how your text will render in the browser and keeps your page design intact;. but it also prevents, for example, a vision-impaired user from enlarging your text so that it is legible.
NOTE: Cascading Style Sheets (CSS) will be discussed in detail in a later lesson.
To ensure the scalability of text, the designer must use relative units, such as the em unit, to control aspects such as type size, indents, margins and leading. The W3C recommends that you let the user set the base font size in his browser, and that you set all variations using the em unit. Consider the following line of code from a Cascading Style Sheet (CSS):
P { font-family: arial, "lucida console", sans-serif Text-indent: 2em }
In this example code, if the user sets his default font size to 12 points, then a 2-em text indent would be 24 points. If the user changes his default font size to 16 points, then the 2-em indent would change to 32 points to reflect the larger size. Ensuring scalability using a method such as this requires that you use a highly adaptable page layout that will accommodate text of varying sizes.
Version 1.0
9-27
Case Study
Online Art Show

Adalberto wanted a Web site for selling his paintings. He envisioned an online gallery of photos of his paintings, with information about each piece and sales offerings. He contracted a Web developer named Sonja, and they began talking about the design. Sonja explained that the most important factor in the design of this online gallery would be ensuring that high-resolution images of the paintings were available without requiring users to wait for large files to download. Sonja came up with two options. One solution was to create a slideshow of medium-sized images, in which the site visitor could look at one photo at a time and have the option on each page to download a larger version of that photo. The other solution was to create several pages of small, thumbnail photos, each of which the visitor could click to view a larger version of the photo. Sonja and Adalberto decided to use the thumbnail solution in order to minimize the required download time, while maximizing the number of paintings each site visitor would see. * * *
Consider this scenario and answer the following questions: This case study demonstrated two creative solutions to a problem involving image download times. Can you think of other solutions that might also have worked in this scenario? What advantages might there have been to using the first solution offered in this scenario? Would that solution work better for some other type of content or site? What other types of Web sites or pages might face challenges related to image download times? What approaches might work better for different types of sites?
Version 1.0
9-28
Lesson Summary
Application project
Graphic images do more than make your Web site more attractive. They make your site more memorable to users; they reinforce ideas and themes; and they help sell products. Images provide visual information and bring the concepts discussed on your site to life. Good images are critical to a Web site's success. But where can Web developers acquire good images if they cannot create the images themselves? Remember that any content you find posted on the Web images, text, animation, music and so forth is protected by copyright laws that prohibit anyone but the content's creator (or other rightful owner) from using that content without permission. The fact that you are able to copy material from the Web does not mean that you are allowed to use it on your own pages. If you need graphics and cannot create your own, some Web sites offer graphics that you can download and use for free. Note that these sites may impose certain requirements in exchange for use of their work, including credit attribution or restriction to noncommercial use. To locate sites that offer free graphics, visit a graphics site such as www.freegraphics.com, or enter "free graphics" in a search engine. Can you find graphics that are suitable for your own Web site? At each site, scroll to the bottom of the home page and look for a copyright notice. Even though the graphics are offered for free use, they are usually copyrighted by the creator and subject to the creator's terms for use. Were there any requirements you were asked to satisfy in exchange for use of these files?
Skills review
In this lesson, you learned about the importance of Web graphics. You studied the most common formats, along with the advantages and disadvantages of each. You also learned about the differences between raster graphics and vector graphics. Finally, you studied the tools and techniques that Web designers use to create and optimize graphics. Now that you have completed this lesson, you should be able to: 3.3.1: Distinguish between vector and raster graphic types. 3.3.2: Identify and choose appropriate image file formats, including browsercompatibility issues and lowest common denominator in audience usability (e.g., GIF 87a, GIF 89a, JPEG, JPEG 2000, PNG, BMP). 3.3.9: Insert metadata into images to ensure accessibility and to ensure higher page ranking in search engine result pages. 3.3.10: Identify the benefits and drawbacks of using stock photography when developing a site (e.g., license-free vs. licensed stock photos, increase in project speed, reduction in creative control). 4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning). 4.1.5: Identify Scalable Vector Graphics (SVG) characteristics (e.g., XML-based, twodimensional, searchable, scalable, zoom support).
Version 1.0
9-29
Lesson 9 Review
1. Why is file size an important consideration when choosing graphics for your Web site?
2.
Name two common forms or uses for graphic images in a Web site.
3.
What is a pixel?
4.
List at least three image file formats (or corresponding file name extensions).
5.
Name at least two guidelines for optimizing your image files.
Version 1.0
9-30

Version 1.0
9-31
Activity 9-1: Identifying graphic formats and files

In this activity, you will review the graphic files and formats you learned about in this lesson. Write your answers to questions in the spaces provided. 1. You are creating a home page for your new home business, Home-Made-Stuff.com. You want to create a Home-Made-Stuff logo in simple line art with only your two signature colors. You will want to use the graphic repeatedly in various sizes. What type of graphic format is most appropriate for this type of image?
2.
What type of graphics-creation application should you use to create the image file you named in Step 1?
3.
Next, you want to create a catalog for your Home-Made-Stuff.com site. The catalog will feature pictures of the products you sell. You decide that you will scan photographs of the products. What type of graphic format is most appropriate for this type of image?
4.
To show the different colors available for some of your products, you plan to simply use the same image file but change the product's colors in your graphics-editing application. What type of application should you use to edit the image files you named in the previous question?
5.
For the product images on your catalog pages, you need your files to have the greatest possible color depth. You also want to compress the file size as much as possible so you can fit several images on a single page. With which image file format should you save your product catalog images?
Version 1.0
9-32
6.
For your company logo, you placed the company name, Home-Made-Stuff.com, inside a circle. The circle is black with the lettering inside in your company colors. The logo will appear on every page in different sizes. Each page is a different color, and you want the background color of each page to extend to the edge of the logo's circle, rather than having a white square appear around your circular logo. With which image file format should you save your logo images so you can achieve this effect?
7.
You decide that on your home page, you want your logo to look as if it is growing and changing colors. To simulate this motion, you will create a sequence of still frames that will play in a predetermined loop each time the page is accessed, similar to a cartoon flipbook. With which image file format should you save your logo images so you can achieve this effect?
Graphics have many uses on a Web site. In order to use graphic images effectively, you need to understand which graphic formats and file types are most appropriate for which types of images. This activity applied what you have learned about graphics to possible scenarios you might encounter while developing and choosing graphic image files for a Web site.
Optional Lab 9-1: Comparing image file formats

NOTE: You will use an image-editing program only to open files and save them as other formats. Lab instructions may vary depending on the application used. These lab steps were written using Gimp 2.6.8. You will learn to use Adobe Fireworks CS5 to create and edit image files later in the course.
In this optional lab, you will compare the GIF and JPEG file formats by saving an image file in both formats. This lab requires some very basic use of an image-editing application. Write any answers in the spaces provided. 1. Go to the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson09\OptLab_9-1 folder and obtain the file named gimp-2.6.8-i686-setup.exe. Alternatively, you can go to www.gimp.org and download the installation file for the latest version of GIMP. GIMP (GNU Image Manipulation Program) is a free open-source image-editing package. From your supplemental files, open the LabFiles\Lesson09\OptLab_9-1 folder and locate the image baby.jpg. Copy baby.jpg to your Desktop. Image editor: Open the file baby.jpg. You should see an image that resembles Figure OL9-1.
2. 3.
Version 1.0
9-33
NOTE: You can open a file in most imageediting programs by selecting File | Open from the main menu, then browsing to the baby.jpg file on the Desktop.
Figure OL9-1: Image file baby.jpg
4. 5. 6.
Image editor: Select File | Save As. The Save Image dialog box appears. Save Image dialog box: Study this dialog box. The Name field should currently list this image as a JPEG (*.jpg) file format. Save Image dialog box: Display the Select File Type (By Extension) drop-down list and select GIF Image. Notice that when you make this selection, the file name automatically changes to baby.gif. Click Save in the Save Image dialog box. Export File dialog box: You will see an Export File dialog box appear to advise you that you should export your image before you can save it as a GIF because the GIF plug-in can handle only grayscale or indexed images. Click Export in this dialog box to export the image, then click Save to save the file. Image editor: Open baby.jpg so you can look at it side by side with baby.gif. Do the two images look the same? If not, how do they differ? Write your answer in the space provided.
7.
8.
9.
Image editor: Close baby.jpg and baby.gif.
10. Desktop: Click once on the file baby.jpg to select it without opening it. Right-click and select Properties. What is the file size of baby.jpg? Write the file size in kilobytes (KB) in the space provided.
Version 1.0
9-34
11. Desktop: Click once on the file baby.gif to select it. Right-click and select Properties. What is the file size of baby.gif? Write the file size in kilobytes (KB) in the space provided.
12. Desktop: Are the two files the same size? If not, which file is larger in kilobytes (i.e., requires more memory), and why? Write your answer in the space provided.
13. Browser: In your browser, go to www.CIWcertified.com. You should see the CIW home page, as shown in Figure OL9-2.
Figure OL9-2: CIW home page
14. Browser: Place your mouse pointer over the CIW logo in the upper-left corner of the home page. 15. Browser: Right-click and select Save Picture As. Notice that the Save As Type dropdown list offers only two choices this time: bitmap or GIF. Bitmap is this image's native file type and GIF is the format in which it was posted on the Web. Select Bitmap (*.bmp) and save the logo to your Desktop as CIW.bmp. 16. Image editor: Open CIW.bmp in your image-editing program. It should resemble Figure OL9-3.
Version 1.0
9-35
Figure OL9-3: Image file CIW.bmp
17. Image editor: Select File | Save As. Display the Select File Type (By Extension) drop-down list, select GIF Image and save the logo to your Desktop as CIW.gif. Close the file and the image-editing program. 18. Desktop: Click once on the file CIW.bmp to select it. Right-click and select Properties. What is the file size of CIW.bmp? Write the file size in kilobytes (KB) in the space provided.
19. Desktop: Click once on the file CIW.gif to select it. Right-click and select Properties. What is the file size of CIW.gif? Write the file size in kilobytes (KB) in the space provided.
20. Desktop: Is CIW.gif the same file size as CIW.bmp? How do these two files compare? Can you explain this? Write your answer in the space provided.
As you can see, the file format you use to save your Web graphics can affect the size of the image file and, ultimately, the amount of time required to download your Web pages. Be sure to choose the most appropriate file format for your images, and always optimize them accordingly.
Version 1.0
9-36
Lesson 9 Quiz
1. Images are essential in Web site design because users expect a visually pleasing experience. Good Web graphics must be: a. b. c. d. 2. aesthetically pleasing, regardless of file size. either relevant to the site's purpose or aesthetically pleasing. small in file size, regardless of aesthetics. aesthetically pleasing, relevant to the site's purpose, and small in file size.
Screen resolution is dependent upon which of the following? a. b. c. d. The The The The number of pixels present in a monitor's height and width file sizes of graphics on a page viewed in the monitor bandwidth available to download the pages viewed onscreen bit value (or color depth) provided by each pixel
3.
Which of the following accurately describes a difference between raster and vector graphics? a. b. c. d. A raster graphic can be increased in scale without increasing file size, whereas a vector graphic cannot. Vector graphics are best suited for photos and drop-shadow effects, whereas raster graphics are best suited for line art and illustrations. Raster graphics use individual values for each color displayed, whereas vector graphics use mathematical calculations. Vector graphics are dependent on resolution, whereas raster graphics are not.
4.
You are creating a graphic image for your Web Design Professionals site. Most of your users are Internet professionals with high-speed connections so download time is not an issue, but you want to achieve the greatest color depth possible. Which image file format should you use? a. b. c. d. TIFF JPEG GIF GIF 89a
5.
Which image file format supports transparency, compression and high bit depth, but is not yet widely supported by browsers? a. b. c. d. JPEG PNG GIF BMP
Version 1.0
10Lesson 10: Multimedia and the Web

Objectives
By the end of this lesson, you will be able to: 1.3.2: Use Web content (e.g., text, graphics, code) properly, including original content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement. 2.2.5: Identify purpose and usefulness of multimedia. 2.2.9: Identify audience and end-user capabilities (e.g., lowest common denominator in usability). 4.1.1: Identify multimedia Web design principles, and choose appropriate multimedia technologies for a site based on usability criteria. 4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning).
10-2
1. What are the three main types of multimedia?
2.
What two major factors currently inhibit rapid technology adoption?
3.
Which question is most important to answer before you begin planning a multimedia Web site? a. b. c. d. What do you want users to do at the site? Which multimedia is most recent and exciting? How can multimedia make the site more entertaining? How much multimedia will fit on the site without disabling the server?
Version 1.0
Lesson 10: Multimedia and the Web
10-3
Multimedia and Web Sites

Planning is the key to successful creation of a multimedia Web site. Although multimedia has existed for some time, applying it on the Web is not an exact science. Multimedia on the Web is made possible with various tools and technologies that are not always compatible. In this lesson, you will learn how to effectively plan a multimedia Web site.
OBJECTIVE 4.1.1: Multimedia Web design principles
Multimedia is gaining popularity on the Web because advances in Internet technology now allow developers to mix different media objects in Web pages. Multimedia such as animation, audio and video can supplement bland text or two-dimensional graphics, as well as complement the visual design, tone and message of a Web site. However, multimedia technologies also present great challenges to Web developers. Predicting how they will react and display on various platforms and in different browsers requires planning, patience, and lots of trial and error. Further, the appeal of using complex technologies can sometimes overshadow the goals of a site, and even discourage or exclude some audience members from using it.
NOTE: Not every Web site uses multimedia. Do you think that a site must use multimedia to keep up or compete with other Web sites?
Current Multimedia Capabilities

NOTE: Although several higher-bandwidth options (e.g., cable modem and DSL) are now widely available to recreational Web users, you must still consider the lowest common denominator in your audience dial-up connections are still used by a small percentage of the population. Multimedia use must be considered during the site planning stages because the multimedia you choose may affect layout and navigation. Multimedia cannot usually be added as an afterthought or mere ornamentation.
The current capabilities of multimedia on the Web are astounding. For a Web designer, it is tempting to utilize these tools and technologies. However, today's designers are limited by two major factors that inhibit rapid technology adoption: bandwidth and browser support technology. To enjoy the full effect of many new technologies, a high bandwidth connection is usually required, as well as browser plug-in support or other third-party applications. Therefore, Web designers should have a thorough understanding of the site's target audience before using the latest and most dazzling technology, because a user on a dialup connection with a standard browser cannot support it. This limitation does not mean that you cannot use new technology, but you must be aware that you may exclude some of your audience. A balance in discipline is required to use the technology against the functionality of the site. If your defined audience will be able to support the technology and you are not concerned about users on dial-up, then use any technology that enhances the site.
Time factor
The Web has created a new paradigm by allowing users to change their minds and choose new sources with no consequence. For example, when a person subscribes to a magazine or purchases a book, he or she becomes a captive audience. The person has a vested interest in the magazine or book (the cost) and is therefore more likely to spend time reading it rather than purchase a different one. By contrast, the Web requires no vested interest on the part of the visitor. Users are therefore more likely to change their minds and visit different sites. However, Web users do make an investment: their time. It is difficult to assign a value to the time spent by the average Web user; but from a design point of view, this user's time is valuable. Mere seconds can determine whether you keep or lose visitors. The correct choice of multimedia will help conserve your visitors' time, increasing the chances of longer visits and potential business.
NOTE: Web developers must work harder to capture and keep audience interest. This is why planning and design are so important.
Version 1.0
10-4
Animation and the Web

NOTE: Do you think that animation contributes anything more than entertainment value to a Web site? Can you cite any examples you have seen on the Web?
Animation is an important component that distinguishes the Web from other media (except television). Levels of animation can range from simple animated GIF images to 3D renderings and virtual environments. It allows for the sense of movement and engagement on the part of the user. Sometimes it is used to attract attention, and other times to illustrate a concept. Whatever the use, meaningful design and implementation will allow the benefits of animation to enhance the presence of the site rather than distract from it. Like other types of multimedia, animation poses some specific accessibility issues for Web users with sight or hearing disabilities or specialized software. If you include animation in your site, you should provide alternative content to maximize accessibility for all users. Images in Web pages should always include the alt attribute to specify descriptive alternative text. Short animations that can be described in a few words can also use the alt attribute this way. For longer animations, however, you must take additional steps to ensure accessibility. For example, if you create an animation that shows the way to fold a shirt, you might also provide step-by-step written instructions. By providing text descriptions of an animation file's content, you ensure that your site visitors who use text readers will be able to use the content. If your animation includes narration, you can include captioning to make the content accessible to users with hearing disabilities. The most common types of basic animation are animated GIFs, rollovers and Flash files. Some other types of animation have proved unpopular or have not gained widespread support, and are best avoided.
NOTE: You will have the opportunity to create animated GIF files later in this course.
Animated GIFs
As previously discussed, an animated GIF is a compilation of still images that is set into motion at a designated sequence, speed and repetition. Many banner ads are animated GIFs. An animated GIF can be very effective for displaying additional information in the same area of the screen. It can also attract the user's attention, and it adds motion to a normally static page.
NOTE: You will have the opportunity to create rollover elements later in this course.
Rollovers
Rollovers are actions that are triggered by passing the mouse pointer over designated areas of the Web page. Rollovers are commonly used with navigation elements. They engage the user by creating a reaction to user actions (called events), and they also indicate that the object is a hyperlink. This practice deviates from the basic default hypertext link that is blue and underlined, but it has become an acceptable alternative. Using this type of navigation means that users will not have the benefit of a color indicator for a visited hyperlink. However, with effective use of other navigational aids and indicators, the user should notice little difference.
NOTE: You will have the opportunity to create Flash files later in this course.
Flash files
Adobe Flash is now considered to be the de facto standard for animation in Web design. Flash introduced a new form of animation that was previously not possible: It offers media-rich content while conserving bandwidth. You will learn more about and work with Flash files later in this course. The latest versions of Flash and the Flash Player include features for making Flash content accessible to a wider audience. These new features include support for screen
Version 1.0
10-5
readers as well as the ability to create text equivalents of images. Visit www.adobe.com/accessibility/products/flash/best_practices.html to learn more about Flash and accessibility.
Microsoft Silverlight
Microsoft Silverlight is a competitor to Adobe Flash. Silverlight is a browser plug-in that enables rich Internet application features such as animation, vector graphics and audiovideo playback. It is compatible with Internet Explorer, Firefox, Apple Safari and Google Chrome running on Windows and OSX platforms. Designers and developers can create content for Silverlight using Microsoft Expression Blend version 2 or Microsoft Visual Studio 2008.
NOTE: This point is important. Newer Web developers may be eager to add animated elements to a Web page, but no animation at all is better than animation that has proved unpopular.
To learn more about Silverlight, visit www.silverlight.net. You can also visit the Microsoft Silverlight For Developers site at http://msdn.microsoft.com/en-us/bb187358.aspx.
Animation to avoid
One type of animation that has proved to annoy users is scrolling text, whether used in Java applets, marquees or the browser status bar. Critical information should not scroll because the user will probably pay little attention to it.
Audio and the Web

Audio differs from other Web content in that it does not rely on the display for the user to experience the media. The constraints of monitor size, operating system and color bit depth do not apply. Audio can now be delivered in two distinct ways. The user can download the entire audio file and then begin the playback process, or the audio file can be delivered in streaming format. The playback quality of any sound recording is dependent on the process and formats used to create the digital file, and the quality of the output devices on the users' systems.
NOTE: Do you think that audio files contribute anything more than entertainment value to a Web site? Can you cite any examples you have browsed on the Web?
Downloaded audio
The first appearance of audio on the Web was downloaded files. A file could be embedded into an HTML page and downloaded with other files, such as images. After the audio file was downloaded, the playback began. As you can imagine, the larger the audio file, the more time required to download it. In contrast to images, audio files require much more memory to store and play. Thus, sound files take significantly longer to download compared to their relatively short playback length. This tradeoff is usually not acceptable to the user and becomes an annoyance.
MPEG-1 Audio Layer-3 (MP3) Popular compression standard for audio files; retains most of the sound quality of the source.
Moving Picture Experts Group (MPEG) Audio Layer-3 (or MP3) is currently the most popular format for storing and delivering audio on the Web. Although it is a lossy compression format, MP3 is capable of reducing an audio file's size by up to 12 times, yet retains almost the same fidelity with little or no noticeable difference to the average listener. For example, a 48-MB uncompressed audio file can be reduced to about 4 MB using the MP3 format. MP3 files are usually downloaded, although streaming MP3 is possible. To listen to an MP3 file, you must have an MP3 player (Windows XP/Vista/7 have built-in MP3 players). Many MP3 players are available as shareware and freeware on the Web. Any time a developer creates an application that uses the MP3 format, he or she must pay a license fee to use this format.
Version 1.0
10-6
Table 10-1 lists common audio file types and their corresponding file name extensions.
Table 10-1: Audio file types
NOTE: How many of these file types are familiar to you?
File Name Extension .aiff .au .mid .mov .mp3 .swf .wav
File Type
Macintosh native format UNIX native format MIDI format; produces small files size by creating music algorithms QuickTime Movie format; supports both audio and video MPEG Audio Layer-3 (MP3) encoding Shockwave/Flash format Windows native format
NOTE: Again, newer Web developers may be eager to add audio to a Web page, but no audio at all is better than embedded audio, which has proved unpopular because it does not offer users a choice. Note that the audio accompanying Flash files is an exception to this guideline because it does offer users choice and control.
Embedded audio
Embedded audio differs from other audio formats in that it does not allow the user the option to download (or more importantly, to not download). Unless it is an integral and necessary component to the site, do not embed audio; instead, allow the user to choose whether to download and listen. Currently, the only acceptable form of embedded audio used on the Web is Flash files. Flash files have the ability to specifically control audio playback and timing. In addition, Flash applies compression to audio that immensely reduces file size and streams it to the user, which decreases download time. Keep in mind that the term "embedded audio" only refers to the way the audio is offered. If you supply an audio file in a Web page in a way that it automatically downloads and starts playing when the page is accessed, then the audio is considered embedded. The more common (and more user-friendly) way to use audio is to make the audio file available for the user to download by linking to it if the user chooses to do so.
Streaming audio
NOTE: Be sure that you understand the distinction between downloadable audio and streaming audio.
Streaming audio differs from downloaded audio files in that the user does not wait to hear the file. As soon as the connection is made to the streaming audio server, a small buffer is created and the audio file begins to play. Consider a 10-MB sound file. Downloading it over a dial-up connection would be prohibitive. In streaming format, the file would play while it is downloading, decreasing delivery wait time to the user. Livecasts demonstrate the benefit of streaming technology. Listening to a one-hour livecast that is streamed live to the user can be compared to listening to a live radio broadcast. Audio formats that have the ability to stream include RealNetworks RealAudio files, Apple QuickTime files and Microsoft Windows Media Audio files. Although streaming MP3 is possible, MP3 audio files are usually downloaded.
Version 1.0
10-7
Video and the Web

NOTE: Do you think that video files contribute anything more than entertainment value to a Web site? Can you cite any examples you have browsed on the Web?
Video for the Web is another evolving technology that will eventually become as common as static images. However, the video currently available to users via dial-up connections is often considered low quality. A visit to any major news site offers examples of current video files played using the RealNetworks RealPlayer, Windows Media Player, Apple QuickTime and other less common applications. This type of video typically provides low resolution, slow frame rates, small dimensions and pixilated images (in which the square pixels of color are visible). Nonetheless, it is generally viewable and understandable. Like audio, video can be either downloaded and then played, or streamed down to the user using a streaming server and player application. Options for video usage increase with high-bandwidth connections. Video conferencing, Webcasts and Web cameras use the Internet as a transport vehicle. Video on the Web should never be mandatory for anyone outside of a network such as a LAN or an intranet. You should provide links along with file types and sizes to give users the option to proceed. For video longer than a few minutes, you should offer the option to stream the file to help conserve bandwidth and download time.
Internet TV
NOTE: Have you or anyone you know used an Internet TV service.?
Internet TV has not yet evolved into a solid, universally accepted means of connecting people to the Internet, but most experts believe it will. In fact, Microsoft acquired this technology, formerly called WebTV, as part of its strategy to increase Internet usefulness to the consumer. The controlling device is similar to a cable box and connects to the Internet through a high-speed line. To use Internet TV, the user needs only a phone line to connect his or her television to the Internet. When connected, users can perform almost all the same functions that computer-using Internet surfers can perform. They can visit a site, see all the latest graphics, experiment with interactivity, survey available products, and buy directly from the site much as they would online or through a home shopping club. Companies such as Sony, Philips Magnavox and Microsoft Network have incorporated this technology in conjunction with WebTV Networks to form MSN TV (www.msntv.com/pc/). The possibilities for Internet TV technology are impressive. Imagine the increased number of potential customers your site might reach. Bandwidth and slow-connection constraints on multimedia content are not as restrictive with Internet TV as they are with a 56-Kbps modem.
NOTE: MSN TV technology does not require computer knowledge; therefore it provides a useful option for people who want to send e-mail messages and browse the Web without learning computer use.
Goals of a Multimedia Site

NOTE: Remember that the goal with multimedia, as with other aspects of Web design, is ultimately the content.
Multimedia provides so much content depth and so many ways to present information that its intent can be unclear. Early in multimedia development, Web professionals were so excited by its tools that they forgot the greater importance of content. It is important to clarify the goals of your multimedia Web site before you create the first page or animation sequence. Ask yourself these questions before you get started:
Version 1.0
10-8
Who is your audience and what is your message? How will the setting or interface look? Which multimedia elements fit into the interface and complement your message? What types of tools and expertise do you need to create the multimedia elements and author the Web site?
Ultimately, the over-reaching question is this:

NOTE: The most important question to consider is what you want users to do when they visit your site. Purpose and function are the utmost goals of content.
What do you want users to do when they visit your site? Do you want them to browse? Do you want them to explore? Buy? Research? Sign up for your newsletter?
Consider these sample outcome statements: Users will be encouraged to complete a survey or sign a guest book upon entering or before leaving the site. This data will be collected and incorporated into the company mailing list(s) or followed up by sales associates. Users will purchase or request purchasing information about the products listed by responding via e-mail, calling a toll-free number or submitting an interactive form. Users will subscribe to our newsletter.
Multimedia Site Design Basics

NOTE: Consider user expectations. Do users expect multimedia on all Web sites, or just certain types of sites?
Multimedia Web site designers must present elements onscreen so the users' expectations are met. Coordinating expectation and function is not an easy task, and must be planned in advance by the development team. Issues to be addressed include the following: What is the navigational structure of the Web site? Will frames be used? What is your target audience's viewing capability? With what speed are Internet users connecting? Which operating systems are they using? Will a text-only or low-resolution graphic version of the site be provided? How will users access it? Are necessary plug-ins readily and easily available? Where on the page will you place the link to the plug-in? Will you provide the plug-in on your site or will the user click to go to another Web site? How will the user return to your site?
NOTE: You can apply these important design questions to public Web sites in Optional Lab 10-1: Evaluating multimedia site design principles.
Scene and setting

Multimedia Web site design is more than just random placement of text, graphics and multimedia. Consider the following excerpt from David Siegel's best-selling book, Creating Killer Web Sites: Site designers carefully specify the position and relationships of all elements on the page, retaining fine control of the layout. Sites use metaphor and visual theme to entice and guide, creating a whole experience for surfers from the first splash screen to the exit.
Version 1.0
10-9
NOTE: Although this passage makes design sound like a very large task, the goals of a mental model, and consistency of style and function, can actually help focus one's design efforts. Focus can reduce the amount of work required, after some decisions are made.
In other words, multimedia Web site design focuses on providing the proper mental model to which users can relate and interact. Even as the content changes, your style and function remain the same, especially if you expect return visitors. Contrary to some beliefs, most people do not want to have to relearn your content arrangement each time they visit. Much can be said in favor of consistency.
User Interaction
Web professionals can deliver content through a number of acceptable models. The most successful seems to be the "spiral" concept and its three elements: interest, activity and resolution. Each element is encountered in succession until the user's experience is completed or the Web site's navigable channels have been explored. For example, a "How To" Web site might attract the user with its intriguing original graphics (interest), provide menu options (activity), and lead the user to the desired goal (resolution). Remember that the more focused the user's experience with your Web site content is, the more enjoyment he or she will have, and the greater the likelihood that he or she will return. For example, you may have lost track of time while "surfing" the Web. Users surfing top-quality Web sites are frequently unaware that time is passing and are in a state of complete engagement during this heightened level of experience. This state of mind on your prospective customer's part is likely to have a desirable outcome on his or her purchasing behavior. One of the Web professional's objectives, then, is to create a user experience that elevates the potential customer into the heightened state. Psychological research has concluded that people achieve this state when they:
NOTE: What other activities do you participate in that bring you to the state of complete engagement described here? Working? Shopping? Driving? Playing sports? Watching TV? Consider some of these activities. What similarities do they share with Web browsing? What characteristics of these activities could possibly be incorporated into a Web site?
Concentrate. Are challenged. Are focused. Lose self-consciousness. Lose sense of time.
Thus, to help your user achieve this frame of mind, you must provide a Web site that supports these characteristics. An effective example is the Disney site (http://disney.go.com), which takes the user into an immediate state of heightened interest. The graphics and content intrigue sufficiently to encourage the user to start exploring. After this interactivity has begun, the user is quickly transported to a heightened interactivity phase. The Web graphics become more sophisticated, and the options for sound and video inspire more intrigue. With each click of a navigation button, the user is rewarded with additional content. This content model is important for any business: training, human resources, sales and marketing, or any other area. A more business-related Web site might use less excitement and more conservative media for rapid content dissemination and delivery, such as well-written text to generate excitement and interest about the product or service. An exciting, non-standard image can intrigue the user and draw him or her to your online business presence.
Version 1.0
10-10
Selecting Multimedia Elements

The most daunting task for the multimedia Web page designer is to manage screen space and select the most effective format for the media elements. The number of file formats from which to choose has grown exponentially for both of the dominant browsers (Firefox and Internet Explorer), as has the number of plug-ins available for use with each. Designers must perform careful research to discover the most widely used plug-ins for their audiences. Web designers must plan their sites for users who do not have the necessary plug-ins. Rather than accepting a limited audience, you can provide links or instructions to help users find and install the plug-ins your site requires. Also consider how the multimedia you use in your site affects accessibility for Web users with disabilities or specialized software. Many multimedia formats now provide support for text readers and captioning. If these capabilities are not supported by a format that you use on your site, the best practice is to provide alternative content in a more accessible format (such as plaintext).
Function and purpose

NOTE: The most important aspect in choosing multimedia elements for a site always comes back to function and purpose.
As you think about which file format to use, consider the many technical aspects of each multimedia element. For example, ask yourself if Flash files are important to the Web site or if you want to add them merely because you can. Similarly, there are good reasons to use a Java applet or JavaScript pop-up window. A good Web designer will create content and graphical design to satisfy user expectations about the interface. Rollovers (i.e., mouseover effects) can provide interaction and feedback. Designers need to consider that some software applications, such as Adobe Director and Flash, have offered cross-platform availability for some time but others have not. Figure 10-1 shows relationships between file size and several multimedia formats. This model is useful for determining which multimedia formats to use. Note that you can achieve the same results with various file formats.
Smaller file size Less bandwidth required Shorter download time Larger file size More bandwidth required Longer download time
NOTE: Remember that file size is an extremely important consideration when choosing multimedia. Even the most exciting content will not receive much attention if the site that delivers it is prohibitively timeconsuming to use. This is true even with users on broadband they have come to expect almost immediate results. If the server is slow in delivering multimedia, it can create a negative experience for the user.
Static GIF JPEG
Animated GIF PNG Acrobat
Shockwave RealAudio Java
Video
Figure 10-1: Relationships between file size and media format
The best Web designers have some programming knowledge and understand how to implement some multimedia elements. Non-designing programmers should learn the rudiments of design or consult a design professional for assistance. Web professionals must consider their site's purpose, the tools they have, and the resources they know best. They must also try to determine what percentage of the intended audience has Javaenabled browsers or the willingness to download a plug-in.
Version 1.0
10-11
OBJECTIVE 2.2.5: Multimedia purpose NOTE: Although many multimedia design applications are easy to learn and use, they all still require an investment in time, even for simple projects.
Multimedia authoring
Each multimedia application can be an exciting new tool that helps you construct robust multimedia elements and, ultimately, your Web site. Because each application has its own characteristics, each must be carefully selected to maximize the viewing potential. The size of your design team will determine how many roles you must play yourself and how many other professionals, such as graphic artists, you must involve. In the design phase, you must understand the strengths and weaknesses of the new multimedia opportunities. Given the considerable time and money required to learn the new technologies, Web design must be given proper attention and not treated as a minor "additional duty" for someone who is already overloaded. Many corporations are rethinking their overall information strategies. Content areas must be transmitted successfully to the consumer. Electronic-commerce strategy, and interoperability between different operating systems and hardware platforms, must be addressed by the Web professional. Designing, implementing and maintaining a Web site that can deliver content with advanced multimedia capabilities and state-of-the-art interactivity is easier than it was in the past. New applications are constantly introduced to put bigger and better multimedia on the Web. In the current developmental stage, no multimedia standard is agreed upon to which every Internet application developer can work. The challenge in building multimedia-rich Web sites is in deciding which methods, resources and tools are necessary for successful deployment. With the growth in consumer interest and online buying activity, your question becomes this: How can my company best use its knowledge of Web interactive programs and multimedia content to successfully reach customers before the competition does? This business question differs from the traditional only in its emphasis on Web technology. Like a magazine cover on a magazine rack, a Web page gives its author only a few seconds to convince the reader that the information inside is of interest. The page's "look and feel" (its overall impression of appearance and functionality) is an important tool in this effort. Graphics play an important part in your user's experience. For this reason, interesting graphics are important at this level of Web development. The first page of your site must also display exact pathways for the user to gather information; this navigability should also help users in an intuitive way.
NOTE: You will learn to use several select development tools and applications in this course. The goal is not to make you an expert user of any of these tools, but rather to introduce you to available tools and provide a basis for deciding which ones to study further.
NOTE: The term "look and feel" describes the overall impression of appearance and functionality conveyed by a Web page, book or other medium.
Copyright infringement
OBJECTIVE 1.3.2: Proper content usage
Although users can view and retrieve source code for just about anything on the Web, inappropriate use of other people's work is illegal. As the Web develops and programs are invented to track site visitors, anonymity will decrease. Remember that it is illegal under copyright law to use any published Internet material (text, art, music, code, etc.) without permission from its creator or owner. To avoid legal penalties, all Web designers should opt for a conservative interpretation of intellectual property issues.
Recall the discussions about copyright infringement from the lesson about Web graphics. A conservative interpretation of intellectual property issues is as follows: If you did not create it, you probably should not use it on your site. However, remember that many services some free offer Web content that you can use on a Web site with some restrictions, often a required attribution or limitation to only personal (non-commercial) sites.
Version 1.0
10-12
Java vs. plug-in

NOTE: You will have opportunities to work with both Java applets and plug-ins in this course. However, you should understand the technical considerations discussed here before making decisions about using either element in a Web site.
A Web designer must also think in terms of choosing between, for example, a plug-in architecture that requires the user to perform a one-time download, or a Java applet, which currently requires the user to download the Java files for every playback. For many, this design selection is critical. You will learn more about Java applets later in this course. Since Java was released, a serious debate has ensued over whether plug-ins or Java applets are superior. Many prefer the wisdom of sending both content and the necessary engine to drive it across the bandwidth (as is the case with Java applets) rather than just sending the content itself. Many also feel that a few security problems remain with Java. Others say that many of the virtues attributed to Java come not from the language but from the environment in which it runs. The converse is also true: Many of its drawbacks come from the environment as well. However, the Web designer has little control over the user's environment.
Visualize and understand the user

OBJECTIVE 2.2.9: Audience and end-user capabilities
First, create a mental picture of your Web site user. If you really know who your users are, you should have a good sense of the hardware, software and browsers they use. How big are their monitors: 15 inches or 21 inches? What kind of graphics accelerator cards do they have? Which type of memory do they have and how much? A video card's primary duty is to hold onto a picture to allow the monitor to display it. So the more RAM your users' video cards have, the larger graphics they can handle, in terms of both numbers of colors and pixels. A single 640x480 256-color graphic demands more than 300 KB of memory. For your users to see your image in true color demands at least 2 MB. So for whom do you design your Web site? The user with the best and most equipment? The least equipment? Or somewhere in between?
NOTE: You should understand that your audience members will be determined by the type of content your site offers. Different users will be more attracted to a hightech Web design firm's site, for example, than to a literary review site, an online cookie business, or a children's cartoon camp.
Performance
You can create smaller, more compressed graphics, animation, video and audio with applications specifically designed for online usage. These applications allow you to apply a number of graphic optimization processes to still image and movie files. The end result of simple compression is smaller files with little or no loss of quality. Another option is to store the multimedia files locally, while keeping the logic (or code) on the Internet or intranet. Some multimedia-authoring programs, such as SumTotal Toolbook, Adobe Authorware 7 and Adobe Director 11.5, allow you to call multimedia files from a local source (such as a network or CD-ROM).
Version 1.0
10-13
Case Study
No Day at the Fair

As the new marketing manager for the annual state fair, Franck was responsible for working with a design team to create a new Web site. The existing state fair site was simple but functional. In other words, Franck thought, totally boring. He reviewed the market research collected by his predecessor a couple years earlier, which concluded that fair visitors in general were not technologically savvy or affluent. But surely that had changed by now. It was time to create the best state fair Web site ever. Franck envisioned a Web site that was as exciting as the state fair itself neon text everywhere, animation and audio clips playing, everything constantly in motion. He wanted Web site visitors to get a taste of the fair experience so that they would rush to the fairgrounds for more. Franck instructed the Web design team to use only the latest and greatest technologies, advising them that money was not an issue. Within a week of the Web site's launch, the state fair's customer service representatives were overwhelmed with complaints and questions about the new site. The volume of e-mail doubled, with site visitors asking for simple information that was already posted on the site. A few people wrote to Franck and complimented him on the exciting new site, but the site's traffic declined. * * *
Consider this scenario and answer the following questions. Franck encountered a common pitfall in designing this Web site. What should he have done before deciding on a multimedia-intensive site? What are some ways that Franck could have used multimedia appropriately and made the site engaging without turning away visitors? Is Franck solely to blame for the decline in traffic after the launch of the redesigned site? This scenario does not specify any measures that might have been taken to accommodate users with disabilities or computer limitations. If you were designing the site, how would you make sure that it is accessible to the widest possible audience?
Version 1.0
10-14
Lesson Summary
Application project
Visual design can entice users to stay and interact. How will you now use multimedia and Internet technology to help add value to your Web sites? If you are planning to use an abundance of multimedia on a Web site, consider this question: If your screen is filled with visual elements of all kinds, how will users distinguish hotspots, key content or navigation components from the rest of the screen?
Skills review
In this lesson, you learned about types of and current trends in multimedia. You studied the use of animation, audio and video. You considered the challenges to accessibility that multimedia poses. You also studied multimedia in relation to basic Web site design principles. You should now be able to choose which technologies make the most sense for your business's Web presence.
NOTE: You can review multimedia types and terms in Activity 10-1: Identifying multimedia elements.
Now that you have completed this lesson, you should be able to: 1.3.2: Use Web content (e.g., text, graphics, code) properly, including original content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement. 2.2.5: Identify purpose and usefulness of multimedia. 2.2.9: Identify audience and end-user capabilities (e.g., lowest common denominator in usability). 4.1.1: Identify multimedia Web design principles, and choose appropriate multimedia technologies for a site based on usability criteria. 4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning).
Version 1.0
10-15
Lesson 10 Review
1. What factors should a Web designer consider when choosing multimedia for a Web site?
2.
What investment do Web users make in a Web site, and how does this involve the use of multimedia?
3.
Which type of animation multimedia are Web designers advised to avoid, and why?
4.
Name at least two audio file formats (or their corresponding file name extensions).
5.
Briefly describe the process used for streaming video.
Version 1.0
10-16

Version 1.0
10-17
Activity 10-1: Identifying multimedia elements

In this activity, you will identify various multimedia elements that you studied in this lesson. Follow instructions for each step to circle or match words, or fill in the blanks. Indicate your answers in writing for each step. 1. Which of the following Web site elements are considered multimedia elements? Circle each answer that applies. Graphic image Music Colored text Rollover Button 2. Animated text Video Hyperlink Keyword search User-triggered sound effects
What type of multimedia is this file format? For each file format given, specify the multimedia type as Audio, Video or Animation. Some file formats may incorporate more than one of these multimedia formats. .wav __________________________________________________ .mov __________________________________________________ .mid ___________________________________________________ .swf ___________________________________________________ .mp3 __________________________________________________
3. 4. 5. 6. 7.
(Fill in the blank.) One type of animation to avoid is ___________________ because it has proved unpopular with users. (Fill in the blank.) Audio can be delivered either as a ___________________ file or in ___________________ format. (Fill in the blank.) Currently, the one acceptable type of embedded audio is ___________________. (Fill in the blank.) Some multimedia file types may require the user to have ___________________ installed in the browser. (Fill in the blank.) A term commonly used to describe the overall impression of appearance and functionality conveyed by a Web page is ___________________
Version 1.0
10-18
Optional Lab 10-1: Evaluating multimedia site design principles

This lesson listed several questions that developers should ask when planning the design of a multimedia Web site. In this optional lab, you will apply these questions to a public Web site and evaluate the site's use of multimedia site design principles. Questions are open-ended to promote thought and may not necessarily have "correct" answers. 1. Browser: In the Address field, enter www.atlantis.com/default.aspx. You should see the Atlantis Resort home page, similar to Figure OL10-1.
Figure OL10-1: Atlantis resort home page
2.
Atlantis.com: If your browser already has the Flash plug-in and you can see the animation on the home page, skip to Step 5. If you do not have the Flash Player plug-in, then this page will display a link to download the Flash Player so you can use this site. If you see this option, then click the link to download Flash. Adobe Flash Player page: This link accesses the Adobe Flash Player page, where you can download the free Flash Player plug-in. Click the Agree And Install Now button for Adobe Flash Player. Adobe Flash Player page: The plug-in is installed automatically in your browser. After installation is complete, redisplay the Atlantis.com page. You should now be able to see the animated Atlantis home page. Atlantis.com: At the top of the page, click the Photos & Videos link, and then click the Marine Life link. Pass your mouse pointer over the thumbnail images that appear below the main image in the center of the screen. Notice that each thumbnail image displays as a hyperlink when you position the mouse pointer on it. Click a thumbnail to view it as the main image on the page.
3.
4.
5.
Version 1.0
10-19
6.
Atlantis.com: Spend a few minutes exploring this site independently. Then, consider the following questions posed in this lesson that developers must ask when they are planning a multimedia site design. Write your answers in the spaces provided. Who is the audience and what is the message? Does this site seem to be welldesigned for the target audience? Does it serve its purpose in conveying the information a user would visit to look for?
7.
8.
Which multimedia elements fit into the interface and complement the message?
9.
What types of tools and expertise were needed to create the multimedia elements and author this Web site?
10. What do the site developers want users to do when they visit this site? Is the Atlantis site designed effectively to accomplish this goal?
11. What is the navigational structure of the Web site?
Version 1.0
10-20
12. Is this site designed with the target audience's viewing capability in mind? What site features make this evident?
13. Is a text-only or low-resolution graphic mirror site provided? How will users access it?
14. Is this site accessible to users with disabilities and/or specialized software? In what ways? What alternative content is offered for greater accessibility?
15. What is your overall impression of this multimedia site design? Does it use multimedia effectively and appropriately? What elements might you replicate in your own design? What elements might you improve upon? Do you think this site is capable of bringing users to the heightened state of complete engagement discussed in this lesson? Why or why not?
A multimedia Web site must be well planned and executed to make the site truly effective rather than just flashy or overwhelming. Studying the multimedia design plans that other sites use can help you design your own multimedia site from a user's perspective.
Version 1.0
10-21
Lesson 10 Quiz
1. What two major factors that inhibit rapid technology adoption also limit today's Web designers' use of multimedia? a. b. c. d. 2. Designer qualifications and software availability Internet information delivery and user system RAM Bandwidth and browser support technology Technology training and browser upgrades
Which of the following multimedia technology types is commonly delivered in GIFs, rollovers and Flash files? a. b. c. d. Audio Video Animation Streaming capability
3.
In what two distinct ways can audio files be delivered? a. b. c. d. Digital or analog With or without video Downloaded or streaming Through browser or plug-in
4.
Which of the following can increase user accessibility of a multimedia Web site that uses animation? a. b. c. d. Captioning Java applets Scrolling text Streaming audio
5.
When determining what types of multimedia to use in a Web site (or whether to use multimedia at all), you must first be sure that you understand: a. b. c. d. your site's audience and purpose. your computer's bandwidth limitations. the application you will use to create the multimedia. the development team's requirements for executing the design.
Version 1.0
10-22
Version 1.0
11Lesson 11: Ethical and Legal Issues in Web Development

Objectives
By the end of this lesson, you will be able to: 1.3.1: Define ethics, and distinguish between legal and ethical issues. 1.3.2: Use Web content (e.g., text, graphics, code) properly, including original content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement. 1.3.4: Use strategies to avoid violating end-user privacy and trust (e.g., refusing to share or sell end-user information, opt-in/opt-out for mailing lists). 1.3.5: Develop privacy disclaimers appropriate to site purpose and audience. 1.3.6: Identify international legal issues, including fair use, trademarks, contracts.
11-2
1. What is the difference between legal conduct and ethical conduct?
2.
Which of the following is an illegal act, rather than an unethical act, in the Web development profession? a. b. c. d. Passing along chain e-mail messages Buying domain names you do not intend to use Copying an image from a Web site and publishing it without permission Inflating the prices you charge customers for your technological services
3.
Which of the following does a copyright protect? a. b. c. d. The right to practice unpopular forms of communication such as spam Original works of authorship such as writing, art, music or program code Names, phrases, pictures or drawings that a company uses to distinguish itself from the competition The right to quote or refer to someone else's intellectual property if you provide source attribution
Version 1.0
Lesson 11: Ethical and Legal Issues in Web Development
11-3
Ethics and Law in Web Development

NOTE: Be sure you understand the differences between illegal and unethical practices.
As trained professionals who provide services to customers, Web developers must be familiar with the ethical issues and laws that pertain to businesses operating on the Web. Currently, many laws related to Web businesses and practices are not completely clear; others are evolving each day as court cases and legislation are addressed and settled. However, the law is only a baseline for the conduct you should observe some practices may currently be legal, but the lack of a forbidding law does not necessarily make them acceptable. The Web (and business in general) has many accepted professional standards of conduct that all Web developers should follow, called ethics. Ethics deal with good versus bad: values, moral duty and obligation. Some practices that are still legal are considered unethical by professional standards. As a professional Web developer, you have a responsibility to your customers to inform them of practices that are questionable or illegal in relation to their projects. You should also make decisions and conduct your own business in ways that will reflect well upon you, upon Web developers in general, and upon CIW-trained Web designers.
NOTE: Do you recall any news stories you have heard involving illegal or unethical Web practices?
Ethical Issues and the Web

OBJECTIVE 1.3.1: Ethics, legal vs. ethical issues
Ethics are a set of standards governing the conduct of members of a profession. Ethics establish basic values for responsible actions and practices within a professional community. Although there may be no punishment for violating ethical standards, some practices (such as spamming and sending viruses) are being written or will be written into law. The generally agreed-upon ethical standards for Web professionals have developed from years of experience, and many have been inherited from other professions. Examples of ethical behavior for Web professionals include the following: Do not send unsolicited bulk e-mail, or spam. Do not buy domain names that you do not intend to use (a practice also known as domain squatting or cyber-squatting). Do not knowingly spread malicious program code such as viruses or worms. Do not pass along chain e-mail messages, especially those that imply threats. Be honest with your customers, and do not overcharge for technical services that they may not understand.
NOTE: Do you feel any unethical practices are deserving of punishment or illegal status?
Spam
spam Unsolicited and unwanted e-mail messages; the online equivalent of junk mail. spam filter An e-mail client program that identifies and filters out spam messages before they reach the e-mail Inbox.
Spam is unsolicited bulk e-mail that is, e-mail messages that the recipients did not ask to receive. As you are undoubtedly aware, millions (if not billions) of spam messages are sent to Web users every day. A multitude of software companies have launched in recent years that are devoted exclusively to creating spam filters, which sort unwanted spam from wanted e-mail for the e-mail user.
Version 1.0
11-4
Bulk e-mail and business

mailing list server An e-mail server that regularly sends e-mail messages to a specified list of users. List servers can also collect and distribute messages from an authorized group of participants, called a listserve group.
Many legitimate businesses use bulk e-mailing as a way to advertise their Web sites and promotions to the online audience. E-mail lists are generally managed using a mailing list server, which is a server that automates the distribution of messages to an authorized group of participants. A user can subscribe to the list by sending an e-mail message to the list server, or by authorizing a Web site to subscribe him or her to its e-mail service for newsletters, specials and so forth. List servers can also receive messages from listserve group participants, store the messages and distribute them to the mailing list. This function is generally used only by mailing list groups in which members subscribe to discuss specific topics with other members. Mailing lists used for advertisement generally do not offer recipients the option to communicate with other recipients on the list.
Opt-in and opt-out e-mail

OBJECTIVE 1.3.4: Strategies for end-user privacy and trust opt-in e-mail An e-mail list service that is created legitimately by subscribing only users who specifically request to be added to the list. opt-out e-mail An e-mail list service that requires subscribers to unsubscribe themselves if they do not want to continue receiving messages. Opt-out is implied for opt-in e-mail services, although it is often used in unsolicited e-mailing lists to give the appearance that recipients requested their addition (opted in) to the list.
If you want to use bulk e-mailing to promote your Web site, you should avoid being labeled a spammer at all costs. To create a legitimate e-mail list, you must give users the option to subscribe to your e-mail list, which they can do by submitting a form on your Web site or by checking a box when they complete a transaction. This type of e-mail list creates an opt-in e-mailing service, and it is the only way to build a legitimate customer e-mailing list. Opt-in e-mail lists consist exclusively of users who specifically requested or authorized their addition to the list. This includes listserve group members and recipients of promotional e-mail from businesses. Opt-out e-mail messages are bulk e-mail that offer recipients the option of unsubscribing from the list, generally by clicking a link in the message or visiting a Web page. Recipients of opt-out e-mail are expected to unsubscribe themselves from the list if they do not want to continue receiving the e-mail; otherwise, they are assumed to have authorized the messages. The opt-out capability is implied for all opt-in e-mail services. However, this capability is often used by spammers as an attempt to legitimize spam by giving the appearance that users on the list requested their subscription. In some cases, spammers even use the opt-out response mechanism to create lists of recipients for additional unsolicited e-mail; clicking the opt-out link from an unscrupulous messenger's e-mail may actually confirm your address as a target for further spam. Opt-out e-mail is often used by legitimate businesses to subscribe users who have not requested the e-mail service but whose e-mail addresses were collected by the Web site for other purposes (such as completing a purchase or obtaining a site password). These recipients are then given the responsibility to unsubscribe themselves if they do not want to receive the unrequested e-mail. The opt-out method for creating a mailing list in this way is not recommended if you want your customers to feel confident about using your Web site. Some may find receiving your unsolicited e-mail messages so annoying that they will not return to your site. However, remember that you can provide good customer service by adding a convenient opt-out function to the e-mail messages you send to your opt-in e-mail list recipients.
Privacy and trust

OBJECTIVE 1.3.4: Strategies for end-user privacy and trust
Web server software collects information about Web site visitors through the creation of log files. These automatically generated log files contain information such as the pages a user viewed, the type of browser used, and the duration of a user's visit. By using cookies, the Web server can also record when a user returns to the site.
Version 1.0
11-5
This information itself is relatively benign, but when it is combined with information that an e-commerce program can collect such as name and address, past purchases, reviews of products, and frequently visited areas of the site you find yourself with a combination of information that the marketing and sales departments of many companies would love to acquire. Your responsibility as an ethical Web professional is to inform your site users as to how this information will be used by your (or the site owner's) company, and whether this information will be sold to other companies.
Privacy statements
NOTE: Have you been frustrated by the proliferation of advertising e-mail that comes to your personal and/or work e-mail accounts?
For this reason, it is standard to post a privacy disclaimer statement on every Web site, and it is essential on sites that collect information beyond normal log files. Privacy policies detail the ways that information is gathered and whether it is transferred to third parties. If information is transferred to third parties, the privacy statement should also describe how the information is transferred. Your privacy statement should be honest and open, rather than vague. For example, if one company buys another company, the purchased business will most likely be required to provide all customer information to the acquiring company. A business may also need to share customer data if it develops a partnership with another Web site. It is advisable to state these possible scenarios in your privacy policy even if they are not immediately foreseeable situations because excluding them could look secretive (or at least irresponsible) if they come true. All privacy disclaimer statements should include the following sections: Information collection a technical description of how user data is collected on the Web site. This description should specify the types of data that are required to perform a transaction or create an account, and the types of data that are optional. The description should also specify the types of data that are gathered in aggregate rather than for a specific user. Use of information a detailed description of how user data is used on the Web site. This description should specify whether user data will be used to send occasional e-mail messages to the users or to create personalized recommendations for them as they browse the site, for example. Information transfer a description detailing the situations in which user data will or might be transferred to a third party. If you do not currently plan to transfer user data but you can foresee a circumstance in which you might, describe that in this section. Specify the data that is or would be transferred, and the way it would be transferred.
OBJECTIVE 1.3.5: Privacy disclaimers
For an example of a thorough privacy statement, see the TRUSTe Privacy Statement at www.truste.com/privacy-policy-full.html.
Legal Issues and the Web

Remember that laws relating to the Web are evolving rapidly, and vary by country and region. As a professional, it is your responsibility to stay abreast of important legal issues that affect your business and your customers. Do your research, stay informed about issues relevant to your work, and seek professional legal advice when necessary.
Version 1.0
11-6
This lesson discusses some key legal topics in a general way, focusing on law in the United States. However, the CIW program and its authors are not qualified to provide legal advice, and no information in this lesson should be interpreted as such.
Although a complete listing and explanation of laws related to Web development is beyond the scope of this course, you should be aware of several current and potential legal issues that may affect your Web development practices. The most important of these are: Anti-spamming laws. Intellectual property laws. International issues.
Spam and the law

As previously discussed, spam is unsolicited bulk e-mail that the recipients did not ask to receive. Spam is the equivalent of junk mail. Spam is also notorious for presenting potentially offensive content (such as offers for pornography or prescription drugs) to users, with no discretion used in determining who receives it. In some cases, such content may be illegal depending on the region in which it is received and the age of the recipient. Generally speaking, however, sending spam remains more of an ethical violation than a legal one.
The CAN-SPAM Act

On January 1, 2004, the CAN-SPAM Act (Controlling the Assault of Non-Solicited Pornography and Marketing Act of 2003) became U.S. law. The CAN-SPAM Act takes a fairly lenient approach to spam, which is why the amount of spam most Web users get has continued to rise since this law went into effect. CAN-SPAM established a federal "opt-out" spam standard in the United States. As discussed earlier in this lesson, opt-out e-mail provides the recipient with the option to be removed from an e-mailing list. However, it still places responsibility for eliminating spam on the recipient, rather than the sender. It does not address the fact that most spam recipients never requested (nor would have requested) to be placed on the mailing list. It also does not provide any protection against unscrupulous practices such as using responses from the opt-out function to create lists of "live" users for further spam. Nothing in CAN-SPAM prevents a legitimate business from sending unsolicited bulk email. Another weakness of CAN-SPAM is that it prohibits recipients of spam from suing spammers. Standard ethical practices that are followed by respectable Web marketers (such as opt-in e-mailing lists) are actually much more responsible than the baseline established by CAN-SPAM. To learn more about the CAN-SPAM Act, visit the U.S. Federal Trade Commission's CANSPAM page at www.ftc.gov/bcp/edu/pubs/business/ecommerce/bus61.shtm.
OBJECTIVE 1.3.2: Proper content usage
Intellectual property: Copyright, trademarks and trade secrets

Intellectual property laws govern ideas and products of the mind. It is important to be familiar with the major laws governing intellectual property in the United States: copyrights, trademarks and trade secrets. Understanding these laws will help you protect the intellectual property on your Web site, as well as prevent you from infringing upon the property of others. Infringement upon legally protected intellectual property is punishable by law.
Version 1.0
11-7
Copyright
NOTE: Recall any news stories you have heard involving Web-related copyright infringement. Do you remember the Napster scandal? Napster's fileswapping software was found to violate the copyrights on music files that were traded freely using Napster. This case led to current practices of purchasing music files online for a fee.
In the United States, the 1976 Copyright Act provides protection for "original works of authorship that are fixed in a tangible form of expression" literary, artistic, photographic, musical and audiovisual works. The law prohibits unauthorized duplication of such works. According to copyright law, the two components that distinguish a work of authorship are originality and expression, so copyright applies only to the work itself, not the objects or ideas described in the work. Note that the content owner is not required to complete a formal copyright registration process to be protected by copyright law, although registration does provide some advantages. Copyright is secured automatically from the time that the work is created (essentially, fixed in a tangible format). A work of authorship immediately becomes the property of the author who created the work, and only the author of that work can share or transfer the ownership rights. The result is that you cannot copy text, images, music and so forth from any source, on or off the Web, and use it in your Web site or any other publication. Program code is also protected by copyright. For more information about U.S. copyright law and associated topics such as fair use, licensing and trademarks, visit the home page for the United States Copyright Office at www.copyright.gov. This site offers overviews, legal documents, links, registration forms and more.
Copyright infringement and fair use

Copyright infringement is the use of or profit from someone else's work without their permission. However, copyright does not restrict you from quoting or making reference to someone's work. The Fair Use doctrine included in the 1976 Copyright Act allows limited use of copyrighted works in socially important ways, such as research, teaching, journalism and criticism. Essentially, you can quote from or refer to other authors' works, but you cannot copy them wholesale or present them as your own. If your Web site allows users to post information, it is important to include a Terms Of Use agreement that users are required to submit before posting any content. This agreement should include statements specifying that users are not allowed to post copyrighted material, that you are not responsible to validate their content as original, and that users are responsible for any actions resulting from content they post. If a user violates a copyright on your Web site, then the fact that he or she agreed to your Terms Of Use may protect you.
Trademarks
A trademark is any word, name, phrase, sound or image that a company uses to distinguish itself from the competition most frequently, a company's logo and slogan or catchphrase. You cannot borrow another company's logo or catchphrase and use it for your company.
A parody of a company's trademarked name, logo or catchphrase may be permitted on a humorous Web site under the Fair Use doctrine.
Trademark law is also the basis for domain name disputes, which currently are primarily resolved by the World Intellectual Property Organization (WIPO) Domain Name Dispute Resolution Service.
Version 1.0
11-8
Trade secrets and non-disclosure agreements (NDAs)

Although laws differ by state in the United States, a trade secret is generally a formula, pattern, idea, process or compilation of information that provides the owner with an advantage in the marketplace and that is treated by the owner in a way that can be expected to keep the public from learning about it. For example, a secret recipe, a customer information list or a series of books in progress could be trade secrets. If the owner of trade-secret information publishes the information on the Web, then it is no longer a trade secret. However, publication of trade-secret information by anyone who is not authorized to do so is illegal. A non-disclosure agreement (NDA) is designed to protect trade secrets (as well as copyrighted material) from improper use by people who are allowed to access them, such as company employees, contractors and business partners. An NDA is commonly signed at the beginning and end of employment and contract relationships.
Patents
Patents are awarded for practices and processes that solve a problem or embody a new way of doing business. Some patents have been awarded for Web site processes, such as Amazon's One-Click Ordering. You should avoid duplication of patented processes in the design and development of your Web sites. If components of your process or service are similar but not identical to a patented process, you may be able to avoid a conflict. However, this is often vague, and disputes are resolved on a case-by-case basis.
Licensing content for your site

Because Web site content is protected by laws such as copyright and trademark, you must ensure that any content you use on your Web site (text, images, multimedia, etc.) is either your own original content and thus protected from unauthorized use by others or borrowed content that you have proper permission to use. Creating original site content is discussed in a later lesson. If you want to use another author's copyrighted content (text, images, music, code, etc.) for your Web site or other purpose, you may be able to license the content from its owner for your use. Licensing means that you establish an agreement with the content owner, which might be a writer, artist, programmer, magazine, corporation or Web site. Licenses are typically limited in some way. When creating a license agreement, the content owner establishes the terms of the agreement, dictating how and where the content can and cannot be used, and what the owner will receive in exchange for use of the content (such as fees, credit attribution, etc.). Some content owners will allow free use of their content for personal, non-commercial purposes. Some Web sites will allow other sites to provide links to their content. Again, any use still has terms and limitations. Some sites specify these policies to the public on their legal, permissions or copyright pages. For example, CBS Interactive grants permission to download, reformat and print a limited amount of its content for personal, non-commercial use. To see details about CBS Interactive permissions, visit www.cbsinteractive.com/copyright_notice.php. Another avenue for licensing content and art is Creative Commons, a service that connects publishers with authors and artists. The Find page allows you to search for audio, images and text that are free to use, in some cases even for commercial purposes. Learn more about Creative Commons at http://creativecommons.org or conduct a search for content at http://search.creativecommons.org/.
Version 1.0
11-9
Public domain
Content that is not copyrighted, or for which the copyright has expired, is said to be in the public domain. Any work that is in the public domain may be used freely by anyone for any purpose. Laws differ by country. In the United States, the following types of works are considered to be in the public domain: Works that were first created and published prior to January 1, 1923. Works whose term of copyright has expired. (Generally, works created on or after January 1, 1978, are protected by U.S. copyright for the life of the last surviving author plus 70 years.) Works for which no copyright extension has been filed.
International legal issues

OBJECTIVE 1.3.6: International legal issues
Web users from all over the world can visit your Web site. Considering the breadth of your potential audience, you must be aware of some international issues if you develop Web sites that will conduct business with a worldwide audience. For example, if the products your Web site sells are illegal in some countries, you may be responsible to provide ways to regulate sales and customers. If you are engaged in ecommerce, you should consult with a lawyer who specializes in international trade to determine whether your products are illegal anywhere in the world and if they are, do not allow shipments to those regions. You should also post a statement on your site notifying residents in such regions that they cannot purchase the products in question.
Contracts
The Web enables people from all over the world to do business easily. However, as with any business arrangement, it is important to establish some ground rules in a contract or other binding agreement. Contracts between parties that reside in different regions should include a clause stating the country or state whose laws apply to the agreement. For example, a contract signed between a Web hosting company in California and a business in Japan will likely state that the agreement will be governed by the laws of California. You should consult with a lawyer before signing any agreement, particularly one with a company in a different country.
Intellectual property
It is also important to be aware that the laws in the country where your business is located, including intellectual property laws such as copyright and trademark, may not apply in other countries. For example, U.S. copyright laws are very specific, but no international copyright law exists. The World Intellectual Property Organization (WIPO) is an international body that fosters cooperation among countries on intellectual property issues. More than 180 countries are members of WIPO. However, WIPO cannot guarantee that all member countries will observe or enforce each others' intellectual property laws. For more information about WIPO, visit the Web site at www.wipo.int/portal/index.html.en.
Fair use
Fair use, which allows the reproduction or quoting of copyrighted works for certain purposes such as criticism or education, is unique to the United States. However, other countries have similar concepts. Be aware that practices considered to be fair use in the United States might be considered copyright infringement in other countries. To avoid violating international intellectual property agreements such as those established by
Version 1.0
11-10
WIPO, you should closely comply with the concept of "fair use" established in your country of residence when developing Web sites. In the following lab, you will use simple Web searching techniques to check content for possible copyright infringement. Suppose you are developing a Web site that will include a lot of text. You are receiving text for the site from several authors, including members of the marketing department and Web team, as well as some technical writers. Although the quality and styles of writing tend to vary somewhat before editing, you notice that a couple contributions sound very professional but do not quite describe your company or products correctly. You suspect that this content may have been "borrowed" from the Web site of a competitor company. Rather than risk legal action by posting Web site content that might infringe on another company's copyright, you can first check to see if the content came from another online source. If you find that it did, then you can avoid copyright infringement by asking your writers or editors to replace the copied content with some original content for your company's site.
Lab 11-1: Discovering copyright infringement

In this lab, you will learn to use Web searches to discover possible copyright violations and avoid infringement. 1. Browser: Go to www.copyscape.com. The Copyscape site is a tool for searching for duplicate copy (writing) on the Web. If you have your own Web site, you can enter it in the search box and see if your content is duplicated elsewhere. Due to bandwidth constraints, Copyscape limits the number of free searches to five per month for any given site. A premium account allows you to perform unlimited searches at $.05 per search. In the search field, enter the URL of a site you think would be likely to include a famous quote, or a site that parodies famous quotes, such as www.despair.com. Click the Go button. The results will appear in a few seconds. Depending on the URL you entered, there may be several matches because famous quotes appear on many Web sites. Generally, copyright law does not cover famous quotes, and so no legal action would result from any of these sites using these quotes. However, if you had entered your own Web site's URL and gotten many matches, you may have cause for concern. On the Copyscape site, enter another URL, this time for a site that is more likely to contain mostly or all original content. You can use your own site, a favorite site, the CIW site (www.CIWcertified.com) or the Habitat for Humanity site (www.habitat.org). Notice that you may still see some instances of copied text. Notice also that it may take several attempts to find a site that has not already exceeded the limit of five searches per month. Visit the About CIW page at www.CIWcertified.com/About_CIW/index.php. Use your cursor to select and copy the first sentence of text you see on this page, just under the About CIW heading. The text should read "CIW comprises the world's fastest growing vendor-neutral Web technology education and certification programs for professionals." Direct your browser to the Yahoo! search engine at www.yahoo.com. Place your cursor in the Search field, and paste the sentence you copied from the CIW page.
NOTE: You may want to research several suitable Web sites before conducting this lab. For example, Web sites for universities often include famous philosophical quotes; Web sites for places of worship often include quotes from the Bible.
2.
3.
4.
5.
6.
Version 1.0
11-11
(Alternatively, you can type in the sentence from that page as listed in Step 5.) Click the Web Search button. This technique is called a string search. 7. The results page for this Yahoo! Search will show a list of sites that use the wording (or portions of the wording) that you entered, showing in bold the words that exactly match your entry string. This technique provides a quick way to check a sentence or paragraph for duplication from another source. Remember that exact duplication of a written expression may constitute infringement, whereas use of some of the same words in different orders to express similar ideas differently is not a violation of copyright. Direct your browser to the Google search engine at www.google.com. Click the Images link to access the Google Images page. Type CIW in the search field, then click the Search Images button. Notice that the results page for this image search shows images with your keyword (CIW) in the image file name. Each image is accompanied by the site address at which Google found it. Are any of these images copyrighted or trademarked material? How might you be able to use a search such as this to check image files for copyright infringement?
8.
In this lab, you learned ways that the Web makes it easier to discover copyright violations, especially when it comes to written words. You can use tools such as these to learn whether your content has been published online or to verify whether the content on your site is original.
Case Study
Steal This Site!

Rather than pay a Web developer to create an expensive Web site for Big Al's Hardware, Big Al decided to have his receptionist download the pages and content from another Web site and simply modify the text to create Big Al's Web site. Big Al instructed his receptionist to choose a hardware store that was far away so it would not be a direct competitor. As he said, if the company whose Web site they copied was nowhere near Big Al's store, then Big Al's was not taking away any business from them by having a similar site. * * *
Consider this scenario and answer the following questions. Are Big Al's actions ethical? Why or why not? Are Big Al's actions legal? What specific law(s) might he be violating? Is Big Al taking business away from another company by copying its Web site if the company resides in some other geographical region? Can you think of ways in which his actions might be stealing business from the similar but far-away company?
Version 1.0
11-12
Lesson Summary
Application project
Terms of use and privacy policies differ widely among Web sites. It is very important for any Web site that interacts with users (or allows users to interact with each other) to clearly specify the site owner's responsibilities as well as the user's responsibilities on the site. Visit several Web sites, and look for the sites' terms of use and privacy policies. Links for these pages are generally provided at the bottom of the home page. How many of the sites you visited offer these pages? Do they tend to be small companies, large companies or all sizes? Read some of the privacy policies and terms of use that you find on these sites. Do these terms and policies make sense? Are they clear or vague? Do they seem reasonable to you? Is there anything contained within these documents that would make you think twice about revisiting that site or doing business with that company? Consider how often you read a site's privacy policy before giving the site information about yourself. Are you more likely to do so now, less likely, or just as likely?
Skills review
In this lesson, you studied ethical and legal issues related to the Web. You distinguished between ethics and law in relation to Web development and business. You also learned about privacy and the importance of privacy disclaimer statements. Finally, you studied some important legal issues that may affect you as a Web developer, including intellectual property laws, spam laws and international legal issues. Now that you have completed this lesson, you should be able to: 1.3.1: Define ethics, and distinguish between legal and ethical issues. 1.3.2: Use Web content (e.g.,text, graphics, code) properly, including original content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement. 1.3.4: Use strategies to avoid violating end-user privacy and trust (e.g., refusing to share or sell end-user information, opt-in/opt-out for mailing lists). 1.3.5: Develop privacy disclaimers appropriate to site purpose and audience. 1.3.6: Identify international legal issues, including fair use, trademarks, contracts.
Version 1.0
11-13
Lesson 11 Review
1. What is opt-in e-mail?
2.
What is opt-out e-mail?
3.
What is the purpose of a patent?
4.
What is the purpose of a privacy policy?
5.
What term is used to describe the practice of buying domain names that you do not intend to use? Is this practice illegal?
Version 1.0
11-14

Version 1.0
11-15
Activity 11-1: Reviewing Web-related legal terms

In this activity, you will review some of the legal terminology you learned in this lesson by matching each term in the left column with the appropriate description in the right column. 1. 2. 3. 4. 5. 6. 7. 8. 9. Intellectual property Trademark Trade Secret Copyright Patent Ethics Fair Use Licensing Infringement A. Legal protection of original works of authorship.
B. Legal protection of names, phrases, images or sounds that a company uses to distinguish itself from the competition. C. Legal protection of inventions. D. Ideas and products of the mind. E. A legal contract that allows you to use another author's content, dictated by the author's terms. F. A binding agreement between two or more parties.
G. A doctrine that allows the use of copyrighted material for purposes such as criticism, reporting, teaching and research. H. A formula, pattern, idea, process or compilation of information that provides the owner with an advantage in the marketplace. I. J. The unauthorized use of copyrighted works. Rules or standards governing the conduct of the members of a profession.
10. Contract
Optional Lab 11-1: Exploring the public domain

In this optional lab, you will learn more about the wide variety of content that is in the public domain. 1. Browser: Go to www.gutenberg.org/wiki/Main_Page. Project Gutenberg is a volunteer effort to create a freely available electronic archive of printed works. Many of the works in Project Gutenberg are in the public domain. Click the Book Catalog link and browse the catalog. Browser: Go to www.publicdomain4u.com. Public Domain 4U is a site that digitizes audio recordings that are in the public domain. It offers MP3 files of many public domain songs. Click some links to listen to songs featured on their home page.
2.
Version 1.0
11-16
3.
Browser: Go to http://en.wikipedia.org/wiki/Public_domain_image_resources. This page on the Wikipedia site offers links to various sources for public domain images. Public domain images can sometimes be useful instead of licensing copyrighted content. Explore some of these links, and be sure to note any restrictions on using these images.
In this lab, you saw a small portion of the wealth of content that is available in the public domain. Provided that you are absolutely sure a work is actually in the public domain, you can use it for any purpose without paying licensing fees. Before you use any content that you did not create, however, be sure that you always carefully check the content or content source to learn about usage restrictions.
Lesson 11 Quiz
1. What are ethics? a. b. c. d. 2. Standards for professional conduct Standards set forth by the W3C Laws that vary among U.S. states Laws that protect intellectual property
Which of the following is a strategy to avoid committing copyright infringement? a. b. c. d. Never quote or make reference to someone else's work. Prevent users from posting information to your site. Stop sending bulk e-mail to users of your site. Get permission to use another party's content.
3.
Which of the following is a strategy to avoid violating end-user privacy and trust? a. b. c. d. Do not collect information about users of your site. Promise not to share user information with other companies. Post an honest and thorough privacy statement on your Web site. Do not send opt-in e-mail to users of your site.
4.
Which of the following information should you post in a privacy disclaimer statement? a. b. c. d. A list of what you consider to be your intellectual property A description of ways that user data is collected on the site The names of any companies you are considering merging with The names of employees involved in collecting user data from the site
5.
Trademarks protect: a. b. c. d. original works of authorship such as writing, images, music or program code. names, phrase or images that a company uses to distinguish itself from the competition. users from receiving unsolicited bulk e-mail if they do not want it. practices and processes that solve a problem or embody a new way of doing business.
Version 1.0
12Lesson 12: HTML and the Evolution of Markup

Objectives
By the end of this lesson, you will be able to: 3.1.1: Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions. 3.1.4: Use X/HTML to apply design principles and layout elements (e.g., fonts, space, colors, lines, images) to Web pages. 3.2.2: Identify non-standard X/HTML code and the ways that proprietary code affects Web development.
12-2
1. What is HTML?
2.
What convention does HTML or XHTML use to instruct an HTML interpreter (such as a browser) how to process or display text?
3.
Who determines the current X/HTML standard recommended for all Web developers? a. b. c. d. Tim Berners-Lee Browser vendors World Wide Web Consortium (W3C) CERN (the European Particle Physics Laboratory)
Version 1.0
Lesson 12: HTML and the Evolution of Markup
12-3
Function of Markup Languages

Markup languages are designed to instruct computers how to process data. The term markup derives from early print publishers, who would "mark up" text by hand to indicate to the printer which font size to use where, in which weight, using what form of alignment and so forth. In other words, the earliest markup languages were dedicated to passing formatting instructions. Markup instructions are generally referred to as tags, and the process of marking up a document is sometimes called tagging. Early word-processing programs required the user to perform manual tagging. Today, most tagging is performed transparently in programs, and usually takes place using a proprietary system. The different methods for tagging text made it difficult for people to exchange data with each other. With the advent of the Internet, it became more valuable and more imperative for authors to be able to interchange documents in a single format that was easy to use, yet powerful and aesthetically acceptable. Markup specifically designed to affect the appearance of a document is commonly called presentational markup or procedural markup because it instructs the computer how to render the text. However, organizations that process huge numbers of documents, such as government and bureaucratic entities, quickly found that it was more important to know what the data represented rather than how it looked. Markup was then created to describe the content of the page. This type of markup is called logical or structural markup. Structural markup is also called descriptive or generic markup. The following is HTML presentational or procedural markup for tagging the word "Summary" to appear in bold print:
<b> Summary </b>
In logical or structural markup, it makes more sense to designate the word "Summary" as a section header, which describes not just its appearance but also its context in the document. The following is HTML structural markup for tagging the word "Summary" as a level-one heading:
<h1> Summary </h1>
SGML: A Short History

In the late 1960s, as computers started to be used widely in certain arenas, a group called the Graphic Communications Association (GCA) created a layout language called GenCode. GenCode was designed to provide a standard language for specifying formatting information so that printed documents would look the same, regardless of the hardware used. In 1969, Charles Goldfarb led a group of people at IBM who built upon the GenCode idea and created what became known as the Generalized Markup Language (GML). Whereas GenCode was primarily a procedural or presentational markup language, GML aimed to define not only the appearance but to some degree the structure of the data. Nearly 10 years after GML emerged, the American National Standards Institute (ANSI) established a working committee to build upon GML and create a broader standard. Goldfarb was asked to join this effort, and has since become known as the "father of SGML," which was the end product of ANSI efforts. The first draft of Standard
Version 1.0
12-4
Generalized Markup Language (SGML) was made public in 1980; the final version of the standard emerged in 1986.
metalanguage A language used for creating other languages. OBJECTIVE 3.1.1: X/HTML origins, standards and versions Hypertext Markup Language (HTML) The traditional authoring language used to develop Web pages for many applications. hyperlink Embedded instruction within a text file that links it to another point in the file or to a separate file.
Since that time, the language has been enhanced as needed. For example, in 1988 a version of SGML was created that was designed specifically for military applications (MIL-M-28001). SGML is called a metalanguage, which is a language for creating other languages.
What Is HTML?
Hypertext Markup Language (HTML) is based on SGML and is the traditional authoring language used to develop Web pages for many applications. Tim Berners-Lee of the Massachusetts Institute of Technology invented HTML with colleagues from CERN (the European Particle Physics Laboratory) as a means of distributing nonlinear text, called hypertext, to multiple points across the Internet. One document links to another through pointers called hyperlinks. A hyperlink is an embedded instruction within one text file that calls another file when the link is accessed, usually by the click of a mouse. The global set of linked documents across the existing Internet framework grew into what is now known as the World Wide Web.
NOTE: You are probably already familiar with HTML code, but it is important to understand HTML's evolution and its status as a standard.
Hypermedia is an extension of hypertext. It includes images, video, audio, animation and other multimedia data types, which can be incorporated into HTML documents. The Web can be described accurately as a hypermedia system. Hypertext was first conceived by Ted Nelson in 1965. The first widely commercialized hypertext product was HyperCard, conceived by Bill Atkinson and introduced by Apple Computer in 1987. It incorporated many hypertext and hypermedia concepts, but was a proprietary system that worked only on Macintosh computers. In contrast, HTML is a cross-platform language that works on Windows, Macintosh and UNIX platforms. In addition, HTML and the Web are client/server systems; HyperCard works only on a stand-alone Macintosh computer.
NOTE: Be sure you understand the differences between markup languages and programming languages. Markup affects display or processing of text. Programming code causes a function or action.
HTML as a markup language

A markup language is very different from a programming language. Program files and data files exist separately in traditional applications. In a markup language, the instructions and the data reside in the same file. In addition, HTML does not provide data structures or internal logic, as do programming languages such as C and Pascal. HTML is an application of SGML. It has fewer language elements than SGML, it is easier to use and has become the standard method of encoding information for Web documents. As with GML, HTML facilitates data exchange through a common document format across different types of computer systems and networks on the Web. Whereas SGML is used specifically to define context as opposed to appearance, HTML has evolved into both a contextual and a formatting language. By applying a heading style to text using HTML, for example, you are not only marking that text contextually as an important line that begins a new section; you are also applying the visual formatting elements of boldface and a larger font size.
NOTE: You should be familiar with HTML tags. The first lesson in this course included labs for practicing HTML coding.
Version 1.0
12-5
HTML tags
tags Special pieces of code, enclosed in angle brackets, that tell the HTML interpreter how to process or display text.
HTML files are plain text files that have been "marked up" with special language elements called tags, which are embedded in the text. Tags are pieces of code text, enclosed in angle brackets ( < > ), that provide instructions to programs designed to interpret HTML. For example, you might want to change the color of some text in your file. You can do this by embedding opening and closing tags with instructions around the text you wanted colored. If you want an image to appear in your document, you can use a tag to specify the source and placement of the image.
HTML interpreters
NOTE: HTML applies both visual and limited contextual formatting to page elements. You should understand this concept before learning about XML and XHTML in the next lesson.
HTML interpreters (also known as user agents) are programs such as Firefox and Internet Explorer that process HTML pages and render them to the user as text pages formatted in accordance with the embedded instructions. Firefox and Internet Explorer are also called Web browsers (as are many other HTML interpreters you have studied). HTML interpreters are not limited to browsers, however. Many programs that have come on the market since 1996 include HTML reading and exporting capabilities as built-in features. Mozilla Thunderbird, for example, allows you to send and receive HTML messages, and you can post fully formatted HTML messages to news and discussion groups. Although HTML was designed specifically for the World Wide Web, many businesses are finding uses for HTML documents that have little or nothing to do with the Web. HTML files are small, easy to understand and extremely portable, making this format an ideal choice when exchanging documents across any kind of network.
HTML Goals
In 1989, Tim Berners-Lee wanted to find a language that would allow people from all over the world to create documents that could be read by a universal client, a product more commonly called the Web browser. From that idea, HTML was born. Berners-Lee thought that SGML provided the most promising model, but knew the difficulty of mastering the language would hamper the development and sharing of information. He created a very simple, efficient language for marking up text. HTML is an application created in SGML. HTML is not extensible; there is a finite set of HTML elements, which are entered into pages as tags. HTML was originally created to define structure, not formatting. The original specification had a limited set of markup elements that designated text as a header, a paragraph, a list item and other simple units. In its earliest form, HTML provided a simple and effective way for people to generate clear, readable documents. Remember that the Internet was originally made popular by academics who wanted to share research across great distances. You can understand why the first version of HTML was mostly focused on creating clear, simple pages rather than flashy, interactive home pages for movie studios and other corporations. The following code represents a simple page marked up with HTML 1.0 tags.
Version 1.0
12-6
NOTE: Most markup languages have two types of tags: empty tags and container tags. Container tags use corresponding opening and closing tags, whereas empty tags may not include a separate closing tag. Note that Extensible HTML (XHTML) requires all tags to be closed, either with a closing tag or as a standalone empty tag that includes a slash before the closing bracket.
<title> Body Surfing </title> <h1> Body Surfing </h1> This document is designed to teach you how to enjoy the ride of your life.<p> You will find many good tips and tricks here. Read, and then go out and try this on your own! <h2> Finding the Wave </h2> The following are the key elements to look for in a wave: <ul> <li> Height <li> Speed <li> Shape </ul>
Notice that the markup is straightforward. A title for the document is identified by opening and closing <title> tags. The main heading is marked as a level-one heading by the <h1> tag. The <h2> tag marks the beginning of a subheading. Plain content text is not marked up, but when a paragraph break is needed, the <p> tag is used to start a new paragraph. The <ul> tag begins an unordered or bulleted list, and <li> indicates a list item. This original language focused on the structure of the data and presented a simple set of tags to represent very simply structured documents. HTML made it possible for anyone to easily create Web pages. The sheer amount of data that was suddenly available in a short time quickly made the Web an integral part of society, blossoming beyond even the most optimistic projections in terms of widespread acceptance and popularity.
HTML extensions and false structure

OBJECTIVE 3.1.4: X/HTML layout elements
With the commercialization of the Internet, the number of Web page creators grew exponentially, and not all users cared about Berners-Lee's original vision for HTML. Raised in the WYSIWYG environment of the current word-processor generation, users wanted the ability to make type bold, change the font size or face, and add color. Netscape, producer of the first widely successful browser, responded to users who were frustrated with HTML's limitations by creating extensions to the language. These extensions were tags that specified appearance formatting (presentational or procedural markup) rather than content structure (logical or structural markup). As these extensions became widely used, they were ultimately folded into later versions of the language. The following code demonstrates a page that contains both structural markup and procedural markup indicating formatting characteristics. The tags that do not define structure appear in bold.
<title>Body Surfing</title> <center> <font face="Arial" color="#0000FF" size="6"> Body Surfing </font> </center> This document is designed to teach one how to enjoy <b>the ride of your life.</b><p> You will find many good tips and tricks here. Read, and then go out and <i>try this on your own!</i>
Version 1.0
12-7
<font face="Arial" color="#0000FF" size="5"> Finding the Wave </font> The following are the key elements to look for in a wave: <ul> <li>Height <li>Speed <li>Shape </ul>
You can see that although this document may be more visually attractive, it is losing content structure. In essence, the <font> tags have been used to simulate structure, thereby providing false structure. Visually, the headings are clearly defined; however, to a machine it is all just text. If a computer program is written to search headings for keywords, then the code in the earlier example (which used <h1> and <h2> tags) made it easy to find the heading "Finding the Wave." But in the second example with the false structure, nothing indicates that "Finding the Wave" is a heading; a computer would know only that it is to be displayed differently. The text's relative role in the document its context could not be determined. In essence, the document became less "intelligent," offering less useful information to a machine.
OBJECTIVE 3.2.2: Non-standard/ proprietary X/HTML code
Although users enjoyed the ability to choose from a wide variety of font options and colors, most were unaware that Pandora's box had been opened. Netscape added nonstandard formatting elements to HTML. Microsoft followed, adding its own propriety language extensions. Soon, page developers found themselves frustrated. The tantalizing extensions were not part of any standard, and were usually recognized only in the browser made by the company that created the extension. It takes a long time for a new markup element to be proposed, discussed and accepted into a new version of HTML. Netscape and Microsoft opted to present first and propose later.
The HTML Standard

OBJECTIVE 3.1.1: X/HTML origins, standards and versions
NOTE: The concept of standardization applies to many technologies other than HTML.
The HTML standard defines the individual elements that make up the language. These elements are the instructions, or markup tags, that indicate how HTML documents should be displayed in a browser. This standard ensures that hypertext is displayed consistently in different browsers and on various computer platforms. Standardization limits the proprietary software specifications that do not operate with other vendors' products. The HTML standard includes six versions: 1.0, 2.0, 3.0, 3.2, 4.0 and 4.01. Additionally, individual browser vendors have developed their own HTML extensions. Remember as you design your Web pages to consider the users for whom you are designing.
World Wide Web Consortium (W3C) An international industry consortium founded in 1994 to develop common standards for the World Wide Web.
Who controls HTML?

The World Wide Web Consortium (W3C) is the standards organization that controls the evolution of HTML. When the W3C has fully endorsed a technology, it publishes a "recommendation" to the Internet community. When a proposed standard is being evaluated, it is in a state of constant flux. Be sure the code you support conforms to the latest recommendation from the W3C. Do not code to specifications indicated in working drafts; these technologies are undergoing discussion and consideration, and are probably not yet supported by the major vendors. Recommendations from the W3C become the standards to which vendors pledge full support.
Version 1.0
12-8
NOTE: A recommendation published by the W3C is the document that specifies all standardized elements of the given technology.
HTML 1.0 and 2.0

The HTML 1.0 standard is essentially the first version of HTML used for graphical browsers. It is equivalent to the first HTML specification (version 0), with added support for images. Version 0 was used as a prototype to test the Web with the first generation of character-based browsers, such as Lynx from CERN. HTML 2.0 includes all the capabilities of version 1.0 plus support for user input fields, which is necessary for forms. In practice, browser developers such as Microsoft and Mozilla have moved well beyond the HTML 2.0 standard.
NOTE: Standards cannot be enforced but they exist to promote universality for all Web users. Those who ignore the standards will exclude some audience members in some way. NOTE: Many HTML developers still adhere more closely to the HTML 3.2 standard than the more current HTML 4.x standard or the latest standard, XHTML. You can see how to locate the current HTML recommendation in Optional Lab 12-1: Learning about HTML standards. OBJECTIVE 3.1.1: X/HTML origins, standards and versions
HTML 3.0 and 3.2

HTML 3.0 was never ratified; instead, it evolved directly into HTML 3.2. As more browserspecific tags were introduced, it became obvious that a new standard was needed. For this reason, version 3.0 was abandoned in favor of version 3.2. HTML 3.2 added widely deployed features such as tables, applets and text flow around images, while providing full backward compatibility with the existing standard HTML 2.0. The major enhancements included support for: Tables. Figures. Frames. Mathematical equations. Improved tags.
HTML 4.0 and 4.01

HTML 4.0 is the W3C standard for the last major revision of SGML-based HTML. It provides support for: Style sheets. Internationalization features (e.g., reading from right to left). Accessibility features (issues involving Web users with disabilities). Enhanced tables and forms. Scripting and multimedia.
HTML version 4.0 is specified in three variants or "flavors": HTML 4.0 Transitional, HTML 4.0 Strict and HTML 4.0 Frameset.
HTML 4.0 Transitional

This version takes advantage of HTML 4.0 features including style sheets, but does not rely on them for the benefit of those viewing pages with older browsers. HTML 4.0 dropped some common attributes and tags that style sheets now handle. This variation of the standard allows you to use some of those deprecated elements.
Version 1.0
12-9
HTML 4.0 Strict

The HTML 4.0 Strict recommendation was the first version of HTML to disallow the use of layout and style elements. You can use this version with Cascading Style Sheets (CSS) to produce the font, color and layout effects you want.
HTML 4.0 Frameset

The HTML 4.0 Frameset recommendation supports the use of frames to partition the browser window into two or more adjacent windows.
NOTE: The 4.01 designation means that some minor errata have been corrected and the XHTML specifications were added. But the major revisions from version 3 to version 4 persist.
HTML 4.01
HTML 4.01 includes a few minor modifications to the standard, and calls for support of Extensible HTML (XHTML). You will learn more about XHTML in the next lesson.
Extensions to HTML
If you create Web pages using standard HTML code, each page will appear essentially the same viewed in any browser. Most problems with display differences between browsers occur as a result of browsers incorrectly or incompletely implementing standards, or as a result of proprietary browser additions to the HTML specification. Browsers such as Internet Explorer and Firefox have moved ahead to include features that are not part of the HTML 4.01 standard. As previously mentioned, these proprietary features are called extensions because they extend the existing HTML standard, and they may or may not be included in the next HTML standard. Two common extensions to the HTML standard are <blink> (supported by Firefox) and <marquee> (supported by Internet Explorer and Firefox).
OBJECTIVE 3.2.2: Non-standard/ proprietary X/HTML code
NOTE: Remember that one goal when developing Web sites is to make your pages accessible to the widest possible audience. It is important to consider the implications of using proprietary HTML extensions when creating Web pages for the public.
Problems with proprietary extensions

Remember that extensions might not be included in the latest specification, and some browsers might never support them. If you develop your Web site with proprietary extensions, you might be forced to revise your site to comply with the proposed standard and appeal to a wider audience. Some browsers simply ignore proprietary tags, which has a negligible effect on how your HTML documents are displayed. Proprietary extensions can also be misinterpreted by a browser, which can have a destructive effect on your documents. HTML authors should be aware of these effects and test Web documents in several browsers.
Separating Format from Structure in HTML

The GUI wave made Tim Berners-Lee's vision of well-structured documents readable with a universal client more remote. In an effort to regain the original vision, a proposal was made and accepted by the W3C for separating formatting elements from HTML. The first version of this effort came to fruition in the Cascading Style Sheets Level 1 (CSS1) Recommendation. CSS2 is now the recommendation that supersedes and extends CSS1. CSS3 specifications are currently being developed. CSS3 is not yet a recommendation, and the W3C plans to release the specification as separate modules. CSS states that all formatting should be defined either in a separate document called a style sheet, in a <style> section within an HTML page, or as values for a style attribute within HTML tags. In other words, the use of tags such as <center> and <font> is now discouraged by the W3C, and these elements are said to be "deprecated" in favor of style
Version 1.0
12-10
sheets. Web authors are strongly discouraged from using deprecated elements when creating code for their Web pages.
Deprecated tags
Deprecated tags and attributes are those that have been replaced by other HTML elements. Deprecated tags are still included in the HTML draft or recommendation but are clearly marked as deprecated.
NOTE: You can learn where to find information about HTML standards and other technologies in Optional Lab 12-1: Learning about HTML standards.
Tags are deprecated each time a new recommendation becomes a standard. The HTML 4.0 recommendation deprecated many text-formatting tags because style sheets will handle most text-formatting options. HTML 4.0 deprecated tags include: <isindex> <applet> <center> <font> <basefont> <strike> <u> <dir> <menu>
You can still use deprecated tags; most browsers continue to support them. If you use deprecated tags, you will be using the HTML 4.0 Transitional flavor. One of the difficulties of deprecated tags is that some browsers may not support the new tag that replaces the deprecated one. For example, <applet> has been deprecated in favor of <object>. However, Netscape Navigator browser versions as late as 4.7 do not support the <object> tag. To embed an object that may be viewed with older Netscape browsers, you should use the <embed> tag (for objects requiring a plug-in) or the <applet> tag (for Java applets). Because of the historical differences between Netscape Navigator and Microsoft Internet Explorer, it is often still necessary to include the <applet> or <embed> tag, even though the W3C has deprecated them
Extensible HTML (XHTML)

Extensible Hypertext Markup Language (XHTML) The current standard authoring language used to develop Web pages and other electronically displayed documents. XHTML requires stricter code syntax than HTML.
Extensible Hypertext Markup Language (XHTML) is the latest version of HTML. Essentially a rewrite of HTML 4.01 as an XML application (rather than SGML), XHTML was designed by the W3C to ease the transition from HTML to XML. XHTML allows XHTML-compliant documents to be used, viewed and validated by both HTML and XML processors. Therefore, developers can begin using some of the features of XML with the confidence that backward-compatibility issues with HTML will be addressed, as well as future issues with XML. The next lesson will introduce you to XML and discuss XHTML in detail.
Reference Sites for Web Developers

Developing and fine-tuning the craft of Web development is an ongoing process of learning new trends and techniques, and staying apprised of new specifications and guidelines. You should be aware of some of the numerous reference sites available to you. These include: World Wide Web Consortium (W3C) (www.w3.org) provides access to all recommendations and specifications managed by the W3C, as well as links for investigating accessibility requirements, HTML 4.01, XML, CSS, page validators, etc.
Version 1.0
12-11
W3Schools (www.w3schools.com) provides access to free online Web building tutorials in HTML, CSS, XHTML, XML, browser scripting and other subjects. SitePoint (www.sitepoint.com) a source for articles, instructional videos, forums, blogs and reference information. WebReference (www.webreference.com) provides an online library of news, advice and how-to articles. You can also subscribe to this site's news feeds. Open Web Design (www.openwebdesign.org) a source for free Web design templates.
The sites listed here provide information about general Web design theory and technique. You can also find reference sources for specific Web design tools. For example, several tools that you will use in this course, such as Dreamweaver, Expression Web and Fireworks, include online help and tutorials for various application features.
Case Study
House Rules
Ace Web Design has been in business since 1997. Over the years, its employees have developed a very efficient application for coding HTML. All its designers are trained in this application, which uses very good Web development software from 1997 that has been discontinued. The software supports only HTML 3.2. The Ace Web Design developers have never had a problem that they could not solve with HTML 3.2. This standard has always worked well enough and provided all the functionality that they needed. However, new developers who have come on staff in the last few years began to pressure management to switch to more modern software. The company managers are reluctant to do so because they see very little benefit to modernizing, and because they know that the transition will be time-consuming and expensive, and will reduce productivity. * * *
Consider this scenario and answer the following questions. Should Ace Web Design switch to the latest version of HTML? Why or why not? If Ace Web Design were to upgrade to current HTML standards, how could the transition be made as painless as possible?
Version 1.0
12-12
Lesson Summary
Application project
Although HTML 4.01 and XHTML have been around for several years, many Web sites have been slow to adjust to conformance with either one. This sluggishness is partially due to the fact that a lot of older sites exist on the Web. In addition, many Web designers are not proactive about upgrading to the latest standards, either because an upgrade is time-consuming or because they do not see an immediate need for it. Visit several Web sites, and view the HTML source code (generally by selecting your browser's View | Source menu). Try to find instances of the deprecated tags or the proprietary extensions specified in this lesson. In some applications, you can select Edit | Find to search for a specific word or element on the source code page. Did the majority of the sites you visited contain at least one of the deprecated tags? Did any of the sites you visited contain no deprecated tags? What about proprietary code? Do you see any trends in the types of sites that use updated, outdated or proprietary code? Why do you think this is?
Skills review
In this lesson, you learned about the origins and evolution of HTML. You studied the continuous developments in HTML, leading to the current standards including XHTML. You also learned about proprietary extensions and how they affect Web development.
NOTE: You can review the HTML terms and issues from this lesson in Activity 12-1: Identifying HTML terms and Activity 12-2: Identifying HTML issues.
Now that you have completed this lesson, you should be able to: 3.1.1: Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions. 3.1.4: Use X/HTML to apply design principles and layout elements (e.g., fonts, space, colors, lines, images) to Web pages. 3.2.2: Identify non-standard X/HTML code and the ways that proprietary code affects Web development.
Version 1.0
12-13
Lesson 12 Review
1. What does the acronym HTML stand for?
2.
What is a markup language, and how is procedural or presentational markup different from structural or logical markup?
3.
What is the term for the specialized pieces of code used by HTML to instruct HTML interpreters how to display text? How are these pieces of code designated in type?
4.
Who oversees the standards developed for HTML?
5.
Name the current recommended version of HTML and its three variants or "flavors."
6.
What is a deprecated tag?
Version 1.0
12-14

Version 1.0
12-15
Activity 12-1: Identifying HTML terms

In this activity, you will review what you learned in this lesson about HTML by matching words from the left column to the appropriate definitions in the right column. 1. Programming language A. A language used specifically to define context as opposed to appearance
2.
Tags
B. Separate text documents that are linked together in non-linear fashion C. The standards organization that controls the evolution of HTML D. A language used to create documents in which the instructions and the data reside in the same file E. A program such as Firefox and Internet Explorer that processes and displays Web documents F. Embedded instructions within a text file that link it to a separate file
3.
HTML
4.
Hyperlink
5.
HTML interpreter
6.
Markup language
7.
Hypertext
G. A language used to provide data structures and internal logic H. Special pieces of code, enclosed in angle brackets, that tell the HTML interpreter how to process or display text I. A language used for both contextual and display formatting of Web documents
8.
World Wide Web Consortium (W3C) SGML
9.
Version 1.0
12-16
Activity 12-2: Identifying HTML issues

In this activity, you will review what you learned in this lesson about HTML. Write your answers in the spaces provided. 1. Will a Web page appear the same when viewed in any browser? Explain why or why not.
2.
Can you use deprecated HTML tags? Why or why not?
3.
What recommendation from the W3C combines Extensible Markup Language (XML) 1.0 and HTML 4.01 to create Web documents that can be used, viewed and validated by both HTML and XML processors?
Version 1.0
12-17
Optional Lab 12-1: Learning about HTML standards

In this optional lab, you will learn how to find current information about HTML standards and related technologies. 1. Browser: In the Address field, enter www.w3.org. You should see the W3C home page, similar to Figure OL12-1.
Figure OL12-1: World Wide Web Consortium (W3C) home page
2.
W3C home page: The W3C oversees the evolution of HTML and many other technologies. Click the W3C A to Z link on the left side of the page, then click HTML in the W3C A to Z column. You should see the HTML home page, which offers news and links to HTML information. HTML home page: Click the HTML 4.01 link. You should see the HTML 4.01 Specification, as shown in Figure OL12-2. This document defines all the details of the HTML 4.01 Recommendation.
3.
Version 1.0
12-18
Figure OL12-2: W3C HTML 4.01 Specification document
4.
HTML 4.01 Specification: Scroll down and skim through some of the topics discussed in this document. Read through the items in the Quick Table of Contents. What types of information can you learn about HTML here? Now look through the Full Table of Contents farther down. What level of detail about this language is covered? Return to the top of the page, and click the W3C logo in the upper-left corner of this page to return to the W3C home page. W3C home page: Click the About W3C link to display information about W3C. About W3C page: Click the Back button to return to the W3C home page, then redisplay the page containing the W3C A to Z list of technologies. W3C A to Z page: Scroll down the W3C A to Z list to see other technologies that the W3C regulates and documents. You can return to this site whenever you need information about any of these standardized open (i.e., non-proprietary) Web technologies.
5. 6. 7. 8.
The W3C site offers very complete and detailed information about many standard Internet technologies. Remember to check this resource as you are learning about the Web and whenever you are researching current technological developments.
Version 1.0
12-19
Lesson 12 Quiz
1. Which of the following best describes the origins of HTML? a. b. c. d. HTML was developed by university students at MIT so they could send each other e-mail messages. HTML was invented by Charles Goldfarb and produced by ANSI to define the structure of the data in documents. HTML was invented by Tim Berners-Lee to distribute non-linear text to multiple points across the Internet. HTML was created during the invention of the hypercard, a cross-platform product that is no longer in use.
2.
HTML evolved from other markup languages, including: a. b. c. d. SGML and Java. Java and C++. GML and SGML. XML and GML.
3.
HTML 3.2 introduced enhancements that included support for which new features? a. b. c. d. Frames and tables Background images and colors User input fields and forms Support for XHTML
4.
The latest W3C standard version of HTML is HTML 4.0. This version of HTML is specified in three variants or flavors. Which variant contains deprecated tags such as <font> and <applet>? a. b. c. d. HTML HTML HTML HTML 4.0 4.0 4.0 4.0 Transitional Strict Frameset Standard
5.
Markup can be used for different purposes. Which term describes markup that is used to affect the appearance formatting of a document, such as layout, fonts and colors? a. b. c. d. Descriptive markup Structural markup Procedural markup Logical markup
Version 1.0
12-20
Version 1.0
13Lesson 13: XML and XHTML

Objectives
By the end of this lesson, you will be able to: 2.1.11: Explain the importance of applying a single CSS and HTML standard consistently throughout a site. 3.1.1: Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions. 4.2.7: Define Extensible Markup Language (XML), and distinguish XML from HTML and XHTML. 4.2.8: Define and create a "well-formed" XML document.
13-2
1. From which metalanguage is XML derived? a. b. c. d. 2. HTML XHTML SGML XGML
How does XML differ from HTML? a. b. c. d. HTML is data whereas XML is format. XML is data whereas HTML is format. XML has a finite number of elements. HTML has an infinite number of elements.
3.
Which Web browsers offer native XML support?
Version 1.0
Lesson 13: XML and XHTML
13-3
OBJECTIVE 4.2.7: XML vs. HTML and XHTML Extensible Markup Language (XML) A markup language that describes document content, instead of adding structure or formatting to document content. A simplified version of SGML. NOTE: XML's main purpose is to provide a universal structured data transport mechanism.
What Is XML?
Extensible Markup Language (XML) is a long-established specification that enables users and programmers to exchange data in a document. XML allows you to effectively create custom data structures for use in documents and in programs. Using XML, you can create documents and programming that contains more specific information about content than ever before, adding a certain level of "intelligence." Consider the following statement: "The Web itself is becoming a kind of cyborg intelligence: human and machine, harnessed together to generate and manipulate information. If automatability is to be a human right, then machine assistance must eliminate the drudge work involved in exchanging and manipulating knowledge..." This quotation is from the paper "The Evolution of Web Documents: The Ascent of XML," in which authors Dan Connolly, Rohit Khare and Adam Rifkin illuminate the potential of XML as a markup language that describes content in intelligent terms. XML was created to function transparently, providing machines with information about documents that will facilitate decision-making at the machine level. XML is derived from the Standard Generalized Markup Language (SGML). Both SGML and XML are metalanguages, which are languages for creating other languages. To understand XML, you should have a basic understanding of markup languages, metalanguages, how SGML spawned XML, and how XML differs from HTML.
XML: A subset of SGML

Several mantras are often repeated when discussing XML: HTML is display. XML is content and structure. XML is not HTML.
Many people think XML is an addition of tags to HTML. This assumption is incorrect. Unlike HTML, XML is not an application of SGML but a subset of SGML. XML is SGML made simpler and more accessible; it is sometimes referred to as "SGML Lite." As such, XML qualifies as a metalanguage and can be used to write other languages, thus allowing for an infinite number of tags. XML offers users the ability to define their own set of markup tags to write their own version of a markup language, so to speak. HTML is limited to the finite number of tags that are specified by the HTML recommendations.
XML: Addressing HTML limitations

Although HTML will be used for a long time because of its simplicity in allowing the presentation of complex pages, continued devotion to it causes other problems that may not be immediately apparent, such as increased Internet traffic and search engine excesses.
NOTE: By its very nature, HTML is limiting because it has a finite number of elements that do not describe the content they contain.
Server overload and Internet traffic jams

You have probably noticed that the Web slows down at certain times of day. Traffic increases, and with all the page requests hitting servers, delays are to be expected. Given the current state of HTML, much data is processed on the server. If you want to view a data report and then view the same data sorted in a different order, you probably have to
Version 1.0
13-4
query the server twice. This action creates a load on the server, increases traffic across telephone and cable lines, and adds to the congestion on the Internet. One of the goals of those who are developing new specifications for the Internet is finding new ways to shift processing to the client's computer and away from the server. Dynamic HTML offers potential for reducing some of this load, but without intelligently coded data, its potential is still limited. Intelligent XML documents can help.
Search engine overload

Anyone who has tried to search for a document on the Internet has inevitably entered a search word or phrase that returned literally thousands of matches, or hits. Too much data is almost as useless as no data, because by the time you read through all the Internet documents returned from your search, you probably could have found the information you needed by some other means. As you learned in the previous lesson, HTML has devolved from its original intent of defining structure. But even defining structure is not enough. To fully exploit the potential of evolving technologies, we must define not only the document structure, but the actual content as well. The great advantage of using XML to create more specific structure and define content will come from the ability to make much more refined searches across data. For example, if you want to search for information relating to the box office performance of the 2009 film Slumdog Millionaire, you might not want to be deluged with articles about India, the numerous books about its geography or demographics, or pages with sales promotions touting vacations in India.
Ending search engine excess

With the advent of XML, search engines will be able to perform more directly targeted searches, enhancing the precision of the results.
NOTE: Imagine the quality and relevance of search results that could be retrieved as XML use becomes more widespread.
Consider the value of being able to define content by comparing the following code examples.
The 2009 BAFTA Award for Best Film went to the film <I>Slumdog Millionaire</I>.
In this example, a search engine cannot determine whether the word "Millionaire" refers to a person, a game show, a film or an adjective. The next markup example is more useful.
The 2009 BAFTA award went to the film <film>Slumdog Millionaire</film>.
Now you know that this reference to "Slumdog Millionaire" is a reference to a film by that name. The following example takes XML a step further.
<film> <year>2009</year> <title>Slumdog Millionaire</title> <directors>Danny Boyle and Loveleen Tandan </directors> </film>
This example makes the most "intelligent" document because the markup is explicit as to the document's contents. If you were to ask an intelligent search engine the question "Who directed the film Slumdog Millionaire in 2009?" this document would have a high degree of precision in matching your search query. The code would even help point out that two directors were involved.
Version 1.0
13-5
Notice that this XML document is designed to be understood by machines. Consider that it is easy for a machine to convert information it can read into documents that can be read by people; however, it is not so easy to convert information that can be read by people (such as sentences) into information that is usable by a computer (such as structured data).
XML and Ajax

Ajax A programming methodology that uses a number of existing technologies together and enables Web applications to make incremental updates to the user interface without the need to reload the browser page. XMLHttpRequest An application programming interface (API) that is used to transfer XML and other text data between a Web server and browser.
Ajax (Asynchronous JavaScript and XML) is a programming methodology for the Web that enables Web applications to interact with users in much the same way they do with desktop applications. Ajax allows you to create interactive Web applications using XHTML, CSS, the Document Object Model (DOM), JavaScript and XMLHttpRequest. You can use Ajax to create dynamic and interactive Web pages without the need to refresh or reload the page. Ajax will work only on the more advanced browsers (Internet Explorer 6.x or higher, Firefox 3.x or higher, etc.). Despite its name, you do not absolutely need to use XML to implement Ajax. You can use any number of technologies, including Microsoft .NET, Dojo (http://dojotoolkit.org) and Google Web Toolkit (http://code.google.com/webtoolkit) to implement it. Nevertheless, you will use JavaScript to manipulate the XMLHttpRequest object. The XMLHttpRequest object does many things; key among them is the ability to connect Web pages in such a way that a Web page can be updated "on the fly" with new data. This practice allows a Web page to behave more like a sophisticated application. XML plays an essential part in feeding data to pages, because it allows that data to be organized in a logical way. The XMLHttpRequest object is used in many popular applications and Web sites including Google Maps, Facebook, Meebo and MapQuest. You can learn more about the XMLHttpRequest object at the following resources: W3C http://www.w3.org/TR/XMLHttpRequest/ Apple http://developer.apple.com/internet/webcontent/xmlhttpreq.html JavaScript Kit http://www.javascriptkit.com/jsref/ajax.shtml
XML Goals
NOTE: XML is not difficult to understand if you realize that it is about describing the document content between the tags. In fact, a well-structured XML document may be more easily understood than an HTML document of the same data.
XML was created expressly to provide a manner of defining both structure and content. XML was developed by the XML Working Group and the XML Special Interest Group at the W3C. The W3C Recommendation for XML 1.0 was published in February 1998. The XML Recommendation delineates the 10 goals that XML creators aimed to achieve: XML shall be straightforwardly usable over the Internet. XML shall support a wide variety of applications. XML shall be compatible with SGML. It shall be easy to write programs that process XML documents. The number of optional features in XML is to be kept to the absolute minimum, ideally zero. XML documents should be human-legible and reasonably clear. The XML design should be prepared quickly.
Version 1.0
13-6
The design of XML shall be formal and concise. XML documents shall be easy to create. Terseness in XML markup is of minimal importance.
In HTML, the user is presented with a defined set of HTML tags to use in the creation of pages. The advantage is that the tags will work, and the user needs to learn just a small amount of data to be able to publish Web pages. HTML browsers are so tolerant of sloppy code that even a poorly constructed page will render in a readable, sometimes even pleasing form in the browser. XML, on the other hand, offers far more freedom. Web page developers can now create tags named anything at all. The following is an example of XML markup:
<greeting> Hello, World! </greeting>
"Hello, World!" becomes not just two words and some punctuation, but a greeting. Because XML is not a defined language but a metalanguage, it has no predefined tags to use. You have the ability to create any tags you desire. However, there is a price for this freedom. In HTML, a user can often omit the ending </p> tag, for example, because the browser can usually infer from other tags where the next block of data begins. But with XML, the browser has no way of knowing when the greeting ends without the closing </greeting> tag. For this reason, the requirements for XML are stricter than those for HTML. This strictness may frustrate page developers, but it will be worthwhile. The more specifically the markup relates to the content, the more powerfully that content can be used.
What Is an XML Document?

Consider exactly what constitutes an XML document, according to the W3C's Recommendation for XML 1.0: "A data object is an XML document if it is well-formed, as defined in this specification. A well-formed XML document may in addition be valid if it meets certain further constraints." From this quote, you see that the minimum requirement for a document to be considered an XML document is that it be well-formed. In addition, a well-formed XML document can also be valid.
HTML: The lazy developer's dream

NOTE: Billions of HTML documents with poorly constructed tags are on the Web.
HTML-rendering programs (browsers) are very tolerant with developers. If you forget to close a tag, the closing tag is usually inferred. If you use the wrong tag, the browser disregards it and renders the document, no matter how ill-constructed the document is. For that reason, HTML is great for the lazy developer. Less-than-thorough effort can still produce attractive pages.
XML: The lazy developer's nightmare

By contrast, XML is far stricter. Any single error will prevent your page from rendering. XML is not for those who dislike detail or want to construct pages haphazardly. XML requires attention and discipline.
Version 1.0
13-7
How difficult will it be to meet the stringent requirements of XML? Surprisingly, there is little to learn, and if you adhere to a small and simple set of rules, you should have few problems creating usable, well-formed XML pages. In addition, most Web development tools now feature the ability to check your code for compliance. Specific tools also exist for visually constructing XML documents or automatically creating XML from databases. Although Web developers may be able to use applications that apply the specific rules of XML documents for them, you still need to know what those rules are in order to use the applications and XML to its full potential.
Rules for Well-Formed XML

OBJECTIVE 4.2.8: Well-formed XML documents
Well-formedness is essential in XML. Documents that are not well-formed will not load in the browser, according to the XML Recommendation. The W3C instructs us that "violations of well-formedness constraints are fatal errors." This means an XML document that is not well-formed will generate an error and stop the program from rendering it, rather than try to work around the error. Therefore, the page will not appear in the browser at all unless this minimum requirement is met. For reasons of forward compatibility, the first element in an XML document specifies the version of XML to which the document conforms. This element is the XML declaration. The following example begins with an XML declaration providing version information:
<?xml version="1.0"?> <greeting> Hello, World! </greeting>
Although the opening <?xml?> declaration statement is considered optional, it is highly recommended for forward compatibility. As the language evolves, it will be helpful to future browsers to know which version of the XML specification was used to create the document. If used, this declaration must be all lowercase.
NOTE: Well-formedness is not optional. Every XML document must be well-formed.
Some other basic rules will help you construct well-formed XML documents. You should commit these rules to memory. Tags must be explicit; they cannot be inferred. All opening tags must have corresponding closing tags, and all closing tags must have corresponding opening tags. Empty tags require a forward slash ( / ) character before the closing angle bracket. All attribute values must be enclosed in quotation marks. The document must have a root element that encloses all other tags, and all tags must be properly nested. Tags are case-sensitive and must match each other in every implementation.
We will examine each of these rules in detail.
Explicit tags
In HTML, you became familiar with the fact that you could use the following syntax to create a bulleted list:
<ul> <li> List Item One <li> List Item Two <li> List Item Three </ul>
Version 1.0
13-8
Note that the <ul> and </ul> tags denote the beginning and ending of an unordered list. The <li> tag denotes the beginning of the current list item, but also can be inferred to denote the end of the previous list item in its second and third appearance. In other words, the end of the element has been inferred by the beginning of another element.
NOTE: Notice the only difference in the two example lists is the inclusion of the closing tags. In fact, the addition of the closing </li> tag is recommended as good coding practice for HTML. If the closing tags were used in this instance, then no difference exists between HTML and XML.
If you were to code this way in an XML document, the browser would not render this page because the page is not well-formed. In XML, tags will never be inferred and must always be made explicit. In other words, if the previous example were to be included in an XML document, it would have to be written like this:
<ul> <li> List Item One </li> <li> List Item Two </li> <li> List Item Three </li> </ul>
In this instance of the list, you see that each list item is enclosed between opening and closing tags, meeting one criterion for a well-formed XML document. An important distinction to consider is the difference between tags and elements. The term "tag" refers to the code inside the angle brackets, which begins or encloses the document text. The term "element" includes tags and the entire block of document text that they affect. In the preceding code example, <li> and </li> are tags, whereas <li> List Item One </li> is an element.
Empty tags
Tags that contain the relevant information within the tag boundaries but enclose no document text are called empty tags. Examples of empty tags in HTML are <br> and <img>, neither of which requires a closing tag because the tag itself carries all the relevant information. The <br> tag instructs the rendering program to display a line break at that point. The <img> tag is used to include an image in the page, and the name of the image file is specified as a value of the required src attribute within the <img> tag.
NOTE: XML does not recognize HTML's empty tags, thus the slash ( / ) is an important character. Empty tags in XML cannot contain any document content; they can have only attributes.
HTML is a language with a specified set of recognized tags. Remember that XML is not a language and has no recognized tags. Rather, XML is a metalanguage that allows you to create a language of your own for your pages. For this reason, XML cannot be expected to recognize that <br> and <img> are empty tags. To indicate to XML that a tag is actually empty, you must include the forward slash character ( / ) at the end of the tag. If you had <br> and <img> tags in your XML document, you would code them as follows:
<br/> <img src="image.gif"/>
Because these tags stand alone rather than occurring in pairs, including the closing slash in the empty tag is the proper method for closing these tags. Failure to close your empty tags will prevent your XML document from being well-formed and thus prevent your document from rendering, according to the W3C's guidelines.
Attribute values
In HTML, either of the following code would be considered correct:
<td width=25%> </td> <td width="25%"> </td>
Version 1.0
13-9
By contrast, XML requires that all attribute values be enclosed in quotation marks. So of these two examples, only the second would be valid for XML.
Root element and proper nesting

Well-formed XML documents must include a root element, which is the container tag that encompasses all other elements in the document (similar to the <html> tag in an HTML document). All properly declared tags inside the root element must nest in the correct order. Thus, a well-formed XML document forms a tree-like structure that stems from the root. You can choose the appropriate root element for your document as you define its language you need only use it consistently and comply with other rules for well-formed syntax and structure. The following example demonstrates tags that form this tree structure with an appropriate root element for letter documents:
<?xml version="1.0"?> <letter> <date> </date> <to> <name> </name> <title> </title> <company> </company> </to> <salutation> </salutation> <letterBody> </letterBody> <from> <name> </name> <title> </title> </from> </letter>
In XML documents, tags must follow the strictest nesting rules. A tag cannot close behind a new tag that has opened after it; the new tag must close first. Layers of code must nest one within the other. In XML, you must simply close tags from the inside out. For example, the following tags are not nested correctly and therefore the document would not be well-formed:
<name> <firstname> Samson <surname> </firstname> Lane </surname> </name>
The following tags are correctly nested:

<name> <firstname> Samson </firstname> <surname> Lane </surname> </name>
Case sensitivity
In XML, letter-case specificity is required. Consider the following tags:
<P>The quick brown fox jumped over the lazy dog.</p>
NOTE: Whereas matching case is simply a matter of good practice in HTML, it is a requirement for XML.
These tags would result in a fatal error that prevents the XML document from rendering. The </p> tag cannot be used to close the <P> tag because it is written in a different letter case. All tags must match in case either uppercase or lowercase to be considered part of a matching set. You can use any capitalization scheme you like when creating your language with XML, but you must adhere to your choice strictly and consistently. Choosing a combination of
Version 1.0
13-10
cases makes it difficult to remember whether to capitalize certain tag names. For that reason, it is recommended that you use either all lowercase or all uppercase, whichever you prefer.
Valid XML documents: Document Type Definition (DTD)

Document Type Definition (DTD) A set of rules contained in a simple text file that defines the structure, syntax and vocabulary as it relates to tags and attributes for a corresponding document.
If an XML document conforms to the strict syntax rules discussed, it is said to be "wellformed." An XML document is said to be "valid" if it is well-formed and also contains a Document Type Definition (DTD). An XML document can include a DTD that defines the structure and elements (essentially the grammar) to which the XML document conforms. The DTD defines the validity of all subsequent tags. The DTD is often the document author's own creation, and thus must be declared if it is to be referenced.
Do not confuse the XML Document Type Definition (DTD) with the document type declaration or <!DOCTYPE> tag used at the beginning of XHTML and XML files for identification purposes. You will learn about the <!DOCTYPE> tag shortly.
Following is an example of a DOCTYPE declaration that could reference your own DTD for the letter example used earlier:
<?xml version="1.0"?> <!DOCTYPE letter SYSTEM "InternalLetter.dtd"> <letter> </letter>
The XML DTD defines the meanings and structure of all XML tags. Remember that XML allows you to create a language that describes your text. XML is not a specified language, like HTML. Therefore, you must think ahead and define every element. Alternatively, you can reference established DTDs or the XML schema to define your documents' language. Generally, you place the DTD in a separate text file, but you can include it within the XML document if you prefer.
HTML Transition to XML

NOTE: XHTML is the prescribed transition between HTML and XML. XHTML is discussed later in this lesson.
As you can imagine, most HTML documents do not currently meet the simple but strict requirements of XML. However, a properly coded HTML document could become a wellformed XML document fairly easily. With some attention to detail, you can correct a poorly formed HTML document so that it meets the well-formedness requirements of XML.
Structure of a simple business letter

Consider a simple letter. Attorneys, among other business professionals, need to be able to track all correspondence. Some law offices have developed complex systems that store letters for retrieval using coded directory structures. Others store letters in databases. Some perform full-text searches, by looking for names until they find the needed document. Many other variations exist. Now suppose attorneys start creating letters as XML documents. They could search using more specific criteria to find what they need more quickly, reduce the amount of time required to serve one customer and free up time to pursue additional revenue. Examine the basic business letter in Figure 13-1. What do you see in terms of structure?
Version 1.0
13-11
Figure 13-1: Specifically structured document
Following is the XML code for the version of the letter shown in the preceding figure.
<?xml version="1.0"?> <Letter> <date>April 29, 2009</date> <Address> <to> <name>Mr. Harold Gray</name> <title>President</title> <company>Gray Industries</company> </to> 236 Washington Boulevard, Suite 480 Grover, CA 90000 </Address> <salutation>Dear Mr. Gray:</salutation> <LetterBody> Thank you for your interest in our firm. Rather than reel off a price list, we'd like you to come visit our offices and speak with us in depth about the services we can provide to you and Gray Industries. Please contact my assistant <name>George Brown</name> to schedule an appointment at your convenience. Very truly yours, </LetterBody> <from> <name>Sandy Hastings</name> <title>Senior Vice President</title> </from>
Version 1.0
13-12
<typed-by>SH:jc</typed-by> cc: <cc>B. Comely</cc> </Letter>

NOTE: You can practice writing well-formed XML code in Activity 13-1: Creating a well-formed XML document.
As you can imagine, XML is not appropriate for every task. As in carpentry, users are encouraged to use the most appropriate tool to complete the job at hand. If this letter is never going to be searched for, referenced or read again, then there is no point in making it an XML document. But if this document will be kept and viewed in the future, thought should be given to structuring the information for maximum usability in the future. Remember that XML is case-specific. You can choose to use any capitalization scheme you desire, but you must adhere to your choice strictly. This example uses a combination of cases, which makes it difficult to remember whether to capitalize certain tag names. For that reason, this method is not recommended when writing your own XML code. Some people prefer all lowercase; others prefer to use all uppercase.
Uses of XML beyond the Web

NOTE: XML has many uses that have yet to be discovered. Remember that XML is a universal data transport mechanism.
A substantial benefit of XML is the ability to define a language that allows different types of presentation. Using XML, it is possible to create a single set of data that can be delivered on the printed page, on a CD-ROM, in HTML format, in streaming audio, to a pager's LCD display panel, to a wireless phone, and even converted to PDF. The format is controlled by settings in the style sheet for the document. Imagine the power of outputting any document you create to any of these formats without additional modification.
Extensible Stylesheet Language Transformation (XSLT) A transformation language that formats styled XML data for document rendering. NOTE: You can view an XML document in the browser in Optional Lab 13-1: Examining XML documents. NOTE: Current Web users are unlikely to see all existing HTML documents on the Web converted to XML. Depending on the content they contain, not all HTML documents should be converted to XML. However, going forward, HTML documents should be written using the current version of HTML, which is XHTML.
What can I do with XML today?

Microsoft Internet Explorer 5.x (and later), Mozilla Firefox 1.0.2 (and later) and Netscape 6.x (and later) natively support XML. However, it is unlikely that you will browse to any XML pages on the Web, at least for now. Even if companies are already using XML, it is a risk to post public information in this format because some client users cannot support it. Instead, they convert the XML into HTML dynamically. One technology for converting (or transforming) XML into other languages is Extensible Stylesheet Language Transformation (XSLT). If you do any sort of online banking, for example, it is likely that your bank is using XML on the server side and converting it to HTML for you to view in your browser. This means that you may not know when XML is being used because you will never see it.
Will XML replace HTML?

The short answer is no, but over time, the answer may well be yes. HTML presents severe limitations to page authors. It will continue to be the appropriate language for documents not intended for future use. But for data that needs persistence over time, XML will better serve the purposes of retrieving and reusing that data. XML will redefine the way we code HTML. In the short run, XML will be used in conjunction with HTML. As browsers develop and style technologies progress, XML may be used without HTML. But HTML and XML are separate and different, and one technology is not necessarily better or worse than the other. Both are tools that have appropriate and inappropriate uses. The more you know about each, the better equipped you are to choose the best tools to meet your enterprise's needs.
Version 1.0
13-13
For more information about XML visit the W3C site at the following URL: www.w3.org/XML/
What Is XHTML?
OBJECTIVE 3.1.1: X/HTML origins, standards and versions
Extensible Hypertext Markup Language (XHTML) 1.0 is the latest version of HTML. XHTML combines characteristics of HTML and XML to create a transition from HTML toward XML, while still providing current browsers with backward-compatibility. This means that the XHTML developer who adheres to the requirements of XML wellformedness can use HTML tags and XML tags within the same document and have it be valid. The following sample code demonstrates a valid and well-formed XHTML document; note that it includes headers for interpreters to read it to both XML and XHTML standards.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" XML:LANG="en" lang="en"> <head> <title>CIW Certification</title> </head> <body> <p>Learn more: <a href="http://www.ciwcertified.com">CIW certified.com</a></p> </body> </html>
NOTE: XHTML documents are supported in most current browsers, which is why this language was developed.
XHTML is also designed to make Web documents accessible and interoperable across platforms, partly due to the strictness of XML.
XHTML flavors and <!DOCTYPE> declarations

Since XHTML is simply a reformulation of HTML 4.x, the specification includes the same three flavors as HTML 4: XHTML Transitional, XHTML Strict and XHTML Frameset.
document type declaration (<!DOCTYPE>) tag A declaration of document or code type embedded within an HTML, XHTML, XML or SGML document; identifies the version and nature of code used. Denoted by the <!DOCTYPE> tag at the beginning of the document.
Remember that in HTML, it is simply good coding practice to include a document type declaration ( <!DOCTYPE> ) tag at the beginning of each document to help interpreter devices identify and render the HTML markup version your document uses. In XHTML, the DOCTYPE declaration is required to specify the markup version used by the page, as well as the document's primary language. The DOCTYPE declaration is placed at the very top of your XHTML document. If you declare an XHTML DTD (e.g., XHTML Transitional), then the interpreter will read the document according to XHTML rules for syntax.
Be careful not to confuse the document type declaration (<!DOCTYPE> tag) with the Document Type Definition (DTD). The <!DOCTYPE> tag is a statement that identifies code versions in a document. The DTD is a separate document containing a set of rules for structure, syntax and vocabulary, used commonly with XHTML and XML. A <!DOCTYPE> tag may contain a URL referencing a DTD document that applies the rules of the specified language version.
Version 1.0
13-14
If you do not specify a DOCTYPE, then two problems may arise: You will not be able to control how your code renders in the future. You will not be able to use a markup validator, because the validator cannot determine the type of markup you are using (e.g., XHTML Transitional or HTML 4.01).
Following are descriptions and proper DOCTYPE declarations for the three flavors of XHTML 1.0.
XHTML Transitional
The Transitional flavor of XHTML is designed to enable Web designers to start taking advantage of the benefits of XML today while still being compatible with older Web browsers. XHTML Transitional includes all the HTML 4.0 features, such as style sheets, but does not rely on them. This variation of the standard allows you to use some deprecated elements. The correct DOCTYPE declaration for XHTML Transitional is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
XHTML Strict
The XHTML Strict flavor does not include formatting elements; it disallows the use of layout and style elements. You can use this version with Cascading Style Sheets (CSS) to produce the font, color and layout effects you want. The correct DOCTYPE declaration for XHTML Strict is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
XHTML Frameset
The Frameset version of XHTML contains the elements necessary to create documents using framesets. Following is the correct DOCTYPE declaration for XHTML Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
Creating XHTML-compliant Web pages

With the exception of a few simple rules, creating XHTML-compliant Web pages is very similar to creating HTML 4.x-compliant Web pages. In addition to writing HTML 4 markup, you should memorize the following XHTML rules: Your document must begin with a document type declaration (<!DOCTYPE> tag) specifying the XHTML flavor to which it conforms (Transitional, Strict or Frameset). The root element (which is the container tag that encompasses all other elements in the document) still must be <html>, but it must also link to the definition for XHTML using the XML namespace element. So you must use the following opening tag for your document (after the <!DOCTYPE> tag), enclosing all document content between this tag and the closing </html> tag:
<html xmlns="http://www.w3.org/1999/xhtml">
All XHTML tags must be typed in lowercase letters. (Remember that XML offers you a choice but requires consistent implementation, and HTML does not require any case specificity or consistency. XHTML requires all lowercase letters for all tags except <!DOCTYPE>.)
Version 1.0
13-15
All attribute values must be placed in quotation marks, even if they are numeric. For example, the tag <table width=100> is not proper XHTML, whereas the correct code is <table width="100">.
For more information about XHTML, visit the W3C site at the following URL: www.w3.org/TR/xhtml1/
OBJECTIVE 2.1.11: Applying a single W3C standard consistently
Applying a Single Standard Consistently

As you have already learned, you can write your Web pages to adhere to any one of several standards. The key to developing a successful Web site, however, is not to write each new page to the latest standard, but to select one standard and apply it consistently throughout your Web site. Consistency throughout your Web site is essential to developing accessible pages; therefore, you should adopt a "pick it and stick to it" approach. For example, you may decide to adopt the XHTML 1.0 Transitional standard as the standard for all the pages in your Web site, or you may decide to adopt the XHTML 1.0 Strict standard. Whichever standard you choose, apply that single standard to all your pages, and validate all your pages for that standard.
Version 1.0
13-16
Case Study
A Higher Standard
Highest Standards Web Design takes pride in the fact that it devoutly follows all the latest standards from the W3C. Its developers start learning about and using new XML applications very early on. Some of them have even written books about XML, and about drafts of other new languages and standards from the W3C. As Highest Standards' promotional materials and employee manuals tout, all of Highest Standards' developers use the most standards-compliant browsers, and their Web servers and development environments also fully comply with current W3C standards. Unfortunately, most of Highest Standards' customers use browsers and operating systems that do not conform so closely to current standards. Although Highest Standards' developers always test sites on multiple browsers and operating systems, they are often frustrated by their customers' lack of concern for whether their own Web browsers strictly conform to the W3C standards. * * *
Consider this scenario and answer the following questions. What is a super-compliant company to do? Should these developers continue to use great new technologies in order to make a statement, and require customers to upgrade their browsers or download plug-ins to view the site? Or should they continue to pay attention to the latest standards, but patiently wait to use them until Web users catch up with the standards? Should these developers make alternate versions of sites that look the same but function properly in older browsers? Why or why not? Should these developers even bother to continue to learn new languages that they can implement only partially or not at all because of the shortcomings of older Web browsers? Why or why not?
Version 1.0
13-17
Lesson Summary
Application project
XML has been a buzzword for the past few years, but it now is apparent that XML is here to stay. The more you learn about XML, the better prepared you will be to adapt to the changes it will bring to your future work environment. To learn more about XML and related technologies, visit the W3Schools XML Tutorial at www.w3schools.com/xml.
Skills review
In this lesson, you learned about XML, a markup language that organizes information intelligently. You also studied XHTML and the ways it provides a transition from HTML to XML. The related course appendix provides some resources for further information about XML. Now that you have completed this lesson, you should be able to: 2.1.11: Explain the importance of applying a single CSS and HTML standard consistently throughout a site. 3.1.1: Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions. 4.2.7: Define Extensible Markup Language (XML), and distinguish XML from HTML and XHTML. 4.2.8: Define and create a "well-formed" XML document.
Version 1.0
13-18
Lesson 13 Review
1. What does the acronym XML stand for?
2.
What are two limitations of HTML that may not be immediately apparent?
3.
What is "well-formedness" in XML, and how important is it?
4.
For what type of data is XML the more appropriate document-creation language than HTML?
5.
What is XHTML, and how does it relate to HTML and XML?
Version 1.0
13-19

Version 1.0
13-20
Activity 13-1: Creating a well-formed XML document

In this activity, you will structure some data into XML format. Remember that XML allows you to name tags whatever you choose, provided that you follow the XML rules for well-formedness. Write your answers in the spaces provided. 1. Use the following invoice information to create an XML document structure. There are no "correct" tags you must use, but you must ensure that the document is wellformed. Write your code in the space provided next to the invoice data (use a separate sheet of paper if necessary). Refer back to this lesson if you need help remembering the characteristics of a well-formed XML document. Invoice number: 12345 Date: 06-12-11 Vendor: Oakley Product: eyewear Model: X Metal Color: Titanium Quantity: 50 Price: US$100.00 2. When you are finished, review your document to see whether it is well-formed.
Version 1.0
13-21
Optional Lab 13-1: Examining XML documents

In this optional lab, you will open some XML documents that show variations of the data given in Activity 13-1. Be sure to use Internet Explorer 5.x (or later) or Firefox 1.0.2 (or later) as your browser. Note: Completion of Activity 13-1 is not a requirement for this lab. 1. 2. Desktop: From the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson13\OptLab_13-1 folder, open the file OL13-1a.xml in your browser. Browser: You should see some data enclosed in tags that have meaningful names, as shown in Figure OL13-1. Notice that the information contained between the tags is easy to interpret; the tags make the data's meaning very clear. The power of XML is that data can have meaning to both people and machines.
Figure OL13-1: XML document displayed in browser
3.
Notice the dash ( ) character next to the <invoice> element. Click this character. You should see the document structure collapse to its root tag. Note: If you receive a security warning, you must allow blocked content to run on the page in order to collapse or expand the document structure.
4. 5.
From the \LabFiles\Lesson13\OptLab_13-1 folder, open the file OL13-1b.xml in your browser. This document contains the same data; however, more structure has been created by adding and modifying XML tags, as shown in Figure OL13-2. XML can be as simple or as complex as it needs to be to describe the data.
Version 1.0
13-22
Figure OL13-2: XML document with more structure
6.
Notice that the document now has more collapsible sections of data. Figure OL13-3 shows this document with some elements collapsed. These elements now have a plus ( + ) character next to them to indicate they contain further data.
Figure OL13-3: XML document with more structure, some elements collapsed
7.
Notice that the data in the browser has no formatting applied to it; unlike an HTML page, you see simply raw data and tags. This appearance results because the browser has no instructions for formatting the data the browser does not recognize the tags. By contrast, if the browser encountered an <h1> tag, it would know how to format and display the contained text. This difference between format and structure illustrates the difference between XML and HTML.
Version 1.0
13-23
Lesson 13 Quiz
1. XML is derived from which language? a. b. c. d. 2. HTML XHTML GML SGML
Which of the following is a valid XHTML 1.0 element? a. b. c. d. <a href=http://www.w3.org> </a> <BR> </BR> <P>some text</p> <td width="5"> Some Text </td>
3.
Which of the following is a required element of a well-formed XML document? a. b. c. d. Tags must be inferred. Empty tags require a forward slash before the opening angle bracket. Attribute values must be enclosed in parentheses. Tags are case-sensitive and must match.
4.
Which of the following offers native support for XML? a. b. c. d. The XML plug-in Netscape Navigator 4.0 Microsoft Internet Explorer 5.0 HTML 4.0
5.
XHTML allows the developer who adheres to the requirements of XML wellformedness to: a. b. c. d. use HTML tags and XML tags within the same document. automatically convert HTML documents to XML documents. use a specified set of XML tags that are similar to HTML tags. use HTML tags to give meaning to data and make documents "intelligent."
Version 1.0
13-24
Version 1.0
14Lesson 14: Web Page Structure Tables and Framesets

Objectives
By the end of this lesson, you will be able to: 2.2.7: Identify common user-accessibility challenges and solutions. 3.2.5: Design and develop X/HTML tables to appropriately format data. 3.2.6: Develop X/HTML framesets (including simple, nested, combined, inline), and target frames correctly.
14-2
1. Which X/HTML tags are used to create a table?
2.
What is the purpose of using frames?
3.
When you create a frameset, which term refers to the use of percentages instead of pixels to declare the layout of row or columns? a. b. c. d. Relative sizing Absolute sizing Wildcard values Frame targeting
Version 1.0
Lesson 14: Web Page Structure Tables and Framesets
14-3
Creating Structure with X/HTML Tables

NOTE: This lesson assumes that you already understand how to create a table in XHTML from CIW Web Foundations or other courses. You can review the X/HTML table tags in Activity 14-1: Reviewing X/HTML table tags.
You should already be familiar with table creation in X/HTML. In this lesson, you will review some table construction and design techniques, and consider how tables are used to develop page structures. Study the Habitat for Humanity page shown in Figure 14-1.
Figure 14-1: Habitat for Humanity page structure with table layout
This page uses a fairly standard three-column layout. This layout is advantageous from a design standpoint because it is familiar to users, the navigation is transparent, and it maximizes the available space on the screen. You can create this layout three different ways: by using a borderless table (which will be discussed later in this lesson), by using a combination of frames and tables (which will also be discussed later in this lesson), or by using CSS positioning (which will be discussed in the next lesson).
Page layout and tables

OBJECTIVE 3.2.5: X/HTML tables
The W3C now discourages the use of tables for page layout in favor of positioning with Cascading Style Sheets (CSS). Professionals use CSS and layering. However, tables are still a very commonly used method for laying out Web pages, and therefore it is important that you understand how this is done. You will learn how to convert a table layout to CSS in the next lesson. Until recently, designing page layout using tables has been the only way to create complex layouts such as the one shown in the preceding figure. With nearly universal browser support for CSS, however, it is now possible to use CSS positioning for most page layout. The reason for the W3C's recommendation against using tables for page structure is that using table layouts reduces a site's usability for people with disabilities and others browsing the site on mobile or other non-standard browsers.
Version 1.0
14-4
Tabular format for content

Tables were originally intended to be used for displaying tabular data, and eventually this should once again become their primary purpose. The following labs will demonstrate many of the capabilities of tables from the perspective of page layout. However, many of the same principles that apply to designing tables for page layout also apply to designing tables for formatting data. When you want your Web page to display a group of data that is best suited to a tabular format, the set of X/HTML table tags create useful and attractive grids for Web page content. Tables provide formatting superior to the HTML <pre> tag, which allows you to display preformatted text that includes structure such as tabs and spacing. However, the <pre> tag does not allow you to format data exactly as you want it, whereas the <table> tag gives you many formatting options. Figure 14-2 shows a Habitat for Humanity Web page with content that works well in a tabular format, which improves readability and adds visual interest. You can use tables to organize existing content on your Web pages simply by adding the appropriate XHTML tag structure. Then you can supply a couple sentences to introduce the table, as well as a table caption with a title for the table.
Figure 14-2: Page content in appropriate tabular format
Diagramming a Basic X/HTML Table

The easiest method for creating a table in X/HTML is to begin by diagramming it. Consider the Habitat for Humanity page structure shown in the first figure in this lesson. The basic structure of the page has three columns and two rows. Cell 1 spans all three columns. It can be diagrammed as shown in Figure 14-3.
Version 1.0
14-5
Figure 14-3: Page structure diagram
Within each of these cells are additional tables that specify the layout for the other elements of the page, such as a table containing the top navigation, a table row containing the logo, site map and contact links, and a table containing the navigation. The most basic structure of the page, however, is the table shown in the preceding diagram. In the following lab, you will create a simple XHTML table, which could be used to organize content into a tabular format or as the basis for an entire page structure. Suppose you notice that some content on your Web page could benefit from being structured into a grid. You know that such structure can lend readability to your content by organizing and labeling data, and allowing it to be more concise. You can create a simple table structure with XHTML tags, then add your content in the appropriate table cells. Table formatting adds visual interest and logical organization to your Web page content while conserving space and making content easier to scan.
Lab 14-1: Creating a simple XHTML table

In this lab, you will create diagrams for a simple table structure. 1. 2. In the middle of a sheet of paper, draw a table like the one shown in the earlier diagram. Number the cells 1 through 4 as was shown. Next to Cell 1, write the XHTML code to start a table row, as follows:
<tr>
3.
Write the rest of the XHTML code for the first row with a column span attribute, as follows:
<td colspan="3">Cell 1</td> </tr>
4. 5.
On your own, complete the code for the three columns in the next row. You can also add code for a table border, caption, and so forth. Notepad: From the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson14\Lab_14-01 folder, open the file basictable.htm. Add your table code. It should resemble the following code indicated in bold:
<?xml version="1.0" encoding="UTF-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" XML:LANG="en" lang="en">
Version 1.0
14-6
<head> <title>Basic Table</title> </head> <body>

NOTE: You can review the X/HTML tags used to create tables in Activity 14-1: Reviewing X/HTML table tags.
<table border="2"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </body> </html>
6. 7.
Notepad: Save the changes. Browser: Open basictable.htm in your browser. Your results should resemble Figure 14-4. You can see how your initial diagram helped you to write the correct XHTML code to create this table on a Web page. Now you could populate this basic table with other content and additional formatting.
Figure 14-4: Finished table
Borderless Web Page Structure

Tables used for page structure (and sometimes those for organizing less content) are generally presented with invisible borders. This borderless structure hides the table formatting, and allows the content in the table cells to stand out and visually occupy the space on the page independently.
NOTE: A dynamic table design (created by using percentage values [ % ] for the height and width attributes, as explained in the Tech Note) is advantageous because it customizes the page to each user's equipment and capabilities.
Now that you have created a basic table structure, you can transform it into a borderless page structure. Page structures are created by adding attributes to the XHTML table, table row and table data tags. When specifying the height and width attributes in these tags, the values can be expressed in pixels or percentages.
Keep in mind that if you use percentage values ( % ) for the height and width attributes, the table becomes dynamic, and will change as content changes and as browser window size changes.
Version 1.0
14-7
Web page margins

NOTE: The topmargin and leftmargin attributes were originally intended for use in Internet Explorer and can also be used in Firefox. If you are using older Netscape browser versions, they must use the marginheight and marginwidth attributes (which can also be used in Firefox). However, topmargin and leftmargin are appropriate for current versions of Internet Explorer, Firefox and Navigator. If you need to take into account users who have older Netscape browser versions, you should incorporate all four attributes in the <body> tag.
By default, an 8-pixel border exists between the content and the edge of the browser window. You can remove the page margins if you want. There are two methods for changing these page margins: setting attributes of the <body> tag, or using CSS. Changing the page margin using <body> tag attributes requires the topmargin and leftmargin attributes. Following is an example of the <body> tag used for this purpose:
<body leftmargin="0" topmargin="0">
For newer browsers, the CSS method of specifying page margins is preferred. Following is the CSS code for setting the page margins to zero. As you will learn in the next lesson, you can place this code in the header of the XHTML document by enclosing it within <style> tags, or you can place it in a separate CSS file and link to it from your XHTML documents.
body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px }
The CSS method of setting page margins works in Internet Explorer version 4 (and later), Netscape version 6 (and later), and all versions of Firefox.
Table tag
The <table> tag must be modified to allow your table to occupy the entire space of a Web page. Adjusting the border, height, width and cellspacing attributes will accomplish this goal.
Table row tag

Modification of the <tr> tag is not required to create a borderless page structure. However, it is still useful when desired to provide uniform attributes, such as align, bgcolor or background, to all cells in a row.
Table data tag

The <td> tag can be modified by changing the background, bgcolor, height, width and align attributes. Empty narrow cells can be used to create visual separations between rows and cells. In the following lab, you will transform your basic table into a borderless Web page structure. Suppose the table you created previously to format some content into a grid structure worked very well for organizing your data. You now have an entire page that could use some similar visual organization. You can use the same simple table structure you created with XHTML tags, but expand it to organize an entire page. You simply add entire page elements as the content in the appropriate table cells. Then you can make the table borders invisible so that the page structuring is transparent.
Version 1.0
14-8
Lab 14-2: Creating a simple Web page structure

In this lab, you will transform your basic table into a page structure. 1. 2. Notepad: From the \LabFiles\Lesson14\Lab_14-02 folder, open the file basictable.htm. Modify the code as shown in bold so it matches the following:
<?xml version="1.0" encoding="UTF-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" XML:LANG="en" lang="en"> <head> <title>Page Structure</title> </head> <body> <table width="100%" <tr> <td colspan="3" Cell 1 </td> </tr> <tr> <td width="133" Cell 2 </td> <td width="267" Cell 3 </td> <td width="258" Cell 4 </td> </tr> </table> </body> </html> height="100%" cellspacing="O" cellpadding="2" border="0"> bgcolor="yellow" align="center" valign="middle">
bgcolor="lightblue" align="center" valign="middle"> bgcolor="beige" align="center" valign="middle"> bgcolor="violet" align="center" valign="middle">
3. 4.
Save this code as basicstruct.htm into the LabFiles\Lesson14\Lab_14-02 folder. Open basicstruct.htm in your browser, and compare your results to Figure 14-5.
Version 1.0
14-9
Figure 14-5: Simple page structure from table
OBJECTIVE 3.2.6: X/HTML framesets frame A Web page that defines a set of frames in which other Web pages are displayed. frameset A scrollable region in which pages can be displayed; a single element of a frameset. Each frame has its own URL. NOTE: Recall the discussion about how tables are used for page structure. Be sure you understand how tables differ from frames.
X/HTML Frames and Framesets

Most designers no longer use frames. Nevertheless, when designing your Web site, you may want to create a page structure in which certain information is visible and persistent while other information changes. This structure is used to display static navigation elements in a window alongside content elements that can scroll. You can produce this functionality by creating separate panes in the browser window called frames. In this lesson, you will develop frames from existing XHTML pages, combining them in structures called framesets.
Using frames
Frames are an extension of the HTML 3.2 standard introduced by the Netscape release of the Navigator 2.0 browser, and expanded by the Microsoft Internet Explorer 3.0 browser. Frames were submitted to the Internet Engineering Task Force (IETF) and the W3C for consideration as an HTML standard, and are part of the HTML 4.0 / XHTML 1.0 Recommendations. Elements that users should always see, such as navigation links, copyright notices and title graphics, can be placed in a static individual frame. As users navigate the site, the static frame's content will remain fixed, even though the contents of the adjoining frames may change. The advantage of using frames is that static and dynamic information can be combined on a page. Figure 14-6 shows a Web page with a table-of-contents frame on the left.
dynamic Constantly changing.
Version 1.0
14-10
Figure 14-6: Web page using frames
This frame contains a set of links, each of which accesses a URL when clicked and displays the corresponding page in the adjoining frame. The Web page thus contains two separate files loaded into two frames. Figure 14-7 shows the same page after clicking the Page 2 link in the table-of-contents frame.
Figure 14-7: Frames after clicking Page 2 link
Version 1.0
14-11
The X/HTML <frameset> Tag

NOTE: The <frameset> tag is required to create a frameset Web page, and must enclose all other tags specifying elements and attributes for the frames.
The <frameset> tag is a container tag that allows you to define regions in your browser window and assign separate files to each region. The <frameset> tag typically replaces the <body> tag in an X/HTML frameset document because no text other than the frame pages' content generally appears on the frameset page. The <frameset> tag also requires an attribute of either cols or rows that designates the number and size of columns or rows in a browser window. You can specify the cols and rows attributes in two ways: by percentages or by pixels. For example, the tag <frameset cols="35%,65%"> indicates two frames: One column occupies 35 percent of the available screen width, and the other column occupies 65 percent. Frame sizes expressed in percentages are referred to as relative sizing. Although these windows can be resized and remain proportional, the proportion of the page division remains constant. This feature can cause problems, however, because the user might choose to browse in a small window, in which case your intended design could be greatly altered. Expressing the size of frames in pixels is called absolute sizing because the size of each frame remains constant regardless of browser window size. In addition, you can use a wildcard character for the second frame. For example, by specifying <frameset rows="150,*"> you use the first 150 pixels of available screen space for the top frame and the remaining space for the bottom frame. For example, consider the following <frameset> tag using absolute sizing with the wildcard ( * ) character:
<frameset rows="200,*">
Figure 14-8 shows the result of this tag in the browser.
Figure 14-8: Frameset rows
Version 1.0
14-12
The first row (with the TOC links) is 200 pixels high, and the second row uses the remaining space in the browser window.
The X/HTML <frame> Tag

NOTE: The <frameset> tags create the page structure whereas the <frame> tags determine the content that appears within the frameset windows. These two tags can be easily confused.
The <frame> tag defines the content that will appear in each frame of a frameset. It is enclosed within the <frameset> tags. The src attribute in <frame> specifies the file that will appear in the frame. In the following example, the content source for the top frame is the file named top.htm, and the content source for the lower frame is named bottom.htm. The frameset defines two rows and opens the frames with the files specified in the <frame> tag. Consider the following example:
<frameset rows="100,*"> <frame src="top.htm"/> <frame src="bottom.htm"/> </frameset>
NOTE: You can use another Web page for frame content by specifying a URL instead of a file name.
The frame's content source can be a local document or a URL pointing to a Web site.
Placement of <frameset> tags

The <frameset> tag will create frames only if it is placed correctly into the X/HTML document. The following example demonstrates proper structure for creating frames.
<?xml version="1.0" encoding="UTF-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" XML:LANG="en" lang="en"> <head> <title>Simple Frameset</title> </head> <frameset cols="30%,70%"> <frame src="nav.htm"/> <frame src="main.htm"/> </frameset> </html>
Following are three key points to observe: The document type declaration names the Frameset variant of XHTML. You only need to use the Frameset DOCTYPE declaration for the Web page that creates the frameset. The documents called by the <frame> tags should use either the Transitional or Strict variant of XHTML. The opening <frameset> tag must follow the closing </head> tag and must precede the opening <body> tag. If you do not plan to use alternate text for browsers incapable of rendering frames, you do not need the <body> tag at all. The <frameset> tag must contain the rows attribute and/or the cols attribute. Although both can be specified in the same <frameset> tag, it is advisable to declare them in separate <frameset> tags because output results may vary among browsers.
NOTE: In previous versions of HTML, you could not specify both the rows and cols attributes in the same <frameset> tag.
The following several labs will introduce you to frameset creation. Remember that frames have structure, content, links and targets. Structure and content are distinct entities. The following lab demonstrates an effective process for designing frames. Suppose your Web project manager has said that you will be creating a Web site in which content appears in different panes in the browser window. However, she has not yet provided any further instruction or the content. You have several choices for structuring the page, but
Version 1.0
14-13
because you cannot yet determine which structure will work best for your content, you can experiment with empty frameset designs. You can first try designing a frameset that will structure content into two rows in the window.
Lab 14-3: Creating a rows frameset in XHTML

In this lab, you will create a frameset with the contents of a file named a.htm in the top frame and with the contents of file b.htm in the bottom frame. The frame structure is illustrated in Figure 14-9.
Figure 14-9: Structuring frames
1. 2.
Notepad: From the \LabFiles\Lesson14\Lab_14-03 folder, open the file frameset.htm. Add the following code shown in bold:
<?xml version="1.0" encoding="UTF-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" XML:LANG="en" lang="en"> <head> <title>New Frameset</title> </head> <frameset rows="50%,50%"> <frame src="a.htm"/> <frame src="b.htm"/> </frameset> </html>
3. 4.
Save the changes. Open frameset.htm in your browser and analyze your results.
The following lab demonstrates another effective process for designing frames. Suppose you are still experimenting with empty frameset designs. You are not sure that the rows structure you just tried will work for the site you will be designing, so you want to be able to offer your Web project manager an alternative. You can now try designing a frameset that will structure content in the window into two columns, a more commonly used frameset design.
Version 1.0
14-14
Lab 14-4: Creating a columns frameset in XHTML

In this lab, you will build your skills by creating another frameset. 1. 2. Notepad: From the \LabFiles\Lesson14\Lab_14-04 folder, open the file frameset.htm. Modify the code as shown in bold:
<frameset cols="25%,75%"> <frame src="a.htm"/> <frame src="b.htm"/> </frameset>
3.
Save the file as frameset2.htm, then open it in the browser. It should resemble the structure of Figure 14-10. This is page A This is page B
Figure 14-10: Modified frameset structure
NOTE: Frames are seldom used in any layout other than one that provides a constant navigation frame. Can you recall ever seeing a framesstructured Web site that used frames in any other way?
Creating a navigation frame

The main purpose of a frameset is to create independent windows in which a constant navigation frame is maintained, with navigational links that bring the desired content into an adjacent frame. In the following lab, you will add hyperlinks to the frameset structure you just created. Suppose your Web project manager has just informed you that the site should have hyperlinks in the window's left pane that are always visible and that users can click to open an associated page in the window's right pane. You can create this functionality by adding hyperlinks to your columns frameset design, but you will need to test your links to verify whether you have targeted them correctly.
Version 1.0
14-15
Lab 14-5: Hyperlinking frame content in XHTML

In this lab, you will add hyperlinks to your frameset structure. Figure 14-11 shows the frameset structure you will create.
Figure 14-11: Hyperlinked frameset structure
1. 2.
Notepad: From the \LabFiles\Lesson14\Lab_14-05 folder, open the file frameset2.htm. Modify the two frame source attributes as shown in bold to call different files:
<frame src="nav.htm"/> <frame src="tour1.htm"/>
3. 4. 5.
Save frameset2.htm, then open it in your browser. Browser: Click the Page 1 hyperlink. What happens? Did your hyperlink work as intended? If not, why? Click the Back button, then click the Page 2 hyperlink. As in Step 4, the link opens a page in the same frame as the navigation, as shown in Figure 14-12. This result is obviously not correct. In the next section, you will learn how to open linked pages in other frames.
Version 1.0
14-16
Figure 14-12: Result of link opening in wrong frame
Targeting Hyperlinks in X/HTML

When you create hyperlinks, you can designate internal links without specific file addresses by using the <a name="anyName"> tag. After you specify a name ("anyName") to which you can anchor your link, you can create the <a href="anyName"> tag and attribute combination.
NOTE: Hyperlink targets can be specified using either a name or a relationship, which will be explained shortly.
The name attribute can also be used to target hyperlinks from the navigation division of your frame to the main area of your browser window. When you name a frame, you can request that frame by name to load files into it. Remember that target names are casesensitive; they will not work unless the name and target use the exact same letter case. In the following lab, you will target hyperlinks in your frameset using the name attribute. Suppose that in testing your frameset so far, you have found that your links are not yet correctly targeted to open content pages in the main frame. In troubleshooting your code, you remember that you can use the name attribute to specify the frame in which targeted content will open. Now your site will function as expected: You can click the hyperlink in the navigation pane and bring the selected content into the adjacent pane.
Lab 14-6: Creating targeted hyperlinks in XHTML

In this lab, you will structure your frameset so that you can click the hyperlink in the navigation frame and bring the selected content into the main frame. 1. Notepad: From the \LabFiles\Lesson14\Lab_14-06 folder, open the file frameset2.htm.
Version 1.0
14-17
2.
Modify your code as shown in bold:

<frame src="nav.htm" name="nav"/> <frame src="tour1.htm" name="tour"/>
3. 4.
Save frameset2.htm. Open nav.htm in your text editor. Add the attribute shown in bold to your code:
<a href="tour2.htm" target="tour">
5. 6. 7.
Save nav.htm. Browser: Open frameset2.htm in your browser. Click the Page 2 hyperlink. What happens? Did your hyperlink work as intended? Your browser should resemble Figure 14-13.
Figure 14-13: Result of clicking properly targeted link
8.
On your own, correct the other links on this page as well, so that each link clicked in the navigation pane opens a page in the correct (adjacent) pane. Be sure to test your links and troubleshoot your code until all the links work as expected.
Frame relationships
NOTE: Some relationships could change if more files are added to the hierarchy.
You can target frames in two ways: by name or by relationship. You have already seen that the target name is defined in the <frame> tag. The frame relationship, however, is less tangible. Figure 14-14 shows the relationship of files and frame names used in the previous lab.
Version 1.0
14-18
Figure 14-14: Hierarchy of files and frame names
In the following example, the target is set to display the linked page in the adjacent frame essentially a sibling frame because both frames are child frames of the frameset. Therefore, when you click the Home link, the Habitat for Humanity home page is displayed in a frame next to your navigation window. Figure 14-15 displays this result when viewed in a browser.
Figure 14-15: Simple frameset showing sibling frames

NOTE: Be sure you understand that the "top" frame is always a full browser window that sits above (replaces) the divided frameset structure in the relationship hierarchy.
You have already targeted links from one child frame to another. In the following lab, you will target links to the top frame in a frameset. Suppose that your Web project manager decides it would be preferable for your site's home page to display in its own window when accessed from the navigational links. You have three targeting options: target a parent page, target a top page, or target a new browser session.
Version 1.0
14-19
Lab 14-7: Targeting links to the top frame in XHTML

In this lab, you will retarget the home page link to the top frame of your site. 1. 2. 3. 4. Browser: From the \LabFiles\Lesson14\Lab_14-07 folder, open the file frameset2.htm. Click the HOME link in the navigation pane. You should see the Habitat for Humanity home page open in the main frame adjacent to the navigation frame. Notepad: From the \LabFiles\Lesson14\Lab_14-07 folder, open the file nav.htm. Modify the HOME link code as shown in bold:
<a href="http://www.habitat.org" target="_top">HOME</a>
Tech Note: When targeting a frameset link by relationship, be sure to include the underscore character ( _ ) before the relationship name in the target attribute value. 5. 6. Save nav.htm. Browser: Open or refresh frameset2.htm in your browser. Click the HOME link. Where does the Habitat home page open this time? It should open in the entire window, replacing the frameset. Notice that you have to click the browser Back button to return to your frameset page. Notepad: In the HOME link code, change the target attribute's value from "_top" to "_blank". Save nav.htm. Browser: Open or refresh frameset2.htm in your browser. Click the HOME link. Where does the Habitat home page open now? It should open in a new, separate browser window. Your frameset page still appears in the browser window you already had open you do not need to use the browser's Back button to return to your frameset page. As you can see, the target attribute value "_blank" targets a new browser session, instead of the top frame. Can you think of scenarios in which it might be useful to launch a new window rather than leaving your frameset page behind?
7. 8.
In the following lab, you will create a nested frameset by combining columns and rows structuring. Suppose you want to add to your frameset page an additional pane that can display a banner ad consisting of static content or alternative linked content. You can combine rows and columns in your frameset to achieve this effect.
Version 1.0
14-20
Lab 14-8: Combining columns and rows in nested framesets

In this lab, you will combine columns and rows to add a banner to your frameset. Consider the frameset structure shown in Figure 14-16.
This is A This is B
This is C
Figure 14-16: Frameset with rows and columns
1. 2.
Notepad: From the \LabFiles\Lesson14\Lab_14-08 folder, open the file frameset2.htm in your editor. Modify the existing code as shown in bold. Notice that you are nesting another frameset within an existing frameset.
<frameset cols="150,*"> <frame src="nav.htm" name="nav"/> <frameset rows="30%,70%"> <frame src="header.htm" /> <frame src="tour1.htm" name="tour"/> </frameset> </frameset>
3. 4.
Save the file as frameset3.htm. Browser: Open frameset3.htm in your browser. Notice that a new frame appears at the top of the page. You should see a Gift Shop banner ad in this new header frame, as shown in Figure 14-17.
Version 1.0
14-21
Figure 14-17: Nested header frame with banner ad
5.
Click the Gift Shop banner ad. What happens? Does your hyperlink work as intended? The Habitat for Humanity Gift Shop page should open in the header frame. Notice that you can click and drag the boundary of this frame to pull it down and view more of the Gift Shop page. Notepad: Open header.htm and change the link target to open the hyperlink in a new browser window:
<a href="http://www.habitatgiftshop.com/" target="_blank">
6.
7. 8.
Save header.htm. Browser: Open or refresh frameset3.htm in your browser, and test the banner ad link.
Adding a frameset to a frameset

Consider the combined frameset shown in Figure 14-18. It resembles the nested frameset from the preceding lab.
This is A
This is B
This is C
Figure 14-18: Two framesets combined
Version 1.0
14-22
NOTE: Be sure that you understand the difference between a nested frameset and combined framesets. The nested frameset places a frameset within one frame in an existing frameset. The combined framesets allow you to place multiple framesets together, so each page functions as an individual frameset.
However, this frameset is different. It combines two framesets: one divided into two columns, and the other into two rows. Figure 14-19 illustrates this frameset as a threedimensional model.
This is A
This is B
This is C
Figure 14-19: Combined framesets in 3-D illustration
This combined structure allows one link in Pane A in our diagram to change the content in both Panes B and C. Thus in our example, each of the Habitat tour pages could be designed as framesets, each with a top banner area and a bottom content area. For each of the sections, you could create subject-appropriate links that will bring content into the top and bottom panes. The easiest way to build these complex frame structures is to build them one at a time, as demonstrated in the following lab. Suppose you want to allow each page in your site to offer its own subpages and content with navigation, while maintaining the site's ability to provide persistent navigation to each main page topic. You can place multiple framesets together on your Web site, so that each page functions as an individual frameset.
Lab 14-9: Combining frames in XHTML

In this lab, you will build your skills by combining frames. 1. Notepad: Open a new blank file, and create a new frameset file with the following criteria: Two rows. Top row is 25 percent of screen. Bottom row occupies the remainder of the window. Initial content for the frames should be header.htm and tour1.htm. Name of the lower section should be "bottom". Name of the upper section should be "top".
Version 1.0
14-23
Your code should resemble the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sub-Frameset</title> </head> <frameset rows="25%,*"> <frame src="header.htm" name="top"/> <frame src="tour1.htm" name="bottom"/> </frameset> <noframes></noframes> </html>
2. 3. 4.
Save this file as subframeset.htm into the \LabFiles\Lesson14\Lab_14-09 folder. Browser: Open subframeset.htm in your browser so you can see how it looks. You should see a frameset page with two rows. Notepad: Open frameset3.htm in your editor. Modify the frameset code as shown in bold (delete code shown in strikethrough), leaving only one frameset:
<frameset cols="25%,75%"> <frame src="nav.htm" name="nav"/> <frameset rows="30%,70%"> <frame src="header.htm" /> <frame src="tour1.htm" name="tour"/> </frameset></frameset>
5. 6. 7.
Save the file as frameset4.htm. Browser: Open frameset4.htm in your browser so you can see how it looks. You should see a frameset page with two columns. Notepad: From the \LabFiles\Lesson14\Lab_14-09 folder, open nav.htm and change the code for the Page 1 link as shown in bold:
<a href="subframeset.htm" target="tour">Page 1</a>
8. 9.
Save nav.htm. Browser: Open frameset4.htm in your browser. Click the Page 1 hyperlink. You should now see the sub-frameset load into the right frame. Note that by using combined framesets (loading a frameset into another frameset) rather than nested framesets (a single frameset page with a frameset element inside another frameset element), you gain the ability to change the content of multiple frames by clicking a single link. What new options might this type of targeting give you?
NOTE: Why do you think one might want to lock the size of the navigation and header frames? Do you think this is a good idea? Can you think of any sites you have visited that were structured this way?
In the following lab, you will add attributes to a frameset. Suppose that to realize the full potential of the frameset, you want to create borderless frames, and "freeze" the navigation and header frames to a set size without scrolling capabilities. You can do this by adding attributes to various elements of your frameset code.
Version 1.0
14-24
Lab 14-10: Adding attributes to the frameset

In this lab, you will add attributes to various elements of the frameset. 1. Notepad: From the \LabFiles\Lesson14\Lab_14-10 folder, open the file frameset2.htm and add the following attributes indicated in bold:
<?xml version="1.0" encoding="UTF-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" XML:LANG="en" lang="en"> <head> <title>Frameset</title> </head> <frameset cols="20%,*" frameborder="0" border="0" framespacing="0" > <frame src="nav.htm" scrolling="no" frameborder="0" noresize/> <frame src="tour1.htm" name="tour" scrolling="auto" frameborder="0"/> </frameset> </html>
2. 3.
Save the file as frameset5.htm. Browser: Open frameset5.htm in your browser to review your results. You should notice that the frame border has disappeared, organizing the pages without wasting space on the border. Test your links to be sure all are working properly. Notepad: Open frameset5.htm, and change the value of the scrolling attribute from "auto" to "no". Save the file, then open or refresh frameset5.htm in your browser. Browser: Click the HOME link. You will notice that no scroll bars appear, preventing you from scrolling down to see the rest of the page. Remember to use caution when setting the scrolling attribute value to "no".
4. 5.
OBJECTIVE 2.2.7: Useraccessibility challenges and solutions
The X/HTML <noframes> Tag

Although they are certainly the minority, browsers that do not support frames are still in use. Adaptive browsers, mobile and alternative browsers, and other non-standard browsers typically do not support frames, or offer only limited support for frames. The <noframes> tag makes it possible for you to inform users of these browsers that they cannot view your frames-based Web pages. The <noframes> tag allows the developer to specify alternative text that will appear to users whose browsers cannot support frames. The alternative text informs these users that the Web page will not appear as intended. You can also use this text to specify an alternative version of your site or an alternative resource for the information you provide. For the sake of accessibility, it is recommended that you always include the <noframes> element in any frameset you create. The text specified in the <noframes> element does not appear in browsers that support frames. To add a message on your site to frames-incapable users, add the <noframes> tag to your frameset document after the closing </frameset> tag, as shown in the following code:
NOTE: You can add the <noframes> tag to a frameset in Optional Lab 14-1: Adding the <noframes> tag. Note that when you complete this optional lab, you will be able to test it only if you can locate a browser that does not support frames.
Version 1.0
14-25
</frameset> <noframes> <body> If you had a frames-capable browser, you would see my brilliant frameset Web site. </body> </noframes> </html>
NOTE: Be sure you understand when to include the <body> element in frameset documents and when this tag is unnecessary.
Note that in order to use the <noframes> element, you must include the <body> tag as well. Recall that the <body> tag is typically replaced by the <frameset> tag in this document because no text other than the frame pages' content would generally appear on the frameset page. However, the text of your <noframes> message requires that you include the <body> tag.
Case Study
Fenced In or Framed?
The Web site for Arnold's Body Building has a list of links to other sites related to body building. Arnold, the owner of Arnold's Body Building, likes the idea of linking his Web site users to other useful sites. However, he does not like the idea of users leaving his site. Arnold's Web developer suggested that Arnold's site solve this dilemma by using frames. Arnold's site could still display a page of links to other sites, but each linked site would open inside of a frameset, while Arnold's site navigation would remain visible on the left or top of the page. Arnold loved this idea and told his Web developer to implement it. However, usability tests of this feature revealed that visitors to Arnold's Body Building site did not appreciate Arnold's heavy-handed approach to holding on to site visitors. Arnold and his Web developer had to reconsider whether to continue using this strategy. * * *
Consider this scenario and answer the following questions. What other ways can Arnold's site use framesets to provide links to other sites, without feeling like it encourages users to leave Arnold's site? Can you think of other ways that Web sites try to control where their visitors can browse? What do you think of this practice?
Version 1.0
14-26
Lesson Summary
Application project
When used correctly, frames can provide a dynamic and interactive choice for X/HTML page structure. If you want your navigation elements, site name, copyright or other important information to remain visible on the page as users scroll and browse, you should consider using frames to provide your site's page structure. Frames have gotten a bad reputation over the years, mostly because of Web designers using them incorrectly. Incorrect linking from framesets can cause your viewers to get "stuck" in your frameset. Also, unless alternative content is provided, framesets can cause accessibility issues for mobile and adaptive browsers. Can you think of any sites you have visited on the Web that use framesets for page structure? When you think of such frameset sites, do you consider them dynamic and interesting? Are they easy to use? Do they appear professional and clear? Browse the Web and visit a site that uses the frameset page structure. It may be difficult to locate or think of sites that use framesets. Because many Web developers name their frameset pages similarly, a good way to find sites that use framesets is to perform a search on Google for "frameset.htm." Or visit the frames site for a small business called Mermaids Bath at www.mermaidsbath.com. Browse various pages and consider the quality of your browsing experience. Now click some links in each of the frames, and try to find some links to other sites within the frames. Do the links all work as they should, or did you encounter incorrect linking?
Skills review
In this lesson, you learned to use tables to format tabular data and design page structure. You also learned about the uses, advantages and disadvantages of frames in creating Web page structures. You learned to create simple framesets, to target adjacent frames, and to target top and new windows. Finally, you considered accessibility challenges inherent to frameset pages, you learned some attributes that modify frame style, and you studied the <noframes> tag. Now that you have completed this lesson, you should be able to: 2.2.7: Identify common user-accessibility challenges and solutions. 3.2.5: Design and develop X/HTML tables to appropriately format data. 3.2.6: Develop X/HTML framesets (including simple, nested, combined, inline), and target frames correctly.
Version 1.0
14-27
Lesson 14 Review
1. What is the preferred way of creating page structure, according to the W3C?
2.
Can you make an X/HTML table invisible? If so, how?
3.
Which tags are required to create a simple frameset Web page?
4.
What is the difference between a frame and a frameset?
5.
What do the terms "relative sizing" and "absolute sizing" mean in reference to framesets?
Version 1.0
14-28

Version 1.0
14-29
Activity 14-1: Reviewing X/HTML table tags

In this activity, you will review the X/HTML tags used to create tables and their available attributes. Write your answers in the spaces provided. 1. What is the purpose of tables?
2.
Which tag is required to create a table and contains all other table element tags?
3.
Which tag is required to create a table and contains all the information for a specified table row?
4.
Which tag is required to create a table and contains all the content for a table cell?
5.
Which tag is optional and can be used to add an attached caption to a table?
6.
Which tag is optional and can be used to designate a row or column (typically the top row or left column) as a heading?
7.
If a table header row or cell is specified, how will text in those cells appear by default?
8.
How is content in a table data cell aligned by default?
9.
Which attributes can you use to change the default alignment of content in table data cells? Which values do these attributes take?
Version 1.0
14-30
10. By default, how much space will a table fill? What elements or attributes can you modify to add more space to a table?
11. Which attribute should you modify if you want to make your table invisible?
12. Which attribute can you use to change the color of an entire table or specified cells?
13. Which attribute can you use to allow more space between cell text and cell borders?
14. Which attribute can you use to allow more space between cells in a table?
15. How can you create a column that spans multiple rows or a row that spans multiple columns in a table?
16. How can you center an entire table on your Web page?
17. How can you use an image as cell content in a table?
Version 1.0
14-31
18. Study the table presented in the following figure.
Label this figure with lines pointing to indicate the following table elements or attributes: Table caption Table border Table data Cell padding Table heading Table row Cell Cell spacing
This activity reviewed the basic X/HTML table elements and attributes, and their uses. Although you may seldom use X/HTML code to create Web pages, it is valuable to know X/HTML in case you want to read or modify code generated by a GUI Web page editor, or you decide to learn other Web development languages.
Optional Lab 14-1: Adding the <noframes> tag

In this lab, you will add the <noframes> tag to a frameset. After completing this lab, you will be able to test it only if you can locate a browser that does not support frames; the text specified in the <noframes> element does not appear in browsers that support frames. Adaptive browsers, mobile and alternative browsers, other non-standard browsers and some older browsers typically do not support frames, or offer only limited support for frames. Although this limitation may affect only a minority of your site's users, consider that using the <noframes> tag provides accessibility for this portion of your audience. 1. 2. Notepad: From the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson14\OptLab_14-1 folder, open the file frameset3.htm. Add the following code shown in bold:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Frameset</title>
Version 1.0
14-32
</head> <frameset cols="25%,75%"> <frame src="nav.htm" name="nav" /> <frameset rows="30%,70%"> <frame src="header.htm" /> <frame src="tour1.htm" name="tour" /> </frameset> </frameset> <noframes> <body> If you had a frames-capable browser, you would see my brilliant frameset Web site. If you want to view this content without frames, <a href="tour1.htm">click here</a>. </body> </noframes> </html>
3. 4.
Save the file as noframes.htm. Browser: Open noframes.htm. Because your browser most likely supports frames, you will not see any difference in this Web page it will render in the frameset structure as expected, and the text specified in the <noframes> element will not appear. If you are able to locate a browser that does not support frames, use it to test this page. You will see that although the frameset structure does not render, your message displays and alerts users that the page uses frames.
Version 1.0
14-33
Lesson 14 Quiz
1. What is the correct use for X/HTML tables? a. b. c. d. 2. Laying out Laying out Presenting Presenting paragraphs of text Web page elements data that lends itself to tabular format pages in adjacent browser panes that can scroll independently
What is the preferred way of creating page structure, according to the W3C? a. b. c. d. Using Using Using Using tables framesets the <pre> tag CSS positioning
3.
What is the purpose of frames? a. b. c. d. Frames provide templates that allow you to quickly create tables for page structure. Frames establish the basic site structure and hierarchy of all files used in a Web site. Frames create page structure in which some elements are static while other information changes. Frames provide a selection of pre-designed graphical borders you can use to embellish pages or sections of pages.
4.
Which of the following best describes a simple frameset? a. b. c. d. The The The The <frame> tag with cols or rows attribute <frameset> tag with cols or rows attribute <frame> tag with cols and rows attributes <frames> tag with cols and rows attributes
5.
In what two ways can you target frames? a. b. c. d. By By By By name or by relationship name or by number link or by anchor URL or by file name
Version 1.0
14-34
Version 1.0
15Lesson 15: Cascading Style Sheets

Objectives
By the end of this lesson, you will be able to: 2.1.6: Apply strategies and tools for visual consistency to Web pages and site (e.g., style guides, page templates, image placement, navigation aids). 3.2.3: Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1, CSS2 and CSS3) using various methods (e.g., linking, embedding, inline), and use style sheets to simplify Web design. 3.2.4: Create an external style sheet and link it to an X/HTML document.
15-2
1. What does the term "cascading" mean in relation to style sheets?
2.
What are the four methods by which you can apply style variations to Web pages?
3.
To embed a style into a Web page, you must: a. b. c. d. create a separate text file that specifies the style instructions. add the XHTML <style> tag specifying the style instructions. add the XHTML <style> tag with the @import statement specifying a separate text file. add the XHTML <embed> tag with a style attribute specifying the style instructions.
Version 1.0
Lesson 15: Cascading Style Sheets
15-3
Style Sheets
NOTE: You are probably most familiar with the style modification features of applications such as Microsoft Word, which allow you to change a style by simply choosing from a menu or clicking a button.
A style is a set of formatting instructions that allow you to define the formatting of X/HTML elements in a document or modify the characteristics of some elements. For example, the heading tags <h#> represent various styles: Heading level one <h1> is bold, Times New Roman 24-point typeface by default; heading level 4 is bold, Times New Roman 12-point typeface. You can change these and other style attributes in your Web pages. You can also control margins, line spacing and placement of design elements, as well as specify colors, fonts and point sizes. Styles can be placed in the <head> section of an X/HTML document, or defined in a separate file and attached to multiple X/HTML documents. Styles allow you to make one change that affects multiple X/HTML elements. Style changes can be made to occur periodically, or throughout a document or series of documents. The X/HTML standard includes typographical control elements called style sheets, which enable you to create Web pages with the layout sophistication of many desktoppublishing programs. A style sheet defines style instructions for an X/HTML document, though the term is often used to refer to an external style-controlling file. Style sheets solve several design problems. Imagine that your Web page has 12 different level-two headings that you want to appear in red. In the past, you may have added 12 pairs of <font color="red"> </font> tags around the 12 headings. What if you wanted to try blue headings? You would have to do a considerable amount of recoding. With style sheets, however, you can add just a few lines of code, then change the colors of all the headings with a single word. Style sheets as a Web standard have enhanced Web design. They have solved a number of X/HTML design limitations, including proprietary HTML extensions, text-to-image conversion to retain fonts, page layout using tables, and images controlling white space. These workarounds are still used by those who do not know how to employ style sheets in their Web design environment, but these practices are discouraged, and support for each will decline as browsers continue to move forward with style sheet implementation.
style sheet A predefined HTML document structure that includes heading fonts, text layout commands, graphic object placement, and other design guidelines.
Cascading Style Sheets

cascading style sheets Multiple and overlapping style definitions that control the appearance of X/HTML elements.
Cascading style sheets refer to the use of multiple style definitions in a single document. CSS is the standard way to format a Web page. A style sheet file can link to every document in a Web site, thus controlling the overall look and feel of the site. However, within any of the linked documents, a style header block can override the linked style sheet. Within the same file, a "spanned" style can also override the style information embedded in the header block, along with any style information from the linked style sheet. The term "cascading" refers to inheritance, or the hierarchical relationship between linked, imported, embedded and inline styles. Microsoft Internet Explorer (3.0 and later) is compliant with the Cascading Style Sheets (CSS) 1.0 specification. Netscape Navigator 4.0 partially supports the W3C Recommendation for CSS. Newer versions of Netscape and other Mozilla-based browsers (such as Firefox) offer very good support for CSS. The W3C published an updated recommendation in 1998 called CSS2. Most browsers support CSS2, although some bugs still exist in certain implementations of this standard. When designing your site, consider your audience and the browser versions they might be using.
Version 1.0
15-4
Cascading Style Sheets (CSS) is capitalized and used as an abbreviation only when referring to the W3C specification for that technology. Otherwise, refer to the text documents used to apply styles simply as "style sheets."
For a comprehensive list of browsers that support CSS, visit the following URL: www.w3.org/Style/CSS/#browsers The W3C also provides CSS test suites that can be used to test your browser's compliance with CSS1 and CSS2. Visit the following URL: www.w3.org/Style/CSS/Test/
NOTE: Be sure you understand the differences among the four methods for applying style variations to Web pages.
Defining and Using Styles

X/HTML specifies four ways to apply style variations: Linking Importing Embedding Inline
The first two methods refer to external style sheets (text files that use the .css file name extension and contain nothing but style definitions), which allow you to use styles across multiple Web pages. The third method defines styles for a single page. The fourth method makes quick, temporary style changes to existing X/HTML code, such as spanning a background color or an image behind words.
OBJECTIVE 3.2.3: Web page formatting with CSS1 and CSS2
Linking to style sheets from an X/HTML file

With the linking method, a single style sheet controls multiple Web pages. However, each page must be linked to the style sheet, which is a plain text file with the .css file name extension. To link a Web site file to the style sheet, use the following syntax:
<link rel="stylesheet" type="text/css" href="http://www.domain.com/styles.css"/>
NOTE: The terms "style sheet" and "cascading style sheets" are often used to refer to linked or imported style information.
Style sheet files should include only style information. X/HTML tags should not be included in your plain-text style sheet file.
Importing style information

Another method for accessing an external style sheet file involves using the @import statement. Using the import method allows you to apply multiple style sheets using one style element. The syntax for using the import method is as follows:
<style type="text/css"> @import url("http://www.domain.com/styles.css"); @import url("http://www.domain.com/morestyle.css"); </style>
Note that in this method, a semicolon is needed at the end of the @import statement to separate it from any following style information.
Version 1.0
15-5
Embedding style information

The embedding method defines styles for a single page and is perhaps the simplest method for using styles. The syntax for embedding a block of style information in a single document is as follows:
<!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> <style type="text/css"> <!-h1 {color: blue;font-family: "Arial";font-size: 20pt}
--> </style> </head> <body> </body> </html>
Using an inline style

inline style A style attribute added directly within HTML tags.
Inline styles are added inline to existing X/HTML tags or used in conjunction with the approved HTML 4.0 <span> tag. The <span> tag is a container tag that affects all content on the page between it and the closing </span> tag. For example, the following syntax would place a yellow highlight behind the words Habitat for Humanity:
<span style="background: yellow"> Habitat for Humanity </span>
You can use inline style definitions to add style attributes to existing X/HTML tags. The following examples demonstrate this technique:
<h1 style="color: blue;font-size:30pt">Join the Club!</h1> <p style="background: black;color:white;text-indent:.25in"> It was a dark and stormy night.</p> <ul style="font-family: Verdana"> <li>Events</li> <li>Meetings</li> </ul>
NOTE: The best criterion for deciding which style method to use is determining the frequency with which a given style will be used in a page or site.
The advantage of using inline styles is that you can designate a set of attributes with a single tag. This method should be used only for occasional style changes. If you plan to use the same inline style more than once in a page, you should consider defining it as a style element in an embedded style header block so you do not waste time repeating inline instructions.
Changeable Style Attributes

Table 15-1 is a partial list of some of the style attributes that can be changed with style variation methods. A colon and the appropriate value follow each of these attributes. Multiple attribute/value pairs can be separated with a semicolon. All should be enclosed within curly braces { }.
Version 1.0
15-6
Table 15-1: Changeable style attributes
Attribute color background backgroundimage
Sample Value
Any X/HTML color name or value. Any X/HTML color name or value; also accepts images.
Description
Sets font color. Displays a background color or background image behind this HTML element. You can use any image types your browser recognizes. Both Firefox and Internet Explorer recognize GIF and JPG file types; Internet Explorer also recognizes the BMP format.
Example
color: red background: yellow background-image: url(filename.gif) Note: When using a file for background, the url attribute must be followed with the file name in parentheses. font: 38pt Times New Roman font: light 18pt Arial
font
Bold, 14 point, Verdana.
Sets the three important attributes of a font: the weight (bold, normal or light), the size (in points), and the font name. Not all attributes must be specified. Specifies type. If multiple fonts are given, the browser uses the first in the list found on the end user's site. Sets text character size. Specifies italic type. Specifies weight, or thickness, of font. Adds or removes underline.
font-family
Times, Palatino and so forth.
font-family: Garamond font-family: Arial, Sans Serif font-size: 48pt font-size: .25in font-style: italic font-weight: bold text-decoration: underline text-decoration: none
font-size font-style font-weight text-decoration
12 point, 1 inch, 0.5 cm, 200 pixels. Italic (defaults to normal). Bold, normal, lighter. Underline or none.
line-height
150%, 75px, 1.08in.
Specifies "leading" (amount of vertical space) between lines. Specifies first-line indent for paragraphs. Affects first line only; the rest of the paragraph will wrap to the left margin setting. Sets left margin for given element. Can be set to a positive or negative number. Sets top margin for given element. Can be set to a positive or negative number. Specifies horizontal alignment of any given text element.
line-height: 90% line-height: 1.5in text-indent: .25in
text-indent
0.25in, 3em (three "em" spaces), 24pt, 50px, 3cm.
margin-left
0.25in, 3em, 24pt, 50px, 3cm.
margin-left: 1in margin-left: -4em
margin-top
0.25in., 3em, 24pt, 50px, 3cm.
margin-top: 48pt margin-top: -1.5in
text-align
Center, left, right.
text-align: center
Version 1.0
15-7
Style inheritance
inheritance The principle of passing on style definitions from parent elements to child elements. NOTE: You can practice determining overriding elements and style inheritance in Activity 15-1: Using inheritance with styles.
One of the most important benefits of style sheets is that a few simple statements can dramatically alter the appearance of large amounts of text. This benefit occurs because styles allow for inheritance. Inheritance refers to the ability for styles that you apply to an element to be passed down to child elements. For example, to set a default text style, you can define a style specification for the <body> element:
body {color: navy; font-family: Arial}
All text elements in this X/HTML document would inherit the characteristics of the <body> font. If the preceding X/HTML source code was in the style sheet file or style header block, all the other text heading levels, table text or other elements would inherit the Arial font and the navy color (except links, which have their own overriding color definitions). In the following lab, you will use embedded styles to format some elements in an existing XHTML page. Suppose you have a single promotions page on your Web site, and you want to style it somewhat differently from the other pages so it stands out to announce limited-time offers. You can embed a block of formatting instructions in your promotions page to affect just a few elements, while still retaining some of your site's standard styles and without changing other pages.
NOTE: Applying a style to an element higher in the hierarchy is more efficient than applying the same style to multiple child elements, especially when it is time to make modifications.
Lab 15-1: Creating and using embedded styles

In this lab, you will alter an XHTML page to incorporate styles for existing HTML elements in the file. 1. Browser: From the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson15\Lab_15-1 folder, open the file styles.htm. Compare your screen with Figure 15-1; they should be similar. Leave the browser window open.
Figure 15-1: File styles.htm
Version 1.0
15-8
2.
Notepad: Open the styles.htm file in your text editor. Add the source code indicated in bold:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Styles</title> <style type="text/css"> <!-body { font-family: Arial, Helvetica, sans-serif; color: navy; } --> </style> </head>
NOTE: You should understand that using an embedded style affects only the single page in which they insert the style information.
3. 4.
Save the source file styles.htm. Browser: Refresh or reopen the file styles.htm in your browser. Your screen should resemble Figure 15-2. Leave the browser window open.
Figure 15-2: File styles.htm with formatting changes
5.
Notepad: In styles.htm, change the information in the <style> block as shown in bold (delete code shown in strikethrough):
<style type="text/css"> <!-body { font-family: Arial, Helvetica, sans-serif; color: navy; } h1 { color: navy; } h2 { color: #006633; } --> </style>
Version 1.0
15-9
NOTE: What happens if you do not remove color information from the body style definition, as directed in the Tech Note?
Tech Note: Be sure to remove the color information from the body style definition as indicated. 6. 7. Save the source file styles.htm. Browser: Refresh or reopen the file styles.htm in the browser. The text color in the document should have changed so that only the level-one heading is navy, all the level-two headings are green, and body text is black.
In the following lab, you will use inline styles to format some elements in an existing XHTML page. Suppose you are restyling your Web site's single promotions page for this month's promotions. You still want to style this somewhat differently from the other pages so it stands out to announce limited-time offers. You have already embedded some formatting instructions for a few elements in this page, while still retaining some of your site's standard styles and without changing other pages. Now you want to modify one occurrence of a style you have already embedded in this page. You can use a "spanned" inline style to change the formatting of one occurrence (or more) of an otherwise styled element, because the spanned style change will override any style instructions applied above it in the hierarchy.
Lab 15-2: Applying inline styles

In this lab, you will add an inline style to your style sheet. 1.
NOTE: Be sure you understand that inline styles affect only the page in which they are inserted, and that these "spanned" style changes will override any style instructions applied above in the hierarchy.
Notepad: From the \LabFiles\Lesson15\Lab_15-2 folder, open the file styles.htm. Add the <span> tag within the first heading-level-one tag on the page as shown in bold, just after the <body> tag:
<style type="text/css"> <!-body { font-family: Arial, Helvetica, sans-serif; } h1 { color: navy; } h2 { color: #006633; } --> </style> </head> <body> <h1> <span style="color: yellow">Defining and Using Styles</span> </h1>
2.
3. 4.
Save styles.htm. Browser: Open styles.htm in your browser. The level-one heading at the top of the document should now be yellow.
Tech Note: You can use the same style properties inline with the <span> tag that you embedded in the head section of the document with the <style> tag.
Version 1.0
15-10
In the following lab, you will use a linked style sheet to format elements in an existing XHTML page. Suppose you are considering restyling all the pages in your Web site. You want to experiment with some formatting ideas before making any choices. You can create a separate style sheet that provides formatting instructions to a Web page. You can then apply this style sheet to one page on your site to test the effects you want to try. To try a new effect, you can change the style sheet and test it again on a single page. You can easily remove one or many effects from the page by again modifying the style sheet. The Web page can remain unchanged as you spend a week trying out different formatting effects. When you decide on the effects you like best, you can link this single style sheet to every page on your site by adding a simple line of code to each Web page. Then your entire site will be styled consistently with a minimum of effort. However, remember that your linked styles will be overridden by any embedded or inline style changes applied to a single page.
OBJECTIVE 3.2.4: Linking style sheet to X/HTML page
Lab 15-3: Linking to an external style sheet

In this lab, you will create an external style sheet and link it to an XHTML document. 1. Notepad: From the \LabFiles\Lesson15\Lab_15-3 folder, open the file styles.htm. Use the Edit | Cut command to cut the style block that you created in a previous lab, shown in bold:
body { font-family: Arial, Helvetica, sans-serif; } h1 { color: navy; } h2 { color: #006633; }
NOTE: Be sure you understand that a single linked style document can be applied to multiple Web pages, and that linked styles will be overridden by any embedded or inline style changes added to a single page.
2.
3. 4.
Save styles.htm. Notepad: From the \LabFiles\Lesson15\Lab_15-3 folder, open the file mystyles.css. (The mystyles.css file has no content in it.) Paste the style block that you just cut from styles.htm into this empty mystyles.css file. Tech Note: Be sure to open mystyles.css using Notepad or another text editor. You may need to right-click the file, select Open With and choose Notepad to do this. Otherwise, a CSS file might open in Dreamweaver by default if Dreamweaver is installed on your computer.
NOTE: You can use the W3C CSS Validator to validate this style sheet code in Optional Lab 15-1: Validating your style sheets.
5.
In mystyles.css, modify the style block as indicated in bold (delete code shown in strikethrough):
body { font-family: Arial, Helvetica, sans-serif; background-color: #336699; } h1 { color: navy; text-align: center; border: dotted #FFFFFF; font-style: italic;
Version 1.0
15-11
} h2 { color: #006633; } p { color: #FF9966; }
padding: 4px; background-color: #000000;
6. 7. 8.
Save mystyles.css. Notepad: Open the file styles.htm. Remove the empty style block (which contained the code you cut from this file), including the <style> tags, and replace it with the following code:
<link href="mystyles.css" rel="stylesheet" type="text/css"/>
9.
Save styles.htm.
10. Browser: Load styles.htm into your browser. The formatting changes are now applied by the external style sheet mystyles.css.
CSS selector types

As you have seen, style sheets allow you to define styles and indicate, or select, the elements to which these styles will be applied. The instruction outside of the curly braces { } that indicates the element to which the style applies is called the selector. There are two basic ways to indicate that a style should be applied to an element in an X/HTML document: by redefining tags (tag selectors), or by creating and using a class selector.
Tag selectors
All of the examples and labs so far in this lesson have used the first method to apply a style to an X/HTML element: tag selectors. With this method, you use CSS to define or redefine the style effect that an element (such as <h1>) has on the text to which it is applied. Tag selectors are easy to use because once you redefine an element for a certain document, you simply use that element as you normally would and the new style is applied to it. The limitation of tag selectors is that a style defined for an element is applied to every instance of that element in the document. For example, if you want to use tag selectors to make all <p> text be 14-point Arial, but only certain <p> elements to be underlined and red, you would need to define <p> text as 14-point Arial in an embedded or external style sheet, then apply an inline style to each individual <p> that you want to be underlined and red, as follows:
<p style="color:red; text-decoration: underline;">very important text</p>
Class selectors
Class selectors can be applied to any element. To define a class selector, you simply add a period ( . ) before the name of the selector, which you can specify to describe the purpose of the formatting (in this example, the formatting used on important text in the document). For example:
Version 1.0
15-12
.important { color: red; text-decoration: underline; }
To apply a class selector to an element, you add the class attribute to the given element tag. For example:
<p class="important"> Very Important Text </p>
Once you have defined a class selector, you can apply it to any element. For example, if you want one item in a list to appear as underlined red text, you could use the following class selector in the <li> element tag for that item:
<ul> <li class="important"> The Most Important Item </li> <li> A Less Important Item </li> <li> A Less Important Item </li> </ul>
Other selector types

Two other types of selectors with which you should familiarize yourself are the ID selector and the descendant selector. An ID selector is a type of selector that can be applied to only one element in a document. In other words, each ID selector used in a document is unique. To create an ID selector, you use the number symbol, or hash mark (#), before the name of the selector. For example:
#banner { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid gray; }
To apply the ID selector to an element, you add the id attribute to the element tag. For example:
<div id="banner"><h1>This is the page banner</h1></div>
A descendant selector offers more fine-tuned control over the formatting of specific page elements by selecting an element only when it is the descendant of another specified element. For example, suppose you had <em> elements in several paragraphs on a page, and you had a few <em> elements within an unordered list on the same page. Suppose further that you want only the <em> elements that are in the unordered list to display in red. You can use a descendant selector to select only the <em> elements within the unordered list. The syntax for a descendant selector is simply a list of the selectors separated by white space. For example:
ul em {color: red;}
In the following lab, you will experiment with using class selectors to style some elements on a page. Suppose you have completed restyling the pages in your Web site using a linked style sheet. You are pleased with the consistent look and feel you have established. However, you still want a few elements on one page your promotions page to differ somewhat so that page stands out as unique and more frequently updated. You can add class selectors to your style sheet so that you can command certain elements on any page to be formatted differently in individual occurrences. This way, you can quickly change a
Version 1.0
15-13
few elements on your promotions page without changing the rest of the site. And if you add another promotions page or want to apply this style exception elsewhere in the site, you can do so easily and quickly.
Lab 15-4: Using CSS class selectors

In this lab, you will use class selectors to apply the same style to multiple specific instances of an element in a document. 1. 2. Notepad: From the \LabFiles\Lesson15\Lab_15-4 folder, open the file mystyles.css in your text editor. Add the following style as shown at the bottom of file, after the last closing curly bracket:
} .important { color: red; text-decoration: underline; }
3. 4.
Save mystyles.css. Notepad: Open styles.htm. Edit the source code as shown in bold:
<p>X/HTML specifies <span class="important">four ways</span> to apply style ... </p> <h2 class="important">Linking to style sheets from an X/HTML file</h2>
5. 6.
Save styles.htm. Browser: Open styles.htm in your browser. It should resemble Figure 15-3. Notice that the words "four ways" and the first <h2> are now underlined and red.
Version 1.0
15-14
Figure 15-3: Class selectors used to apply same style to multiple individual elements
Style Guides
style guide A book, manual or guide specifying rules and examples of usage, punctuation, and typography; used in preparing text for publication. OBJECTIVE 2.1.6: Tools for site's visual consistency
A style guide is a standards document or manual that establishes a set of conventions or rules for performing common tasks. For example, style guides are often used by technical writers for general information, ranging from editorial style to specific guidelines for font sizes and types. Web designers frequently use style guides to provide general design guidelines for creating effective Web pages. Applying the conventions specified in a style guide helps to ensure that the site has visual consistency, making it easier to use and more professional in appearance. The related appendix (available in the supplemental files) lists URLs for some of the most popular guides. Consider adopting or creating a style guide for your organization. It will standardize your company's look and feel, and define a common format for your Web site. The style guide is also useful for integrating documents from many departments or individuals.
NOTE: Refer to the related course appendix for Web style guide resources.
Some topics you may want to include in a style guide are: Default body text styles. Default background images or colors. Rules for capitalizing or styling heading levels. Preferred methods for emphasizing text (e.g., italic or bold). Guidelines for use of images and logos (e.g., size, format and scaling). Templates for standard pages (e.g., content pages, forms, press releases). Guidelines for using navigation links and image maps.
Version 1.0
15-15
NOTE: You can try using the CSS code validation service in Optional Lab 15-1: Validating your style sheets.
Additional resources
The W3C Cascading Style Sheets (CSS) level 1 Recommendation can be found at the following URL: www.w3.org/TR/REC-CSS1 A list of CSS authoring tools is available at the following URL: www.w3.org/Style/CSS/#editors The W3C also offers a CSS code validation service at http://jigsaw.w3.org/css-validator/. When browsing on the Web, pay attention to sites that are attractive and user-friendly. Learn from the experiences of others as you develop your own site. There is no copyright on a style choice (although there may be copyrights on such elements as corporate logos or company names), so feel free to emulate your favorite styles as long as you do not violate any intellectual property laws.
Changes from CSS1 to CSS2

NOTE: CSS2 extends CSS1 by adding support for media-specific styles, tables, downloadable fonts, and element positioning. CSS2 became a W3C Recommendation in 1998.
You have delved briefly into the world of style sheets using mainly the CSS1 specification. However, it is important to understand the functionality presented by the CSS2 Recommendation as well. In Table 15-2, notice the expanded functionality of CSS2, and consider the problems these new features will solve in the online world.
Table 15-2: CSS2 features
CSS2 Function Media types
Definition
You can determine a document's appearance based on whether it will be presented on screen, in print, with a speech synthesizer or using a Braille device. Font type can be subtly changed to optimize it for reading in a specific environment (e.g., sans serif for on-screen reading, serif fonts for print media). CSS2 determines the display of paged media (such as transparencies) using a page box with finite width and height. This feature provides areas that act as page breaks between information for transfer to print media. The use of voice synthesizers for hearing-impaired users can now be optimized using aural style sheets. CSS properties also allow authors to vary the quality of synthesized speech (voice type, frequency, inflection, and so forth). Support for bi-directional text is imperative for international organizations with informational display requirements in other languages that are not read left-to-right. For example, sometimes Arabic and Hebrew scripts cause documents to render with mixed directionality. The CSS2 properties define an algorithm that ensures proper bi-directional rendering. In CSS1, all fonts were assumed to be supported on the client side. In other words, the font had to be loaded on the user's system for the page to render correctly. By contrast, CSS2 allows for improved client-side font matching, enables font synthesis and progressive rendering, and enables fonts to be downloaded from the Web. The need for the browser-proprietary <layer> tag is eliminated with CSS2, which provides a Z-axis that allows elements to be stacked on a page and displayed accordingly. Absolute positioning with style sheets allows you to form pages that resemble frames.
Paged media
Aural style sheets
Bi-directional text
Font support
Relative and absolute positioning
Version 1.0
15-16
The W3C Cascading Style Sheets level 2 revision 1 (CSS2.1) Recommendation can be found at the following URL: www.w3.org/TR/CSS2/ You can learn more about various compatibility problems with older browsers by visiting the following URL: www.richinstyle.com/bugs/
CSS3
As mentioned in a previous lesson, the CSS3 specifications are currently being developed. They will be released as separate modules that will include new functions and features for borders, backgrounds, color, text effects, box resizing, generated content, multicolumn layout and media queries.
Page Layout with CSS

CSS positioning is the recommended way to lay out Web pages, although it is still not as widely used as HTML tables. The main reason that CSS positioning was not widely used in the past was lack of browser support. Today, however, CSS is supported by all of the major browsers. Differences still exist in the way browsers implement CSS. But if you write your code carefully and test your sites on multiple browsers, CSS can provide much more precise and flexible layout capabilities than tables or frames. In addition, sites that are coded using CSS positioning are more accessible to alternative and adaptive browsers. The only factor preventing widespread adoption of CSS positioning now is the common lack of experience and knowledge among Web designers in using CSS for positioning. Fortunately, the basics of CSS positioning are actually quite simple, and they start with the box model.
The CSS Box Model

In order to understand positioning in CSS, you must understand the box model. For display purposes, CSS treats every element in a document as a box. Every box has a content area surrounded by padding, a border and margins. These components have configurable properties, which can be controlled using style sheets. This ability makes positioning with CSS possible. Figure 15-4 shows the various parts of the box model that enable CSS positioning.
Figure 15-4: CSS box model
Version 1.0
15-17
Each part of the box can be controlled by setting values for one of the four sides (top, right, bottom and left). The content area of any element box can contain any number of other boxes, creating a hierarchy of boxes that corresponds to the nesting of page elements. The browser window is the outermost, or root, box.
Block and inline boxes

There are two types of boxes in CSS: block and inline.
Inline boxes
Inline boxes are created by inline X/HTML elements such as <b> and <span>. Note that the term "inline" is used to describe both a type of element and a method of applying styles to elements in which the style is placed inside the element tag. In both cases, this term simply conveys that an element or style occurs inside of something else. Inline elements, such as text characters and images, stay on the same line as any inline elements that directly precede them. They do not form new blocks of content. Inline elements stack sideways starting from the left and extending to the right as each new inline element is read by the browser. When the available horizontal space within the containing element is no longer wide enough to hold the next inline element, that element drops to a new line and moves to the far left edge of the containing block. These types of elements are used for smaller portions of content within larger blocks. Inline boxes are used within block boxes, and are formatted as lines within the block. In the following example, the <p> element creates a block box, and the <i> element creates an inline box within the block box.
<p>Here is some <i>very important</i> text.</p>
Block boxes
Block boxes are created by block elements such as <p> and <div>, which are formatted visually as blocks or large sections of content. By default, block elements are as wide as the container that surrounds them and they always stack up vertically. Even if you change the width of a block element and make it smaller than the width of its containing element, the next block element will stack up beneath it (that is, on a new line). A block element always starts a new line; therefore, block elements do not sit side by side.
containing block A block or box that contains other elements.
Block boxes act as containing blocks for any boxes nested within them, and any boxes within a containing box are restricted to the confines of the containing block. Boxes within a containing block are called descendent boxes and are stacked one below the other. As descendent boxes are stacked, their vertical margins collapse. That is, if two
boxes are placed one below the other, the distance between their two borders will be either the bottom margin of the top box, or the top margin of the bottom box, whichever is bigger.
viewport The viewing area that displays Web pages. When the viewport is smaller than the Web page, scroll bars should be available.
For some elements, the viewport is the containing block. The viewport is the window in the browser through which the document content is viewed. When content is longer or wider than the available space in the viewport, a scroll bar is added by the browser. To render a Web page, the browser: Creates a block box for the BODY element and places this box in the containing block (the viewport).
Version 1.0
15-18
Creates boxes for all block elements inside the BODY element, stacking these one below the other. Creates boxes for any block child elements within the content area of their parent elements.
For example, the following code would be displayed as shown in Figure 15-5.
<body> <div> <p> Contents of first paragraph </p> <p> Contents of second paragraph </p> </div> <p> Contents of third paragraph </p>
</body>
Figure 15-5: Container boxes
Document Flow and Positioning

A browser renders the elements in a page according to the normal flow. In the normal flow, content flows down the page starting with the first element in the page and ending with the last element in the page. Elements are part of the normal flow unless they are specifically positioned. You will learn about positioning shortly. Figure 15-6 shows content in the normal flow.
Version 1.0
15-19
Figure 15-6: Page elements in normal flow
Elements can be taken out of the normal flow when specific types of positioning are applied. When a block is taken out of the normal flow, content that remains within the normal flow ignores it. Normal-flow text will display over or under the block that is taken out of the normal flow, as illustrated in Figure 15-7. Notice how the element that is taken out of the normal flow displays over the text that remains in the normal flow.
Figure 15-7: Elements out of normal flow
Version 1.0
15-20
The "out of flow" element shown in the figure is absolutely positioned. You will learn about absolute position shortly and examine the code that generates this page. The position property controls the positioning of an element. The position property can be set to static, relative, absolute or fixed.
Static
NOTE: "Static" is not the same as "fixed."
Static is the default value for the position property value. All normally flowed page elements are assumed to have a position property value of static. An element that is static is described as "unpositioned" because the browser will position it according to the normal document flow when it renders the page. In contrast, a "positioned" element has a position property value of relative, absolute or fixed.
Relative
A relatively positioned element is part of the normal flow, but it is shifted out of its original position. Elements that come after a relatively positioned element act as if the relatively positioned element were still in the normal flow and leave a gap for it. Figure 15-8 shows an example of relatively positioned content that is shifted 10 pixels from its original left position and shifted 10 pixels from its original top position. Notice how the rest of the content leaves a gap for the relatively positioned content.
Figure 15-8: Relatively positioned content
The code for the page in this figure is as follows:

<!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>CSS layout</title> <style type="text/css"> <!-#relative { position: relative;
Version 1.0
15-21
left: 10px; top: 10px; background-color: #FFCCFF; } --> </style> </head> <body> <h2>Normal Flow content</h2> <p>Mauris ut diam. Cras euismod fermentum est. ...</p> <p>Donec massa pede, vestibulum ... tellus. <span id="relative">Relatively positioned content. Relatively positioned content.</span> Class aptent taciti sociosqu ad litora torquent... </p> <p>Lorem ipsum dolor sit amet, consectetuer... </p> <p>Mauris varius magna... </p> </body> </html>
Notice that the code for this page uses an ID selector and the id attribute of the <span> element. Remember that unlike the class attribute, the id attribute can only be applied to one element in a document. Each id used in a document is unique. This makes the id attribute ideal for positioning an element that will appear only once in a document, such as this one block of relatively positioned text.
Absolute
An absolutely positioned element is positioned at specified coordinates relative to its containing block. The position is specified using the top, right, bottom and left properties. You have already seen an example of an absolutely positioned element in Figure 15-7: Elements out of normal flow. The code for the page shown in Figure 15-7 is as follows:
<!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>CSS layout</title> <style type="text/css"> <!-#outofnormal { position: absolute; left: 300px; top: 100px; width: 200px; padding: 10px; background-color: #FFCCFF; } --> </style> </head> <body> <div> <h1>Normal Flow content</h1> <p>Mauris ut diam. Cras euismod fermentum est. Nullam ...</p> <p>Donec massa pede, vestibulum ut, rhoncus faucibus, ...</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing ...</p> </div> <div id="outofnormal"> <h2>Out of flow</h2> <p>Mauris varius magna scelerisque turpis. Donec semper ...</p> </div> </body> </html>
Version 1.0
15-22
This code sample uses the <div> element, which is similar to the <p> tag in that it is a block-level element. This means content that follows the opening <div> tag will appear on the next line by default. Compare this behavior to the way an element such as <b> works. The <b> tag is an example of an inline element because it does not create a new line. The <div> element is used to create document divisions. The second <div> element defined in the document uses the id attribute to get its position. Absolutely positioned elements are moved out of the normal flow entirely.
Fixed
An element with a fixed position is positioned at specified coordinates relative to the browser window (viewport), and therefore remains in that position regardless of scrolling. The position is specified using the top, right, bottom and left properties. Figure 15-9 shows two views of the same page: the first shows the top of the page, and the second shows the page scrolled to the bottom of the window. Notice how the fixed element remains in the same position and does not scroll out of view.
Figure 15-9: Content with fixed position
The code for the page shown in this figure is as follows:

<!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>CSS layout</title> <style type="text/css"> <!-#fixme { position: fixed; left: 300px; top: 50px; width: 200px; padding: 10px; background-color: #FFCCFF; } --> </style> </head> <body> <div> <h1>Normal Flow Content</h1> <p>Mauris ut diam. Cras euismod fermentum est. ...</p> <p>Donec massa pede, vestibulum ut, rhoncus ...</p> <p>Lorem ipsum dolor sit amet, consectetuer ...</p> <p>Mauris ut diam. Cras euismod fermentum ...</p> <p>Donec massa pede, vestibulum ut, rhoncus ...</p> <p>Lorem ipsum dolor sit amet, consectetuer ...</p>
Version 1.0
15-23
</div> <div id="fixme"> <h2>Fixed position content</h2> <p>Mauris varius magna scelerisque turpis. Donec semper ...</p> </div> </body> </html>
Float
When you apply float to an element, it becomes a block box that can be shifted to the left or right on the current line. A floated box is laid out according to the normal flow and then taken out of the flow and shifted to the left or right as far as possible, allowing content to flow down the left side of a right-floated box, or down the right side of a leftfloated box. Figure 15-10 shows a Web page with an image that is floated left.
Figure 15-10: Image with float applied

NOTE: You will use the clear property in Lab 15-5: Creating a basic two-column layout with CSS.
Block-level elements above a floated element are not affected by the floated element, but elements below a floated element will wrap around the floated element, as shown in Figure 15-10. If you do not want subsequent elements to wrap around a floated element, you must use the clear property to force an element below any floated elements above it. The clear property sets the sides of an element where other floating elements are not allowed. The possible values for the clear property are left, right, both and none. For example, clear: both disallows floating elements on both the left and right sides, while clear: none allows floating elements on both sides. The code for the page shown in Figure 15-10 is as follows:
<!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>CSS layout</title>
Version 1.0
15-24
<style type="text/css"> <!-.floatleft { float:left; margin-right: 20px; } --> </style> </head> <body> <div> <h2>Image -- float: left</h2> <p>Mauris ut diam. Cras euismod fermentum est. Nullam dignissim ... </p> <p><img class="floatleft" src="stars.jpg"/>Donec massa pede, ... </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing ... </p> </div> </body> </html>
Note that the code for this page uses a class selector. The floatleft selector can be applied to more than one element in the page. The 20-pixel right margin adds white space between the image and the text that flows around it. This code example applies float to an image, which has an implicit width. If you apply float to a <div> element, you should specify a width. For example:
.floatleft { float:left; width: 145px; margin-right: 20px;
} A floated box will move to the right or left until its outer edge touches the edge of its containing block or touches the edge of another floated box. If there is not enough horizontal room on the current line for a floated element, it will move down (line by line) until there is a line with sufficient room.
Z-index
In CSS 2.1, each box has a position in three dimensions. In addition to a horizontal and vertical position, boxes lie along a z-axis (which is perpendicular to the screen) and are formatted one on top of another. This means that with CSS, you can position boxes on layers in addition to the normal rendering layer (layer 0).
z-index A value that determines a box's stacking order along the z-axis.
The z-index, therefore, becomes important when you work with elements that are removed from the normal document flow. The z-index setting determines the stacking order of elements within the same containing block (stacking context). Elements with a higher z-index number are closer to the top of the stack (that is, closer to you). The z-index applies only to objects that have the position property set to relative, fixed or absolute. Each box has an associated stack level, which is its position along the z-axis, and belongs to a stacking context. The possible values for the z-index setting are positive and negative integers, and auto. Stacking level is inherited. Therefore, if the z-index is set to auto, then the block inherits its stacking level from its parent (or ancestor) and does not establish a new stacking
Version 1.0
15-25
context. If there is no z-index specified, elements in the same stacking context are stacked in the following order (from back to front): 1. 2. 3. Boxes in the normal flow, according to the order they appear in the source code Floating boxes Positioned boxes, according to the order they appear in the source code
However, if you specify a value for the z-index, you change the stack level of the box in the current stacking context and you establish a new local stacking context, which will apply to any elements contained within the box. The box itself has a stack level of 0 in the new local stacking context. It is important to remember that any layering that occurs within the new local stacking context remains within the stacking context of the parent layer. That is, if you give a <div> element a z-index value of 3, and you nest an element inside it and give that element a z-index value of 7, that nested element will still have a stack level of 3 in the context of the rest of the page, or in the context of the containing block of the parent <div> element. For more information on z-index and stacking contexts, see the CSS 2.1 Appendix E. Elaborate Description of Stacking Contexts at www.w3.org/TR/CSS21/zindex.html.
CSS Positioning Schemes

CSS has three basic ways that elements can be positioned: normal, float and absolute. Normal is the default scheme for positioning. It is used for any element that does not have a float property or absolute positioning specified. In normal positioning, block elements are stacked on top of each other as you would expect them to be in an X/HTML document. Inline elements flow from left to right within blocks. As you have seen, the float property can be applied to an element to shift a box as far as possible to either the left or the right. Floated boxes still follow the same rules as boxes using normal flow. For example, if two boxes are floated to the left, the one that appears first or highest in the document code will appear on the page above the content that follows it. Absolute positioning allows you to remove boxes from normal flow and position them precisely within their containing box. To use absolute positioning, set the position property to absolute or fixed. You can then specify the exact top, right, bottom and left positions of the element. You can combine these schemes to easily create two- and three-column layouts using CSS.
Two-column layout: Using divs

Creating a basic two-column layout with CSS involves structuring your document into the appropriate divisions. These divisions are often called "divs." Using divs, you can apply float, margins and padding to the sections on the page. As you design pages when using positioning, you will refer to each section of your page as a particular "div." In the following lab, you will use CSS positioning to create a basic two-column layout. Suppose your supervisor tells you that you will be creating a Web page that requires a
Version 1.0
15-26
two-column layout. The actual text is not available yet, but you need to begin work on the basic layout. You can begin with placeholder text and add positioning to the various elements in order to see how your layout will render in a browser.
Lab 15-5: Creating a basic two-column layout with CSS

In this lab, you will create a basic two-column layout using CSS and placeholder text. 1. 2. Browser: From the \LabFiles\Lesson15\Lab_15-5 folder, open the file TwoColumn.htm. Keep the browser window open. Notepad: To see the existing structure of the page, open Two-Column.htm in a text editor. Notice that there are currently no styles defined, but that the page is structured into five divisions, each with a unique id. The defined divs are listed below. The wrapper div contains the other four and encompasses all the contents of the page. The top div will contain the top banner for the page. The leftnav div will constitute the smaller left column. The maincontent div will contain the main content of the page in a wider right column. The footer div will contain the footer that will display across the bottom of the page.
<div <div <div <div <div id="wrapper"> id="top"> id="leftnav"> id="maincontent"> id="footer">
3.
In Two-Column.htm, add the style block shown in bold to the style section:
#wrapper { width: 90%; margin: 10px auto; } #top { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid black; }
4.
Save Two-Column.htm, then refresh the browser window. Notice that by setting the width of the wrapper div to 90%, the content moves in from the left and right edges of the browser window. The margin property margin: 10px auto sets the top and bottom margins to 10 pixels and sets the left and right margins to auto. Setting the left and right margins to auto centers the wrapper div in the window. Your window should appear as shown in Figure 15-11.
Version 1.0
15-27
Figure 15-11: Styling top banner
5.
Notepad: In Two-Column.htm, modify the style block as indicated, adding the items shown in bold:
#top { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid black; } #leftnav { float: left; width: 160px; margin: 0; padding: 1em; }
6.
Save your changes and refresh the page in your browser. Notice that the leftnav div has been floated left and that the text in the maincontent div flows down its left edge and then wraps beneath it. In order to make the content in the maincontent div appear as if it is in a column, you can apply a left margin that is wider than the width of the leftnav div. Adding a left border and some padding to the maincontent div improves its appearance. Notepad: In Two-Column.htm, modify the style block as indicated, adding the items shown in bold:
#leftnav { float: left; width: 160px; margin: 0; padding: 1em; } #maincontent { margin-left: 200px; border-left: 1px solid black; padding: 1em; }
7.
Version 1.0
15-28
8.
Save Two-Column.htm and refresh the page in your browser. Your screen should appear as shown in Figure 15-12.
Figure 15-12: Achieving two-column look
9.
Notepad: In Two-Column.htm, modify the style block as indicated, adding the items shown in bold:
#maincontent { margin-left: 200px; border-left: 1px solid black; padding: 1em; } #footer { clear: both; margin: 0; padding: .5em; color: #333333; background-color: #CC99FF; border-top: 1px solid black; }
10. Save Two-Column.htm and refresh the page in your browser. In the last steps of this lab, you will use descendent selectors to adjust specific elements in the top, leftnav and maincontent divs. 11. Notepad: In Two-Column.htm, modify the style block as indicated, adding the items shown in bold:
#top { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid black;
} #top h1 { padding: 0; margin: 0; }
Version 1.0
15-29
NOTE: Remember that when using this shorthand notation, margins are specified in the following order: top, right, bottom and left.
12. Notepad: In Two-Column.htm, modify the style block as indicated, adding the items shown in bold:
#footer { clear: both; margin: 0; padding: .5em; color: #333333; background-color: #CC99FF; border-top: 1px solid black; } #leftnav p { margin: 0 0 1em 0;} #maincontent h2 { margin: 0 0 .5em 0;}
13. Save Two-Column.htm and refresh the page in your browser. Your page should appear as shown in Figure 15-13.
Figure 15-13: Two-column layout complete
14. Close all open windows. In this lab, you used CSS positioning to create a two-column layout.
Three-column layout
Creating a basic three-column layout with CSS is much like creating a two-column layout. The steps you will perform in this lab are similar to those in the previous lab. In this lab, however, you will apply both float:left and float:right properties, and you will format both the right and left margins of the center maincontent div. In the following lab, you will use CSS positioning to create a three-column layout. Suppose your supervisor tells you that you will be creating a Web page that requires a three-column layout. The actual text is not available yet, but you need to begin work on the basic layout. You can begin with placeholder text and add positioning to the various elements in order to see how your layout will render in a browser.
Version 1.0
15-30
Lab 15-6: Creating a three-column layout with CSS

In this lab, you will create a three-column layout using CSS and placeholder text. 1. 2. Browser: From the \LabFiles\Lesson15\Lab_15-6 folder, open the file ThreeColumn.htm. Keep the browser window open. Notepad: To see the existing structure of the page, open Three-Column.htm in a text editor. Notice that there are currently no styles defined, but that the page is structured into six divisions, each with a unique id. The defined divs are listed below. The wrapper div contains the other five and encompasses all the contents of the page. The top div will contain the top banner for the page. The leftnav div will constitute a narrow left column. The rightnav div will constitute a narrow right column. The maincontent div will contain the main content of the page in a wider column than those formed by the leftnav and rightnav divs. The footer div will contain the footer that will display across the bottom of the page.
<div <div <div <div <div <div id="wrapper"> id="top"> id="leftnav"> id="rightnav"> id="maincontent"> id="footer">
3.
In Three-Column.htm, add the style block shown in bold to the style section to set the width for the containing block for the page and to center the top div in the window:
#wrapper { width: 90%; margin: 10px auto; } #top { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid black; }
4. 5.
Save Three-Column.htm. Notepad: In Three-Column.htm, modify the style block as indicated, adding the items shown in bold to float the leftnav div to the left:
#top { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid black;
#leftnav { float: left; width: 160px; margin: 0; padding: 1em; }
Version 1.0
15-31
6.
Notepad: In Three-Column.htm, modify the style block as indicated, adding the items shown in bold to float the rightnav div to the right:
#leftnav { float: left; width: 160px; margin: 0; padding: 1em; } #rightnav { float: right; width: 160px; margin: 0; padding: 1em; }
7.
Save your changes and refresh the page in your browser. Notice that the leftnav div has been floated left, the rightnav div has been floated to the right, and that the remaining text flows down between the left and right edges of the floated divs and then wraps beneath both of them, as shown in Figure 15-14.
Figure 15-14: Adding float left and float right
8.
In order to make the content in the maincontent div appear as if it is in a column that falls between the leftnav and rightnav divs, you can apply a left margin that is wider than the width of the leftnav div, and a right margin that is wider than the width of the rightnav div. Adding left and right borders and some padding to the maincontent div improves its appearance. Notepad: In Three-Column.htm, modify the style block as indicated, adding the items shown in bold to format the maincontent div:
#rightnav { float: right; width: 160px; margin: 0; padding: 1em; }
9.
Version 1.0
15-32
#maincontent { margin-left: 200px; border-left: 1px solid black; margin-right: 200px; border-right: 1px solid black; padding: 1em; }
10. Save Three-Column.htm and refresh the page in your browser. Your screen should appear as shown in Figure 15-15.
Figure 15-15: Formatting maincontent div
11. Notepad: In Three-Column.htm, modify the style block as indicated, adding the items shown in bold to format the footer div:
#maincontent { margin-left: 200px; border-left: 1px solid black; margin-right: 200px; border-right: 1px solid black; padding: 1em; } #footer { clear: both; margin: 0; padding: .5em; color: #333333; background-color: #CC99FF; border-top: 1px solid black; }
12. Notepad: In Three-Column.htm, modify the style block as indicated, adding the items shown in bold to adjust the padding and margin for the heading in the top div:
#top { padding: .5em; background-color: #FFCCFF; border-bottom: 1px solid black; }
Version 1.0
15-33
#top h1 { padding: 0; margin: 0; }
13. Notepad: In Three-Column.htm, modify the style block as indicated, adding the items shown in bold to adjust properties for specific elements in the leftnav, rightnav and maincontent divs:
#footer { clear: both; margin: 0; padding: .5em; color: #333333; background-color: #CC99FF; border-top: 1px solid black; } #leftnav p, #rightnav p { margin: 0 0 1em 0;} #maincontent h2 { margin: 0 0 .5em 0;}
14. Save Three-Column.htm and refresh the page in your browser. Your page should appear as shown in Figure 15-16.
Figure 15-16: Three-column layout complete
15. Close all open windows. In this lab, you used CSS positioning to create a three-column layout. In the following lab, you will convert a page that uses X/HTML tables for the page layout to use CSS positioning instead. Suppose your company wants to update its Web site to comply with current W3C standards and recommendations. Your Web pages were originally developed long ago and still use the original table page structures with which they were constructed. You can convert these table-based page structures to use CSS positioning and still retain the same display effect. Your converted pages will now comply with W3C recommendations, making them more accessible to more Web users.
Version 1.0
15-34
Lab 15-7: Converting a table-based page layout to CSS positioning

In this lab, you will begin to convert a Web page that uses tables for its page layout so that it will use CSS positioning instead. 1. 2. Browser: From the \LabFiles\Lesson15\Lab_15-7 folder, open the file tour4.htm. Notepad: To see exactly how this page was created with a table layout, open tour4.htm in a text editor and temporarily reset the border attributes of the <table> elements (there are two in this file) from border="0" to border="1". Save tour4.htm, then reload or refresh it in your browser. Browser: View tour4.htm again, noting the table structures used to lay out the page. This page uses two tables stacked on top of each other. Notepad: In tour4.htm, find the XHTML code that creates the top table containing the Habitat for Humanity logo and the navigation links. This table has two columns and one row. The second column contains another table that is used to format the navigation links. Note: You can change the border attribute values back to "0" if you like, or you can leave them as border="1". These values are not important to the rest of the lab. 5. In tour4.htm, add comments to the code to clarify the purpose of each table cell, as shown in bold:
<table cellspacing="0" cellpadding="0" border="0" width="560"> <tr> <td>  <img src="tourhead.gif" height="30" width="299" border="0" hspace="0"> <br> <br>  </td> <td align="right" valign="top">  <table cellspacing="0" cellpadding="0"> <tr> <td align="right"> About Habitat:<br>About this site: </td> <td align="left"> <a href="1.html">1</a> <a href="2.html">2</a><br> <a href="3.html">3</a> <b>4</b> </td> </tr> </table>  </td> </tr> </table>
3. 4.
Version 1.0
15-35
6.
Replace the table code for the first table with <div> elements and assign an id attribute to each div, as shown in bold:
<table cellspacing="0" cellpadding="0" border = "0" width="560"> <tr> <td> <div id="topbar"> <div id="leftcontent">  <img src="tourhead.gif" height="30" width="299" border="0" hspace="0"> <br> <br>  </td> <td align="right" valign="top"> </div> <div id="rightcontent">  <table cellspacing="0" cellpadding="0"> <tr> <td align="right"> About Habitat:<br>About this site: </td> <td align="left"> <a href="1.html">1</a> <a href="2.html">2</a><br> <a href="3.html">3</a> <b>4</b> </td> </tr> </table>  </td> </tr> </table> </div> </div>
7.
Within the <head> section of tour4.htm, create the following styles to replicate the structure that was provided by the table.
<head> <title>Habitat for Humanity Int'l -- A Brief Introduction</title> <link href="http://www.habitat.org/HFHI_styles.css" type="text/css" rel="stylesheet"> <style type="text/css"> <!-#topbar { width: 560px; } #rightcontent { float: right; } #leftcontent { } --> </style> </head>
8. 9.
Save this file as tour4_converted.htm. Browser: Open tour4_converted.htm in your browser. The page should resemble Figure 15-17 (if you set the border attribute values back to "0"). If you did not change
Version 1.0
15-36
the border attribute value back to "0", the borders for the table in the image area will still be visible. Note that the navigation table (the second table structure, which you retained) is in the correct place horizontally, but is underneath the logo instead of at the same vertical level. The reason for this is that the "leftcontent" block comes before the "rightcontent" block in the document and is using the default flow setting of "normal." This causes the next element (<div id="rightcontent">) to be placed below it.
Figure 15-17: File tour4_converted.htm using CSS positioning instead of table for page layout
10. Notepad: In the tour4_converted.htm source code file, switch the placement of the "rightcontent" and "leftcontent" blocks by cutting the <div id="leftcontent"> </div> section from where it is and pasting it in below the <div id="rightcontent"> </div> section, as shown:
<div id="topbar"> <div id="leftcontent">  <img src="tourhead.gif" height="30" width="299" border="0" hspace="0"> <br> <br>  </div> <div id="rightcontent">  <table cellspacing="0" cellpadding="0"> <tr> <td align="right"> About Habitat:<br>About this site: </td> <td align="left"> <a href="1.html">1</a> <a href="2.html">2</a><br> <a href="3.html">3</a> <b>4</b> </td> </tr> </table> 
Version 1.0
15-37
</div> <div id="leftcontent">  <img src="tourhead.gif" height="30" width="299" border="0" hspace="0"> <br> <br>  </div> </div>
11. Save tour4_converted.htm. 12. Browser: Open (or refresh) tour4_converted.htm in your browser. Your page should look like the one shown in Figure 15-18.
Figure 15-18: File tour4_converted.htm with vertical alignment adjusted
13. Browser: Open tour4.htm. Switch between the two files and compare the way they look. In a browser that supports CSS, the two documents should appear identical. 14. Close all open files. In this lab, you began the process of converting a Web page from a table layout to a layout that uses CSS positioning for page structure. To complete the conversion of this page, you would simply repeat the steps in this lab for each table on the page.
Version 1.0
15-38
Case Study
Font Frenzy
Reiko was just hired as the Webmaster for Soup 2 You, a startup company that delivers soup and salads from local restaurants to offices. Soup 2 You just secured its first restaurant partner, so Reiko needed to create and launch the company Web site as quickly as possible. The restaurant provided a menu that contained headers, lists and paragraph text. The restaurant wanted all text on its page of the Soup 2 You site to appear in the Comic Sans font. Reiko knew that the "best" way to format the site would be with CSS, but she was not as familiar with using CSS as she was with the <font> tag. In addition, to speed up development, the company had supplied her with an HTML editing application that allowed her to simply select text and apply fonts to it using <font> tags. So in the interest of posting the site as quickly as possible, Reiko simply applied <font> tags to every section of text on the page. When the site was done, she showed the partner restaurant's page to representatives from the restaurant, along with the rest of the site. After seeing the entire site, the restaurant reps did not like the way their page looked with everything in Comic Sans font. They requested that Reiko change their page's font to something more common, such as Arial, and perhaps add some italic formatting to key information. Their page would still be unique to the site because the rest of the site used the Times New Roman font. Reiko decided to do it the right way this time. She started by deleting all of the <font> tags from the Web site. Then she created an external style sheet with some selectors, and linked the style sheet to all the site's pages, including the restaurant's menu Web page. * * *
Consider this scenario and answer the following questions. What selector did Reiko define to change all the text on the restaurant's page to Arial font? What selector did Reiko define to apply italic formatting to some text on the restaurant's page? How will Reiko's decision to use style sheets on this Web site affect her development efforts as the Soup 2 You business continues to expand and gains more restaurant partners?
Version 1.0
15-39
Lesson Summary
Application project
Style sheets can be a powerful tool for Web authors. Think about the time you can save by changing a style in one place instead of changing many individual X/HTML tags throughout the Web page. Attaching external style sheets can be even more useful because this method allows you to change the look of an entire Web site by changing a single file. CSS positioning is a much more flexible way to structure Web pages than using tables or frames. Today, the vast majority of Web browsers in use have enough support for CSS to make it possible for Web pages to be laid out using CSS positioning. The benefits of doing so include cleaner code, more flexible layouts, and better support for adaptive Web browsers plus compliance with current and future X/HTML standards. To learn more about CSS and practice using this standard, visit the W3Schools site at www.w3schools.com/css/default.asp. Check out the CSS Examples, perform the CSS Tutorial and take the CSS Quiz to sharpen your skills.
Skills review
In this lesson, you learned how cascading style sheets can be used to apply styles to all X/HTML elements in a document. You also studied various ways to apply styles, including linking to a master style sheet that allows control of multiple documents. Finally, you used CSS positioning with the <div> tag to lay out a Web page's structure, which is the W3C-recommended alternative to using tables for page layout. Now that you have completed this lesson, you should be able to: 2.1.6: Apply strategies and tools for visual consistency to Web pages and site (e.g., style guides, page templates, image placement, navigation aids). 3.2.3: Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1, CSS2 and CSS3) using various methods (e.g., linking, embedding, inline), and use style sheets to simplify Web design. 3.2.4: Create an external style sheet and link it to an X/HTML document.
Version 1.0
15-40
Lesson 15 Review
1. What is a style sheet?
2.
What does the term "cascading style sheets" mean?
3.
Name at least three text style elements that can be changed with style sheets.
4.
What is a style guide, and how is it relevant to a Web designer?
5.
Name at least two significant changes from the CSS1 specification to the CSS2 specification.
6.
When would you want to use a class selector rather than a tag selector in your style sheet formatting?
Version 1.0
15-41

Version 1.0
15-42
Activity 15-1: Using inheritance with styles

In this activity, you will outline some Web site style elements to determine inheriting and overriding elements. Listing style elements in this way may help you determine which method you should use to apply each style variation to your Web pages. Write your answers in the spaces provided. 1. Imagine that you are planning a Web site that will use cascading style sheets for formatting. Consider your own Web site or a theoretical three-page Web site for the purposes of this activity. Choose several style elements that you will apply overall to your Web site, such as background color or font face. Write these style elements here. These will be your default site styles.
2.
3.
Choose some style elements that will apply to only certain parts of all your Web pages, such as the font or color of certain heading levels. Write these style elements here.
4.
Choose some style elements that will apply to your Web pages infrequently or only once, such as a table background color or a specialized font for one paragraph. Write these style elements here.
5.
Consider the style elements you specified in Step 2. These elements will appear as the default styles for your entire site. Which methods should you use to apply styles to these elements, and why?
6.
Consider the style elements you specified in Step 3. These elements will appear on all pages of your site but will affect only certain parts of each page. Which methods could you use to apply styles to these elements, and why?
Version 1.0
15-43
7.
Consider the style elements you specified in Step 4. These elements will appear infrequently, on a single page of your site or as a single occurrence. Which methods should you use to apply styles to these elements, and why?
8.
To change a default style (such as one you specified in Step 2) to another style in only some areas (as you specified in Steps 3 and 4), the new style must override the default style. Which methods of applying styles override which other methods?
9.
List the elements you cited in Steps 2, 3 and 4 in outline format on a sheet of paper (that is, write default elements closer to the left margin, with more specific elements subordinated and indented under the default elements). Write the best method for applying the style next to each element. Figure A15-1 shows an example of this type of outline. Do you see a pattern in the hierarchies between the elements and the methods for applying their styles? Do you think this outline approach could help you style your Web pages using CSS?
Figure A15-1: Example of style outline showing inheritance
Version 1.0
15-44
Optional Lab 15-1: Validating your style sheets

In this optional lab, you will use the W3C CSS Validation Service to test your style sheet code for validity. 1. 2. Browser: In the Address field, enter www.w3.org to access the W3C home page. W3C home page: Click the W3C A to Z link on the left side of the page, then click CSS Validator in the W3C A to Z column. You should see the W3C CSS Validation Service page, as shown in Figure OL15-1. This page is located at http://jigsaw.w3.org/css-validator/.
Figure OL15-1: W3C CSS Validation Service page
3.
The W3C CSS Validator allows you to provide a link to a CSS file, upload a CSS file, or paste in CSS code for validation. For the purposes of this lab, you will use the CSS Validator's direct input method. Click the By Direct Input hyperlink. Notepad: From the \LabFiles\Lesson15\OptLab_15-1 folder, open the file mystyles.css, which is a copy of the style sheet file you created in this lesson's labs. Select all the code in this text file and copy it. Browser: Paste the mystyles.css code you just copied into the empty Validate By Direct Input text box in the CSS Validator, as shown in Figure OL15-2.
4.
5.
Version 1.0
15-45
Figure OL15-2: Pasting CSS code into W3C CSS Validator
6.
Click the Check button. The CSS Validator will automatically check your CSS code for errors and other potential problems. Read the results returned for your CSS code, which should resemble those shown in Figure OL15-3.
Figure OL15-3: Results from CSS Validator
7.
Browser: You should see that no errors were found. You will also see a list of the valid CSS information from your code.
Version 1.0
15-46
8. 9.
Click your browser's Back button to return to the page with the Validate By Direct Input text box. The text box should still contain the code from mystyles.css. Browser: Make this code invalid by deleting one of the closing brackets. Click the Check button to submit this modified code to the validator. What did your results say this time? Notice that the validator specifies the location of the erroneous code so you can check it, although it may not specify the exact error or the correction needed.
10. Click your browser's Back button to return to the page with the Validate By Direct Input text box. The text box should still contain the code from mystyles.css. 11. Browser: Re-type the closing bracket you deleted in Step 9, then add the following code just below the mystyles.css code:
checkthisout { azimuth: behind; }
12. Click the Check button to submit this modified code to the validator. Notice that this CSS code contains no errors. Azimuth is a property that is used with aural style sheets to specify where the sound is placed spatially in a stereo or surround-sound system. Remember that CSS can be used to style any elements on a Web page, even if they are not part of X/HTML. Also consider that CSS can be used for more than just visual formatting. Tech Note: For more information about aural style sheets, see the Aural Style Sheets page of the CSS2 specification at www.w3.org/TR/CSS2/aural.html. 13. If time permits: You can also try performing this lab by choosing to upload your CSS file instead of copying and pasting your code in the validator's text area (see Step 4 to begin with the mystyles.css file). With the Validate By File Upload approach, you can browse to the mystyles.css file on your computer, and the validator will upload the code automatically. The Validate By URI option requires you to have a fully qualified URL for a style sheet posted on the Web. Validating your CSS code is a worthwhile practice, especially when you are still learning how to create style sheets. The W3C CSS Validator can help you troubleshoot your CSS files and learn ways of writing cleaner, more precise code in the future.
Version 1.0
15-47
Lesson 15 Quiz
1. The W3C Recommendation for Cascading Style Sheets (CSS1) specifies four ways to apply style variations. Which of these four techniques can be used to define styles in a block for a single page? a. b. c. d. 2. Linked Imported Embedded Inline
Which of the four techniques for applying style sheets can be used to define styles in a Web page's existing X/HTML tags or in conjunction with the <span> tag? a. b. c. d. Linked Imported Embedded Inline
3.
Which of the four techniques for applying style sheets allows you to create an external style sheet that can be used across multiple pages, and functions in the widest possible range of browsers? a. b. c. d. Linked Imported Embedded Inline
4.
Which of the following is the correct X/HTML syntax to link your Web page to an external style sheet named "style.css"? a. b. c. d. <a href="style.css" type="text/css"> <span type="text/css" link="style.css"> <link rel="stylesheet" type="text/css" href="style.css"> <style rel="stylesheet" type="text/css" href="style.css">
5.
When using CSS positioning to lay out a Web page's structure, which property of a block-level element can you modify to easily create a two-column page layout? a. b. c. d. float padding border height
Version 1.0
15-48
Version 1.0
16Lesson 16: Site Content and Metadata

Objectives
By the end of this lesson, you will be able to: 1.3.7: Consider nature and purpose of site content (e.g., audience appropriateness, intended vs. unintended audience, potentially offensive content, offensive vs. illegal content, global and cultural perspectives). 2.2.8: Develop or obtain written content that conveys the site's message, including clear and concise writing, professional editing, style guides, consistency, jargon, voice and tone (professional, formal, informal). 3.2.1: Add metadata tags and content to X/HTML documents to influence search engine placement (includes refining <meta> tags in existing pages). 4.4.1: Discuss organic and non-organic strategies for improving hit rates and search engine ranking (e.g., search engine optimization [SEO] vs. pay per click [PPC] strategies). 4.4.2: Define common search engine optimization (SEO) terms (e.g., keywords, keyword density, stop words, results pages, reciprocal links, black-hat SEO). 4.4.3: Identify common valid SEO techniques (e.g., writing quality Web copy, structuring pages using validated HTML and CSS, using page titles, using metadata, using on-site and off-site practices). 4.4.4: Define Web analytics, including discussing key events to review on a Web server. 4.4.5: Identify ways that search engines generate revenue by processing search entries from users. 4.4.6: Create a blog-writing strategy to support a brand, including key elements of a successful blog entry (e.g., brevity, central idea, clever title, links to relevant articles, configuring trackbacks).
16-2
1. Is it acceptable to use jargon on a Web site? If so, when?
2.
Which tag precedes the opening <html> tag in an X/HTML document and identifies the version of X/HTML used in that document?
3.
Which type of Web site information can be specified using a <meta> tag? a. b. c. d. Keywords for use by a search engine The X/HTML version used in the document Links to similar sites in case the server is not functioning An alternative address for a non-frames or non-multimedia version of the site
Version 1.0
Lesson 16: Site Content and Metadata
16-3
Written Web Site Content

Because Web site content is protected by laws such as copyright and trademark, you must ensure that any content you use on your Web site is either your own original content and thus protected from unauthorized use by others or borrowed content that you have proper permission to use. Licensing other developers' content for your site was discussed in an earlier lesson about legal issues. This lesson section focuses on the development of original written content for your Web sites. Search engines will reward you for having well-written content. If you want your pages to be ranked higher on search engine results pages, you will want to abide by the advice given in the following sections. A well-written page forms the foundation for search engine optimization (SEO).
Developing content for the Web

OBJECTIVE 2.2.8: Written site content
Your Web site's written content is generally most of the data it provides to Web users. Writing content for the Web is different from writing for marketing materials or other printed media. Although the marketing department of your company (or the company for which you are developing a Web site) may have plenty of marketing text available already, this text must be adapted for the Web if it is to be used. Why is writing for the Web different than writing for print? As discussed earlier in this course, people do not read as much on the Web as they do in print rather, they tend to scan on the Web, looking for relevant data. Therefore, information written for use on a Web site must be clear and brief. It is also helpful to represent your concepts visually when possible, as long as you provide a means for visual content to be accessible to alternative browsers.
NOTE: Can you recall visiting any sites that you thought had too much written content? How did it affect your visit to the site? How did it affect your opinion of the site?
Following are some tips to consider when developing Web content: Keep text concise, clear and to the point. Professional writers and editors can help you achieve this goal. Divide long paragraphs into multiple paragraphs. Divide long articles or information areas into multiple pages. Your page is starting to get too long if you need to scroll down to read all of the content. Use keywords. Search engines look for particular words and phrases relevant to the topic you are discussing or the product you are selling. Take the time to find out what these keywords are, and use them wisely. Stay on subject, and keep text relevant to the purpose of the site or page on which it appears. Your site's message will be stronger. Use language style and tone consistently to help strengthen your site's message. Professional editors and style guides can help apply this type of consistency. Use industry-specific jargon sparingly, if at all. Jargon can be appropriate if it is familiar to your audience, but consider that it may alienate some users who do not know the meanings of jargon terms. Unless you know your audience will be exclusive and understand the terms, you should define any jargon you use. Avoid misleading or inaccurate statements about products and services. There is no advantage to keeping users at your site longer only for them to eventually learn
Version 1.0
16-4
that they have wasted their time there. Deliberately false claims may even invite legal repercussions. Use titles properly. Make sure that you do not overuse titles. Using titles two or three times on a page is sufficient. Titles should include keywords relevant to your page.
Professional writing and editing

Ideally, your budget will allow you to hire a professional writer to develop content for your site. Even so, you must review the materials developed to ensure that they are accurate, and appropriate for your Web site's purpose and for the Web in general. If you cannot hire a professional writer, you must either adapt existing marketing materials (on your own or with the marketing department) or write your own material. It is also useful to hire a professional editor to review the site content you prepare. He or she can correct spelling and grammatical errors, eliminate wordiness to produce more concise text, apply consistency in language style and tone, and offer objective suggestions for content organization. These services help to create site content that exudes planning and professionalism, which can give your Web users more confidence in your company's abilities and products.
Style guides and fact checking

As discussed in the previous lesson, a style guide is a useful tool for developing Web content, because it establishes a set of conventions or rules to follow. A professional editor can apply the conventions specified in your company's style guide. If you do not have a style guide, an editor can help to develop one for your site or company. You can also have an editor perform fact checking on your content as a precaution to avoid unintended false statements. Editors can review content to ensure that it is consistent throughout the site, and that statements made on one page do not contradict information on another page.
Nature and purpose of site content

OBJECTIVE 1.3.7: Nature and purpose of site content
When writing or overseeing the development of content for your Web site, keep in mind the purpose of the site, site section or page you are developing. Is it instructional or promotional? Is it intended for professionals only or for any readers? Most sites offer general information for all readers at the top level of the site, with more detailed information one or two clicks deep in the site. However, a site devoted exclusively to database administrators, for example, may have a technical tone from the top level all the way down.
Audience and site message

As discussed throughout this course, you must always consider your audience when developing your Web site. The style and tone of your site's text content must be appropriate for your intended audience in order to convey your site's message properly. Tone, or voice, is the manner in which the writer speaks to the reader technical, professional, formal or informal, casual, conversational, and so forth. A site intended for children should have a very different tone than one intended for engineers, for example, which in turn would differ from sites intended for art enthusiasts, online shoppers, teenagers, political pundits or those seeking light-hearted entertainment. Jargon is the technical language specific to an industry or profession. Avoid jargon unless the site or the area of the site for which you are developing content is intended exclusively for members of a particular industry. You can define any jargon you use to avoid alienating users who are not familiar with the jargon terms.
NOTE: Even in sites that target a specific audience, it is good practice to define jargon terms upon first use, or in a glossary page or pop-ups.
Version 1.0
16-5
In addition to your intended audience, you must consider your unintended audience. If your content may be offensive to people for whom it is not intended, you may consider taking steps to avoid or explain this, such as posting a disclaimer or modifying the content in some way. Cultural perspectives can contribute to this concern. Be sure to get feedback about your site from people of different cultural backgrounds and national origins. You can accomplish this by holding a focus group, hiring a consultant, or even informally asking colleagues. While it is generally legal to post content that may be considered offensive to some audiences, it may be illegal to post certain kinds of content. For example, content that can be defined as pornographic is illegal in some, but not all, regions. Publishing false statements about a person can be considered libel (which is defined as unjust inflammatory statements). Parodies (which imitate a person's or work's characteristics or style, and are sometimes used for intentional mockery) are typically protected by the First Amendment. However, if you are posting any potentially libelous or infringing information on your site, you should protect yourself by first consulting a lawyer.
Content to retain and content to exclude

You must also consider which content to post on your Web site. Your organization may have a lot of documentation and written material describing its mission, purpose, practices, products and services. However, not all of that content is needed on the Web site. You should select only the most important points, then emphasize those. If you or other stakeholders believe that it is important to provide detailed information (such as white papers, project descriptions or press releases) on the Web site, then this content should be located two or three clicks within the site. Visitors who are interested will find this information if the links are clearly labeled. But it is not necessary to load every visitor with that much detailed data, especially when most are just looking for basic information.
Presenting content in various formats

When developing a Web site, the general tendency is to think that most of your content will be presented as Web pages. This approach is fine, and perhaps advantageous for your search engine results. However, some types of content may work better if provided in a different format. For example, you might want to provide company white papers, case studies or complex graphs as PDF documents available for download. Technical instructions might be most effective if presented as video clips. The company philosophy might be best conveyed as an image. Keep your mind open to alternative formats, and use them when appropriate.
Internet Marketing and Search Engine Optimization (SEO)

OBJECTIVE 4.4.1: SEO vs. PPC strategies
Internet marketing is a wide field of study that applies traditional marketing concepts to Web-based and Internet technologies. Internet marketing involves the following practices (which are discussed in greater detail in the following sections): Search engine optimization Pay per click (PPC) Web analytics
Version 1.0
16-6
Search engine optimization (SEO)

Search engine optimization (SEO) is the use of specific techniques to improve the ranking of a page or site on a search engine. The use of SEO techniques improves the volume and quality of traffic to a Web site based on the relevance of the site to search terms entered into a search engine. Generally, the higher a site "ranks" (i.e., the earlier it appears in search engine results pages), the more searchers will visit that site. SEO techniques are said to be "organic," in that that these tactics do not include paid advertisements of any kind. SEO involves learning how a particular engine ranks a page. You then use this knowledge to customize a site's Web pages so that the site is ranked as highly as possible on a search engine's results pages. If a page is ranked highly on a search engine, that page is more likely to be viewed by a potential customer who will purchase a good or service. Whenever a customer makes a purchase or otherwise engages significantly with a site, it is called a conversion.
OBJECTIVE 4.4.2: SEO terms
Common SEO terms

As search engines get smarter, SEO experts must do the same. An expert will consider all the factors that search engines take into account when ranking pages, and will create and edit pages accordingly. Following are some of the more common SEO terms: Conversion Leading users to a specific result. The most typical conversion is a purchase of a good or service on a site (i.e., converting a shopper into a buyer). Conversion can also include capturing user personal information, demographic information or user preferences. SEO professionals are expected to lead users to a conversion. Keywords Words that search engines have identified as important enough to index on their sites. Keywords are used to determine page ranking. Keywords should be repeated naturally, and should be used consistently in Web and print copy. Keyword density How often a keyword is used on a page. The aim to is have sufficient keyword density without making the page seem artificially enhanced. Overuse of keywords is known as keyword stuffing. Some search engines will penalize a page for having a keyword density that is too high. Stop words Common words (such as "a," "of," "the," "with," etc.) that are filtered out by search engines. Including stop words in your title tag weakens the title tag's keyword density. On-page practices Editing pages so that they are ranked highly. Many designers have thought that using the <meta> tag, keywords and titles is no longer important. This is not at all the case. It is essential to use proper page structure, and to use keywords in not only the <meta> tags but also the body of each Web page. Off-page practices Creating credible, authoritative pages. One way to do this is through linking campaigns that show that a particular page or site is respected by others. The more legitimate sites that link to yours, the better. Off-page practices also include obtaining domain names that have existed for some time to ensure that the domain has not been blackballed in any way. Reciprocal link An off-page practice wherein one site links back to another. Use of reciprocal links often lowers page ranking, because it is seen as a quick, artificial way to increase ranking.
NOTE: Metadata and specific metadata tags are discussed in detail later in this lesson.
Version 1.0
16-7
Clickthrough rate A measurement of how successful a campaign has been, in terms of Web hits. To obtain the clickthrough rate, divide the number of users who clicked on an advertisement by the number of times the advertisement was shown. Also called an impression. Results page The page returned by a search engine. Contains ranked entries, as determined by the search engine's algorithms and PPC policies. Also known as a search engine results page. Crawlers Automated applications that regularly scan Web pages and search for content. Also called spiders or bots. Many SEO experts will read pages using a textonly browser called Lynx, because crawlers see a Web page as a text-only document. Cloaking The practice of showing one site to crawlers and another to individual users. Cloaking is used by spammers, and is considered an illicit practice. Many search engines will penalize sites for this activity. Page rank Describes the rank of a page on a search engine results page. This term began as a Google term. Blackballing A practice in which a search engine eliminates a page or domain from consideration in search engine ranking. Black-hat SEO The use of techniques that are considered by search engines to be flawed or unethical. Includes keyword stuffing, cloaking, invisible text (wording that only crawlers can see) and doorway pages (pages that are highly optimized, but which redirect users to other sites). Splash page The first page of a site. Often the page that has the most optimization.
OBJECTIVE 4.4.3: Common SEO techniques
Common SEO techniques

Entire courses have been written about SEO. In this brief overview, we will consider the following fundamental tactics: Use validated HTML code Pick an HTML or XHTML standard and stick to it. Validate often. Choose keywords and use them properly Choose keywords wisely. Use them properly in your Web copy, as well as in all <meta>, <title> and <head> tags. Avoid keyword stuffing, as search engines have become very good at differentiating between natural and artificial usage of words and phrases. Properly structure your pages Use CSS to properly structure content on a page. Search engine crawlers will rank a page that uses CSS and the <div> tag more highly than a page that uses HTML tables. Interlink the pages on your Web site Sites with good navigation (that is, with an internal linking structure) not only allow visitors to find what they want, but they also receive higher ranking by search engines because good navigation structure allows Web spiders to find all the pages on your site. Add page titles to your pages Search engine crawlers try to determine what a page is about. The <title> tag is mandatory on pages validated to HTML 3.2 and later anyway, so use your keyword or keyword phrase in the page title. Use metadata Metadata is content that is not displayed on the page, but is read and used by browsers and search engines. You can include a description of your page and keywords in your metadata. You will learn more about metadata shortly.
Version 1.0
16-8
Write high-quality Web copy. Use the bold and underline attributes sparingly. Break up large blocks of text by using descriptive topic titles in your narrative, preferably using keywords. Carefully evaluate the use of images and multimedia Flash, video and images are, of course, valuable. However, bots do not read this data, and a page that relies too much on multimedia can cause a site to be ranked lower. Carefully combine text with multimedia to achieve a balance. Add text links Web spiders cannot follow image links or links created in JavaScript. Add extra text links in your navigation or page footers that lead to your main pages or important sections to help your visitors find their way around and help Web spiders index your site more fully. Embed text within images and use the <alt> tag If you do use images, insert keywords and descriptions as meta information inside images. All of today's respected image-creation tools allow the insertion of meta information. Also, use the <alt> tag wisely whenever you insert an image. Wise use of the <alt> tag involves including a short, relevant description of an image, often with information that explains the image's context within a particular page.
Choosing keywords
Choosing keywords is central to writing good copy and obtaining a high ranking in a search engine. Choosing keywords is relatively easy. Search engines provide you with applications that help you explore the searches that visitors to a search engine have previously conducted. The search engines save these searches, and then make these searches available to you. By investigating past search results, you can determine effective keywords. You want to make sure that you consider the following principles: High demand You want to use keywords that many people have used as they search. Doing so will make sure that your page addresses the needs of your audience. Low competition Choose keywords that are as unique as possible. If you sound like everyone else, you may have a page that is high in demand, but simply gets lost in the mix.
Popular keyword tools include the following: Google Adwords (https://adwords.google.com/select/KeywordToolExternal) Yahoo! Advertising (http://sem.smallbusiness.yahoo.com/searchenginemarketing) Microsoft adCenter Labs (http://adlab.microsoft.com/Keyword-Forecast)
Many third-party sites exist to help you choose keywords for various search engines. Remember that each search engine has different criteria; what may rank highly in one search engine may not in another. To choose your terms wisely, first determine which search engine your audience uses the most. Then optimize your page according to the criteria relevant to that search engine.
Version 1.0
16-9
Keyword stuffing
As you have learned, good keyword density is an important aspect of SEO. Repeating keywords too often, however, can annoy users and result in a search engine ranking your page or site lower, or not ranking it at all. Overusing keywords in the main narrative of a Web page or in its <meta> tags is known as keyword stuffing. Examples of keyword stuffing include repeating the same keywords in every sentence of a paragraph; using all keywords in the <meta> tag; and hiding repeated keywords from users, but making sure that this content is still visible to search engines. Use keywords wisely. Selectively place keywords in the title, headings, and <meta> tags, but place keywords two or three times in a standard paragraph. Keywords used in paragraphs should occur naturally, without too much repetition. Write paragraphs that contain short sentences that clearly describe the site's purpose and the products available. You should also use keywords in the image <alt> statement, as well as in hyperlinks.
Techniques for writing high-quality Web copy

As you learned earlier in the course, you must be able to use words effectively in order to communicate, inform, and lead visitors to take the actions that you want, such as ordering a product or providing personal information. Quality Web copy has the following attributes: Brevity and conciseness Make the copy not only short, but to the point. Make sure that your copy has a strong central idea and quickly describes your site's main purpose. Proper spelling and grammar Even the best copy will be ranked low if it is fraught with spelling and grammar errors. Use a spelling checker, a grammar checker, and a trusted advisor who has good writing and editing skills. Good use of keywords Make sure your copy incorporates your keywords as part of the natural flow of the content. Keywords should be used consistently and repeatedly without sounding artificial.
When developing Web copy, you will probably go through multiple drafts. Even the most experienced copy writers rewrite or rework content multiple times, especially copy on a splash page. You should also get input from trusted individuals on your team as you write copy. Be careful to not work in isolation. Work with members of the marketing and sales teams to ensure you are properly addressing your target audience. Pass the copy by multiple people on your team to be sure nothing was overlooked.
OBJECTIVE 4.4.1: SEO vs. PPC strategies
Search engine optimization vs. pay per click (PPC)

As part of your Internet marketing campaign, you can use pay per click to help increase your search engine rankings. Note that using pay per click for search engine placement is separate from search engine optimization. In search engine pay per click (PPC), you work with established services that help your site to be ranked highly in a search engine result page. PPC search results are not considered organic because instead of optimizing pages to make them appear naturally more relevant, you simply pay to have your page listed as highly as possible. Most Internet marketing campaigns combine SEO and PPC strategies.
Version 1.0
16-10
Web analytics
OBJECTIVE 4.4.4: Web analytics
Web analytics is the collection, measurement and analysis of Internet data for the purpose of understanding and optimizing Web site usage. Using Web analytics can help you increase market share and generate sales. Two types of Web analytics exist: on-site and off-site.
On-site analytics
On-site analytics involves studying visitor behavior once a visitor has accessed your site. On-site analytics tactics include the following: Log analysis You can use trend analysis software to analyze server logs. Using tools such as Webtrends and Webalizer, you can view Web site statistics including visitor demographic information, the number of hits (or page views) you are getting, and how long visitors are staying. The most useful information includes determining repeat versus new visitors, determining the number of times an advertisement appears on a screen (the number of impressions), and determining the length of visitors' sessions. These statistics are far more useful than merely determining the number of hits your site or page is getting. Page tagging You can use a language such as JavaScript to specially mark a page and create more sophisticated entries that determine exactly how long a visitor used a page. Page tagging includes determining mouse events that could be interpreted as clicking on a shopping cart or abandoning a particular page.
Off-site analytics
In off-site analytics, you analyze your audience and how well your site has addressed and penetrated that audience. Strategies for off-site analytics include the following: Identify the size of your market You must first identify the overall size of the market, including how much is spent on it per year. Identify your competitors Find out who your key competitors are in the market. Study their strategies and determine how you can best position your product or service. In what particular niche can your product do well? What other factors in the marketplace can help you market your product better? Determine your market penetration How much of the current market are you addressing? Determine what has led to this success, and explore how you can gain more market share. Conduct surveys Surveys can help you determine an audience's interest. Determining interest level will help you choose keywords and craft your message. Consult market-research sources for your particular niche It is likely that consultants such as the Gartner Group have already compiled significant research data about your market sector. Take the time and spend the money to learn what these resources have determined about your market. These resources will, if properly consulted, help you fine-tune your message and may significantly impact the copy you write and the keywords you use.
OBJECTIVE 4.4.6: Blogging
Blogging
With the growing popularity of blogs all over the Web, blogging should not be overlooked as a free and easy way to generate a stream of targeted traffic to your Web site. A properly managed blogging campaign, partnered with a great product or service Web site, can generate both traffic and sales leads.
Version 1.0
16-11
You should already understand the basics of creating a successful blog. Some tips are presented here as a review: Target an audience you are knowledgeable about. Create a biography your audience will want to know if you represent them. Write about an event or topic that is relevant to you. Write as if you were someone in your target audience. Focus on one topic per blog. Include a clever title that will spark readers' interest. Use clear headlines. Use short, concise sentences. Check your blog entry for spelling and grammar mistakes before posting it. Post blogs on a regular basis. Employ referential writing include links to other relevant sites and blogs.
Using a keyword
Your blog should be based on one major keyword or keyword phrase that relates to your product or service, and you should use this keyword throughout your blog posts. Remember that search engine crawlers will look for a consistent and natural use of keywords. The better you use your keywords in your blog posts, the better you will do in the search engine rankings. You can optimize your blog posts for search engines by: Using your primary keywords in the title of a post. Using secondary keywords in the body of a post. Including keywords in your text links.
Submitting your URL

Submit your URL to blog directories and blog search engines. Some popular ones include: Technorati (http://technorati.com) LS Blogs (http://www.lsblogs.com/add_url.php?c=5) Popdex (www.popdex.com) Search Engine Journal (www.searchenginejournal.com/20-essential-blog-directoriesto-submit-your-blog-to/5998) ExactSeek.com (www.exactseek.com/add.html)
Updating regularly and pinging blog services

You can help build traffic on your blog by updating your blog often. By adding new posts, you ensure that search engines will spider your site more frequently. Most blog creation software includes an option to automatically alert various blog services when you update your content. Use these options to automatically send a ping to the blog services when you add new posts.
Version 1.0
16-12
You can also use the Ping-O-Matic service (http://pingomatic.com) to alert different search engines that your blog has been updated.
Building links
If you want to create and maintain a blog to support your product, the blog should work hand-in-hand with your product Web site. Links provide both visibility and credibility for your blog and your product site. Each page on your product Web site should include a link to your blog. Vice versa, you can use your blog to direct traffic to your product Web site. Sign each post to your blog with your name and a link to your product Web site. Readers who are interested will click through to your main site. Include links to other blogs and Web sites to build credibility and position yourself as an expert in your field. You can also exchange links (reciprocal links) with other blogs of a similar subject. You can notify another blogger that you have linked to one of his or her posts from your blog by using a trackback link. The trackback automatically leaves a link back to your blog as a comment. For example, in a post on his country music blog, Sam quotes some guitar-playing tips that he found on Ed's guitar blog. By using a trackback link, Sam places a link to his country music blog in front of all the people who read Ed's guitar blog. (Note that not all blogs allow trackbacks.)
OBJECTIVE 4.4.5: Generating revenue with search engines
How search engines generate revenue

Search engines generate revenue in various ways: Pay-per-click ads Search sites charge companies a fee for placing targeted ads on search engine result pages based on keywords. Providing value-add services Google, for example, has mastered the art of making sure that people keep going to its Web page for intriguing new features in addition to Web searches. Saving and processing searches Search engines long ago learned that they can log and process searches not only to refine their search engine software, but also to research user preferences and behaviors.
By saving and processing search entries that users make, a search engine can further hone its offerings. The search engine can even sell these search results to other businesses that want to gather information about the most popular searches, as well as understand exactly what kind of language and terms people use as they search. As the Internet becomes more vital and full of information, this will become an increasingly lucrative field. Internet Service Providers (ISPs) have also adopted similar strategies. They can track each click and user request to determine user preferences. As you might expect, the practice of saving and archiving searches and browsing history has generated considerable controversy. Visit the following links for more information: ISPs tracking user behavior http://consumerist.com/5008801/charter-to-begintracking-users-searches-and-inserting-targeted-ads Controversy over ISP tracking http://www.theregister.co.uk/2008/09/25/verizon_on_behavioral_ad_targeting/
Version 1.0
16-13
Privacy implications http://jimjansen.blogspot.com/2008/11/privacy-weblogsand-user-tracking.html Google tracking users www.betanews.com/article/Google-to-Track-Users-SearchHistories/1114095038 Google tracking browsing history www.itpro.co.uk/610152/google-startstracking-users-for-better-ads Google tracking clicking behavior www.theregister.co.uk/2009/03/11/google_behavioral_advertising/
Complete Internet Marketing

Internet marketing and SEO is not an isolated practice. Proper marketing and SEO involves more than creating crisp narrative text, validating a few Web pages and then logging in to Google Analytics. A successful marketing campaign involves the following: A competent leader This individual is primarily responsible for the vision of the marketing effort, as well as coordinating team efforts. While a team is always necessary in a marketing effort, one person will need to be responsible for instilling a sense of personal ownership for all individuals in the project. A team effort A leader needs to work closely with members of a team that often includes individuals from marketing, IT, sales, customer relations and product support. Each team member will have valuable input for any marketing effort, including traditional marketing, SEO, PPC and analytics strategies. Continued effort Successful marketing campaigns involve more than sending out a nicely worded HTML e-mail message. A campaign comprises multiple efforts to reach out to customers. Follow-up Marketing team members will have to work closely with sales leaders and product managers to ensure that leads are properly processed.
Metadata
metadata Data about data. NOTE: The prefix "meta" generally means "with," "after" or "a more specialized form of."
Metadata can be defined as data about data. It is data that embraces and describes a larger body of data, as does a repository. Everything in an XML or X/HTML document that is not the content intended to be seen by the user of the document is metadata. For example, the <h1> and </h1> tags indicate that the content between them is a first-level header. These tags describe the data and are therefore considered metadata. X/HTML offers a special tag, the <meta> tag, which can be used to describe the content of the Web page as a whole. The remainder of this lesson will discuss several uses and forms of metadata and the <meta> tag. You will also learn about ways that metadata works with search engines to help Web users find your site after it has been published to the Web.
The <!DOCTYPE> tag

As you learned earlier in this course, the document type declaration tag (<!DOCTYPE>) precedes the opening <html> tag in X/HTML files. Every conforming X/HTML document must start with the <!DOCTYPE> declaration, which is necessary to distinguish the version of X/HTML used in the document from other versions of X/HTML. This requirement is clearly stated in the HTML 3.2 standard. With the HTML 4.01 and XHTML 1.0 Recommendations, it is even more important to define which standard you are using.
Version 1.0
16-14
Be careful not to confuse the document type declaration (<!DOCTYPE> tag) with the Document Type Definition (DTD). The <!DOCTYPE> tag is a statement that identifies code versions in a document. The DTD is a separate document containing a set of rules for structure, syntax and vocabulary, used commonly with XHTML and XML. A <!DOCTYPE> tag may contain a URL referencing a DTD document that applies the rules of the specified language version.
Consider the following example.

NOTE: Remember to use the <!DOCTYPE> tag in your X/HTML pages.
<!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>XHTML page</title> [head elements here] </head> <body> [body elements here] </body> </html>
The <title> element is also mandatory in HTML 3.2 (and later) documents. If you omit the <title> tag, your document will not conform to the X/HTML specifications.
The <meta> tag

The <meta> tag was developed to specify information about a Web page that does not affect its appearance. Metadata consists of general information about the document or page content that should be available, but not necessarily displayed, for the user.
NOTE: The <meta> tag is called a "header element" here because it is placed between the <head> </head> tags of an X/HTML document, similar to the <title> tag.
The <meta> tag is one of the header elements you can use in a Web page. It defines metainformation about a document, such as: Expiration date. Author name. Keywords to be used by some search engines. A description or synopsis of the page for display in some search engines.
The <meta> Tag and Document Identification

The syntax for the <meta> tag is as follows:
<meta name="nameValue" content="contentValue"/>
or
<meta http-equiv="nameValue" content="contentValue"/>
NOTE: If the Web page author wants to specify multiple types of metadata, then multiple <meta> tags must be used.
Each <meta> tag requires the content attribute and either the name or http-equiv attribute. The http-equiv and name attributes define the general type of information you are creating or changing in the document. The content attribute defines the value of the general information. You will explore the differences between the http-equiv and name attributes in the following sections.
Version 1.0
16-15
The http-equiv attribute

The <meta http-equiv> tag is equivalent to an HTTP header. To understand HTTP headers, you must understand the process that occurs when you use a Web browser to request a document from a Web server. You request information using your browser, and the Web server receives your request via HTTP, the standard Web protocol. When the Web server finds the page you requested, it generates an HTTP response. The initial data in that response is called the HTTP header block. This header gives the Web browser information useful for displaying the page. Figure 16-1 illustrates this data flow.
Figure 16-1: Flow of information between Web server and user's computer
The <meta http-equiv> tag can be used to control the actions of Web browsers, and to further refine the information provided by the actual default headers. If you use the <meta http-equiv> tag, you force your Web server to add or change content in the response header, as shown in Figure 16-2. Note that the response header shown in Figure 16-2 includes instructions to refresh the page at a specific date and time.
NOTE: This level of technical control can be useful. Also, you now know where you can look in Web page code to determine or alter information that is passed in the HTTP header.
Figure 16-2: Adding content to response header
In this example, the "expires" value tells the Web browser not to use the page from the cache after May 22, 2011. Other values of the http-equiv attribute that control the browser's functions include "pragma", "refresh", "set-cookie" and "window-target". Table 16-1 describes these values.
Version 1.0
16-16
Table 16-1: Values of <meta> tag http-equiv and content attributes
Value for httpequiv Attribute

"expires"
(Sample) Value for content Attribute

"Sun, 22 May 2011 08:57:19 GMT"
Description
Defines a date when the file will be considered expired in cache, and a new page request will be generated Controls the page cache to the browser folder
"pragma"
"no-cache" "no-store" "public" "private" "seconds; URL=http://newpage.com"
"refresh"
Loads the page after the specified number of seconds, then automatically loads the page at the specified URL Creates a cookie to collect information Changes the default location at which hyperlinks open
"set-cookie" "window-target"
"cookievalue=xxx; expires=Sunday, 22-May-11 8:57:19 GMT" "Name of frame in which to open"
These values are known to affect the browser. You can define other http-equiv values to add to the header information, although they will not affect the browser in any way. A better method for delivering this information is provided by the name attribute.
The name attribute

NOTE: Be sure you understand the difference between the http-equiv and name attributes of <meta>. Generally, http-equiv values correspond more to instructions for the server and the browser to use, whereas name attributes deal more with additional information about the page.
A <meta> tag with a name attribute is used for information types that do not correspond to HTTP headers. The distinction can be unclear because some browsers interpret values such as "keywords" declared as either a name or an http-equiv attribute. If you use the name attribute, the information specified in the <meta> tag will not be added to the HTTP header, but will remain in your X/HTML document as shown in Figure 16-3. Note that the response header does not include the keywords or content specified by the Name attribute.
Figure 16-3: Response header with name attribute
Version 1.0
16-17
Using <meta> tags

Some servers use the http-equiv and content attribute values to define the HTTP response header's name-value pairs. When the browser requests a page, a request header is generated. The server then responds with a response header, providing identifying information about the requested document. For example, suppose the following information resides on a Web page:
<meta http-equiv="EXPIRES" content="Sun, 22 May 2011 08:57:19 GMT"/> <meta http-equiv="keywords" content="XHTML,Instruction"/> <meta http-equiv="reply-to" content="info@company.com (Help Center)"/>
The server will include this information in the response header when the document is requested, as follows:
Expires: Sun, 22 May 2011 08:57:19 GMT Keywords: XHTML,Instruction Reply-to: info@company.com (Help Center)
The "keywords" value is usually specified using the name attribute instead of http-equiv. The "expires" value helps refresh the cache. For example, you would want a weekly newsletter to expire weekly so that when the next HTTP request arrives, the updated page will appear rather than the old one cached on the user's computer. The "reply-to" return e-mail address value can be referenced by some search engines when compiling sets of links, and is worth including.
NOTE: You can check the <meta> tag information that appears when you use GUI X/HTML programs to write code for you later in this course.
Many X/HTML-generating programs (e.g., Mozilla Composer, Microsoft Word, Microsoft Expression Web) add the following <meta> tag information:
<meta name="generator" content="Program's name"/>
For example, when you create a page using Microsoft Word 2010, the following information will be added to your document's header:
<meta name=Generator content="Microsoft Word 14">
It is interesting to note that the <meta> tag generated by Microsoft Word does not conform to the XHTML 1.0 standard because it is not properly closed with a slash ( / ).
NOTE: Be sure you understand that metadata information such as author name does not appear in the browser or on the Web page by default, unlike a page title specified in the <title> tag.
Another common use of the <meta> tag is to add author information for a Web document:
<meta name="author" content="Author's Name"/>
For example, if the Web page author were Billy Shakespeare, then the tag would read as follows:
<meta name="author" content="Billy Shakespeare"/>
The <meta> Tag and Search Engines

OBJECTIVE 3.2.1: X/HTML metadata tags and content
Statistics show that only about one of every four Web sites uses keyword and description <meta> tags. However, using these tags can give your site an advantage over sites that do not. Using <meta> tags enables more visitors to find your site initially. Without proper placement (sometimes called registration with various search engines), users may not
Version 1.0
16-18
find your site, unless you use some other form of promotion such as banner ads or unfavorable methods such as spam e-mail. Unfortunately, not all search engines use metadata, and the ones that do often have different criteria for how it is used. This variable creates a daunting task for the Web developer to ensure proper placement with various search engines. Contrary to popular myth, no search engine secrets exist to guarantee you a top listing (other than paying an advertising fee to guarantee top placement as a search engine partner). However, Web developers can take some action to improve placement for their Web sites. Services and applications are available to make search engine placement more manageable. Before you learn about these services and applications, consider the most commonly used metadata tags.
NOTE: Specified keywords are not displayed anywhere on the site pages; they are simply target keywords that a search engine can match to keywords entered by users.
Keywords
Some search engines will search for values specified by the content attribute on pages that use the <meta> tag name attribute value of "keywords", as shown in the following example:
<meta name="keywords" content="keyword1, keyword2, keyword3"/>
NOTE: A specified site description is not displayed anywhere on the site pages, but it is displayed in the results of search engines that recognize this tag.
Keyword values are usually separated by commas. Do not use keywords excessively; several occurrences of the same word can cause the tag to be ignored. The maximum keyword allowance is 1,000 characters; however, it is believed that anything over 255 characters is ignored.
Description
When the <meta> tag name attribute specifies the "description" value, the content attribute value will appear as a short site description in some search engine results. The syntax for this use of the <meta> tag is as follows:
<meta name="description" content="This site provides recipes."/>
NOTE: You can develop descriptive summaries of your own Web sites in Activity 16-1: Developing Web site metadata.
Keep this description brief: no more than 25 words (maximum allowance is 150 characters). Not all search engines recognize this tag.
Robots
Certain pages should not be indexed by search engines. When this is the case, the following <meta> tag syntax can be used to tell search engines not to index the page:
<meta name="robots" content="noindex"/>
NOTE: Can you think of any Web pages that should not be indexed by search engines? Some examples might include interior pages that should not be accessed without first visiting their introductory pages, or hidden pages that are posted only for exclusive users who have their URLs.
Other content attribute values for "robots" include the following: "nofollow" prevents the crawler from following the links on the page and indexing the linked pages. "noimageclick" prevents links from pointing directly to images. Instead, only links to the page will be allowed. "noimageindex" prevents the images on the page from being indexed, but the text on the page can still be indexed.
Version 1.0
16-19
Search engines vs. information portals

The term "search engine" is used loosely in the Web community to include both search engines and directories, or information portals. The distinction between the two is that a search engine uses an automated process to discover new Web pages. This process, sometimes called a "robot" or a "spider," crawls around the Web following hyperlinks and indexing the content that it finds. This means that eventually a search engine will find your page, assuming that a link to your site exists somewhere on the Web. However, it is impossible to determine how long this task will take. For this reason, it is important to submit your site to the search engines. Submitting your site speeds the process and increases your chances for higher placement in search results, thus allowing the Web designer some control over placement. An information portal (also known as a directory) differs from a search engine in that it will find sites based on manual submissions only. This type of site works very much like a yellow pages book. Thus if you do not manually submit your site to the directory, the directory will never know of or index your site, and never list your site in search results. Some information portals send personnel to visit the site to determine the content and its relevance to the submitted topic. After the review, the Web developer may receive an email message asking for additional information so that a site description can be created before the site is placed in the directory. The advantage of this type of directory is that search results are more likely to contain high-quality content matches to any given query. However, increasing the chances for higher placement in search results is usually not within the control of the Web developer.
Which search engine or directory?

How many search engines and directories exist? Certainly hundreds are available, if not thousands. Does this mean that you must get your site listed on each of them? You could if you so desired. However, in spite of the great number of users on the Web, only the top search engines are used by the majority of Web users. In addition, search engines have been consolidating for the last few years. This means that numerous search engines simply put their own interface on data that is actually collected by another search engine. This reduces the number of search engines to which you need to submit your site, but it also makes it even more important that your site does well on the decreasing list of search engines and directories that collect their own data. The biggest search engines and directories are listed here in alphabetical order, along with the source of their search results in parentheses. AlltheWeb (Yahoo!) AltaVista (Yahoo!) AOL (Google) Ask Jeeves (Teoma) Excite (Google) Google (Google, Open Directory) HotBot (Yahoo!, Google, Teoma) LookSmart (LookSmart) Lycos (LookSmart, Yahoo!) MSN Search (Yahoo!, others) Netscape (Google) Open Directory (volunteer editors) Yahoo! (Yahoo!)
Ensuring that your site is registered with these search engines and directories will cover more than 90 percent of the searches conducted on the Web. However, your site's ranking is an entirely different matter.
Version 1.0
16-20
Ranking and relevance

NOTE: Relevance is an important concept for Web site searching. You may find it frustrating to have your Web sites ranked lower than some competitors' sites. Remember to consider it from a user's point of view: When you are searching for sites on the Web, you want to find sites that fulfill your needs. Although you can edit your title and keywords, ultimately your content will dictate your site's relevance to searching users.
Search results are ranked according to relevance to the given search criteria. Among searches and search engines, relevance varies. However, a few common characteristics exist: Titles A search engine will first scan the X/HTML <title> tag to look for keywords that match the query. Beginning content A search engine will then look for the query keywords(s) near the top of the document, on the assumption that the most relevant content is mentioned immediately. Frequency A search engine will look for frequency of the query keywords(s) in the entire document, on the assumption that the more times a word appears, the more likely the document is a good match to the search query.
NOTE: You can see how a search engine assigns relevance in Optional Lab 16-1: Using Web site metadata.
Now that you understand some of the key components to indexing, consider a few variables. Each search engine indexes sites to different levels, at different frequencies, then uses some proprietary steps to create relevance. For example, some search engines (such as Google) weigh factors such as the number of other sites that link to a given site, which may indicate the site's popularity. Some search engines do not use <meta> tags at all. And some search engines penalize the repetition of words by refusing to index a site. Some search engines do not catalog stop words (common words such as "the," "and," "Web" or "of") in an effort to conserve storage space. These are some of the reasons that different search engines yield different results for the same search.
Keyword development and placement

Keywords contribute significantly to your site's ranking by search engines and directories. Regardless of the search engines or directories to which you submit your site, consider the following guidelines. Choose keywords that are relevant to your site, and do not use misleading words. If possible, choose a domain name that includes your keywords. Do not use X/HTML framesets. Most search engines have difficulty ranking sites that use them. When possible, use keywords when naming your X/HTML files (for example, mobile1.htm, mobile2.htm and so forth). Include combination keywords, such as "mobile phones" in addition to "mobile" and "phones." Studies indicate that as many as 60 percent of all searches use two or more words. Test your chosen keywords on some popular search engines to see the results that are returned. Then visit those sites, and look at the text and source code to see other keywords that were used. Check to see if the keywords you select are among commonly misspelled words (www.yourdictionary.com/library/misspelled.html or www.bartleby.com/141/strunk4.html). You can include commonly misspelled words in your <meta> tags to help users find your site, but do not misspell words on your pages. Avoid using keywords in your <meta> tags that search engines do not index, such as "to," "the," "and," "or," "of" and so forth.
NOTE: You can choose keywords for your own Web sites in Activity 16-1: Developing Web site metadata.
NOTE: You can see how keywords are used by a search engine in Optional Lab 16-1: Using Web site metadata.
Version 1.0
16-21

NOTE: You can develop descriptive summaries of your own Web sites in Activity 16-1: Developing Web site metadata.
Use both singular and plural spellings of keywords, as well as other variations (for example, "phones," "phone," "telephone" and so forth). Use abbreviations (if appropriate) as well as both uppercase and lowercase spellings. Use the X/HTML <title> tag to include a brief 7-to-12-word description of your site, using as many as three of your keywords. Many search engines use the title as the site description, so make it appealing. The length should not exceed 70 characters nor use all-capital letters. Avoid using your company name (unless it is highly recognizable) because doing so wastes space for keywords. Create a logical descriptive summary paragraph using as many keywords as possible. Place it in the first section of the <body> of the document, within the first 200 characters. Remember that users will read this information, so it must make sense. Also, include the keywords in other areas of the document, including the last sentence. Use the alt attribute of the <img> tag to include keywords. Avoid using graphics exclusively on your home page. Search engines read text, not graphics. Do not try to mask a field of repeated keywords with background color. Do not place a banner ad at the top of your home page. Using the alt attribute and hyperlink this way describes keywords other than your own.

NOTE: Consider this technique for link development. You may initially resist the idea of soliciting advertisement in this way, but such linking makes the "Web" what it is.
Link development
In addition to search engine placement and advertising, another effective way to help drive visitors to your site is to develop a list of Web sites that you can benefit or complement, then ask their owners to provide a link to your site and offer them one in return. This method is mutually beneficial, and other Web authors will appreciate the free promotion.
The <meta> Tag and Delayed File Change

To change a Web page after a specified delay without user interaction, you can use the http-equiv="refresh" attribute and value. For example, your company logo could appear for five seconds then automatically change to the main menu. The syntax is as follows:
<meta http-equiv="refresh" content="seconds;URL=http://anywhere.com"/>
NOTE: Have you ever visited a site that implemented this refresh action in a way that prevented you from using the browser Back button? How did this affect your browsing experience?
The following code demonstrates a <meta> tag that will open the CIW Certified home page after a three-second delay:
<meta http-equiv="refresh" content="3;URL=http://www.ciwcertified.com"/>
This effect can be used to change URLs without user interaction. For example, you may want to preserve the link on a page that users have likely bookmarked. Do not set the seconds to "0"; this setting prohibits the user from using the browser's Back button. Browsing back to a page that immediately sends the user forward is frustrating. In the following lab, you will use the <meta> tag in an XHTML page to automatically redirect to another page. Suppose you are redesigning your splash (entry) page. During the redesign period, the splash page will be gone, so you want to redirect your visitors straight to the home page, which resides at another address. Rather than posting a message to users to enter this other Web address to find your home page, you can redirect them automatically by using the <meta> tag to refresh the page. Users will appreciate how easily they are redirected with no effort on their part.
Version 1.0
16-22
Lab 16-1: Using the <meta> tag to refresh a page automatically

In this lab, you will code a <meta> tag that uses the "refresh" value to automatically change to another page. 1. 2. Notepad: From the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson16\Lab_16-1 folder, open the file habitat.htm. Modify the source code in the <head> section of the file as shown in bold:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="refresh" content="3;URL=http://www.habitat.org" /> <title>Habitat for Humanity</title> </head>
3. 4.
Save the source file habitat.htm. Browser: Open habitat.htm in your browser.
5. Wait a few seconds. The page that says it is redirecting to the Habitat for Humanity home page should automatically refresh to the www.habitat.org Web site.
Dublin Core metadata initiative

NOTE: The Dublin Core initiative is instrumental for XML as well.
The Dublin Core initiative specifies the core set of metadata elements. It was created by a working group consisting of experts drawn from the library and Internet communities, which originally met in Dublin, Ohio, in 1995. Dublin Core was designed with several goals in mind: Enable search engines to filter by standard fields (e.g., date and author). Provide the ability for browsers to display metadata fields in a separate window. Enhance cross-collection repurposing and integration of content. Enhance site management by allowing old pages to be located more easily.
For more information about the Dublin Core, visit the Dublin Core Metadata Initiative site at the following URL: http://dublincore.org For more information regarding search engines and their use, visit the following search engine resources: SearchEngineWatch.com (http://searchenginewatch.com/) Search Engine Guide (www.searchengineguide.com) Search Engine Showdown (www.searchengineshowdown.com)
Version 1.0
16-23
Case Study
Sole Search Strategy

The Web site for Fleurs flower shop was appearing in search engines, but its competitors' sites were all ranking above Fleurs in search engine results. Jasmine, the site developer for Fleurs, had read somewhere that the number of times a keyword is used on a page will influence the page's ranking. So she decided to add a page to the site that repeated the word "flowers" 1,000 times. Surely this strategy would cause the Fleurs page to be the most relevant result for that search term, and would help bring Fleurs great wealth. Jasmine created the page, posted it to the Fleurs site, linked to the page and submitted it to the major search engines. A couple weeks later, she performed some Web searches to check the ranking for Fleurs. She found that her new "flowers" page failed to appear at all in search engines, and in addition, the entire Fleurs site had actually dropped in ranking on many search engines. Jasmine wondered what she had done wrong. She posted a message asking about her strategy to a Web developers mailing list group. She quickly learned from group members' responses that although it is possible to optimize a site's relevance so search engines can more easily rank it, her strategy actually makes search engines useless, which search engine programmers would never allow and thus take measures to prevent. * * *
Consider this scenario and answer the following questions. If Jasmine's trick had worked and all Web developers could employ it, why would it make search engines useless? How would it affect site rankings? How would it affect relevance? What are some valid, productive ways that Jasmine can improve her site's ranking in search engine results?
Version 1.0
16-24
Lesson Summary
Application project
After you have published your site to the Web, you will want to make sure that users can find it. Using relevant language in your site's title and text, and specifying keywords and a meaningful site description will all help search engines that use a Web spider find your site. In addition, you should also submit your site for indexing with as many major directories as possible. Visit the Yahoo! Site Explorer page (http://siteexplorer.search.yahoo.com/submit). You will see detailed directions for submitting your site to be indexed on Yahoo! Visit the Google home page (www.google.com). Click the About Google link and see the For Site Owners section. Click the Submit Your Content To Google and Webmaster Central links to learn about getting your site indexed with Google. Visit the AltaVista home page (www.altavista.com). Click the Submit A Site link at the bottom of the page for information about indexing your site with AltaVista. You may want to use a service that will submit your site to many search engines at once. Many of these services charge a fee but can save you a great deal of time depending on the scope and audience for your site. Visit your favorite search engine and enter the keywords "search engine submitter" to find services such as these.
Skills review
In this lesson, you learned about developing written content for the Web that is usable, professional and appropriate for your organization. You also learned ways to apply metadata to your X/HTML documents to describe your site content. You learned to use the <meta> tag to identify documents, describe Web sites and help search engines recognize files. You also learned the importance of keywords, and the ways that search engines and directories rank them. Finally, you learned some tips for keywords development and placement. Now that you have completed this lesson, you should be able to: 1.3.7: Consider nature and purpose of site content (e.g., audience appropriateness, intended vs. unintended audience, potentially offensive content, offensive vs. illegal content, global and cultural perspectives). 2.2.8: Develop or obtain written content that conveys the site's message, including clear and concise writing, professional editing, style guides, consistency, jargon, voice and tone (professional, formal, informal). 3.2.1: Add metadata tags and content to X/HTML documents to influence search engine placement (includes refining <meta> tags in existing pages). 4.4.1: Discuss organic and non-organic strategies for improving hit ratees and search engine ranking (e.g., search engine optimization [SEO] vs. pay per click [PPC] strategies). 4.4.2: Define common search engine optimization (SEO) terms (e.g., keywords, keyword density, stop words, results pages, reciprocal links, black-hat SEO). 4.4.3: Identify common valid SEO techniques (e.g., writing quality Web copy, structuring pages using validated HTML and CSS, using page titles, using metadata, using on-site and off-site practices).
Version 1.0
16-25
4.4.4: Define Web analytics, including discussing key events to review on a Web server. 4.4.5: Identify ways that search engines generate revenue by processing search entries from users. 4.4.6: Create a blog-writing strategy to support a brand, including key elements of a successful blog entry (e.g., brevity, central idea, clever title, links to relevant articles, configuring trackbacks).
Version 1.0
16-26
Lesson 16 Review
1. When developing content for a Web site, why should detailed information and technical specifications be located two or three clicks deep in the site architecture?
2.
What is purpose of the <!DOCTYPE> tag?
3.
Name three types of metadata that can be defined by the <meta> tag.
4.
Which attributes are used with the <meta> tag?
5.
What is the difference between a search engine and a directory, or information portal?
6.
Briefly explain the concept of relevance in the context of search engines, as well as the criteria used to determine it.
Version 1.0
16-27

Version 1.0
16-28
Activity 16-1: Developing Web site metadata

NOTE: This activity can be used for you to begin creating material for your own Web sites or for simple practice in creating metadata.
In this activity, you will develop a descriptive summary and choose keywords for your own Web site. Write your answers in the spaces provided. 1. Consider the type of Web site you will create on your own. What topic will be the focus of your site?
2.
Will your site be used for e-commerce or informational purposes?
3.
What business or site name might you use?
4.
Use the information you specified in Steps 1 through 3 to write a sentence or two that succinctly describes your Web site and its purpose to users who have never visited it. Restrict this summary to 25 words (150 characters). Try to mention some feature or offering that sets your site apart from other similar sites. Be creative, but be sure to use clear and widely understood language to describe your site. Consider that this summary may determine whether a user who matched your keywords decides to visit your site or not.
5.
You can use the descriptive summary you just wrote in a <meta> tag or in the <body> section of your Web site's home page. Write the <meta> tag syntax you could use to make this description appear in search engines that recognize this tag.
6.
You can use a shorter version of your descriptive summary in your Web page's <title> tag. Rewrite your descriptive summary, restricting it to 12 words (70 characters). Many search engines use a site's title as its description, so make this title appealing. Write the <title> tag syntax you could use for this description.
7.
Consider the keywords that might apply to your Web site. Start by reading your descriptive summary and picking out the most important relevant words. Do not include irrelevant, common or overused words such as "the," "and," "Web," "nice," "great" and so forth. List at least three keywords from your summary.
Version 1.0
16-29
8.
Now consider a user who might be interested in the content you offer. If you were that user, what other keywords might you enter in a search engine to locate this site? List at least five additional keywords that were not included in your summary.
9.
Are any of the keywords you have chosen so far misleading, vague or too broad? If so, what clearer words could you use to replace them?
10. Are any of the keywords you have chosen commonly misspelled? If so, what misspellings might you add to your list of keywords so that users who misspell keywords can still find your site? Note: Remember not to misspell words on your site's pages to accommodate searching use misspellings only in the <meta> tag keywords.
11. Can any of the keywords you have chosen be pluralized or written in another form (different verb tense, longer or shorter form, nicknames, capitalization, common abbreviations)?
12. You can use these keywords to help influence search engine results for your Web page. Write the <meta> tag syntax you could use to supply these keywords to search engines that recognize this tag.
Metadata is useful for Web site users and Web site authors alike. Determining which information is most relevant to users may take some practice but is well worth the effort if you want more users to find your site.
Optional Lab 16-1: Using Web site metadata

In this optional lab, you will use a search engine to analyze the ways in which metadata is used, and you will view the source code of a Web site to see the metadata it provides. 1. Browser: In the Address field, enter www.google.com. In the search engine's keyword field, enter the words guitar chords, then click the Google Search button. Scroll through the Web site matches for your keywords. You should see results similar to those shown in Figure OL16-1.
Version 1.0
16-30
Figure OL16-1: Results of Google keyword search
2. 3.
You can see your keywords highlighted in bold text in this list of Web site names and descriptions. Do the keywords you entered seem to have returned relevant results? Read the descriptive summaries listed for some of the sites returned from your search. Do all these sites have the same topic and purpose? How do they differ? How many different types of sites did you find with the two keywords you entered? Note the order in which the results appear. In this case, both the title and description of the first most relevant results included both your keywords. As you descend down the list, some pages may incorporate only one word or the other in its title and/or description. Choose any site within the first 10 or so from this list of results. Click the site name in this list to link to its home page. After your chosen site's home page appears, select your browser's View menu and choose Source. You should see the X/HTML source code for that home page, similar to Figure OL16-2.
4.
5. 6.
Version 1.0
16-31
Figure OL16-2: Source code for Web page showing metadata
7.
Study the page's source code and read the information specified in the file's <meta> tags. The example shown in the preceding figure includes <meta> tags that specify a description and keywords. Do you see both your keywords specified in the <meta> tag text? Is the description given in the <meta> tag the same one that appeared in the search engine results? How might these results differ if you used another search engine to find this site or these keywords? Try performing searches for other keywords using other search engines on your own. Study your results carefully. Are the keywords you enter returning the results you expect? Do the sites returned seem similar or is there great variety? Study the source code and <meta> tags used by some of these sites. What can you learn from the metadata provided by other Web authors? Which search engines seem to make the best use of author-provided metadata?
8.
Version 1.0
16-32
Lesson 16 Quiz
1. You are developing written content for your Web site. You are focused on creating the best content to support the purpose of your site and your intended audience. Which of the following will you use sparingly to address your industry-specific audience without alienating some users who may be less familiar with your industry? a. b. c. d. 2. Tone Jargon Cultural perspective Potentially offensive content
Metadata generally consists of what? a. b. c. d. Information about the document or content that should be available but not necessarily displayed to the user Statistics, dimensions and other technical documentation about the Web site Information about the document that will affect only the page's appearance Information that is reserved for other Web page authors who may be maintaining or updating the site later
3.
Which of the following types of metadata can you specify using the <meta> tag's name attribute? a. b. c. d. Cookie data Web page author Web page expiration date Time delay before page refreshes
4.
Which <meta> tag attribute and value can you use to specify a short site description that will appear in some search engines when your keywords match a query? a. b. c. d. name="description" content="description" keywords="description" http-equiv="description"
5.
You have created a pop music Web site, and you want to specify keywords that a search engine can use to match your site to a search query. Which of the following demonstrates the correct syntax for a <meta> tag that will perform this function? a. b. c. d. <meta="name" keywords="rock, reggae, rap"> <meta keywords="rock, reggae, rap"> <meta name="keywords" content="rock, reggae, rap"> <meta content="keywords" description="rock, reggae, rap">
Version 1.0
17Lesson 17: Site Development with Microsoft Expression Web 3 Introduction

Objectives
By the end of this lesson, you will be able to: 3.4.1: Compare site development using X/HTML text editors to site development using GUI site management applications. 3.4.2: Configure site development applications to develop W3C-compliant code, including XHTML 1.0 Transitional. 3.4.9: View and validate source code using GUI site development applications. 3.4.10: Use GUI site development applications to enforce compliance with accessibility standards.
17-2
1. Microsoft Expression Web can best be described as: a. b. c. d. 2. a GUI Web page editor. an X/HTML text editor. an Internet Service Provider (ISP). a Web-based word-processing application.
What three functions of Web development can you perform with Microsoft Expression Web?
3.
Name one advantage of using Microsoft Expression Web to develop a Web site.
Version 1.0
Lesson 17: Site Development with Microsoft Expression Web 3 Introduction
17-3
The Transition from FrontPage

This course previously featured Microsoft FrontPage as a GUI Web site development application. In late 2006, Microsoft FrontPage was discontinued and was replaced by two distinct packages: Microsoft Office SharePoint Designer (for application developers who use SharePoint Portal Server) and Microsoft Expression Web (for Web designers). Microsoft Office SharePoint Designer remains part of the Office family of products, while Microsoft Expression Web is part of the Expression Studio suite of products. The current version of Expression Web is version 3. Unlike FrontPage, which grew out of an era of increasingly complex and proprietary HTML specification, Expression Web was developed to create standards-compliant Web sites. As a result, there are some notable differences between FrontPage and Expression Web: Expression Web generates XHTML 1.0 Transitional code by default. The Web designer may also specify various standards and CSS schemas. Expression Web is used for designing CSS Web sites. Web designers are strongly encouraged to learn page layout using CSS, although layout tables are still available. Expression Web allows for the creation of dynamic content and the integration of database or XML data using ASP.Net 2.0. Expression Web does not provide a Preview pane. (In FrontPage, the Preview pane was a subview of Page view that presented the page as it would look in Internet Explorer but lacked full browser functionality.) Expression Web, however, provides the Preview In Browser command, which you can use to view the page in every browser installed on the development system (at varying screen resolutions). Expression Web does not provide an equivalent to FrontPage's Navigation view, and you cannot edit existing FrontPage navigation bars. Dynamic effects can be applied to Expression Web elements through manipulating properties and behaviors. (In FrontPage, dynamic effects were added via the DHTML toolbar.) Expression Web relies on the Microsoft .NET Framework Version 2.0 Redistributable Package (available at the Microsoft Download Center), and you must have this package installed on your computer to work with ASP.NET controls in Expression Web. Your site must also be published to a server that has ASP.NET 2.0 installed.
Ending support for FrontPage Server Extensions (FPSE)

Certain FrontPage components (such as hit counters, shared borders, form handlers and some navigation bar configurations) required special support on the hosting server provided through proprietary FrontPage Server Extensions (FPSE). The Server Extensions were available for most Windows and UNIX servers at no charge from the Microsoft Web site. Expression Web does not require FPSE. As a result, FrontPage Server Extensions will be supported on Windows 2003 servers until two years after the next server version is released. Extensions on UNIX and Windows 2000 servers are no longer supported by Microsoft.
Version 1.0
17-4
Although you can open and edit FrontPage Web sites in Expression Web, FrontPage components that rely on FPSE are not supported. There are no Expression Web commands equivalent to the FrontPage commands used to insert FrontPage components (e.g., Insert | Web Component).
OBJECTIVE 3.4.1: X/HTML text editors vs. GUI site management applications
Microsoft Expression Web 3

Microsoft Expression Web is a GUI (or WYSIWYG) Web site development application. It is an intuitive application that enables advanced Web layout and design, along with customizable features that allow Web designers to tailor the X/HTML output to their target audiences. With today's sophisticated Web projects, Web management has become as important as design. Expression Web incorporates three distinct functions within the application to assist in the overall development process: Site management Through the use of the various views, preferences, file sharing and reporting capabilities, management of large Web applications is easily integrated. Page layout and design The Web developer can choose among tables, frames pages or CSS positioning for page layout, as well as HTML code preservation, multimedia and scripting technologies. Data connection Generating content with dynamic data has become an integral part of large Web applications. Creating, adding, retrieving and deleting data from databases or XML data are made possible for the non-programmer using ASP.Net 2.0 technology.
NOTE: You may want to review the meaning of graphical user interface (GUI). This term refers to an application in which the file being edited is displayed as it will appear on the screen. Compare this process with creating Web pages by manually coding X/HTML. Another term for this functionality is WYSIWYG (What You See Is What You Get). NOTE: The three functions are important to note. Expression Web is more than a Web design tool.
Expression Web advantages

Expression Web can dramatically reduce the time required to manage and develop a standards-compliant CSS Web site. Developers can save time by using the WYSIWYG interface for X/HTML design, and the similarities to other Microsoft application products reduce the product learning curve.
Expression Web disadvantages

Transitioning from FrontPage to Expression Web requires a bit of a learning curve, in some cases forcing the Web designer to learn standards-based methods for adding specific features and functionality to their Web sites. Web designers should understand CSS positioning to most effectively use Expression Web's CSS layout features.
Expression Web Views

The Expression Web interface is well suited for site development and management tasks, as well as for Web page design. When you launch Expression Web, it looks very much like the familiar applications of the Microsoft Office suite, as shown in Figure 17-1. The default view is a new blank Web page in Page view. As you can see in the figure, the interface is divided like a browser frames page, with an editing window in the center and various docked panels on either side. The panels allow the Web designer to add tags, edit tag properties and CSS properties, and manage styles.
Version 1.0
17-5
Figure 17-1: Expression Web Page view

NOTE: You will probably use Page view most often; this view enables page layout and design. The other views are used for site management functions.
When you create a new page or open an existing page, Expression Web shows the Page view. Page view displays individual HTML pages, and is used for page layout and design. Page view also includes three subviews for Web page development: Design view the default view used in WYSIWYG design. Split view a split screen that allows you to simultaneously see the Code view above and the Design view below. Split view allows you to edit the code directly while seeing its effect on how the page is rendered. Code view the view used to examine, change, add or delete X/HTML code.
For site management, Expression Web offers four Web site views. Figure 17-2 shows the Web site interface, which is the screen you see when you create a new Web site or open an existing Web site. The default view for the Web site interface is Folders view.
Version 1.0
17-6
NOTE: Have you used Microsoft Word (or other Microsoft Office applications)? If so, you will find the Expression Web interface very familiar and easy to use. This familiarity is one of Expression Web's distinct advantages.
Figure 17-2: Expression Web Web site interface
You can use the four buttons along the bottom of the window to change to one of the following Web site views: Folders view displays the folders and corresponding files for a Web project. The Folders view is shown in Figure 17-2. Publishing view shows the files in your Web site on both the local (source) machine and on the remote (destination) server. Used for publishing your Web site. Reports view displays reports about the pages in your Web site. Hyperlinks view displays the existing hyperlinks and their current status.
Most of your development time will be spent in Page view. You will use the Web site views for managing your pages.
Expression Web Menus and Toolbars

Using the same layout and icons as most Microsoft applications, the Expression Web menus and toolbars have many familiar features. Figure 17-3 shows the menu bar and the Common toolbar, both of which display by default.
Figure 17-3: Expression Web menu bar and Common toolbar
You can specify to display or hide any of the Expression Web toolbars using the View | Toolbars command. You cannot turn off display of the menu bar, however.
Version 1.0

NOTE: Expression Web can be used to modify any X/HTML page, even those that were not created with Expression Web.
17-7
Opening Web Sites and Files in Expression Web

Expression Web allows you the option to open individual files or entire Web sites. This option makes the application a universal X/HTML editor rather than a tool to edit only Web sites created in Expression Web. Any individual X/HTML page can be opened, edited and saved using Expression Web while preserving all existing X/HTML. Choosing to open a new file or an existing file will determine Expression Web's functionality. When you choose to create a new Web site, Expression Web creates a special Web folder that will contain all the necessary subordinate folders and files. If you use a template to create a new Web site, the new Web site folder will include an images directory. By default, the new Web folder will also include two hidden folders that contain Web site metadata. These folders (which are used and maintained by dynamic Web templates) are named _vti_cnf (this folder contains information about every file in the Web site) and _vti_pvt (this folder stores configuration information for the site). Note that these hidden folders do not display in the Expression Web Folder List task pane. Files and entire Web sites can be opened either locally or remotely over a network. The speed at which Expression Web operates over a network depends on the available bandwidth. In the following lab, you will launch Expression Web and create a new Web site so you can view the various features of this application. Suppose your company has decided to invest in some new applications that it hopes will assist your Web development team to make the best use of your time. Your Web team manager has asked you to assess Expression Web and other applications to help determine advantages and disadvantages that will be considered in the company's buying decisions. Your feedback will affect your team's Web development practices and capabilities, so you want to make sure you assess the products carefully. After installing the trial software, you should inspect each feature and consider how your team would use it. Think about ways that the application would save you time and ways that it might limit your capabilities.
NOTE: Expression Web creates the new Web site directory automatically, and you should not attempt to change the folder prefix or location because unexpected results may occur.
Lab 17-1: Launching Expression Web

VIRTUAL LAB Software for this lab is provided online.
In this lab, you will launch Expression Web and create a Web site to view the various components within the application. Virtual lab: A virtual software environment is provided for this and all following labs that use Microsoft Expression Web 3. Use the virtual lab unless you have the Expression Web software installed on your own computer. To enter the virtual lab environment, open your browser to http://education.certification-partners.com/ciw/, use your access code to log on to CIW Online, and then click the link for the virtual labs for this course. You can now complete Expression Web labs in the virtual lab environment. 1. Desktop: Start Expression Web 3. If you are working in the virtual lab environment, right-click Start and select Explore to open Windows Explorer. Navigate to the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson17 folder and create a new folder called firstWeb. Then select Start | All Programs | Microsoft Expression | Microsoft Expression Web 3. When Expression Web opens, your screen should resemble
Version 1.0
17-8
Figure 17-1 (the first figure in this lesson). If necessary, close the dialog box that prompts you to make Expression Web the default Web page editor. 2. Expression Web: Select Site | New Site. The Site tab of the New dialog box appears, as shown in Figure 17-4.
Figure 17-4: New dialog box Site tab

NOTE: You can experiment with other types of Expression Web sites in Optional Lab 17-1: Exploring Expression Web sites.
3.
In the left pane of the Site tab, select Templates to view the available Expression Web templates, as shown in Figure 17-5.
Figure 17-5: Web site templates in New dialog box
4.
In the Location box at the bottom of the dialog box, type C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson17\firstWeb to enter the location of the new Web site. In the list of Web site templates, select Organization 1. Click OK. A new Web site will be created and the Folder List panel will show the files and folders in the new Web site. The Site View tab also appears in the editing window. Notice that the contents of the Site View tab in the editing window are the same as those shown in the Folder List panel.
NOTE: Many Web designers close the Folder List panel to allow a larger view of the Tag Properties panel.
5.
Version 1.0
17-9
6.
In the editing window, double-click the default.html file to open it. A page should open in the Page view that resembles Figure 17-6. Sample placeholder text is visible to help you begin creating your home page. Note: You can specify a default file name extension of either .html or .htm for your Web pages. This setting is accessible on the Authoring tab of the Page Editor Options dialog box.
Figure 17-6: firstWeb site default.html in Page view

NOTE: Understand that default.html is a standard name recognized by most Web servers as the default file in a directory (generally, a site's home page). You should not change the name of this file.
7.
Page view: Notice the links at the top of the default.html page: Home, About, News, Calendar, Photo Gallery, Links, FAQ and Contact. Note that each of these links corresponds to a folder or page in the Folder List panel. Page view: Notice that the insertion point is positioned to the left of the image of the bridge. (This image displays directly below the tab that reads "content.") Type 12 to move the image to the right in order to see the insertion point more plainly, then press CTRL+Z to undo the changes. Page view: Click the image. Notice that a tab that reads "img" displays above the image, and that the selected object appears selected in the Quick Tag Selector bar at the top of the page. The Quick Tag Selector bar shows a "breadcrumb trail" of nested elements and allows you to easily select either a <div> tag or the contents of a <div> tag when working in Page view. The Quick Tag Selector bar is shown in Figure 17-7.
8.
9.
Figure 17-7: Quick Tag Selector bar
10. Page view: Double-click the image to open the Picture Properties dialog box, as shown in Figure 17-8. Notice that the Alternate Text option is selected by default, reminding you to comply with accessibility standards. Click Cancel to close the dialog box.
Version 1.0
17-10
Figure 17-8: Expression Web Picture Properties dialog box
11. Page view: Examine the contents of the Tag Properties panel (you may need to click the Tag Properties tab in the lower-left panel). Notice that you can read the height, source and width properties of the selected image. Click the CSS Properties tab to view the CSS properties of the <div> tag that contains the selected image. 12. Page view: Click the Show Split View button at the bottom of the window to change to Split view, shown in Figure 17-9. You can use Split view to simultaneously see the Code view above and the Design view below. This view allows you to edit the code directly while seeing its effect on how the page is rendered.
Figure 17-9: Expression Web Split view
13. Page view: Click the Show Code View button at the bottom of the window to change to Code view, then click the Show Design View button to return to Design view.
Version 1.0
17-11
14. Press and hold CTRL, then click the Calendar hyperlink in the top navigation bar to open the calendar page in Page view. Holding the CTRL button allows you to follow hyperlinks while in Page view. Select File | Close to close the calendar page. 15. Select File | Preview In Browser to open a menu similar to the one shown in Figure 17-10. Expression Web allows you to preview your page in every browser you have installed on your system, and at varying resolutions. Select a browser in which to preview the page. If you have multiple browsers installed, select one of the Preview In Multiple Browsers options. Microsoft Internet Explorer and Mozilla Firefox are detected automatically by Expression Web. To include other installed browsers, click the Edit Browser List option so that you can specify additional browsers.
Figure 17-10: Expression Web Preview In Browser menu
16. Maximize the browser window(s) and click the links to explore the pages on the site. When you are finished, close the browser window(s). 17. Right-click the default.html tab at the top of the window, and select Close to close the default.html Web page and return to Folders view in the Web site interface.
NOTE: Each page has both a page title and a file name. You will learn how to display the page title in the next step.
18. Select the home page file by clicking default.html once in the Folder List panel, then click the Hyperlinks View button at the bottom of the window to change to Hyperlinks view. Your screen should resemble Figure 17-11. This view indicates all the hyperlinks associated with the home page. The icons to the left of the home page are links to the home page, and the icons on the right are links from the home page. You can examine the link structure to and from another page by selecting that page in the Folder List.
Version 1.0
17-12
NOTE: The Reports view is used mostly for site management, but can be very helpful for troubleshooting when developing even a small site. Be sure to use this feature.
Figure 17-11: Expression Web Hyperlinks view
19. Hyperlinks view: Right-click any one of the blue link lines and select Show Page Titles. This action toggles the display from the path and file name to the title of each linked page. Right-click a blue link line and select Show Page Titles again to toggle the display back to the default setting. 20. Hyperlinks view: Click the Reports View button at the bottom of the window to change to Reports view. The Site Summary report displays by default, as shown in Figure 17-12. The Site Summary report provides an overview of the statistics about your Web site. You can click the links under the Name column to view the other reports. These other reports are divided into three categories: Files, Shared Content and Problems.
Version 1.0
17-13
Figure 17-12: Expression Web Reports view
21. Reports view: Click the Unlinked Files link to view the two unlinked files lists in the Unlinked Files report. 22. Reports view: Click the drop-down arrow to the right of Unlinked Files, then select Problems | Slow Pages to view the Slow Pages report. There are no slow pages in the Web site. 23. Reports view: Click the drop-down arrow to the right of Slow Pages, then select Site Summary to view the Site Summary report again. 24. Expression Web: Leave the current Web site open.
Developing W3C-Compliant Code with Expression Web

OBJECTIVE 3.4.10: Enforcing accessibility standards with GUI site applications
You can develop entire Web sites in Expression Web without ever looking at the XHTML code in the pages. However, many longtime Web developers are skeptical of generated code and rightly so. Older versions of Microsoft Office products and FrontPage were notorious for creating convoluted and difficult-to-understand code. Expression Web, however, writes clean code that is compliant with X/HTML 1.0 Transitional by default. For Web designers who are not particularly adept at writing XHTML code, using a GUI development tool such as Expression Web is a good way to create Web pages that comply with W3C standards and thus promote accessibility, even without a detailed knowledge of the standards' specifications.
Version 1.0
17-14
Validating source code

OBJECTIVE 3.4.9: Validating source code with GUI site applications
The biggest benefit to validating your XHTML code is that pages written with valid XHTML will load faster than pages that use invalid code. This is because valid XHTML is predictable. The browser has to do less work to render validated XHTML code because every element has an opening and closing tag, attributes are enclosed in quotation marks, elements and attributes use lowercase letters, and so forth. With standard HTML, the browser often spends time inferring sloppily coded instructions or deciphering code errors before it can display the page. With valid XHTML, this extra work is not an issue. Several tools and sites are available to validate the code in your XHTML documents, most notably the W3C Markup Validation Service (http://validator.w3.org). In addition, many GUI site-development applications have built-in validation tools. Expression Web includes tools that you can use to validate your code to current W3C standards, including those for accessibility. Code validators use the information you provide in the <!DOCTYPE> tag to determine the standard by which they judge your code, so be sure your files include the correct DOCTYPE declaration at the top. For example, the following <!DOCTYPE> tag tells a code validator that the code in your file complies with the XHTML Transitional standard syntax rules:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1transitional.dtd">
If your DOCTYPE declaration were to specify the XHTML Strict standard instead, then your code syntax would be validated using requirements specific to that standard. Thus, if your XHTML code included formatting elements that could have been applied using CSS, for example, then it will not validate as XHTML Strict. However, it may validate as XHTML Transitional if the rest of your code is correct. In the following lab, you will explore some of the tools available in Expression Web for creating and validating pages that are W3C-compliant. You will also use an online validation service to further verify whether your code is XHTML-compliant. Suppose your company wants to invest in GUI applications to assist your Web development team in making the best use of its time. Your Web team manager has asked you to assess Expression Web and other applications to help determine advantages and disadvantages that will be considered in the company's buying decisions. She reminds you that although it will help your team to use tools that speed production, your team still has a goal of complying with W3C standards in all your practices and products.
VIRTUAL LAB Software for this lab is provided online. OBJECTIVE 3.4.2: W3Ccompliant code with GUI site applications
Lab 17-2: Validating code with Expression Web

Expression Web offers several settings to create code that is compliant with various standards and schemas. In this lab, you will learn to check and change these settings, generate Expression Web validation reports, and validate code using the W3C Markup Validation Service. 1. Expression Web: From the main menu, select Tools | Page Editor Options. Notice that in the Code View Options section (on the General tab), the page editor is currently set to highlight both invalid and incompatible HTML.
Version 1.0
17-15
2.
Page Editor Options: Click Authoring to view the Authoring tab, shown in Figure 17-13. Notice that the default Document Type Declaration setting is XHTML 1.0 Transitional.
Figure 17-13: Expression Web Page Editor Options dialog box Authoring tab
3.
Page Editor Options: Click Code Formatting to view the Code Formatting tab. Notice that tag and attribute names are lowercase, as required by the XHTML 1.0 specification. Expression Web: Close the Page Editor Options dialog box, open the default.html page, change to Code view and scroll to the top of the page if necessary. Verify that the document type is set to XHTML 1.0 Transitional. Code view: Scroll to line 44. Click to the left of the code on line 44, type <basefont> and press the space bar. Notice that the tag you inserted is highlighted in the Code View window. Position your mouse pointer over the highlighted tag to display a tip that reads The World Wide Web Consortium now regards the tag <basefont> as outdated. Newer constructs are recommended. Code view: Remove the <basefont> tag, then position the insertion point to the right of the </h2> tag and press ENTER to create a new line. Code view: Type <p>This is an emphasized <em>paragraph. Notice that Expression Web automatically inserts the </em></p> closing tags in the proper nested order. Remove the </em> tag and retype it after the </p> tag so that the line now reads: <p>This is an emphasized <em>paragraph.</p></em>. These tags are now improperly nested. Save the document. Expression Web: Select Panels | Compatibility to open the Compatibility panel at the bottom of the window. Click the green Run Compatibility Checker button at the upper-left corner of the Compatibility panel to open the Compatibility Checker dialog box, shown in Figure 17-14. Note that the selected option at the bottom of the dialog
4.
5.
6. 7.
8.
Version 1.0
17-16
box ensures that the page will be checked based on the DOCTYPE declaration. You can also select a specific version of HTML/XHTML against which to check the page.
Figure 17-14: Expression Web Compatibility Checker dialog box
9.
Compatibility Checker: In the Check Where section, select Current Page, then click Check to check the code on the current page. The results display in the Compatibility panel, as shown in Figure 17-15. The three code problems listed in the Compatibility panel are identified by line number. Two are code errors and one is an XHTML compatibility issue. Scroll to the right in the Compatibility panel to view explanations for the discovered errors.
Figure 17-15: Checking compatibility in Expression Web
10. Expression Web Status Bar: Two error icons appear in the Status bar an incompatibility icon and a code error icon. You can click the drop-down arrow next to each icon and select Go To Error to highlight the error in the Code view. 11. Code view: Remove the line of code that you added in Step 7.
Version 1.0
17-17
NOTE: Steps 12 through 14 demonstrate that the accessibility checker looks for the alt= attribute, but does not check for text between the quotation marks.
12. Code view: Select Panels | Accessibility to open the Accessibility panel at the bottom of the window. Click the green Run Accessibility Checker button at the upper-left corner of the Accessibility panel to open the Accessibility Checker dialog box, shown in Figure 17-16.
Figure 17-16: Expression Web Accessibility Checker dialog box
13. Accessibility Checker: In the Check Where section, select Current Page, then click Check to check the code on the current page. The results display in the Accessibility panel, indicating that there are no errors on the page. 14. Code view: In line 43, remove the attribute alt="" from the img tag. Now run the Accessibility Checker on the current page again. This time the results indicate an error: The image in line 43 of the code is missing a text equivalent. 15. Code view: Close the default.html page without saving the changes. Open your browser and go to http://validator.w3.org/. Here you can use the W3C Markup Validation Service to validate your code. 16. Browser: Use the validation service's Validate By File Upload feature to locate the default.html file in the firstWeb site and upload it. When you click the Check button, you should see the screen shown in Figure 17-17, which indicates that the document is valid XHTML. (The warning on the page refers to the use of the byteorder mark [BOM]. For more information on byte-order marks, and how to add or remove them from your Expression Web pages, see the related course appendix.) Save and close the document.
Version 1.0
17-18
Figure 17-17: W3C Markup Validation Service results
17. Browser: Close your browser. 18. Page view: Toggle off the display of the Accessibility and Compatibility panels. 19. Exit Expression Web. Expression Web automatically generates XHTML-compliant code by default. It includes built-in tools for checking compatibility with the declared document type and tools for checking for accessibility. These features help ensure that you create valid XHTML code. You have also seen that these features are not perfect. For example, when you use an Expression Web template, you must look through the code and provide alternate text for the images you use on your Web site. As an additional check, you can validate your pages using the W3C Markup Validation Service.
Version 1.0
17-19
Case Study
A Quick Start
Quick Change Oil Service was just starting up and needed a Web site, but did not have money budgeted for a Web developer. The owner, Fred Quick, knew that eventually he would want a Web site that reflected the uniqueness of his company. But for now, he just wanted to start publicizing the business. Fred purchased the Microsoft Expression Web software, signed up with a Web hosting company, and created the company's Web site himself in a few days by using the Expression Web templates. The site worked well and looked fine. Confident in his new Web development abilities, Fred changed the name of the company to Quick Change Oil and Web Site Service. * * *
Consider this scenario and answer the following questions. What advantages does Expression Web provide for Web development in general? What are the advantages of using Expression Web from the perspective of a user who is not a professional Web developer? What are its advantages for users who are professional Web developers? How might Expression Web hinder Web development? How do the topics of X/HTML knowledge and skills, compliant code, and accessibility relate to the scenario given in this case study? GUI Web site development environments such as Expression Web allow anyone to quickly create a Web site. Does this make every Expression Web user a Web site developer? Why or why not?
Version 1.0
17-20
Lesson Summary
Application project
Using an application such as Expression Web can save you a great deal of time when creating a Web site of any size. Simply eliminating the act of writing your own X/HTML code can reduce development time tremendously, especially if your X/HTML skills are limited. However, some developers prefer not to be restricted to a particular vendor or its products. If you are creating a personal site, do you think the potential time savings outweigh the disadvantages of vendor restriction? Suppose you are creating a site for a very large corporation. How do the advantages and disadvantages differ in this situation? What compromises can you think of to make this type of application work for your situation?
Skills review
In this lesson, you were introduced to Microsoft Expression Web 3 and you learned how to navigate the application. You became familiar with the various Expression Web views and their functions. You also learned to create new Web sites and preview your pages in various browsers. Finally, you learned how to create XHTML-compliant documents with Expression Web. Now that you have completed this lesson, you should be able to: 3.4.1: Compare site development using X/HTML text editors to site development using GUI site management applications. 3.4.2: Configure site development applications to develop W3C-compliant code, including XHTML 1.0 Transitional. 3.4.9: View and validate source code using GUI site development applications. 3.4.10: Use GUI site development applications to enforce compliance with accessibility standards.
Version 1.0
17-21
Lesson 17 Review
1. What are the advantages of using Expression Web to develop and manage a Web site?
2.
What are the disadvantages of using Expression Web to develop and manage a Web site?
3.
What is an Expression Web view? Name at least three of the views available in Expression Web.
4.
Describe a weakness of the Expression Web Accessibility Checker.
5.
If you type invalid code into the Code window, what will happen?
Version 1.0
17-22

This section is a supplement containing additional tasks for you to complete in conjunction with the lesson. These elements are: Optional Labs Computer-based labs to provide additional practice. Lesson Quiz Multiple-choice test to assess knowledge of lesson material.
Version 1.0
17-23
Optional Lab 17-1: Exploring Expression Web sites

In this optional lab, you will explore some of the options Expression Web offers for creating various types of Web sites quickly and easily. Virtual lab: A virtual software environment is provided for this and all following optional labs that use Microsoft Expression Web 3. Use the virtual lab unless you have the Expression Web software installed on your own computer. To enter the virtual lab environment, open your browser to http://education.certification-partners.com/ciw/, use your access code to log on to CIW Online, and then click the link for the virtual labs for this course. You can now complete Expression Web labs in the virtual lab environment. 1. 2. 3. Desktop: Start Expression Web 3. Expression Web: Select Site | Close if necessary to close the firstWeb site. Expression Web: Select Site | New Site to open the New dialog box. Click One Page Site, click in the Location box, enter C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson17\newsite2 to specify a name and path for the new site, then click OK to create a new one-page Web site. Notice that a blank page named default.html is added to the new Web site. Expression Web: Open default.html and switch to Code view if necessary. Notice that the document type is set to XHTML 1.0 Transitional. Code view: Select File | Properties to open the Page Properties dialog box, shown in Figure OL17-1. You use the Page Properties dialog box to specify various properties for your page. It is a best practice to give your page a meaningful title. Page titles display in the browser window title bar and in bookmarks when a visitor bookmarks your site.
4. 5.
Figure OL17-1: Expression Web Page Properties dialog box
6.
Page Properties dialog box: Click Formatting to view the Formatting tab. You use this tab to specify background pictures, background color, text color and hyperlink colors.
Version 1.0
17-24
7.
Page Properties dialog box: Click Advanced to view the Advanced tab. You use this tab to specify margins for your page. Click Cancel to close the Page Properties dialog box. Code view: Click the New Document button in the Common toolbar to add a new blank Web page to your site. The new Web page is currently called Untitled_1.html. Click between the <body> and </body> tags and type Favorite Links. Notice that when you add text to the page, an asterisk appears to the right of the page name in its tab. The asterisk indicates that there are unsaved changes in the page. Code view: Click the Save button in the Common toolbar to open the Save As dialog box, shown in Figure OL17-2. You use the Save As dialog box to name a new file.
8.
9.
Figure OL17-2: Expression Web Save As dialog box
10. Save As dialog box: Type linksPage in the File Name text box, then click the Save button to save the page. Notice that Favorite Links now appears between the title tags in the head section. 11. Code view: Right-click the linksPage.html tab and select Close to close the page. 12. Expression Web: In the Folder List panel, right-click linksPage.html, select Delete and click Yes to delete the page from the Web site. 13. Expression Web: In the Folder List panel, right-click C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson17\newsite2, select Delete, select Delete This Site Entirely, then click OK to delete the new Web site. 14. Expression Web: Select Site | New Site to open the New dialog box. Click Empty Site, then click OK to create a new empty Web site named newsite3 in the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson17\ directory. You can add pages as required to the new Web site using the New Document button or the File | New | Page command. 15. Expression Web: Select Site | New Site, then click the Import Site Wizard option once to select it. Read the description that appears in the right side of the dialog box. For what types of projects might you use this format?
Version 1.0
17-25
16. New dialog box: Click Templates in the left side of the New dialog box to view the available Web site templates. Click the various templates to view a description and a preview of the home page. You created a Web site using a template in a previous lab in this lesson. 17. New dialog box: Click Cancel to close the New dialog box, then select Site | Close to close the newsite3 Web site. 18. Exit Expression Web. In this lab, you explored some of the options Expression Web offers for creating various types of Web sites, and for adding, modifying and deleting pages. Many of these options allow the developer to create a complex Web site quickly and easily using a template, which is useful when time is limited. These options provide good guidelines and worthwhile inspiration for developers who need to save time or practice their skills. However, do not feel that you should restrict your Web designs to the structures and layouts you find prefabricated for you in Web applications.
Version 1.0
17-26
Lesson 17 Quiz
1. Microsoft Expression Web 3 is a GUI Web development application that offers which distinct functions? a. b. c. d. 2. Site management, page layout and design, and data connection Page layout and design, server hosting, and server extensions Server hosting, secure connection, and site management Secure connection, e-commerce capabilities, and server extensions
Expression Web allows you to: a. b. c. d. open only entire Web sites, not individual pages. create HTML pages that must be modified manually. modify only Web sites and individual pages created with Expression Web. modify any individual X/HTML page or site created with or without Expression Web.
3.
Which Expression Web view shows the files in your Web site on both the local (source) machine and on the remote (destination) server? a. b. c. d. Folders view Hyperlinks view Publishing view Page view
4.
Which Expression Web view is used for layout and design? a. b. c. d. Hyperlinks view Folders view Page view Reports view
5.
What functionality does Expression Web offer to develop XHTML-compliant code? a. b. c. d. Expression Web does not offer any functionality for developing XHTML-compliant code. Expression Web automatically generates code that fully complies with current XHTML specifications. The Expression Web Page Editor Options feature offers options that modify code to make it fully XHTML-compliant. Some Page Editor Options features modify code to make it partially XHTMLcompliant, and Code view applies XML syntax rules that complete XHTML compliance.
Version 1.0
18Lesson 18: Site Development with Expression Web 3 Basic Features

Objectives
By the end of this lesson, you will be able to: 1.2.8: Create Web page and site templates that fulfill design specifications. 3.4.3: Add images to Web pages and create image maps using GUI site development applications. 3.4.4: Add text, tables and hyperlinks to Web pages using GUI site development applications. 3.4.6: Create page and site templates using GUI site development applications. 3.4.8: Apply page and site templates to new pages using GUI site development applications.
18-2
1. What XHTML element can you style with CSS to create a navigation bar?
2.
Which of the following is true about working with images in a Web site? a. b. c. d. You You You You can easily import images into a Web site. must create the images while working in the Web site. can insert only images that are located on your computer. can insert only images that are already used in the Web site.
3.
In Expression Web, which of the following is true of external style sheets? a. b. c. d. Their use is now considered poor coding practice by the W3C. They must contain at least one style before you can attach them to a Web page. You can attach them to a page by dragging and dropping. They must reside outside the local Web site, otherwise they are not considered external.
Version 1.0
Lesson 18: Site Development with Expression Web 3 Basic Features
18-3
Page Layout Options in Expression Web

NOTE: Recall from earlier lessons that Cascading Style Sheets (CSS) is a technology that allows style definitions and formatting control of Web pages to be either specified within X/HTML elements or called remotely from an external style sheet.
Page layout in Expression Web is performed using the various subviews of Page view. Advanced page layout can be performed in several ways. Expression Web offers excellent support for CSS positioning, and still supports the use of X/HTML tables (placing the content into various cells that distribute it about a page) and X/HTML framesets (which divide the browser window into panes with independent content). As you learned in an earlier lesson, CSS has many advantages and is now the preferred way to lay out Web pages according to the W3C. In this lesson and the next, you will use CSS to lay out and format Web pages. Page layout using tables is discussed in this lesson because this method was once widely used and widely supported by GUI Web design applications. Ideally, tables should only be used for presenting tabular data within a page. The methods described in this lesson for creating page-layout tables also apply to the design of tables for formatting data.
OBJECTIVE 3.4.4: Page text, tables and hyperlinks with GUI applications
Layout tables in Expression Web

A layout table is an Expression Web tool for creating a page structure. You can select from several predefined layout tables, or you can create your own custom layout by drawing tables and cells. To use a layout table to structure a page, you draw or insert the table and then add content into the individual table cells. To add a layout table to a page, open the Layout Tables panel and click one of the predefined layout tables to insert it into the page. You can also click the Draw Layout Table button and use your mouse pointer to draw the table on the page. To add a cell to a layout table, click the Draw Layout Cell button and use your mouse pointer to draw the cell inside the layout table. You can also use the Table Properties dialog box to adjust the number of columns and rows in your layout table. You can modify the height, width, alignment, cell padding, border size, border color, background image and background color settings for a layout table. You can also modify the properties of individual table cells by specifying settings for horizontal and vertical alignment, height, width, columns spanned, rows spanned, border size, border color, background color and background image.
Creating a New Web Site Using Expression Web

NOTE: You will re-create the Habitat for Humanity site in the course labs, using images and text provided for your learning. You will have the opportunity to create your own sites on a chosen topic after completing the course.
For the remainder of the Expression Web labs, you will re-create sections of the Habitat for Humanity Web site. The graphics and much of the content for the site have already been assembled to expedite the Web-creation process. You will find all the necessary resources for the Habitat for Humanity site in the Lab Files for this course. Habitat for Humanity (also known simply as Habitat) is a not-for-profit, volunteer-driven organization that builds and sells homes for families across the world. The potential homeowner becomes a partner in building the home, and contributes to the actual building process as much as possible. This practice is called "sweat equity." Volunteers also help build the home. For years, Habitat has specialized in helping young people across the world contribute their time to help others obtain decent housing. Habitat for Humanity has built more than 350,000 homes across the world. Habitat also arranges no-interest mortgages and reasonable payment schedules for the homeowner, in cooperation with businesses and charitable organizations.
Version 1.0
18-4
Habitat For Humanity has allowed CIW to use an earlier prototype version of its Web site at www.habitat.org site as an example of a commercial-grade Web site. This permission is in no way an endorsement of CIW or Certification Partners LLC, nor does Habitat's permission to use portions of its site in labs teaching Web development skills represent any sort of alliance or partnership. You will build prototype pages using Habitat for Humanity content. 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.
Before you begin building the Habitat for Humanity site, you must first create a new Web site within Expression Web where you will store all your work. In the following lab, you will create this new Web site. Suppose your Web project manager advises you that your team will be developing a Web site for a new customer. Although you have not yet been provided with any content or information regarding the size or scope of the site, your project manager asks you to begin any initial tasks that you can perform now, because she expects the development time allotted for this project will be short. After conferring with your team members, you decide that it would be wise to create this site with a GUI Web development application such as Expression Web 3 to maximize your limited development time. This will allow you and your team members to collaborate on tasks, and you can start now by creating a new Web site in Expression Web.
Lab 18-1: Creating a new Web site with Expression Web

In this lab, you will create a new Web site to begin development of the Habitat for Humanity site. Virtual lab: A virtual software environment is provided for all labs that use Microsoft Expression Web 3. Enter and log on to CIW Online at http://education.certificationpartners.com/ciw/ to access the virtual lab environment as previously instructed. 1. 2. Desktop: Start Expression Web 3. Expression Web: Select Site | New Site to open the New dialog box. Click One Page Site in the middle section of the dialog box, then enter C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson18\habitat in the Location text box and click OK. Expression Web: The Habitat Web site will open in Folders View. Expression Web automatically creates a home page and names the file default.html. For the sake of consistency with other labs in this course, you will rename this page to index.html. In the Folder List panel, right-click default.html, select Rename, type index.html and press ENTER. Click Yes in the Confirm Rename dialog box to complete the renaming process. Expression Web: You can easily import images into a Web site. Select File | Import | File to open the Import dialog box, shown in Figure 18-1.
NOTE: Recall that index.html and default.html are standard names recognized by most Web servers as the default page in a directory (generally a site's home page).
3.
4.
Version 1.0
18-5
Figure 18-1: Import dialog box
5.
Import dialog box: Click the Add Folder button to open the File Open dialog box. Navigate to the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson18\Lab_18-01 folder, click the images folder, then click the Open button. This step lists the contents of the selected folder in the Import dialog box. Click OK to confirm and import the folder into the new Web site. The images folder now displays in the Folder List panel. Keep Expression Web open to continue to the next lab.
6.
Page Layout with CSS

Positioning in CSS is accomplished through <div> tags. A division (<div>)is a defined section in a document. A division has a variety of properties, including position, width, height and float. These properties are the ones you will use most in the upcoming labs in this lesson. The position property of a division (<div>) controls where it appears when the browser renders the page. In Expression Web, there are five possible settings for the position property: absolute, fixed, relative, static and inherent. As you learned earlier, setting the position property of a division to absolute or fixed removes the division from the normal flow. Setting the position property of a division to relative keeps it in the normal flow, but forces Expression Web to treat it as a layer.
Layers
NOTE: You will use layers extensively in the Dreamweaver lessons.
In Expression Web, a division (<div>) with an absolute, fixed or relative position is referred to as a layer and appears in the Layers panel. An advantage to using layers is that you can view and work with them in the Layers panel. If you add a division with a static or inherent position, it will not display in the Layers panel. Layers allow for flexible page layouts because they can be nested and because they can use relative positioning. Relatively positioned layers "find" their position relative to the browser window and to the elements adjacent to them. When the size of a relatively positioned layer changes, other elements on the page can adjust to compensate. Relatively positioned layers nested inside a parent layer position themselves relative to one another within the confines of the parent layer.
Version 1.0
18-6
Absolutely positioned layers are not "seen" by other elements, and are thus not considered part of the normal document flow. Relatively positioned layers may move over or under an absolutely positioned layer, depending on the z-index setting of the particular layers. You can, however, nest an absolutely positioned layer inside a relatively positioned parent layer.
Layer properties
Each layer has specific properties that control how it will render in a browser. In addition to height, width, margin and padding properties, other properties you should understand include: Z-index This setting determines the stacking order of layers along the z-axis. Layers with a higher z-index number are closer to the top of the stack (that is, closer to you). When you add a layer to a page, the z-index setting is automatically set to 1, which is higher than elements in the normal document flow. Elements in the normal document flow have a stack layer setting of zero (0). Float This setting forces the layer to position itself to a particular edge of the browser window, an adjacent layer, or its parent layer if it is a nested layer. You can set a layer's float to left, right, none or inherit.
Statically positioned divisions

NOTE: You will use statically positioned divisions in the Expression Web lessons to provide contrast to using layers in Dreamweaver.
Statically positioned divisions are part of the normal flow and, like layers, allow for flexible page layouts. These divisions can be nested and floated just as layers can. When you add a layer to a page, the layer is inserted with default values for height, width, position and z-index. If you add content to the layer that is larger than the layer itself, the layer must be adjusted. A static division (<div>), on the other hand, has no set properties. By default it appears as wide as its container, and it will stretch vertically to accommodate content. Throughout the labs in this lesson, you will design the layout of the Habitat page using statically positioned divisions. In subsequent lessons on using Dreamweaver, you will use layers. In the following lab, you will begin constructing the home page of your Web site. Even though you have not yet received the content, you can still prepare the page by setting certain properties, providing a title, and inserting a division (<div>) that will encompass other Web page elements.
Lab 18-2: Preparing to lay out the home page with Expression Web
In this lab, you will take the preliminary steps for creating a page layout for the Habitat for Humanity home page using CSS. First, you will set page properties. 1. 2. 3. Expression Web: Open index.html in Page view. Page view: Select View | Ruler And Grid | Show Ruler to see the ruler in Page view. Page view: Select File | Properties to open the Page Properties dialog box. In the Title text box, type Habitat for Humanity International to specify a meaningful title for the home page.
NOTE: Remember that a page title displays in the browser window title bar and in bookmarks.
Version 1.0
18-7
4.
Page Properties dialog box: Click the Formatting tab. In the Colors section, display the Background drop-down list and click the white square in the Standard Colors palette to set the background color to white. This step is precautionary although Expression Web uses white as the default background color (that is, the Automatic color is set to white), some browsers display a gray background if no background color is specified. Page Properties dialog box: Click the Advanced tab, and set the top, left, bottom and right margins to 0. This step removes the default margins around the page and allows your elements to butt up against the borders of the browser window. Page Properties dialog box: Click OK to close the Page Properties dialog box and save and apply the changes. Page view: Click the Save button on the Common toolbar to save the changes to index.html, then preview the page in your browser to see the page title in the browser window title bar. Close your browser. Page view: Notice that a new Inline style appears in the Apply Styles panel. Position the mouse pointer over the new Inline style, click the drop-down arrow that appears, then select Modify Style to open the Modify Style dialog box, shown in Figure 18-2. Note: You can also open the Modify Style dialog box by clicking the ellipsis ( ) that appears to the right of Style in the Tag Properties panel.
5.
6. 7.
NOTE: You will work with styles throughout this lesson and the next.
8.
Figure 18-2: Modify Style dialog box
9.
Modify Style dialog box: Notice that in the Category list box, the Background and Box categories appear in bold, signifying that you have applied settings for these categories. Click Background to view the settings for this category. You have set the background color of the page to white. Click Box to view the settings for this category. You have set the top, right, bottom and left margins to 0. Click OK to close the Modify Style dialog box.
Version 1.0
18-8
10. Page view: Switch to Code view. Notice that the inline style has been applied to the <body> tag. Switch back to Design view. It is considered good coding practice to separate formatting from content as much as possible, and this is easily accomplished through external style sheets. You can create an empty style sheet and attach it to your page even before you type a tag. 11. Page view: Select File | New | CSS to create a new style sheet named Untitled_1.css. Right-click the tab for the style sheet, select Save, type layout_styles and press ENTER to name and save the CSS document. Right-click the tab for the CSS sheet and select Close to close the style sheet. 12. Page view: You can attach a style sheet by dragging and dropping it onto an open Web page. With index.html open, click layout_styles.css in the Folder List panel, then drag and drop the style sheet onto the Web page. 13. Page view: Switch to Code view and examine line 7 of the code. The tag <link href="layout_styles.css" rel="stylesheet" type="text/css" /> links the external style sheet to the page. 14. Page view: Save index.html, then switch back to Design view. Now that the page properties have been set, you are ready to begin laying out the format of the page. First, you will insert a division (<div>) into the page that will serve as a wrapper for all the other elements you add to the page. That is, any subsequent divisions you insert during the following labs will be nested inside this first division. After you insert the division, you will set various CSS properties. 15. Page view: In the Toolbox panel, double-click the <div> tool to insert a statically positioned division into the page. 16. Page view: In the Apply Styles panel, click New Style to open the New Style dialog box, shown in Figure 18-3.
Figure 18-3: New Style dialog box
Version 1.0
18-9
NOTE: Remember that an ID selector is preceded by a hash mark (#) and can be applied to only one element in a document.
17. New Style dialog box: In the Selector box, select the existing text, then type #wrapper. This step specifies an ID selector for the new style. This style will be applied to only one element in the page. 18. New Style dialog box: Select Apply New Style To Document Selection. The new style will automatically be applied to the division (<div>). 19. New Style dialog box: Display the Define In drop-down list and select Existing Style Sheet to specify that you want to define the new style in an existing external style sheet. 20. New Style dialog box: Click the URL drop-down list and select layout_styles.css. The style sheet appears in the URL drop-down list because you linked to it in a previous lab step. If no style sheet appears in the drop-down list, you failed to link the style sheet to the page. 21. New Style dialog box: In the Category list box, select Position to view the available options, as shown in Figure 18-4. Notice that there is no position property specified, which means that the division (<div>) has a position of static.
Figure 18-4: New Style dialog box position properties
22. New Style dialog box: Click in the Width text box and type 700 to specify a width of 700 pixels. 23. New Style dialog box: In the Category list box, select Box to view the available options. In the Margin section, deselect the Same For All check box, then set the Right and Left margins to Auto. Setting these margins to auto will center the division (<div>) in the browser window.
Version 1.0
18-10
NOTE: You set the background color for the wrapper division so that you can ensure that subsequent divisions are properly nested within the wrapper division.
24. New Style dialog box: In the Category list box, select Background, display the background-color drop-down list, then click the yellow color square to set the background color for the wrapper division to yellow. 25. New Style dialog box: Click Apply and then click OK to save the style and apply it to the division (<div>). Notice that the new #wrapper style appears in the Apply Styles panel. Your screen should look similar to Figure 18-5. Notice that the Quick Tag Selector bar now reads <div#wrapper>.
Figure 18-5: Expression Web applying style
26. Page view: Click Save to save your changes to index.html. The Save Embedded Files dialog box (Figure 18-6) appears because you have linked an external style sheet to the page.
Figure 18-6: Save Embedded Files dialog box
27. Save Embedded Files dialog box: Click OK to save the changes to layout_styles.css.
Version 1.0
18-11
28. Page view: Switch to Code view to examine index.html. Notice that the new division is assigned an ID of wrapper. Click the layout_styles.css tab to view the style information. Notice the new style that reads:
#wrapper { width: 700px; margin-right: auto; margin-left: auto; background-color: #FFFF00; }
29. Page view: Click the index.html tab and switch back to Design view. Click inside the wrapper division (<div>) and press ENTER three times to add some vertical space. Save index.html and then preview the page in a browser. Change the size of the browser window and observe that the wrapper division maintains its centered position, then close your browser. 30. Keep Expression Web open to continue to the next lab. In this lab, you set margins and a background color for your home page, added a division (<div>) and manipulated some of its properties.
Nesting divisions
The ability to nest divisions inside other divisions allows you to create complex layouts that render the way you want. When you nest one division inside another, the containing division becomes the parent element (in this case, a containing box) and the nested division becomes a child element. Child elements inherit properties from the parent element, although you can manually set any properties that you require. In the following lab, you will continue constructing the home page. Suppose your Web project manager has just received the content to be used for the home page of your customer's new Web site. She has passed the content to you, instructing you to begin laying out a page structure that will display all this content in a well-organized and aesthetically pleasing manner. You sort through the many image and text files, and consider how it will all fit on a single page without looking jumbled. You decide to use nested divisions within the wrapper division that you already created. You can later use the home page structure you create as a template for supporting pages.
Lab 18-3: Nesting divisions with Expression Web

In this lab, you will insert and nest divisions for structuring the Habitat home page. 1. Page view: Click inside the wrapper division and press the up arrow three times to move to the top of the division. The insertion point should be visible at the top-left corner of the division. Toolbox panel: Double-click the <div> tool to nest a new division inside the wrapper division. Page view: In the Apply Styles panel, click New Style to open the New Style dialog box.
2. 3.
Version 1.0
18-12
4.
NOTE: Ensure that you select Apply New Style To Document Selection each time you define a style in this lab. If you do not see the formatting applied to the divisions you add to the page, then you should select the division, find the style in the Apply Styles panel, and apply the style manually.
New Style dialog box: Delete the existing text in the Selector text box, then type #masthead to specify a new ID selector. New Style dialog box: Select the Apply New Style To Document Selection option, specify to define the new style in the existing style sheet, and ensure that layout_styles.css appears in the URL text box. These steps ensure that the new style will be created in the external style sheet. For all new styles that you create in this lesson and the next (unless directed otherwise), apply these steps to create the style in the layout_styles.css style sheet. New Style dialog box: In the Category list box, select Background, display the background-color drop-down list, and click the white color square to set the background color for the masthead division to white. Click Apply and then click OK to save and apply the new style. Page view: Click in the (yellow) wrapper division immediately below the masthead division to position the insertion point, then in the Toolbox panel, double-click the <div> tool to insert a new division below the masthead division. Page view: Open the New Style dialog box and create a new style named #header_box in the layout_styles.css style sheet. Set the background color for the header_box division to a pale pink, then save and apply the style. The background colors you apply during this lab are for instructional purposes you are applying them to help you differentiate between the divisions in the page. You can later change or remove the colors.
5.
6.
7.
8.
NOTE: Ensure that you use the ID selector (#) when naming the style, and ensure that you are saving new styles in the layout_styles.css style sheet. NOTE: If any of the divisions in the page do not show the specified background color, then you failed to apply the style to the division (<div>). NOTE: The yellow section at the bottom of the named divisions is part of the wrapper division.
9.
Page view: Insert a new division (<div>) into the page inside the wrapper division and below the header_box division. Create and apply a new style named #greeting, and set the background color for the greeting division to silver.
10. Page view: Add a new division (<div>) named #container inside the wrapper division and below the greeting division. Give the container division a light blue background. 11. Page view: Add a new division (<div>) named #footer inside the wrapper division and below the container division. Set the background color for the footer division to black. Your page should resemble Figure 18-7. Note that the division names have been added to Figure 18-7 for instructional purposes.
Version 1.0
18-13
masthead header_box greeting container footer
Figure 18-7: Adding divisions to page
12. Page view: Save the page and the style sheet, then view index.html in Code view. Notice that each division (<div>) uses the ID attribute, and that the masthead, header_box, greeting, container and footer divisions are all nested inside the wrapper division. Switch back to Design view. 13. Page view: Click inside the silver greeting division to position the insertion point. The text div#greeting should appear in a tab above the division, and <div#greeting> should be highlighted in the breadcrumb trail. The greeting division (<div>) will contain two nested divisions one that will float left and one that will float right. You will add these now. 14. Page view: Add a new division (<div>) named #welcome inside the silver greeting division.
NOTE: Remember that you must set a width for a division (<div>) when applying the float property, otherwise the division will display at only 1 pixel wide.
15. New Style dialog box: In the Category list box, select Position, then set the width for the welcome division to 159 pixels. In the Category list box, select Layout, then set the float property to left. Save and apply the style. 16. Page view: Click to the right of the welcome division and insert a new division (<div>) named #quotation. Display the Position options and set the width to 541 pixels. Display the Layout options and set the float property to right. Save and apply the style.
Version 1.0
18-14
NOTE: If you experience difficulty positioning the insertion point, you can switch to Code view, select a division (<div>) in the code, and then switch back to Design view and click inside the highlighted division.
17. Page view: Switch to Code view. The code on your page should look like the code shown in Figure 18-8.
Figure 18-8: Nested divisions code view
18. Page view: Switch back to Design view and save your changes. The masthead division (<div>) will contain two nested divisions one that will float left and one that will float right. You will add these now.
NOTE: Ensure that you are creating the new styles in the layhout_styles.css style sheet and that you are applying the styles to the new divisions you add to the page.
19. Page view: Position the insertion point inside the white masthead division, then insert a new division (<div>) named #logo. Set the width for the logo division to 260 pixels, and set the float property to left. Save and apply the style. 20. Page view: Position the insertion point to the right of the newly added logo division, and insert a new division (<div>) named #top_right. Set the width for the top_right division to 440 pixels and set the float property to right. Save and apply the style. The header_box division will also contain two nested divisions. You will add them now. 21. Page view: Position the insertion point inside the pale pink header_box division and add a new division (<div>) named #picLeft. Set the width to 474 pixels and set the float to left. Save and apply the style. 22. Page view: Position the insertion point to the right of the picLeft division and add a new division (<div>) named #hope. Set the width to 226 pixels and set the float to right. Save and apply the style. The container division is the most complex division on the page. It will contain two nested divisions, and one of the divisions will itself contain two nested divisions. You will add these now.
Version 1.0
18-15
23. Page view: Position the insertion point inside the light blue container division and add a new division (<div>) named #left_nav. Set the width to 159 pixels and set the float to left. Save and apply the style. 24. Page view: Position the insertion point to the right of the left_nav division and add a new division (<div>) named #content. Set the width to 541 pixels and set the float to right. Set the background color to white. Save and apply the style. 25. Page view: Position the insertion point inside the content division, then add a new division (<div>) named #content_right. Set the width to 261 pixels and set the float to right. Set the background color to light green. Save and apply the style. 26. Page view: Press the left arrow key once to position the insertion point in the content division to the left of the content_right division. Add a new division (<div>) named #content_center. Set the width to 280 pixels and set the float to left. Save and apply the style. 27. Page view: Save your changes. The divisions on your page should appear similar to Figure 18-9.
Figure 18-9: Layers for home page layout complete
28. Keep Expression Web open to continue to the next lab. In this lab, you worked with nested divisions and styles to create a structural layout for a Web page.
Version 1.0
18-16
Inserting Images with Expression Web

OBJECTIVE 3.4.3: Images with GUI site applications
Inserting images into Web pages with Expression Web is a simple process. You can insert images that are located on the Internet or on your computer, or you can insert images already used in the Web site. To insert an image, place your insertion point in the position (or division) on the page where you want the image to appear, then select Insert | Picture | From File. You can also click the Insert Picture From File button located on both the Common toolbar and the Standard toolbar. Figure 18-10 shows the button on the Standard toolbar.
Figure 18-10: Insert Picture From File button on Standard toolbar
The Picture dialog box will appear, as shown in Figure 18-11. The Picture dialog box is a standard Windows file dialog box, which allows you to browse for an image to insert.
NOTE: Remember that an image used on a Web page must be accessible by the Web server to appear on the page. Expression Web makes this easy because it can copy any image you insert from another location and automatically place that copy in the correct location for the new page.
Figure 18-11: Picture dialog box
After you locate the image file, click the Insert button to insert the image into your Web page. Once you click the Insert button, the Accessibility Properties dialog box opens (Figure 18-12), prompting you to enter alternate text for your image.
Figure 18-12: Accessibility Properties dialog box
In the following lab, you will insert image files into a Web page using Expression Web. Suppose you have finished laying out a page structure for the home page of your customer's new Web site. You approximated the layer sizes in your page structure, knowing that the content you arranged within the layers might change the layers as you continue to develop the page. You can now begin placing image files into the layers of
Version 1.0
18-17
your page layout. Expression Web makes image insertion easy by using point-and-click for placement, offering simple menus to locate image files, and copying image files to the correct Web site folder for your site structure.
Lab 18-4: Inserting images with Expression Web

In this lab, you will insert images into the Habitat for Humanity home page. Virtual lab note: If you use the virtual lab environment, the supplemental files are already provided; the location is the same in the virtual environment. You do not need to upload supplemental files to the virtual lab environment. Note: The file index_nested.html is a completed version of the layout developed in Labs 18-2 and 18-3. If you did not complete Labs 18-2 and 18-3, you can copy this file from the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson18\Lab_18-4 folder into the Web site. If you elect to use the index_nested.html file, rename your original index.html file to index_previous.html and rename index_nested.html to index.html. Make sure that the "new" index.html is designated as your home page. 1. Page view: Select View | Toolbars | Standard to open the Standard toolbar. Even though the Insert Picture From File button is located on the Common toolbar, you must first click the Toolbar Options button to access it. Using the Standard toolbar offers faster access to the button. Page view: Click inside the white logo division, then click the Insert Picture From File button on the Standard toolbar. This step opens the Picture dialog box. Picture dialog box: If necessary, navigate to the current site, navigate inside the images folder you imported in a previous lab, then double-click topnavBG_01.jpg. This step selects the image and opens the Accessibility Properties dialog box. Accessibility Properties dialog box: Type Habitat for Humanity International logo and press ENTER to specify the alternate text and complete the insertion of the image. Page view: Click inside the pale pink picLeft division, then click the Insert Picture From File button on the Standard toolbar. This step opens the Picture dialog box. Notice that the Picture dialog box opens showing the previously selected images directory. Picture dialog box: Double-click homepage_header1.jpg. This step selects the image and opens the Accessibility Properties dialog box. Accessibility Properties dialog box: Type header background and press specify the alternate text and complete the insertion of the image.
ENTER
NOTE: You should check the breadcrumb trail to ensure that you are positioning the insertion point correctly. You can also check the tab on the selected element for the division name.
2. 3.
NOTE: The logo division automatically adjusts in height to accommodate its contents.
4.
NOTE: Ensure that you select the correct <div> when inserting pictures. Check the tab for the division name.
5.
6. 7. 8.
to
Page view: Click inside the pale pink hope division, click the Insert Picture From File button on the Standard toolbar, double-click homepage_header2.gif, type Give hope in the Alternate Text box in the Accessibility Properties dialog box, then press ENTER. These steps insert the image. Page view: Temporarily close the Folder List and the Tag Properties/CSS Properties panels to free up more viewing space. Your page should resemble Figure 18-13.
9.
Version 1.0
18-18
Figure 18-13: Inserting images into home page
Notice that the images within the divisions inside the header_box division are not aligned. Remember that the Expression Web viewing space is limited. You must preview the pages in several browsers to see how your page really appears. 10. Page view: Click the Save button on the Common toolbar. This step saves the page with the embedded image files. 11. Page view: Preview the page in a browser. Notice that the images are aligned in the browser window. Close your browser.
NOTE: In Step 12, make sure you insert the image into the welcome division and not into the greeting division.
12. Page view: Click inside the silver welcome division and insert the welcome.gif image file. Enter welcome as the alternate text. 13. Page view: Click inside the silver quotation division and insert the rotatingquote3.gif image file. Enter quote as the alternate text. 14. Page view: Save the page with the embedded files. 15. Keep Expression Web open to continue to the next lab. In this lab, you inserted images into the layers of the home page.
Modifying division properties

After you have placed most of your images in your divisions, you can modify division properties to achieve the look you want. For example, you can alter a division's background color or specify a background image. In the next lab, you will modify the properties of several divisions. Suppose you have inserted some of the content for your customer's home page into the layer structure you created to lay out the page. When you preview the page in your browser, you can see that
Version 1.0
18-19
it does not render as expected, so you decide to add a background image and adjust some of the background colors. These adjustments will keep your page layout snug, economical and aesthetically pleasing.
Lab 18-5: Modifying division properties with Expression Web

In this lab, you will modify the properties of several divisions in the home page. First, you will preview the home page in a browser. 1. Page view: Select File | Preview In Browser and select a browser and a screen resolution, or press F12 to preview the page using the most recent browser preview settings. Your page should look similar to Figure 18-14. Notice that the background colors from the wrapper and welcome divisions should be adjusted, and that the division to the right of the logo needs a background image.
Figure 18-14: Previewing page that requires adjustments
2.
NOTE: Recall the hexadecimal scheme for identifying color values. You can now see these codes used in an application.
Browser: Close your browser.
Next, you will change the background color for a division. 3. Page view: In the Apply Styles panel, right-click #welcome and select Modify Style to open the Modify Style dialog box. In the Modify Style dialog box, display the Background options, click in the background-color box and type #FF9900 to set the background color of the division to a shade of orange. Click OK. You can also adjust a division's properties directly in the style sheet. 4. Page view: Click the layout_styles.css document (or open it if necessary) and locate the style for #wrapper. Change the background color value to #FFFFFF. Do not delete the semicolon (;) at the end of the line. Click the index.html tab to view the page. Notice that the background color for the wrapper division is now white.
Next, you will add a background image to a division. 5. Page view: In the Apply Styles panel, modify the #top_right style. Display the Background properties, then click the Browse button to the right of the backgroundimage text box. Navigate to the images folder if necessary, then double-click topnavBG_02.jpg to specify the image as a background for the division. Display the Position properties and set the height to 65 pixels, then click OK.
Version 1.0
18-20
Finally, you will style the footer. 6. Page view: In the Apply Styles panel, modify the #footer style. Display the Background properties and set the background color to #D5D5FF. Display the Layout properties and set the clear property to both. Setting the clear property ensures that the footer will appear one line below all the elements above it. Display the Font properties and set the font family to Arial, Helvetica, sans-serif. Set the font-size property to small. Set the font-style property to italic. Click OK to save the style. Page view: Click in the footer division, press ENTER and then type Habitat for Humanity International 2010 to enter the footer text. Click the Center button on the Common toolbar. Page view: Scroll down in the Apply Styles panel to view the current styles in your document. A new class style named .style1 now appears at the bottom of the panel below the heading Current Page. When you centered the footer text, Expression Web created the .style1 class style as an embedded style and applied it to the text. Page view: Switch to Code view and scroll up to see the embedded style near the top of the page. Switch back to Design view.
7.
8.
9.
10. Page view: Save the page and the style sheet, then preview the page in your browser. Your page should look similar to Figure 18-15.
Figure 18-15: Previewing adjusted home page

NOTE: If you are unable to clear extra space from any of the divisions, look at the code for the page and remove any suspect <br /> tags.
11. Browser: Close your browser. 12. Keep Expression Web open to continue to the next lab. In this lab, you adjusted division properties to provide background color and a background image, and you used the clear property.
Version 1.0
18-21
Creating Hyperlinks with Expression Web

Expression Web makes hyperlink creation simple; all that is required is content from which to link, and a destination to which the link will point. The Insert Hyperlink button is located on the Expression Web Common and Standard toolbars. Figure 18-16 shows the Insert Hyperlink button on the Standard toolbar.
NOTE: Consider the amount of code required to create a hyperlink when writing X/HTML manually.
Figure 18-16: Insert Hyperlink button on Standard toolbar
Clicking this button will open the Insert Hyperlink dialog box. You need only select or enter the file name to which you want to link, and Expression Web creates the hyperlink for you. In the following lab, you will create hyperlinks with Expression Web. Suppose you are still designing the home page for your customer's site. You have not yet created other pages to which you can link. However, because you will use this home page as a template for creating other pages on your site, you want to add a hyperlink that points back to the home page from supporting pages. You can create this link now on the home page, and it will persist in your template document so that you need not repeatedly create this link in every page. Expression Web makes hyperlink creation quick and easy, and with some additional planning, you can save a lot of development time.
Lab 18-6: Creating hyperlinks with Expression Web

In this lab, you will create a hyperlink to your Web site's home page. Although it may seem unnecessary to create a link to the home page on the home page, remember that this home page will be used as a template for other pages on your site, so creating this link is important to save you development time later. 1. 2. 3. 4. Page view: The home page index.html should be open. Click the image containing the Habitat for Humanity International logo to select it. Page view: Click the Insert Hyperlink button on the Standard toolbar. This step opens the Insert Hyperlink dialog box. Insert Hyperlink dialog box: Double-click index.html (open). This step defines the hyperlink. Page view: Click the Save button to save the changes. Apply Styles panel: Scroll down in the Apply Styles panel to view the current styles in your document. A new class style named .style2 now appears at the bottom of the panel below the heading Current Page. When Expression Web inserted the hyperlink, it created the .style2 class style as an embedded style and applied it to the Habitat for Humanity International image.
NOTE: In some cases, such as when creating a hotspot, Expression Web adds a border around an image used as a hyperlink.
5.
Version 1.0
18-22
6. 7.
Apply Styles panel: Position your mouse pointer over the .style2 class style to view its properties. This style sets the border width to zero (0) pixels. Keep Expression Web open to continue to the next lab.
In this lab, you added a hyperlink to a Web page.
Creating Image Maps with Expression Web

OBJECTIVE 3.4.3: Images with GUI site applications
NOTE: Have you had experience creating image maps in X/HTML? If so, consider the image map creation process. How much code does it require? Is this a process you would like to see automated? NOTE: A hotspot is a hyperlink located in a designated area on a graphic. In a browser, a hotspot is invisible until the mouse pointer changes to a pointing hand. Image maps may contain single or multiple hotspots. VIRTUAL LAB Software for this lab is provided online.
An image map allows you to specify a portion or multiple portions of an image to act as a hyperlink. Expression Web is equipped to create image maps easily with the Pictures toolbar, which can be opened by selecting View | Toolbars | Pictures from the menu bar. Figure 18-17 shows the Pictures toolbar. The buttons shown circled help define image map areas. By choosing one of the three shapes (rectangle, circle or polygon), you can create a hotspot area on the selected image.
Figure 18-17: Pictures toolbar in Page view
In the following lab, you will create an image map using Expression Web. Suppose the home page you are designing for your customer has an image that includes a button area users can click. You want to specify just the button portion of the image to act as a hyperlink, rather than the entire image. You can create an image map to designate just one area or multiple areas of an image as a hyperlink to another page. Expression Web makes it easy to create image maps by offering point-and-click functionality for creating hotspots, so you need not determine coordinates and dimensions manually. Easy creation of image maps means you can target precise areas of images as hyperlinks when appropriate, instead of linking an entire image to save coding time even when it is not the preferred effect.
Lab 18-7: Creating an image map with Expression Web

In this lab, you will create an image map in Expression Web by creating and linking a hotspot area on an image for the Habitat home page. 1. 2. 3. Page view: The home page index.html should be open. Select View | Toolbars | Pictures to open the Pictures toolbar. Editing window: Click the image inside the hope division (that is, the image with the Click Here To Donate button) to select that image. Page view: On the Pictures toolbar, click the Rectangle button to draw a rectangular hotspot. When you move your mouse pointer over the image, the mouse pointer will become a pencil icon, as shown in Figure 18-18. This indicates that your mouse pointer is in an appropriate area of the page to begin drawing a hotspot. It will begin drawing when you click.
Version 1.0
18-23
Figure 18-18: Mouse pointer becomes pencil icon, indicating readiness to draw
4.
Editing window: Click and drag a rectangle to encompass the yellow box portion of the image that reads Click Here To Donate. If the shape is not correct the first time, you can delete it and try again. After you create the rectangle, the Insert Hyperlink dialog box will appear. In the Address field, enter https://www.habitat.org/support/, then click OK. A hyperlink has now been created from the hotspot area in this image to the Support page. Notice that the image moves down in the Page view window. When you created the hotspot, Expression Web added a border around the selected image, making it too wide to display on the same row with the image in the picLeft division (<div>). Page view: Click the Save button to save the changes. Page view: Preview the page in your browser. Notice that a blue border displays around the image in which you created a hotspot. Close your browser. Editing window: Click the image in which you created the hotspot. Make sure you click the image and not the division that contains it. Apply Styles panel: In the Apply Styles panel, position your mouse pointer over the .style2 class style, click the drop-down arrow, then select Apply Style. This step applies the style to the image and removes the border. Notice that the image moves back up into its original position.
5.
6. 7. 8. 9.
10. Page view: Save the page and preview it in your browser. Notice that the blue border no longer appears around the image. 11. Browser: Test the new hyperlink. When you are finished, close your browser. 12. Keep Expression Web open to continue to the next lab. In this lab, you used Expression Web to create an image map.
Creating Navigation Bars Using CSS

You can easily add navigation to your Web site using CSS. The navigation bar, whether horizontal or vertical, is based on an unordered list. You then style the unordered list and the list elements, and add and style links, to create the navigation for your Web site.
Expression Web also offers interactive buttons, which you can use to add navigation to your pages. These buttons use images. You can read about interactive buttons and find a lab in which you insert interactive buttons into a Web page in the related course appendix.
In the following lab, you will create and style an unordered list that will serve as a navigation bar on the home page. Suppose you are almost done with the home page and
Version 1.0
18-24
have planned out several supporting pages for your customer's Web site. You can add elements to your unordered list that will become links to those planned supporting pages.
VIRTUAL LAB Software for this lab is provided online. NOTE: At Step 2, make sure you specify percent (%) as the unit of measurement for the top_nav division.
Lab 18-8: Creating navigation bars using CSS

In this lab, you will create and style a navigation bar based on an unordered list. First, you will add a division (<div>) named #top_nav that will contain the unordered list. 1. Page view: The home page index.html should be open. Click in the top_right division (<div>) to position the insertion point, then add a new division named #top_nav. Keep the New Style dialog box open.
Next, you will style the #top_nav division. 2. New Style dialog box: Display the Position properties and set the width to 100 percent (%). Display the Font properties and set the font family to Tahoma, set the font size to x-small and set the font weight to bold. Save and apply the style.
Next, you will add an unordered list to the #top_nav division. 3. Page view: Click inside the #top_nav division and type Get. Select the text, display the Style drop-down list on the Common toolbar, then select Unordered List <ul> to specify that this text is an element in an unordered list. Notice that both a <ul> and a <li> tag display in the breadcrumb trail. This step also adds a bullet before the text because that is the default list style for an unordered list. Page view: Click at the end of the text, press the space bar, type Involved, press type How It Works, press ENTER, type Where We Build, press ENTER, and type True Stories. This step enters the text for the navigation bar.
ENTER,
4.
Next, you will create a descendent style that will apply to the unordered list. 5. Page view: In the breadcrumb trail, click the <ul> tag to select the unordered list, then click New Style in the Apply Styles panel. Name the new style #top_nav ul. (Be sure that you have specified to define the style in the existing style sheet and to apply the new style to the document selection.) This new style will apply to the list elements in the unordered list. Keep the New Style dialog box open. New Style dialog box: Display the List properties, then set the list-style-type property to none. This step removes the bullets from the unordered list elements. New Style dialog box: Display the Box properties, then set the padding and margins to zero (0). Save and apply the style. Your unordered list should appear as shown in Figure 18-19.
6.
NOTE: Notice that the #top_nav ul style appears at the bottom of the Apply Styles panel under the heading Contextual Selectors.
7.
Figure 18-19: Styling unordered list
Next, you will create a descendent style that will apply to the elements in the unordered list.
Version 1.0
18-25
8.
Page view: Click anywhere in the unordered list, then click New Style in the Apply Styles panel. Name the new style #top_nav li. (Be sure that you have specified to define the style in the existing style sheet and to apply the new style to the document selection.) Keep the New Style dialog box open. New Style dialog box: Display the Layout properties and set the float property to left. Setting the float property to left will cause the text to display on one line. Keep the New Style dialog box open.
9.
10. New Style dialog box: Display the Position properties and set the width to 105 pixels. Each list item will be 105 pixels wide. Display the Block properties and set the text-align property to center. Display the Background properties and set the background-color property to #FFFF99. Display the Border properties. Ensure that the Same For All option is selected for each of the border elements, then set the border-style property to solid, set the border-width property to 1 pixel and set the border-color property to #FF9900. Save and apply the style. Your unordered list should now appear as shown in Figure 18-20.
Figure 18-20: Styling unordered list elements
Consider that if you want to use this list as a navigation bar, the "buttons" on the bar look a little too short. Notice also that the list does not extend to the right edge of the page and that it would probably look better at the bottom of the greeting division. You can adjust various properties of the containing block (#top_nav), the unordered list and the list elements to improve the appearance of the list. You will begin by making the list elements appear more like navigation bar buttons. 11. Page view: Click anywhere in the unordered list so that the #top_nav li style appears at the bottom of the Apply Styles panel. In the Apply Styles panel, right-click #top_nav li and select Modify Style. 12. Modify Style dialog box: Display the Position properties and set the height property to 18 pixels. Drag the Modify Style dialog box to the left edge of the screen so that you can see the unordered list. Click Apply in the Modify Style dialog box and observe the result on the page. The text within each box would look better if it were vertically centered. 13. Modify Style dialog box: Display the Box properties, deselect the Same For All option for the padding settings, then set the top padding to 3 pixels. Save and apply the style. To move the unordered list to the right edge of the page, you can set the float property for the unordered list. Before you float the division, you should set its height to match the height of its contents. The list elements have a height property of 18 pixels, plus 3 pixels for top padding, plus two 1-pixel borders on the top and bottom, for a total height of 23 pixels. 14. Page view: Click anywhere in the unordered list, then click the <ul> tag in the breadcrumb trail so that the #top_nav ul style displays at the bottom of the Apply Styles panel. In the Apply Styles panel, right-click #top_nav ul and select Modify
Version 1.0
18-26
Style. Display the Position properties and set the height property to 23 pixels. Display the Layout properties, then set the float property to right. Save and apply the style. To vertically reposition the top_nav division, you can add a top margin. To ensure that the list elements will display at the bottom of the top_nav division, you can set the height property of top_nav to the height of its contents 23 pixels. 15. Page view: In the breadcrumb trail, click the <div#top_nav> tag, then right-click #top_nav in the Apply Styles panel and select Modify Style. Display the Position properties and set the height to 23 pixels. Display the Box properties, deselect the Same For All option for the margin settings, and set only the top margin to 42 pixels. Save and apply the style. 16. Page view: Save your changes and preview the page in a browser. Your page should appear similar to Figure 18-21.
Figure 18-21: Unordered list styled and in place
17. Close your browser and keep Expression Web open to continue to the next lab. Note: Do not worry if the navigation bar moves on the page in the Expression Web Page view. You may find that as you work with the elements on the page, they move unexpectedly. What matters is how the page renders in the browser. In this lab, you created and styled an unordered list that will be used as a navigation bar.
Adding and styling navigation bar links

Once you have created and styled the unordered list for your navigation bar, the next step is to add hyperlinks and then to style the hyperlinks. In the following lab, you will add links to your unordered list elements and create links to pages that you have not yet created. You can then save the home page as a template from which you will create your supporting pages, and all the pages based on the template will include the same navigation bar. This saves development time and effort, allowing you to focus on other details of the Web project.
Version 1.0
18-27
Lab 18-9: Adding and styling links using CSS

In this lab, you will add hyperlinks to the list elements in your navigation bar and style the links. You can assign properties to each of the four hyperlink states described in Table 18-1.
Table 18-1: Hyperlink states
Hyperlink State Hyperlink Active hyperlink Visited hyperlink Hovered hyperlink
Description
A hyperlink that has not been selected A hyperlink that is currently selected A hyperlink that has already been followed A hyperlink that the mouse pointer is hovering over
You can use the selectors listed in Table 18-2 to set the appearance of hyperlinks in various states.
Table 18-2: Hyperlink selectors
Selector a a:active a:visited a:hover a:link
Use
Sets the default appearance of a hyperlink Sets the appearance of a hyperlink when clicked Sets the appearance of a hyperlink that has been clicked Sets the appearance of a hyperlink when the mouse pointer is hovering over the hyperlink Sets the appearance of a hyperlink that has not been clicked
First you will create the links. 1. Page view: The home page index.html should be open. In the navigation bar you have just created, select the text Get Involved and select Insert | Hyperlink to open the Insert Hyperlink dialog box. Click in the Address box at the bottom of the dialog box, type getinvolved.html, then press ENTER to create a hyperlink to a page you have not yet created. Page view: In the navigation bar, select the text How It Works, select Insert | Hyperlink, click in the Address box, type howitworks.html, then press ENTER to create a hyperlink to another page you have not yet created. Page view: Create hyperlinks to a page named wherewebuild.html and a page named truestories.html.
2.
3.
Next, you will style the links by creating a descendant style that will apply to links defined in the top_nav division. 4. Page view: Open the New Style dialog box and type #top_nav a:link, a:visited in the Selector box. Be sure to list the hyperlink states in this specific order. Save the new style in the layout_styles.css style sheet. New Style dialog box: Display the Font properties if necessary, set the color to #000066, and set the text-decoration property to none. Display the Layout properties and set the display property to block. This setting makes the entire width
5.
Version 1.0
18-28
of each list element a clickable area. Click OK to save the style. Notice that the links now display in dark blue, with no underline. 6. Page view: Save your changes, preview the page in a browser and move the mouse pointer over each link. Notice that each "bar" in your navigation bar is clickable. Close your browser.
You can also set the hover property for a link in the navigation bar to make it display differently from the rest when a user hovers a mouse pointer over it. 7. 8. Page view: Open the New Style dialog box and type #top_nav a:hover in the Selector box. Save the new style in the layout_styles.css style sheet. New Style dialog box: Display the Font properties if necessary, set the color property to #FF0000, then save and apply the style. Save, then preview the page in a browser. Notice that as you position the mouse pointer over each link, the link displays in red. Close your browser.
In this lab, you added links to your navigation bar and styled the links using CSS. In the following labs, you will save a copy of the home page as a template and use the template to create the supporting pages specified in the links.
Expression Web's Dynamic Web Templates

OBJECTIVE 3.4.6: Creating templates with GUI site applications
OBJECTIVE 1.2.8: Web page and site templates
Expression Web allows you to create and use dynamic Web templates. As discussed earlier in this course, a template is a document that specifies default settings or attributes. For example, a template can specify the layout structure, images, typeface, font colors and so forth used throughout a page or site. By using templates, you can ensure that all your pages consistently adhere to the site's design specifications without having to manually format each page. You can create a dynamic Web template from scratch by saving a new, blank page as a template and then adding the elements you want. You can also save an existing page as a dynamic Web template. After a template is created and saved, it can be used to create new Web pages. Pages created from a dynamic Web template are automatically attached to that template. You can also attach a dynamic Web template to other pages in a Web site. Any changes you make to the dynamic Web template are reflected in the attached pages. If you choose to detach a dynamic Web template from a page, you will not lose any page content, but any subsequent changes you make to the dynamic Web template will not be reflected in the detached page. You can use any number of dynamic Web templates in a Web site, and you can attach a dynamic Web template to as many pages as you want. Because many of the pages in a site will use the same elements, it makes sense to create a template to reduce development time. In order to use dynamic Web templates in your Web site, you must have the Maintain The Site Using Hidden Metadata Files property enabled. This property, which can be accessed on the General tab of the Site Settings dialog box, is enabled by default.
NOTE: Remember that by default, Expression Web creates two hidden folders when creating a new Web site.
Version 1.0
18-29
Defining editable regions

When you create a dynamic Web template, all the template areas are locked by default. You must define particular areas in your template as editable regions so that you can edit the content in the editable areas in the pages that are attached to (or created from) the template. Editable regions allow the pages attached to the template to present their own unique content. Editable regions are identified in the code by the  and  tags. Figure 18-22 shows the default editable region in a dynamic Web template called the doctitle region.
Figure 18-22: Editable regions in dynamic Web template
The editable doctitle region allows you to change the title of a document created from (and/or attached to) a dynamic Web template. You must add at least one additional editable region to a template before you can use it to create Web pages.
NOTE: A template is a predesigned format that includes font, color, image and page-layout specifications; it can be applied to multiple pages to create a uniform look and feel. Have you used templates with other word-processing, presentation or desktop-publishing applications? VIRTUAL LAB Software for this lab is provided online.
In the following lab, you will create a dynamic Web template using Expression Web. Suppose you have finished creating the basic structure of your customer's home page. Although the content in the remaining areas of the page will differ from page to page on the site, you have established a layout structure with some basic images and links that you want to appear on all site pages. You can now make this home page a dynamic Web template, then use it as the basis for other supporting pages in the site. This saves you development time because you will not have to re-create identical page elements repeatedly as you develop the rest of the site. You can simply add or substitute any pagespecific content into the editable regions of the template structure.
Lab 18-10: Creating a dynamic Web template with Expression Web

In this lab, you will create a dynamic Web template on which to base your supporting pages for the Habitat for Humanity site. 1. Expression Web: Close index.html and any other open pages. This step closes Page view and shows the Folders Site view.
Version 1.0
18-30
NOTE: You should be saving a copy of the home page as the template. If you save the home page itself as the template, you will need to create a new home page.
2.
Folders view: In the list box, right-click index.html, then select New From Existing Page. This step creates and opens a copy of the home page, Untitled_1.html. Tech Note: Notice that you are saving a copy of the home page as a dynamic Web template. If you save the home page as the template, then you will need to create a new home page.
3.
Expression Web: Select File | Save As. The Save As dialog box will open. At the bottom of the dialog box, change the Save As Type to Dynamic Web Template. Specify HH_WebPage as the name for the new template, then click Save. These steps create a dynamic Web template named HH_WebPage.dwt, which is open in Page view. Page view: Open the Page Properties dialog box, specify the title and description as shown in Figure 18-23, then save the template.
4.
Figure 18-23: Page Properties dialog box settings for HH_WebPage template
Before you can use the template to create other pages, you must first define editable regions. In the following steps, you will modify the template and define editable regions.
NOTE: You are deleting these divisions because in subsequent pages one image will fill the entire header_box division.
5.
Page view: Switch to Code view. Locate the code <div id="picLeft">, then delete the code for both the picLeft and hope divisions. Note: Be sure not to delete the closing </div> tag for the header_box division.
6.
Code view: Switch back to Design view. Ensure that the insertion point is positioned inside the header_box division. Press ENTER twice to add some space to the division to enable you to see it more clearly. Page view: Click the div#header_box tab to select the header_box division. Page view: Right-click the selected division and select Manage Editable Regions. This step opens the Editable Regions dialog box, shown in Figure 18-24.
7. 8.
Version 1.0
18-31
Figure 18-24: Editable Regions dialog box
9.
Editable Regions dialog box: Type headerPicture in the Region Name text box, then click the Add button to create an editable region named headerPicture. Click the Close button to close the Editable Regions dialog box.
10. Page view: Switch to Code view. Locate the code <div id="container"> and doubleclick container in the code window. This step selects the container division. 11. Code view: Switch back to Design view. The container division is already selected in the page. Right-click the container division and select Manage Editable Regions. 12. Editable Regions dialog box: Type contentArea in the Region Name text box, then click the Add button to create an editable region named contentArea. Click the Close button to close the Editable Regions dialog box. 13. Page view: Click in the footer division. Position the insertion point to the left of the footer text and press BACKSPACE if necessary to make the footer only one line high. 14. Page view: Click the div#footer.style1 tab, right-click in the selected division, select Manage Editable Regions, type footer in the Region Name text box, click the Add button to create an editable region named footer, then click the Close button to close the Editable Regions dialog box. 15. Page view: Save and close the template. Now your template is ready for use. 16. Keep Expression Web open to continue to the next lab. In this lab, you created a dynamic Web template and defined editable regions. You can now use the template to create the supporting Web pages in your site.
Creating pages from a template

Once you have created and saved a dynamic Web template, you can use it to create Web pages. The File | New | Create From Dynamic Web Template command opens the Attach Dynamic Web Template dialog box, such as the one shown in Figure 18-25.
Version 1.0
18-32
Figure 18-25: Attach Dynamic Web Template dialog box

OBJECTIVE 3.4.8: Applying templates with GUI site applications
Select the dynamic Web template you want to use, then click the Open button. Expression Web will create a new, untitled Web page based on the dynamic Web template. In the following lab, you will use the dynamic Web template you just created to create additional Web pages. Suppose your customer's home page has a basic design, and you have created a template from it to build other pages in the site. Now you can begin using the template to add supporting pages to the site. Consider the amount of development time you will save by using a dynamic Web template to create this site's supporting pages.
NOTE: You will now see how much time you can save by using dynamic Web templates for Web page design.
Lab 18-11: Adding supporting Web pages with Expression Web

In this lab, you will add supporting Web pages to the Web site using the dynamic Web template you created in the previous lab. 1. Expression Web: Select File | New | Create From Dynamic Web Template. This step opens the Attach Dynamic Web Template dialog box. Attach Dynamic Web Template dialog box: Click the HH_WebPage.dwt template, then click the Open button. This step creates a new untitled Web page based on the template and opens an Expression Web message box indicating that a new page has successfully been created and attached to the template. Click the Close button to close the message box. The new page appears in Page view. Page view: Move your mouse pointer over the new page. Notice that several regions are not accessible, as indicated by the circle with a slash through it. Editing window: Click in the <div#header_box> area on the new page. This step positions the insertion point in an editable region.
NOTE: When you open the Attach Dynamic Web Template dialog box, you may need to navigate to the Habitat folder containing the dynamic Web template.
2.
3. 4.
Version 1.0
18-33
5.
Page view: Click the Insert Picture From File button on the Standard toolbar, double-click getiv_photo.jpg, enter Photo of men on roof. as the alternate text, then press ENTER. This step inserts an image file into the editable region. If any pale pink area displays below the picture, you need to take the extra space out of the header_box division. To remove the extra space, click in the pink area, then press BACKSPACE. Alternatively, you can switch to Code view and delete the <br/> tag that causes the extra space. Page view: Open the Page Properties dialog box, enter Get Involved as the page title, then click OK. Page view: Save the new page as getinvolved.html. This step saves the first supporting page for your Web site. Page view: Close the new page. Page view: Repeat Steps 1 through 8 to create and save three more pages in the site and replace the images in the first editable region of each new page. Specify the image names, alternate text, page titles and file names for each page as listed in the following table. Image Name how_photo.jpg build_photo.jpg true_photo.jpg Alternate Text
Photo of people building a house. Photo of a row of houses. Photo of people smiling as a home is being built.
6. 7. 8. 9.
Page Title
How It Works Where We Build True Stories
File Name
howitworks.html wherewebuild.html truestories.html
Next, you will view the new pages in a browser and test the hyperlinks. 10. Expression Web: Open the index.html page in Page view, then use the Preview In Browser command to preview the home page in your browser. 11. Browser: Click each hyperlink in the navigation bar to view each of the supporting pages. Notice the page titles in the title bar of the browser window. Click the Habitat for Humanity International logo on each page to return to the home page. When you are done, close your browser. 12. Page view: Close index.html. 13. Keep Expression Web open to continue to the next lab. In this lab, you used a dynamic Web template to create supporting pages in your Web site. You also modified content and properties in the supporting pages, and tested the interactive buttons.
Detaching pages from a dynamic Web template

After you create pages from a dynamic Web template, you can detach them from the template at any time. Detaching a page from a dynamic Web template does not remove any of the content. Only the formatting provided by the template is removed. However, the template elements on the page will not be dynamically updated in the detached page if you update those elements in the template.
Version 1.0
18-34
When you detach a page from a dynamic Web template, you can access all regions of the page. In the following lab, you will detach pages from a dynamic Web template. Suppose you want to work in the individual Web pages and you need the ability to access all the elements on the page in order to fine tune the page. You can detach the pages from the template and regain full editing control. Notice that you do not lose any of your work when you detach the pages from the template.
Lab 18-12: Detaching pages from a dynamic Web template with Expression Web
In this lab, you will detach pages from the HH_WebPage dynamic Web template. 1. Expression Web Folders view: In the list box, click getinvolved.html to select it, then select Format | Dynamic Web Template | Detach From Dynamic Web Template. When the Expression Web message box opens, click the Close button. These steps detach the getinvolved.html page from the dynamic Web template. Folders view: Open the getinvolved.html page. Notice that it still includes all the navigation elements and that all regions of the page are accessible. Page view: Close the getinvolved.html page. Folders view: Detach the howitworks.html page from the dynamic Web template. Folders view: Detach the wherewebuild.html page from the dynamic Web template. Folders view: Detach the truestories.html page from the dynamic Web template. Folders view: Open the index.html page, then preview the home page in your browser. Browser: Click each interactive button in the navigation bar to view each of the supporting pages. Notice that the interactive buttons and hyperlinks on the pages detached from the template still function as expected. When you are done, close your browser. Page view: Close index.html.
2. 3. 4. 5. 6. 7. 8.
9.
10. Keep Expression Web open to continue to the next lab. In this lab, you detached Web pages from a dynamic Web template.
Pasting Formatted Text with Expression Web

When creating or updating Web content, you will often use content that is already in electronic format, such as a Word document. You can copy or cut text from a file and paste the text into an Expression Web document in Page view. When you paste text, the Paste Options button appears near the pasted content. You can click the Paste Options button to display a list of options for setting the appearance of the content you are pasting. These options are described in Table 18-3.
Version 1.0
18-35
NOTE: Remember that although pasting formatted text from other documents may generate compatibility errors, this process saves a great deal of time when creating Web pages and enables more efficient team collaboration.
Table 18-3: Paste options
Option Match Destination Formatting Keep Source Formatting Remove Formatting Keep HTML Only
Effect
If the source document contains a style with the same name as a style in your destination document, this option specifies to use the style in the destination document and not the style from the original (source) document. Preserves the style formatting of the source document regardless of the styles in the destination document. Removes all formatting and pastes the selection as plain text. Forces Expression Web to render, rather than display, HTML tags. Use this option if you copy an example of HTML code from a browser, for instance. Removes all formatting, pastes the selection as plain text and allows you to set options in the Paste Text dialog box to control line breaking and white space.
Keep Text Only
You should keep in mind, however, that text formatting performed in applications other than Expression Web may result in code that is not up to current XHTML and CSS standards. If you paste text from a document formatted in Microsoft Word, for example, error icons often will appear in the status bar or in the Compatibility panel if you run the Compatibility Checker. The most common errors generated by pasting text from Word documents are improperly nested closing tags, tag attribute names typed in uppercase letters, and the use of deprecated tags. In most cases, these errors will not prevent the page from rendering properly, but you should be aware that these errors will prevent your page from validating. In the following lab, you will paste pre-existing content into your Web pages using Expression Web. Suppose you have finished creating the layout for your customer's home page and supporting pages. These pages contain structure, images, navigation and links, but they still do not include written content. You can add content in several ways, including manually typing it in. However, your customers have already provided you with some page content that they have formatted to look as they want it. Rather than take the time to manually enter content, correct any errors you make in entry, and format the content to match your customer's preferences, you can simply paste the provided content exactly as it was provided. This saves you development time and gives your customers exactly what they want.
Lab 18-13: Pasting formatted text with Expression Web

Note: In order to perform this lab, you must have Microsoft Word installed on your computer. The virtual lab does not provide access to Microsoft Word. If you are using your own software but do not have Microsoft Word, skip this lab. In this lab, you will paste pre-existing formatted text into a Web page. 1. 2. Folders view: Open the getinvolved.html page in Page view. Desktop: Browse to the \LabFiles\Lesson18\Lab_18-13 folder and double-click the file Habitat_Volunteer_Opportunities_1.doc to open a Word document that
Version 1.0
18-36
NOTE: Although formatting is already applied to this text, it will still conform to the size and shape of the layer into which it is placed. Also, additional or new formatting can still be applied to this content in Expression Web.
contains content you will copy and paste. Press CTRL+A to select all the text, then press CTRL+C to copy the selected text to the clipboard. 3. 4. Expression Web: Click inside the <div#content_center> division to position the insertion point. Expression Web: Press CTRL+V to paste the text from Habitat_Volunteer_Opportunities_1.doc into the content_center division. Notice that formatting such as font choice, size and bolding is already applied to this text. Page view: Scroll down to the end of the inserted text, click, and then press add a line of white space between the pasted text and the footer.
ENTER
5. 6.
to
Desktop: Browse to the \LabFiles\Lesson18\Lab_18-13 folder and double-click the file Habitat_Volunteer_Opportunities_2.doc to open a Word document that contains content you will copy and paste. Press CTRL+A to select all the text, then press CTRL+C to copy the selected text to the clipboard. Close the open Word documents and quit Microsoft Word. Expression Web: Scroll up to the top of the page, click inside the <div#content_right> division to position the insertion point, then press CTRL+V to paste the text from the Word document into the division. Your page should resemble Figure 18-26.
7.
Figure 18-26: Get Involved page with text inserted

NOTE: Ensure that you set the Compatibility Checker for XHTML 1.0 Transitional and CSS 2.1.
8.
Page view: Click at the end of the inserted text in the content_right division to display the Paste Options button. Click the Paste Options button, then select Keep Source Formatting. Page view: Open the Compatibility panel and run the Compatibility Checker. Notice that errors are found due to the use of the <o:p> tag, which is not permitted in XHTML 1.0 Transitional. There are also errors because the Word document uses properties that are not supported by CSS 2.1.
9.
Version 1.0
18-37
10. Page view: Switch to Code view, then double-click any one of the CSS 2.1 incompatibilities listed in the Compatibility Checker panel. Notice that many of these are caused by the use of the text-underline property. 11. Page view: Switch back to Design view, close the Compatibility panel, save the page and then preview it in a Web browser. The page renders correctly. How important is it to ensure that all the code on your site is valid? Are there times when you might compromise valid code in order to meet a deadline? 12. Browser: If time permits, visit http://validator.w3.org/ and validate the getinvolved.html page. How do the validator results compare with the errors that Expression Web highlighted in the Compatibility Checker? 13. Browser: Close your browser. 14. Page view: Close getinvolved.html. 15. Keep Expression Web open to continue to the next lab. In this lab, you pasted formatted text from a Word document into Expression Web.
Pasting X/HTML content with Expression Web

NOTE: X/HTML content pasted into an Expression Web file will also retain any previous formatting.
Expression Web also allows you to paste existing X/HTML content into Web pages. Like RTF or Word documents, existing X/HTML pages are often used to create new pages or to update old ones. When pasting X/HTML content into a current page, Expression Web removes the structure tag pairs (<html>, <head>, <title> and <body>) so that no duplicates will exist. Any formatting contained within the <body> tags of the pasted text will be inserted at the cursor's location. Depending on the type of X/HTML content being pasted, you may need to make slight modifications after the pasting process. In the following lab, you will paste existing XHTML content into a Web page created with Expression Web. Suppose some of the written page content that your customer has provided is in the form of existing XHTML pages from an older site. This content also already includes formatting that the customer wants to retain. Like using pre-existing content in RTF or Word documents, you can use Expression Web to paste this XHTML content exactly as it was provided. This saves you development time and gives your customers exactly what they want.
VIRTUAL LAB Software for this lab is provided online. NOTE: You need not worry about the look of the page right now. You will adjust margins and apply styles in the next lesson.
Lab 18-14: Pasting X/HTML data into an Expression Web document

In this lab, you will paste existing X/HTML data into a Web page. 1. 2. Expression Web: Open the howitworks.html page in Page view. Desktop: Browse to the \LabFiles\Lesson18\Lab_18-14 folder and double-click the file how_1.htm to open the document that contains content you will copy and paste. Press CTRL+A to select all the text, then press CTRL+C to copy the selected text to the clipboard. You will insert the text from how_1.htm into the content_center division. Notice that formatting such as font choice, size and bolding is already applied to this text.
Version 1.0
18-38
3. 4.
Expression Web: Click inside the <div#content_center> division to position the insertion point, then press CTRL+V to paste the content. Desktop: Browse to the \LabFiles\Lesson18\Lab_18-14 folder and double-click the file how_2.htm to open the document. Press CTRL+A to select all the text, then press CTRL+C to copy the selected text to the clipboard. Close your browser. Expression Web: Click inside the <div#content_right> division to position the insertion point, then press CTRL+V to paste the content. Your page should resemble Figure 18-27.
5.
Figure 18-27: How It Works page after inserting X/HTML content
6. 7.
Page view: Save, then close howitworks.html. Close the Habitat site, then quit Expression Web.
In this lab, you inserted X/HTML pages into a Web page using Expression Web.
Version 1.0
18-39
Case Study
Template Dynamics
Jeff and Tanya own their own business, and Tanya created their company Web site in Expression Web last winter using a dynamic Web template to create the pages. Business has been booming, Jeff and Tanya are working overtime, and their Web site requires updating. Specifically, they want to add several new pages using their existing page layout. Their son, Chris, has just begun a Web page design class in school, and Jeff wants Chris to update the Web pages on their company Web site. Jeff and Tanya create the new content and find images for the new pages. As Chris begins working in the Web site, he encounters two frustrating difficulties: The content he inserts generates compatibility errors, and once the content is inserted, he finds that small adjustments to uneditable regions are often required to make a page render correctly. After meeting with Jeff and Tanya, the three of them decide that right now getting the page to render correctly is more important than achieving 100-percent compatibility. However, Jeff and Tanya agree that Chris should change the dynamic Web template to ensure that it is compatible and compliant. They also agree that once the Web site is updated, they will retain Chris and allow him to update the code on the rest of the pages so that the entire site is compliant and compatible. After adjusting the code in the dynamic Web template and generating new pages, Chris detaches the new pages from the dynamic Web template. * * *
Consider this scenario and answer the following questions. How did using dynamic Web templates save Tanya time when she first designed the Web site? Do you think that Chris's changes to the template will save time for updating the Web site in the future? What are the relative merits and drawbacks of using a dynamic Web template? What are the ramifications of detaching a page from a dynamic Web template?
Version 1.0
18-40
Lesson Summary
Application project
Many of the Web page elements you created with Expression Web in this lesson are elements that you have created in the past by writing X/HTML code manually. If you have taken the CIW Web Page Authoring Fundamentals course, you will have created entire Web sites using only a text editor, image files and X/HTML.
NOTE: You can study and modify the XHTML code you created with Expression Web in Optional Lab 18-1: Modifying Expression Webgenerated code.
Compare the process of creating Web pages by writing code manually to using a GUI editor such as Expression Web. After creating the same Web page elements by simply making selections and clicking buttons, you may wonder: Why would anyone bother to learn X/HTML when GUI applications make the process so much faster? Remember that knowledge of X/HTML is a requirement in the Web development market. Understanding the tags and code structure means you can read the code you create with a GUI application, and you can manually customize tags with the application. You can also pursue advanced scripting or programming languages more easily if you already understand X/HTML.
Skills review
In this lesson, you learned how to insert and manipulate divisions and division properties with Expression Web. You also learned to insert images, create hyperlinks and image maps, create navigation bars using CSS, and develop and use page templates. You also pasted existing content from Word documents and X/HTML into your Web pages. Now that you have completed this lesson, you should be able to: 1.2.8: Create Web page and site templates that fulfill design specifications. 3.4.3: Add images to Web pages and create image maps using GUI site development applications. 3.4.4: Add text, tables and hyperlinks to Web pages using GUI site development applications. 3.4.6: Create page and site templates using GUI site development applications. 3.4.8: Apply page and site templates to new pages using GUI site development applications.
Version 1.0
18-41
Lesson 18 Review
1. What are three approaches to page layout supported in Expression Web? Which of these methods is recommended?
2.
In Expression Web, how is a division affected by its float property setting?
3.
Name at least three properties you can modify with the Page Properties dialog box in Expression Web.
4.
What are the default property settings when you insert a statically positioned division into a page?
5.
In order to use dynamic Web templates in your Web site, which Web site property must be enabled?
Version 1.0
18-42

Version 1.0
18-43
VIRTUAL LAB Software for this lab is provided online. NOTE: This optional lab requires you to use a file that you created in this lesson's labs.
Optional Lab 18-1: Modifying Expression Web-generated code

In this optional lab, you will study and modify the code generated by the Microsoft Expression Web GUI Web page tool. Virtual lab: A virtual software environment is provided for all labs that use Microsoft Expression Web 3. Enter and log on to CIW Online at http://education.certificationpartners.com/ciw/ to access the virtual lab environment as previously instructed. 1. 2. 3. 4. Desktop: Start Expression Web. Expression Web: Open the Habitat for Humanity Web site. Folders view: Double-click the file index.html to open the home page in Page view. Page view: Click the Code button at the bottom of the editing window. Expression Web will display the XHTML source code that it generated as you created the Habitat for Humanity home page. Your screen should resemble Figure OL18-1.
Figure OL18-1: Source code for index.html displayed in Code subview of Page view
5.
Code subview: Study the XHTML code for the index.html page. Can you understand the code? GUI Web page editors such as Expression Web allow people with no XHTML skills to create Web pages such as this one. Imagine how this code would look if you had no XHTML training. What else do you notice about this source code? The code is easy to read through because it follows good coding practices of placing tags on separate lines and using indentation. Further, values appear in a different color from that of elements and attributes.
6.
Version 1.0
18-44
7. 8.
Continue to study the XHTML code for the index.html page. Are there any tags you do not recognize? Now you will manually edit some of the XHTML code. From the menu bar, select File | Save As and save this file as index2.html. Scroll to line 13 in the code. In the class style .style2, change the border-width attribute value from "0" to "10". Click the Design button to view the effects of your code change. Design subview: The Habitat for Humanity home page should now appear in Page view with a border around the logo division and around the hope division. Save index2.html so you can view it in a browser. Click the Preview In Browser button on the Common toolbar.
9.
10. Browser: The home page now has a border surrounding the top, left and bottom edges of the logo division, and around all the edges of the hope division, which contains the homepage_header2.gif image file (as shown in Figure OL18-2), instead of its previous borderless structure. Close the browser window.
Figure OL18-2: Page with modified XHTML showing border lines
11. Design subview: Return to the Code subview. In the .style2 class style, change the border-width attribute value again, this time from "10" to "25". Click the Design button and see how the page has changed. Click the Code button and change the border-width attribute from "25" to "50". Click the Design button and look at the page again. 12. Note how quickly you can preview changes you make to the XHTML code. Compare this process to making experimental changes without the help of the GUI editing tool. Click the Code button, and change the .style2 border-width attribute value back to "0". 13. Folders view: Open layout_styles.css. 14. Layout_styles.css: Locate the code for the #welcome style and change the background color from "#FF9900" to "#CC99FF". Click the index2.html tab and click the Design button to see the color change on your page. Return to layout_styles.css and change the background color attribute back to "#FF9900". Compare this process to the GUI process of selecting the division, right-clicking the applied style in the Apply Styles panel, selecting Modify Style, displaying the Background properties, displaying the background-color drop-down list, accessing the More Colors dialog
Version 1.0
18-45
box, specifying and selecting a custom color, and closing any open dialog boxes. If you know the color code you want to try, do you think it may be faster to try this experimental change by simply changing one code in the style sheet and observing the effect on the page in Design view? 15. You can experiment further with the XHTML source code on the index2.html page and with the property settings on the layout_styles.css page. Try changing division dimensions and image file names in the code, and compare the process with modifying pages using the GUI tools provided by Expression Web. Do you find that some changes are easier or faster if you make them in the XHTML file, or do the Expression Web tools always simplify the process?
NOTE: Make sure you do not save changes to layout_styles.css.
16. Expression Web: When you are finished experimenting, close layout_style.css without saving the changes. Then close the index2.html file. In the Folders view, right-click index2.html, then select Delete. The Confirm Delete dialog box will appear and ask you if you are sure you want to delete this page from the Habitat Web site. Click Yes. Understanding XHTML tags and code structure means you can read the code you create with a GUI application and manually customize tags with the application. Although a GUI application can save time when creating Web pages, it is still necessary to understand and be able to modify the code that was written for you by the application. For some changes, modifying XHTML code is easier or more direct than using a GUI application.
Version 1.0
18-46
Lesson 18 Quiz
1. When you create a dynamic Web template in Expression Web, which of the following is true? a. b. c. d. You can use the new template immediately to create new Web pages. You must change the document title of the new template before you can use it. The new template is automatically attached to all existing pages in your Web site. You must define editable regions in the template before you can attach it to a Web page or use it to create a new Web page.
2.
You can center a statically positioned division on a page in Expression Web by: a. b. c. d. selecting the division and clicking the Center button on the Common toolbar. accessing the Tag Properties and setting the alignment property to Center. setting the left and right margins to auto. dragging the division to the center of the page.
3.
In Expression Web, when you set page properties such as a background color or page margins, to which element are these settings applied? a. b. c. d. The The The The <head> tag <title> tag <meta> tag <body> tag
4.
In Expression Web, what does it mean when an external style sheet does not display in the URL drop-down list of the New Style dialog box? a. b. c. d. The external style sheet has not been attached to the Web page. The external style sheet does not contain any styles. The use of an external style sheet is prohibited by the document type declaration. The use of an external style sheet is prohibited by the secondary schema applied to the page.
5.
When you apply float to a division, what other property must you set if you want to be able to see the division on the page? a. b. c. d. The The The The visible property position property block property width property
Version 1.0
19Lesson 19: Site Development with Expression Web 3 Advanced Features

Objectives
By the end of this lesson, you will be able to: 3.4.5: Create Web forms using GUI site development applications. 3.4.7: Apply CSS to page and site templates using GUI site development applications. 4.3.6: Connect a Web page to a database using various methods.
19-2
1. Which of the following symbols precedes the selector for a class-based style? a. b. c. d. 2. A hash mark (#) A question mark (?) A period (.) Quotation marks (")
Where are internal CSS styles defined? a. b. c. d. In In In In a text file that includes the .css file name extension the head section of a Web page the line of code that contains the item to be styled the metadata section of a Web page
3.
What are three ways to apply styles in Expression Web?
Version 1.0
Lesson 19: Site Development with Expression Web 3 Advanced Features
19-3
Expression Web Styles

OBJECTIVE 3.4.7: CSS in GUI page and site templates
Styles provide an effective way to maintain consistency throughout a site. You have already had some experience using styles and style sheets. In this lesson, you will review what you have learned, expand your knowledge, and practice applying and managing styles. To implement styles, you typically select a style definition, and all aspects of the site then adhere to the rules of that definition. Recall the processes you learned earlier in this course for manually applying cascading style sheets and design templates to Web pages.
NOTE: How do styles differ from templates? Both are used to apply consistent properties to multiple pages. A template is a basic page structure upon which you can build and add varying content. A style is a style sheet that can be attached to the varying content on some or all pages to unify content appearance.
An intranet is a useful example of this design strategy. In an intranet, many departments and people are responsible for content. Each department (and even each content creator) probably has preferences for the design of its own portion of the site. Without a style convention that is consistent across the entire site, the intranet would become a mismatched compilation of internal information that is difficult to navigate, read and understand. How styles are applied often depends on the scope of the project. Some companies provide required templates for intranet pages, establishing consistency for the main structure but leaving decisions about the content to the individual departments. Other companies specify the templates to be used, as well as the fonts, the colors and the images. Although such requirements may stifle the creative aspect of development, they ensure that the site complies with the company's mission and goals. With Expression Web, you can use an existing style sheet, or you can define your own styles and link your site pages to them. Additionally, you do not need to know how to code the styles because Expression Web can write the code for you. All you need to know is how you want the style to look, then you can make the appropriate selections.
Inline styles, and internal and external style sheets

NOTE: Compare the process for creating Expression Web styles to the process for creating style sheets by writing code manually.
Styles can be applied three ways in Expression Web: They can be linked, embedded or inline. As you have already learned, inline styles appear inline with the text they format. Inline styles are used to define a set of properties for a single item (or block of items). Inline styles are not reusable that is, if you want to apply the same formatting rules to another item on the page, you must define those properties again for the item you want to format. On the other hand, if you want to define a reusable set of formatting properties (that is, properties that can be applied to multiple items on a Web page), you can use internal or external cascading style sheets. The styles of an internal CSS are defined in the head section of a Web page. These styles are embedded in the Web page. The styles of an external CSS are defined in a text file that includes the .css file name extension. In order to apply these styles to a Web page, you must link the Web page to the style sheet.
Selector-based styles
In Expression Web, a style that resides in an internal or external CSS can be class-based, element-based, or ID-based. You can also specify descendant selectors to apply a style to particular elements that are contained within another element. Each type of style is distinguished from the other types by its selector.
Version 1.0
19-4
Class-based styles used to define a set of properties that you want to use on one or more items in a Web page. The selector for a class-based style is preceded by a period (.). Element-based styles used to define a set of properties that you want every instance of a particular HTML element to use in a Web page. The selector for an element-based style includes only the element. ID-based styles used when you want to define a set of properties for a single item or block of items. Like an inline style, an ID-based style is applied to only a single item, but an ID-based style makes your code easier to read than an inline style. The selector for an ID-based style is preceded by a hash mark (#).
Style precedence
In general, local style rules take precedence over general style rules. That is, styles defined in an inline CSS take precedence over those defined in an internal or external CSS, and styles in an internal CSS take precedence over styles in an external CSS. The portions of a general style that are not contradicted by a more local style rule still apply to HTML elements even when a local style is applied. For example, suppose you create an element-based style for paragraphs in your inline CSS. This paragraph style specifies that paragraph text will appear in Arial, bold, red. Your page contains several paragraphs, and you select one of the paragraphs and apply an inline style that formats the paragraph to display in Times New Roman, normal. The paragraph to which you applied the inline style will appear in Times New Roman, normal, red. (The portion of the inline CSS style font-color: red is not contradicted by the inline style, and thus will be applied to the paragraph element.)
Generated cascading style sheets

When you format items in a Web page, Expression Web automatically generates new styles (or modifies existing styles) in an internal CSS or inline CSS, as appropriate, unless you specify to create and/or modify styles in a linked external style sheet. Settings on the CSS tab of the Page Editor Options dialog box (shown in Figure 19-1) determine whether Expression Web will generate inline CSS or embedded CSS.
Version 1.0
19-5
Figure 19-1: Page Editor Options dialog box CSS tab
Selecting Auto Style Application specifies that Expression Web will generate and apply styles automatically.
Using external styles

As you have learned, an external style sheet is a file with a .css file name extension. The file contains only style specifications. When an external style sheet is linked to a Web page, the styles defined in the external style sheet are applied to items in the Web page. External style sheets can be linked to many pages in a Web site, and a single Web page can have more than one external style sheet linked to it. You have already seen that using external style sheets helps the designer maintain a uniform look and feel across all the pages in a Web site and reduces the effort required to style elements in each Web page. You can experiment with formatting to style the appearance of content on one or several pages in your site. This approach gives you flexibility while you design, saves you development time, and helps you unify the site pages. Further, using a style sheet helps you comply with W3C recommendations for Web page formatting.
NOTE: You can create a style sheet based on one of the predefined style sheets in Optional Lab 19-1: Observing the effects of multiple style sheets in Expression Web.
You can create a blank style sheet and define your own styles, or you can use one of several predefined Expression Web style sheets. In the following lab, you will modify styles in an external style sheet that is linked to several Web pages. Suppose your supervisor gives you style information that should be applied to several pages in the Web site. By modifying styles in an external style sheet, you can implement those style changes with very little work.
Version 1.0
19-6
Lab 19-1: Working with external style sheets in Expression Web

In this lab, you will modify styles in an external style sheet to affect changes throughout multiple pages in a Web site. Virtual lab: A virtual software environment is provided for all labs that use Microsoft Expression Web 3. Enter and log on to CIW Online at http://education.certificationpartners.com/ciw/ to access the virtual lab environment as previously instructed. 1. Desktop: Start Expression Web and open the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson19\Habitat Web site. Note: This Web site is similar to the one you created in Lesson 18. However, some new files (gift_shop.aspx, HH_styles.css, style_demo.html) have been added, and some files (wherewebuild.html, getinovolved.html) have been preformatted to save time during this lesson. The completed Habitat site files from the previous lesson are provided in your C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson18\habitat(completed) directory. Files are provided in the same directory location in the virtual environment. 2. Folders view: Open getinvolved.html in Design view. Notice that the text in the content_center and content_right divisions should be formatted to make both columns appear distinct. You will add margins to these divisions to improve their appearance. Page view: Select Panels | Reset Workspace Layout to open and size the default panels. Page view: Close the Folder List and the Tag Properties and Toolbox panels to expand the remaining open panels. Page view: In the Apply Styles panel, right-click the #content_center style, select Modify Style, then display the Position properties. The current width setting is 280 pixels. You will add a 10-pixel left margin and a 10-pixel right margin; therefore, you must reduce the width by 20 pixels to accommodate the space taken by the margins. Change the width to 260 pixels, and keep the Modify Style dialog box open. Modify Style dialog box: Display the Box properties, deselect the Same For All option for the margin settings, set the right margin to 10 pixels, set the left margin to 10 pixels, then save and apply the settings. Page view: In the Apply Styles panel, right-click the #content_right style, select Modify Style, then display the Position properties. Change the width to 241 pixels, display the Box properties, deselect the Same For All option for the margin settings, and set the right and left margins to 10 pixels. Save and apply the style.
NOTE: Steps 3 and 4 ensure that you can view the necessary information.
3. 4. 5.
6.
7.
You can also make style changes directly in the style sheet. 8. Page view: Click the layout_styles.css tab to access the style sheet and scroll down to find the #content_right style. Change the background-color property setting to #FFFFFF. This step changes the background color for the content_right division to white. Layout_styles.css sheet: Scroll up and change the background-color property for the #header_box, #greeting, and #container styles to #FFFFFF.
9.
Version 1.0
19-7
10. Layout_styles.css sheet: Save your changes, then redisplay the getinvolved.html page. Notice how the new settings affect the page. 11. Page view: Open howitworks.html. Notice that the style changes you made to the #content_center and #content_right divisions affect elements on this page as well because layout_styles.css is also linked to this page. Close howitworks.html. Keep Expression Web open to continue to the next lab. In this lab, you modified styles in an external style sheet and observed the effect on pages linked to the style sheet.
Using internal styles

NOTE: By default, Expression Web creates class styles for styles that affect font and text, background, borders, padding and margins, and bullets and numbering.
Embedded styles, or styles in an internal style sheet, are defined in the head section of a Web page. These styles can be applied to one or more items in a Web page, making them reusable. You can use the Manage Styles panel to work with embedded and linked styles. This panel allows you to apply, modify, rename and delete styles; attach or detach external cascading style sheets; and move styles between an external CSS and an internal CSS. You can also use the Manage Styles panel to move the location of a style within a CSS. In the following lab, you will create class styles in a Web page that can be applied to several elements on the page. Suppose your customer is indecisive about the desired look of a particular page on the Web site you are creating. By creating class styles, you can easily modify any given style (and all elements to which the style is applied) in order to quickly evaluate how changes affect the look and feel of the page.
Lab 19-2: Creating embedded styles with Expression Web

In this lab, you will use embedded styles to style text and links. 1. 2. Page view: The Habitat site should be open, and getinvolved.html should be open in Design view. Page view: In the Apply Styles panel, click New Style to open the New Style dialog box. Name the new style .importedText. This will be defined in the getinvolved.html document as a class style. New Style dialog box: Make sure that Current Page appears in the Define In box, then display the Font properties if necessary. Set the font-family property to Arial, Helvetica, sans-serif, set the font-size property to 0.8 em, and set the color property to #000000, then click OK to save the style. Page view: Click in either of the content columns, then click <div#content> in the breadcrumb trail to select the content division. With the content division selected, scroll to the bottom of the Apply Styles panel and click .importedText to apply the style. Page view: Switch to Code view and scroll to the top of the page to see the new .importedText style. Scroll down to approximately line 75 of the code to find the text <div id="content" class="importedText">. The new style is applied to the content division and all its contents.
NOTE: Ensure that the new style appears as .importedText in the Selector box.
3.
NOTE: At Step 3, ensure that you specify the em unit for the font size.
4.
5.
Version 1.0
19-8
6.
Page view: Save the page and preview it in both Firefox and Internet Explorer, then close the browser window.
Note that the hyperlinks may display differently from one browser to another. The current version of your browser and the CSS schema that you specify for your page authoring can sometimes lead to unpredictable results. There are, however, ways to take control of how your links display. For example, you can use embedded styles to format the links, which you will do now. 7. Page view: Switch to Code view if necessary and scroll up until you can see the .importedText style code. Click below the closing brace ( } ) for the .importedText style (you may need to press ENTER after the closing brace) and type the following style code:
a:link { color: #FF0000; text-decoration: underline; }
NOTE: Step 8 may illustrate that code renders differently from one browser to the next.
8.
Page view: Switch to Design view. Notice that the hyperlinks now display in red underlined text. Save the page and preview it in both browsers. Do the links display as you expected? Close the browser. Page view: Keep Expression Web open to continue to the next lab.
9.
In this lab, you used embedded styles to style text and hyperlinks. You learned that embedded styles take precedence over styles in external style sheets, which is why the red hyperlink color specified in the embedded style takes precedence over the link color specified in the external style sheet (which controls the appearance of links in the navigation bar). In some instances, however, a page may still not render the way you want. In such cases, you can use inline styles. Inline styles take precedence over embedded styles and external styles. In the next lab, you will use inline styles to style the hyperlinks in the getinvolved.html page.
Using inline styles

As you have already learned, you use inline styles when you want to define properties for a single item. As you apply the formatting to a selected item (or items) on a page, Expression Web generates the inline styles for you. Although you would generally use inline styles for styles that you do not want to use over and over again, you can use them to force elements to appear the way you want if you are having difficulty getting the page to render correctly. In the following lab, you will create and apply inline styles to a Web page using Expression Web. Suppose you are creating the Web site for a customer. The customer has supplied the site content and you need to adjust the color and appearance of links in a page, and you cannot achieve the desired effect using external or embedded styles. You can achieve this level of formatting control using inline styles.
Version 1.0
19-9
VIRTUAL LAB Software for this lab is provided online. NOTE: In most cases, using external and embedded styles will give the designer sufficient formatting control. In this lab, you use inline styles to "force" the appearance of links. Such steps might be taken in cases where the desired results cannot be achieved using the preferred method of using external and/or embedded styles.
Lab 19-3: Using inline styles in Expression Web

In this lab, you will use inline styles to force hyperlinks to display consistently. 1. 2. Page view: The Habitat site should be open, and getinvolved.html should be open in Design view. Page view: In the first column of content, click in the Find Local Habitat Affiliates hyperlink, then click the p tab that displays above it in the page. This step selects the hyperlink. Page view: Switch to Code view. The selected hyperlink is selected in the Code window. Code view: Click in the selected line of code to position the insertion point between the closing quote on the hyperlink and the closing bracket for the <a> tag. Type the text shown in bold:
<p><a href="http://www.habitat.org/local" style="color:#FF0000; textdecoration: underline">Find Local Habitat Affiliates</a></p>
3. 4.
NOTE: At Step 5, remember that you can use the copy (CTRL+C) and paste (CTRL+V) shortcuts to insert the style information.
5.
Code view: Insert the same style information for each hyperlink on the page. Your code should look similar to Figure 19-2.
Figure 19-2: Code for inline styles
6.
Code view: Save your changes, then preview your page in Internet Explorer and Firefox. If it did not appear so previously, your page should now appear as shown in Figure 19-3. Close your browser.
Version 1.0
19-10
Figure 19-3: Styling links using inline styles
7.
Page view: Switch to Design view, then close getinvolved.html. Keep Expression Web open to continue to the next lab.
In this lab, you used inline styles to style page elements.
Attaching multiple style sheets

You are not limited to attaching only one style sheet to a Web page. When you attach multiple style sheets, the style sheet that is attached last appears farthest down in the Manage Styles panel, and that style sheet takes precedence over the style sheet(s) that appear higher up in the panel. Styles in the higher-precedence style sheet are expressed in the linked Web page. Any style in a lower-precedence style sheet that is not contradicted by a style in the higherprecedence sheet will also be expressed in the Web page. A blending of styles results when multiple style sheets are attached to a Web page and certain attributes of a given element style are defined in one linked style sheet but not in the other. For example, style sheet CoolBlue defines a paragraph style (<p> tag) in which the font is Verdana, bold, navy. The CoolBlue sheet is attached to a Web page. The style sheet HotStuff defines a paragraph style (<p> tag) in which the font is Arial, red. The HotStuff style sheet is then attached to the same Web page, and takes precedence over the CoolBlue style sheet. In the linked Web page, paragraph text will appear in Arial, red, bold. (The bold formatting defined in the CoolBlue style sheet is applied to the paragraph element because there is no contradicting attribute setting in the HotStuff style sheet.) You can easily observe the effects of attaching multiple style sheets by successively attaching them to a Web page. In the following lab, you will examine a style sheet and attach it to a page that already has a style sheet attached. You will observe the effects and modify some of the styles to achieve the look that you want. Suppose your customer
Version 1.0
19-11
is easily bored and wants to change the look of a Web site often. You can create and apply style sheets based on Expression Web's predefined styles and save development time.
VIRTUAL LAB Software for this lab is provided online. NOTE: You can get more practice creating and attaching multiple style sheets in Optional Lab 19-1: Observing the effects of multiple style sheets in Expression Web.
Lab 19-4: Attaching multiple style sheets with Expression Web

In this lab, you will attach multiple style sheets to a Web page and adjust styles as necessary. 1. 2. Page view: The Habitat site should be open. Open wherewebuild.html in Design view. The external style sheet layout_styles.css is linked to this page. Page view: Open HH_styles.css to view the code. Notice the styles for headings, paragraph text, links and h2 links. Notice also that styles for links are entered in a specific order a:link, a:visited, a:hover and a:active. Page view: Make wherewebuild.html active, then click Attach Style Sheet in the Apply Styles panel to open the Attach Style Sheet dialog box, shown in Figure 19-4.
3.
Figure 19-4: Attach Style Sheet dialog box
4.
Attach Style Sheet dialog box: Click the Browse button to open the Select Style Sheet dialog box. In the dialog box, double-click HH_styles.css. This step lists HH_styles.css as the URL in the Attach Style Sheet dialog box. Attach Style Sheet dialog box: Click OK to attach the HH_styles style sheet to the wherewebuild.html page. Notice the many styling changes on the page, including the unintentional restyling of the links in the navigation bar. Also, the spacing between the paragraphs is too large. You can fine-tune the styles directly in the style sheet. Page view: Activate the HH_styles.css style sheet. Locate the p style, and add the following line of code to the style, making sure that you insert the new line of code between the font-size specification and the closing brace ( } ).
margin: 0px;
5.
6.
7. 8.
HH_styles.css: Delete the font-family and font-size specifications for the a:link, a:visited, a:hover and a:active styles. Page view: Activate wherewebuild.html and notice that the links in the navigation bar have returned to their previous size and the spacing between the paragraphs has been reduced. Save your changes and preview the page in a browser. Position the mouse pointer over the links. Notice that when you hover over or click a link, the link displays an underline. This behavior in the navigation bar is inconsistent with other pages. Close your browser.
Version 1.0
19-12
9.
Page view: Activate HH_styles.css and change the text-decoration property for the a:hover and a:active styles from underline to none.
10. Page view: Save your changes and preview the page in a browser. Position the mouse pointer over the hyperlinks, and notice that links now look consistent. Close your browser. 11. Page view: Keep Expression Web and wherewebuild.html open to continue to the next lab. In this lab, you attached multiple style sheets to a page, and observed the effects of style precedence. You also modified attached style sheets.
Adding Interactivity to Web Pages

NOTE: You may not be familiar with some scripting terminology used in this lesson. An event is the occurrence of an action on a Web page, to which a behavior can be scripted to respond. The load event occurs when the page loads in a browser. A mouseover event occurs when a user passes the mouse pointer over a specified object. The click event occurs when the user clicks the mouse.
You can add interactivity and increased functionality to your Web page elements using Expression Web behaviors. A behavior is a combination of an event and an action. An event is a condition that causes a browser to trigger a script. Examples of events include hovering the mouse over a Web page element or clicking an element. An action is an instruction that executes when an event occurs. When you add a behavior to an element, Expression Web writes JavaScript code in your page to manage the behavior. Common behaviors include setting the status bar text, displaying a message box, or changing the formatting of an element when the mouse pointer hovers over the element. You can use the Behaviors panel, shown in Figure 19-5, to add and manage behaviors on a page.
Figure 19-5: Behaviors panel
In the following lab, you will use Expression Web to add behaviors to elements in a Web page. Suppose your customer wants the Web site to include some interactive effects to make it a little more exciting to users. Whether you know scripting technologies or not, you can use Expression Web to create effects that use these technologies. You simply specify the effects you want and the page elements to which you want them applied, and Expression Web writes the script code for you. This feature offers you more advanced design options for your pages without significantly increasing the scope of your Web project.
Version 1.0
19-13
Lab 19-5: Adding behaviors with Expression Web

In this lab, you will add behaviors that include a rollover effect to elements in the left navigation bar of a Web page. 1. Design view: Open wherewebuild.html in Design view if necessary. Design view: In the left_nav division, select the Donate Online h2 element, then select Format | Behaviors to open the Behaviors panel. Behaviors panel: Click the Insert button, then select Change Property. (If you receive a warning about allowing active content, click Yes to allow it.) This step opens the Change Property dialog box, shown in Figure 19-6. Notice that the h2 element is selected. Once you specify the actions, an ID will be generated.
NOTE: At Step 2, ensure that you select the entire h2 element.
2. 3.
Figure 19-6: Change Property dialog box
4.
Change Property dialog box: Click Font to open the Font dialog box. Specify a Font Style of Bold Italic, select All Caps, then click OK. These steps specify that when a user hovers the mouse pointer over the Donate Online h2 element, the text will display in uppercase bold, italic letters. Change Property dialog box: Click Borders to open the Borders And Shading dialog box. Specify a purple box border that is 2px wide. Click the Shading tab, specify a silver background color, then click OK. These steps specify that when a user hovers the mouse pointer over the Donate Online h2 element, a silver background and purple border will display around the text. Change Property dialog box: Select Restore On Mouseout Event. This step specifies that the appearance of the text will return to normal once a user moves the mouse pointer off the h2 element. The Change Property dialog box should appear as shown in Figure 19-7.
NOTE: At Step 5, make sure you include the "px" when specifying a border width.
5.
NOTE: Ensure that you select the Restore On Mouseout Event option. Otherwise, the appearance of the h2 element will not return to its original state.
6.
Version 1.0
19-14
Figure 19-7: Property settings for behavior
7.
Change Property dialog box: Click OK. This step completes the creation of the behavior. Notice that the h2 element in the left_nav division now includes the ID h2#id1. Notice also that the onmouseout and onmouseover events now appear in the Behaviors panel. Design view: Repeat Steps 2 through 7 for the Site Index and Quick Tour h2 elements in the left_nav division. Design view: Save wherewebuild.html and then preview the page in your browser. Position your mouse pointer over each of the three h2 elements in the left navigation portion of the page. Notice how the appearance changes while the mouse pointer is hovering. Your page should appear as shown in Figure 19-8. When you are finished, close your browser.
8.
NOTE: Depending on security settings, you may need to allow blocked content in Internet Explorer to preview the behaviors.
9.
Figure 19-8: Adding behaviors
Version 1.0
19-15
10. Design view: Switch to Code view and examine the code that Expression Web inserted. Notice that these behaviors are achieved through JavaScript and FrontPage properties. Switch back to Design view and close wherewebuild.html and HH_styles.css. 11. Folders view: Keep Expression Web open to continue with the next lab. In this lab, you added interactivity to a Web page using Expression Web behaviors.
OBJECTIVE 3.4.5: Web forms with GUI site applications
Creating Web Forms with Expression Web

A Web form is one way to obtain information from your Web site users. Expression Web makes it easy to create user-input forms using the Form controls in the Toolbox. You can create and insert elements by dragging them from the Toolbox onto the page. Figure 19-9 shows the Form controls available in Expression Web.
Figure 19-9: Form controls in Expression Web

NOTE: Have you ever submitted a form on the Web? Forms are fairly common, so you should be familiar with them. Forms are required for activities such as joining a mailing list or making online purchases.
Creating a user-input form in X/HTML is not difficult, and Expression Web allows you to create a form without knowledge of X/HTML. However, processing the form can be challenging. Expression Web does provide the option of setting up several different types of form processing if you elect to use FrontPage Server Extensions (FPSE). For example, you can specify to save the gathered form data in a tab-delimited, space-delimited or commadelimited file, or you can save data to a Microsoft Access database. By specifying options that utilize FPSE, you allow Expression Web to automatically set up the processing and storage of collected information. If you elect not to use FPSE, then form processing must be handled through client-side and server-side scripts (such as those created in Perl, Active Server Pages [ASP] or PHP). In many work environments, a Web designer would design the look and feel of a Web form, and an application developer would then write the scripts required for form handling and processing. In this lesson, you will design a Web form, but you will not handle any of the form processing.
Version 1.0
19-16
In the following lab, you will create a Web form with Expression Web. Suppose your customers have expressed a desire for a user-input form on the site. You can easily create a form that will collect information about visitors' personal Habitat stories, and your customer can then add those stories to a special section of the site. You must remember to advise your customer, however, that some additional programming will be required to enable form processing for the user-input form you created.
Lab 19-6: Creating Web forms with Expression Web

In this lab, you will create a Web form that Habitat site visitors can use to share their stories. 1. 2. 3. Folders view: Open truestories.html. Design view: Click in the content_center division, type Tell us your Habitat for Humanity story!, and apply the Heading 2 <h2> style to the text. Design view: Select Format | CSS Styles | Attach Style Sheet, click the Browse button, double-click HH_styles.css, then click OK to attach the HH_styles external style sheet. Design view: Select Panels | Toolbox to open the Toolbox, if necessary. Design view: In the Toolbox, scroll down to view the Form Controls section, then click and drag the Form control into the content_center division below the heading 2. Your page should appear as shown in Figure 19-10.
4.
NOTE: If you have difficulty dropping the form control into the division, you can switch to Code view and drag and drop the form control directly into the code, and then switch back to Design view.
5.
Figure 19-10: Adding form control
6.
Design view: Switch to Code view to ensure that the form control was inserted after the closing </h2> tag. If it has been inserted improperly, delete it and insert it again. When you are satisfied that the form control has been inserted properly, switch back to Design view.
Version 1.0
19-17
7.
Design view: Right-click the form element in the page, then select Form Properties to open the Form Properties dialog box, shown in Figure 19-11. Notice that by default, form results are sent to a script designed to handle the form input. Although you will not create a script in this lesson, you will give your form a name.
Figure 19-11: Form Properties dialog box
8.
NOTE: You can also set the height using the CSS Properties panel.
Form Properties dialog box: Click in the Form Name box, type visitor_story, then click OK to name the form. Design view: Position the mouse pointer over the form element until sizing handles appear, then drag the middle-bottom sizing handle down to give the form a height of 230 pixels.
9.
10. Design view: Click inside the form element to position the insertion point, then in the Toolbox, double-click the Label form control to add a label to the form. The label will not be visible, but you can use Code view to see that it has been added. 11. Design view: Type Name: and press the spacebar twice. This step adds descriptive text for the input box you will add in the following step. 12. Design view: In the Toolbox, double-click the Input (Text) control to add a text box that will receive user input, then click in the form. 13. Design view: Press
ENTER
to move the insertion point to the next line in the form.
14. Design view: Type E-mail: as the descriptive text for the next input box you will add to the form, then press the spacebar twice. 15. Design view: Add another Input (Text) control into the form, click in the form and then press ENTER twice. 16. Design view: Type What is your story? as the descriptive text for a text area box that you will add to the form, then press ENTER. 17. Design view: In the Toolbox, double-click the Text Area control to add a text box to the form that can receive several lines of user input. Click in the form. Your form should appear as shown in Figure 19-12.
Version 1.0
19-18
Figure 19-12: Creating form in Expression Web
18. Design view: Select the form, then select Format | Font to open the Font dialog box. 19. Font dialog box: Set the Font to Arial, set the Font Style to Bold, set the Size to Small (12 pt), set the Color to maroon, then click OK. These steps create a new class style and apply it to the form. 20. Design view: In the form, increase the height of the Text Area control to 85 pixels. 21. Design view: In the form, click to the right of the Text Area control and press twice to position the insertion point.
ENTER
22. Design view: In the Toolbox, double-click the Input (Reset) control to add a reset button to the form. Drag the middle-right sizing handle to make the button 60 pixels wide. 23. Design view: Click in the form, press the spacebar twice, then in the Toolbox, double-click the Input (Submit) control to add a submit button to the form. Resize the button to 60 pixels wide. Click in the form. Your form should appear as shown in Figure 19-13.
Figure 19-13: Completed form
Version 1.0
19-19
NOTE: If you are unfamiliar with Web form creation, you need to know that form processing requires the developer to name each form element. This is so user-submitted responses (values) can later be identified in form results.
Because a script must be written to handle input in form fields, each field must have a unique name. Although Expression Web gives generic names to the form controls you add to a form, it is good practice to give the fields meaningful names. You can change the names and other properties of form fields using the appropriate Properties dialog box for the given field. 24. Design view: Double-click the first input text box in the form to open the Text Box Properties dialog box, shown in Figure 19-14.
Figure 19-14: Text Box Properties dialog box

NOTE: Form element names are casesensitive, so be sure you note exactly how you type these names.
25. Text Box Properties dialog box: Type name in the Name box to change the name of the field. Click in the Tab Order box and type 1. Setting the tab order controls how the cursor moves among the form fields in your form. Click OK to save the settings. 26. Design view: Double-click the second input box in the form to open the Text Box Properties dialog box, set the name of this field to email and set the tab order to 2. 27. Design view: Double-click the text area input box in the form to open the TextArea Box Properties dialog box. Set the name of this field to story, set the width of the field to 30 characters and set the tab order to 3. 28. Design view: Double-click the reset button to open the Push Button Properties dialog box, shown in Figure 19-15.
NOTE: "Tab Order" refers to the sequence in which form elements will become active if a user presses the keyboard TAB key to move through the form (instead of clicking with the mouse). If Tab Order is not specified, then form elements become active in the order they appear on the form if a user tabs through it.
Figure 19-15: Push Button Properties dialog box
29. Push Button Properties dialog box: Change the text in the Value/Label field from reset to Reset, set the tab order to 4 and click OK. 30. Design view: Double-click the submit button, change the text in the Value/Label field from submit to Submit and set the tab order to 5. 31. Design view: Insert a blank line between the name and e-mail controls on the form and add one additional space between the Name label and the name text box field. These are minor aesthetic adjustments to the form.
Version 1.0
19-20
32. Design view: Add a 20-pixel top margin to the content division. Be sure to use an inline style for this setting you do not want to make changes to the style in the external style sheet. 33. Design view: Save truestories.html and preview the page in your browser. Experiment with the form by filling in the fields, tabbing through the fields and clicking the Reset and Submit buttons. Does the form function as you expect? 34. Browser: Close your browser. 35. Expression Web: Close truestories.html. 36. Folders view: Keep Expression Web open to continue with the next lab. In this lab, you created a Web form in Expression Web.
Connecting to Databases
Pages featuring dynamic content are commonplace today, and it is likely that you will need to display database data on one or more of your pages. With Expression Web, you can connect to, display and manipulate data stored in SQL databases, Oracle databases, Microsoft Access databases, and XML data stores. You can integrate XML data on your HTML pages using data views. However, this data is read-only. If you want to integrate data from databases on your site, or if you want to integrate XML data that is updatable, then you need to use ASP.NET pages. To create a new ASP page, select File | New | ASPX. A new ASPX page includes an empty form control by default. To build an ASPX page, drag one or more ASP.NET controls onto the page from the Toolbox panel. The ASP.NET controls offer no-code data binding. That is, you can connect these controls to a data source and display, update, insert or delete data without having to write code. Expression Web handles the code generation for you. There are two types of ASP.NET controls data source controls and data-bound controls. Data source controls provide the mechanism for connecting to a data source (such as a database file or an XML file), and retrieving and modifying data. Data-bound controls display data in the browser, and can bind to a data source control to provide the ability to view, filter, update, add or delete data. Once you add a databound control to an ASPX page, you can specify a data source and set properties that control the appearance and behavior of the retrieved data. One of the easiest data-bound controls to use is the GridView control, which displays data in a table and includes support for editing, updating, sorting and paging data without requiring the designer to write any code. In the following lab, you will add an ASP.NET control to an ASPX page to connect to an Access database. Suppose your customers want the ability to display data that constantly changes. By connecting to a database, you can guarantee that every time the browser renders the ASPX page, the most current data will display in the page.
Version 1.0
19-21
VIRTUAL LAB Software for this lab is provided online. OBJECTIVE 4.3.6: Connecting Web pages to databases
Lab 19-7: Connecting to an Access database

In this lab, you will add an ASP.NET control to a page, connect to a data source, and format the display of the data. Note: In order to preview ASPX pages stored on your local computer, you must be running the Microsoft Expression Development Server. To enable this feature, select Site | Site Settings and display the Preview tab to access the appropriate options. 1. Folders view: Open gift_shop.aspx in Design view. This page (shown in Figure 1916) contains a table with some text and an area into which you will insert an ASP.NET control to show data from an Access database.
Figure 19-16: ASPX page before adding ASP.NET control
2. 3.
Page view: Examine the code behind the page. Notice that the page contains a form control with a table nested inside it. Return to Design view. Page view: In the Toolbox panel, expand the ASP.NET controls, collapse the Standard ASP.NET controls, and expand the Data ASP.NET controls if necessary so that you can access the GridView control, as shown in Figure 19-17.
Version 1.0
19-22
Figure 19-17: GridView control
4.
Toolbox panel: Drag the GridView control into the fifth row of the table. The GridView Tasks menu opens, as shown in Figure 19-18.
Figure 19-18: Adding GridView control to ASPX page
5. 6. 7.
Page view: If the GridView Tasks menu is not open, click the arrow icon (>) that appears at the right edge of the GridView control to open the GridView Tasks menu. Page view: In the GridView Tasks menu, display the Choose Data Source drop-down list, then select <New Data Source> to open the Data Source Configuration Wizard. Data Source Configuration Wizard: In the Where Will The Application Get Data From box, click Access Database, click OK, then click the Browse button to open the Select Microsoft Access Database dialog box. Navigate to the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson19\Lab_19-7 folder, click the HHGiftShop.mdb file, then click Open. These steps specify which database to use as the data source for the GridView control and displays the path to the Microsoft
Version 1.0
19-23
Access database in the Choose A Database screen of the Configure Data Source wizard. 8. Configure Data Source wizard: Click Next to advance to the Configure The Select Statement screen. You use this screen to select a database table and to specify which database fields you want to retrieve and display. You can also specify to display records in a specific order. As you specify options, the wizard constructs a SQL Select statement that will retrieve the data. In the Columns box, select the item_no, item_name, description, origin and unit_price columns, then click ORDER BY to open the Add ORDER BY Clause dialog box. Display the Sort By drop-down list, select item_no, select Ascending if necessary, then click OK. Your screen should appear as shown in Figure 19-19.
Figure 19-19: Select statement for retrieving database data
9.
Configure Data Source wizard: Click Next to advance to the Test Query screen. Click Test Query to see a preview of the data that will be retrieved and displayed in the ASPX page, then click Finish to close the wizard and populate the GridView control. (Note: If a message box appears asking if you want to turn on the visual aid, click Yes.) The control now shows the field name for each column, and displays numbers for numerical fields and letters for text fields. You will not be able to see the actual data until you save the page and preview it in a browser.
10. Page view: Save the page, preview it in a browser, then close your browser. You can adjust the way the data displays in the page by setting particular properties. You will do this now. 11. Page view: Click the GridView control, then click the arrow icon (>) to open the GridView Tasks menu if necessary. In the GridView Tasks menu, click Auto Format to open the AutoFormat dialog box. In the Select A Scheme box, click Slate, then click OK. These steps apply an autoformat to the control. 12. Page view: Save and preview the page again, then close the browser. Right-click the GridView control and select Properties to open the Tag Properties panel. You will use the Tag Properties panel to control the appearance and behavior of the GridView control.
Version 1.0
19-24
13. Tag Properties panel: Check the breadcrumb trail to see which element is selected. If <asp:accessdatasource#AccessDataSou> displays in the breadcrumb trail, click inside the GridControl so that <asp:gridview#GridView1> is selected. 14. Tag Properties panel: In the Appearance properties, select the setting for the BorderColor property, type #4A3C8C to change the color of the control border, then change the BorderStyle property to Solid. 15. Tag Properties panel: In the Appearance properties, expand the Font settings, then set the Name to Arial and set the Size to Small. 16. Tag Properties panel: In the Appearance properties, set the GridLines to Both. 17. Tag Properties panel: In the Layout properties, set the HorizontalAlign to Center. 18. Tag Properties panel: In the Misc properties, click Columns, then click the ellipsis () to open the Fields dialog box, shown in Figure 19-20. You use the Fields dialog box to set properties for individual fields.
Figure 19-20: Fields dialog box
19. Fields dialog box: In the Selected Fields box, click unit_price to display the properties for the field in the BoundField properties area. In the BoundField properties area, scroll down to the Styles section, expand the ItemStyle properties, change the HorizontalAlign property to Right, then click OK. These steps right-align the values in the unit_price field. 20. Page view: Save the page and then preview it in your browser. Your page should appear as shown in Figure 19-21. When you are finished previewing your page, close your browser.
Version 1.0
19-25
Figure 19-21: ASPX page complete
21. Page view: Close gift_shop.aspx, close the Tag Properties panel, and keep Expression Web open to continue to the next lab. In this lab, you added an ASP.NET control to an ASPX page and formatted the appearance of the control.
Expression Web Reports

Expression Web offers a series of reports that you can run and monitor through Reports view. The Reports view also offers an automated link checker, which can help with the important site-maintenance task of link checking (discussed later in the course). As you learned in a previous lesson, Reports view is used mostly for site management. The automatic link checking feature and the Problems report, however, are also helpful for troubleshooting. In the following lab, you will examine the Expression Web reporting capabilities. Suppose your Web project manager comes to you asking for a quick and immediate progress report about the development of this customer's Web site. She needs to share this information with your team members and possibly delegate some tasks. You have performed many tasks but understandably do not remember the exact number of pages you have created, the number of links that have been created or the links that have been completed. You can use Expression Web's reporting capabilities to help you keep track of these types of information. Reports are very useful for managing Web site development, as well as for maintaining the site after it is published to the Internet. Reporting capability represents a strong advantage of using an application such as Expression Web.
Lab 19-8: Using Expression Web reports

In this lab, you will examine the reporting capabilities of Expression Web. 1. Folders view: Change to Reports view. The Site Summary report displays by default. Notice that the Site Summary report displays statistics about the number of files, external links, internal links, style sheets, templates, etc., in your site.
Version 1.0
19-26
2.
Reports view: Click the Unlinked Files link to view the unlinked files in the Web site. The HH_WebPage.dwt template, gift_shop.aspx page and style_demo.html page are unlinked in your site. You can safely delete these documents if you desire. Reports view: Click Unlinked Files, then select Site Summary to view the Site Summary report again. Reports view: Click the Hyperlinks link to view the Hyperlinks report. If this is the first time you have viewed the hyperlinks report, the Reports View dialog box, shown in Figure 19-22, will appear asking if you want Expression Web to verify the links in your site.
3. 4.
Figure 19-22: Reports View dialog box
5.
Reports View dialog box: Click Yes. Expression Web checks each internal and external link. Figure 19-23 shows the link-checking process.
Figure 19-23: Verifying links in Expression Web
6.
Reports view: When the Hyperlinks report is finished running, it will show whether any links on your site are broken. If there are any broken links, you can edit them by right-clicking the link and selecting Edit Hyperlink. Reports view: Click Hyperlinks, then select Problems | Slow Pages to view the Slow Pages report. Notice that no pages are listed. You can examine and/or modify the settings for your reports in the Application Options dialog box, which you will open in the next step.
7.
Version 1.0
19-27
8.
Reports view: Select Tools | Application Options, then click the Reports View tab to view the current report options. The Reports View tab is shown in Figure 19-24. In this figure, slow pages are defined as pages that will take at least 30 seconds to download over a 56 Kbps connection. You can change the assumed connection speed and the criteria for slow pages in the Application Options dialog box.
Figure 19-24: Application Options dialog box Reports View tab
9.
Application Options dialog box: Click Cancel to close the Application Options dialog box without making any changes.
10. Reports view: Take a few minutes to examine the other reports. When you are finished, close the Web site, then exit Expression Web. In this lab, you examined some of the Web site reports available in Expression Web.
Options for Replacing Old WebBots

In a previous lesson, you learned that FrontPage included many Web components called WebBots that rely on FrontPage Server Extensions (FPSE). Although you cannot add these components in Expression Web, you can edit them in a site that was originally created in FrontPage. This allows you to continue using them as long as the site remains on a server that supports FPSEs. It is a good idea, however, to move away from these FPSE-reliant components. Support for FPSE is limited, and these components use code that is not standards-compliant. It is recommended that you use the features in Expression Web to replace the old WebBot components using new techniques and tools. In some instances, you may use tools that are external to Expression Web. A few WebBot features and their "replacement" technologies are listed in the following sections.
Web Search component

The Current Web search component in FrontPage allowed you to create a search form to enable users to search your site using keywords. Many search engines now offer the ability to add "search this site" functionality to your current Web site. You can use your favorite search engine and use a key phrase such as "add site search" or "build your own search engine."
Version 1.0
19-28
To add Bing site search functionality to your Web site, visit Microsoft Bing at www.bing.com/siteowner/?mkt=en-us. To add Google site search functionality to your Web site, visit Google Custom Search at www.google.com/cse/.
Themes and shared borders

FrontPage provided themes and shared borders as a way to maintain a consistent look and feel for all the pages in a Web site. As you have learned, you can create dynamic Web templates and base new pages on the template in order to achieve the same result. A template for ASPX pages is called a master page.
Link bars
FrontPage link bars provided a way to create and maintain a common navigation bar for all the pages in a site. As you learned in a previous lesson, you can use hyperlinks and CSS to create and style navigation bars. By including the navigation bar in a dynamic Web template, you ensure that the bar will appear on all your site pages. Expression Web also provides interactive buttons, which you can use to create navigation bars. Interactive buttons rely on images and JavaScript for their functionality. (Note: For a lab on how to create a navigation bar using interactive buttons, see the related course appendix titled Interactive Buttons.)
Version 1.0
19-29
Case Study
Style of the Week

The owner of Crunchy Cookies wanted some changes in his company's Web site. He complained that the site did not change often enough and therefore did not accurately reflect the ever-changing cookie menu offered by the company. Andre, the Webmaster for Crunchy Cookies, redesigned the company Web site using Expression Web. With the new site, Andre decided to use external style sheets based on Expression Web's predefined style sheets for all of the design elements of the site. This allowed him to simply change the site styles in Expression Web each week and upload them. The entire process took Andre only a few minutes, yet made the site look completely different each week. The owner liked this approach and enjoyed the variety, although he wanted to see more substantive changes to the site content, not just style changes. However, the frequent style changes limited the site's consistency and diluted the Crunchy Cookies brand. * * *
Consider this scenario and answer the following questions. Style sheets in Expression Web make it easy to change the look and feel of a Web site. However, changing the look of a site too often has disadvantages. If you do not plan to change the design or styles on your Web site very often, is there still a reason to use style sheets? What types of changes could Andre make to this site frequently that would provide the variety the owner desires without harming consistency or diluting the company brand? How did the changes Andre implemented in the site affect audience usability? How would the changes you suggested affect usability?
Version 1.0
19-30
Lesson Summary
Application project
Now that you have created a Web site with Microsoft Expression Web, you can appreciate the advantages that such an application offers. You can save a great deal of time by designing your Web site from a visual perspective and letting the application write code for you. You also learned that some advanced features, such as collecting data using Web forms, require scripts to handle and manage user input. And although you did not use them in this lesson, Expression Web offers automatic tools for generating and maintaining such scripts through the use of proprietary FrontPage Server Extensions (FPSE). Although these tools may enable you to retain some Web elements from old FrontPage sites that you might otherwise have to omit, they also restrict your development project because you must now include Microsoft's FrontPage Server Extensions on your Web server. What if some of these features are not supported by other vendors' browsers? Some developers and Web managers prefer not to commit to a vendor's proprietary extensions, whereas others feel the commitment is worth the additional capabilities they gain. Where do you stand on this issue? Are the advantages gained with proprietary tools and server extensions worthwhile, or would you prefer to add scripting and programming capabilities to your Web project by some other means? Will you have people with programming skills on your team? Can you contract them? Are you willing to learn scripting languages yourself to supply these capabilities? Can your site serve its purpose without these advanced capabilities? Your options will depend on the details of your Web project and your available resources. In some cases, the most important factor may be time, and a temporary site may suffice while you gather resources or skills to produce the final product you want. What compromises are you willing to make within your Web project to produce all the functionality you want with your available resources?
Skills review
In this lesson, you learned how and when to use inline styles, internal CSS and external CSS. You learned to use behaviors to add interactivity to Web page elements, and you learned how to create a Web form that can receive user input. You also learned how to connect to databases, and how to use reports for site management tasks. Now that you have completed this lesson, you should be able to: 3.4.5: Create Web forms using GUI site development applications. 3.4.7: Apply CSS to page and site templates using GUI site development applications. 4.3.6: Connect a Web page to a database using various methods.
Version 1.0
19-31
Lesson 19 Review
1. In Expression Web, what type of database data can you integrate into your Web site?
2.
List two reasons why you should avoid using components in your Web pages that are reliant on FrontPage Server Extensions (FPSEs).
3.
What is the purpose of a Web form?
4.
Which types of styles take precedence in Expression Web?
5.
If you want to integrate data from databases or XML on your page, what type of page should you use?
Version 1.0
19-32

Version 1.0
19-33
Optional Lab 19-1: Observing the effects of multiple style sheets in Expression Web
In this optional lab, you will create a new style sheet based on an Expression Web predefined style sheet, and attach multiple style sheets to a Web page. Virtual lab: A virtual software environment is provided for all labs that use Microsoft Expression Web 3. Enter and log on to CIW Online at http://education.certificationpartners.com/ciw/ to access the virtual lab environment as previously instructed. 1. Desktop: Start Expression Web, open the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson19\Habitat Web site, then open style_demo.html in Design view. This page includes several headings and a hyperlink. Design view: Select File | New | Page. On the Page tab of the New dialog box, click Style Sheets to view a list of predefined style sheets. You can click each item in the list to read a description of the style sheet. New dialog box: In the list box, click Arcs, then click OK. This step creates a new untitled style sheet with styles for hyperlinks, heading tags and the body tag. Design view: Save the new style sheet with the name arcs.css. Design view: Examine the styles defined in the style sheet. Can you envision how they will look when applied to the style_demo Web page? Close arcs.css. Design view: With style_demo.html open in Design view, click Attach Style Sheet in the Apply Styles panel to open the Attach Style Sheet dialog box. Attach Style Sheet dialog box: Click the Browse button, double-click arcs.css, then click OK. This step attaches the style sheet and changes the appearance of the Web page. Design view: In the Apply Styles panel, click the Attach Style Sheet link, click the Browse button in the Attach Style Sheet dialog box, double-click HH_styles.css, then click OK. Now two style sheets are attached. Notice that the heading1, heading2 and a:link elements in the Web page reflect the style settings specified in the HH_styles.css style sheet, while the heading3, heading4, heading5, heading6 and body elements reflect the style settings specified in the arcs.css style sheet. Design view: Click the heading 3 element, then click the h3 tab to select the element. Switch to Code view and change the background color to white (The code should be: <h3 style="background-color: #FFFFFF">heading 3</h3>). Expression Web writes an inline style for the background-color attribute of the element. Switch back to Design view and notice that this inline style takes precedence over the background-color attribute for the body tag defined in the arcs.css style sheet.
2.
3. 4. 5. 6. 7. 8.
9.
10. Design view: Close style_demo.html without saving the changes, and close any open style sheets. 11. Design view: Keep Expression Web open to continue to the next optional lab. In this optional lab, you created an external style sheet based on one of Expression Web's predefined style sheets. You also attached multiple style sheets to a Web page in order to observe the precedence of styles.
Version 1.0
19-34
Optional Lab 19-2: Modifying a manually coded X/HTML page in Expression Web
In this optional lab, you will open and modify a manually created XHTML page in Expression Web. Note: The first lesson in this course included an Optional Lab in which you created an XHTML file called MyResume.html (or other meaningful title). If you completed Optional Lab 1-1, you will use the file you created then for this lab. If you did not complete Optional Lab 1-1, you can use the file MyResume.html provided with the supplemental files. 1. Desktop: Copy the file MyResume.html from its present location (either your own file saved at C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson01\OptLab_1-1 or the provided file at \LabFiles\Lesson19\OptLab_19-2) to your Desktop. Be sure to copy the accompanying image, ciw-logo.gif, to the same location. Notepad: Open the file MyResume.html with your text editor. It should resemble Figure OL19-1. Note: The content of this file may differ depending on whether you created your own MyResume.html file in Optional Lab 1-1 or used the suggested text provided in the MyResume.html supplemental file.
2.
Figure OL19-1: Manually coded XHTML in MyResume.html
3.
Study the code for this simple XHTML file. This code was written manually in XHTML. Close your text editor.
Version 1.0
19-35
4.
Browser: Open MyResume.html in your browser. It should resemble Figure OL19-2.
Figure OL19-2: Manually coded file MyResume.html displayed in browser
5. 6. 7.
Browser: Study the page that displays from this simple XHTML file. Close the browser window. Desktop: Start Expression Web. Expression Web: In the main menu, select File | Open. In the Open File dialog box, browse to your Desktop and double-click MyResume.html to open it in Expression Web. It should appear in Page view as shown in Figure OL19-3.
Figure OL19-3: Manually coded file MyResume.html in Expression Web Page view
Version 1.0
19-36
8.
Page view: Click the Code button. You should see the source code appear in Expression Web, as shown in Figure OL19-4. Did any of the code change?
Figure OL19-4: Manually coded file MyResume.html in Expression Web Code view
9.
Page view: Switch to Design view. Select the centered block of text containing the name and address by clicking and dragging your mouse pointer over the text. Align this block of text to the left of the page by clicking the Align Text Left button on the Common toolbar, as shown in Figure OL19-5.
Figure OL19-5: Changing text alignment with Align Text Left button
10. Design view: Select File | Properties to open the Page Properties dialog box.
Version 1.0
19-37
11. Page Properties dialog box: Click the Formatting tab. In the Colors section, display the Background drop-down list, then click More Colors to open the More Colors dialog box. In the More Colors dialog box, choose a light shade of green (or other color of your choice) for the page background, then click OK. Change the text color of the page by choosing More Colors from the Text drop-down list. In the More Colors dialog box, choose a dark shade of green (or other color of your choice) for the page text, then click OK. Click OK to close the Page Properties dialog box to apply your color changes. 12. Design view: On your keyboard, press CTRL+A to select all the text on the page. Right-click and select Font. Choose a new font from the list, such as Lucida Sans Unicode (font choices will vary depending on the fonts you have available on your system). Click OK. 13. Design view: Select the horizontal rule (line) between the address information and the word "Objective" by clicking it once. Right-click and select Horizontal Line Properties. In the Horizontal Line Properties dialog box, change the Width to 60 Percent, change the Height to 5 Pixels, change the Alignment to Left, and change the Color by selecting More Colors from the Color drop-down menu. In the More Colors dialog box, choose a dark shade of blue (or other color of your choice), then click OK. In the Horizontal Line Properties dialog box, click OK to apply your changes. 14. Design view: Your rsum page should look somewhat different now, as shown in Figure OL19-6.
Figure OL19-6: MyResume.html with formatting changes made in Expression Web
15. Design view: Click the Code button. Your source code should resemble Figure OL19-7 (code will vary depending on colors and fonts you selected).
Version 1.0
19-38
Figure OL19-7: MyResume.html code with changes made in Expression Web
16. Code view: Notice the error icon that appears in the status bar. Click the drop-down arrow next to the error icon and select Go To Error. Position your mouse pointer over the selected code to read a tip regarding the error. The W3C regards the align attribute as outdated. 17. Code view: Delete the selected code. 18. Code view: Press F9 to move to the next error. The W3C regards the border attribute as outdated. 19. Code view: Delete the selected code. The error icon now contains a check mark, indicating there are no more errors in the document. Switch to Design view. 20. Design view: Select the CIW image, then click the Center button on the Common toolbar to center the image on the page. 21. Design view: With the CIW image still selected, activate the Apply Styles panel, right-click the .style2 style, then select Modify Style to open the Modify Style dialog box. 22. Modify Style dialog box: Display the Border properties, ensure that the Same For All option is selected for the border-width property, click in the first text box under the border-width property, type 0 and click OK. This step sets the width of the borders to 0. 23. Design view: Switch to Code view. Study the changes that Expression Web made to your code. How did Expression Web code the change to text alignment in that top block of text? How did Expression Web code the change to the font for the entire page? What code did Expression Web substitute for the outdated tags? Is this how you would have coded these changes if you had made them by editing your XHTML code manually?
Version 1.0
19-39
24. Design view: Save your changes to the page. Note that the page is saved to your Desktop. It is not part of an Expression Web site. 25. Close the file, then exit Expression Web. In this optional lab, you modified a manually created XHTML page in Expression Web.
Lesson 19 Quiz
1. In Expression Web, what is a behavior? a. b. c. d. 2. A combination of an event and an action A condition that causes a browser to trigger a script An instruction that executes when a particular condition arises A proprietary Expression Web component
In Expression Web, where can you manage behaviors? a. b. c. d. In In In In the the the the JavaScript editor Dynamic HTML (DHTML) panel Behaviors panel Behaviors inspector
3.
In Expression Web, which action would you specify in order to add a behavior to a text element that simulates a rollover effect? a. b. c. d. Go To URL Jump Menu Change Property Swap Image
4.
When creating a Web form in Expression Web, which panel can you use for easy insertion of form controls? a. b. c. d. Manage Behaviors CSS Properties Toolbox Manage Forms
5.
When you create a Web form in Expression Web, which of the following is true? a. b. c. d. Expression Web automatically generates PHP code for handling the data gathered in the form. If you elect not to use FPSE, then form processing must be handled through a script. Expression Web automatically sends the data gathered in the form to an Access database. You must contract with an application developer who will write code for handling the gathered data, as Expression Web does not provide a way to handle the data.
Version 1.0
19-40
Version 1.0

CIW Web Design Specialist Study Guide Vol1

Uploaded by

Document Information

Original Description:

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

CIW Web Design Specialist Study Guide Vol1

Uploaded by

Copyright:

Available Formats

Web Design Specialist

(Adobe CS5 Web Edition)

Web Design Specialist

Copyright 2011, All rights reserved.

Web Design Specialist

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

List of Optional Labs

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

Additional online resources

CIW courseware supplemental files

CIW Online Exercises

CIW Course Reviews

CIW Certification Practice Exams

2011 Certification Partners, LLC All Rights Reserved

CIW Web Design Specialist Movies

Online resources and certification exams

2011 Certification Partners, LLC All Rights Reserved

Course Setup Guide and System Requirements

2011 Certification Partners, LLC All Rights Reserved

Accessing virtual labs

Installing and configuring Microsoft Windows 7 on your system

2011 Certification Partners, LLC All Rights Reserved

When This Information Is Required

Configure Windows 7 for your use by specifying the following settings:

Specify valid IP addresses

Disable the Windows 7 firewall

2011 Certification Partners, LLC All Rights Reserved

CIW supplemental files

2011 Certification Partners, LLC All Rights Reserved

Conventions and Graphics

Program Code or Commands

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.

2011 Certification Partners, LLC All Rights Reserved

2011 Certification Partners, LLC All Rights Reserved

1Lesson 1: Overview of Web Design Concepts

Web Design Specialist

2011 Certification Partners, LLC All Rights Reserved

Lesson 1: Overview of Web Design Concepts

The Nature of the Web

2011 Certification Partners, LLC All Rights Reserved

Web Design Specialist

Current Web development direction

Tools and technology

NOTE: The acronym GUI is pronounced "gooey."

2011 Certification Partners, LLC All Rights Reserved

Lesson 1: Overview of Web Design Concepts

Web Design Concepts

2011 Certification Partners, LLC All Rights Reserved

Web Design Specialist

Evaluating Your XHTML Skills