Site designer

511 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
511
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Site designer

  1. 1. Design Methodology and Technology: Academic Student Guide
  2. 2. Blank Text For The Docutech!
  3. 3. Design Methodology and Technology Developer Jeffrey Brown Contributors Susan M. Lane, Martin Heltai and Robert Barrett Editors Susan M. Lane and David Oberman Publishers Joseph Flannery and Joseph A. Servia Project Managers David De Ponte, Todd Hopkins and Sheila Ramirez Trademarks Prosoft is a trademark of ProsoftTraining. All product names and services identified throughout this book are trademarks or registered trademarks of their respective companies. They are used throughout this book in editorial fashion only. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with the book. Copyrights of any screen captures in this book are the property of the software’s manufacturer. Disclaimer ProsoftTraining makes a genuine attempt to ensure the accuracy and quality of the content described herein; however, ProsoftTraining, makes no warranty, express or implied, with respect to the quality, reliability, accuracy, or freedom from error of this document or the products it describes. ProsoftTraining makes no representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of fitness for any particular purpose. ProsoftTraining disclaims all liability for any direct, indirect, incidental or consequential, special or exemplary damages resulting from the use of the information in this document or from the use of any products described in this document. Mention of any product or organization does not constitute an endorsement by ProsoftTraining of that product or corporation. Data used in examples and labs is intended to be fictional even if actual data is used or accessed. Any resemblance to, or use of real persons or organizations should be treated as entirely coincidental. ProsoftTraining makes every effort to ensure the accuracy of URLs referenced in all its material, but cannot guarantee that all URLs will be available throughout the life of a course. When this course/disk was published, all URLs were checked for accuracy and completeness. However, due to the ever-changing nature of the Internet, some URLs may no longer be available or may have been re-directed. Copyright Information This training manual is copyrighted and all rights are reserved by ProsoftTraining. No part of this publication may be reproduced, transmitted, stored in a retrieval system, modified, or translated into any language or computer language, in any form or by any means, electronic, mechanical, magnetic, optical, chemical, manual or otherwise without written permission of ProsoftTraining, 3001 Bee Caves Road, Austin, TX 78746. Copyright © 2000 - 2002 by ProsoftTraining All Rights Reserved ISBN: 1-58143-678-5
  4. 4. iv © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  5. 5. v Table of Contents Course Description..................................................................................................................... xix ProsoftTraining Courseware ......................................................................................................xx Course Objectives ..................................................................................................................... xxii Classroom Setup....................................................................................................................... xxiii System Requirements .............................................................................................................. xxiii Conventions and Graphics Used in This Book........................................................................xxv Section I: Web Design Concepts Lesson 1: Overview of Web Design Concepts ......................................................................... 1-1 Pre-Assessment Questions ........................................................................................................ 1-2 Web Technology....................................................................................................................... 1-3 The Nature of the Web.............................................................................................................. 1-3 Web Design Concepts............................................................................................................... 1-6 New Technologies .................................................................................................................... 1-7 Evaluating Your HTML Skills.................................................................................................. 1-7 Lesson 1 Review ..................................................................................................................... 1-12 Lesson 2: Web Page Layout and Elements.............................................................................. 2-1 Pre-Assessment Questions ........................................................................................................ 2-2 Web Users and Site Design....................................................................................................... 2-3 Effective Web Page Layout ...................................................................................................... 2-4 Color and Web Design............................................................................................................ 2-14 Fonts and Web Design ............................................................................................................ 2-21 Lesson 2 Review ..................................................................................................................... 2-27 Lesson 3: Web Site Usability Testing ....................................................................................... 3-1 Pre-Assessment Questions ........................................................................................................ 3-2 The Importance of Audience Usability..................................................................................... 3-3 Web Usability Testing .............................................................................................................. 3-5 Lesson 3 Review ....................................................................................................................... 3-8 Lesson 4: Navigation Concepts ................................................................................................. 4-1 Pre-Assessment Questions ........................................................................................................ 4-2 Why Is Navigation Critical? ..................................................................................................... 4-3 Browsers and Navigation.......................................................................................................... 4-3 Primary and Secondary Navigation .......................................................................................... 4-4 Navigation Hierarchy................................................................................................................ 4-5 Site Structure, URLs and File Names ....................................................................................... 4-8 Familiar Navigation Conventions ........................................................................................... 4-10 Guided Navigation .................................................................................................................. 4-10 Navigation Action Plan........................................................................................................... 4-11 Lesson 4 Review ..................................................................................................................... 4-15 Lesson 5: Web Graphics............................................................................................................ 5-1 Pre-Assessment Questions ........................................................................................................ 5-2 Web Site Images ....................................................................................................................... 5-3 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  6. 6. vi Digital Imaging Concepts ......................................................................................................... 5-3 Bitmap vs. Vector Graphics...................................................................................................... 5-5 Graphic Applications ................................................................................................................ 5-6 Image File Formats ................................................................................................................... 5-8 Creating Images ...................................................................................................................... 5-12 Image Optimization ................................................................................................................ 5-13 Lesson 5 Review ..................................................................................................................... 5-22 Lesson 6: Multimedia and the Web.......................................................................................... 6-1 Pre-Assessment Questions ........................................................................................................ 6-2 Multimedia and Web Sites........................................................................................................ 6-3 Current Multimedia Capabilities............................................................................................... 6-3 Animation and the Web ............................................................................................................ 6-4 Audio and the Web ................................................................................................................... 6-5 Video and the Web.................................................................................................................... 6-7 Goals of a Multimedia Site ....................................................................................................... 6-8 Multimedia Site Design Basics................................................................................................. 6-9 User Interaction....................................................................................................................... 6-10 Selecting Multimedia Elements .............................................................................................. 6-12 Copyright Infringement .......................................................................................................... 6-15 Lesson 6 Review ..................................................................................................................... 6-17 Section II: Site Development and Management Lesson 7: The Web Development Process ............................................................................... 7-1 Pre-Assessment Questions ........................................................................................................ 7-2 Web Design Teams ................................................................................................................... 7-3 Bottom-up Approach for Web Development............................................................................ 7-5 Web Development Phases......................................................................................................... 7-5 Defining the Web Project Goals ............................................................................................... 7-6 Understanding the Business Process......................................................................................... 7-8 Defining a Vision...................................................................................................................... 7-9 From Vision to Strategy.......................................................................................................... 7-10 The Metaphor.......................................................................................................................... 7-13 Lesson 7 Review ..................................................................................................................... 7-20 Lesson 8: Mindmapping ............................................................................................................ 8-1 Pre-Assessment Questions ........................................................................................................ 8-2 The Mindmapping Process ....................................................................................................... 8-3 Mindmapping a Web Site ......................................................................................................... 8-4 Lesson 8 Review ....................................................................................................................... 8-7 Lesson 9: Web Site Implementation Factors........................................................................... 9-1 Pre-Assessment Questions ........................................................................................................ 9-2 Determining Site Implementation Factors ................................................................................ 9-3 Web Site Characteristics ........................................................................................................... 9-5 Calculating Download Times ................................................................................................... 9-6 Lesson 9 Review ....................................................................................................................... 9-9 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  7. 7. vii Section III: Basic Web Technology Concepts Lesson 10: HTML Standards and Compliance..................................................................... 10-1 Pre-Assessment Questions ...................................................................................................... 10-2 What Is HTML?...................................................................................................................... 10-3 Web Browser Support for HTML........................................................................................... 10-5 The HTML Standard............................................................................................................... 10-7 HTML 1.0 and 2.0 .................................................................................................................. 10-8 HTML 3.0 and 3.2 .................................................................................................................. 10-8 HTML 4.0 ............................................................................................................................... 10-9 HTML 4.01 ........................................................................................................................... 10-10 Web Page Accessibility ........................................................................................................ 10-12 Lesson 10 Review ................................................................................................................. 10-17 Lesson 11: HTML Tables and Web Page Structure............................................................. 11-1 Pre-Assessment Questions ...................................................................................................... 11-2 Creating Page Structure with HTML Tables .......................................................................... 11-3 Diagramming an HTML Table ............................................................................................... 11-6 Borderless Web Page Structure ............................................................................................ 11-10 Lesson 11 Review ................................................................................................................. 11-16 Lesson 12: HTML Frames ...................................................................................................... 12-1 Pre-Assessment Questions ...................................................................................................... 12-2 HTML Frames and Framesets ................................................................................................ 12-3 The HTML <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 Pre-Assessment Questions ...................................................................................................... 13-2 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 Pre-Assessment Questions ...................................................................................................... 14-2 Style Sheets............................................................................................................................. 14-3 Cascading Style Sheets ........................................................................................................... 14-3 Defining and Using Styles ...................................................................................................... 14-4 Changeable Style Elements..................................................................................................... 14-6 Lesson 14 Review ................................................................................................................. 14-18 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  8. 8. viii Section IV: Applications and Tools Lesson 15: Site Development with Microsoft FrontPage 2000 — Introduction................. 15-1 Pre-Assessment Questions ...................................................................................................... 15-2 Microsoft FrontPage 2000 ...................................................................................................... 15-3 FrontPage Views..................................................................................................................... 15-4 FrontPage Menus and Toolbars .............................................................................................. 15-5 Opening Webs and Files in FrontPage.................................................................................... 15-5 Lesson 15 Review ................................................................................................................. 15-20 Lesson 16: Site Development with FrontPage 2000 — Basic Features ............................... 16-1 Pre-Assessment Questions ...................................................................................................... 16-2 Page Layout Using Tables in FrontPage................................................................................. 16-3 Inserting Images in FrontPage .............................................................................................. 16-15 Page Properties in FrontPage ................................................................................................ 16-23 Image Maps in FrontPage ..................................................................................................... 16-32 FrontPage Templates ............................................................................................................ 16-34 Importing Formatted Text in FrontPage ............................................................................... 16-39 Inserting HTML with FrontPage .......................................................................................... 16-40 Creating Text Hyperlinks with FrontPage ............................................................................ 16-43 FrontPage Shared Borders .................................................................................................... 16-44 FrontPage Framesets............................................................................................................. 16-49 FrontPage Styles ................................................................................................................... 16-56 FrontPage Themes ................................................................................................................ 16-65 Lesson 16 Review ................................................................................................................. 16-69 Lesson 17: Site Development with FrontPage 2000 — Advanced Features ....................... 17-1 Pre-Assessment Questions ...................................................................................................... 17-2 FrontPage DHTML Toolbar ................................................................................................... 17-3 FrontPage Web Forms ............................................................................................................ 17-8 FrontPage Components......................................................................................................... 17-18 FrontPage Web Reports ........................................................................................................ 17-20 FrontPage Search Forms ....................................................................................................... 17-21 Lesson 17 Review ................................................................................................................. 17-26 Lesson 18: Site Development with Macromedia Dreamweaver 4.0 — Introduction ........ 18-1 Pre-Assessment Questions ...................................................................................................... 18-2 Dreamweaver 4.0 .................................................................................................................... 18-3 Dreamweaver Layout Options ................................................................................................ 18-3 Lesson 18 Review ................................................................................................................. 18-15 Lesson 19: Site Development with Dreamweaver 4.0 — Basic Features ............................ 19-1 Pre-Assessment Questions ...................................................................................................... 19-2 Page Layout in Dreamweaver................................................................................................. 19-3 Creating Image Maps in Dreamweaver .................................................................................. 19-8 Creating Templates in Dreamweaver.................................................................................... 19-10 Frames in Dreamweaver ....................................................................................................... 19-28 Lesson 19 Review ................................................................................................................. 19-34 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  9. 9. ix Lesson 20: Site Development with Dreamweaver 4.0 — Advanced Features .................... 20-1 Pre-Assessment Questions ...................................................................................................... 20-2 Rollover Images in Dreamweaver .......................................................................................... 20-3 Dreamweaver Web Forms ...................................................................................................... 20-6 Dreamweaver Behaviors....................................................................................................... 20-10 Modifying Layers in Dreamweaver ...................................................................................... 20-15 Dreamweaver Library ........................................................................................................... 20-19 Editing HTML in Dreamweaver........................................................................................... 20-21 Jump Menus in Dreamweaver .............................................................................................. 20-22 Macromedia Dreamweaver Exchange .................................................................................. 20-25 Lesson 20 Review ................................................................................................................. 20-28 Lesson 21: Web Pages with Macromedia HomeSite 5.......................................................... 21-1 Pre-Assessment Questions ...................................................................................................... 21-2 Macromedia HomeSite 5 ........................................................................................................ 21-3 HomeSite Templates............................................................................................................... 21-5 Handling Files in HomeSite.................................................................................................... 21-7 Tag-Editing Features in HomeSite........................................................................................ 21-12 Lesson 21 Review ................................................................................................................. 21-17 Lesson 22: Images with Jasc Paint Shop Pro ........................................................................ 22-1 Pre-Assessment Questions ...................................................................................................... 22-2 Introduction to Jasc Paint Shop Pro ........................................................................................ 22-3 Adding Text to an Image File in Paint Shop Pro ................................................................. 22-12 Special Effects in Paint Shop Pro ......................................................................................... 22-13 Decreasing Color Depth with Paint Shop Pro....................................................................... 22-15 Cropping Images in Paint Shop Pro...................................................................................... 22-22 Creating Screen Captures in Paint Shop Pro......................................................................... 22-31 Creating Animated GIF Images in Paint Shop Pro............................................................... 22-33 Lesson 22 Review ................................................................................................................. 22-41 Lesson 23: Multimedia with Macromedia Flash 5.0............................................................. 23-1 Pre-Assessment Questions ...................................................................................................... 23-2 Macromedia Flash................................................................................................................... 23-3 Flash Shapes............................................................................................................................ 23-8 Color and Fills in Flash......................................................................................................... 23-13 Lesson 23 Review ................................................................................................................. 23-19 Lesson 24: Multimedia with Flash 5.0 — Timeline and Layers .......................................... 24-1 Pre-Assessment Questions ...................................................................................................... 24-2 Flash Timeline ........................................................................................................................ 24-3 Flash Layers ............................................................................................................................ 24-5 Saving and Publishing Flash Movies...................................................................................... 24-7 Lesson 24 Review ................................................................................................................... 24-9 Lesson 25: Multimedia with Flash 5.0 — Symbols and Buttons ......................................... 25-1 Pre-Assessment Questions ...................................................................................................... 25-2 Flash Symbols......................................................................................................................... 25-3 Flash Buttons .......................................................................................................................... 25-7 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  10. 10. x Customizing the Flash Library.............................................................................................. 25-15 Lesson 25 Review ................................................................................................................. 25-19 Lesson 26: Multimedia with Flash 5.0 — Tweens................................................................. 26-1 Pre-Assessment Questions ...................................................................................................... 26-2 Flash Tweens .......................................................................................................................... 26-3 Motion Tweens in Flash.......................................................................................................... 26-3 Shape Tweens in Flash.......................................................................................................... 26-14 Tweening Text in Flash ........................................................................................................ 26-17 Lesson 26 Review ................................................................................................................. 26-22 Lesson 27: Multimedia with Flash 5.0 — Movie Clips ......................................................... 27-1 Pre-Assessment Questions ...................................................................................................... 27-2 Flash Movie Clips ................................................................................................................... 27-3 Adding Sound to Flash.......................................................................................................... 27-18 Adding Flash Movies to HTML Files................................................................................... 27-19 Testing for the Flash Plug-In ................................................................................................ 27-23 Lesson 27 Review ................................................................................................................. 27-27 Lesson 28: Multimedia with Flash 5.0 — Tell Targets and Masks ..................................... 28-1 Pre-Assessment Questions ...................................................................................................... 28-2 Flash Tell Targets ................................................................................................................... 28-3 Mask Layers in Flash.........................................................................................................................28-6 Lesson 28 Review ................................................................................................................. 28-13 Section V: Advanced Web Technology Concepts Lesson 29: JavaScript Fundamentals..................................................................................... 29-1 Pre-Assessment Questions ...................................................................................................... 29-2 Why Script? ............................................................................................................................ 29-3 JavaScript and Common Programming Concepts .................................................................. 29-3 What Is JavaScript?................................................................................................................. 29-5 JavaScript vs. Other Languages.............................................................................................. 29-6 Embedding JavaScript into HTML......................................................................................... 29-8 Strengths of JavaScript ........................................................................................................... 29-9 Using JavaScript to Communicate with the User ................................................................. 29-10 JavaScript Functions ............................................................................................................. 29-17 Using JavaScript for Browser Detection............................................................................... 29-18 Lesson 29 Review ................................................................................................................. 29-27 Lesson 30: Dynamic HTML.................................................................................................... 30-1 Pre-Assessment Questions ...................................................................................................... 30-2 Dynamic HTML...................................................................................................................... 30-3 Document Object Model......................................................................................................... 30-5 CSS and DHTML ................................................................................................................... 30-6 Scripting Languages and DHTML.......................................................................................... 30-6 DHTML Implementation ...................................................................................................... 30-10 Lesson 30 Review ................................................................................................................. 30-16 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  11. 11. xi Lesson 31: Extensible Markup Language (XML) ................................................................ 31-1 Pre-Assessment Questions ...................................................................................................... 31-2 What Is XML? ........................................................................................................................ 31-3 HTML Goals........................................................................................................................... 31-5 Separating Format from Structure in HTML .......................................................................... 31-8 HTML Limitations.................................................................................................................. 31-8 XML Goals ........................................................................................................................... 31-10 What Is an XML Document?................................................................................................ 31-11 Rules for Well-Formed XML ............................................................................................... 31-12 Simple Well-Formed XML................................................................................................... 31-15 What Is XHTML? ................................................................................................................. 31-19 Lesson 31 Review ................................................................................................................. 31-21 Lesson 32: HTTP Servers........................................................................................................ 32-1 Pre-Assessment Questions ...................................................................................................... 32-2 What Is an HTTP Server? ....................................................................................................... 32-3 Ports ........................................................................................................................................ 32-3 Basic HTTP Server Administration ........................................................................................ 32-4 Server-Side Technologies ....................................................................................................... 32-7 Lesson 32 Review ................................................................................................................. 32-11 Lesson 33: Cookies................................................................................................................... 33-1 Pre-Assessment Questions ...................................................................................................... 33-2 Understanding Cookies........................................................................................................... 33-3 Enabling and Disabling Cookies............................................................................................. 33-5 Deleting Cookie Files ............................................................................................................. 33-9 Lesson 33 Review ................................................................................................................. 33-11 Lesson 34: Downloadables and Plug-Ins ............................................................................... 34-1 Pre-Assessment Questions ...................................................................................................... 34-2 Plug-In Technology ................................................................................................................ 34-3 Plug-In Installation.................................................................................................................. 34-4 Macromedia Shockwave and Flash ........................................................................................ 34-5 Adobe Acrobat Reader............................................................................................................ 34-5 RealNetworks RealPlayer ..................................................................................................... 34-10 Creating a Downloadable File .............................................................................................. 34-16 Lesson 34 Review ................................................................................................................. 34-19 Lesson 35: Java Applets .......................................................................................................... 35-1 Pre-Assessment Questions ...................................................................................................... 35-2 Why Use Java and Applets? ................................................................................................... 35-3 Introduction to Java................................................................................................................. 35-3 Demystifying Applets ............................................................................................................. 35-4 Embedding a Java Applet ....................................................................................................... 35-5 Java Applets and Animation ................................................................................................... 35-7 Java Applet Authoring Tools .................................................................................................. 35-9 Applet Resources .................................................................................................................... 35-9 Lesson 35 Review ................................................................................................................. 35-11 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  12. 12. xii Lesson 36: Databases ............................................................................................................... 36-1 Pre-Assessment Questions ...................................................................................................... 36-2 Web Design and Databases..................................................................................................... 36-3 Database Anatomy .................................................................................................................. 36-3 Database Queries .................................................................................................................... 36-4 Database Management System ............................................................................................... 36-5 Database Tools, Products and Programs................................................................................. 36-6 Lesson 36 Review ................................................................................................................... 36-9 Lesson 37: Standards Organizations...................................................................................... 37-1 Pre-Assessment Questions ...................................................................................................... 37-2 Internet Governing Bodies...................................................................................................... 37-3 Internet Society (ISOC) .......................................................................................................... 37-3 Internet Architecture Board (IAB).......................................................................................... 37-3 Internet Research Task Force (IRTF) ..................................................................................... 37-4 Internet Engineering Task Force (IETF)................................................................................. 37-4 World Wide Web Consortium (W3C) .................................................................................... 37-4 Internet Corporation for Assigned Names and Numbers (ICANN) ....................................... 37-5 Requests for Comments (RFCs) ............................................................................................. 37-6 Lesson 37 Review ................................................................................................................... 37-8 Section VI: Publishing a Site to the Web Lesson 38: Web Site Publishing.............................................................................................. 38-1 Pre-Assessment Questions ...................................................................................................... 38-2 Web Site Publishing................................................................................................................ 38-3 Web Site Hosting .................................................................................................................... 38-3 Web Publishing with FTP....................................................................................................... 38-4 Web Publishing with FrontPage 2000 .................................................................................... 38-7 Web Publishing with Dreamweaver ..................................................................................... 38-11 Comparing Web Publishing Tools........................................................................................ 38-15 Lesson 38 Review ................................................................................................................. 38-17 Appendixes................................................................................................................ Appendixes-1 Glossary ......................................................................................................................... Glossary-1 Index.................................................................................................................................... Index-1 Supplemental CD-ROM Contents.................................... Supplemental CD-ROM Contents-1 List of Labs Lab 1-1: Creating a basic Web page ............................................................................................ 1-8 Lab 5-1: Optimizing images for Web use.................................................................................. 5-14 Lab 7-1: Creating a vision statement ........................................................................................... 7-9 Lab 7-2: Developing tactics to support your strategy................................................................ 7-11 Lab 7-3: Developing the functions of a Web site ...................................................................... 7-12 Lab 8-1: Mindmapping a Web site .............................................................................................. 8-5 Lab 11-1: Creating a simple HTML table.................................................................................. 11-7 Lab 11-2: Creating a complex HTML table .............................................................................. 11-8 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  13. 13. 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 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  14. 14. xiv Lab 19-8: Importing Microsoft Word HTML into Dreamweaver ........................................... 19-25 Lab 19-9: Creating frames in Dreamweaver............................................................................ 19-29 Lab 20-1: Creating rollover images in Dreamweaver................................................................ 20-3 Lab 20-2: Creating Web forms in Dreamweaver....................................................................... 20-6 Lab 20-3: Applying behaviors in Dreamweaver...................................................................... 20-11 Lab 20-4: Modifying layers in Dreamweaver.......................................................................... 20-16 Lab 20-5: Dragging layers in Dreamweaver............................................................................ 20-17 Lab 20-6: Adding objects to the Dreamweaver Library .......................................................... 20-19 Lab 20-7: Editing HTML code manually in Dreamweaver..................................................... 20-21 Lab 20-8: Creating jump menus in Dreamweaver................................................................... 20-23 Lab 21-1: Modifying the default template in HomeSite............................................................ 21-9 Lab 21-2: Using the blank document in HomeSite.................................................................. 21-14 Lab 22-1: Opening and converting an image file in Paint Shop Pro ......................................... 22-9 Lab 22-2: Adding text and special effects to an image with Paint Shop Pro........................... 22-16 Lab 22-3: Cropping images in Paint Shop Pro ........................................................................ 22-23 Lab 22-4: Working with layers in Paint Shop Pro................................................................... 22-24 Lab 22-5: Creating transparent images in Paint Shop Pro....................................................... 22-29 Lab 22-6: Creating animated images in Paint Shop Pro .......................................................... 22-34 Lab 23-1: Using the Flash interface, toolbars and palettes........................................................ 23-6 Lab 23-2: Adding shapes to the Flash stage .............................................................................. 23-9 Lab 23-3: Changing colors, fills and gradients in Flash .......................................................... 23-14 Lab 24-1: Identifying frames in Flash ....................................................................................... 24-4 Lab 24-2: Using layers in Flash ................................................................................................. 24-6 Lab 24-3: Saving Flash movies.................................................................................................. 24-7 Lab 25-1: Creating symbols in Flash ......................................................................................... 25-3 Lab 25-2: Using Flash Library buttons...................................................................................... 25-7 Lab 25-3: Creating buttons using Flash shapes ....................................................................... 25-10 Lab 25-4: Creating buttons in Flash using imported images ................................................... 25-12 Lab 25-5: Customizing the Flash movie library ...................................................................... 25-15 Lab 26-1: Creating a straight-line motion tween in Flash ......................................................... 26-4 Lab 26-2: Creating path motion tweens in Flash ..................................................................... 26-10 Lab 26-3: Creating shape tweens in Flash ............................................................................... 26-14 Lab 26-4: Creating a text tween in Flash ................................................................................. 26-17 Lab 27-1: Creating a Flash movie clip....................................................................................... 27-3 Lab 27-2: Adding sound to a Flash movie............................................................................... 27-18 Lab 27-3: Resizing the Flash stage .......................................................................................... 27-20 Lab 27-4: Importing a Flash movie into an HTML page......................................................... 27-22 Lab 27-5: Testing for the Flash plug-in ................................................................................... 27-24 Lab 28-1: Creating tell targets in Flash...................................................................................... 28-3 Lab 28-2: Creating mask layers in Flash ................................................................................... 28-6 Lab 29-1: Using the JavaScript alert() method ........................................................................ 29-11 Lab 29-2: Using the JavaScript prompt() method.................................................................... 29-14 Lab 29-3: Determining navigator object properties with JavaScript ....................................... 29-19 Lab 29-4: Creating a sniffer and redirection with JavaScript .................................................. 29-21 Lab 29-5: Preloading images with JavaScript ......................................................................... 29-23 Lab 30-1: Using DHTML with Microsoft Internet Explorer................................................... 30-10 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  15. 15. xv Lab 30-2: Using DHTML with Netscape Navigator ............................................................... 30-13 Lab 33-1: Modifying cookie settings in Netscape Navigator .................................................... 33-6 Lab 33-2: Modifying cookie settings in Microsoft Internet Explorer........................................ 33-7 Lab 34-1: Downloading Adobe Acrobat Reader ....................................................................... 34-6 Lab 34-2: Downloading RealNetworks RealPlayer................................................................. 34-10 Lab 35-1: Embedding a Java applet into a Web page................................................................ 35-7 Lab 37-1: Examining the W3C .................................................................................................. 37-5 Lab 37-2: Registering a domain name ....................................................................................... 37-5 Lab 37-3: Examining RFCs ....................................................................................................... 37-6 Lab 38-1: Publishing a Web site with FrontPage (for demonstration only) .............................. 38-9 Lab 38-2: Publishing a Web site with Dreamweaver (for demonstration only) ...................... 38-12 List of Figures Figure 1-1: Basic Web page structure.......................................................................................... 1-9 Figure 2-1: Inverted pyramid style .............................................................................................. 2-4 Figure 2-2: Left-margin layout (traditional) ................................................................................ 2-7 Figure 2-3: Top-margin layout..................................................................................................... 2-7 Figure 2-4: Distributed left- and top-margin layout .................................................................... 2-8 Figure 2-5: Right-margin layout .................................................................................................. 2-8 Figure 2-6: Distributed layout...................................................................................................... 2-9 Figure 2-7: Site displayed at 640x480 resolution ...................................................................... 2-13 Figure 2-8: Site displayed at 800x600 resolution ...................................................................... 2-13 Figure 2-9: Site displayed at 1024x768 resolution .................................................................... 2-13 Figure 2-10: Site displayed on WebTV ..................................................................................... 2-14 Figure 2-11: Basic color combinations ...................................................................................... 2-18 Figure 2-12: Serifs ..................................................................................................................... 2-22 Figure 2-13: Sans serifs ............................................................................................................. 2-22 Figure 2-14: Plain text next to anti-aliased text ......................................................................... 2-24 Figure 4-1: Navigation toolbar..................................................................................................... 4-6 Figure 4-2: Labeled icons ............................................................................................................ 4-6 Figure 4-3: Sample company Web site directory structure ......................................................... 4-8 Figure 4-4: Expanded directory structure .................................................................................... 4-9 Figure 4-5: A well-designed site................................................................................................ 4-11 Figure 5-1: Magnified view of bitmap image .............................................................................. 5-5 Figure 5-2: Vector image using mathematical interpretation ...................................................... 5-6 Figure 5-3: SVG image file syntax ............................................................................................ 5-11 Figure 5-4: NetMechanic — Improve Your Site ...................................................................... 5-15 Figure 5-5: Entering URL to test images................................................................................... 5-16 Figure 5-6: Downloading and evaluating images ...................................................................... 5-17 Figure 5-7: Image evaluation report .......................................................................................... 5-18 Figure 5-8: Selecting an image file size from report ................................................................. 5-18 Figure 5-9: Scrolling through image versions ........................................................................... 5-19 Figure 5-10: Saving the preferred optimized image .................................................................. 5-19 Figure 6-1: Relationship between file size and media format ................................................... 6-12 Figure 7-1: Skills contributing to Web design teams................................................................... 7-4 Figure 7-2: International Olympic Committee .......................................................................... 7-14 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  16. 16. xvi Figure 7-3: Handyman Connection............................................................................................ 7-14 Figure 7-4: Eco Mulch ............................................................................................................... 7-15 Figure 7-5: Ragu ........................................................................................................................ 7-15 Figure 7-6: PhysicianBoard ....................................................................................................... 7-16 Figure 7-7: HugeClick ............................................................................................................... 7-16 Figure 7-8: Butler County Transportation Improvement District.............................................. 7-17 Figure 8-1: Web site mindmap .................................................................................................... 8-4 Figure 10-1: CIWcertified.com Web page displayed in Netscape Navigator 6........................................................................................................... 10-5 Figure 10-2: CIWcertified.com Web page displayed in Microsoft Internet Explorer 6 .............................................................................................. 10-6 Figure 10-3: Web page displayed in Netscape Navigator 4. ..................................................... 10-6 Figure 10-4: Same page displayed in Microsoft Internet Explorer 4......................................... 10-7 Figure 11-1: Page structure with table ....................................................................................... 11-3 Figure 11-2: Text scrolls in table structure ................................................................................ 11-4 Figure 11-3: Tables add page division and structure ................................................................. 11-5 Figure 11-4: Page structure diagram.......................................................................................... 11-6 Figure 11-5: Complex page structure diagram .......................................................................... 11-6 Figure 11-6: Finished table ........................................................................................................ 11-8 Figure 11-7: Complex page structure diagram .......................................................................... 11-8 Figure 11-8: Finished complex table ......................................................................................... 11-9 Figure 11-9: Simple page structure from table ........................................................................ 11-12 Figure 11-10: Complex table structure .................................................................................... 11-13 Figure 11-11: Complex page structure using table .................................................................. 11-14 Figure 12-1: Web page using frames ......................................................................................... 12-3 Figure 12-2: Frames after clicking Certification Programs link................................................ 12-4 Figure 12-3: Frameset rows ....................................................................................................... 12-5 Figure 12-4: Structuring frames................................................................................................. 12-7 Figure 12-5: Modified frameset structure .................................................................................. 12-8 Figure 12-6: Hyperlinked frameset structure............................................................................. 12-9 Figure 12-7: Hierarchy of files and frame names .................................................................... 12-12 Figure 12-8: Simple frameset................................................................................................... 12-13 Figure 12-9: Completed frameset structure ............................................................................. 12-14 Figure 12-10: Frameset with rows and columns...................................................................... 12-14 Figure 12-11: Frameset structure with banner ......................................................................... 12-15 Figure 12-12: Two framesets combined .................................................................................. 12-16 Figure 12-13: Combined framesets in 3-D illustration ............................................................ 12-16 Figure 13-1: Flow of information from Web server to user's computer .................................... 13-5 Figure 13-2: Adding content to response header ....................................................................... 13-5 Figure 13-3: Response header with NAME attribute ................................................................ 13-7 Figure 14-1: styles.htm .............................................................................................................. 14-9 Figure 14-2: styles.htm with changes ...................................................................................... 14-10 Figure 14-3: Additional style changes to styles.htm—upper page .......................................... 14-11 Figure 14-4: Additional style changes to styles.htm—lower page .......................................... 14-11 Figure 15-1: FrontPage 2000 main user interface...................................................................... 15-4 Figure 15-2: FrontPage main toolbar......................................................................................... 15-5 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  17. 17. xvii Figure 15-3: Launching FrontPage 2000 ................................................................................... 15-6 Figure 15-4: New Web dialog.................................................................................................... 15-7 Figure 15-5: New Web default page.......................................................................................... 15-8 Figure 15-6: Folders View ......................................................................................................... 15-8 Figure 15-7: Home page viewed in Page View ......................................................................... 15-9 Figure 15-8: Page hierarchy in Navigation View .................................................................... 15-10 Figure 15-9: Adding pages in Navigation View ...................................................................... 15-11 Figure 15-10: Home page with new link ................................................................................. 15-11 Figure 15-11: Hyperlinks View ............................................................................................... 15-12 Figure 15-12: New Task dialog box ........................................................................................ 15-13 Figure 15-13: Tasks View........................................................................................................ 15-14 Figure 15-14: Reports View..................................................................................................... 15-15 Figure 15-15: Navigation View—vacations.htm..................................................................... 15-16 Figure 15-16: New link added to home page........................................................................... 15-17 Figure 15-17: Preview In Browser icon................................................................................... 15-18 Figure 15-18: Home page displayed in browser ...................................................................... 15-18 Figure 16-1: Multiple tables and nested tables .......................................................................... 16-3 Figure 16-2: Creating new Web for World Coins ..................................................................... 16-5 Figure 16-3: World Coins Web in Folders View....................................................................... 16-6 Figure 16-4: Tables example ..................................................................................................... 16-7 Figure 16-5: Tables toolbar........................................................................................................ 16-7 Figure 16-6: Insert Table by clicking and dragging................................................................... 16-8 Figure 16-7: Insert Table dialog box ......................................................................................... 16-8 Figure 16-8: Drawing main table border ................................................................................... 16-9 Figure 16-9: Drawing first row of table................................................................................... 16-10 Figure 16-10: Drawing second row of table ............................................................................ 16-10 Figure 16-11: Drawing table columns ..................................................................................... 16-11 Figure 16-12: New table inserted in large cell......................................................................... 16-12 Figure 16-13: Expanding new table within cell....................................................................... 16-13 Figure 16-14: Selecting table rows .......................................................................................... 16-13 Figure 16-15: Selecting Merge Cells ....................................................................................... 16-14 Figure 16-16: Creating 2-by-2 table ........................................................................................ 16-14 Figure 16-17: Saving newly created tables.............................................................................. 16-15 Figure 16-18: Insert Picture icon on main toolbar ................................................................... 16-15 Figure 16-19: Browse your computer to locate file ................................................................. 16-16 Figure 16-20: Selecting image file to insert............................................................................. 16-16 Figure 16-21: After inserting first image ................................................................................. 16-17 Figure 16-22: Inserting graphics.............................................................................................. 16-18 Figure 16-23: After inserting second and third images ........................................................... 16-18 Figure 16-24: Save Embedded Files dialog box with inserted images.................................... 16-19 Figure 16-25: Table Properties dialog box .............................................................................. 16-20 Figure 16-26: Table Properties after changing values ............................................................. 16-21 Figure 16-27: Tables expand to fill available space ................................................................ 16-22 Figure 16-28: Page Properties dialog box—General tab ......................................................... 16-23 Figure 16-29: Page Properties dialog box—Background tab .................................................. 16-24 Figure 16-30: Cell Properties dialog box................................................................................. 16-25 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  18. 18. xviii Figure 16-31: Home page after inserting cap.gif ..................................................................... 16-26 Figure 16-32: Modifying cell color.......................................................................................... 16-27 Figure 16-33: Choosing color for first cell .............................................................................. 16-28 Figure 16-34: Choosing color for second cell.......................................................................... 16-29 Figure 16-35: Choosing blue from Document Colors ............................................................. 16-30 Figure 16-36: Finished page with modified cells .................................................................... 16-30 Figure 16-37: Minimizing blue cells........................................................................................ 16-31 Figure 16-38: Blue showing at top of column ......................................................................... 16-31 Figure 16-39: Image toolbar in Page View.............................................................................. 16-32 Figure 16-40: Create Hyperlink dialog box ............................................................................. 16-33 Figure 16-41: Home page with image map hyperlinks............................................................ 16-34 Figure 16-42: Home page copy with modifications ................................................................ 16-35 Figure 16-43: Blue showing at top of column ......................................................................... 16-36 Figure 16-44: Save As Template dialog box ........................................................................... 16-36 Figure 16-45: Entering information in Save As Template dialog box..................................... 16-37 Figure 16-46: Coins page......................................................................................................... 16-38 Figure 16-47: Cursor turns into arrow ..................................................................................... 16-39 Figure 16-48: Dragging table with formatted text ................................................................... 16-40 Figure 16-49: Adding row to table........................................................................................... 16-41 Figure 16-50: Moving imported HTML content ..................................................................... 16-42 Figure 16-51: After moving imported content......................................................................... 16-43 Figure 16-52: Create Hyperlink button in main toolbar .......................................................... 16-43 Figure 16-53: Extending yellow row in table .......................................................................... 16-45 Figure 16-54: Home page after adding homeContentBottom.htm .......................................... 16-46 Figure 16-55: Merging cells in small table .............................................................................. 16-46 Figure 16-56: Home page after adding homeContentTop.htm................................................ 16-47 Figure 16-57: Shared Borders dialog box................................................................................ 16-47 Figure 16-58: Shared border added to bottom of page ............................................................ 16-48 Figure 16-59: Adding text to shared border............................................................................. 16-49 Figure 16-60: Choosing a Contents frameset type................................................................... 16-50 Figure 16-61: Creating hyperlink in frame .............................................................................. 16-51 Figure 16-62: Placing cursor above word Africa..................................................................... 16-52 Figure 16-63: Adding image.................................................................................................... 16-53 Figure 16-64: Home page loads into main frame .................................................................... 16-54 Figure 16-65: Icon button next to Target Frame section ......................................................... 16-55 Figure 16-66: Targeting the whole page.................................................................................. 16-55 Figure 16-67: Home page opens in entire browser window .................................................... 16-56 Figure 16-68: Page Options dialog box—Compatibility tab ................................................... 16-57 Figure 16-69: Extending yellow row in table .......................................................................... 16-58 Figure 16-70: Mints page after adding mintContentBottom.htm ............................................ 16-59 Figure 16-71: Merging cells..................................................................................................... 16-59 Figure 16-72: Mints page after adding mintContentTop.htm.................................................. 16-60 Figure 16-73: Style button ....................................................................................................... 16-60 Figure 16-74: Applying styles to HTML tags.......................................................................... 16-61 Figure 16-75: Modify Style dialog box ................................................................................... 16-61 Figure 16-76: Font selections................................................................................................... 16-62 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  19. 19. xix Figure 16-77: Style information generated by FrontPage........................................................ 16-63 Figure 16-78: Select Hyperlink dialog box.............................................................................. 16-64 Figure 16-79: Themes dialog box ............................................................................................ 16-66 Figure 17-1: FrontPage DHTML Effects toolbar ...................................................................... 17-3 Figure 17-2: Merging table cells................................................................................................ 17-4 Figure 17-3: After adding coinContentTop.htm ........................................................................ 17-4 Figure 17-4: Map with all images inserted ................................................................................ 17-6 Figure 17-5: After adding a-zFrameset.htm............................................................................... 17-7 Figure 17-6: Insert Rows or Columns dialog box...................................................................... 17-8 Figure 17-7: After adding graphics to about.htm....................................................................... 17-9 Figure 17-8: Finished form ...................................................................................................... 17-11 Figure 17-9: Text Box Properties dialog box for Name field.................................................. 17-11 Figure 17-10: Text Box Properties dialog box for E-mail field............................................... 17-12 Figure 17-11: Radio Button Properties dialog box for Experience buttons—Expert selection ......................................................................... 17-12 Figure 17-12: Radio Button Properties dialog box for Experience buttons—Amateur selection...................................................................... 17-12 Figure 17-13: Radio Button Properties dialog box for Experience buttons—Novice selection ........................................................................ 17-13 Figure 17-14: Scrolling Text Box Properties dialog box for Question field .......................... 17-13 Figure 17-15: Enabling FrontPage server extensions in Page Options dialog box ................. 17-14 Figure 17-16: Form Properties dialog box............................................................................... 17-15 Figure 17-17: Options for Saving Results of Form dialog box ............................................... 17-16 Figure 17-18: Adding confirmation page ................................................................................ 17-17 Figure 17-19: Page with formatting added .............................................................................. 17-18 Figure 17-20: Banner Ad Manager Properties dialog box....................................................... 17-19 Figure 17-21: Web reports—World Coins site summary ........................................................ 17-20 Figure 17-22: After merging cells............................................................................................ 17-22 Figure 17-23: Search Form Properties dialog box................................................................... 17-23 Figure 18-1: CIW Certification page created in first lesson ...................................................... 18-3 Figure 18-2: Site Definition for firstsite dialog box .................................................................. 18-4 Figure 18-3: Insert Image icon in Objects palette...................................................................... 18-5 Figure 18-4: Draw Layer icon in Objects palette....................................................................... 18-6 Figure 18-5: Page after adding images ...................................................................................... 18-7 Figure 18-6: Layer Properties palette ........................................................................................ 18-8 Figure 18-7: Page after adding layers ........................................................................................ 18-8 Figure 18-8: After adding all layers to page .............................................................................. 18-9 Figure 18-9: Finished page from first lesson ........................................................................... 18-10 Figure 18-10: Finished page in Dreamweaver with objects arranged in grid.......................... 18-11 Figure 18-11: Page with adjustments to layer sizes and colors ............................................... 18-12 Figure 18-12: Page view divided into table cells..................................................................... 18-13 Figure 19-1: World Coins home page layout............................................................................. 19-3 Figure 19-2: First three layers positioned on page..................................................................... 19-5 Figure 19-3: Positioning of fourth layer on page....................................................................... 19-5 Figure 19-4: Choosing blue background color .......................................................................... 19-6 Figure 19-5: Choosing yellow background color ...................................................................... 19-7 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  20. 20. xx Figure 19-6: Home page with first four layers and background colors ..................................... 19-8 Figure 19-7: Image Properties palette........................................................................................ 19-8 Figure 19-8: Hotspot palette ...................................................................................................... 19-9 Figure 19-9: Home page with image map and links ................................................................ 19-10 Figure 19-10: Saving home page as WC Web template .......................................................... 19-11 Figure 19-11: Body of document layer.................................................................................... 19-11 Figure 19-12: Layers Inspector................................................................................................ 19-12 Figure 19-13: Editor window with layers hidden .................................................................... 19-13 Figure 19-14: Inserting page header layer ............................................................................... 19-14 Figure 19-15: Home page with header layer inserted.............................................................. 19-15 Figure 19-16: Adding main content area layer ........................................................................ 19-16 Figure 19-17: Insert Table button in Objects palette ............................................................... 19-17 Figure 19-18: Expanding table to fill layout area .................................................................... 19-18 Figure 19-19: Finished page .................................................................................................... 19-19 Figure 19-20: Content placed in Mints page............................................................................ 19-21 Figure 19-21: Cells evenly distributed..................................................................................... 19-22 Figure 19-22: Bottom of Mints page with level borders and text............................................ 19-23 Figure 19-23: Bottom of History page with level borders and text ......................................... 19-24 Figure 19-24: Determining Word version for HTML cleaning ............................................... 19-25 Figure 19-25: HTML cleaning report ...................................................................................... 19-26 Figure 19-26: About page ........................................................................................................ 19-27 Figure 19-27: Changing menus from Common to Frames ...................................................... 19-28 Figure 19-28: Objects palette Frames menu ............................................................................ 19-29 Figure 19-29: Selecting left-side table of contents frame........................................................ 19-30 Figure 19-30: Creating frameset .............................................................................................. 19-31 Figure 20-1: Coins page with blank table .................................................................................. 20-4 Figure 20-2: Insert Rollover Image dialog box.......................................................................... 20-4 Figure 20-3: Changing Objects palette to Forms menu ............................................................. 20-6 Figure 20-4: Selecting Insert Form icon from Objects palette .................................................. 20-7 Figure 20-5: Red line indicating form area on page .................................................................. 20-7 Figure 20-6: Objects palette Forms menu selections................................................................. 20-8 Figure 20-7: Page with Name text box added............................................................................ 20-8 Figure 20-8: Page with additional form elements...................................................................... 20-9 Figure 20-9: Behaviors Inspector............................................................................................. 20-10 Figure 20-10: Naming image in Properties palette .................................................................. 20-11 Figure 20-11: Selecting Change Property in Behaviors Inspector........................................... 20-11 Figure 20-12: New properties in Change Property dialog box ................................................ 20-12 Figure 20-13: Behaviors Inspector with event and action listed.............................................. 20-12 Figure 20-14: Changing event to onMouseOver ..................................................................... 20-13 Figure 20-15: New values in Change Property dialog............................................................. 20-14 Figure 20-16: Behaviors Inspector with two events and actions listed ................................... 20-14 Figure 20-17: Changing event to onMouseOut ....................................................................... 20-15 Figure 20-18: Set Text of Layer dialog box............................................................................. 20-16 Figure 20-19: Selecting layer to allow dragging...................................................................... 20-18 Figure 20-20: Dragging image object into Library Inspector.................................................. 20-19 Figure 20-21: Dragging text object into Library Inspector...................................................... 20-20 © 2002 ProsoftTraining All Rights Reserved. Version 6.07
  21. 21. xxi Figure 20-22: Dragging image object from Library to page.................................................... 20-20 Figure 20-23: Dragging text object from Library to page ....................................................... 20-21 Figure 20-24: Editing HTML code manually in HTML Source editor ................................... 20-22 Figure 20-25: Insert Jump Menu dialog box............................................................................ 20-23 Figure OL20-1: Macromedia Dreamweaver Exchange home page ........................................ 20-30 Figure 21-1: HomeSite main screen .......................................................................................... 21-4 Figure 21-2: New Document window listing HomeSite templates ........................................... 21-5 Figure 21-3: Default template.................................................................................................... 21-6 Figure 21-4: Saving file as template .......................................................................................... 21-7 Figure 21-5: Local tab icon and resources display .................................................................... 21-8 Figure 21-6: New Document display window ........................................................................... 21-9 Figure 21-7: Default template.................................................................................................. 21-10 Figure 21-8: Save As Template dialog box ............................................................................. 21-11 Figure 21-9: Tag Chooser ........................................................................................................ 21-12 Figure 21-10: Tag Completion dialog box............................................................................... 21-13 Figure 21-11: Tag Chooser ...................................................................................................... 21-14 Figure 21-12: Image icon......................................................................................................... 21-15 Figure 22-1: Paint Shop Pro main display window ................................................................... 22-3 Figure 22-2: Image opened within Paint Shop Pro workspace.................................................. 22-5 Figure 22-3: New Image dialog box .......................................................................................... 22-6 Figure 22-4: Image Type pull-down menu ................................................................................ 22-7 Figure 22-5: Floating palettes in retracted state......................................................................... 22-8 Figure 22-6: Icon used to lock palette open............................................................................... 22-9 Figure 22-7: Open image file................................................................................................... 22-10 Figure 22-8: Copied image pasted onto page .......................................................................... 22-11 Figure 22-9: Text Entry dialog box ......................................................................................... 22-12 Figure 22-10: Image pull-down menu ..................................................................................... 22-13 Figure 22-11: Effect Browser .................................................................................................. 22-14 Figure 22-12: Decreasing the number of colors ...................................................................... 22-15 Figure 22-13: Ratio displayed in image title bar ..................................................................... 22-16 Figure 22-14: Image corrected to normal viewing .................................................................. 22-16 Figure 22-15: Moving Text Entry dialog box to see image..................................................... 22-17 Figure 22-16: Sampling color blue from CIW logo................................................................. 22-18 Figure 22-17: Positioning text ................................................................................................. 22-19 Figure 22-18: Moving Drop Shadow dialog box to see image................................................ 22-20 Figure 22-19: Sampling green color from CIW logo............................................................... 22-20 Figure 22-20: Changing Offset values..................................................................................... 22-21 Figure 22-21: Image with text and special effects added ........................................................ 22-21 Figure 22-22: Cropping tool .................................................................................................... 22-22 Figure 22-23: Selection tool for multiple shapes..................................................................... 22-22 Figure 22-24: Selection tool shape options.............................................................................. 22-22 Figure 22-25: Drawing crop area............................................................................................. 22-23 Figure 22-26: Changing new image properties........................................................................ 22-24 Figure 22-27: Three images open ............................................................................................ 22-25 Figure 22-28: Pasting first image as new layer........................................................................ 22-25 Figure 22-29: Pasting second image as new layer ................................................................... 22-26 © 2002 ProsoftTraining All Rights Reserved. Version 6.07

×