tema 3

Dreamweaver CS6 is a powerful program for designing and building websites.

If you're brand-new to Dreamweaver, turn to page 2 for a quick look at what

this program can do; if you're a longtime Dreamweaver fan, page 5 tells you

what's new in this, its latest incarnation.

This chapter gives you an overview of Dreamweaver—a guide to the windows, toolbars,

and menus you'll use every time you build a web page. It also shows you how

to set up the program so you can begin building pages. And, because doing is often

a better way to learn than just reading, you'll get a step-by-step tour of web page

design—the Dreamweaver way—in the tutorial at the end of this chapter.

The Dreamweaver CS6 Interface

When you open Dreamweaver, you'll be greeted by the program's Welcome screen

(Figure 1-1). This simple starting point lets you open any one of the nine most recently

opened files, create a new web page, view instructional videos, and access

online help.

Dreamweaver CS6

Guided Tour

22 Dreamweaver CS6: The Missing Manual

The

Dreamweaver

CS6 Interface

Figure 1-1

Dreamweaver’s Welcome

screen lets you open

existing Dreamweaver

files, create new ones,

and learn more about the

program. It disappears as

soon as you open a web

page. If you just don’t

have any use for this window,

turn on the “Don’t

show again” checkbox in

the lower-left corner.

Dreamweaver CS6's interface shares the look and feel of other programs, like Photoshop,

Illustrator, and Flash, in Adobe's “Creative Suite.” Out of the box, Dreamweaver's

various windows are a unified whole (see Figure 1-2). That is, the edges of all the

windows touch each other, and resizing one window affects the others around it.

This type of interface is common on Windows computers, but Mac fans accustomed

to independent floating panels might find it strange. Give it a chance. As you'll soon

see, this layout has its benefits. (If you just can't stand this locked-in-place style,

you can detach the various panels and place them wherever you like; see page 34

for instructions.)

Chapter 1: Dreamweaver CS6 Guided Tour 23

The

Dreamweaver

CS6 Interface

Figure 1-2

Out of the box,

Dreamweaver documents

appear in Split view—

HTML code on the left

and a visual preview of

the current page on the

right. If you prefer to

see how your page looks

as you add and delete

elements, click the Design

button in the Document

toolbar; that hides the

HTML view and brings the

preview page full-screen.

To switch among open

documents, click a file’s

tab immediately above

the Document toolbar.

Document tabs Document toolbar

Code view Property Inspector Design view Panel groups

Application bar

Many of the program's individual windows help you handle specific tasks, like building

CSS styles. You'll read about each panel in relevant chapters later in the book,

but you'll frequently interact with three main groups of windows: the document

window, a set of “panels,” and the Property Inspector.

Note The look of Dreamweaver's windows depends on what kind of computer you use (Windows or Macintosh)

and what changes you make in the program's Preferences settings. Even so, the features and functions

generally work the same way. In this book, where the program's operation differs dramatically in one operating

system or the other, special boxes and illustrations (labeled “For Windows Only” or “For Macs Only”) will let you

know.

The Document Window

What you see on a web page is the end result of the interaction between your browser

and the page's HTML, CSS, and (sometimes) JavaScript. Because of this interrelationship,

Dreamweaver's document window lets you view pages-in-progress four

ways: as straight code (in Code view), in an editable, visual view (called Design view,

pictured in Figure 1-3), with both views side-by-side (known as Split view, pictured in

24 Dreamweaver CS6: The Missing Manual

The

Dreamweaver

CS6 Interface

Figure 1-2), and as it will appear in a web browser (Live view, which turns the document

window into a real web browser). If your monitor is wide enough, Split view is

a great way to work: click into the Design view half of the document window to add

HTML visually, and, when it's easier just to type HTML, click into the Code view part

of the document window and type away. Split view even lets you see the code in

one half, and turn on Live view in the other half so you can work on the HTML code

and see the page as it will appear in a real web browser (you can't, however, edit any

page content in Live view). In addition, if you're new to HTML, Split view is a great

way to learn the language: add elements like paragraphs, headlines, and tables in

Design view and see the relevant HTML in Code view. (You work in the document

window's Design view much as you do in a word processor: To add text to a page,

for example, you simply click inside the window and start typing.)

Figure 1-3

A document window

like this represents a

web page in progress;

here’s where you add

text, graphics, and other

objects as you build the

page. The status bar

at the bottom of the

window provides some

useful information, like

how quickly the page will

download to a browser

and the way the page

encodes text. You can also

instruct Dreamweaver

to display the current

document at different

widths and heights so

you can simulate what

the page will look like

when viewed in different

size browsers, such

as those on a mobile

phone, tablet, or desktop

computer.

Document toolbar

Document tabs Document toolbar Head content

Body Tag selector Status bar Window size Text

encoding

Document zoom

Mobile/Tablet/

Desktop sizes

Download

stats

Related files

When you build a page, you work in the document window, and, as you add pages

to your site or edit existing ones, you open new document windows.

Chapter 1: Dreamweaver CS6 Guided Tour 25

The

Dreamweaver

CS6 Interface

Several other screen components provide useful information about your document.

They may appear in different locations on Windows and Mac computers (see

Figure 1-2 and Figure 1-3, respectively), but they work the same way.

For example:

• Document tabs. When you have more than one web document open at a time,

small tabs appear at the top of the document window—one for each open file.

The name of the file appears in the tab; to switch to it, just click its tab.

Tip If you mouse over a document tab and pause, the location of the file appears in a small pop-up window

called a tooltip.

• Related Files bar. The Related Files bar lists all CSS (Cascading Style Sheets),

JavaScript, and server-side programming pages (like PHP) the current web

page uses. You'll learn more about these external files later in this book, but as

a quick summary, it's common in current web design to have other files supply

design and interactivity to a page of HTML. Web designers frequently work on

these files in addition to the basic HTML file, so the Related Files bar lets you

quickly jump to and work on these “helper” files.

• Document toolbar. The Document toolbar lets you change the title of a

page, switch between Design and Code views, jump to Live view (to see how

the page looks and works in a web browser), preview the page in different

browsers, make sure your page is free of HTML errors, and change the look

of the document window. (If you don't see the Document toolbar, choose

View→Toolbars→Document.) You'll read about its various buttons and menus

in the relevant chapters of this book, but you'll want to be aware of the Code,

Split, and Design buttons (circled in Figure 1-3). They let you see the page you're

working on in the four views described above.

Note You may find two other toolbars, the Standard toolbar and Style Rendering toolbar, useful. The Standard

toolbar is common on many Windows programs and includes buttons for frequent file and editing tasks, like

creating a new page, opening a page, saving one or all open documents, canceling and repeating commands, and

cutting, copying, and pasting page elements. (Dreamweaver hides this toolbar until you summon it by choosing

View→Toolbars→Standard.) The Style Rendering toolbar comes in handy when you work with CSS. You'll learn

how to use it on page 401.

• Head content. Most of what you put on a web page winds up in the body of the

page, but some elements are specific to a region of the page called the head.

This is where you put things like the page's title, the meta tags that provide

information for some search engines and browsers (for example, a description

of the page or keywords used in the page), JavaScript programs, and links to

CSS files (Chapter 3).

26 Dreamweaver CS6: The Missing Manual

The

Dreamweaver

CS6 Interface

None of this information actually appears on your page when it's “live” on the

Internet, but you can have a look at it in Dreamweaver by choosing View→Head

Content. You'll see a row of icons representing the different bits of information

in the head.

• Tag Selector. The Tag Selector is extremely useful. It provides a sneak peek at

the HTML that composes your web page, behind the scenes. It indicates how

Dreamweaver nests HTML tags in your document to create what you see on

the page. In addition, it lets you isolate, with a single mouse click, an HTML tag

and all the information inside it. That means you can cleanly remove a page

element or set its properties (see page 31), and precisely control the application

of styles to it (Chapter 4).

You'll make good use of the Tag Selector in the tutorials to come. For experienced

Dreamweaver fans, it's one of the program's most useful tools.

Note In Design view, clicking the <body> tag in the Tag Selector is usually the same as pressing Ctrl+A

(c-A) or choosing Edit→Select All. It selects everything in the document window. However, if you click inside

a table (Chapter 6) or a <div> tag (see page 438), choosing Edit→Select All selects only the contents of the table

cell or the <div> tag. In such a case, you need to press Ctrl+A (c-A) several times to select everything on the

page. After you do, you can press the delete key to instantly get rid of everything in your document.

Careful, though: Pressing Ctrl+A (c-A) or choosing Edit→Select All in Code view selects all the code, including the

information in the head section of the page. Deleting all the code gives you an empty file—and an invalid web page.

The Insert Panel

Dreamweaver provides many windows for working with the various technologies

required to build and maintain a website. It calls most of its windows panels, and

they sit in tidy groups on the right edge of your screen. The various panels and their

uses will come up in relevant sections of this book, and you'll learn how to organize

the panels on page 34. But two are worth mentioning up front: the Insert panel and

the Files panel.

If the document window is your canvas, the Insert panel holds your brushes and

paints, as you can see in Figure 1-4. You can create a page simply by typing HTML

in Code view, but it's often easier to work in Design view, where the Insert panel can

simplify the process of adding page elements like images, horizontal rules, forms,

and multimedia content. Want to put a picture on your web page? Just click the

Images icon in the Insert panel.

Chapter 1: Dreamweaver CS6 Guided Tour 27

The

Dreamweaver

CS6 Interface

Figure 1-4

The Insert panel has many faces; choose

the one that works best for you. Normally,

the panel displays page elements under

each of its drop-down menus in a single list

with an icon and a name—for example, the