Site Designer

Design Methodology and Technology: Academic Student Guide

Blank Text For The Docutech!

Design Methodology and Technology Developer Jeffrey Brown

Contributors Susan M. Lane, Martin Heltai and Robert Barrett

Editors Susan M. Lane and David Oberman

Publishers Joseph Flannery and Joseph A. Servia

Project Managers David De Ponte, Todd Hopkins and Sheila Ramirez

Trademarks Prosoft is a trademark of ProsoftTraining. 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 ProsoftTraining makes a genuine attempt to ensure the accuracy and quality of the content described herein; however, ProsoftTraining, 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. ProsoftTraining makes no representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of fitness for any particular purpose. ProsoftTraining 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 ProsoftTraining 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. ProsoftTraining 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/disk was published, all URLs were checked for accuracy and completeness. However, due to the ever-changing nature of the Internet, some URLs may no longer be available or may have been re-directed.

Copyright Information This training manual is copyrighted and all rights are reserved by ProsoftTraining. 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 ProsoftTraining, 3001 Bee Caves Road, Austin, TX 78746.

Copyright © 2000 - 2002 by ProsoftTraining All Rights Reserved ISBN: 1-58143-678-5

iv

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

v

Table of Contents Course Description..................................................................................................................... xix ProsoftTraining Courseware ......................................................................................................xx Course Objectives ..................................................................................................................... xxii Classroom Setup....................................................................................................................... xxiii System Requirements .............................................................................................................. xxiii Conventions and Graphics Used in This Book........................................................................xxv Section I: Web Design Concepts 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-6 New Technologies .................................................................................................................... 1-7 Evaluating Your HTML Skills.................................................................................................. 1-7 Lesson 1 Review ..................................................................................................................... 1-12 Lesson 2: Web Page Layout and Elements.............................................................................. 2-1 Pre-Assessment Questions ........................................................................................................ 2-2 Web Users and Site Design....................................................................................................... 2-3 Effective Web Page Layout ...................................................................................................... 2-4 Color and Web Design............................................................................................................ 2-14 Fonts and Web Design ............................................................................................................ 2-21 Lesson 2 Review ..................................................................................................................... 2-27 Lesson 3: Web Site Usability Testing ....................................................................................... 3-1 Pre-Assessment Questions ........................................................................................................ 3-2 The Importance of Audience Usability..................................................................................... 3-3 Web Usability Testing .............................................................................................................. 3-5 Lesson 3 Review ....................................................................................................................... 3-8 Lesson 4: Navigation Concepts ................................................................................................. 4-1 Pre-Assessment Questions ........................................................................................................ 4-2 Why Is Navigation Critical? ..................................................................................................... 4-3 Browsers and Navigation.......................................................................................................... 4-3 Primary and Secondary Navigation .......................................................................................... 4-4 Navigation Hierarchy................................................................................................................ 4-5 Site Structure, URLs and File Names ....................................................................................... 4-8 Familiar Navigation Conventions ........................................................................................... 4-10 Guided Navigation .................................................................................................................. 4-10 Navigation Action Plan........................................................................................................... 4-11 Lesson 4 Review ..................................................................................................................... 4-15 Lesson 5: Web Graphics............................................................................................................ 5-1 Pre-Assessment Questions ........................................................................................................ 5-2 Web Site Images ....................................................................................................................... 5-3

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

vi

Digital Imaging Concepts ......................................................................................................... 5-3 Bitmap vs. Vector Graphics...................................................................................................... 5-5 Graphic Applications ................................................................................................................ 5-6 Image File Formats ................................................................................................................... 5-8 Creating Images ...................................................................................................................... 5-12 Image Optimization ................................................................................................................ 5-13 Lesson 5 Review ..................................................................................................................... 5-22 Lesson 6: Multimedia and the Web.......................................................................................... 6-1 Pre-Assessment Questions ........................................................................................................ 6-2 Multimedia and Web Sites........................................................................................................ 6-3 Current Multimedia Capabilities............................................................................................... 6-3 Animation and the Web ............................................................................................................ 6-4 Audio and the Web ................................................................................................................... 6-5 Video and the Web.................................................................................................................... 6-7 Goals of a Multimedia Site ....................................................................................................... 6-8 Multimedia Site Design Basics................................................................................................. 6-9 User Interaction....................................................................................................................... 6-10 Selecting Multimedia Elements .............................................................................................. 6-12 Copyright Infringement .......................................................................................................... 6-15 Lesson 6 Review ..................................................................................................................... 6-17 Section II: Site Development and Management Lesson 7: The Web Development Process ............................................................................... 7-1 Pre-Assessment Questions ........................................................................................................ 7-2 Web Design Teams ................................................................................................................... 7-3 Bottom-up Approach for Web Development............................................................................ 7-5 Web Development Phases......................................................................................................... 7-5 Defining the Web Project Goals ............................................................................................... 7-6 Understanding the Business Process......................................................................................... 7-8 Defining a Vision...................................................................................................................... 7-9 From Vision to Strategy.......................................................................................................... 7-10 The Metaphor.......................................................................................................................... 7-13 Lesson 7 Review ..................................................................................................................... 7-20 Lesson 8: Mindmapping ............................................................................................................ 8-1 Pre-Assessment Questions ........................................................................................................ 8-2 The Mindmapping Process ....................................................................................................... 8-3 Mindmapping a Web Site ......................................................................................................... 8-4 Lesson 8 Review ....................................................................................................................... 8-7 Lesson 9: Web Site Implementation Factors........................................................................... 9-1 Pre-Assessment Questions ........................................................................................................ 9-2 Determining Site Implementation Factors ................................................................................ 9-3 Web Site Characteristics ........................................................................................................... 9-5 Calculating Download Times ................................................................................................... 9-6 Lesson 9 Review ....................................................................................................................... 9-9

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

vii

Section III: Basic Web Technology Concepts Lesson 10: HTML Standards and Compliance..................................................................... 10-1 Pre-Assessment Questions ...................................................................................................... 10-2 What Is HTML?...................................................................................................................... 10-3 Web Browser Support for HTML........................................................................................... 10-5 The HTML Standard............................................................................................................... 10-7 HTML 1.0 and 2.0 .................................................................................................................. 10-8 HTML 3.0 and 3.2 .................................................................................................................. 10-8 HTML 4.0 ............................................................................................................................... 10-9 HTML 4.01 ........................................................................................................................... 10-10 Web Page Accessibility ........................................................................................................ 10-12 Lesson 10 Review ................................................................................................................. 10-17 Lesson 11: HTML Tables and Web Page Structure............................................................. 11-1 Pre-Assessment Questions ...................................................................................................... 11-2 Creating Page Structure with HTML Tables .......................................................................... 11-3 Diagramming an HTML Table ............................................................................................... 11-6 Borderless Web Page Structure ............................................................................................ 11-10 Lesson 11 Review ................................................................................................................. 11-16 Lesson 12: HTML Frames ...................................................................................................... 12-1 Pre-Assessment Questions ...................................................................................................... 12-2 HTML Frames and Framesets ................................................................................................ 12-3 The HTML Tag ............................................................................................ 12-4 The HTML Tag ................................................................................................... 12-5 Targeting Hyperlinks in HTML............................................................................................ 12-10 Adding a Frameset to a Frameset.......................................................................................... 12-16 HTML Frameset Attributes................................................................................................... 12-18 The HTML Tag ......................................................................................... 12-19 Lesson 12 Review ................................................................................................................. 12-21 Lesson 13: Metadata and the Web ......................................................................................... 13-1 Pre-Assessment Questions ...................................................................................................... 13-2 Metadata.................................................................................................................................. 13-3 Tags and Document Identification......................................................................... 13-4 Tags and Search Engines ....................................................................................... 13-8 Tags and Delayed File Change ............................................................................ 13-13 Lesson 13 Review ................................................................................................................. 13-17 Lesson 14: Cascading Style Sheets ......................................................................................... 14-1 Pre-Assessment Questions ...................................................................................................... 14-2 Style Sheets............................................................................................................................. 14-3 Cascading Style Sheets ........................................................................................................... 14-3 Defining and Using Styles ...................................................................................................... 14-4 Changeable Style Elements..................................................................................................... 14-6 Lesson 14 Review ................................................................................................................. 14-18

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

viii

Section IV: Applications and Tools Lesson 15: Site Development with Microsoft FrontPage 2000 — Introduction................. 15-1 Pre-Assessment Questions ...................................................................................................... 15-2 Microsoft FrontPage 2000 ...................................................................................................... 15-3 FrontPage Views..................................................................................................................... 15-4 FrontPage Menus and Toolbars .............................................................................................. 15-5 Opening Webs and Files in FrontPage.................................................................................... 15-5 Lesson 15 Review ................................................................................................................. 15-20 Lesson 16: Site Development with FrontPage 2000 — Basic Features ............................... 16-1 Pre-Assessment Questions ...................................................................................................... 16-2 Page Layout Using Tables in FrontPage................................................................................. 16-3 Inserting Images in FrontPage .............................................................................................. 16-15 Page Properties in FrontPage ................................................................................................ 16-23 Image Maps in FrontPage ..................................................................................................... 16-32 FrontPage Templates ............................................................................................................ 16-34 Importing Formatted Text in FrontPage ............................................................................... 16-39 Inserting HTML with FrontPage .......................................................................................... 16-40 Creating Text Hyperlinks with FrontPage ............................................................................ 16-43 FrontPage Shared Borders .................................................................................................... 16-44 FrontPage Framesets............................................................................................................. 16-49 FrontPage Styles ................................................................................................................... 16-56 FrontPage Themes ................................................................................................................ 16-65 Lesson 16 Review ................................................................................................................. 16-69 Lesson 17: Site Development with FrontPage 2000 — Advanced Features ....................... 17-1 Pre-Assessment Questions ...................................................................................................... 17-2 FrontPage DHTML Toolbar ................................................................................................... 17-3 FrontPage Web Forms ............................................................................................................ 17-8 FrontPage Components......................................................................................................... 17-18 FrontPage Web Reports ........................................................................................................ 17-20 FrontPage Search Forms ....................................................................................................... 17-21 Lesson 17 Review ................................................................................................................. 17-26 Lesson 18: Site Development with Macromedia Dreamweaver 4.0 — Introduction ........ 18-1 Pre-Assessment Questions ...................................................................................................... 18-2 Dreamweaver 4.0 .................................................................................................................... 18-3 Dreamweaver Layout Options ................................................................................................ 18-3 Lesson 18 Review ................................................................................................................. 18-15 Lesson 19: Site Development with Dreamweaver 4.0 — Basic Features ............................ 19-1 Pre-Assessment Questions ...................................................................................................... 19-2 Page Layout in Dreamweaver................................................................................................. 19-3 Creating Image Maps in Dreamweaver .................................................................................. 19-8 Creating Templates in Dreamweaver.................................................................................... 19-10 Frames in Dreamweaver ....................................................................................................... 19-28 Lesson 19 Review ................................................................................................................. 19-34

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

ix

Lesson 20: Site Development with Dreamweaver 4.0 — Advanced Features .................... 20-1 Pre-Assessment Questions ...................................................................................................... 20-2 Rollover Images in Dreamweaver .......................................................................................... 20-3 Dreamweaver Web Forms ...................................................................................................... 20-6 Dreamweaver Behaviors....................................................................................................... 20-10 Modifying Layers in Dreamweaver ...................................................................................... 20-15 Dreamweaver Library ........................................................................................................... 20-19 Editing HTML in Dreamweaver........................................................................................... 20-21 Jump Menus in Dreamweaver .............................................................................................. 20-22 Macromedia Dreamweaver Exchange .................................................................................. 20-25 Lesson 20 Review ................................................................................................................. 20-28 Lesson 21: Web Pages with Macromedia HomeSite 5.......................................................... 21-1 Pre-Assessment Questions ...................................................................................................... 21-2 Macromedia HomeSite 5 ........................................................................................................ 21-3 HomeSite Templates............................................................................................................... 21-5 Handling Files in HomeSite.................................................................................................... 21-7 Tag-Editing Features in HomeSite........................................................................................ 21-12 Lesson 21 Review ................................................................................................................. 21-17 Lesson 22: Images with Jasc Paint Shop Pro ........................................................................ 22-1 Pre-Assessment Questions ...................................................................................................... 22-2 Introduction to Jasc Paint Shop Pro ........................................................................................ 22-3 Adding Text to an Image File in Paint Shop Pro ................................................................. 22-12 Special Effects in Paint Shop Pro ......................................................................................... 22-13 Decreasing Color Depth with Paint Shop Pro....................................................................... 22-15 Cropping Images in Paint Shop Pro...................................................................................... 22-22 Creating Screen Captures in Paint Shop Pro......................................................................... 22-31 Creating Animated GIF Images in Paint Shop Pro............................................................... 22-33 Lesson 22 Review ................................................................................................................. 22-41 Lesson 23: Multimedia with Macromedia Flash 5.0............................................................. 23-1 Pre-Assessment Questions ...................................................................................................... 23-2 Macromedia Flash................................................................................................................... 23-3 Flash Shapes............................................................................................................................ 23-8 Color and Fills in Flash......................................................................................................... 23-13 Lesson 23 Review ................................................................................................................. 23-19 Lesson 24: Multimedia with Flash 5.0 — Timeline and Layers .......................................... 24-1 Pre-Assessment Questions ...................................................................................................... 24-2 Flash Timeline ........................................................................................................................ 24-3 Flash Layers ............................................................................................................................ 24-5 Saving and Publishing Flash Movies...................................................................................... 24-7 Lesson 24 Review ................................................................................................................... 24-9 Lesson 25: Multimedia with Flash 5.0 — Symbols and Buttons ......................................... 25-1 Pre-Assessment Questions ...................................................................................................... 25-2 Flash Symbols......................................................................................................................... 25-3 Flash Buttons .......................................................................................................................... 25-7

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

x

Customizing the Flash Library.............................................................................................. 25-15 Lesson 25 Review ................................................................................................................. 25-19 Lesson 26: Multimedia with Flash 5.0 — Tweens................................................................. 26-1 Pre-Assessment Questions ...................................................................................................... 26-2 Flash Tweens .......................................................................................................................... 26-3 Motion Tweens in Flash.......................................................................................................... 26-3 Shape Tweens in Flash.......................................................................................................... 26-14 Tweening Text in Flash ........................................................................................................ 26-17 Lesson 26 Review ................................................................................................................. 26-22 Lesson 27: Multimedia with Flash 5.0 — Movie Clips ......................................................... 27-1 Pre-Assessment Questions ...................................................................................................... 27-2 Flash Movie Clips ................................................................................................................... 27-3 Adding Sound to Flash.......................................................................................................... 27-18 Adding Flash Movies to HTML Files................................................................................... 27-19 Testing for the Flash Plug-In ................................................................................................ 27-23 Lesson 27 Review ................................................................................................................. 27-27 Lesson 28: Multimedia with Flash 5.0 — Tell Targets and Masks ..................................... 28-1 Pre-Assessment Questions ...................................................................................................... 28-2 Flash Tell Targets ................................................................................................................... 28-3 Mask Layers in Flash.........................................................................................................................28-6 Lesson 28 Review ................................................................................................................. 28-13 Section V: Advanced Web Technology Concepts Lesson 29: JavaScript Fundamentals..................................................................................... 29-1 Pre-Assessment Questions ...................................................................................................... 29-2 Why Script? ............................................................................................................................ 29-3 JavaScript and Common Programming Concepts .................................................................. 29-3 What Is JavaScript?................................................................................................................. 29-5 JavaScript vs. Other Languages.............................................................................................. 29-6 Embedding JavaScript into HTML......................................................................................... 29-8 Strengths of JavaScript ........................................................................................................... 29-9 Using JavaScript to Communicate with the User ................................................................. 29-10 JavaScript Functions ............................................................................................................. 29-17 Using JavaScript for Browser Detection............................................................................... 29-18 Lesson 29 Review ................................................................................................................. 29-27 Lesson 30: Dynamic HTML.................................................................................................... 30-1 Pre-Assessment Questions ...................................................................................................... 30-2 Dynamic HTML...................................................................................................................... 30-3 Document Object Model......................................................................................................... 30-5 CSS and DHTML ................................................................................................................... 30-6 Scripting Languages and DHTML.......................................................................................... 30-6 DHTML Implementation ...................................................................................................... 30-10 Lesson 30 Review ................................................................................................................. 30-16

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xi

Lesson 31: Extensible Markup Language (XML) ................................................................ 31-1 Pre-Assessment Questions ...................................................................................................... 31-2 What Is XML? ........................................................................................................................ 31-3 HTML Goals........................................................................................................................... 31-5 Separating Format from Structure in HTML .......................................................................... 31-8 HTML Limitations.................................................................................................................. 31-8 XML Goals ........................................................................................................................... 31-10 What Is an XML Document?................................................................................................ 31-11 Rules for Well-Formed XML ............................................................................................... 31-12 Simple Well-Formed XML................................................................................................... 31-15 What Is XHTML? ................................................................................................................. 31-19 Lesson 31 Review ................................................................................................................. 31-21 Lesson 32: HTTP Servers........................................................................................................ 32-1 Pre-Assessment Questions ...................................................................................................... 32-2 What Is an HTTP Server? ....................................................................................................... 32-3 Ports ........................................................................................................................................ 32-3 Basic HTTP Server Administration ........................................................................................ 32-4 Server-Side Technologies ....................................................................................................... 32-7 Lesson 32 Review ................................................................................................................. 32-11 Lesson 33: Cookies................................................................................................................... 33-1 Pre-Assessment Questions ...................................................................................................... 33-2 Understanding Cookies........................................................................................................... 33-3 Enabling and Disabling Cookies............................................................................................. 33-5 Deleting Cookie Files ............................................................................................................. 33-9 Lesson 33 Review ................................................................................................................. 33-11 Lesson 34: Downloadables and Plug-Ins ............................................................................... 34-1 Pre-Assessment Questions ...................................................................................................... 34-2 Plug-In Technology ................................................................................................................ 34-3 Plug-In Installation.................................................................................................................. 34-4 Macromedia Shockwave and Flash ........................................................................................ 34-5 Adobe Acrobat Reader............................................................................................................ 34-5 RealNetworks RealPlayer ..................................................................................................... 34-10 Creating a Downloadable File .............................................................................................. 34-16 Lesson 34 Review ................................................................................................................. 34-19 Lesson 35: Java Applets .......................................................................................................... 35-1 Pre-Assessment Questions ...................................................................................................... 35-2 Why Use Java and Applets? ................................................................................................... 35-3 Introduction to Java................................................................................................................. 35-3 Demystifying Applets ............................................................................................................. 35-4 Embedding a Java Applet ....................................................................................................... 35-5 Java Applets and Animation ................................................................................................... 35-7 Java Applet Authoring Tools .................................................................................................. 35-9 Applet Resources .................................................................................................................... 35-9 Lesson 35 Review ................................................................................................................. 35-11

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xii

Lesson 36: Databases ............................................................................................................... 36-1 Pre-Assessment Questions ...................................................................................................... 36-2 Web Design and Databases..................................................................................................... 36-3 Database Anatomy .................................................................................................................. 36-3 Database Queries .................................................................................................................... 36-4 Database Management System ............................................................................................... 36-5 Database Tools, Products and Programs................................................................................. 36-6 Lesson 36 Review ................................................................................................................... 36-9 Lesson 37: Standards Organizations...................................................................................... 37-1 Pre-Assessment Questions ...................................................................................................... 37-2 Internet Governing Bodies...................................................................................................... 37-3 Internet Society (ISOC) .......................................................................................................... 37-3 Internet Architecture Board (IAB).......................................................................................... 37-3 Internet Research Task Force (IRTF) ..................................................................................... 37-4 Internet Engineering Task Force (IETF)................................................................................. 37-4 World Wide Web Consortium (W3C) .................................................................................... 37-4 Internet Corporation for Assigned Names and Numbers (ICANN) ....................................... 37-5 Requests for Comments (RFCs) ............................................................................................. 37-6 Lesson 37 Review ................................................................................................................... 37-8 Section VI: Publishing a Site to the Web Lesson 38: Web Site Publishing.............................................................................................. 38-1 Pre-Assessment Questions ...................................................................................................... 38-2 Web Site Publishing................................................................................................................ 38-3 Web Site Hosting .................................................................................................................... 38-3 Web Publishing with FTP....................................................................................................... 38-4 Web Publishing with FrontPage 2000 .................................................................................... 38-7 Web Publishing with Dreamweaver ..................................................................................... 38-11 Comparing Web Publishing Tools........................................................................................ 38-15 Lesson 38 Review ................................................................................................................. 38-17 Appendixes................................................................................................................ Appendixes-1 Glossary ......................................................................................................................... Glossary-1 Index.................................................................................................................................... Index-1 Supplemental CD-ROM Contents.................................... Supplemental CD-ROM Contents-1

List of Labs Lab 1-1: Creating a basic Web page ............................................................................................ 1-8 Lab 5-1: Optimizing images for Web use.................................................................................. 5-14 Lab 7-1: Creating a vision statement ........................................................................................... 7-9 Lab 7-2: Developing tactics to support your strategy................................................................ 7-11 Lab 7-3: Developing the functions of a Web site ...................................................................... 7-12 Lab 8-1: Mindmapping a Web site .............................................................................................. 8-5 Lab 11-1: Creating a simple HTML table.................................................................................. 11-7 Lab 11-2: Creating a complex HTML table .............................................................................. 11-8

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xiii

Lab 11-3: Creating a simple Web page structure..................................................................... 11-11 Lab 11-4: Creating a complex Web page structure ................................................................. 11-13 Lab 12-1: Creating a rows frameset in HTML .......................................................................... 12-7 Lab 12-2: Creating a columns frameset in HTML..................................................................... 12-8 Lab 12-3: Hyperlinking frame content in HTML ...................................................................... 12-9 Lab 12-4: Creating targeted hyperlinks in HTML................................................................... 12-10 Lab 12-5: Targeting links from a tag in HTML ....................................................... 12-12 Lab 12-6: Targeting links to the top frame in HTML.............................................................. 12-13 Lab 12-7: Combining columns and rows in nested framesets ................................................. 12-14 Lab 12-8: Combining frames in HTML................................................................................... 12-17 Lab 12-9: Adding attributes to the frameset ............................................................................ 12-18 Lab 13-1: Using the tag to refresh a page automatically ........................................ 13-14 Lab 14-1: Creating and using embedded styles ......................................................................... 14-9 Lab 14-2: Applying inline styles.............................................................................................. 14-12 Lab 14-3: Linking to an external style sheet............................................................................ 14-13 Lab 15-1: Launching FrontPage 2000 ....................................................................................... 15-6 Lab 16-1: Creating a new Web with FrontPage 2000................................................................ 16-4 Lab 16-2: Beginning Web site construction with FrontPage..................................................... 16-9 Lab 16-3: Inserting images with FrontPage............................................................................. 16-17 Lab 16-4: Modifying table properties in FrontPage ................................................................ 16-20 Lab 16-5: Modifying page properties in FrontPage................................................................. 16-24 Lab 16-6: Modifying cell properties in FrontPage .................................................................. 16-26 Lab 16-7: Creating an image map in FrontPage ...................................................................... 16-32 Lab 16-8: Creating a FrontPage template ................................................................................ 16-35 Lab 16-9: Adding supporting Web pages in FrontPage........................................................... 16-37 Lab 16-10: Importing formatted text with FrontPage.............................................................. 16-39 Lab 16-11: Inserting existing HTML into a FrontPage document .......................................... 16-41 Lab 16-12: Creating text hyperlinks with FrontPage............................................................... 16-44 Lab 16-13: Creating and applying shared borders in FrontPage ............................................. 16-45 Lab 16-14: Creating framesets in FrontPage ........................................................................... 16-50 Lab 16-15: Targeting links in framesets with FrontPage......................................................... 16-52 Lab 16-16: Applying styles with FrontPage ............................................................................ 16-58 Lab 16-17: Applying FrontPage Themes................................................................................. 16-65 Lab 17-1: Creating DHTML effects in FrontPage..................................................................... 17-3 Lab 17-2: Creating Web forms in FrontPage............................................................................. 17-8 Lab 17-3: Inserting a FrontPage Component........................................................................... 17-19 Lab 17-4: Using FrontPage Web reports ................................................................................. 17-20 Lab 17-5: Adding a search form in FrontPage......................................................................... 17-21 Lab 18-1: Creating a page in Dreamweaver .............................................................................. 18-3 Lab 19-1: Creating a Web site in Dreamweaver........................................................................ 19-4 Lab 19-2: Creating an image map in Dreamweaver .................................................................. 19-9 Lab 19-3: Creating templates in Dreamweaver ....................................................................... 19-11 Lab 19-4: Developing site structure in Dreamweaver ............................................................. 19-15 Lab 19-5: Developing a home page in Dreamweaver ............................................................. 19-16 Lab 19-6: Using tables for page structure in Dreamweaver .................................................... 19-20 Lab 19-7: Developing a supporting page in Dreamweaver ..................................................... 19-23

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xiv

Lab 19-8: Importing Microsoft Word HTML into Dreamweaver ........................................... 19-25 Lab 19-9: Creating frames in Dreamweaver............................................................................ 19-29 Lab 20-1: Creating rollover images in Dreamweaver................................................................ 20-3 Lab 20-2: Creating Web forms in Dreamweaver....................................................................... 20-6 Lab 20-3: Applying behaviors in Dreamweaver...................................................................... 20-11 Lab 20-4: Modifying layers in Dreamweaver.......................................................................... 20-16 Lab 20-5: Dragging layers in Dreamweaver............................................................................ 20-17 Lab 20-6: Adding objects to the Dreamweaver Library .......................................................... 20-19 Lab 20-7: Editing HTML code manually in Dreamweaver..................................................... 20-21 Lab 20-8: Creating jump menus in Dreamweaver................................................................... 20-23 Lab 21-1: Modifying the default template in HomeSite............................................................ 21-9 Lab 21-2: Using the blank document in HomeSite.................................................................. 21-14 Lab 22-1: Opening and converting an image file in Paint Shop Pro ......................................... 22-9 Lab 22-2: Adding text and special effects to an image with Paint Shop Pro........................... 22-16 Lab 22-3: Cropping images in Paint Shop Pro ........................................................................ 22-23 Lab 22-4: Working with layers in Paint Shop Pro................................................................... 22-24 Lab 22-5: Creating transparent images in Paint Shop Pro....................................................... 22-29 Lab 22-6: Creating animated images in Paint Shop Pro .......................................................... 22-34 Lab 23-1: Using the Flash interface, toolbars and palettes........................................................ 23-6 Lab 23-2: Adding shapes to the Flash stage .............................................................................. 23-9 Lab 23-3: Changing colors, fills and gradients in Flash .......................................................... 23-14 Lab 24-1: Identifying frames in Flash ....................................................................................... 24-4 Lab 24-2: Using layers in Flash ................................................................................................. 24-6 Lab 24-3: Saving Flash movies.................................................................................................. 24-7 Lab 25-1: Creating symbols in Flash ......................................................................................... 25-3 Lab 25-2: Using Flash Library buttons...................................................................................... 25-7 Lab 25-3: Creating buttons using Flash shapes ....................................................................... 25-10 Lab 25-4: Creating buttons in Flash using imported images ................................................... 25-12 Lab 25-5: Customizing the Flash movie library ...................................................................... 25-15 Lab 26-1: Creating a straight-line motion tween in Flash ......................................................... 26-4 Lab 26-2: Creating path motion tweens in Flash ..................................................................... 26-10 Lab 26-3: Creating shape tweens in Flash ............................................................................... 26-14 Lab 26-4: Creating a text tween in Flash ................................................................................. 26-17 Lab 27-1: Creating a Flash movie clip....................................................................................... 27-3 Lab 27-2: Adding sound to a Flash movie............................................................................... 27-18 Lab 27-3: Resizing the Flash stage .......................................................................................... 27-20 Lab 27-4: Importing a Flash movie into an HTML page......................................................... 27-22 Lab 27-5: Testing for the Flash plug-in ................................................................................... 27-24 Lab 28-1: Creating tell targets in Flash...................................................................................... 28-3 Lab 28-2: Creating mask layers in Flash ................................................................................... 28-6 Lab 29-1: Using the JavaScript alert() method ........................................................................ 29-11 Lab 29-2: Using the JavaScript prompt() method.................................................................... 29-14 Lab 29-3: Determining navigator object properties with JavaScript ....................................... 29-19 Lab 29-4: Creating a sniffer and redirection with JavaScript .................................................. 29-21 Lab 29-5: Preloading images with JavaScript ......................................................................... 29-23 Lab 30-1: Using DHTML with Microsoft Internet Explorer................................................... 30-10

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xv

Lab 30-2: Using DHTML with Netscape Navigator ............................................................... 30-13 Lab 33-1: Modifying cookie settings in Netscape Navigator .................................................... 33-6 Lab 33-2: Modifying cookie settings in Microsoft Internet Explorer........................................ 33-7 Lab 34-1: Downloading Adobe Acrobat Reader ....................................................................... 34-6 Lab 34-2: Downloading RealNetworks RealPlayer................................................................. 34-10 Lab 35-1: Embedding a Java applet into a Web page................................................................ 35-7 Lab 37-1: Examining the W3C .................................................................................................. 37-5 Lab 37-2: Registering a domain name ....................................................................................... 37-5 Lab 37-3: Examining RFCs ....................................................................................................... 37-6 Lab 38-1: Publishing a Web site with FrontPage (for demonstration only) .............................. 38-9 Lab 38-2: Publishing a Web site with Dreamweaver (for demonstration only) ...................... 38-12

List of Figures Figure 1-1: Basic Web page structure.......................................................................................... 1-9 Figure 2-1: Inverted pyramid style .............................................................................................. 2-4 Figure 2-2: Left-margin layout (traditional) ................................................................................ 2-7 Figure 2-3: Top-margin layout..................................................................................................... 2-7 Figure 2-4: Distributed left- and top-margin layout .................................................................... 2-8 Figure 2-5: Right-margin layout .................................................................................................. 2-8 Figure 2-6: Distributed layout...................................................................................................... 2-9 Figure 2-7: Site displayed at 640x480 resolution ...................................................................... 2-13 Figure 2-8: Site displayed at 800x600 resolution ...................................................................... 2-13 Figure 2-9: Site displayed at 1024x768 resolution .................................................................... 2-13 Figure 2-10: Site displayed on WebTV ..................................................................................... 2-14 Figure 2-11: Basic color combinations ...................................................................................... 2-18 Figure 2-12: Serifs ..................................................................................................................... 2-22 Figure 2-13: Sans serifs ............................................................................................................. 2-22 Figure 2-14: Plain text next to anti-aliased text ......................................................................... 2-24 Figure 4-1: Navigation toolbar..................................................................................................... 4-6 Figure 4-2: Labeled icons ............................................................................................................ 4-6 Figure 4-3: Sample company Web site directory structure ......................................................... 4-8 Figure 4-4: Expanded directory structure .................................................................................... 4-9 Figure 4-5: A well-designed site................................................................................................ 4-11 Figure 5-1: Magnified view of bitmap image .............................................................................. 5-5 Figure 5-2: Vector image using mathematical interpretation ...................................................... 5-6 Figure 5-3: SVG image file syntax ............................................................................................ 5-11 Figure 5-4: NetMechanic — Improve Your Site ...................................................................... 5-15 Figure 5-5: Entering URL to test images................................................................................... 5-16 Figure 5-6: Downloading and evaluating images ...................................................................... 5-17 Figure 5-7: Image evaluation report .......................................................................................... 5-18 Figure 5-8: Selecting an image file size from report ................................................................. 5-18 Figure 5-9: Scrolling through image versions ........................................................................... 5-19 Figure 5-10: Saving the preferred optimized image .................................................................. 5-19 Figure 6-1: Relationship between file size and media format ................................................... 6-12 Figure 7-1: Skills contributing to Web design teams................................................................... 7-4 Figure 7-2: International Olympic Committee .......................................................................... 7-14

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xvi

Figure 7-3: Handyman Connection............................................................................................ 7-14 Figure 7-4: Eco Mulch ............................................................................................................... 7-15 Figure 7-5: Ragu ........................................................................................................................ 7-15 Figure 7-6: PhysicianBoard ....................................................................................................... 7-16 Figure 7-7: HugeClick ............................................................................................................... 7-16 Figure 7-8: Butler County Transportation Improvement District.............................................. 7-17 Figure 8-1: Web site mindmap .................................................................................................... 8-4 Figure 10-1: CIWcertified.com Web page displayed in Netscape Navigator 6........................................................................................................... 10-5 Figure 10-2: CIWcertified.com Web page displayed in Microsoft Internet Explorer 6 .............................................................................................. 10-6 Figure 10-3: Web page displayed in Netscape Navigator 4. ..................................................... 10-6 Figure 10-4: Same page displayed in Microsoft Internet Explorer 4......................................... 10-7 Figure 11-1: Page structure with table ....................................................................................... 11-3 Figure 11-2: Text scrolls in table structure ................................................................................ 11-4 Figure 11-3: Tables add page division and structure ................................................................. 11-5 Figure 11-4: Page structure diagram.......................................................................................... 11-6 Figure 11-5: Complex page structure diagram .......................................................................... 11-6 Figure 11-6: Finished table ........................................................................................................ 11-8 Figure 11-7: Complex page structure diagram .......................................................................... 11-8 Figure 11-8: Finished complex table ......................................................................................... 11-9 Figure 11-9: Simple page structure from table ........................................................................ 11-12 Figure 11-10: Complex table structure .................................................................................... 11-13 Figure 11-11: Complex page structure using table .................................................................. 11-14 Figure 12-1: Web page using frames ......................................................................................... 12-3 Figure 12-2: Frames after clicking Certification Programs link................................................ 12-4 Figure 12-3: Frameset rows ....................................................................................................... 12-5 Figure 12-4: Structuring frames................................................................................................. 12-7 Figure 12-5: Modified frameset structure .................................................................................. 12-8 Figure 12-6: Hyperlinked frameset structure............................................................................. 12-9 Figure 12-7: Hierarchy of files and frame names .................................................................... 12-12 Figure 12-8: Simple frameset................................................................................................... 12-13 Figure 12-9: Completed frameset structure ............................................................................. 12-14 Figure 12-10: Frameset with rows and columns...................................................................... 12-14 Figure 12-11: Frameset structure with banner ......................................................................... 12-15 Figure 12-12: Two framesets combined .................................................................................. 12-16 Figure 12-13: Combined framesets in 3-D illustration ............................................................ 12-16 Figure 13-1: Flow of information from Web server to user's computer .................................... 13-5 Figure 13-2: Adding content to response header ....................................................................... 13-5 Figure 13-3: Response header with NAME attribute ................................................................ 13-7 Figure 14-1: styles.htm .............................................................................................................. 14-9 Figure 14-2: styles.htm with changes ...................................................................................... 14-10 Figure 14-3: Additional style changes to styles.htm—upper page .......................................... 14-11 Figure 14-4: Additional style changes to styles.htm—lower page .......................................... 14-11 Figure 15-1: FrontPage 2000 main user interface...................................................................... 15-4 Figure 15-2: FrontPage main toolbar......................................................................................... 15-5

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xvii

Figure 15-3: Launching FrontPage 2000 ................................................................................... 15-6 Figure 15-4: New Web dialog.................................................................................................... 15-7 Figure 15-5: New Web default page.......................................................................................... 15-8 Figure 15-6: Folders View ......................................................................................................... 15-8 Figure 15-7: Home page viewed in Page View ......................................................................... 15-9 Figure 15-8: Page hierarchy in Navigation View .................................................................... 15-10 Figure 15-9: Adding pages in Navigation View ...................................................................... 15-11 Figure 15-10: Home page with new link ................................................................................. 15-11 Figure 15-11: Hyperlinks View ............................................................................................... 15-12 Figure 15-12: New Task dialog box ........................................................................................ 15-13 Figure 15-13: Tasks View........................................................................................................ 15-14 Figure 15-14: Reports View..................................................................................................... 15-15 Figure 15-15: Navigation View—vacations.htm..................................................................... 15-16 Figure 15-16: New link added to home page........................................................................... 15-17 Figure 15-17: Preview In Browser icon................................................................................... 15-18 Figure 15-18: Home page displayed in browser ...................................................................... 15-18 Figure 16-1: Multiple tables and nested tables .......................................................................... 16-3 Figure 16-2: Creating new Web for World Coins ..................................................................... 16-5 Figure 16-3: World Coins Web in Folders View....................................................................... 16-6 Figure 16-4: Tables example ..................................................................................................... 16-7 Figure 16-5: Tables toolbar........................................................................................................ 16-7 Figure 16-6: Insert Table by clicking and dragging................................................................... 16-8 Figure 16-7: Insert Table dialog box ......................................................................................... 16-8 Figure 16-8: Drawing main table border ................................................................................... 16-9 Figure 16-9: Drawing first row of table................................................................................... 16-10 Figure 16-10: Drawing second row of table ............................................................................ 16-10 Figure 16-11: Drawing table columns ..................................................................................... 16-11 Figure 16-12: New table inserted in large cell......................................................................... 16-12 Figure 16-13: Expanding new table within cell....................................................................... 16-13 Figure 16-14: Selecting table rows .......................................................................................... 16-13 Figure 16-15: Selecting Merge Cells ....................................................................................... 16-14 Figure 16-16: Creating 2-by-2 table ........................................................................................ 16-14 Figure 16-17: Saving newly created tables.............................................................................. 16-15 Figure 16-18: Insert Picture icon on main toolbar ................................................................... 16-15 Figure 16-19: Browse your computer to locate file ................................................................. 16-16 Figure 16-20: Selecting image file to insert............................................................................. 16-16 Figure 16-21: After inserting first image ................................................................................. 16-17 Figure 16-22: Inserting graphics.............................................................................................. 16-18 Figure 16-23: After inserting second and third images ........................................................... 16-18 Figure 16-24: Save Embedded Files dialog box with inserted images.................................... 16-19 Figure 16-25: Table Properties dialog box .............................................................................. 16-20 Figure 16-26: Table Properties after changing values ............................................................. 16-21 Figure 16-27: Tables expand to fill available space ................................................................ 16-22 Figure 16-28: Page Properties dialog box—General tab ......................................................... 16-23 Figure 16-29: Page Properties dialog box—Background tab .................................................. 16-24 Figure 16-30: Cell Properties dialog box................................................................................. 16-25

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xviii

Figure 16-31: Home page after inserting cap.gif ..................................................................... 16-26 Figure 16-32: Modifying cell color.......................................................................................... 16-27 Figure 16-33: Choosing color for first cell .............................................................................. 16-28 Figure 16-34: Choosing color for second cell.......................................................................... 16-29 Figure 16-35: Choosing blue from Document Colors ............................................................. 16-30 Figure 16-36: Finished page with modified cells .................................................................... 16-30 Figure 16-37: Minimizing blue cells........................................................................................ 16-31 Figure 16-38: Blue showing at top of column ......................................................................... 16-31 Figure 16-39: Image toolbar in Page View.............................................................................. 16-32 Figure 16-40: Create Hyperlink dialog box ............................................................................. 16-33 Figure 16-41: Home page with image map hyperlinks............................................................ 16-34 Figure 16-42: Home page copy with modifications ................................................................ 16-35 Figure 16-43: Blue showing at top of column ......................................................................... 16-36 Figure 16-44: Save As Template dialog box ........................................................................... 16-36 Figure 16-45: Entering information in Save As Template dialog box..................................... 16-37 Figure 16-46: Coins page......................................................................................................... 16-38 Figure 16-47: Cursor turns into arrow ..................................................................................... 16-39 Figure 16-48: Dragging table with formatted text ................................................................... 16-40 Figure 16-49: Adding row to table........................................................................................... 16-41 Figure 16-50: Moving imported HTML content ..................................................................... 16-42 Figure 16-51: After moving imported content......................................................................... 16-43 Figure 16-52: Create Hyperlink button in main toolbar .......................................................... 16-43 Figure 16-53: Extending yellow row in table .......................................................................... 16-45 Figure 16-54: Home page after adding homeContentBottom.htm .......................................... 16-46 Figure 16-55: Merging cells in small table .............................................................................. 16-46 Figure 16-56: Home page after adding homeContentTop.htm................................................ 16-47 Figure 16-57: Shared Borders dialog box................................................................................ 16-47 Figure 16-58: Shared border added to bottom of page ............................................................ 16-48 Figure 16-59: Adding text to shared border............................................................................. 16-49 Figure 16-60: Choosing a Contents frameset type................................................................... 16-50 Figure 16-61: Creating hyperlink in frame .............................................................................. 16-51 Figure 16-62: Placing cursor above word Africa..................................................................... 16-52 Figure 16-63: Adding image.................................................................................................... 16-53 Figure 16-64: Home page loads into main frame .................................................................... 16-54 Figure 16-65: Icon button next to Target Frame section ......................................................... 16-55 Figure 16-66: Targeting the whole page.................................................................................. 16-55 Figure 16-67: Home page opens in entire browser window .................................................... 16-56 Figure 16-68: Page Options dialog box—Compatibility tab ................................................... 16-57 Figure 16-69: Extending yellow row in table .......................................................................... 16-58 Figure 16-70: Mints page after adding mintContentBottom.htm ............................................ 16-59 Figure 16-71: Merging cells..................................................................................................... 16-59 Figure 16-72: Mints page after adding mintContentTop.htm.................................................. 16-60 Figure 16-73: Style button ....................................................................................................... 16-60 Figure 16-74: Applying styles to HTML tags.......................................................................... 16-61 Figure 16-75: Modify Style dialog box ................................................................................... 16-61 Figure 16-76: Font selections................................................................................................... 16-62

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xix

Figure 16-77: Style information generated by FrontPage........................................................ 16-63 Figure 16-78: Select Hyperlink dialog box.............................................................................. 16-64 Figure 16-79: Themes dialog box ............................................................................................ 16-66 Figure 17-1: FrontPage DHTML Effects toolbar ...................................................................... 17-3 Figure 17-2: Merging table cells................................................................................................ 17-4 Figure 17-3: After adding coinContentTop.htm ........................................................................ 17-4 Figure 17-4: Map with all images inserted ................................................................................ 17-6 Figure 17-5: After adding a-zFrameset.htm............................................................................... 17-7 Figure 17-6: Insert Rows or Columns dialog box...................................................................... 17-8 Figure 17-7: After adding graphics to about.htm....................................................................... 17-9 Figure 17-8: Finished form ...................................................................................................... 17-11 Figure 17-9: Text Box Properties dialog box for Name field.................................................. 17-11 Figure 17-10: Text Box Properties dialog box for E-mail field............................................... 17-12 Figure 17-11: Radio Button Properties dialog box for Experience buttons—Expert selection ......................................................................... 17-12 Figure 17-12: Radio Button Properties dialog box for Experience buttons—Amateur selection...................................................................... 17-12 Figure 17-13: Radio Button Properties dialog box for Experience buttons—Novice selection ........................................................................ 17-13 Figure 17-14: Scrolling Text Box Properties dialog box for Question field .......................... 17-13 Figure 17-15: Enabling FrontPage server extensions in Page Options dialog box ................. 17-14 Figure 17-16: Form Properties dialog box............................................................................... 17-15 Figure 17-17: Options for Saving Results of Form dialog box ............................................... 17-16 Figure 17-18: Adding confirmation page ................................................................................ 17-17 Figure 17-19: Page with formatting added .............................................................................. 17-18 Figure 17-20: Banner Ad Manager Properties dialog box....................................................... 17-19 Figure 17-21: Web reports—World Coins site summary ........................................................ 17-20 Figure 17-22: After merging cells............................................................................................ 17-22 Figure 17-23: Search Form Properties dialog box................................................................... 17-23 Figure 18-1: CIW Certification page created in first lesson ...................................................... 18-3 Figure 18-2: Site Definition for firstsite dialog box .................................................................. 18-4 Figure 18-3: Insert Image icon in Objects palette...................................................................... 18-5 Figure 18-4: Draw Layer icon in Objects palette....................................................................... 18-6 Figure 18-5: Page after adding images ...................................................................................... 18-7 Figure 18-6: Layer Properties palette ........................................................................................ 18-8 Figure 18-7: Page after adding layers ........................................................................................ 18-8 Figure 18-8: After adding all layers to page .............................................................................. 18-9 Figure 18-9: Finished page from first lesson ........................................................................... 18-10 Figure 18-10: Finished page in Dreamweaver with objects arranged in grid.......................... 18-11 Figure 18-11: Page with adjustments to layer sizes and colors ............................................... 18-12 Figure 18-12: Page view divided into table cells..................................................................... 18-13 Figure 19-1: World Coins home page layout............................................................................. 19-3 Figure 19-2: First three layers positioned on page..................................................................... 19-5 Figure 19-3: Positioning of fourth layer on page....................................................................... 19-5 Figure 19-4: Choosing blue background color .......................................................................... 19-6 Figure 19-5: Choosing yellow background color ...................................................................... 19-7

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xx

Figure 19-6: Home page with first four layers and background colors ..................................... 19-8 Figure 19-7: Image Properties palette........................................................................................ 19-8 Figure 19-8: Hotspot palette ...................................................................................................... 19-9 Figure 19-9: Home page with image map and links ................................................................ 19-10 Figure 19-10: Saving home page as WC Web template .......................................................... 19-11 Figure 19-11: Body of document layer.................................................................................... 19-11 Figure 19-12: Layers Inspector................................................................................................ 19-12 Figure 19-13: Editor window with layers hidden .................................................................... 19-13 Figure 19-14: Inserting page header layer ............................................................................... 19-14 Figure 19-15: Home page with header layer inserted.............................................................. 19-15 Figure 19-16: Adding main content area layer ........................................................................ 19-16 Figure 19-17: Insert Table button in Objects palette ............................................................... 19-17 Figure 19-18: Expanding table to fill layout area .................................................................... 19-18 Figure 19-19: Finished page .................................................................................................... 19-19 Figure 19-20: Content placed in Mints page............................................................................ 19-21 Figure 19-21: Cells evenly distributed..................................................................................... 19-22 Figure 19-22: Bottom of Mints page with level borders and text............................................ 19-23 Figure 19-23: Bottom of History page with level borders and text ......................................... 19-24 Figure 19-24: Determining Word version for HTML cleaning ............................................... 19-25 Figure 19-25: HTML cleaning report ...................................................................................... 19-26 Figure 19-26: About page ........................................................................................................ 19-27 Figure 19-27: Changing menus from Common to Frames ...................................................... 19-28 Figure 19-28: Objects palette Frames menu ............................................................................ 19-29 Figure 19-29: Selecting left-side table of contents frame........................................................ 19-30 Figure 19-30: Creating frameset .............................................................................................. 19-31 Figure 20-1: Coins page with blank table .................................................................................. 20-4 Figure 20-2: Insert Rollover Image dialog box.......................................................................... 20-4 Figure 20-3: Changing Objects palette to Forms menu ............................................................. 20-6 Figure 20-4: Selecting Insert Form icon from Objects palette .................................................. 20-7 Figure 20-5: Red line indicating form area on page .................................................................. 20-7 Figure 20-6: Objects palette Forms menu selections................................................................. 20-8 Figure 20-7: Page with Name text box added............................................................................ 20-8 Figure 20-8: Page with additional form elements...................................................................... 20-9 Figure 20-9: Behaviors Inspector............................................................................................. 20-10 Figure 20-10: Naming image in Properties palette .................................................................. 20-11 Figure 20-11: Selecting Change Property in Behaviors Inspector........................................... 20-11 Figure 20-12: New properties in Change Property dialog box ................................................ 20-12 Figure 20-13: Behaviors Inspector with event and action listed.............................................. 20-12 Figure 20-14: Changing event to onMouseOver ..................................................................... 20-13 Figure 20-15: New values in Change Property dialog............................................................. 20-14 Figure 20-16: Behaviors Inspector with two events and actions listed ................................... 20-14 Figure 20-17: Changing event to onMouseOut ....................................................................... 20-15 Figure 20-18: Set Text of Layer dialog box............................................................................. 20-16 Figure 20-19: Selecting layer to allow dragging...................................................................... 20-18 Figure 20-20: Dragging image object into Library Inspector.................................................. 20-19 Figure 20-21: Dragging text object into Library Inspector...................................................... 20-20

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxi

Figure 20-22: Dragging image object from Library to page.................................................... 20-20 Figure 20-23: Dragging text object from Library to page ....................................................... 20-21 Figure 20-24: Editing HTML code manually in HTML Source editor ................................... 20-22 Figure 20-25: Insert Jump Menu dialog box............................................................................ 20-23 Figure OL20-1: Macromedia Dreamweaver Exchange home page ........................................ 20-30 Figure 21-1: HomeSite main screen .......................................................................................... 21-4 Figure 21-2: New Document window listing HomeSite templates ........................................... 21-5 Figure 21-3: Default template.................................................................................................... 21-6 Figure 21-4: Saving file as template .......................................................................................... 21-7 Figure 21-5: Local tab icon and resources display .................................................................... 21-8 Figure 21-6: New Document display window ........................................................................... 21-9 Figure 21-7: Default template.................................................................................................. 21-10 Figure 21-8: Save As Template dialog box ............................................................................. 21-11 Figure 21-9: Tag Chooser ........................................................................................................ 21-12 Figure 21-10: Tag Completion dialog box............................................................................... 21-13 Figure 21-11: Tag Chooser ...................................................................................................... 21-14 Figure 21-12: Image icon......................................................................................................... 21-15 Figure 22-1: Paint Shop Pro main display window ................................................................... 22-3 Figure 22-2: Image opened within Paint Shop Pro workspace.................................................. 22-5 Figure 22-3: New Image dialog box .......................................................................................... 22-6 Figure 22-4: Image Type pull-down menu ................................................................................ 22-7 Figure 22-5: Floating palettes in retracted state......................................................................... 22-8 Figure 22-6: Icon used to lock palette open............................................................................... 22-9 Figure 22-7: Open image file................................................................................................... 22-10 Figure 22-8: Copied image pasted onto page .......................................................................... 22-11 Figure 22-9: Text Entry dialog box ......................................................................................... 22-12 Figure 22-10: Image pull-down menu ..................................................................................... 22-13 Figure 22-11: Effect Browser .................................................................................................. 22-14 Figure 22-12: Decreasing the number of colors ...................................................................... 22-15 Figure 22-13: Ratio displayed in image title bar ..................................................................... 22-16 Figure 22-14: Image corrected to normal viewing .................................................................. 22-16 Figure 22-15: Moving Text Entry dialog box to see image..................................................... 22-17 Figure 22-16: Sampling color blue from CIW logo................................................................. 22-18 Figure 22-17: Positioning text ................................................................................................. 22-19 Figure 22-18: Moving Drop Shadow dialog box to see image................................................ 22-20 Figure 22-19: Sampling green color from CIW logo............................................................... 22-20 Figure 22-20: Changing Offset values..................................................................................... 22-21 Figure 22-21: Image with text and special effects added ........................................................ 22-21 Figure 22-22: Cropping tool .................................................................................................... 22-22 Figure 22-23: Selection tool for multiple shapes..................................................................... 22-22 Figure 22-24: Selection tool shape options.............................................................................. 22-22 Figure 22-25: Drawing crop area............................................................................................. 22-23 Figure 22-26: Changing new image properties........................................................................ 22-24 Figure 22-27: Three images open ............................................................................................ 22-25 Figure 22-28: Pasting first image as new layer........................................................................ 22-25 Figure 22-29: Pasting second image as new layer ................................................................... 22-26

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxii

Figure 22-30: Layers button on Layers palette ........................................................................ 22-26 Figure 22-31: Layers palette with pasted layers ...................................................................... 22-27 Figure 22-32: Transparent image next to non-transparent image............................................ 22-28 Figure 22-33: Transparent image with speckled appearance................................................... 22-28 Figure 22-34: Image with Set Palette Transparency dialog box.............................................. 22-29 Figure 22-35: Selecting color to make transparent .................................................................. 22-30 Figure 22-36: Color becomes transparent................................................................................ 22-31 Figure 22-37: Screen Capture Setup ........................................................................................ 22-32 Figure 22-38: Paint Shop Pro Animation Shop ....................................................................... 22-34 Figure 22-39: Animation Wizard............................................................................................. 22-35 Figure 22-40: Choosing canvas color ...................................................................................... 22-35 Figure 22-41: Choosing to align images to upper-left corner of frame ................................... 22-36 Figure 22-42: Setting animation looping and frequencies....................................................... 22-36 Figure 22-43: Completing Animation Wizard......................................................................... 22-37 Figure 22-44: Images in Animation Shop................................................................................ 22-37 Figure 22-45: Animation Quality Versus Output Size dialog box .......................................... 22-38 Figure 22-46: Optimization Progress dialog box..................................................................... 22-38 Figure 22-47: Optimization Results......................................................................................... 22-39 Figure 23-1: Two vector graphics with similar file size ............................................................ 23-3 Figure 23-2: Flash interface ....................................................................................................... 23-6 Figure 23-3: Flash Drawing toolbar........................................................................................... 23-8 Figure 23-4: Stroke panel........................................................................................................... 23-9 Figure 23-5: Mixer panel ......................................................................................................... 23-11 Figure 23-6: Mixer panel and color palette.............................................................................. 23-11 Figure 23-7: Circles drawn with color ..................................................................................... 23-14 Figure 23-8: Swatches panel.................................................................................................... 23-15 Figure 23-9: Fill Panel ............................................................................................................. 23-15 Figure 23-10: Fill and Gradient Modifier palette .................................................................... 23-15 Figure 23-11: Adding color sliders to Fill and Gradient Modifier palette............................... 23-16 Figure 23-12: Objects with color, gradients, and fills ............................................................. 23-17 Figure 24-1: Flash timeline........................................................................................................ 24-3 Figure 25-1: World Coins navigation menu in Flash stage ....................................................... 25-4 Figure 25-2: Symbol Properties dialog box ............................................................................... 25-4 Figure 25-3: Instance panel........................................................................................................ 25-5 Figure 25-4: Clicking Scene 1 link to exit Symbol Edit mode .................................................. 25-6 Figure 25-5: Dragging Push Button Red from Flash Library of Buttons .................................. 25-7 Figure 25-6: Instance panel for Push Button Red...................................................................... 25-8 Figure 25-7: State of button in different frames ........................................................................ 25-8 Figure 25-8: Setting action for button in Object Actions dialog box ........................................ 25-9 Figure 25-9: Setting action for button........................................................................................ 25-9 Figure 25-10: Drawing square next to existing button ............................................................ 25-10 Figure 25-11: New symbol named square button in Edit mode .............................................. 25-11 Figure 25-12: Importing arrow image...................................................................................... 25-13 Figure 25-13: Edit Multiple Frames button ............................................................................. 25-14 Figure 25-14: Setting vertical and horizontal alignment of objects to center.......................... 25-14 Figure 25-15: Icon to add new folder to library....................................................................... 25-16

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxiii

Figure 25-16: Images shown hierarchically in new library folder........................................... 25-17 Figure 26-1: Creating circle in Frame 1 of Layer 1 ................................................................... 26-4 Figure 26-2: Changing position of circle in Frame 30............................................................... 26-5 Figure 26-3: Testing tween in Flash preview ............................................................................ 26-6 Figure 26-4: Using handles to increase size of circle ................................................................ 26-7 Figure 26-5: Creating smaller circle on first circle in Symbol Edit mode................................. 26-8 Figure 26-6: Frame panel........................................................................................................... 26-8 Figure 26-7: Creating square in Frame 1 of Layer 1 ............................................................... 26-10 Figure 26-8: Drawing smooth curve with Pencil tool.............................................................. 26-11 Figure 26-9: Locking square on beginning of line................................................................... 26-11 Figure 26-10: Locking square on end of line........................................................................... 26-12 Figure 26-11: Creating square ................................................................................................. 26-14 Figure 26-12: Copied circles positioned on stage.................................................................... 26-15 Figure 26-13: Adding a stop action ......................................................................................... 26-16 Figure 26-14: Character panel ................................................................................................. 26-17 Figure 26-15: Creating text...................................................................................................... 26-18 Figure 26-16: Using handles to increase text size ................................................................... 26-19 Figure 27-1: Two images on stage............................................................................................. 27-4 Figure 27-2: Movie library with two images and two symbols ................................................. 27-5 Figure 27-3: Shrinking navigation image as small as possible.................................................. 27-6 Figure 27-4: Drawing rectangle over index point...................................................................... 27-7 Figure 27-5: Dragging button over Coins in navigation menu .................................................. 27-8 Figure 27-6: Moving symbol to lower-right quadrant ............................................................... 27-9 Figure 27-7: Shrinking c-text symbol as small as possible...................................................... 27-10 Figure 27-8: Creating guide layer ............................................................................................ 27-11 Figure 27-9: Drawing smooth guide line with Pencil tool....................................................... 27-11 Figure 27-10: Locking globe symbol onto beginning of line .................................................. 27-12 Figure 27-11: Locking globe symbol onto end of line ............................................................ 27-13 Figure 27-12: Moving guide line ............................................................................................. 27-14 Figure 27-13: Enclosing all four states within onion skins...................................................... 27-15 Figure 27-14: Positioning of movie clip .................................................................................. 27-16 Figure 27-15: Positioning coin-text movie clip ....................................................................... 27-17 Figure 27-16: Positioning navigation menu and button........................................................... 27-20 Figure 27-17: World Coins home page with navigation menu image deleted ........................ 27-22 Figure 27-18: Repositioning layers.......................................................................................... 27-23 Figure 27-19: Behaviors Inspector........................................................................................... 27-24 Figure 27-20: Check Plugin dialog box ................................................................................... 27-24 Figure 28-1: Items in tell-target.fla movie library ..................................................................... 28-3 Figure 28-2: Dragging Switch 1 Silver buttons from Flash Library.......................................... 28-4 Figure 28-3: Naming movie clip instance in Instance panel...................................................... 28-4 Figure 28-4: Adding action and event for button....................................................................... 28-5 Figure 28-5: Specifying tell target ............................................................................................. 28-5 Figure 28-6: Placing text field on top of mask .......................................................................... 28-7 Figure 28-7: Checkered pattern appears over text ..................................................................... 28-7 Figure 28-8: Three letters deleted, or "cut out" ......................................................................... 28-8 Figure 28-9: Mask with all letters deleted, or "cut out"............................................................. 28-8

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxiv

Figure 28-10: Creating sublayer to mask................................................................................... 28-9 Figure 28-11: Creating circle next to mask................................................................................ 28-9 Figure 28-12: Circle with gradient fill ..................................................................................... 28-10 Figure 28-13: Placing circle symbol on right side of stage ..................................................... 28-10 Figure 29-1: Alert message...................................................................................................... 29-12 Figure 29-2: HTML displayed following JavaScript statement .............................................. 29-13 Figure 29-3: User prompt dialog box....................................................................................... 29-14 Figure 29-4: Alert message box............................................................................................... 29-15 Figure 29-5: Web page displayed following JavaScript statement.......................................... 29-15 Figure 29-6: Identifying navigator object properties ............................................................... 29-20 Figure 29-7: JavaScript message to Netscape Navigator users ............................................... 29-22 Figure 29-8: JavaScript message to Microsoft Internet Explorer users................................... 29-22 Figure 30-1: Document Object Model....................................................................................... 30-5 Figure 30-2: Drop-down table of contents made with DHTML.............................................. 30-12 Figure 30-3: Layer.html ........................................................................................................... 30-14 Figure 31-1: Specifically structured document........................................................................ 31-16 Figure 32-1: Personal Web Server administration dialog box................................................... 32-4 Figure 32-2: Microsoft Internet Information Server Internet Service Manager ........................ 32-5 Figure 32-3: Apache Software Foundation home page ............................................................. 32-6 Figure 32-4: Microsoft IIS MMC server administration ........................................................... 32-7 Figure 33-1: Enabling/disabling cookies in Navigator .............................................................. 33-6 Figure 33-2: Internet Explorer Security tab ............................................................................... 33-7 Figure 33-3: Enabling/disabling cookies in Internet Explorer................................................... 33-8 Figure 34-1: Adobe Acrobat Reader downloadable files .......................................................... 34-6 Figure 34-2: Downloadable files available for Windows .......................................................... 34-7 Figure 34-3: Downloading Acrobat Reader............................................................................... 34-8 Figure 34-4: Downloading Acrobat Reader installation file...................................................... 34-8 Figure 34-5: Saving Acrobat Reader files to desktop................................................................ 34-9 Figure 34-6: Adobe Acrobat setup process................................................................................ 34-9 Figure 34-7: RealNetworks home page ................................................................................... 34-10 Figure 34-8: RealPlayer link.................................................................................................... 34-11 Figure 34-9: RealPlayer Download link .................................................................................. 34-12 Figure 34-10: RealPlayer download form................................................................................ 34-13 Figure 34-11: RealPlayer password form ................................................................................ 34-14 Figure 34-12: Saving RealPlayer installation files to desktop................................................. 34-15 Figure 34-13: RealPlayer installation ...................................................................................... 34-15 Figure 34-14: Prompt to download file.................................................................................... 34-16 Figure 35-1: Rainbow text Java applet ...................................................................................... 35-8 Figure 36-1: Database table consisting of fields and records .................................................... 36-4 Figure 38-1: WS FTP Pro dialog box ........................................................................................ 38-5 Figure 38-2: Session Properties dialog box ............................................................................... 38-6 Figure 38-3: FrontPage Publish Web dialog box....................................................................... 38-8 Figure 38-4: World Coins Web in FrontPage 2000 ................................................................... 38-9 Figure 38-5: Publish Web dialog box ...................................................................................... 38-10 Figure 38-6: Name and Password Required dialog box .......................................................... 38-10 Figure 38-7: Publishing Web dialog shows publishing status ................................................. 38-10

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxv

Figure 38-8: Successful publication alert with link to site ...................................................... 38-11 Figure 38-9: Dreamweaver Site window ................................................................................. 38-12 Figure 38-10: Define Site dialog box....................................................................................... 38-12 Figure 38-11: Site Definition for World Coins........................................................................ 38-13 Figure 38-12: Connect button in Site window......................................................................... 38-13 Figure 38-13: Connection to server established in Site window ............................................. 38-14

List of Tables Table 2-1: Page size and response time ..................................................................................... 2-11 Table 2-2: RGB and hexadecimal code value examples ........................................................... 2-17 Table 2-3: Browser-safe color palette........................................................................................ 2-19 Table 2-4: Browser-safe color intensities .................................................................................. 2-20 Table 5-1: Image file formats ...................................................................................................... 5-8 Table 6-1: Audio file types .......................................................................................................... 6-6 Table 9-1: Web site characteristics .............................................................................................. 9-5 Table 13-1: Values of tag HTTP-EQUIV and CONTENT attributes....................... 13-6 Table 14-1: Changeable style elements ..................................................................................... 14-6 Table 14-2: CSS2 features ....................................................................................................... 14-15 Table 17-1: Map images and link files ...................................................................................... 17-6 Table 20-1: Rollover locations and file names for Coins page.................................................. 20-5 Table 20-2: Links and information to enter in Behaviors Inspector........................................ 20-17 Table 20-3: Names and URLs for jump menu selections ........................................................ 20-24 Table 29-1: Comparison of JavaScript and Java........................................................................ 29-6 Table 29-2: Windows attributes accessible with the open() method ....................................... 29-16 Table 29-3: Properties of navigator object............................................................................... 29-18 Table A29-1: Pseudo-code example ........................................................................................ 29-32 Table 30-1: Objects and events supported in both browsers ..................................................... 30-8

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxvi

Course Description Design Methodology and Technology teaches you how to design and publish Web sites. In this course, you will work with popular production tools such as Microsoft FrontPage, Macromedia Dreamweaver and Flash. You will study design technologies such as Dynamic HTML, cascading style sheets, JavaScript, Java applets, plug-ins and multimedia. You will also explore the extensibility of design tools, incompatibility issues surrounding these tools, and the functionality of current Web browsers. This course will also teach you to manage the Web site development process. Web design requires a strategy different from other mass media. In this course, you will approach the design process from the perspective of Web site users. You will take the role of Web designer and project manager, and you will work through the Web site development process by evolving a Web presence site into a working prototype Web project. 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.

Length Design Methodology and Technology is a 30-hour course.

Series Design Methodology and Technology is a single course representing the CIW Site Designer series. This series is part of the Master CIW Designer track.

Prerequisites Prior to taking this course, students should complete the CIW Foundations series of courses or be able to demonstrate equivalent Internet and HTML knowledge.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxvii

ProsoftTraining Courseware This coursebook was developed for instructor-led training and will assist you during class. Along with comprehensive instructional text and objectives checklists, this coursebook provides easyto-follow hands-on labs and a glossary of course-specific terms. It also provides Internet addresses needed to complete some labs, although due to the constantly changing nature of the Internet, some addresses may no longer be valid. The student coursebook is organized in the following manner: course title table of contents list of labs list of figures list of tables lessons lesson objectives pre-assessment questions narrative text graphics tables and figures warnings tech notes labs graphics tables and figures warnings tech notes lesson summary lesson review appendixes glossary index supplemental CD

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxviii

When you return to your home or office, you will find this coursebook to be a valuable resource for reviewing labs and applying the skills you have learned. Each lesson concludes with questions that review the material. Lesson review questions are provided as a study resource only and in no way guarantee a passing score on CIW exams. The course is available as either an academic or a learning center version. Each of these versions has an instructor book and student books. Check your book to verify which version you have, and whether it is an instructor or student book. Following is a brief discussion of each version. •

Academic: Designed for students in an academic classroom environment; typically taught over a quarter (10-week) or semester (16-week) time period. Example syllabi are included on the instructor CD-ROM. The instructor's book and CD-ROM contain all answers, as well as activities (pen-and-paper-based labs), optional labs (computer-based labs), quizzes, a course assessment, and the accompanying handouts for the instructor to assign during class or as homework. No answers exist in the student book or on the student CD-ROM. Students will have to obtain answers from the instructor.

•

Learning Center: Designed for students in a learning center classroom environment; typically taught over a one- to five-day time period (depending on the length of the course). An example implementation table is included on the instructor CD-ROM. Similar to the academic version, the instructor's book and CD-ROM contain all answers, as well as activities (pen-and-paper-based labs), optional labs (computer-based labs), quizzes, a course assessment, and the accompanying handouts for the instructor to assign during class or as homework. However, the student CD-ROM contains answers, including those to the preassessment questions, labs, review questions, activities, optional labs, quizzes and course assessment.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxix

Course Objectives After completing this course, you will be able to: •

Explain 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 HTML tables and frames, metadata, and Cascading Style Sheets.

•

Use Web production applications and tools to create and manage pages and sites, create animated GIFs, edit graphic image files, and create multimedia files.

•

Explain and implement advanced Web technologies, including scripting languages, Dynamic HTML, Extensible Markup Language (XML), server-side technologies, Java applets, and plug-ins.

•

Explain the functions of Web servers, server administration ports, cookies, databases, and database management systems.

•

Identify the Internet governing organizations, research Internet standards, and register a domain name.

•

Compare in-house Web site hosting to hosting with an Internet Service Provider, and publish sites to the Web using various tools and techniques.

•

Complete development of a functional Web site.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxx

Classroom Setup Your instructor has probably set up the classroom computers based on the system requirements listed below. Most software configurations on your computer are identical to those on your instructor's computer. However, your instructor may use additional software to demonstrate network interaction or related technologies.

System Requirements Hardware The following table summarizes the hardware requirements for all courses in the CIW program. Each classroom should be equipped with enough personal computers to accommodate each student and the instructor with his or her own system. Note: The CIW hardware requirements are similar to the lowest system requirements for Microsoft implementation (Level 1 requirements) except that CIW requires increased hard disk space (8 GB) and RAM (128 MB). This comparison may be helpful for the many training centers that implement CIW and are also CTEC because personnel at these centers are familiar with the Microsoft hardware specifications. CIW hardware specifications

Greater than or equal to the following

Processor

Intel Pentium II (or equivalent) personal computer with processor speed greater than or equal to 300 MHz

L2 cache

256 KB

Hard disk

8-GB hard drive

RAM

At least 128 MB

CD-ROM

32X

Network interface card (NIC)

10BaseT or 100BaseTX (10 or 100 Mbps)

Sound card/speakers

Required for instructor's station, optional for student stations

Video adapter

At least 4 MB

Monitor

15-inch monitor

Network hubs

Two 10-port 10BaseT or 100BaseTX (10 or 100 Mbps) hubs

Router

Multi-homed system with three NICs (Windows NT 4.0/2000 server)*

* Must meet universal CIW hardware requirements.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxxi

Software The recommended software configurations for computers used to complete the labs in this book are as follows. •

Microsoft Windows Millennium Edition (Me)

•

Microsoft Internet Explorer 5.0 or later

•

Netscape Communicator 4.0 or later

•

Microsoft FrontPage 2000 or later*

•

Macromedia Dreamweaver 4.0

•

Macromedia HomeSite 5.0

•

Jasc Paint Shop Pro 7.0

•

Macromedia Flash 5.0

*Note: FrontPage 2002 can also be used to teach this course. FrontPage 2002 is compatible with FrontPage 2000 and few (if any) changes are necessary in the labs. The major differences between FrontPage versions occur in the reporting function, which is not the course's focus. This course focuses on the Web site design functionality of the product, which is essentially the same for both software versions.

Connectivity Internet connectivity is required for this course. The minimum requirement is a modem and an Internet Service Provider (ISP) account. However, you will experience improved results with a 56-Kbps modem with a Point-to-Point Protocol (PPP) account through an ISP, or a direct Internet connection. The instructor can provide more information on specific issues regarding hardware, software and network requirements if needed.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

xxxii

Conventions and Graphics Used in This Book The following conventions are used in Prosoft coursebooks. Terms

Technology terms defined in the margins are indicated in bold the first time they appear in the text. Not every word in bold is a term requiring definition.

Exercise Text

Text that you enter in an exercise appears in bold. Names of components that you access or change in an exercise also appear in bold.

Notations

Notations or comments regarding screenshots, exercises or other text are indicated in italic type.

Program Code or Commands

Text used in program code or operating system commands appears in the Lucida Sans Typewriter font.

The following graphics are used in Prosoft coursebooks. Tech Notes point out exceptions or special circumstances that you may find when working with a particular procedure. Tech Notes that occur within an exercise 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. Each lesson summary includes an Application Project. This project is optional, and 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.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

Section I: Web Design Concepts An effective Web site is much more than a technological creation. As a developer, your job is to shape the Web user's experience and present useful content in a way that is interesting, aesthetically pleasing, and easy to digest. To accomplish these goals, you should begin the development process by considering how you will present your content to the world. The first section of this course discusses Web design aspects prior to the site production process. These issues include page layout, multimedia implementation, color, and graphic selections.

white text for docutech

1Lesson 1: Overview of Web Design Concepts Objectives By the end of this lesson, you will be able to: Define the relationship between Web technology and design concepts. Identify the current direction and application of Web technology and design. Identify the differences between Web tools and technology. Use your HTML skills to create a basic Web page.

1-2

Design Methodology and Technology

Pre-Assessment Questions 1. By its nature, the Internet is: a. b. c. d.

transactional. linear. passive. self-reflective.

2. Which of the following current Web components requires the use of a database? a. b. c. d.

Dynamic HTML Data-centric research Sophisticated multimedia Data-driven content

3. What does the acronym WYSIWYG stand for? _______________________________________________________________

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

Lesson 1: Overview of Web Design Concepts

1-3

Web Technology The Web technology that we now enjoy is one of humankind's most empowering developments. This technology empowers both the message sender and the message recipient—in other words, the publisher of content and the reader of that content. Many people now turn to the Web to find information in their daily lives, 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 ads, offering customers a more personalized and specific method of information access to assist in learning and decision making. It is the Web designer's responsibility to convey the appropriate message to recipients; thus the concepts of design are as important as the content itself. For long-time Web users, the transformation of Web design is clear. Early sites consisted of lengthy, plain-textual content. This trend evolved into developed design practices that rival other ad media such as television and print. To be competitive, people in 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. Designers must choose the tools that will give them the competitive edge for their organizations.

The Nature of the Web 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 decide what information to access and when to access it. This fact makes the Internet a one-to-one medium as opposed to a broadcast medium. Thus, the concepts and applications of mass media are not necessarily valid for the Internet.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

1-4

Design Methodology and Technology

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. In essence, the act of reading a magazine or watching a television program is not inherently transactional; an interruption exists between the act of reading or viewing and the act of transaction. The only transaction required from readers or viewers is to read a particular book or magazine, or watch a TV program. 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. Furthermore, by its nature the Internet is non-linear. The user constantly makes transactional decisions, first leading to the site, then staying within the site, 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.

Current Web development direction Development for the Web has become more sophisticated in the past two years. Sophistication has increased in terms of significant multimedia advances; new types of data are now accessible via the Web. Data-driven content has become a main component of many Web applications and projects. The advantage to datadriven content is that it reflects the most current information, numbers and statistics because the information is drawn from a database at the time the user requests it. After e-commerce, intranet development has been the second-largest growth area in Web development. With the enabling of data-driven content, companies and industries are more often Web-enabling their in-house business processes for employees. This results in a more efficient and productive work environment. For outside vendors and business partners, extranets are rapidly emerging to fulfill data requirements outside the company and streamline the business process. For example, Company A supplies Company B with paper. If Company A has access to Company B's inventory status via an extranet, it will know when Company B needs another shipment. Company A can then initiate the shipment without a request from Company B.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

Lesson 1: Overview of Web Design Concepts

1-5

Tools and technology WYSIWYG (What You See Is What You Get) A display format in which the file being edited appears on the screen just as it will appear to the end user.

Several years back, there was much debate about whether or not to use specialized tools to help the Web development process. Now, however, many of the HTMLediting tools and WYSIWYG editors are in their third and fourth generations, and have become very sophisticated applications. The debate is no longer whether designers should use these tools, but rather which tools they should use. Ideally, a combination of manual coding and WYSIWYG functionality is the best option from today's development perspective. It simply takes too much time to develop a dynamic site by manually coding HTML alone. The need for constantly updated information and design on both a corporate Web site and an intranet or extranet site necessitates an alliance between the two methods of site design. Two WYSIWYG design tools stand out in the marketplace today: Macromedia Dreamweaver and Microsoft FrontPage. Throughout this course, you will explore these two tools and consider the features that will maximize your organization's HTML development efficiency. We will discuss the design options in both programs, as well as the more important features for site management. These powerful site management tools give both programs a competitive edge in the industry, which is why they were chosen for demonstration in this course. 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. Macromedia 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.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

1-6

Design Methodology and Technology

Web Design Concepts Web design concepts are always in evolution. It is important to remember that the Web is not a static medium, like print media. Therefore, the rules and concepts are in constant fluctuation. 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. This assumption is false. As a Web designer, you want the user to have a satisfying experience, but dazzling the users is not 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, quality content, and proper use of available media. Numerous studies confirm that the overuse of multimedia will discourage visitors because they either do not have the capabilities to support it or do not want to wait for lengthy downloads. Ultimately, if you do not satisfy the 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 the users' perspective, will certainly find dissatisfied Web visitors, clients and customers.

Web medium vs. traditional media Web designers are becoming more aware of the differences involved in designing for the Web as compared with other media, especially print. In the early years of Web design, many Web sites were simple HTML reproductions of printed brochures and other marketing tools. This approach resulted from companies attempting to post their information to the Web quickly. Further, the Web was very new territory and did not have proven techniques or statistical data to validate its effectiveness. Some companies learned early that posting "brochures" on the Web was not an effective use of the medium. By contrast, the print medium is linear in nature: one line to the next, one page to the next. The Web is a non-linear medium and thus has different properties that are not exploited when used in traditional linear format. The most distinctive feature of the Web is its interactivity with the user. Traditional print media cannot personalize the user's experience. By contrast, the Web medium can optimize the possibilities of interactivity and personalization for the user, which creates a direct connection between the business and the visitor.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

Lesson 1: Overview of Web Design Concepts

1-7

New Technologies Dynamic HTML (DHTML) A combination of scripts and HTML objects that provides Web site interactivity.

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 FrontPage and Macromedia Dreamweaver implement Dynamic HTML (DHTML) functions that will take advantage of available technology. We will discuss other recent technologies in this course as well, such as Cascading Style Sheets (CSS), the new browsers, the Extensible Markup Language (XML), and the use of JavaScript in your Web design for further functionality. In addition, we will discuss the World Wide Web Consortium's 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 tool will most benefit your organization's needs.

Evaluating Your HTML Skills In the following lab, you will test your HTML skills by creating a basic Web page similar to the example given. Your content need not be the same; however, you should create a page with the same structure. This lab is designed to evaluate your current skills and provide you with a baseline by which to evaluate the HTML tools used later in the course.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

1-8

Design Methodology and Technology

Lab 1-1: Creating a basic Web page In this lab, you will create a basic Web page to evaluate your HTML skills. Solution code for the example page is given at the end of the lab and on your supplemental CD-ROM. 1. In addition to the four basic structure tags, use HTML tags to create or modify the following elements on a basic Web page: •

Table

•

Font

•

Hyperlink (using HTTP as the protocol)

•

Image

2. To recreate the page shown, the following images are provided on your supplemental CD-ROM in the lesson-01 folder: •

ciw-logo.gif

•

arrow.gif

•

ciw-administrator.gif

•

ciw-developer.gif

•

ciw-designer.gif

The following colors were used to create the sample Web page: •

Blue (#336699)

•

White (#FFFFFF)

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

Lesson 1: Overview of Web Design Concepts

1-9

3. Use your creativity to modify your page. Your page's basic structure should resemble Figure 1-1. Try to recreate the page without looking at the code in the following step. Refer to that code only as necessary.

Figure 1-1: Basic Web page structure

4. Notepad: To recreate the page shown in the preceding figure, open the file skills.htm from the lesson-01 folder on your supplemental CD-ROM. This file includes HTML code that will serve as a template for page creation. The following code was used to create the sample Web page: CIW Certification

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

1-10

Design Methodology and Technology

        CIW Certification offers individuals the ability to benchmark and improve their Internet technology skills while earning a certification that will enhance a career. CIW courses and curriculum offer the following advantages over other training options. Also see CIWcertified.com. Job role oriented curriculum Industry wide recognition Hands-on learning Real-world scenarios & applications CIW offers Master certification training in the following job roles: CIW Master Administrator CIW Master Application Developer CIW Master Designer

5. Save the file and open it in your browser.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

Lesson 1: Overview of Web Design Concepts

1-11

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 HTML skills by creating a basic Web page. Now that you have completed this lesson, you should be able to: Define the relationship between Web technology and design concepts. Identify the current direction and application of Web technology and design. Identify the differences between Web tools and technology. Use your HTML skills to create a basic Web page.

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07

1-12

Design Methodology and Technology

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. Web designers should design to provide users with a satisfying experience when they visit the site. What is the primary goal that will achieve this? _______________________________________________________________ 4. Name three areas of growth in Web development over the last two years. _______________________________________________________________ 5. Is it advisable to use a lot of multimedia in your Web site design? Why or why not? _______________________________________________________________ _______________________________________________________________ _______________________________________________________________

© 2002 ProsoftTraining All Rights Reserved.

Version 6.07