Dreamweaver CS4. A Complete Training Package! Adobe. Full-color, step-by-step instructional book Video training from Adobe Certified Experts

Transcription

1 Adobe Dreamweaver CS4 A Complete Training Package! Full-color, step-by-step instructional book Video training from Adobe Certified Experts Tutorials and lesson files on companion DVD Jeremy Osborn & Aquent Creative Team

2

3 Adobe Dreamweaver CS4 Digital Classroom

4

5 Adobe Dreamweaver CS4 Digital Classroom Jeremy Osborn and Aquent Creative Team with Greg Heald, Jeff Ausura, and Fred Gerantabee

6 Adobe Dreamweaver CS4 Digital Classroom Published by Wiley Publishing, Inc Crosspoint Boulevard Indianapolis, IN Copyright 2009 by Wiley Publishing, Inc., Indianapolis, Indiana Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: Manufactured in the United States of America 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) , fax (978) Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., Crosspoint Blvd., Indianapolis, IN 46256, (317) , fax (317) , or online at Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read. 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) , outside the U.S. at (317) or fax (317) Please report any errors by sending a message to errata@aquent.com Library of Congress Control Number: Trademarks: Wiley and related trade dress are registered trademarks of Wiley Publishing, Inc., in the United States and other countries, and may not be used without written permission. The Aquent and AGI logos are trademarks of Aquent, LLC in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in this book. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

7 About the Authors Jeremy Osborn has more than 15 years of experience in web and graphic design, filmmaking, writing and publication development for both print and digital media. He serves as training director of Aquent Graphics Institute, and has contributed to several of the Adobe Classroom in a Book series for Adobe Press. Jeremy holds a MS in Management from the Marlboro College Graduate Center and a BFA in Film/TV from the Tisch School of the Arts at NYU. Greg Heald has 20 years of practical design and production experience in both Web and print environments. He has served as a contributing author or editor on a number of books on Dreamweaver, Flash, InDesign, and Acrobat. An Adobe Certified Expert, Greg has also contributed to the development of Adobe s certification exams. His 10 years of training experience have brought him to many of AGI s clients, including Verizon, L.L. Bean, and Reebok. Greg holds a degree in Advertising Design from the acclaimed College of Visual and Performing Arts at Syracuse University. Jeff Ausura is an artist and interactive designer, and an Adobe Certified Expert in Flash and Dreamweaver, and a contributing author to several books on these applications. When he s not working on Flash and ActionScript, he spends his time working with C# and Silverlight, creating immersive video players and virtual fish tanks to entertain his real-life orange cat. He holds a BA in fine art from Bennington College. Fred Gerantabee is an Emmy award winning interactive designer, web developer and author based in New York City, and serves as training manager for Aquent Graphics Institute. Prior to joining Aquent, Fred was an interactive producer with ABC/Disney Interactive, working on ITV applications for hit shows such as Extreme Makeover: Home Edition, the Academy Awards and Toon Disney s JETIX Cards Live. Fred is the author of books on Flash and Dreamweaver, and co-author of the Creative Suite 4 Web Premium for Dummies with AGI s Jennifer Smith, also published by Wiley. Fred is an Adobe Certified Instructor and holds Adobe Certified Expert status in Flash, Dreamweaver, Flash Lite, and Contribute. Aquent Creative Team is composed of Adobe Certified Experts and Adobe Certified Instructors from Aquent Graphics Institute (AGI). The Aquent Creative Team has authored many of Adobe s official training guides, and works with many of the world s most prominent companies, helping them to use creative software to communicate more effectively and creatively. They work with marketing, creative, and communications teams around the world, and teach regularly scheduled classes at AGI s locations. More information at agitraining.com.

8 Acknowledgments Thanks to Web Czar Fred Gerantabee for providing guidance along with much of the foundation for this book and for looking dashing in an orange pirate shirt. A special thanks and shout-out to our many friends at Adobe Systems, Inc. who made this book possible and assisted with questions and feedback during the writing process. To the many clients of AGI who have helped us better understand how they use Dreamweaver and provided us with many of the tips and suggestions found in this book. And thanks to the instructional team at AGI for their input and assistance in the review process and for making this book such a team effort. Thanks to istockphoto and these exclusive istockphoto.com photographers: Lesson 3: Beets.jpg by seanrmcdermid; Cucumber.jpg by kryczka; Eggplants.jpg by imagestock; and Belgian chocolate by bloodstone. Lesson 5: veggies.jpg by JPecha. Lesson 12: greenleaf.jpg by portishead1.

9 Credits Additional Writing Greg Heald, Jeff Ausura, Fred Gerantabee, Series Editor Christopher Smith Senior Acquisitions Editor Jody Lefevere Technical Editors Cathy Auclair, Larry Happy, Sean McKnight, Haziel Olivera, Eric Rowse Editor Marylouise Wiack Editorial Manager Robyn Siesky Business Manager Amy Knies Senior Marketing Manager Sandy Smith Vice President and Executive Group Publisher Richard Swadley Vice President and Publisher Barry Pruett Project Coordinator Lynsey Stanford Graphics and Production Specialist Lauren Mickol Media Development Project Supervisor Jeremy Osborn Proofreading Jay Donahue Indexing Broccoli Information Management Stock Photography istockphoto.com

10

11 Contents Starting Up About Dreamweaver Digital Classroom Prerequisites System requirements Starting Adobe Dreamweaver CS Resetting the Dreamweaver workspace Loading lesson files Working with the video tutorials Setting up for viewing the video tutorials Viewing the video tutorials with the Adobe Flash Player Additional resources Lesson 1: Dreamweaver CS4 Jumpstart Starting up What is Dreamweaver? Design and layout tools Site management and File Transfer Protocol Coding environment and text editor Who uses Dreamweaver? What s new in Dreamweaver CS4? New user interface Live View Related files Code Navigator CSS improvements HTML data sets Photoshop smart objects Other new features Adobe AIR authoring support Subversion An overview of features How web sites work A simple flow chart Domain names and IP addresses Table of Contents IX

12 Contents Servers and web hosts The role of web browsers An introduction to HTML Tag structure and attributes The structure of an HTML document Placing images in HTML Colors in HTML Case sensitivity and whitespace rules Tag hierarchy XHTML 1.0 Transitional What s the difference? Explorations in code A look at the Welcome Screen Creating, opening, and saving documents Creating new documents Self study Review Lesson 2: Setting Up a New Site Starting up Creating a new site Advanced site-creation options Adding pages Saving a page to your site Defining page properties Work views A look at the Files panel Viewing local files Selecting and editing files Files panel options Changing the Files panel view Self study Review X Adobe Dreamweaver CS4 Digital Classroom

13 Contents Lesson 3: Adding Text and Images Starting up Typography and images on the web Adding text An introduction to styles Previewing pages in a web browser Understanding hyperlinks Creating hyperlinks Relative versus absolute hyperlinks Linking to an address Creating lists Using the Text Insert panel Inserting images Image resolution Image formats Creating a simple gallery page Linking images Using image placeholders Editing images Adjusting brightness and contrast Resizing images Updating images Self study Review Lesson 4: Styling Your Pages with CSS Starting up What are Cascading Style Sheets? A little bit of ancient history: when <font> tags roamed the Earth The dawn of CSS How do you create CSS rules in Dreamweaver? Understanding Style Sheets Understanding why they re called Cascading Creating and modifying styles Creating a class style with the Property Inspector Table of Contents XI

14 Contents Creating and modifying styles in the CSS Styles panel Advanced text formatting with CSS Fine-tuning page appearance with contextual and pseudo-class selectors Div tags and CSS IDs Internal versus external style sheets Attaching an external style sheet to your page Modifying attached style sheets Creating a new.css file (external style sheet) Self study Adobe Device Central Review Lesson 5: Creating Page Layouts with CSS Starting up The CSS Box model The basics of CSS margins, padding, and borders Reviewing the <div> element Reviewing the ID selector Positioning content with AP Divs Creating your first boxes with Draw AP Div Centering your page with relative positioning Making layouts cross-browser compatible Adding columns and headers to a layout Absolute versus relative positioning Adding a global navigation Box overlap and z-index Reordering <div> elements Adding additional content and styles Setting margins, padding, and borders Overriding default margins in CSS Futureproofing your layout Moving the internal styles Self study Review XII Adobe Dreamweaver CS4 Digital Classroom

15 Contents Lesson 6: Working with Tables Starting up Using tables in web design Importing table data Selecting table elements Modifying table size Modifying table structure Creating a table Formatting and styling tables in HTML Formatting and styling tables with CSS Advanced CSS styling of tables Controlling cell alignment, padding, and borders with CSS Creating alternate row styling with CSS Reusing CSS for other tables Data sorting tables Self study Review Lesson 7: Fine-Tuning Your Workflow Starting up Customizing panels and panel groups Using the Favorites tab on the Insert bar Resizing the document window Using guides Using grids The tag selector Switching between tabs and cascading documents Zooming Self study Review Table of Contents XIII