Table Of Content

4930-8 Cover_rb2.qxp 6/5/02 4:26 PM Page 1 PECK GGeett UUpp ttoo SSppeeeedd oonn DDrreeaammwweeaavveerr MMXX —— DREAMWEAVER® iinn aa WWeeeekkeenndd!! CD-ROM INCLUDES: The big day is Monday. The day you get to show off what you know 15 • Macromedia Flash MX about Dreamweaver MX. The problem is, you’re not really up to speed. MX, Dreamweaver, Maybe it’s been a while since you worked with Dreamweaver. Or maybe you Fireworks, and just like a challenge. In any event, we’ve got a solution for you — HOUR FreeHand trial Dreamweaver MX Weekend Crash Course. Open the book Friday evening and versions WEEKEND on Sunday afternoon, after completing 30 fast, focused sessions, you’ll be CRASH • Photoshop Elements WWEEEEKKEENNDD CCRRAASSHH CCOOUURRSSEE™ able to dive right in and start building a Dreamweaver Web site. It’s as COURSE tryout version from simple as that. Adobe Systems, Inc. The Curriculum WW • Paint Shop Pro evaluation version D FRIDAY SATURDAY, CONTINUED SUNDAY EE from JASC Software Evening: 4 Sessions, 2 Hours Afternoon: 6 Sessions,3Hours Morning: 6 Sessions, 3 Hours EER • Exploring Dreamweaver’s • Image Optimizer • Introducing • Editing HTML KK Production Tools E DreamweaverMX • Creating and Checking trial version from • Understanding Web EE • Getting Started Links A xat.com Graphics NN • Understanding • Generating JavaScript • Controlling Text with CSS Dreamweaver Site Rollovers M • TopStyle trial version Structure • Creating Forms • Pulling Your Site Together DD WENDY 15 from Bradbury • Creating a Document • Creating Library Items • Creating a Finished Page PECK W Software • Building Templates • Placing and Creating the CC Extras Author of Web Menus SATURDAY RR • Assessment software E with Beauty and Brains Morning: 6 Sessions, 3 Hours Evening: 4 Sessions, 2 Hours to help gauge your • Planning Site Navigation Afternoon: 4Sessions,2Hours AAA • Defining a Dreamweaver progress Site • Continuing to Build Site • Using Layers for Layout SS Navigation • Creating Motion with V HOURS • BSiutielding a Dreamweaver • Creating a Template for a DHTML HHE New Site • Working with Frames • Using Tables for Liquid Design • Preparing Library Items for • Increasing Productivity CCR • Enhancing Tables with the New Site 30 Sessions OO ® Macromedia Background Color and That Will Have Images M UU Flash MX • Adding Backgrounds, You Building Meta Tags and Links RR plus more X System Requirements: • Transferring Files ISBN 0-7645-4930-8 SS on CD-ROM Web Sites in PPoC wreurn nMiancgi nWtoinsdho rwusn n9i8n go rS ylastteerm; EE Only 15 Hours *85555-BAHHCe For more information ,!7IA7G4-fejdae!:P;m;o;t;T 8.6 or later. See the CD Appendix ™ on Wiley, go to for details and complete system requirements. www.wiley.com/compbooks $24.99 US Category: $37.99 CAN Web Development £18.99 UK incl. VAT 014930-8 FM.F 6/14/02 10:41 AM Page i Dreamweaver® MX Weekend Crash Course™ Wendy Peck Best-Selling Books • Digital Downloads • e-Books • Answer Networks • e-Newsletters • Branded Web Sites • e-Learning 014930-8 FM.F 6/14/02 10:41 AM Page ii Dreamweaver®MX Weekend Crash Course Published by Wiley Publishing, Inc. 909 Third Avenue New York, NY 10022 www.wiley.com Copyright ©2002 by Wiley Publishing, Inc., Indianapolis, Indiana. All rights reserved. LOC: 2002106042 ISBN: 0-7645-4930-8 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 1B/QT/QX/QS/IN Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 750-4744. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4447, E-Mail: [email protected]. LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY:WHILE THE PUBLISHER AND AUTHOR HAVE USED THEIR BEST EFFORTS IN PREPARING THIS BOOK, THEY MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS BOOK AND SPECIFICALLY DISCLAIM ANY IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES REPRESENTATIVES OR WRITTEN SALES MATERIALS. THE ADVICE AND STRATEGIES CON- TAINED HEREIN MAY NOT BE SUITABLE FOR YOUR SITUATION. YOU SHOULD CONSULT WITH A PROFESSIONAL WHERE APPROPRIATE. NEITHER THE PUBLISHER NOR AUTHOR SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER DAMAGES. For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993 or fax 317-572-4002. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Trademarks:Wiley, the Wiley Publishing logo and Weekend Crash Course are trademarks or registered trademarks of Wiley Publishing, Inc. in the United States and other countries and may not be used without written permission. Fireworks 4.0, Macromedia Flash MX and Dreamweaver MX Copyright ©1998-2000. Macromedia, Inc. 600 Townsend Street, San Francisco, CA 94103 USA. All Rights Reserved. Macromedia, Flash, Dreamweaver and Fireworks are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor men- tioned in this book. is a trademark of Wiley Publishing, Inc. 014930-8 FM.F 6/14/02 10:41 AM Page iii About the Author Wendy Peckjumped the fence from fashion design to professional graphic design in 1989. She began teaching computer graphics at the college level and for corporate clients in 1992. In 1997, after being on the Web for four years, she again changed her focus, turning her attention to Web design. Today, she divides her time between writing software books, including the popular Web Menus with Beauty and Brains(Hungry Minds, 2001) and articles on graphic design for WebReference.com (www.productiongraphics.com). She also writes for other publications, while reserving about half of her time for designing Web sites. Wendy lives with her rapidly shrinking family (kids leaving behind the teen years and moving out one by one) in Northwestern Ontario. She works from her home office, or increasingly, from the road, because she is an obsessive traveler. The middle-western and south-central United States is home to some of her favorite haunts. The first edition of this book was dedicated to my kids. Their influence on me has not changed. This book is for Shawnda, Danille, and Brian. My kids, my strength, my partners. 014930-8 FM.F 6/14/02 10:41 AM Page iv Credits Acquisitions Editor Graphics and Production Specialists Carol Sheehan Sean Decker, Melanie DesJardins, Laurie Petrone, Kristin McMullan, Project Editor Jackie Nicholas, Jeremy Unger Sara Shlaer Quality Control Technicians Technical Editor David Faust, Andy Hollandbeck, AngelPerez Danilo Celic Permissions Editor Macintosh Technical Editor Laura Moss Marc Garner Media Development Specialist Copy Editor Megan DeCraene Maarten Reilingh Proofreading and Indexing Project Coordinator TECHBOOKS Production Services Maridee Ennis 014930-8 FM.F 6/14/02 10:41 AM Page v Preface Welcome to Dreamweaver MX Weekend Crash Course. You can learn Dreamweaver in just one weekend. It may seem impossible to master a program as rich and powerful as Dreamweaver in such a short time, but you can. I have been using Dreamweaver for years and have discovered that most of Dreamweaver’s power falls into several key areas. Once you understand the big picture, the details fall right into place. With that in mind, I have designed this book with two levels. In the first section of the book, you create a simple Web site. This exercise allows you to learn the foundation techniques in a simple context. Then, when you are comfortable with the essential methods for creating reliable HTML code with Dreamweaver and have learned to avoid many of the pit- falls of Web design, you get to move forth and design a complex Web site. You’ll find your- self drawing on your new knowledge from the early sessions and adding many of Dreamweaver’s advanced features as you build a major site. This is not a book on HTML, JavaScript, or CGI, but I have not ignored the fact that Web pages are built with HTML and other code. You learn how to work with the Design view, which allows you to see the code Dreamweaver creates as you build your pages. At the same time, you learn how to make sure that the code you produce will display on most browsers. However software, or even code alone, does not build effective Web sites. You also learn to organize a site plan, ensuring that your visitors can easily navigate your site, and how to place external scripts. Finally, I provide field-tested methods for creating great pages in an efficient manner. I earn my living using Dreamweaver, so I know time counts. Dreamweaver MX includes features that were available only as part of Dreamweaver UltraDev in previous versions. However, there is much to learn in basic page and site prepa- ration, so there is no space in a weekend course to include the dynamic data capabilities that are now part of Dreamweaver MX. But everything that you learn in this book will serve you well when you decide to move to producing dynamically generated pages. Many enterprising graphic artists and programmers have built careers and businesses creating Web sites using Dreamweaver. Many employers now list Dreamweaver knowledge as a required skill. Some people use Dreamweaver to maintain their own business sites; others use it to build Web sites as a rewarding hobby. Whatever your goal, you are just one weekend away from mastering one of the most popular Web-site creation tools on the planet. Find an undisturbed space, put a “do not disturb” note on your door, and get ready to emerge Sunday evening with a valuable new skill. 014930-8 FM.F 6/14/02 10:41 AM Page vi vi Preface Who Should Read This Book This book is for beginner to intermediate Dreamweaver users. It is also perfect for those who understand the correct mouse moves to create a Web page in Dreamweaver, but do not feel that they understand the “why” behind much of what they do. In this book, you are never asked to blindly click—you always know why you are doing what you are doing. If you fall into any of the following categories, this book will help you reach your goals. (cid:2) Beginnerswho want to learn Web design. (cid:2) Intermediate Web developerswho want to fully understand Dreamweaver and enhance their site building skills. (cid:2) Individualswho are working in the field, but wish to (or must) add Dreamweaver skills to their list of qualifications. (cid:2) Back-end developerswho wish to (or must) add more page design skills to their list of qualifications. (cid:2) Print designerswho want to add Web design to their list of qualifications. How to Use This Book This book is a trip right through the center of the most important and well-used features in Dreamweaver. It is designed to be a complete course, providing all the information you require to boost your Dreamweaver skills to a very high level. You’ll get the most from this book if you complete every exercise. Some techniques may be very familiar to you, but there are so many tidbits of information, including the essential answer to why you would use a particular method, that the time spent completing any exercise will not be wasted. If you have experience with a technique, you can move very quickly through the steps. Each lesson builds on the exercises completed in the previous chapters, so skipping exercises may leave you without the prepared pages necessary to complete a later exercise. Probably the most important reason for completing each exercise is for later reference. The topics in the book are clearly marked and will be easy to locate a few months from now. Reviewing a technique in the book later will be much more effective when you can also open the document, study the code, and compare the exercise you did then to the project you are currently completing. Overview The concept of this book is simple. You design a simple Web site with four pages to start the process. All graphics are provided on the accompanying CD-ROM, so you can work quickly through building the pages. In the second part of the book, you build a Web site using liquid table design, templates, Library items, and three different types of menus. The site is enhanced with a Flash movie. In other words, by Sunday evening, you will have created a site containing features that are found in the largest sites on the Web. 014930-8 FM.F 6/14/02 10:41 AM Page vii Preface vii Friday Evening In the first four sessions, I introduce the Dreamweaver interface, and how Dreamweaver sites work. You create a document that includes text and graphics by the end of this part. Saturday Morning During these sessions, you work through the basics of page layout, tables, and moving your site to the Web. By the end of this part, you’ll have pages on the Web. Saturday Afternoon In this part you start to add interaction to your site. Links, image rollovers, and placing scripts are all part of these sessions. You also do some work with Dreamweaver’s templates and Library items to start automating your work. Saturday Evening You definitely move past the beginner level as you start your second site at the beginning of this part. Here, you plan the site, create the templates and discover the Library items you will use, and move on to prepare those templates and Library items for compiling the site on Sunday. Sunday Morning This part moves you right into the topics that separate the true Web developers from the “wannabes.” You’ll be creating complex menus and JavaScript rollovers, controlling text with CSS (Cascading Style Sheets), and using automated site maintenance tools by the end of these sessions. Sunday Afternoon Don’t think you’ll be winding down slowly at the end of the book, because you certainly do not want to miss the fun features included in these sessions. Learn to work with layers and move objects around your pages with Dreamweaver’s timelines. Create a page with frames. And see how you can apply your new knowledge in an efficient way as you focus on productivity at end the book. Appendixes These sections include the answers to your Part Review questions, a listing of what is on the CD-ROM, and information on using Dreamweaver with other software programs. 014930-8 FM.F 6/14/02 10:41 AM Page viii viii Preface Layout and Features The time symbols in the margin show you where you are in your lesson. You may wish to allow a few extra minutes for each session, rather than rushing past something you do not understand. I have also included “extra assignments” if you need or want more practice. Although I have carefully planned the time so that the work can be completed as promised, you should work at a pace that is best for you. This is a cross-platform book. Instructions for both Windows and Mac users appear in the text. For clarity in the instructions, I have used the standard PC command of OK as the standard acceptance command. Mac users please translate any OK command to Open for OS9 and Choose for OSX. Also scattered throughout the sessions are hints, tips, and relevant information about addendum topics and concerns. You’ll find these items illustrated with the margin symbols shown below. This symbol means that the accompanying information is important for broadening your awareness of Dreamweaver features, procedures, or perhaps Note Web development in general. This symbol adds information to the material you are studying, provides an alternate method, or a time-saving suggestion. Tip This symbol is your warning of common errors that you might make while working with a technique. Never This symbol indicates where you can find more information on the current subject elsewhere in the book. Cross-Ref You will require many files to complete the exercises in this book. This symbol advises you to copy certain files from the CD-ROM to your computer. CD-ROM Occasionally, this symbol refers you to more information on a subject con- tained in the Resources directory on the CD-ROM. The symbol ➪ indicates a menu path. For instance, if you see File ➪ Save, it means select the File menu, and then select Save. Ready, Set . . . One little weekend—such a small amount of time to invest for so much knowledge. Goget it!