4

Introduction to theDreamweaver Interface

A Start Screen

Provides a central location to selectrecently opened files, create newdocuments in various file types, orcreate documents from samples.

W ith Dreamweaver CS4, Adobe has radicallyreengineered the Dreamweaver interfaceto provide a more unified experience

across all of the Creative Suite applications. If you arefamiliar with Photoshop or Illustrator, many of theinterface elements will be familiar to you.

The Dreamweaver interface is made up of three basicelements: the menu bar, the panels, and the mainworkspace. When you first launch Dreamweaver, themain workspace displays the Start Screen.

IA

J

HGFE

DCB

B Menu Bar

Provides access to menusand commands.

C Layout Menu

Allows you to switchlayouts.

D Extend DreamweaverMenu

Accesses online tools toadd additional features toDreamweaver.

E Site Menu

Provides commands forsetting up and modifyingsite definitions.

F Workspace Menu

Allows you to switch betweenDreamweaver’s variousworkspace layouts.

G Search Box

Search Dreamweaver’shelp files directly bytyping a term here.

H Collapse Panelsto Icons

Collapses thepanels to icons.

I Panels

Collapsible panelsprovide most of thefunctionality in theprogram.

J Property Inspector

Allows you to changeproperties of objects onyour Web page.

05_396698-ch01.qxp 12/23/08 3:39 PM Page 4

COPYRIG

HTED M

ATERIAL

Open a Blank Web Page

Open a Blank Web PageY ou can get started creating Web pages in

Dreamweaver very quickly by creating anew, blank page. You can then add content

and design to your page as you like.

For example, in Windows Vista, Dreamweaver can belaunched by clicking the Start button, and thenclicking All Programs. Depending on whether youpurchased Dreamweaver as a stand-alone product orpart of one of the Creative Suite packages, you willfind an appropriately labeled Adobe folder fromwhich you can click Dreamweaver CS4.

The Start Page, which displays when Dreamweaverfirst opens or when you have no other documentsopen, provides quick links to create a blank page in avariety of formats. HTML creates a basic blankdocument. ColdFusion, PHP, and ASP VBScript createpages that allow you to start building dynamic sites,a topic that is covered in detail in Part IV of thisbook. XSLT is a special format that works with XMLdocuments. The final three page options create aCascading Style Sheet, JavaScript, or an XMLdocument. The final option in the column lets youset up a Dreamweaver site, which is covered inChapter 2.

2

•

1 Open Adobe Dreamweaver CS4.

2 Click HTML.

PA

RT

IExplore the Dreamweaver Workspace

5

chapter 1

• A new, blank document opens.

05_396698-ch01.qxp 12/23/08 3:39 PM Page 5

Add Text in Design View

Add Text in Design ViewY ou can use Dreamweaver’s Design view to see

a representation of what your page may looklike in a Web browser. You can create entire

pages, and even entire sites, in Design view withoutever touching the underlying code. As you insertobjects into your page in Design view, Dreamweaverwrites the code for you, using proper (X)HTML,Cascading Style Sheets (CSS), JavaScript, or otherlanguages based on the document type and yourpreferences. Conversely, any items you delete fromDesign view have their corresponding code deleted as well.

The Property Inspector, the panel that runs along thebottom of the screen, allows you to modify theproperties or settings of objects after you haveinserted them. These changes are immediatelyreflected in the Design view interface, as are any otherchanges that you make through other panels.

While Design view gives you a representation of whatyour page will look like in a Web browser, it alsodisplays additional page elements that may assist youin designing and working with your documents butthat would not normally appear in a Web browser.

1

2

1 Click Design from the Document toolbar.

The document displays in Design view.

6

2 Type some text in the page.

The text displays as it would in a Web browser.

05_396698-ch01.qxp 12/23/08 3:39 PM Page 6

Enter Code in Code View

Enter Code in Code ViewY ou can accomplish most of your work in

Dreamweaver in Design view, but there maybe times when you need to edit the

underlying code of a page directly. For thesesituations, Dreamweaver provides a powerful code-editing environment.

Code view allows you to enter (X)HTML, CSS,JavaScript, or other code. It provides code hints forall of the languages it supports, as well as linenumbers and customizable color-coding to makereading and editing code easier.

All of the panels that you use in Design view to workwith your pages are available in Code view. Anychanges made in Code view are reflected in Designview, and vice versa, and so it is possible to freelyswitch between the two views as needed whileediting pages.

The Code view toolbar gives you additionalfunctionality when working in this environment.Running down the left edge of the screen, thetoolbar lets you open pages, expand and collapseblocks of code, turn line numbering on and off,insert and remove comments, and more.

•

••

3

1

2

4 5 6

1 Click Code in the Document toolbar.

The document switches to Code view.

2 Type < to begin a new HTML tag.

3 From the code hints, select an element youwant to use and then press Enter.

• Dreamweaver inserts the tag name.

PA

RT

IExplore the Dreamweaver Workspace

7

chapter 1

4 Type > to finish the tag.

5 Type the text to be marked up by the tag.

6 Type </.

• Dreamweaver inserts the closing tag.

05_396698-ch01.qxp 12/23/08 3:39 PM Page 7

Explore Split View

Explore Split ViewD reamweaver offers a third view that provides

the best features of both Design and Codeview. Split view divides the screen in half,

showing Code view on the top of the screen andDesign view on the bottom, although you can switchthese if you prefer. A divider bar that separates thetwo allows you to give more screen space to eitherview as needed.

Clicking in the Design half of the screen allows you towork in the same way you would in Design view, butyou are now able to see the underlying code as

Dreamweaver writes it. The reverse is also true: if youclick in the Code half and type code, you see theresults appear in real-time in Design view.

The disadvantage of Split view is that, except for verylarge monitors, you do not have much room in eitherof the two sections to work effectively, and so manydesigners use it sparingly. However, it is a good way tohave Dreamweaver help teach you the code, as youcan focus on your work in the Design section but thenimmediately see the associated code.

4

1

3

2

1 Click Split in the Document toolbar.

The document displays in Split view.

2 Click-and-drag the gray bar that separates thetwo sections to resize them.

Dreamweaver resizes the sections.

3 Click View.

4 Click Design View on Top.

8

05_396698-ch01.qxp 12/23/08 3:39 PM Page 8

Can I select the same portion of the pagein both the Code and Design sections ofthe Split view?

Yes. Any page element you select in theDesign pane automatically has its codeselected in the Code pane, and vice versa.There may be times when you need to edita piece of code in a particularly long pagewhere it can be difficult to find the specificblock of text. Using the Split view, youcould scroll the Design section to thesection you need to edit, and immediatelythe Code view scrolls to that same sectionof the page and places your cursor in thecode that matches the Design selection.

Can I split the screen vertically as well ashorizontally?

Yes. In Dreamweaver CS4, you can orientthe split to show the pages side-by-side,rather than having one on top of theother. When you are in Split view, clickView, and then click Split Vertically.Dreamweaver will remember this settinguntil you deselect it, and so if you switchback to Design or Code view, your screenwill still split vertically next time you switchto Split view. When you are using thevertical split, you can choose on which sidethe Design screen and Code screensappear by clicking Edit, and then clickingDesign View on Left.

Dreamweaver swaps the position ofthe Code and Design views.

5 Click in the Design view and typesome text.

• The text also appears in the Codeview.

PA

RT

IExplore the Dreamweaver Workspace

9

chapter 1

5

••

05_396698-ch01.qxp 12/23/08 3:39 PM Page 9

Explore the Panels

Explore the PanelsY ou can access most of the features of

Dreamweaver through panels along the sidesof the window. Each panel provides a specific

set of functions, and related panels are groupedtogether.

You can expand or collapse a panel by double-clickingthe tab that contains the panel’s name. When in apanel group, individual panels can be accessed byclicking the tabs. You can move panels to otherlocations on the screen or into other groups bydragging their tabs.

This set of panels that runs along the right edge of thescreen can be collapsed to icons with labels so that ittakes up very little room, a feature that is particularlyhandy for designers working on small screens. The setcan be further resized to show only icons as well.Once the panels have been collapsed to icons, youcan access a panel temporarily by clicking its icon. Thepanel collapses again as soon as you click elsewhereon the screen. The Window menu provides a list ofevery panel available in Dreamweaver, and allows youto open panels that are not currently visible.

••

••

2

1

4

•

3

1 Click Window.

• Dreamweaver displays a check mark next toeach panel that is currently open.

2 Double-click a panel’s tab to expand orcollapse it.

• In this example, the panel expands to showits features.

3 Click the Collapse to Icons button.

• The main panel set collapses to show iconsand labels.

4 Drag the left edge of the icons to the right.

The icons collapse further, hiding the labels.

10

05_396698-ch01.qxp 12/23/08 3:39 PM Page 10

Can I quickly show or hideall of the panels at once?

Yes. Simply press the F4key on your keyboard,which hides all of thepanels. Pressing F4 asecond time brings themall back, in the positions inwhich they were whenyou hid them.

Is it possible to hide all ofthe panels and then havethem simply appear whenI need them?

Yes. If you hide all of thepanels using the F4keyboard shortcut, yousee a gray bar where thepanels were. If you simplymove the mouse over thatbar, the panels in that areareappear, and thendisappear again when youmove your mouse awayfrom them.

Can I put panels on theother side of the screen?

Yes. You can drag panelsto any edge of the screen.When you see a thin blueline appear, release yourmouse and the paneldocks along that edge.You can also have twocolumns of panels alongeither the right or leftedge, or two rows alongthe top or bottom.

5 Click the Expand Panels button.

• The panel set expands.

6 Click-and-drag the Insert panel to the top of the screen, just below the menu bar.

The panel repositions itself.

7 Drag the tab of a panel.

The panel floats on the screen.

PA

RT

IExplore the Dreamweaver Workspace

11

chapter 1

6 5

05_396698-ch01.qxp 12/23/08 3:39 PM Page 11

View Workspaces

View WorkspacesD reamweaver provides a set of panel layouts

called workspaces. You can use theworkspace menu in the upper-right corner

of the screen to switch between workspaces wheneveryou want.

Eight workspaces are available by default in theprogram. Designer, the default workspace, showsthose panels most likely to be used by Web designerscreating static pages. App Developer and AppDeveloper Plus display the panels used by thosecreating dynamic Web sites, a topic covered in Part IVof this book.

Classic provides the panels that were available bydefault in older versions of Dreamweaver, and placesthe Insert panel along the top of the screen. Coderdisplays a set of panels along the left edge of thescreen, while Coder Plus adds several more along theright edge. Designer Compact shows the same panelsas Designer, but collapses them to icons by default.Dual Screen undocks all of the panels so that they arefloating and can be easily moved to another monitor.If you select a workspace, change its panel layout, andthen want to revert to the saved version, you can doso by reselecting the workspace from the menu.

•

12

3

1 Click Designer to access the Workspace menu.

2 Select Classic.

• Dreamweaver rearranges the panels.

3 From the Workspace menu, click DesignerCompact.

The panels are rearranged.

12

05_396698-ch01.qxp 12/23/08 3:39 PM Page 12

Can I create my own workspaces?

Yes. You should begin by selecting the pre-installed workspace that has the panelarrangement closest to the one you want.Then, you can move panels to otherlocations on the screen, close those panelsyou will not be using, or open and positionadditional panels. Once you have thepanel arrangement you want, you can clickthe workspace menu, choose NewWorkspace, and then give it a logicalname. It then appears with the otherworkspaces so that you can switch to itwhenever you want.

Can I delete workspaces?

You cannot delete any of the workspacesthat are preinstalled with Dreamweaver, butyou can rename or delete workspaces thatyou create by clicking the workspace menuand selecting Manage Workspaces. Thisdisplays a dialog box that lists all of theworkspaces you have created. When youselect one, you can rename or delete it.

4 Click-and-drag the Insert panel intothe middle of the screen.

The panel floats on the screen.

5 From the Workspace menu, clickDesigner Compact.

The panel layout is restored.

PA

RT

IExplore the Dreamweaver Workspace

13

chapter 1

4

5

05_396698-ch01.qxp 12/23/08 3:39 PM Page 13