DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP 02

The full range of options is as follows:

None: Don’t use—all pages should have a DOCTYPE declaration.

HTML 4.01 Transitional: Choose this if you don’t want to use XHTML.

HTML 4.01 Strict: This excludes deprecated elements (those destined for eventual

elimination)—use this only if you have a good knowledge of HTML and have made

a conscious decision not to use XHTML.

XHTML 1.0 Transitional: This offers the same flexibility as HTML 4.01 Transitional by

permitting the use of deprecated elements but applies the stricter rules of XML.

XHTML 1.0 Strict: This excludes all deprecated elements—use this only if you are

competent with XHTML.

XHTML 1.1: Don’t use—this DTD should not be used on pages delivered using the

text/html MIME type, the current standard for web servers.

XHTML Mobile 1.0: This is a subset of XHTML Basic for mobile devices—you can find

the full specification at http://www.openmobilealliance.org/tech/affiliates/wap/

wap-277-xhtmlmp-20011029-a.pdf.

If you choose an HTML document type, Dreamweaver automatically creates code according

to the HTML specification. Similarly, if you choose XHTML, your code automatically

follows the stricter rules, using lowercase for tag names and event handlers and inserting

a closing slash in empty tags such as <img>. You need to be careful when copying and pasting

code from other sources. If you’re not sure about the quality of the code, run

Commands ä Clean Up XHTML, which should correct most, if not all, problems.

If you select a Strict DTD, it’s important to realize that Dreamweaver does not prevent you

from using deprecated elements or attributes. Dreamweaver expects you to understand

the difference yourself.

Choosing the default encoding The decision to switch the default encoding in

Dreamweaver CS3 to Unicode (UTF-8) makes a lot of sense. Unicode supports nearly every

known writing system, so—as long as you have the right fonts on your computer—you can

combine Spanish, Russian, Chinese, and English all on the same web page. All modern

browsers support UTF-8, so there is no reason you shouldn’t use it. But—and it’s a big

but—this book concentrates heavily on using PHP and the MySQL database. Versions of

MySQL prior to the 4.1 series do not support UTF-8. If your hosting company uses MySQL

3.23 or 4.0, you might need to change the default encoding for your web pages. See

“Understanding collation” in Chapter 13.

Exploring the workspace

1-4 shows the default Windows workspace with a web page under construction and

all the main areas labeled. The main part of the workspace is occupied by the Document

window, which includes everything from the Document toolbar to the Tag selector.

DREAMWEAVER CS3—

7

1

1-4. The Dreamweaver workspace remains basically unchanged.

As you can see from 1-5, the Mac workspace is virtually the same. In harmony with

other Mac programs, the Close, Minimize, and Zoom buttons are at the top left of the

Document window. The Document window’s tabbed interface is displayed only when more

than one document is open. If you want the Mac version to display tabs all the time, open

Preferences from the Dreamweaver menu, select the General category, and check the

option labeled Always show tabs. Alternatively, if you don’t want the tabbed interface, deselect

the Open documents in tabs option.

Two other points to note about the Mac workspace: you can close a tab by clicking the 5

in a circle to the left of the file name; and the Property inspector overlaps the Files panel

on a 10245768 resolution monitor (the minimum display required for Dreamweaver CS3).

As a result, on a small monitor the Property inspector flops in front of or behind the Files

panel, depending on whether it has focus. This results in some icons being hidden, but you

can bring them back into view by clicking in any blank space in the Property inspector.

Alternatively, resize the Files panel to make room.

The main menus run across the top just below the title bar. The menus provide access to

all features, but I prefer to work directly in the workspace with Dreamweaver’s visual tools,

each of which I’ll describe briefly.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

8

1-5. Apart from a few minor differences, the Mac workspace is identical to Windows.

Insert bar

The Insert bar is really a collection of toolbars used to perform the most frequently used

operations in building web pages. It’s organized as a tabbed interface. 1-6 shows the

Common tab. When you first launch Dreamweaver, there are six other tabs (or categories).

Additional, context-sensitive tabs are displayed only when the features can be used in a

particular page, such as when using PHP or the XSL Transformation server behavior. The

tabs organize program features in logical groups, so some commonly used features, such

as tables and <div> tags, are duplicated on more than one tab to save time switching back

and forth.

1-6. The Common tab of the Insert bar houses some of the most frequently used operations.

If space is at a premium, you can save a few pixels of vertical space by switching to the

menu style shown in 1-7. Click the name at the left end to reveal a menu of available

categories. However, it takes two clicks to change categories, so you’ll probably find

the tabbed interface more convenient. Alternatively, you can put frequently used items in

the Favorites category as described shortly.

1-7. The Insert bar has an alternative menu style that saves a little space.

DREAMWEAVER CS3—

9

1

To use the menu style, click the panel Options menu button (shown alongside) at the top

right of the Insert bar, and select Show as Menu. To restore the tabbed interface, click the

category name at the left end of the Insert bar, and select Show as Tabs from the bottom

of the menu.

Table 1-1 describes briefly what each category contains. Although the Insert bar will look

familiar to users of previous versions of Dreamweaver, it has been revamped with many

new items and the removal of some old ones. For the benefit of readers upgrading from

Dreamweaver 8, I have indicated the main changes.

Table 1-1. The main features of Insert bar tabs (categories)

Tab/category Description Changes from Dreamweaver 8

Common Inserts the most commonly used Now contains all tags related

objects, such as tables, images, with <head> and <script>

and <div> tags. from the old HTML category.

Layout Offers various tools for layout, Layout Mode was removed

including table modification, but remains accessible

frames, and Spry widgets, such through View ä Table Mode ä

as menu bar (see Chapter 7), Layout Mode.

and tabbed and collapsible

panels (see Chapter 8).

Forms Creates forms and inserts all form No change, apart from the

elements, including Spry validation addition of Spry validation

widgets (forms and Spry validation widgets.

are covered in Chapter 9).

Data Offers access to most dynamic Previously the Application

features, including Spry data sets category. Import Tabular Data

(see Chapter 19) and PHP server (for CSV files) has been

behaviors (see Chapter 14 onward). relocated here from the

Also imports data from comma- Layout category. Addition of

separated value (CSV) files into Spry data features.

a static web page.

Spry All Spry features gathered in a New.

single category.

Text Provides an alternative to the Font Tag Editor was removed.

Property inspector for common

formatting options. Also, home

to definition list and HTML entities.

Favorites Left blank for you to customize. For backward compatibility,

gives access to the HTML and

Flash elements categories,

which have been removed

from the main Insert bar.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

10

Selecting options from the Insert bar To see what each button is

for, hold your mouse pointer over it, and a tooltip appears. Some

buttons have a little down arrow alongside them to the right. The

first time you click one of these buttons, Dreamweaver displays a

menu showing all options, as shown in the screenshot alongside.

Dreamweaver remembers your selection and always displays the

most recently used option. If you want to use the same option

again, click the button itself. To select a different option, click the

arrow to the right to reveal the menu again.

Customizing the Favorites category If switching among categories becomes too timeconsuming,

you can populate the Favorites category with your most frequently used items.

Select the Favorites tab, right-click, and select Customize Favorites from the context menu.

The drop-down menu at the top left of the Customize Favorite Objects dialog box (shown

in 1-8) lets you choose either from a master list or from individual categories. In the

left panel, select one item at a time, and click the button with the double chevron to add

it to the Favorite objects panel on the right. To remove an item, select it in the right panel,

and click the trash can button at the top right. The up and down arrows can be used to

change the position of the selected item, and the Add separator button inserts a separator

after the current item.

1-8. You can customize the Favorites category of the Insert bar for quick

access to frequently used options.

The Customize Favorite Objects dialog box gives access to all Insert bar categories, including

context-sensitive ones, such as PHP, as well as to items that have been removed since

Dreamweaver 8.

To copy your Favorites to a different computer, follow the instructions at the end of the

next section.

Document window

By default, Dreamweaver displays each web page in a tabbed interface. Tabs are created

left to right in the same order as the pages are opened, but you can drag and drop them

DREAMWEAVER CS3—

11

1

into any order. You can also tidy up the workspace by right-clicking any tab to reveal a

context menu that, among other things, lets you close the individual tab, close all tabs, or

close them all except the current one.

Document toolbar Running across the top of the Document window is the Document toolbar,

shown in 1-9. The three buttons on the left are the most important, as they let

you switch quickly between Code view, Design view, and a combination of both called Split

view, as shown in Figures 1-4 and 1-5. The Live Data view button is displayed only in

dynamic pages, such as a PHP page. It processes server-side code to show you a good

approximation of what the page will look like when parsed by a web server. Before you can

use Live Data view, you need to define a testing server as described in Chapter 4.

1-9. The Document toolbar mainly controls how your main work environment looks.

The following list briefly describes the other options on the Document toolbar:

Title: This is where you enter the document title that is displayed in the browser

title bar.

File management: This offers a quick way of uploading and downloading the current

file to and from your remote server. Setting the connection details is covered in

Chapter 4.

Preview in browser: This displays the current page in a browser or Device Central

(see “Checking what your page will look like in other media” later in this chapter).

Refresh: This refreshes Design view. It’s used only when you’re working in the

underlying code in Split view. Otherwise, Design view refreshes automatically.

View options: This turns rulers and guides on and off.

Visual aids: This controls the CSS visual aids described in “Using visual aids to understand

your CSS structure” later in this chapter.

Validate: This option checks your document, selected files, or the entire site against

World Wide Web Consortium (W3C) standards. Dreamweaver’s validator misses

some errors, particularly when checking pages against a Strict Document Type

Definition (DTD). Double-check against the official W3C Markup Validation Service

at http://validator.w3.org.

Check page: This runs checks for browser compatibility (see “Checking for browser

bugs” later in the chapter) and accessibility.

Code view This is where you work directly with all the XHTML, PHP, and other code that

controls your web page. Even if you rarely touch the code yourself, it’s important to

understand what’s happening in Code view. PHP code inserted in the wrong place will

bring your page down like a house of cards.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

12

Design view This renders your page as it should look in a standards-compliant browser.

The CSS rendering in Dreamweaver CS3 is generally very accurate, but don’t fall into the

trap of regarding Dreamweaver as a WYSIWYG (what you see is what you get) web page

builder. It’s an excellent visual design tool, but you need a solid understanding of XHTML

and CSS to use it to its best advantage.

Tag selector The status bar at the bottom of the Document window displays a hierarchical

view of the document indicating where the insertion point is at any given moment. As

1-10 shows, clicking one of the tags in the Tag selector highlights the element in

both Design view and Code view. This is extremely useful for editing an element or applying

a dynamic behavior to it. Right-clicking a tag in the Tag selector brings up a context

menu with a useful selection of editing options, including the ability to add an ID or a class

to the element. The Tag selector fulfils a similar role to the GoLive Markup Tree bar.

1-10. Clicking a tag in the Tag selector highlights the

element in Design view, as well as the underlying code.

Property inspector This context-sensitive panel gives direct access to all the main attributes

of the currently selected element. It’s equivalent to the Inspector palette in GoLive.

Panel groups The panel groups, which are displayed by default on the right of the screen,

give you access to more detailed or specialized features. Clicking a panel group’s title bar

toggles it open and closed. The most important one is the Files panel, which not only displays

the file hierarchy of your site but also ensures that all internal links are updated and

controls uploading and downloading to and from your remote server.

DREAMWEAVER CS3—

13

1

Organizing your workspace

The Windows version of Dreamweaver CS3 comes with three workspace layouts: Designer,

Coder, and Dual Screen. Designer is the default layout shown in 1-4. Coder puts the

panel groups on the left of the screen with the Property inspector collapsed. Dual Screen

detaches the panel groups and Property inspector and opens a separate Code Inspector,

ready for you to arrange as you like. The Mac version has two preset options: the Default

layout shown in 1-5 and the Dual Screen option.

To select a layout, go to Window ä Workspace Layout, and choose the layout you want

to use.

Rearranging panels

The preset layouts are just a start. You can undock any

panel group by hovering your mouse pointer over the

left side of a panel’s title bar until it turns into a fourheaded

arrow, as shown alongside (or a hand on the

Mac version). Hold down your mouse button, and drag

the panel to wherever you want.

Saving and sharing customized workspace layouts

In addition to undocking panel groups, you can reorganize the panels into different groups

to suit your own preferences or to reflect different priorities for various projects. To move

a panel, open its parent panel group, and select the panel you want to move. Then rightclick

the icon on the right of the panel group’s title bar to display the Options menu, as

shown in the following screenshot. You can choose to move the panel to an existing group

or to create a new panel group. The menu also offers other options, including renaming

the panel group. (The same options are available from a much larger menu if you use your

main mouse button.)

Once everything is the way you want it, save the new layout by choosing Window ä

Workspace Layout ä Save Current. The name of your customized workspace appears at the

top of the Workspace Layout submenu. There is no limit to the number of preset layouts

that you can create, and you can switch freely between layouts without restarting the program.

To rename or remove customized layouts, use the Manage option at the bottom of

the Workspace Layout submenu.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

14

You can transfer customized layouts to another computer by copying the XML files that

store the details. In Windows XP, the files are in C:\Documents and Settings\<username>\

Application Data\Adobe\Dreamweaver 9\Configuration\Workspace, where <username>

is the Windows account to which you are currently logged in. In Vista, they’re in C:\Users\

<username>\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Workspace. If you

can’t see the Application Data or AppData folder, see the next section, “Accessing hidden

files and folders in Windows.”

On a Mac, they are in Macintosh HD:Users:<username>:Library:Application Support:

Adobe:Dreamweaver 9:Configuration:Workspace.

The files have the same name that you used to save the layout. Simply copy them to the

other computer, and restart Dreamweaver. Since they’re XML, you can share them among

Windows and Mac users.

Accessing hidden files and folders in Windows

Most Dreamweaver configuration files are hidden by default in Windows XP and Vista. To

edit or copy them, you need to enable the option to view hidden files and folders. Once

you turn on this option, hidden folders are displayed as dimmed icons to remind you to

treat them with care.

In Windows XP, go to Start ä My Computer ä Tools ä Folder Options ä View. In Advanced

settings, select Show hidden files and folders. In Vista, go to Start ä Computer ä Organize ä

Folder and Search Options ä View. In Advanced settings, select Show hidden files and folders.

Displaying optional toolbars

Bizarre though it may seem, the Standard toolbar (see following screenshot) is not displayed

by default. To display it, go to View ä Toolbars, and select Standard. Alternatively,

right-click any toolbar, and select Standard from the context menu.

Dreamweaver automatically locates the Standard toolbar—which contains common file

functions such as New Document, Open, Save, Print, Cut, Copy, and Paste—immediately

below the Document toolbar. This isn’t really very helpful, because it means the toolbar

disappears as soon as all documents are closed.

However, on Windows you can move the Standard toolbar by positioning your mouse

pointer over the double row of dots at the left edge, holding down the main mouse button,

and dragging and dropping the toolbar to a new location. If you have a wide monitor,

you can place it alongside the Insert bar. Alternatively, dock it directly underneath the

Insert bar. It then remains available at all times.

On a Mac, there appears to be no way of undocking the Standard toolbar from the

Document toolbar.

Temporarily hiding all panels

When you want to clear the onscreen clutter to see your design in all its glory, just press

F4, and all the panels disappear, leaving the Document window on its own. In Windows,

DREAMWEAVER CS3—

15

1

the Document window expands to fill the entire workspace. On a Mac, panels disappear,

but the Document window doesn’t change size. Press F4 again: the panels return, and on

Windows, the Document window shrinks back to fit inside the workspace.

Organizing visual assets with Bridge

If you have used Adobe Creative Suite 2, you’ll already be familiar with Bridge, although it

has undergone a considerable transformation in CS3. It’s a powerful file organizer with

features designed to appeal to photographers and designers, and it now comes bundled

with Dreamweaver CS3. To do Bridge justice would require several chapters, so I’ll concentrate

on the main points that apply to Dreamweaver.

You can launch Bridge CS3 either from the Start menu in Windows and Applications in Mac

OS X or from inside Dreamweaver or any other CS3 program. To launch Bridge from inside

Dreamweaver, go to File ä Browse in Bridge, or click the Browse in Bridge button on the

Standard toolbar (shown alongside).

Bridge is a large program, so it doesn’t appear instantly. The advantage of launching Bridge

from inside Dreamweaver is that it automatically displays the root folder of the current

site in the Content tab. 1-11 shows the default layout of Bridge after navigating to a

site’s main images folder.

1-11. Bridge CS3 makes it easy to view and organize a website’s visual assets.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

16

The Content tab in the center displays the contents of the selected folder. At first glance, it

may not look very different from Windows Explorer or Mac Finder, but the first thing you’ll

notice is that if you have Flash movies (SWF files) or video (FLV), Fireworks PNG files,

Photoshop PSD files, or Adobe Illustrator AI files, you can see a thumbnail of the contents,

rather than an icon. You can also play Flash video and see the contents of most PDF files.

You can even flip through the pages of a PDF in the Preview panel at the top right.

Two features that will appeal to digital photographers are the abilities to use Bridge to

import photos directly from your camera (File ä Get Photos from Camera) and to preview

photos stored in Camera Raw, the generic name given to the native format of most

middle-range and professional-level digital cameras.

Controlling thumbnails

The thumbnails in the Content tab are scalable. Just drag the pointer at the right end of the

Bridge status bar to make them bigger or smaller. If the thumbnails look blurred, switch

the default to High Quality Thumbnails by opening the Preferences panel (Edit ä Preferences

or Bridge ä Preferences on a Mac) and selecting the Thumbnails category. The Thumbnails

category in Preferences also lets you choose other information to be displayed under the

thumbnail in addition to the file name.

Once a thumbnail has been generated, Bridge caches it in a central folder to speed up the

program’s performance. By default, the cache is created in your own user folders, but you

can change the location through the Advanced category of Preferences. It’s a good idea to

purge the cache from time to time to avoid clogging up your hard disk with thumbnails of

files no longer in use. You can clear the entire cache by clicking the Purge Cache button in

the Advanced category of Preferences. To clear the cached thumbnails for a single folder,

go to Tools ä Cache, and select Purge Cache for Folder “foldername”.

As well as the default view shown in 1-11, there are two other layouts: Filmstrip

Focus and Metadata Focus (which displays metadata alongside the thumbnail). You can

quickly switch between views by clicking one of the numbers at the bottom right of the

Bridge status bar.

If you want to display your images in their full glory, Bridge can create a full-screen

slideshow (View ä Slideshow or Slideshow Options). Press Esc to exit the slideshow.

Adding metadata

To get the most out of Bridge’s powerful search capabilities, you need to input information

about your images, such as keywords, designer/photographer, ranking (you can give

images star ratings), and so on. You fill in these details in the Metadata and Keywords tabs

at the bottom right of the default view.

Renaming files

One of the most useful features of Bridge is its ability to rename large numbers of files.

Let’s say you have just received a batch of photos from a client and they have meaningless

names such as DSC_0417.jpg. You can rename them all in seconds by selecting them in

DREAMWEAVER CS3—

17

1

Bridge and going to Tools ä Batch Rename. The options allow you to build up complex yet

meaningful names. You can rename the existing files in the same folder or make renamed

copies in a different folder.

Although you can use the batch rename feature to change the file name extension of all

files in a website from .html to .php, the integration with Dreamweaver is not smart

enough to update all internal links inside the files. This would be a useful addition to a

future version.

Dragging and dropping files

You can drag and drop any file directly from Bridge into Dreamweaver or another CS3 program.

If you drag an image into Dreamweaver, it’s inserted into the page wherever you

drop it, automatically creating the necessary XHTML. If you drag an image into Fireworks,

it’s immediately ready for editing.

Creating standards-compliant web pages

No sooner was Dreamweaver 8 out of the door than a team of Dreamweaver engineers

were recruited for a secret mission known as Project Hoover, a reference to the wellknown

brand of vacuum cleaners. The team’s task has been to sweep up relics of the past,

removing obsolete tags and markup from the code that Dreamweaver creates when laying

out a web page. Web standardistas will be quick to point out that the job isn’t complete,

but the team has trodden a delicate path between striving for full standards compliance

and maintaining backward compatibility with existing sites. I understand that the team

members haven’t packed away their coveralls; they plan to keep on vacuuming as they

work on the next release. They’re not ready to flip the Hoover off switch just yet.

Enhanced CSS support

In spite of some failings, particularly in regard to ensuring full compliance with a Strict

DTD—which is still left up to the user—I think it’s fair to say that Dreamweaver CS3 is the

most standards-compliant version of the program yet. It comes with an impressive array of

standard layouts, styled with fully-commented CSS. The handling of CSS style rules and the

visual rendering of pages in Design view are much improved. Dreamweaver CS3 is

browser-neutral: unlike the previous version, it doesn’t attempt to emulate Internet

Explorer 6. Instead, it attempts to render styles according to the CSS 2.1 recommendation

laid down by W3C—and mostly succeeds.

As part of Project Hoover, Dreamweaver dropped proprietary terminology in favor of

more descriptive terms.

Layers are dead . . . Welcome, AP elements

One important change for existing Dreamweaver users and those migrating from GoLive is

that layers are dead. Since a layer is really a <div> that has been absolutely positioned with

CSS, Dreamweaver CS3 now calls them AP elements. While this may seem a cosmetic

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

18

change, the idea is to clarify how they fit into a web page. What’s more, any tag can be

used to create an AP element, not just a <div>.

1-12 shows how Dreamweaver CS3 renders the following code (it’s in examples/

ch01/classof58.html in the download files):

<div id=”wrapper”>

<img id=”header” src=”images/header.jpg” alt=”Class of 58″ å

width=”720″ height=”175″ />

<ul id=”nav”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>2006 Reunion</a></li>

<li><a href=”#”>Memory Lane </a> </li>

<li><a href=”#”>Roll call</a></li>

<li><a href=”#”</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

The wrapper <div> is relatively positioned to center the whole page in the browser and

contains two absolutely positioned elements: an image with the ID header and an

unordered list with the ID nav. As you can see, the AP Elements panel on the right of the

lists both absolutely positioned elements but not the relatively positioned one. In

previous versions of Dreamweaver, the Layers panel ignored absolutely positioned elements

unless they used a <div> tag.

1-12. Dreamweaver CS3 lists all absolutely positioned elements in the new AP Elements panel.

For backward compatibility, “layers” still live on in the name of the JavaScript function

associated with one of the Dreamweaver behaviors. Although the Show/Hide Layers

behavior has been renamed Show/Hide Elements, the function is still called

MM_showHideLayers. However, the behavior now handles any element that has an ID.

Behaviors are covered in the next chapter.

DREAMWEAVER CS3—

19

1

This new arrangement gives you much greater flexibility and control over your CSS.

There’s no longer any need to litter your code with unnecessary <div> tags, and the AP

Elements panel provides an instant snapshot of the absolutely positioned elements on your

page. You can drag and drop elements within the panel to change their z-index property,

and the eye icon on the left of the panel changes the visibility property. AP elements

nested inside another AP element are indented, and if you realize that the nesting is causing

an element to be displayed in the wrong place, you can separate them by dragging the

nested element to the left of the panel. Changes made in the AP Elements panel automatically

update the element’s style rules, even if they are in a separate style sheet.

Seeing the impact of CSS changes in real time

Grouped together with the AP Elements panel is the CSS Styles panel, which lets you

inspect and edit style rules without leaving Design view. As a result, you can see immediately

how your changes affect the layout of the page and tweak them until you get the

desired result. Like many features in Dreamweaver, the CSS Styles panel is context sensitive.

1-13 shows the styles for the nav unordered list in classof58.html. The properties

for the #nav ID selector are shown in the lower section of the panel, while the upper

sections show all the rules that affect the element currently selected in Design view. This

helps you understand how the rules are cascaded down to a particular element, making it

easier to troubleshoot styles that don’t work the way you expect. Chapters 5 and 6 show

you how to make effective use of the CSS Styles panel.

1-13.

The CSS Styles panel shows which styles in the

cascade affect the selected element.

The style rules for classof58.html are in classof58.css in the styles folder.

This example has been deliberately designed to demonstrate a new feature of

Dreamweaver CS3. I don’t necessarily recommend the use of AP elements to

achieve this particular layout.

DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP

20

Improved style sheet management

A major innovation in Dreamweaver CS3 is the ability to drag and drop selectors in the

CSS Styles panel to reorder style blocks in your style sheet. You can also move styles out

of the <head> of a document into a new or an existing style sheet with just a couple of

mouse clicks. The target style sheet doesn’t even need to exist or to be open; everything

happens automatically.

If you have old-style layers with inline styles, you can clean up your pages easily by using

the Convert Inline CSS to Rule feature to move the rules into the <head> of the document

or an external style sheet. It doesn’t matter whether you’re in Code view or Design view; as

long as your cursor is anywhere inside a layer, just right-click and select CSS Styles ä

Convert Inline CSS to Rule from the context menu. Dreamweaver presents you with the dialog

box shown in 1-14.

1-14. As long as your cursor is inside a layer, Dreamweaver can move the

inline styles to an external style sheet or the head of the document.

Dreamweaver automatically chooses the ID as the name of the selector for the new rule.

Although you can change the name in the dialog box, this affects only the new style rule.

It doesn’t change the ID of the <div>. You can convert only one layer at a time, but it’s a

much quicker and more accurate way of tidying up legacy pages than attempting to cut

and paste everything manually. The Convert to drop-down menu at the top left of the

Convert Inline CSS dialog box has two other options: to create a class based on the inline

styles or to apply the styles to all <div> elements. They are there for completeness and

should be used rarely, if ever. You can test this feature using layers.html in

examples/ch01.

Another small improvement to CSS management in Dreamweaver CS3 is the option to

clean up the formatting of style rules by selecting Apply Source Formatting from the

Commands menu. The available formatting options are shown in 1-15. They’re very

basic in comparison with a dedicated CSS editor like TopStyle Pro but are nevertheless a

welcome addition. To access the CSS Source Format Options dialog box, go to Preferences

on the Edit menu (Dreamweaver menu on a Mac), select the Code Format category, and

click the Advanced Formatting CSS button.

DREAMWEAVER CS3—

21

1

1-15. You can tell Dreamweaver CS3 how you prefer

style sheets to be laid out.

Using visual aids to understand your CSS structure

Dreamweaver’s visual aids are a powerful feature that helps you visualize the underlying

structure of your page by highlighting individual block elements and their associated

padding and margins in Design view. Most visual aids are turned on by default but remain

in the background until you select a particular block element, such as a <div> or <table>.

1-16 shows one of the preset layouts with the container <div> selected in the Tag

selector (the file is also in examples/ch01/visualaids.html).

1-16. Dreamweaver lets you see the underlying structure of your page with powerful

visual aids.

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 http://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