Introduction to Adobe Dreamweaver CS6 with ACA Certification

564 Pages·2012·123.24 MB·English

by  AGI Creative Team

introduction to
Adobe® Dreamweaver® CS6
Complete Coverage of the Adobe® Certified Associate Exam:
Web Communication using Adobe® Dreamweaver® CS6
AUTHOR Jeremy Osborn
PROJECT MANAGER Cheri White
VIDEO PRODUCTION Chris Leavey
VP & PUBLISHER Don Fowley
EDITOR Bryan Gambrel
DIRECTOR OF SALES Mitchell Beaton
EXECUTIVE MARKETING MANAGER Chris Ruel
ASSISTANT MARKETING MANAGER Debbie Martin
EDITORIAL PROGRAM ASSISTANT Jennifer Lartz
SENIOR PRODUCTION MANAGER Janis Soo
ASSOCIATE PRODUCTION MANAGER Joel Balbin
CREATIVE DIRECTOR Harry Nolan
COVER DESIGNER Georgina Smith
TECHNOLOGY & MEDIA Tom Kulesa, Wendy Ashenberg
TECHNICAL EDITORS Cathy Auclair, Haziel Olivera,
Greg Heald
ART DIRECTOR Jennifer Smith
This book was set in Bembo by Spoke & Wheel with production and development services provided by American
Graphics Institute. It was printed and bound by Courier Kendallville. The covers were printed by Lehigh Phoenix.
Copyright © 2012 by John Wiley & Sons, Inc. All rights reserved.
Cover photo: © Manchan/DigitalVision/Getty Images
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, Inc. 222 Rosewood Drive,
Danvers, MA 01923, [phone], fax [phone]. Requests to the Publisher for permission should be addressed
to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, [phone],
fax [phone].
Adobe Acrobat, Adobe Creative Suite, Adobe Dreamweaver, Adobe Flash Professional, Adobe InDesign, Adobe
Photoshop, and Adobe Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the
United States and/or other countries. Adobe product screenshot(s) reprinted with permission from Adobe Systems
Incorporated. The Apple Logo is a registered trademark of Apple Inc. registered in the U.S. and other countries.
Android is a trademark of Google Inc. The Android robot is reproduced or modified from work created and shared by
Google and used according to terms described in the Creative Commons 3.0 Attribution License. Other product and
company names mentioned herein may be the trademarks of their respective owners.
The example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events
depicted herein are fictitious. No association with any real company, organization, product, domain name, e-mail
address, logo, person, place, or event is intended or should be inferred.
The book expresses the author’s views and opinions. The information contained in this book is provided without any
express, statutory, or implied warranties. Neither the authors, John Wiley & Sons, Inc., nor their resellers or distributors
will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book.
Founded in 1807, John Wiley & Sons, Inc. has been a valued source of knowledge and understanding for more than
200 years, helping people around the world meet their needs and fulfill their aspirations. Our company is built on a
foundation of principles that include responsibility to the communities we serve and where we live and work. In 2008,
we launched a Corporate Citizenship Initiative, a global effort to address the environmental, social, economic, and
ethical challenges we face in our business. Among the issues we are addressing are carbon impact, paper specifications
and procurement, ethical conduct within our business and among our vendors, and community and charitable support.
For more information, please visit our website: www.wiley.com/go/citizenship.
ISBN 978-1-118-39406-9
Printed in the United States of America
10 9 8 7 6 5 4 3 2 1
Preface
Welcome to Introduction to Adobe Dreamweaver CS6. Part of Wiley’s Adobe courseware series,
this book is designed as a complete introduction to Adobe Dreamweaver for Creative Suite
6. With this series, we’ve set out to produce a series of textbooks that deliver compelling
and innovative teaching solutions to instructors and superior learning experiences for
students. Infused and informed by in-depth knowledge from Adobe Certified Experts and
Dreamweaver professionals who have created many official training titles for Adobe Systems,
and crafted by a publisher known worldwide for the pedagogical quality of its products, these
textbooks maximize skills transfer in minimum time. Students are challenged to reach their
potential by using their new technical skills as highly productive members of the workforce.
This courseware was designed to ensure you receive the topical coverage that is most relevant
to your personal and professional success.
Wiley’s Adobe courseware Program
Wiley’s Adobe courseware series is a complete program for instructors and institutions to
prepare and deliver great courses on Adobe software technologies. With this courseware series,
we recognize that—because of the rapid pace of change in the technology and curriculum
developed by Adobe—there is an ongoing set of needs beyond classroom instruction tools
for an instructor to be ready to teach the course. This courseware program endeavors to
provide solutions for all these needs in a systematic manner in order to ensure a successful and
rewarding course experience for both instructor and student via technical and curriculum
training for instructor readiness with new software releases and a great set of tools for
delivering instruction in the classroom and lab. All are important to the smooth delivery of a
course on Adobe software, and all are provided with Wiley’s Adobe courseware program. We
think about this model as a gauge for ensuring that we completely support you in your goal of
teaching a great course.
VIDEO TUTORIALS
Your Introduction to Adobe Dreamweaver CS6 textbook comes with access to approximately
2 hours of online video tutorials. The video tutorials are designed to supplement each lesson
in the book. These video tutorials are created and presented by the authors and demonstrate
topics covered in each lesson or related topics that enhance your understanding of each lesson.
iii

Illustrated Book Tour
Pedagogical Features
The Wiley Adobe courseware and textbooks for Adobe Creative Suite 6 are designed as
complete introductory textbooks on a particular Adobe software product. The books are
also designed to cover all the learning objectives for that product’s related Adobe Certified
Associate (ACA) exam. The ACA exam is industry-recognized and identifies skills and topics
expected for entry-level positions. Each ACA exam item is referred to as an exam objective,
and these objectives are highlighted throughout the textbooks. Many pedagogical features have
been developed specifically for this courseware. Unique features of our task-based approach
include a Lesson Skill Matrix that correlates skills taught in each lesson to the ACA objectives;
Certification Ready exercises; and two levels of increasingly rigorous lesson-ending activities—
Competency Assessment and Proficiency Assessment.
Presenting the extensive procedural information and technical concepts woven throughout
the textbook raises challenges for the student and instructor alike. The Illustrated Book Tour
that follows provides a guide to the rich features contributing to Wiley’s Adobe courseware
pedagogical plan. Following is a list of key features in each lesson designed to prepare students
for success on the certification exams and in the workplace:
• Each lesson begins with a Lesson Skill Matrix. More than a standard list of learning
objectives, the skill matrix correlates each software skill covered in the lesson to the
specific ACA exam objective.
• Each lesson features a real-world Business Case scenario that places the software skills
and knowledge to be acquired in a real-world setting.
• Concise and frequent Step-by-Step instructions teach students new features and provide
an opportunity for hands-on practice. Numbered steps give detailed instructions to help
students learn software skills. The steps also show results and screen images to match what
students should see on their computer screens.
• Illustrations provide visual feedback as students work through the exercises. The images
reinforce key concepts, provide visual clues about the steps, and allow students to check
their progress.
• When the text instructs a student to use a particular tool, tool images are shown within
the text.
• Important technical vocabulary is listed in the Key Terms section at the beginning of the
lesson. When these terms are used later in the lesson, they appear in bold italic type and
are defined. The Glossary contains all of the key terms and their definitions.
• Engaging point-of-use Reader Aids located throughout the lessons tell students why
this topic is relevant (The Bottom Line) and provide students with helpful hints (identified
with the words Take Note) or ways to expand their skills (identified using the text Learning
More). Reader aids also provide additional relevant or background information that adds
value to the lesson.
• Certification Ready features throughout the text signal students where a specific
certification objective is covered. They provide students with a chance to check their
understanding of that particular ACA exam objective and, if necessary, review the section
of the lesson where it is covered. This courseware provides complete preparation for ACA
certification.
• Each lesson ends with a Skill Summary, recapping the ACA exam skills covered in
v
Illustrated Book Tour

the lesson.
• Accompanying video tutorials for each lesson provide a visual way to see selected
content from the each lesson presented by the authors.
• The Knowledge Assessment section provides a total of 20 questions from a mix of
True/False and Multiple Choice, testing students on concepts learned in the lesson.
• Competency Assessment and Proficiency Assessment sections provide progressively
more challenging lesson-ending activities.
• Integrated Circling Back projects provide students with an opportunity to renew and
practice skills learned in previous lessons.
• The student companion website contains the online files needed for each lesson.
vi Introduction to Adobe Dreamweaver CS6 using ACA Certification
Illustrated Book Tour
Lesson 3
Adding Text and
Images
Key Terms
• Absolute • Lists Key Terms
Hyperlink • Preview in
• Cascading Style Browser
Sheets (CSS) • Property Inspector
• Hypertext Markup • Relative Hyperlink
Language (HTML) • Selector
• Image Formats • Split View
• Image Resolution • Syntax
Skill Objective Lesson Skill Matrix
Demonstrate knowledge of standard copyright rules (related terms, obtaining 1.3
permission, and citing copyrighted material)
Demonstrate knowledge of website accessibility standards that address the needs of 1.4
people with visual and motor impairments
Identify basic principles of website usability, readability, and accessibility 2.4
Use the Property Inspector 3.3
Use the Assets panel 3.4
Demonstrate knowledge of how to add text to an HTML page 4.4
Insert images and apply alternative text on a web page 4.5
Link web content, using hyperlinks, e-mail links, and named anchors 4.6
Build image maps 4.10
Import and display a Microsoft Word or Microsoft Excel document to a web page 4.12
Modify text and text properties 5.3
Modify images and image properties 5.4
Conduct technical tests 6.1
Manage assets, links, and files for a site 6.4
Business Case
Business Case The company owners are in a hurry to get the website started. They have provided
you with sample text content and images to add to the site. They’d like the text to
be formatted in a uniform way across the site. The company has specifi c colors and
fonts the owners would like used for the type, but want to make sure headers and
body copy are distinct from one another. Some of the tools you’ll need to understand
to make an effi cient workfl ow for these requirements will include CSS and image
placeholders.
Lesson 3: Adding Text and Images 67
Lesson 2
A deeper look into the Files panel
Renaming and updating links in the Files panel
The Files panel can perform tasks within Dreamweaver that are typically done within your
operating system such as renaming and deleting fi les. Not only does this save time but has
other advantages as well. In the case of renaming fi les, Dreamweaver will automatically allow
you to update any links on the page including images.
Step-by-Step
Follow these steps to update links Step-by-Step
1. In the Files panel, expand the images folder if necessary by clicking on the arrow (Mac) or
plus sign (PC) immediately to the left of the folder icon.
2. Click once on the fi le name beets.jpg and it will become active signifying that you can
rename the fi le name. Type bunchofbeets and then press Return/Enter. The Update
Files window appears asking if you would like to update index.html.
3. Press Update. Nothing will have appeared to change, which is exactly the point. If
you had renamed this graphic in your operating system,, there would have been a
broken image on your page because the original reference to beets.jpg would be wrong.
Dreamweaver recognizes the potential error and prompts you to fi x it by updating the
link. Behind the scenes in your HTML, Dreamweaver has rewritten the correct code for
you. This is a major advantage in using Dreamweaver as it makes it diffi cult for you to
accidently break links to assets in your site. Certification Certification Ready
4. You can also duplicate and/or delete fi les within the Files panel. Select the Ready 6.4
bunchofbeets.jpg image in the Files panel and then click on the context menu in the top How do you delete
rthigeh fit loef nthame pe ains eald adnedd ctoh oyoosuer E Fdiilte s> p Danuepl.licate. A duplicate image with the word copy in fip laense ul?sing the Files
5. DSeelelectt et hkee yd uopnl iycoatuer ikmeaygbeo ayrodu. Yjuostu cwreiallt ebde (pbruonmcphtoedf bbeye Dtsr e-a Cmowpeya.vjeprg a)s aknindg p irfe ysso tuh we ant CReeratdifyi c6a.t4ion
to delete the selected fi les. Press yes and the fi le will be gone. Hfi loews a dnod y uopud raetnea lminkes
6. Choose File > Save All. Congratulations! You have fi nished this lesson. using the Files panel?
Lesson 2: Setting Up a New Site 61
vii
Illustrated Book Tour

Lesson 14
The Spry Accordion panel
6. Repeat step 5 for the labels 2, 3, and 4, renaming them Clothing, Home Products, and
Lifestyle, respectively. Next, you’ll add content to each panel that corresponds to its label.
7. In your Files panel, locate the text folder and expand it. Double-click and open the fi le
named accordiontext.html. This contains the text you’ll add to the accordion panel.
8. Select the text below the Food Products heading (don’t include the heading itself), and
Illustrations choose Edit > Cut. Return back to your index_work.html page.
9. Click the blue tab labeled Spry Accordion: Accordion 1 to ensure it is selected; then, in the
Properties panel, click the Food Products panel to open it (Figure 14-20).
Figure 14-20: Open the Food Products panel by clicking it in the Properties panel.
Highlight the placeholder text on your page, and then choose Edit > Paste to paste it in
the text from your content fi le.
10. Repeat steps 8 and 9 for the remaining paragraphs in the accordiontext.html fi le, pasting
Lesson 12 them into the Clothing, Home Products, and Lifestyle panels, respectively.
Working in the Code view Aloso kw iatnhd t hfeee lo othf eyro Suprr syit We.idgets, the default style will need to be changed to match the
5. Choose View > Code. You will now look at some of the coding features available in the 11. Under the CSS Styles panel, locate the attached style sheet named SpryAccordion.css,
coding toolbar in Dreamweaver. and expand it to reveal its rules.
The Coding toolbar 12. Stheele ccot ltohre s w.Aactccho randdi onnoPtiacen ethlaTta ybo urur lceu. rTsoo rt hise a rni gehyte odfr othpep ebra. cPklgacroe utnhde ecyoelodrr opproppere ritny ,t hceli ck
The Coding toolbar contains buttons that let you perform many standard coding operations, green area immediately above the accordion, and click once to sample the green color from
such as collapsing and expanding code selections, highlighting invalid code, applying and the header (Figure 14-21). This sets the background color to #88B036 (green).
removing comments, indenting code, and inserting recently used code snippets. The Coding
toolbar is visible only in the Code view and appears vertically on the left side of the document
window. To see what each button does, position the cursor over it until a tooltip appears.
Icon Tool Name Use
Open Documents Lists the documents that are open. When you select a document,
it is displayed in the document window.
Show Code Navigator Displays a list of code sources related to a particular selection
oasn i ynoteurrn paal gane.d U esxet eitr tnoa ln CaSvSig rautlee tso, s reerlvaeter-ds icdoed ien cslouudrecse,s e, xsutecrhn al Figure 14-21: Using the eyedropper, sample the green from the header to apply it as a background-color.
JsCaoovudareSc,ec ar finipldet sfS.i plYelosit,u vp ciaearwne nsa,t ca ctsee mwssep tllhla aetse C fforioldemes, Ntlihbaevr aiCgroyad tfoielre Ifsnr,so apmned cD tioefrsra.igmne, 13. b(SMeacleakccgt  rOtohSue)n .. dTA-hccoicslo osrer tdvsi atlohunee P oaapnneden tl ypOpapnee e#nl C co.FlAo9cr, ctthooe rand lipigorhenstP sg aErneneetnelr,T (aWb irnudleo.w Cs)l iocrk Rone ttuhren
Collapse Full Tag Cm(foourlls aetp xpaslemasc pethl eteh, etch oienn scteeornnttito ebnne tpt wboeeintewtn ie nae tsnhe e<t obofpo oedpnyein>ng ian ongrd ac n<lod/s bicnloogds tiayng>g )at. anYgdos u 14. SPerolepcet rtthiees .liAsct,c aonrdd cihoannPgaen ietsl vCaolunet efrnotm r u2l0e0. pLxo ctoa t1e 0t0hpe xh.e Tighhits pcrhoapnegretys tshheo wheni gihnt tohfe the
then click to collapse it. content panels when shown.
Collapse Selection Collapses the selected code. There are a few more styles to change before you are done styling the accordion. One of
the default styles for this widget is a Focused style which defi nes the appearance of the
Expand All Restores all collapsed code. accordion when it is selected. By default, it is blue (although you cannot see this unless you
Select Parent Tag Selects the content and surrounding opening and closing preview in a browser), so you will change this now.
tags of the line in which you’ve placed the insertion point. If
you repeatedly click this button, and your tags are balanced,
D</rehatmmwle>a vtaegr sw.ill eventually select the outermost <html> and Lesson 14: Adding Interactivity with the Spry Framework 401
Balance Braces Selects the content and surrounding parentheses, braces, or
square brackets of the line in which you’ve placed the insertion
point. If you repeatedly click this button, and your surrounding
symbols are balanced, Dreamweaver will eventually select the
outermost braces, parentheses, or brackets in the document.
Line Numbers Hides or shows numbers at the beginning of each line of code.
Highlight Invalid Code Highlights invalid code in yellow. Software Orientations
Word Wrap Changes the Word Wrap from Soft Wrap to Hard Wrap (or vice-
versa)
Syntax Error Alerts in Enables or disables an information bar at the top of the page
Info Bar that alerts you to syntax errors. When Dreamweaver detects a
syntax error, the Syntax Error Information bar specifies the line
in the code where the error occurs. Additionally, Dreamweaver
highlights the error’s line number on the left side of the
document in Code view. The info bar is enabled by default, but
only appears when Dreamweaver detects syntax errors in the
page.
342 Introduction to Adobe Dreamweaver CS6 with ACA Certifi cation
Lesson 3
Understanding hyperlinks
3. Press the Live button located in the Document toolbar at the top of your page as seen in
Figure 3-9. You will not see a dramatic diff erence, but your text may shift slightly. Select
the fi rst heading in the window and try to delete it; you will be unable to, because Live
View is a non-editable workspace. However, Live View does allow you to edit your page
when you are in Split view. Here, you are allowed to edit in the Code view and changes
will be refl ected in real time. An additional advantage is that your document does not have
to be saved in order to see the changes.
Figure 3-9: When Live View is enabled, Dreamweaver simulates a web browser.
Certification
4. Click the Live button again to deactivate this view. While Live View is a useful addition to Ready 6.1
Dmrigeahmt bwee raevnedr,e irte ddo deisff neoretn rtelpy ldaceep ethned innege do nt oy opurerv vieiswit oyro’su br rpoawgsee rin, aan bdr soow iste irs. aW geobo dp ahgaebs it Ha owweb d po aygoeu i pn rae view
to check your page occasionally as you make changes to your design. browser?
Take Note Take Note...
You can also preview your page designs in other browsers and for diff erent platforms using
Adobe’s Browser Lab service. We cover the steps for this in Lesson 16,” Managing your
Website: Reports, Optimization, and Maintenance.”
Understanding hyperlinks
When people visit a website, they usually expect to see more than one page. Imagine trying
to shop for a new book by your favorite author on a site that consisted of nothing more than
a single order form with every book off ered by a retailer like Amazon.com. This might seem
absurd, but without hyperlinks you wouldn’t have much choice.
Hyperlinks make the Web a truly interactive environment. They allow the user to freely
navigate throughout a website, or jump from one site to another. There are a number of ways
to create links in Dreamweaver, but before you get started, you should be aware of some
fundamental facts.
Links rely on directory paths to locate fi les. A directory path is simply a description of a fi le’s
location that can be understood by a computer. A classic, real-world example is an address. If
you wanted to send a letter to your friend Sally in Florida, you would have to specify the state,
city, street, and house number where Sally can be found. If Sally lived at 123 Palm Street in
Orlando, the path would be:
Florida/Orlando/123 Palm Street/Sally
Lesson 3: Adding Text and Images 83
viii Introduction to Adobe Dreamweaver CS6 using ACA Certification