Wile Adobe Creative 5 suite Design Premium aio for dummies phần 7 pot

566
Managing Comments
✦ Status, such as accepted or rejected
✦ Checked State, which can be checked or unchecked
Use these filtering options to view only those comments that are relevant
to you.
Sharing comments
You can share your comments with other reviewers who have access to the
same PDF document by following these steps:
1. Make sure that the Comments List is visible by clicking the Comments
tab on the bottom left of the Document window.
2. Select the comment that you want to export by clicking it (Shift+click
for multiple selections).
3. From the Comments List window, choose Options➪Export Selected
Comments.
The Export Comments dialog box appears.
4. Browse to the location where you want the comments to be saved and
give the saved file a new name.
You now have a file that includes only the comments’ information, and
not the entire PDF file.
You can share your file with reviewers who have the same PDF file, and they
can choose Options➪Import Comments in the Comments List window to add
the comments into their document. You can use this method to avoid send-
ing entire PDF files to those who already have the document.
Summarizing comments
You can compile a list of all the comments from a PDF file into a new, sepa-
rate document. To summarize comments, follow these steps:
1. From the Comments List window, choose Options➪Summarize
Comments.
The Summarize Options dialog box appears.
2. Create a listing of the comments with lines connecting them to their

locations on the page by selecting the radio button from the top —
Document and Connector Lines on a Single Page.
In the Include section, you can choose which comments should be
summarized.
53_607466-bk05ch05.indd 56653_607466-bk05ch05.indd 566 5/25/10 8:54 AM5/25/10 8:54 AM
Book V
Chapter 5
Using Commenting
and Annotation
Tools
567
Managing Comments
3. Click the Create PDF Comment Summary button.
This step creates a new PDF document that simply lists all the com-
ments, as shown in Figure 5-3.

Figure 5-3:
A new PDF
document
is created,
listing all the
comments.

Enabling commenting in Adobe Reader
Acrobat 9.0 Professional makes it easy to include users of the free Adobe
Reader in a review process. To include Adobe Reader users in a review,
choose Comments➪Enable for Commenting in Adobe Reader. After saving
the file, you can share it with users of Adobe Reader, who can then use com-
menting and markup tools and save their comments into the file. A user of
Adobe Acrobat 9.0 Professional must enable commenting in a PDF file before

users of Adobe Reader can add comments to a file.
53_607466-bk05ch05.indd 56753_607466-bk05ch05.indd 567 5/25/10 8:54 AM5/25/10 8:54 AM
568
Book V: Acrobat 9.0
53_607466-bk05ch05.indd 56853_607466-bk05ch05.indd 568 5/25/10 8:54 AM5/25/10 8:54 AM
Chapter 6: Securing Your PDF Files
In This Chapter
✓ Finding out about security in Acrobat
✓ Using passwords
✓ Setting limits for editing and printing
Y
ou may think that because you’ve converted your documents to PDF
(Portable Document Format) that they’re secure. This isn’t quite true
because Adobe Acrobat includes tools for changing text and images, as well
as extracting them for use in other files. For example, you can use the Select
tool (see Chapter 4 of this minibook) to select and copy a passage of text or
the Select Object tool to copy or edit graphics.
Applying security provides you with control over who can view, edit, or
print the PDF documents you distribute. You can restrict access to certain
features, which deters most users from manipulating your files. All Adobe
applications recognize and honor security settings applied in Acrobat, but
some software ignores Adobe’s security settings or can bypass them all
together. For this reason, we recommend that you share your most sensitive
PDF documents only when you’ve applied security protection. This way, the
only users who can open a file are those who know the password or have
the correct certificate, depending upon the type of security applied to the
file.
In this chapter, we discuss using security protection to limit access to PDF
files and show you how to limit what users can do to the contents of your
PDF documents.

Understanding Password Security
By requiring users to enter a password to open and view your PDF files, you
limit access to those files so that only certain users can view them. You can
also apply security to limit access to certain Acrobat and Adobe Reader fea-
tures, such as copying text or graphics, editing the file, and printing. Adobe
calls this type of security password security because it requires a password
to either open the document or to change the security that’s been applied
to the document.
54_607466-bk05ch06.indd 56954_607466-bk05ch06.indd 569 5/24/10 10:29 PM5/24/10 10:29 PM
570
Understanding Password Security
Apply security options to limit the opening or editing of your PDF document,
restricting these capabilities to users who have been provided the proper
password. This is done by clicking the Secure button on the Tasks toolbar. If
the Secure button isn’t visible, choose View➪Toolbars➪Tasks.
Click and hold down the Secure button in the Tasks toolbar and choose 2
Encrypt with Password to bring up the Password Security - Settings
dialog box.
In the Password Security - Settings dialog box, choose an Acrobat version
from the Compatibility drop-down list. The higher the version of Acrobat,
the greater the level of security.
Your choice here is based on your needs for security and also the version
of Acrobat or Adobe Reader that your audience uses. Lower versions of
Acrobat provide more compatibility with the widest number of viewers, as
they support much older versions of the free Adobe Reader. In the following
list, we explain the compatibility choices before showing you how to enable
security in the following sections:
✦ Acrobat 3 and Later: If the users who receive your PDF files may have
older versions of the software, you can choose Acrobat 3 and Later from
the Compatibility drop-down list to ensure that the recipients can view

the PDF file you’re securing. This option provides compatibility for users
who may not have updated their software in many years, but the level
of security is limited to 40-bit encryption. Although this amount keeps
the average user from gaining access to your files, it won’t deter a deter-
mined hacker from accessing them and can be easily circumvented by a
sophisticated user.
✦ Acrobat 5 and Later: When sharing files with users who have access
to Adobe Reader or Adobe Acrobat Version 5 or 6, this option provides
expanded security, increasing the security level to 128-bit, which makes
the resulting PDF files more difficult to access. Along with the enhanced
security, you can also secure the files while still allowing access to the
file for visually-impaired users. Earlier versions of security don’t pro-
vide this option, but it’s included when you choose either Acrobat 5- or
6-compatible security.
✦ Acrobat 6 and Later: Along with the enhanced security offered with
Acrobat 5 compatibility, this setting adds the ability to maintain plain
text metadata. In short, this option allows for information about the file,
such as its author, title, or creation date, to remain visible while the
remainder of the file remains secure.
✦ Acrobat 7 and Later: This choice includes all security options of
Acrobat 6 compatibility and also allows you to encrypt file attachments
that are part of a PDF file. It uses the Advanced Encryption Standard,
which is a very high level of encryption, making it unlikely that an unau-
thorized user can decrypt the file without the password.
54_607466-bk05ch06.indd 57054_607466-bk05ch06.indd 570 5/24/10 10:29 PM5/24/10 10:29 PM
Book V
Chapter 6
Securing Your
PDF Files
571

Applying Password Security to Your PDF Documents
✦ Acrobat 9 and Later: Choose this option if your audience is using the
latest version of Acrobat and you need more advanced security. The
encryption improves to 256-bit AES, making the file much more difficult
for even the most determined hacker to access.
Applying Password Security to Your PDF Documents
Selecting the Encrypt with Password option from the Secure button in the
Acrobat task bar limits access to the PDF file. Only those who know the
password can open the file. Documents are only as secure as the passwords
that protect them. To guard against discovery of a password, use passwords
that are six or more characters in length and include at least one number or
symbol. Avoid using words in the dictionary and short passwords. For exam-
ple, the password potato is less secure than p0tat0, which mixes numbers
and letters.
To apply password security to a file, follow these steps:
1. With a PDF file open, click and hold the Secure button on the Security
taskbar and choose Encrypt with Password.
Click OK when the dialog box appears, verifying that you want to
apply security to this PDF. The Password Security - Settings dialog box
appears, as shown in Figure 6-1.

Figure 6-1:
The
Password
Security –
Settings
dialog box.

54_607466-bk05ch06.indd 57154_607466-bk05ch06.indd 571 5/24/10 10:29 PM5/24/10 10:29 PM
572

Limiting Editing and Printing
2. Choose Acrobat 7 and Later from the Compatibility drop-down list.
Although Acrobat 9 and later provides more robust security, few people
are using version 9 of Acrobat, making it difficult to distribute the file
with this high level of security.
3. Select the Require a Password to Open the Document check box.
4. Enter a password in the Document Open Password text box.
You can also add additional security settings, which we outline in the
next section. Or you can use this setting as the only security to be
applied to the document.

If password protection is the only security measure you apply to the
document, authorized users can access the document by entering a
password. Users with the password may also be able to edit or print the
document unless you apply additional security measures. We discuss
ways to limit the editing and printing of PDF files in the next section.
5. Click OK.
6. Confirm the password, click OK again, and the dialog box closes.
7. Save, close, and then reopen the PDF file.
A password dialog box appears asking for the password to access
the secured file. Every time a user accesses the file, he or she will be
required to enter a password.
Limiting Editing and Printing
In addition to restricting viewing of a PDF file, you can also limit editing and
printing, restricting users from making changes to your document. This
allows users to view a file but not change it.
To limit editing and printing of your PDF document, follow these steps:
1. With a PDF file open, click and hold the Secure button on the Security
taskbar and choose Encrypt with Password.
The Password Security – Settings dialog box opens.

2. In the Permissions area, select the check box labeled Restrict Editing
and Printing of the document.
You can now specify a password that will be required for readers to edit
the file or change the security settings. (See the previous section.)
54_607466-bk05ch06.indd 57254_607466-bk05ch06.indd 572 5/24/10 10:29 PM5/24/10 10:29 PM
Book V
Chapter 6
Securing Your
PDF Files
573
Limiting Editing and Printing
With this option selected, you can apply a password for access to fea-
tures, such as printing or editing. This password can be different than
the password used to open the document — in fact, you don’t even need
to use a document open password if you don’t want to, but it’s a good
idea to use both of these passwords for sensitive data. If you apply a
document open password without a permissions password, it’s easy for
an experienced user to bypass the security in the PDF file.
3. In the Change Permissions Password text box, enter a password.
Users that enter this permissions password when opening the document
can change the file or the security settings. The permissions password
can also be used to open the file and provides more privileges than the
open password.
4. Choose whether users can print the document by selecting from the
Printing Allowed drop-down list.
The choices include Low Resolution or High Resolution, or you can pro-
hibit printing by choosing None. The settings you choose here apply to
anyone who accesses the document and doesn’t know the permissions
password.
5. Choose from the Changes Allowed drop-down list (see Figure 6-2) to

restrict editing.
For the most security, choose None.

Figure 6-2:
Restrict
what users
can edit.

54_607466-bk05ch06.indd 57354_607466-bk05ch06.indd 573 5/24/10 10:29 PM5/24/10 10:29 PM
574
Limiting Editing and Printing
6. Select the last two check boxes if desired:
• Enable Copying of Text, Images, and Other Content: When deselected,
this option restricts copying and pasting of text and graphics from a
PDF file into other documents. Selecting this option lets users extract
text and images from a file by using the simple Copy and Paste
commands.
• Enable Text Access for Screen Reader Devices for the Visually
Impaired: When you choose Acrobat 5 or Later from the
Compatibility drop-down list at the top of the dialog box, you can
also select this check box to allow visually impaired users to have
the PDF file read aloud to them.
7. When you’re satisfied with the settings, click OK.

Choosing more advanced security settings, and choosing the latest version
of compatibility, runs the risk of your file not being visible to many users
that may not have upgraded. Always understand your audience and the soft-
ware versions they’re using before distributing files.
54_607466-bk05ch06.indd 57454_607466-bk05ch06.indd 574 5/24/10 10:29 PM5/24/10 10:29 PM
Book VI

Dreamweaver CS5
55_607466-pp06.indd 57555_607466-pp06.indd 575 5/24/10 10:30 PM5/24/10 10:30 PM
Contents at a Glance
Chapter 1: Getting Familiar with New Features in Dreamweaver . . . 577
Chapter 2: Introducing Dreamweaver CS5 . . . . . . . . . . . . . . . . . . . . . 583
Chapter 3: Creating a Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593
Chapter 4: Working with Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603
Chapter 5: Putting Text on the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
Chapter 6: Linking It Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Chapter 7: Creating Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639
Chapter 8: Creating CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
Chapter 9: Publishing Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . 661
55_607466-pp06.indd 57655_607466-pp06.indd 576 5/24/10 10:30 PM5/24/10 10:30 PM
Chapter 1: Getting Familiar with
New Features in Dreamweaver
In This Chapter
✓ Previewing pages in BrowserLab
✓ Looking at the improved related documents feature
✓ Fine-tuning styles in real-time with the improved CSS Styles panel
✓ Working with InContext Editing
D
reamweaver CS5 lets you create and manage single pages, such as
e-mail newsletters, or groups of pages that are linked to each other,
referred to as a site. Users can create basic Web sites with simple links from
one page to another or advanced Web sites that include custom coding and
interaction with people viewing the pages.
As part of the Adobe Creative Suite, Dreamweaver CS5 works seamlessly
with several other Adobe applications, such as Photoshop CS5, Illustrator
CS5, Bridge, and Device Central. Even if you’ve never used Dreamweaver,
you’ll be impressed by its many tools, panels, and powerful features that

make building Web pages easy and intuitive.
If you’ve used other Web-page editing applications such as GoLive or
Microsoft Expression Web, moving to Dreamweaver is a smooth transition.
Dreamweaver CS5 is an industry standard Web site creation and manage-
ment tool, with the tools needed to do advanced coding or create data-
driven Web sites.
Exploring the Improved CS5 Interface
Dreamweaver CS5 includes a number of subtle but useful enhancements
to its workspace, improving on the overhaul in version CS4. The document
toolbar has been rethought, including quick access to page-specific options.
The workspace also includes some handy new panels for features such as
InContext Editing and Adobe Business Catalyst, as shown in Figure 1-1.
56_607466-bk06ch01.indd 57756_607466-bk06ch01.indd 577 5/25/10 8:54 AM5/25/10 8:54 AM
578
Previewing Pages in Adobe BrowserLab

Figure 1-1:
The Dream-
weaver
Designer
workspace.

In the workspace, panels and panel groups appear tabbed, and you can separate
them by dragging a tab to another location, just as in other Adobe applications.
If you choose View➪Toolbars➪Standard, you can use the Go to Bridge button
to navigate and use Adobe Bridge. Using Adobe Bridge with Dreamweaver CS5
is useful because you can search and navigate assets such as text, Flash, and
image files. You can then drag and drop them directly on your page. (Read more
about adding imagery to a Web page in Chapter 4 of this minibook.)
Previewing Pages in Adobe BrowserLab

One of the biggest challenges of designing for the Web is that you must cater
to a variety of browsers and browser versions. Testing pages across these
browsers is often a cumbersome task, but Adobe’s new BrowserLab service
lets you easily preview and compare your work across different browsers for
consistency.
The BrowserLab service, free and available at the Adobe Web site at
is just a step
away when you’re working in Dreamweaver. Choose File➪Preview in
Browser to check how your pages appear in different browsers, all in a
single glance. (See Figure 1-2.) In addition, you can test pages in browsers on
different operating systems, so if you’re a Mac user trying to see how your
Web site looks in Internet Explorer on a PC, you’re covered!
56_607466-bk06ch01.indd 57856_607466-bk06ch01.indd 578 5/25/10 8:54 AM5/25/10 8:54 AM
Book VI
Chapter 1
Getting Familiar
with New Features
in Dreamweaver
579
Improved Related Files Feature

Figure 1-2:
Use Adobe
BrowserLab
to check
out and
compare
pages in
several
browser

environ-
ments at a
time.

Improved Related Files Feature
Modern Web sites often rely on more than just markup and style sheets for
increased functionality, so it’s not uncommon for Web sites of any size to rely
on server-side programming languages, such as PHP (shown in Figure 1-3) or
ASP.NET. For this reason, a single page can be composed of a number of dif-
ferent files that the server puts together on the fly. Dreamweaver improves on
its Related Documents view on the Document toolbar by revealing attached
dynamic files, such as server-side includes. You can quickly navigate to
and edit these related files as easily as you now do with style sheets and
JavaScript files.
You must have a testing server enabled in order to discover and view server-
side related files.
It helps to know a bit about the Related Documents feature (introduced in
CS4) to appreciate these improvements. Quite often, pages rely on several
other files, such as attached style sheets and JavaScript files. The Document
toolbar includes a Related Documents section, shown in Figure 1-4, where
you can see and jump to other documents used by and attached to your
page. Selecting a document on the Related Documents toolbar displays the
special Split view, where you can edit the selected file in Code view while
continuing to work with the original page in Design view.
56_607466-bk06ch01.indd 57956_607466-bk06ch01.indd 579 5/25/10 8:54 AM5/25/10 8:54 AM
580
Inspecting Your CSS: Live!

Figure 1-3:
Reveal

server-side
includes,
such as the
header, in
the Related
Documents
view.


Figure 1-4:
The Related
Documents
toolbar
lets you
view and
edit other
files that
your page
depends on.

The best part is that you don’t have to jump between multiple Document
windows; just edit while you watch the changes applied to your document!
Inspecting Your CSS: Live!
In the past, the only time you could modify or work with CSS in
Dreamweaver was in Design view or Code view. After you previewed your
page in a browser, you had no easy way to tweak styles while viewing the
56_607466-bk06ch01.indd 58056_607466-bk06ch01.indd 580 5/25/10 8:54 AM5/25/10 8:54 AM
Book VI
Chapter 1
Getting Familiar

with New Features
in Dreamweaver
581
Using InContext Editing
result in real-time. Though some browsers have created add-ons (most
notably, the Firebox add-on FireBug) to take care of the task of inspecting
and debugging page styles, you have no uniform or easy way to handle these
tasks during the design and building phase.
Dreamweaver CS5 handles this problem by adding a real-time CSS inspector
feature to Live view, as shown in Figure 1-5. You can now see your page as it
appears in a browser while tweaking and tuning styles to see the effects in
real-time.

Figure 1-5:
You can
now inspect
elements on
your page
in Live view
and modify
them in real-
time using
the CSS
Styles panel
on the right.

Use the Inspect button on the Document toolbar in Live view to select
elements on the page and to see and modify the styles that control their
appearance. Make adjustments on the fly to see how those changes will
affect the page in a browser.

Using InContext Editing
A common theme of new features in Dreamweaver CS5 is the integration of
new Adobe online services such as BrowserLab and Business Catalyst and
the useful addition of InContext Editing. InContext Editing provides a central,
56_607466-bk06ch01.indd 58156_607466-bk06ch01.indd 581 5/25/10 8:54 AM5/25/10 8:54 AM
582
Using InContext Editing
browser-based method of managing a Web site without having to edit its origi-
nal files or dive into code. This feature is useful if you’re creating Web sites
where you want to give a client, or others in your organization, the ability to
update and manage content from a browser without needing to edit pages.
The Dreamweaver Insert panel includes the new category InContext Editing,
shown in Figure 1-6. This category features tools for adding editable regions,
or areas on the page that can be modified by using the Adobe InContext
Editing service. Pages can be edited directly in the browser by clients and
other contributors. This feature lets you collaborate with others on content
while preserving the integrity of, and maintaining control over, your page
designs.

Figure 1-6:
The new
InContext
Editing
panel
features
tools for
creating
editable
regions
on a page

that can be
modified in
a browser.

56_607466-bk06ch01.indd 58256_607466-bk06ch01.indd 582 5/25/10 8:54 AM5/25/10 8:54 AM
Chapter 2: Introducing
Dreamweaver CS5
In This Chapter
✓ Familiarizing yourself with the workspace
✓ Finding out about panels
✓ Creating a new Web site
✓ Discovering the Property inspector
✓ Previewing your page
✓ Understanding the Dreamweaver preferences
D
reamweaver CS5 lets you create and manage Web pages and com-
plete Web sites. In this chapter, you find out how to start a Web site
and build pages within it. A Web site is simply a group of linked pages that
contain text and images and can also contain media, such as Flash movies,
sound, and video.
Getting to Know the Workspace
The workspace consists of panels, toolbars, and inspectors and puts
most all the tools you need within close reach. The Dreamweaver work-
space, shown in Figure 2-1, is slightly different from ones you may see in
other Adobe applications, but their premise is the same: You can open
panels, panel groups, toolbars, and dialog boxes to do the work you need.
Whichever document you’re editing appears in the Document window,
which occupies most of the workspace — and even has its own toolbar.
When Dreamweaver is first launched, you see a Welcome screen. This
screen provides the option to open any recent items (if you’ve created

pages already) or to create new HTML, CSS, XML, sites, and many other
types of files.
You can customize your workspace with only the panels, toolbars, and
arrangement of windows you need or choose from workspace presets
included with Dreamweaver.
57_607466-bk06ch02.indd 58357_607466-bk06ch02.indd 583 5/24/10 10:31 PM5/24/10 10:31 PM
584
Getting to Know the Workspace

Figure 2-1:
The Dream-
weaver
workspace.

Document bar Insert panel
Property inspector Document window Files panel
The Insert panel
The Dreamweaver CS5 Insert panel provides you with tools to insert on your
page some common Web page elements such as hyperlinks, e-mail links,
tables, and images as well as more text formatting options and widgets that
enhance your page. Choose Window➪Insert to reveal the panel in the upper-
right corner of your workspace.
The Insert panel is divided into eight categories that provide you with differ-
ent elements to add to your page. You can switch between these categories
by using the drop-down list at the top of the panel:
✦ Common: Contains the most commonly used objects, such as images
and tables.
✦ Layout: Contains layout elements — such as tables and CSS elements
like the DIV tag — that help you create a Web page layout.
✦ Forms: Contains the elements necessary to create a form in your

Dreamweaver page.
57_607466-bk06ch02.indd 58457_607466-bk06ch02.indd 584 5/24/10 10:31 PM5/24/10 10:31 PM
Book VI
Chapter 2
Introducing
Dreamweaver CS5
585
Getting to Know the Workspace
✦ Data: Contains elements related to dynamic content and some Spry data
objects.
✦ Spry: Contains Spry Framework objects, which are handy widgets used
to enhance your Web pages with cool navigation bars, layout panels,
and real-time data components.
✦ InContext Editing: Creates editable regions for the Adobe InContext
editing service, which allows content contributors to update Web site
content remotely without the need to edit or disturb the original Web
site files.
✦ Text: Provides you with text formatting tags.
✦ Favorites: Allows you to group and organize the Insert panel buttons
you use the most within one common location.

To bring up the Customize Favorite Objects dialog box, simply right-
click (Windows) or Control-click (Mac) within the Insert panel and
choose Customize Favorites from the contextual menu. The Customize
Favorite Objects dialog box, shown in Figure 2-2, appears. Click an
object in the Available Objects list and then click the double arrow to
add the object to your Favorites category.

Figure 2-2:
Customizing

the
Favorites
category in
the Insert
panel.

The Document toolbar
The Document toolbar, shown in Figure 2-3, contains tools to help you view
your document in different modes, such as Code and Design, as well as
address such items as the document title and browser compatibility.
✦ Code View: Show the code and only the code using this view.
Dreamweaver helps you to decipher code by color coding tags, attri-
butes, CSS, and other elements.
✦ Split View: Selecting this option splits the Document window between
Code and Design views. If you understand a little about code, this view
can be extremely helpful because you see both the design and the code
simultaneously.
57_607466-bk06ch02.indd 58557_607466-bk06ch02.indd 585 5/24/10 10:31 PM5/24/10 10:31 PM
586
Getting to Know the Workspace

Figure 2-3:
Control
your view
of the page
from the
Document
toolbar.

✦ Design View: This option displays your page in Design view in the

Document window.
✦ Live Code: When Live View is enabled, you can view the source code of
your document as a user would see it in a browser (via the View Source
or Page Source menu options in most browsers). You can’t edit page
code in this view.
✦ Check Browser Compatibility: This menu shows options that let you
check page integrity, such as accessibility, or whether your CSS rules
are compatible across different browsers.
✦ Live View: Live View renders your page as though it’s in a browser —
free of borders, guides, and other visual aids. In Live View, you can’t edit
the previewed content, but you can still jump to Code, Split, or Design
view and modify your page content.
✦ Inspect: The new Inspect button works with Live View to reveal the CSS
rules that format elements on your page. When you select an element on
the page with Inspect enabled, the CSS Styles panel reveals the proper-
ties that format that element, and allows you to disable or modify spe-
cific properties and see the results in real time.
✦ Preview/Debug in Browser: Click this button to preview or debug your
document in one of your installed Web browsers, Adobe’s BrowserLab,
or Device Central.
✦ Visual Aids: Click this button to select different visual aids (such as bor-
ders and guides) to help you see various elements and make designing
your pages easier.
✦ Refresh Design View: Click this button to refresh the document’s Design
view after you make changes in Code view. Changes you make in Code
view don’t appear automatically in Design view until you perform certain
actions, such as save the file or click this button.
✦ Document Title: Enter the name of your document in this field.
✦ File Management: Click this button to display the File Management
pop-up menu. Use this menu to check your document in or out (when

Check In/Check Out is enabled for your site).
57_607466-bk06ch02.indd 58657_607466-bk06ch02.indd 586 5/24/10 10:31 PM5/24/10 10:31 PM
Book VI
Chapter 2
Introducing
Dreamweaver CS5
587
Getting to Know the Workspace
✦ Previous Page/Next Page/Refresh/Address Bar: In Live View, these
tools work just like they would in a Web browser and enable you to navi-
gate between pages, refresh the page, and see the address of the current
page. The address bar also works when Live View is not enabled, reveal-
ing the path to the document you’re currently working on.
✦ Related Documents: Documents used by and attached to your page,
such as external CSS and JavaScript files, are listed below (Mac) or
above (Windows) the view selection (Code/Split/Design) buttons. You
can click any listed document to edit the attached file in Split view with-
out having to switch documents.
Note: XML, JavaScript, CSS, and other code-based file types can only be
viewed and edited in Code view; the Design and Split buttons appear
dimmed out.
Note: Refreshing also updates code features that are Document Object
Model (DOM) dependent, such as the ability to select a code block’s
opening or closing tags.
✦ Live View Options: Click and select options from this menu to control
how your document appears and works when Live View is enabled.
Using the panel groups
Dreamweaver provides you with a panel docking area off to the right of the
workspace. The panels in Dreamweaver appear grouped and tabbed, and
you can easily access the appropriate panel for the job by either clicking the

tab of the panel to bring it forward or by selecting the named panel from the
Window menu.
Close a panel by either selecting the name of the panel from the Window
menu or by tearing the panel out of the group and clicking the Close icon.
Saving your workspace
Just as with the other Creative Suite 4 applications, you can organize your
workspace by turning on the visibility of the panels and toolbars that you
use regularly and closing the others. You can also save your workspace so
that you can recall it at any time:
1. Choose Window➪Workspace Layout➪New Workspace.
The New Workspace Layout dialog box appears.
2. Type an appropriate name in the Name text box.
3. Click OK to create the new workspace.
57_607466-bk06ch02.indd 58757_607466-bk06ch02.indd 587 5/24/10 10:31 PM5/24/10 10:31 PM
588
Creating a Site
To recall a workspace you’ve previously saved, you can use one of the fol-
lowing methods:
✦ Select the workspace from the Workspace menu near the top of the
screen (above the panel group).
✦ Open the workspace by choosing Window➪Workspace Layout➪[your
workspace name].
Dreamweaver CS5 features several new workspaces geared toward different
types of users as well as different tasks. You can recall any of these work-
spaces using either of the ways described in the previous list or by select-
ing a workspace from the application bar, which appears at the top of your
screen, as shown in Figure 2-4.

Figure 2-4:
The

application
toolbar
allows
you easy
access to
your saved
workspaces.


You can hide the application toolbar by choosing Window➪Application Bar.
Creating a Site
Sites are quite important to maintain the links and consistency and the
general organization of your Web pages. (See Chapter 3 of this minibook for
more on creating sites.) Some good news is that the process of creating a
new site has been simplified in Dreamweaver CS5.
To create a site, follow these steps:
1. Choose Site➪New Site.
The Site Setup dialog box appears.
This dialog box walks you through the steps to create a new site. In this
chapter, you breeze through the steps, but you can find more details
about them in Chapter 3 of this minibook.
57_607466-bk06ch02.indd 58857_607466-bk06ch02.indd 588 5/24/10 10:31 PM5/24/10 10:31 PM
Book VI
Chapter 2
Introducing
Dreamweaver CS5
589
Checking Out the Property Inspector
2. In the Site Name box, type a name for your new site.
For this example, we entered chapter2.

3. The Local Site Folder field shows you where the new site folder will
be created. If you want to change it, you can click the Folder icon to
select an existing folder. For now, leave the default folder path and
click Save.
The site appears in the Files panel.
Checking Out the Property Inspector
After you’ve created a site, you can begin to add new pages as well as assets,
such as images, to that site. The Property inspector becomes one of your
most useful panels because it provides you with information about any
element you’ve selected in the Document window. This contextual panel,
shown in Figure 2-5, displays text attributes when text is selected or image
attributes when images are selected, and so on.

Figure 2-5:
The
Property
inspector
shown
with text
(top) and
an image
(bottom)
selected.

To see this panel in action, you’ll create a new page with some elements
on it. You may have none of your own pages yet, so you’ll use one of the
CSS Starter pages that loaded with your Dreamweaver CS5 installation, and
follow these steps:
1. Choose File➪New to create a new page in Dreamweaver.
The New Document dialog box appears.

2. Choose Blank Page➪HTML➪2 Column Fixed Sidebar, and click Create.
3. Choose File➪Save As.
The Save As dialog box appears.
4. Type a name in the Save As text box.
57_607466-bk06ch02.indd 58957_607466-bk06ch02.indd 589 5/24/10 10:31 PM5/24/10 10:31 PM
590
Previewing Your Page in a Browser or with Live View
The location is routed automatically to the site folder you created. See
the earlier section “Creating a Site” to see how to create a site.
5. With your new page open in the Document window, click to select
various elements, such as text, a table, or a hyperlink (linked text).
With each selection, the Property inspector changes to provide you with
specific information about that element (refer to Figure 2-5).

The Property inspector is analogous to the Option bar, which appears at the
top of the Illustrator, InDesign, and Photoshop workspaces and the Property
inspector in Flash. If you’re a former GoLive user, the concept of using the
Property inspector is also quite familiar to you because this same feature
existed in that application as well.
Previewing Your Page in a Browser or with Live View
Perhaps you’ve completed your page and you want to investigate how it
looks in a browser. You can quickly preview your file by simply clicking the
Preview/Debug in Browser button on the Document toolbar and selecting a
browser to preview your page, as shown in Figure 2-6. You can also preview
your page in Adobe’s BrowserLab or Adobe’s Device Central (which simu-
lates several different mobile and PDA devices).

Figure 2-6:
The
Preview/

Debug in
Browser
button
lets you
select from
browsers
installed on
your system.

You can always add browsers from the Preferences panel by choosing
Edit➪Preferences➪Preview in Browser (Windows) or Dreamweaver➪
Preferences➪Preview in Browser (Mac).
Previewing your page using Live View
Dreamweaver CS5’s Live View displays your page as you would see it in a
browser. This feature is a nice alternative to the Preview in Browser com-
mand because you don’t ever need to exit Dreamweaver.
57_607466-bk06ch02.indd 59057_607466-bk06ch02.indd 590 5/24/10 10:31 PM5/24/10 10:31 PM