DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP 01

In one respect, the change symbolizes the fact that Dreamweaver is under new ownership.

Macromedia, the company that turned Dreamweaver, Flash, and Fireworks into must-have

tools for web developers, was acquired by Adobe at the end of 2005. And Dreamweaver

(together with former Macromedia stable mates Fireworks and Flash) is now part of

Creative Suite, Adobe’s family of web and print design tools that includes Photoshop,

Illustrator, and InDesign. Creative Suite is now in its third iteration; hence CS3. Although

each program has a long history, the idea of Creative Suite is to promote greater integration

to make it easier to switch to the best tool for a particular job, such as Photoshop for

photo manipulation and retouching, and import the results into another program. And

that’s what’s happened to Dreamweaver: although it’s available as a stand-alone program,

it’s now closely integrated with its new Adobe brothers and sisters as part of Adobe Web

Suite CS3 and Design Suite CS3.

Even the stand-alone version of Dreamweaver CS3 comes bundled with three other

programs:

Extension Manager CS3: An updated version of the program that lets you install

third-party add-ons to extend the functionality of Dreamweaver, Flash, and Fireworks.

Adobe Bridge CS3: As the name suggests, this is intended to facilitate communication

between the various parts of Creative Suite, but it also works with the standalone

version of Dreamweaver. At one level, it’s like a super-charged version of

Windows Explorer or Finder on the Mac, but it shines in the handling of visual

assets. It allows you to see inside a wide variety of formats, making it easy to find

an image by what it looks like.

Adobe Device Central CS3: This is a brand new program that allows you to visualize

what your websites will look like in a wide range of mobile devices, not only

from the layout point of view but also simulating mobile backlight and sunlight

reflections.

The integration goes further through the ability to copy and paste directly from a

Photoshop PSD file into Dreamweaver. When you do so, Dreamweaver optimizes the file

for the Web. So, yes, the “CS3” does make sense. It’s not just change for the sake of

change.

Once installed, Extension Manager, Bridge, and Device Central are separate programs and

can be launched independently, but you have no choice whether to install them. The

installer simply lists them as “Shared Components.” As a result, this version of Dreamweaver

occupies roughly four times more disk space than previous versions. Personally, I like

Bridge and think that Device Central is likely to become increasingly useful as mobile Web

access grows in popularity. Others may disagree.

If you’re a long-term Dreamweaver user, though, the program that you know and love

hasn’t changed beyond recognition. As Figures 1-4 and 1-5 show, the workspace layout is

identical to Dreamweaver 8. The development team moved with Dreamweaver to Adobe,

and the improvements to the program are a logical progression. Adobe accompanied

its decision to include Dreamweaver in Creative Suite 3 with the bold step of dropping its

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

2

own web design program, GoLive. Although GoLive has been updated, it’s not in any of the

CS3 packages. What’s more, Adobe has created an online tutorial to help GoLive users

migrate to Dreamweaver (www.adobe.com/go/learn_dw_golive). This sends a clear message

that Adobe now regards Dreamweaver as its prime tool for developing standardscompliant

websites.

In this chapter, we’ll take a look at the most important features and changes in

Dreamweaver CS3, with particular emphasis on cascading style sheets (CSS) and creating

standards-compliant Extensible HyperText Markup Language (XHTML), both of which are

essential for building any modern website. Then, in the following chapter, we’ll take a look

at the tools Dreamweaver offers for building dynamic websites: Spry—Adobe’s implementation

of Asynchronous JavaScript + XML (Ajax)—and PHP.

What this chapter covers

Finding out what’s new in Dreamweaver CS3

Exploring and organizing the Dreamweaver workspace

Using Bridge to manage visual assets

Taking a first look at Dreamweaver’s support for cascading style sheets

Getting the best out of Code view

Getting your bearings in Dreamweaver

As the title of this book says, this is an essential guide to Dreamweaver CS3. So I don’t

intend to bore you to death with descriptions of every menu and submenu. However, all

readers may not be familiar with Dreamweaver, so I’ll start with a few signposts to guide

you around the Dreamweaver interface and help set basic program preferences. Most of

this will be familiar to experienced users of Dreamweaver, but there are some important

changes. To identify these changes, look for the New and Changed graphics in the margin.

Starting up

When you launch Dreamweaver CS3, the first thing you see after the program has finished

loading is the welcome screen shown in 1-1. The three columns in the top section

provide quick access to a recently opened document (this list is empty the first time you

launch Dreamweaver), create a new document or Dreamweaver site (site definition is

covered in Chapter 4), or select from a predefined layout. The Dreamweaver Exchange

option at the foot of the right column takes you directly to the Adobe Dreamweaver

Exchange (www.adobe.com/cfusion/exchange/index.cfm?view=sn120), where you can

obtain extensions to add extra functionality to Dreamweaver (many are free; others are

sold on a commercial basis). The bottom section of the welcome screen takes you to various

parts of the Adobe website and displays what Adobe considers useful information, for

example, available updates to the program.

DREAMWEAVER CS3—

3

1

1-1. The welcome screen offers access to recent documents and a quick way to

create new ones.

The Dreamweaver welcome screen reappears whenever you close all documents in the

workspace and connects to Adobe to see if there are any new announcements. In previous

versions, leaving the welcome screen enabled was a resource hog, so many developers

chose the Don’t show again option at the bottom left. This means what it says: once you

select it, the welcome screen disappears forever. If you want it back, go to Edit ä

Preferences (Dreamweaver ä Preferences on a Mac), choose the General category, and

select Show welcome screen.

Although the welcome screen no longer appears to be a resource hog, you may prefer to

switch it off because you get a much better range of options from the New Document dialog

box. You can also con Dreamweaver to reopen on startup any documents that

are still open when you close the program. Just select Reopen documents on startup in the

General category of the Preferences panel.

Creating a new document

To create a new document, select File ä New or press Ctrl+N/Cmd+N. This opens the New

Document dialog box, which has been considerably revamped, as shown in 1-2.

The biggest change is that, in addition to a completely blank page, you can now select one

of 32 CSS layouts. There are also options to change the page’s document type definition

(DTD)—by default, Dreamweaver CS3 uses XHTML 1.0 Transitional—and to attach an

external style sheet to the page at the time of creation. We’ll look at the CSS layouts and

style sheet options in Chapters 5 and 6.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

4

1-2. The New Document dialog box offers a massive range of options and preset layouts.

By selecting the appropriate option from the menu on the left side of the New Document

dialog box, you can also create new templates from scratch or a page from an existing

template (templates are covered in Chapter 12). The Page from Sample option offers a

wide range of preset layouts, but I don’t recommend using them, as many of them use oldstyle

presentational elements and deprecated attributes. The final option, labeled Other,

contains a variety of pages for programming languages such as ActionScript, C#, and

VBScript, none of which are used in this book.

Setting new document preferences

Click the Preferences button at the bottom left of the New Document dialog box.

Alternatively, choose Preferences from the Edit menu (Dreamweaver menu on a Mac), and

select the New Document category. Either presents you with the New Document Preferences

dialog box shown in 1-3.

The dialog box lets you set the following global preferences:

Default document lets you choose the type of document that will be created when

you use the keyboard shortcut for a new document (Ctrl+N/Cmd+N). For this to

work, you must deselect the option at the bottom labeled Show New Document dialog

box on Control+N/Cmd+N. Otherwise, the dialog box shown in 1-2 will

appear.

Default extension affects only (X)HTML files. Change the value only if you want to

use .htm to maintain unity with the naming convention of older sites.

Default Document Type (DTD) sets the default DOCTYPE declaration for all new web

pages. You cannot set one value for, say, .html and another for .php pages.

DREAMWEAVER CS3—

5

1

1-3. The New Document category of the Preferences panel

Default encoding lets you choose the character set to be used in all web pages. The

Dreamweaver CS3 default is Unicode (UTF-8). (In the Mac version, this is listed as

Unicode 4.0 UTF-8.) This is different from previous versions. The checkbox below

this option tells Dreamweaver to use the same character set to display existing

pages that don’t specify a particular encoding. It doesn’t insert any extra coding in

such pages.

Unicode Normalization Form is required only when using UTF-8 for encoding. It

should normally be set to C (Canonical Decomposition, followed by Canonical

Composition), and the Include Unicode Signature (BOM) checkbox should be deselected.

If you use any other encoding, set Unicode Normalization Form to None.

Choosing the default document type Many people misunderstand the purpose of the DTD

(the DOCTYPE declaration before the opening <html> tag). It simply tells the browser how

you have coded your page and is intended to speed up the correct rendering of your

design. It’s not a badge of honor or magic spell that somehow renders your web pages

future-proof. The default setting in Dreamweaver CS3 is XHTML 1.0 Transitional, and this is

the appropriate choice for most people when creating a new web page as long as you

understand the stricter rules imposed by XHTML.

Visit www.w3.org/TR/xhtml1/#diffs to learn about the differences

between HTML and XHTML. Also read the frequently asked questions

at www.w3.org/MarkUp/2004/xhtml-faq.

 

Technorati Tags: DREAMWEAVER CS3 WITH CSS,AJAX,AND PHP 01