Design Methodology and Technology:: Academic Student Guide

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 softwares
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
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
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
The Importance of Audience Usability..................................................................................... 3-3
Web Usability Testing .............................................................................................................. 3-5
Lesson 3 Review ....................................................................................................................... 3-8
Lesson 4: Navigation Concepts ................................................................................................. 4-1
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
Web Site Images ....................................................................................................................... 5-3
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
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
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
The Mindmapping Process ....................................................................................................... 8-3
Mindmapping a Web Site ......................................................................................................... 8-4
Lesson 8 Review ....................................................................................................................... 8-7
Lesson 9: Web Site Implementation Factors........................................................................... 9-1
Determining Site Implementation Factors ................................................................................ 9-3
Web Site Characteristics ........................................................................................................... 9-5
Calculating Download Times ................................................................................................... 9-6
Lesson 9 Review ....................................................................................................................... 9-9
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
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
HTML Frames and Framesets ................................................................................................ 12-3
The HTML <FRAMESET> Tag ............................................................................................ 12-4
The HTML <FRAME> Tag ................................................................................................... 12-5
Targeting Hyperlinks in HTML............................................................................................ 12-10
Adding a Frameset to a Frameset.......................................................................................... 12-16
HTML Frameset Attributes................................................................................................... 12-18
The HTML <NOFRAMES> Tag ......................................................................................... 12-19
Lesson 12 Review ................................................................................................................. 12-21
Lesson 13: Metadata and the Web ......................................................................................... 13-1
Metadata.................................................................................................................................. 13-3
<META> Tags and Document Identification......................................................................... 13-4
<META> Tags and Search Engines ....................................................................................... 13-8
<META> Tags and Delayed File Change ............................................................................ 13-13
Lesson 13 Review ................................................................................................................. 13-17
Lesson 14: Cascading Style Sheets ......................................................................................... 14-1
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
Version 6.07
viii
Section IV: Applications and Tools

Lesson 15: Site Development with Microsoft FrontPage 2000 Introduction................. 15-1
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
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
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
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
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
Version 6.07
ix
Lesson 20: Site Development with Dreamweaver 4.0 Advanced Features .................... 20-1
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
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
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
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
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
Flash Symbols......................................................................................................................... 25-3
Flash Buttons .......................................................................................................................... 25-7
Version 6.07
Customizing the Flash Library.............................................................................................. 25-15

Lesson 25 Review ................................................................................................................. 25-19
Lesson 26: Multimedia with Flash 5.0 Tweens................................................................. 26-1
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
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
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
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
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
Version 6.07
xi
Lesson 31: Extensible Markup Language (XML) ................................................................ 31-1

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
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
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
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
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
Version 6.07
xii
Lesson 36: Databases ............................................................................................................... 36-1

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
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
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
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 <BASE> 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 <META> 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
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
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
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.htmupper page .......................................... 14-11
Figure 14-4: Additional style changes to styles.htmlower page .......................................... 14-11
Figure 15-1: FrontPage 2000 main user interface...................................................................... 15-4
Figure 15-2: FrontPage main toolbar......................................................................................... 15-5
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 Viewvacations.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 boxGeneral tab ......................................................... 16-23
Figure 16-29: Page Properties dialog boxBackground tab .................................................. 16-24
Figure 16-30: Cell Properties dialog box................................................................................. 16-25
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 boxCompatibility 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
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 buttonsExpert selection ......................................................................... 17-12
for Experience buttonsAmateur selection...................................................................... 17-12
for Experience buttonsNovice 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 reportsWorld 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
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
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
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
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
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
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 <META> 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
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.
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
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.
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.
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.
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.
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.
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
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?

_______________________________________________________________
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 recipientin 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.
Version 6.07
1-4
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
responsesin 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 siteand another
businessany 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.
Version 6.07
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.
Version 6.07
1-6
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.
Version 6.07
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.
Version 6.07
1-8
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)
Version 6.07
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:
<HTML>
<HEAD>
<TITLE>CIW Certification</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A HREF="http://www.ciwcertified.com"><IMG SRC="ciw-logo.gif"
WIDTH="98" HEIGHT="71" BORDER="0"></A>

Version 6.07
1-10

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
<A HREF="http://www.ciwcertified.com">CIWcertified.com.</A>

<TABLE WIDTH="70%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="20%" ALIGN="center"><IMG SRC="arrow.gif"></TD>
<TD WIDTH="80%">Job role oriented curriculum</TD>
</TR>
<TR>
<TD WIDTH="80%">Industry wide recognition</TD>
</TR>
<TR>
<TD WIDTH="80%">Hands-on learning </TD>
</TR>
<TR>
<TD WIDTH="80%">Real-world scenarios &
applications</TD>
</TR>
</TABLE>

CIW offers Master certification training in the following job
roles:
<TABLE WIDTH="100%"
border="0" CELLSPACING="0" CELLPADDING="0" ALIGN="center">
<TR BGCOLOR="#336699" ALIGN="center">
<TD>
CIW Master Administrator
</TD>
CIW Master Application Developer
</TD>
CIW Master Designer
</TD>
</TR>
<TR BGCOLOR="#FFFFFF" ALIGN="center">
<TD><IMG SRC="ciw-administrator.gif"></TD>
<TD><IMG SRC="ciw-developer.gif"></TD>
<TD><IMG SRC="ciw-designer.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
5. Save the file and open it in your browser.
Version 6.07
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.
Version 6.07
1-12
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?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
Version 6.07

Design Methodology and Technology:: Academic Student Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Design Methodology and Technology:: Academic Student Guide

Uploaded by

Copyright:

Available Formats

Design Methodology and

Design Methodology and Technology

Copyright 2000 - 2002 by ProsoftTraining

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

Digital Imaging Concepts ......................................................................................................... 5-3

2002 ProsoftTraining All Rights Reserved.

Section III: Basic Web Technology Concepts

2002 ProsoftTraining All Rights Reserved.

Section IV: Applications and Tools

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

Customizing the Flash Library.............................................................................................. 25-15

2002 ProsoftTraining All Rights Reserved.

Lesson 31: Extensible Markup Language (XML) ................................................................ 31-1

2002 ProsoftTraining All Rights Reserved.

Lesson 36: Databases ............................................................................................................... 36-1

2002 ProsoftTraining All Rights Reserved.

Lab 11-3: Creating a simple Web page structure..................................................................... 11-11

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

Lab 30-2: Using DHTML with Netscape Navigator ............................................................... 30-13

2002 ProsoftTraining All Rights Reserved.

Figure 7-3: Handyman Connection............................................................................................ 7-14

2002 ProsoftTraining All Rights Reserved.

Figure 15-3: Launching FrontPage 2000 ................................................................................... 15-6

2002 ProsoftTraining All Rights Reserved.

Figure 16-31: Home page after inserting cap.gif ..................................................................... 16-26

2002 ProsoftTraining All Rights Reserved.

Figure 16-77: Style information generated by FrontPage........................................................ 16-63

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

Figure 20-22: Dragging image object from Library to page.................................................... 20-20

2002 ProsoftTraining All Rights Reserved.

Figure 22-30: Layers button on Layers palette ........................................................................ 22-26

2002 ProsoftTraining All Rights Reserved.

Figure 25-16: Images shown hierarchically in new library folder........................................... 25-17

2002 ProsoftTraining All Rights Reserved.

Figure 28-10: Creating sublayer to mask................................................................................... 28-9

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

2002 ProsoftTraining All Rights Reserved.

Academic: Designed for students in an academic classroom environment; typically taught

Learning Center: Designed for students in a learning center classroom environment;

2002 ProsoftTraining All Rights Reserved.

Complete development of a functional Web site.

2002 ProsoftTraining All Rights Reserved.

Greater than or equal to the following

Intel Pentium II (or equivalent) personal computer

8-GB hard drive

Network interface card (NIC)

10BaseT or 100BaseTX (10 or 100 Mbps)

Required for instructor's station, optional for

Two 10-port 10BaseT or 100BaseTX

Multi-homed system with three NICs

* Must meet universal CIW hardware requirements.

2002 ProsoftTraining All Rights Reserved.

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