macromedia Dreamweaver MX Bible phần 2 ppt

Table 3-4: continuedIcon Name Description Detailed Information Preformatted Text Inserts tags, to indicate See Chapter 7 that the text should be displayed “as is,” preserving spacingHead

Additional preferences settings, located in the Accessibility category of the Preferences dialogbox, also cause dialog boxes to appear when you insert an object using the Insert bar Theseaccessibility dialog boxes appear even if the Show Dialog When Inserting Objects option is clear.

Layout objects

Use the Layout category of the Insert bar to work with tables and layers — objects thatenable you to define the layout of your page Dreamweaver offers you two ways to work withtables — Standard view, where you define the structure of a table using dialog boxes, menucommands, and the Property inspector, and Layout view, where you create tables and cells

by drawing them The Layout objects enable you to switch between Layout and Standardview, and create tables in either view

In Windows, the Layout objects reside in a separate category only in the Dreamweaver MXand HomeSite/Coder Style workspaces On a Macintosh, the Layout objects reside in aseparate category only if the Insert bar is configured horizontally

In the Dreamweaver 4 workspace on Windows or if the Insert bar is configured vertically onMacintosh, the same layout controls are available, but they are not grouped into a separateLayout category Instead, the controls for switching between Standard and Layout view andfor drawing Layout tables and cells are visible on the Insert bar for every category, as shown

in Figure 3-16 The buttons for creating a table in Standard view and for drawing layers areavailable in the Common category of the Insert bar

Figure 3-16: In the Dreamweaver 4 workspace, the

layout objects for working with Layout tables are visible

in every category of the Insert bar

Draw Layout Table Draw Layout Cell

Layout ViewStandard View

Note

Due to the visual nature of tables and layers, many of the objects in the Layout category canonly be used in Design view

Table 3-3 describes the Layout objects

Table 3-3: Layout Category

Icon Name Description Detailed Information

Insert Table Creates a table at the cursor See Chapter 10(Available in Dreamweaver MX position in either Code view or

and HomeSite/Coder Style Design view This button is not workspaces for Windows, and available in Layout view If you when the Insert bar is in its are using the Dreamweaver 4 horizontal configuration on workspace for Windows, or if

a Macintosh) you are using a Macintosh with

the Insert bar in its vertical configuration, this button can be found in the Common category

Draw Layer Enables you to drag out a layer See Chapter 21(Available in Dreamweaver MX of a specific size and shape at a

and HomeSite/Coder Style specific location This button is workspaces for Windows, and not available in Layout view If when the Insert bar is in its you are using the Dreamweaver 4 horizontal configuration on workspace for Windows, or if

a Macintosh) you are using a Macintosh with

the Insert bar in its vertical configuration, this button can be found in the Common category

Standard view Switches the display of tables See Chapter 10(For Dreamweaver MX and to Standard view, in which you

HomeSite/Coder Style create tables and cells using workspaces in Windows or the menus, Table object, and when the Insert bar is in its Property inspector

horizontal configuration on

a Macintosh)Standard view Switches the display of tables See Chapter 10(For Dreamweaver 4 to “Standard view,” where you

workspace in Windows or create tables and cells usingwhen the Insert bar is in its the menus, Table object, andvertical configuration on Property inspector In the

a Macintosh) Dreamweaver 4 workspace

(Windows) or if the Insert bar

is in its vertical configuration (Macintosh), this button is available for every category

Continued

Note

Table 3-3: (continued)

Icon Name Description Detailed Information

Layout view Switches to a view of tables in See Chapter 10(For Dreamweaver MX and which you can draw tables and

HomeSite/Coder Style cells by dragging the mouseworkspaces in Windows or

when the Insert bar is in its horizontal configuration on

a Macintosh)Layout view Switches to a view of tables See Chapter 10(For Dreamweaver 4 in which you can draw tables

workspace in Windows or and cells by dragging the when the Insert bar is in mouse In the Dreamweaver 4 its vertical configuration workspace (Windows) or if

on a Macintosh) the Insert bar is in its vertical

configuration (Macintosh),this button is available for every category

Draw Layout Table Enables you to drag the See Chapter 10

mouse to create a new table

in a document This object

is only available in Layout view In the Dreamweaver 4 workspace (Windows) or if the Insert bar is in its vertical configuration (Macintosh), this button is available for every category

Draw Layout Cell Enables you to draw a cell See Chapter 10

within a table by dragging with the mouse This object

is only available in Layout view In the Dreamweaver 4 workspace (Windows) or if the Insert bar is in its vertical configuration (Macintosh), this button is available for every category

Text objects

The text objects represent the most commonly used text formatting HTML tags, such asthose needed to emphasize text, change the font face, or create bulleted lists Table 3-4describes the objects you’ll find in the Text category of the Insert bar

The Text objects behave differently, depending on whether you are working in Design view orCode view If you are working in Code view, Dreamweaver puts you in charge, and simply sur-rounds whatever text is selected with the appropriate HTML tags If no text is selected, thenthe tag pair is inserted at the current text insertion point

In Design view, selected text is also surrounded by the appropriate tag pair But in some tions, Dreamweaver does more than blindly surround the selected text with the specifiedHTML tags The following examples illustrate the additional processing that occurs in Designview:

situa-✦ In Design view the Paragraph, Preformatted Text, Heading 1, Heading 2, and Heading 3objects are treated as mutually exclusive If you select text that is formatted as aHeading 1, and then you click the Heading 2 button on the Insert bar, Dreamweaver notonly surrounds the selected text with <h2></h2> tags, but also removes the

<h1></h1>tags that were there before In Code view, Dreamweaver simply adds the

<h2></h2>tags without automatically removing the <h1></h1> tags

✦ When you select one or more paragraphs of text in Design view and then click theUnordered List button, Dreamweaver creates a bulleted list by inserting <ul></ul>

tags around the selected text, as in Code view But in Design view, Dreamweaver tionally converts each paragraph to be a separate item in that list by inserting theappropriate <li></li> tags The same is true for Ordered lists and Definition lists

addi-In Design view, if no text is selected when you click a button in the addi-Insert bar, no tags areadded until you start typing This feature helps prevent the inclusion of empty tag pairswithin your document

Table 3-4: Text Category

Icon Name Description Detailed Information

Font Tag Editor Opens the Tag Editor dialog box for the See Chapter 7

<font>tag, where you can specify font choices, such as font face, size, and colorBold Formats text as bold using either <b></b> See Chapter 7

or <strong></strong>tags The tag used depends on a setting in the General category of the Preferences dialog box

Italic Formats text as italic using <i></i> See Chapter 7

or <em></em>tags The tag used depends on a setting in the General category of the Preferences dialog box

Strong Formats text with strong emphasis, using See Chapter 7

<strong></strong>tags

Emphasis Adds emphasis to text using the See Chapter 7

<em></em>tag pair

Paragraph Creates a new paragraph by inserting the See Chapter 7

tags <p></p>

Block Quote Typically used to format long quotations, See Chapter 7

this inserts the tags <blockquote>

</blockquote>

Continued

Table 3-4: (continued)

Icon Name Description Detailed Information

Preformatted Text Inserts <pre></pre>tags, to indicate See Chapter 7

that the text should be displayed “as is,”

preserving spacingHeading 1 Formats text as a level 1 heading using See Chapter 7

the <h1></h1>tag pair

Heading 2 Formats text as a level 2 heading using See Chapter 7

the <h2></h2>tag pair

Heading 3 Formats text as a level 3 heading using See Chapter 7

the <h3></h3>tag pair

Unordered List Adds the code <ul></ul>, used to See Chapter 12

create a bulleted list

Ordered List Inserts <ol></ol>tags to create a See Chapter 12

numbered list

List Item Inserts the tags <li></li>, used to See Chapter 12

denote an item within an ordered or unordered list

Definition List Adds the HTML code <dl></dl>, which See Chapter 12

is used to surround a definition list

Definition Term Inserts the <dt></dt>tags, which See Chapter 12

denote a term within a definition list

Definition Description Inserts a <dd></dd>pair, which See Chapter 12

marks the definition portion of a definition list entry

Abbreviation Opens a dialog box in which you can See Chapter 7

enter the full text for the abbreviation, before inserting the <abbr></abbr>tagsAcronym Inserts <acronym></acronym>tags See Chapter 7

after opening a dialog box in which you can enter the expanded text of the acronym

Table objects

Primarily for use in Code view, the Tables category on the Insert bar provides quick access tothe HTML tags used in defining tables In Design view, only the Insert Table button is active inthe Tables category of the Insert bar The remaining objects are only available in Code view

In Design view, you can use instead the Layout objects on the Insert bar, the Property tor, and the menus to work with tables The objects in the Tables category are described inTable 3-5

inspec-Table 3-5: inspec-Tables Category

Icon Name Description Detailed Information

Insert Table Creates a table at the cursor position See Chapter 10

Table Tag Inserts just the <table></table> See Chapter 10

tags at the text insertion point or surrounding any selected text Only available in Code view

Table Row Inserts <tr></tr>tags at the text See Chapter 10

insertion point or surrounding selected text The <tr>tag denotes a row within a table Only available in Code view

Table Header Adds tags for a table header cell, See Chapter 10

<th></th>, at the text insertion point

or around the selected text Only available

in Code view

Table Data Inserts <td></td>tags, which demark See Chapter 10

a cell within a table The tags are added

at the text insertion point or surrounding any selected text Only available in Code view

Table Caption Inserts <caption></caption>tags at See Chapter 10

the text insertion point or around any selected text Only available in Code view

Frames objects

In HTML terms, a frame is a collection of separate pages arranged on a single screen Frames

are contained within framesets Because it involves multiple pages, creating a frameset canprove difficult for the novice designer However, the process for making standard framesets isgreatly simplified when using the Frames category objects The most commonly used designsare now immediately available Select any frame object, and the frameset is made, incorporat-ing the existing page

The blue, shaded area in the frame object icons indicates the frame in which the current page isplaced when the frameset is created For example, if you create a single page with the text

“Table of Contents” and then choose the Top Frame object, “Table of Contents” is moved belowthe newly inserted top frame All of the Frames category objects are described in Table 3-6

Table 3-6: Frames Category

Icon Name Description Detailed Information

Left Frame Inserts a blank frame to the left of the See Chapter 14

current page

Right Frame Inserts a blank frame to the right of See Chapter 14

the current page

Top Frame Inserts a blank frame above the See Chapter 14

of the other frames The current page

is placed in the upper-right frame

Bottom and Nested Makes a frameset with three frames, See Chapter 14Right Frame with the bottom frame spanning the

other frames The current page appears

in the upper-left frame

Left and Nested Opens a frameset with three frames See Chapter 14Bottom Frame The left frame spans the other frames

and Dreamweaver places the current page in the upper-right frame

Right and Nested Makes a frameset with three frames, See Chapter 14Bottom Frame with the right frame spanning the other

frames The current page is placed in the upper-left frame

Top and Bottom Inserts a three-frame frameset, with all See Chapter 14Frames frames spanning the width of the entire

window The current page goes in the center frame

Left and Nested Creates a frameset with three frames, See Chapter 14Top Frames with the left frame spanning the height

of the other frames Dreamweaver puts the current page in the lower-right frame

Icon Name Description Detailed Information

Right and Nested Inserts a frameset with three frames, See Chapter 14Top Frames with the right frame spanning the

height of the other frames The current page is placed in the lower-left frame

Top and Nested Creates a frameset with three frames, See Chapter 14Left Frames with the upper frame spanning the

width of the other frames The current page is put in the lower-right frame

Top and Nested Inserts a frameset with three frames, See Chapter 14Right Frames with the top frame spanning the other

frames Dreamweaver inserts the current page in the lower-left frame

Frameset Inserts the tags <frameset> See Chapter 14

</frameset>at the text insertion point or surrounding any selected text Only available in Code view

Frame Inserts the <frame>tag at the See Chapter 14

current text insertion point or around any selected text Only available in Code view

Floating Frame Inserts <iframe></iframe>tags See Chapter 14

to create a floating frame in the document The tags are inserted at the current text insertion point or around the current selection This object is available only in Code view

No Frames Inserts the tags <noframes> See Chapter 14

</noframes>, which surround alternative content viewed in browsers that don’t support frames Only available

in Code view

Forms objects

The form is the primary method for implementing HTML interactivity The Forms category ofthe Insert bar gives you the basic building blocks for creating your Web-based form Table 3-7describes each of the elements found in the Forms category

Table 3-7: Forms Category

Icon Name Description Detailed Information

Form Creates the overall HTML form structure See Chapter 11

at the cursor position In Code view only, Dreamweaver wraps the <form></form>

tags around any selected text

Text Field Places a text box or a text area at the See Chapter 11

cursor position

Hidden Field Inserts an invisible field used for passing See Chapter 11

variables to a CGI or JavaScript program

Textarea Inserts a multiline text box See Chapter 11

Checkbox Inserts a checkbox for selecting any See Chapter 11

number of options at the cursor position

Radio Button Inserts a radio button for making a single See Chapter 11

selection from a set of options at the cursor position

Radio Group Opens a dialog box in which you can See Chapter 11

define a group of related radio buttons

List/Menu Enables either a drop-down menu or a See Chapter 11

scrolling list at the cursor position

Jump Menu Opens a dialog box for building a See Chapter 11

pop-up menu that activates a link

Image Field Includes an image that can be used See Chapter 11

as a button

File Field Inserts a text box and Browse button See Chapter 11

for selecting a file to submit

Button Inserts a Submit, Reset, or user-definable See Chapter 11

button at the cursor position

Label Inserts a <label></label>tag pair in See Chapter 11

Code view If you are in Design view, selecting this button automatically switches the Document window to Code and Design view before inserting the tags

Fieldset Groups selected controls by inserting See Chapter 11

the tags <fieldset></fieldset>, with an optional legend

Template objects

Templates are special Dreamweaver documents that define the layout and visual design of apage Once you’ve set up a template, you can create new pages based on that template, orapply the template to existing pages in your site Pages based on a template inherit thattemplate’s design and layout The objects in the Templates category of the Insert bar aredescribed in Table 3-8

Table 3-8: Templates Category

Icon Name Description Detailed Information

Make Template Saves the current document as See Chapter 28

a template

Make Nested Makes a template based on another See Chapter 28

Editable Region Defines an area that can be modified See Chapter 28

in a document that is based on the template

Optional Region Delimits part of the template that may See Chapter 28

not appear within some of the documents that are based on the template

Repeating Region Defines structured content that may See Chapter 28

appear more than once within a document that is based on the templateEditable Optional Creates an area of optional content that See Chapter 28Region may be modified in documents based

on this templateRepeating Table Inserts a table with repeating editable See Chapter 28

rows into the template

Character objects

Certain special characters — such as the copyright symbol (©) — are represented in HTML by

codes called character entities In code, a character entity is either a name (such as &copy;

for the copyright symbol) or a number (&#169;) Each character entity has its own uniquecode

Dreamweaver eases the entry of these complex, hard-to-remember codes with the Characterscategory The most commonly used characters are included as separate objects, and anotherbutton opens a dialog box with additional special characters from which to choose Table 3-9details the Characters category objects The Characters category also contains objects forinserting a line break and a non-breaking space

Table 3-9: Characters Category

Icon Name Description Detailed Information

Line Break Inserts a <br>tag that causes the line See Chapter 7

to wrap at the cursor position

Non-Breaking Space Inserts a hard space at the current See Chapter 6

Insert bar Some of these objects, such as Flash buttons, can be viewed directly in theDocument window; for others, such as ActiveX controls, Dreamweaver inserts a placeholder

in the page, but the actual content must be viewed in a browser Table 3-10 details the Mediaobjects

Table 3-10: Media Category

Icon Name Description Detailed Information

Flash Use to include a Flash movie See Chapter 25

Flash Button Creates a Flash button See Chapter 25

Flash Text Makes a Flash headline or other See Chapter 25

rollover text

Shockwave Use to include a Shockwave movie See Chapter 25

Applet Includes a Java applet at the cursor See Chapter 6

position

param Inserts a <param>tag in Code view, See Chapter 6

used to specify settings within <applet>

and <object>tagsActiveX Inserts a placeholder for an ActiveX See Chapters 25

control at the cursor position, using the and 27

<object>tagPlugin Use for including a file that requires See Chapters 25, 26,

Head objects

General document information — such as the title and any descriptive keywords about thepage — are written into the <head> section of an HTML document The Head categoryenables Web designers to drop in these bits of code in a handy object format These objectsinsert <meta> tags with keywords for search engines; specify refresh times; and do manymore tasks that affect a Web site’s overall performance

Although Dreamweaver enables you to see the <head> objects onscreen via the View ➪ HeadContent menu option, you don’t have to have the Head Content visible to drop in the objects

Simply click any of the objects detailed in Table 3-11, and a dialog box opens, prompting youfor the needed information

Table 3-11: Head Category

Icon Name Description Detailed Information

Meta Includes document information usable See Chapter 6

by servers and browsers

Keywords Inserts keywords used by search engines See Chapter 6

to catalog the Web page

Description Provides a description of the current page See Chapter 6

Refresh Sets a tag to refresh the current page or See Chapter 6

redirect the browser to another URL

Base Specifies the base address of the current See Chapter 6

document

Link Declares a relationship between the See Chapter 6

current document and another object

or file

Script objects

Increasingly, documents on the Web are moving away from being simply a static presentation

of text and images Pages can be made dynamic by adding scripts to them; for example,Dreamweaver automatically adds JavaScript to pages to create rollover buttons and naviga-tion bars In fact, many Dreamweaver commands and behaviors insert pre-written scripts intoyour page However, if you want to write your own scripts, the Script category can simplifythis task Table 3-12 describes the objects in the Script category

Table 3-12: Script Category

Icon Name Description Detailed Information

Script Inserts <script></script>tags, See Chapter 6

which enable you to add JavaScript or VBScript either directly or from a fileNoscript Inserts <noscript></noscript>tags See Chapter 6

in Code view, which surround content that displays in browsers that don’t support scripting

Server-Side Include Inserts a directive that indicates to the See Chapter 29

server that another file should be displayed within the current document

If the Show Dialog when Inserting Objects option is set in the General category of thePreferences dialog box, when you choose the Script or Server-Side Include objects, dialogboxes open to guide you in specifying relevant information If the preferences option is clear,the dialog boxes do not appear

Application objects

Although the layout of a Web page and the dynamic content that fills it may vary widely, many

of the structures underlying basic Web applications remain the same For example, the samebasic code that is used to insert employee records into a Human Resources database may beused to add a new entry into a database that maintains a DVD collection Dreamweaverremoves much of the tedium of scripting common Web applications by supplying objects inthe Application category of the Insert bar

With a single Application object, you can build an entire Web application that displays a list

of records, enables you to navigate through them, displays which records are currentlyonscreen, and links to another page with detailed information from a selected record

Dreamweaver’s Application objects may be used separately or together The Master DetailPage Set object, shown in Figure 3-17, includes two other Application objects: the RecordsetNavigation Bar object and the Recordset Navigation Status object

Figure 3-17: Common Web applications, such as the Master Detail Page Set, are created

in one action with Dreamweaver’s Application objects

Master Detail Page Set buttonApplication objects

Note

Application objects are particularly powerful when combined with Dreamweaver’s templatefeature It’s possible, for example, to create a basic Master Detail Page Set with the Applicationobject and then apply a template to give the page a specific look and feel, thereby integrating

it into a site The Application objects are outlined in Table 3-13

Table 3-13: Application Category

Icon Name Description Detailed Information

Recordset Opens a dialog box in which you can See Chapter 15

define the subset of data to be extracted from a database

Repeated Region Alters the selected dynamic area of the See Chapter 17

page so that data from more than one record is displayed on the page at a timeDynamic Table Inserts a table in the document that is See Chapter 17

populated with data from a recordset you have defined

Dynamic Text Adds data from a recordset to the See Chapter 16

out of a total number of records availableMaster Detail Creates a master page with data in a See Chapter 19Page Set repeated region and navigation elements,

along with a detail pageRecord Insertion Creates a form for inserting a record into See Chapter 19

Record Update Form Places a table with the desired form fields See Chapter 19

on the page along with the server behavior for updating the record in a database

ASP objects

If you are creating Active Server Pages, the ASP category of the Insert bar can speed up thedevelopment of your code Only available when the current document is named with anextension of asp, this category contains the building blocks of an ASP page Table 3-14describes each of the objects in the ASP category

Table 3-14: ASP Category

Icon Name Description

Server Variable Opens a dialog box in which you can choose one member

of the server variables collection to reference in your code

Include Inserts a #includestatement for implementing a

server-side include

Code Block Inserts the <% %> delimiters, used to enclose a code block

Output Inserts the <%= %>delimiters, used to enclose an output

statement

If Inserts an If-Then conditional statement in the ASP code

Else Inserts an Else statement in the ASP code

Else If Inserts an ElseIfstatement in the ASP code, used to

create alternative conditions

End Inserts the ASP code to signal the end of an If statement

Response.Write Inserts the statement for passing data from the server to the

browser for display

Trimmed Form Inserts the code for trimming elements in a formElement

Trimmed QueryString Inserts the code for referencing trimmed elements in a Element QueryString collection

Server.CreateObject Adds the Server.CreateObjectmethod, used to

instantiate ASP components or scripting objects

More Tags Opens the Tag Chooser dialog box, giving you access to

additional tags

ASP.NET objects

The ASP.NET category is only available on the Insert bar if the active document has a fileextension of aspx or ascx The objects in this category, described in Table 3-15, give youquick access to frequently referenced elements of an ASP.NET page

There is a known issue in which the ASP.NET category of the Insert bar is not initially ble with an open aspx file The problem occurs if your testing server is not set to one of theASP.NET options or if you change an file to aspx format by changing its extension rather thancreating the file through Dreamweaver’s New Document feature To make the ASP.NETobjects accessible, select the Document Type link on the Components panel and chooseeither ASP.NET C# or ASP.NET VB

accessi-Table 3-15: ASP.NET Category

Icon Name Description

Register Custom Tag Inserts the code required to create custom tags, which you

can use to implement new server behaviors

Import Namespace Adds the statement <%@ Import Namespace=”” %>

Runat Server Inserts the code runat=”server”at the current location

Bound Data Inserts the <%# %>delimiters for bound data

Page_Load Inserts a Page_Load subroutine

asp:button Inserts a NET Form Control button in a form

asp:checkbox Inserts a NET Form Control checkbox in a form

asp:checkboxlist Inserts a NET Form Control for a checkbox list, a listing of a

dataset as a series of checkboxes

Caution

Icon Name Description

asp:dropdownlist Inserts a NET Form Control drop-down list in a form

asp:imagebutton Inserts a NET Form Control graphical button in a form

asp:label Inserts a NET Form Control label for an element in a form

asp:listbox Inserts a NET Form Control list box in a form

asp:radiobutton Inserts a NET Form Control single radio button in a form

asp:radiobuttonlist Inserts a NET Form Control radio button list, a series of

related radio buttons listed from a dataset

asp:textbox Inserts a NET Form Control textbox in a form

More Tags Opens the Tag Chooser dialog box, giving you access to

additional ASP.NET tags

CFML Basic objects

The CFML Basic category of the Insert bar gives you access to the most frequently usedobjects in the ColdFusion toolbox This category is only available on the Insert bar if theactive document has a file extension of cfm or cfc Table 3-16 describes each object in theCFML Basic category

Table 3-16: CFML Basic Category

Icon Name Description

Server Variable Opens a dialog box in which you can choose one member

of the server variables collection to reference in your code

cfquery Opens the Tag Editor for the cfquerytag, which queries a

data source

Continued

Table 3-16: (continued)

Icon Name Description

cfoutput Opens the Tag Editor for specifying attributes of the

cfoutputtag

cfinsert Opens the Tag Editor for specifying attributes of the

cfinserttag, for adding form data to a data source

cfupdate Opens the Tag Editor for specifying attributes of the

cfupdatetag, for updating records in a data source

cfinclude Opens the Tag Editor for specifying attributes of the

cfincludetag, used to include a file in a ColdFusionpage

cflocation Opens the Tag Editor, in which you can specify the file to

open when the cflocationtag is processed

cfset Inserts the <cfset >tag at the current location; used to

set the value of a variable

cfparam Opens the Tag Editor for the <cfparam>tag

Comment Inserts the code for a comment

Surround with # Inserts #characters around the selected text

cfscript Inserts <cfscript></cfscript>tags at the current

location or around the selected text, designating a block ofColdFusion code

You can find detailed descriptions of the ColdFusion tags in the Reference panel To view theColdFusion documentation, select Window ➪ Reference, and then select Macromedia CFMLReference from the Book drop-down list

CFML Flow objects

The CFML Flow category on the Insert bar includes objects for inserting ColdFusion markuptags that alter the flow of control through the code These include tags for handling excep-tions, such as error conditions, as well as tags for implementing conditional statements andlooping Table 3-17 describes the objects in the CFML Flow category

Tip

Table 3-17: CFML Flow Category

Icon Name Description

cftry Inserts the <cftry></cftry>exception handling tags at

the current location

cfcatch Opens the Tag Editor for the <cfcatch></cfcatch>

tags, used to intercept and process an interruption in theprogram flow

cfthrow Opens the Tag Editor for <cfthrow>, which forces an

interruption in the program flow

cflock Opens the Tag Editor for the <cflock></cflock>tag

pair, used to serialize access to shared data

cfswitch Opens the Tag Editor for a <cfswitch></cfswitch>

pair, where you can define the expression to be evaluated

in the ColdFusion version of a Casestatementcfcase Opens the Tag Editor for a <cfcase></cfcase>tag pair;

these tags enclose the actions to be taken when theexpression specified by <cfswitch>has a given valuecfdefaultcase Inserts <cfdefaultcase> </cfdefaultcase>tags,

which specify what action should be taken when theexpression specified by the <cfswitch>tag has a valuenot specified in any <cfcase>tag

cfif Inserts <cfif ></cfif>tags, used to indicate a

conditional statement

cfelse Inserts a <cfelse>tag, used to specify what actions are to

be taken if the original condition from the associated

<cfif>statement was not metcfelseif Inserts a <cfelseif>tag, used to implement alternative

conditions

cfloop Opens the Tag Editor for the <cfloop> </cfloop>pair,

which are used to repeat statements until some condition

is metcfbreak Inserts the <cfbreak>tag, used to exit a <cfloop>

before the specified loop condition is met

CFML Advanced objects

The Insert bar’s CFML Advanced category provides objects for ColdFusion tags that providenumerous advanced functions, many of which enable you to transfer files and data using avariety of protocols The More Tags button also gives you access to ColdFusion tags not

available elsewhere on the Insert bar Table 3-18 describes the objects in the CFML Advancedcategory.

Table 3-18: CFML Advanced Category

Icon Name Description

cfcookie Opens the Tag Editor for the <cfcookie>tag, which is

used to save cookies — small amounts of textualinformation — on the client’s hard drivecfcontent Opens the Tag Editor for the <cfcontent>tag, where you

can specify the type of encoding used in the file

cfheader Opens the Tag Editor for you to specify <cfheader>tag

attributes

ColdFusion Page Adds tags to specify page encoding and content typeEncoding

cfapplication Opens the Tag Editor for the <cfapplication>tag,

where you can specify session and applicationcharacteristics, such as timeout valuescferror Opens the Tag Editor for the <cferror>tag, which

enables your code to define a particular page to displaywhen an error occurs

cfdirectory Opens the Tag Editor for the <cfdirectory>tag, which

enables your code to create, rename, delete, and obtain thecontents of server directories

cffile Opens the Tag Editor for the <cffile>tag, which enables

your code to read, write, update, copy, delete, upload,rename, and move server files

cfmail Opens the Tag Editor for the <cfmail> </cfmail>tag

pair, which enables your code to send an e-mail messagewith dynamic content

cfpop Opens the Tag Editor for the <cfpop> tag, enabling you to

read e-mail messages or message headers from the server,and to delete them

cfhttp Opens the Tag Editor for the <cfhttp></cfhttp>tag

pair, enabling your code to upload files using HTTP protocol

cfhttpparam Opens the Tag Editor for the <cfhttpparam>tag, needed

if the methodspecified in the <cfhttp>tag is post

cfldap Opens the Tag Editor for you to specify parameters for the

<cfldap>tag, used to communicate with an LDAP server

Icon Name Description

cfftp Opens the Tag Editor for the <cfftp>tag, which your

code can use to transfer files to and from an FTP server

cfsearch Opens the Tag Editor for the <cfserach>tag, which

enables your code to search a collection

cfindex Opens the Tag Editor for the <cfindex>tag, which adds

indexed entries to a pre-existing collection; this is requiredbefore the collection can be searched

cfmodule Opens the Tag Editor for the <cfmodule>tag, used to call

a custom tag

cfobject Opens the Tag Editor for you to specify <cfobject>

parameters

cfchart Opens the Tag Editor for a <cfchart></cfchart>tag

pair, for graphically depicting data

More Tags Opens the Tag Chooser dialog box, which gives you access

to additional ColdFusion tags

JSP objects

The JSP category on the Insert bar includes objects that aid in adding code specific toJavaServer Pages This category is only visible when the currently active document has a fileextension of jsp Table 3-19 describes the objects in the JSP category

Table 3-19: JSP Category

Icon Name Description

Page Directive Inserts the code for a Page directive, <%@ page %>, at the

current location in the document

Include Directive Inserts an Include directive, <%@ include %>, used to

include either a static HTML page or another JSP page inthe document

Taglib Directive Inserts the code to implement the Taglib directive, <%@

taglib %>, for working with custom tag libraries

Continued

Table 3-19: (continued)

Icon Name Description

JSP Declaration Inserts the code for a JSP declaration, <%! %>, which

encloses the definitions for page-level variables andsupporting methods

JSP Scriptlet Inserts the code <% %>, used to delimit a block of

Java code

JSP Expression Inserts the code <%= %>, used to enclose a Java

expression, at the current location in the document oraround the selected text

JSP Use Bean Opens the Tag Editor for the <jsp:useBean />tag,

which is required before you can access a bean within aJSP page

JSP Set Property Opens the Tag Editor for the <jsp:setProperty />

tag, which is used to store the value of a property

JSP Get Property Opens the Tag Editor for the <jsp:getProperty />

tag, which retrieves the current value of a property

JSP Include Opens the Tag Editor for the <jsp:include />tag,

which includes another static HTML page or JSP file atruntime

JSP Forward Opens the Tag Editor for the <jsp:forward />tag,

which redirects a request to another JSP, servlet, or staticHTML page

JSP Params Inserts the <jsp:params></jsp:params>tag pair at

the current location in the document

JSP Param Opens the Tag Editor for the <jsp:param />tag, which

is used to provide additional information for other tags,such as jsp:includeand jsp:forward

JSP Plugin Opens the Tag Editor for the <jsp:plugin />tag, where

you can specify a bean or Java applet to use

JSP Comment Inserts the code for a JSP comment

More Tags Opens the Tag Chooser dialog box, which gives you access

to additional JSP tags

You can get information about JSP tags without leaving Dreamweaver To view the JSP mentation, select Window ➪ Reference, and then select Wrox JSP Reference from the Bookdrop-down list.

docu-PHP objects

The PHP category of the Insert bar enables you to insert code used in the PHP server-sidescripting language This category is only available if you are working in a document with theextension of php or php3 Table 3-20 describes the PHP objects available in the Insert bar

Table 3-20: PHP Category

Icon Name Description

Form Variables Inserts a reference to $HTTP_POST_VARS, used to retrieve

form data passed using the Postmethod

URL Variables Inserts a reference to $HTTP_GET_VARS, used to retrieve

information passed using the GETmethod

Session Variables Inserts a reference to $HTTP_SESSION_VARS, an array

that contains session variables available to the script

Cookie Variables Inserts a reference to $HTTP_COOKIE_VARS, used to

retrieve information passed to the script using cookies

Include Inserts code to include either a static HTML page or another

PHP page in the document During execution, if an error isencountered reading the included file, a warning is issued

Require Inserts code to include either a static HTML page or another

PHP page in the document During execution, if an error isencountered reading the included file, a fatal error occurs

Code Block Inserts the code <?php ?>, used to define a block of

code, at the current location or surrounding selected text

Echo Inserts the code to output data

Comment Inserts the code for a PHP comment

If Inserts the tag used to conditionally execute code

Continued

Tip

Table 3-20: (continued)

Icon Name Description

Else Inserts the tag used to indicate the actions taken when the

conditions specified in the corresponding If statement arenot met

More Tags Opens the Tag Chooser dialog box, which gives you access

to additional PHP tags

Getting the Most Out of the Property Inspector

Dreamweaver’s Property inspector is your primary tool for specifying an object’s particulars

What exactly those particulars are — in HTML, they are known as attributes — depends on the

object itself The contents of the Property inspector vary depending on which object isselected For example, click anywhere on a blank Web page, and the Property inspectorshows text attributes for format, font name and size, and so on If you click an image, theProperty inspector displays a small thumbnail of the picture, and the image’s attributes forheight and width, image source, link, and alternative text Figure 3-18 shows a Propertyinspector for an image with an attached hyperlink

Figure 3-18: The Property inspector takes many forms, depending

on which HTML element you select

Manipulating the Property inspector

You can enable the Property inspector by choosing Window ➪ Properties or selecting thekeyboard shortcut, Ctrl+F3 (Command+F3) As with the Insert bar, the Property inspector can

be closed by selecting the Close button (only available if the Property inspector is floating),unchecking Window ➪ Properties, or choosing the keyboard shortcut again You can alsoclose the Property inspector by selecting Close Panel Group from the Options menu, which isaccessed by clicking the Option button at the right of the Properties inspector title bar OnMacintosh OS9 and in the Dreamweaver MX or HomeSite/Coder Style workspaces onWindows, you can window shade the Property inspector so that only the title bar is leftshowing by clicking the collapse button on its window

Help buttonQuick Tag EditorOption button

GripperCollapse icon

Expander buttonFolder icon

Point-to-file icon

You can reposition the Property inspector in one of the following ways:

✦ If the Property inspector is floating, you can click and drag the drag bar that appearsalong the left edge of the window and move it to a new location, or — unlike the Insertbar — you can click and drag any open gray area in the floating inspector itself (onWindows only) This technique is handy for quickly moving the inspector aside, out ofyour way When you move the floating inspector near the edge of the screen or near awindow border, the Property inspector will snap to the edge of the window or screen

✦ In the Dreamweaver MX and HomeSite/Coder Style workspaces, whether the inspector

is docked or floating, you can move it by clicking on the gripper and dragging theinspector In these workspaces, the Property inspector can be docked at the top or thebottom of the Dreamweaver window If you move or resize the Dreamweaver window,the docked Property inspector will move with the window

The Property inspector initially displays the most typical attributes for a given element Tosee additional properties, click the expander arrow in the lower-right corner of the Propertyinspector Virtually all the inserted objects have additional parameters that can be modified

Unless you’re tight on screen real estate, it’s a good idea to keep the Property inspectorexpanded so you can see all your options

In addition to using the expander arrow, you can reveal (or hide) the expanded attributes bydouble-clicking any open gray area of the Property inspector

Property inspector elements

Many of the attributes in the Property inspector are text boxes; just click in any one and enterthe desired value If a value already appears in the text box, whether a number or a name,double-click it (or click and drag over it) to highlight the information and then enter your newdata — the old value is immediately replaced You can see the effect your modification has had

by pressing the Tab key to move to the next attribute or by clicking in the Document window

Using the Quick Tag Editor, Dreamweaver enables you to make small additions to the codewithout switching to Code view Located on the right of the Property inspector just below theHelp button, the Quick Tag Editor pops open a small window to display the code for the cur-rently selected tag You can swiftly change attributes or add special parameters not found inthe Property inspector

For several attributes, the Property inspector also provides drop-down list boxes that offer alimited number of options from which you can choose To open the drop-down list of availableoptions, click the arrow button to the right of the list box Then choose an option by highlight-ing it

Some options on the Property inspector are a combination drop-down list and text box —you can select from available options or type in your own values For example, when text isselected, the font name and size are combination list/text boxes

If you see a folder icon next to a text box, you have the option of browsing for a filename onyour local or networked drive, or manually inputting a filename Clicking the folder opens astandard Open File dialog box (called Select File in Dreamweaver); after you’ve chosen yourfile and clicked OK (Open or Choose on Macintosh), Dreamweaver inputs the filename andany necessary path information in the correct attribute

Dreamweaver enables you to quickly select an onscreen file (in either a Document window orthe Site panel) as a link, with its Point to File icon, found next to the folder icon Just click and

Tip Tip

drag the Point to File icon until it touches the file (or the filename from the Site panel) thatyou want to reference The path is automatically written into the Link text box.

For text objects, the Property inspector can toggle between two modes of operation — CSSand HTML modes If you want to use cascading style sheets to style your text, click the ToggleHTML/CSS Mode icon, located to the right of the Format text box, to display controls fordefining and assigning CSS styles to your text If you would prefer to use HTML tags, such as

<font>, to style and size your text, click the Toggle HTML/CSS Mode icon again Figure 3-19shows both versions of the Text Property inspector

Figure 3-19: Using the Text Property inspector, you can style text

with HTML tags or with CSS styles

Certain objects such as text, layers, and tables enable you to specify a color attribute TheProperty inspector alerts you to these options with a small color box next to the text box Youcan type in a color’s name (such as “blue”) or its six-figure hexadecimal value (“#3366FF”), orselect the color box Choosing the color box opens a color picker, shown in Figure 3-20, thatdisplays the colors common to both the Netscape and Microsoft browsers — the so-called

browser-safe colors You can go outside of this range by clicking the System Color Picker icon in

the upper-right corner of the color picker This opens a full-range Color dialog box in whichyou can choose a color visually or enter its red, green, and blue values or its hue, saturation,and luminance values

The color picker in Dreamweaver is very flexible Not only can you choose from a series ofcolor swatches, but you can also select any color onscreen with Dreamweaver’s Eyedroppertool The Eyedropper button has two modes: If you select Snap to Web Safe from the colorpicker’s context menu, the Eyedropper snaps the selected color to its nearest Web-safe neigh-bor; if you deselect Snap to Web Safe, colors are sampled exactly If you’d like to access thesystem color picker, the color wheel button opens it up for you You can also use the DefaultColor tool, which deletes any color choice previously inserted Finally, you can use the colorpicker’s context menu to change the swatch set shown By default, the Color Cubes view isshown, but you may also view swatches in a Continuous Tone configuration or in Windows

OS, Macintosh OS, or Grayscale colors Although the Web designer may not use these optionsmay frequently, Macromedia standardized the color picker across its product line to make iteasier to switch between applications

Specify CSS style View style definitionClick to switch

to HTML mode

Specify HTML formatClick to switch

to CSS mode

New Feature

Figure 3-20: Dreamweaver’s color picker enables you to choose

from a wide selection of colors, from the palette or right off the desktop, with the Eyedropper tool

To close the color picker without selecting a color, click in the empty gray area at the top ofthe color picker

In the Dreamweaver MX and HomeSite/Coder Style workspaces, the Property inspector alsoincludes an Options menu Open this context-sensitive menu by clicking the Options menuicon, located in the upper-right corner of the Property inspector The commands on thismenu vary depending on what type of object has been selected in the Document window

Some basic commands, however, are always available, regardless of what has been selected

These include the following:

✦ Help: Opens a Help topic for the current Property inspector

✦ Rename Panel Group: Enables you to rename the Property inspector

✦ Close Panel Group: Closes the Property inspector

Two additional commands that are typically available for panels, Group Properties With, andMaximize Panel Group, are disabled for the Property inspector You cannot dock the Propertyinspector with other panels, and you cannot change the height of the Property inspector

Another aspect of the Property inspector is worth noting: The circled question mark in theupper-right corner of the Property inspector is the Help button Selecting this button invokesonline Help and displays specific information about the particular Property inspector you’reusing

Customizing Your Workspace with Dockable Panels

Dreamweaver is known for its powerful set of tools: behaviors, layers, timelines, and so muchmore Dreamweaver presents its tools in a variety of panels, as shown in Figure 3-21 Panelscan be combined into the same window; when grouped together in this way, each panel isdisplayed as a tab within the panel group The panel groups can be floating or docked to each

Note Tip

Systemcolor pickerDefault color

EyedropperColor box

other If you’re using the Dreamweaver MX or HomeSite/Coder Style workspaces, the panelgroups can also be docked within the Dreamweaver window

Figure 3-21: Dreamweaver’s many tools reside in panels, which can float anywhere

on the screen, or, in the Dreamweaver MX workspace, can be docked within the Document window

Table 3-21 lists each of the panels available in Dreamweaver, along with a description and across-reference to chapters in this book that provide more information about the panel Italso lists a keyboard shortcut that you can use to open the panel If the keyboard shortcut isdifferent between Mac and Windows platforms, the Mac shortcut is listed in parentheses afterthe Windows shortcut

Table 3-21: Dreamweaver Panels

Panel Keyboard Shortcut Description Detailed Information

Answers Alt+F1 (Option+F1) Provides links to Dreamweaver See Chapter 1

documentationCSS Styles Shift+F11 Enables you to create external See Chapter 20

and embedded CSS style sheets

Collapsed panel groupsExpanded panel groupPanels

Panel Keyboard Shortcut Description Detailed Information

HTML Styles Ctrl+F11 (Command+F11) Enables you to define, modify, See Chapter 7

delete, and apply HTML stylesBehaviors Shift+F3 Enables you to create Dynamic See Chapter 23

HTML effects Tag Inspector F9 Displays a collapsible outline of See Chapter 6

the tags used on the current page, enabling you to quickly determine if tags are correctly nested, and to view and change tag attributes

Snippets Shift+F9 Gives you access to prewritten See Chapter 6

snippets of code for common scenarios

Reference Ctrl+Shift+F1 (Shift+F1) Presents extensive reference See Chapter 6

documentation for HTML, CSS, JavaScript, accessibility guidelines, and a variety of server-side scripting languagesDatabases Ctrl+Shift+F10 Provides a bird’s-eye view of all See chapters in

(Command+Shift+F10) the connections currently defined Part III

for your site, enabling you to add new connections, browse tables, views, and stored procedures for each database, and add the necessary server side include to use that connection

Bindings Ctrl+F10 Enables you to create recordsets See chapters in

(Command+F10) and datasets and display that Part III

information on your page You can also bind data to tag attributes and form elements and set the formatting for dynamic elements

Server Ctrl+F9 (Command+F9) Gives you access to prewritten See Chapter 36

in applications For example, you can use server behaviors to create, update, or delete records

Components Ctrl+F7 (Command+F7) Enables you to quickly add new See Chapter 16

JavaBeans components (if you’re using JSP) or Web Services (if you’re using JSP or NET), or ColdFusion components (if you’re using ColdFusion) Setting up the JavaBeans or Web Service will give you full introspection to all the pieces of that component

Continued

Table 3-21: (continued)

Panel Keyboard Shortcut Description Detailed Information

Site F8 Manages the files in your local, See Chapter 5

remote, and testing sites (In the Dreamweaver 4 workspace, the Site panel behaves as a separate window, rather than

as a panel.)

components that make up Images: Chapter 8your site, including images, Colors: Chapter 7colors, URLs, Flash and URLs: Chapter 9Shockwave objects, movies, Flash: Chapter 25scripts, templates, and Shockwave:

Movies: Chapter 26Scripts: Chapter 6Templates:

Chapter 28Library: Chapter 29Search Ctrl+Shift+F Shows the results of a See Chapter 7

(Command+Shift+F) Find All requestValidation Ctrl+Shift+F7 When you validate a document, See Chapter 30

(Command+Shift+F7) the results are displayed in

this panelTarget Browser Ctrl+Shift+F8 Displays results of a target See Chapter 30Check (Command+Shift+F8) browser check

Link Checker Ctrl+Shift+F9 Shows the results when you See Chapter 9

(Command+Shift+F9) check for broken links within

your siteSite Reports Ctrl+Shift+F11 Displays the output from a See Chapter 31

(Command+Shift+F11) variety of site reportsFTP Log Ctrl+Shift+F12 Lists the results of FTP See Chapter 5

(Command+Shift+F12) operationsServer Debug Ctrl+Shift+F5 Enables you to browse your See Chapter 36(Not available page directly in Dreamweaver’s

on Macintosh) Design window as if it were a

Web browser This is different from Live Data view because the page is not editable

Code Inspector F10 Provides an alternative to Code See Chapter 6

view, in a floating windowFrames Shift+F2 Enables you to select and See Chapter 14

rename frames within a frameset

Panel Keyboard Shortcut Description Detailed Information

History Shift+F10 Tracks each change you make, See Chapter 7

enabling you to undo and redo multiple steps at a time

change some characteristics

of layersSitespring F7 Gives you instant access to all See Chapter 31

your Sitespring tasks in a separate panel inside Dreamweaver

Instead of logging on to the Sitespring site, you can update status information and check for new tasks without leaving your workspace

Timelines Alt+F9 (Option+F9) Enables you to add and modify See Chapter 22

time-related Dynamic HTML effects, such as moving items across a page

Hiding and showing panels

With the large number of panels available in Dreamweaver, your workspace can becomecluttered very quickly To reduce the amount of screen real estate taken up by the individualpanels, but still utilize their power, Dreamweaver enables you to group multiple panels in a

single window These groups of related panels are called, not surprisingly, panel groups.

Whenever one panel is docked with another in a panel group, each panel becomes accessible

by clicking its representative tab Selecting the tab brings the panel to the front

You can also display individual panels by using the keyboard shortcuts listed in Table 3-21,

or by using commands in the Window menu; there is a separate command to open eachpanel Finally, you can use one of the buttons in the status bar Launcher, described earlier inthis chapter, to open the desired panel Using any of these methods opens the panel or brings

it to the top if it is hidden; if the panel is already on top, any of these actions will collapse thepanel group so that only its title bar is showing

One very important keyboard shortcut to remember is the F4 key, which hides all panels

This shortcut immediately clears the screen of everything except the basic Document dow — the Insert bar, the Property inspector, all toolbars, and all panels are immediately hid-den, enabling you to enter content in your pages without distraction Pressing F4 againrestores all the hidden tools

win-In the Dreamweaver MX and HomeSite/Coder Style workspaces, the panel groups may bedocked along the edges of the Dreamweaver window In this situation, you can collapse all ofthe panel groups to maximize your work area by clicking the button that appears along theborder of the panel area, as shown in Figure 3-22 This collapses only the panel groupsdocked on one edge of the screen, while leaving toolbars, floating panels, or even panelsdocked along a different edge of the window, intact

Tip

Figure 3-22: You can collapse all the panel groups along one edge of the screen with

the click of a single button

In any workspace, you can collapse an individual panel group so that just its title bar isshowing To do this, click the panel group name in the title bar, or click the small trianglenext to the panel group name

To resize any floating panel, click and drag its borders On the Mac, you can resize only bydragging the resize handle in the bottom-right corner of a window If the panel groups aredocked together, you can drag the border of the panel area to resize all the panel groups inthat area

You can also right-click (Control+click) the title bar of the panel group or click the Optionsmenu on the right of the title bar, and then select Maximize Panel Group from the drop-down list This action expands the panel to the fullest possible height, but leaves the panelwidth unchanged

Finally, if you want to close a panel group entirely so that even its title bar is not visible, clickthe Options menu located on the right of the title bar in an open panel group, and then selectClose Panel Group from the drop-down list You can also right-click (Control+click) in the titlebar and then select Close Panel Group, even if the panel group is collapsed The next timeyou open any panel within the group, the entire panel group will open automatically

Tip

Click to collapse bottom panel area Click to collapse right panel area

The Options menu also gives you access to Help for the currently displayed panel, and maycontain additional commands specific to the panel that is open.

Customizing panel groups

Dreamweaver comes with related panels already combined into panel groups However, you’renot limited to the predefined panel groups In fact, the panel groups are completely customiz-able, giving you optimum control over your workflow Moving panels from one group to another,creating new groups, and renaming panel groups are straightforward operations If you want,you can also remove little-used panels from groups and reorder the panels within a group

To move a panel from one group to another, start by opening the panel you want to move;

then right-click (Control+click) in the title bar of the panel group, point to Group <panel> With

in the context menu, and click the name of the panel group where you want the panel toreside The same command is available from the Options menu, accessed by clicking the icon

at the right of an open panel group’s title bar This command removes the current panel fromits original panel group, and adds the panel’s tab to the right of the existing tabs in the targetpanel group

To reorder panels within a panel group, open the panel, right-click (Control+click) on the title

bar of the panel group, point to Group <panel> With and then click the name of the current

panel group This moves the currently open panel to the right-most position in the group Byrepeatedly moving panels within the current group, you can achieve the order you desire

To create a new panel group, open a panel that you want to be in the new group right-click

(Control+click) in the title bar of the current panel group, and select Group <panel> With ➪New Panel Group This creates a new, separate panel group that contains the removed panel

Initially, the name of the new panel group is the same as the panel name, but you can change

it, as explained below You can add other panels to your new panel group, using the methoddescribed previously; you’ll find your new panel group name automatically shows up in thecontext menu for the panel group You can also dock the new panel group with others, and inthe Dreamweaver MX and HomeSite/Coder Style workspaces, you can dock the panel groupwithin the Document window

Some caveats apply when customizing panels You cannot combine panels with the Insertbar or the Property inspector Also, if you customize your panel groups and then changeworkspace layouts, your customizations will be lost

Dreamweaver initially assigns a new panel group the same name as the first panel in the group

You can change this name — or the name of one of Dreamweaver’s original panel groups — bychoosing Rename Panel Group from the Options menu, accessed by clicking the icon at theright of an open panel group’s title bar The same command is available by right-clicking thepanel group title bar

How do you remove a panel from a panel group? First use the Group <panel> With ➪ NewPanel Group command on the Options menu to move the panel to its own group Then closethe panel group for the removed panel by right-clicking (Control+clicking) in the title bar andchoosing Close Panel Group

You can move a panel group by clicking the gripper icon in the panel group’s title bar anddragging the window to any location on the screen, as shown in Figure 3-23

Note Tip Note

Figure 3-23: Use the gripper to dock and undock panel groups.

In the Dreamweaver 4 workspace, you can dock panel groups to each other, but you cannotdock them within the Document window In the Dreamweaver MX and HomeSite/Coder Styleworkspaces, not only can you dock floating panel groups together, you can dock panel groupswithin the Dreamweaver window; when you move or resize the Dreamweaver window, thedocked panels move too To dock panel groups, drag the window by the gripper over anotherpanel group, or to the edge of the window, until the outline of the window changes to indicate

it is in position When you release the mouse button, the panel group will be docked

Although you can move floating panels by dragging the title bar, panels can be docked onlywhen you are dragging with the gripper

In the Dreamweaver MX and HomeSite/Coder Style workspaces, you are not limited to ing your panels on one edge of the window You can dock panels to both the left and rightsides of the screen at the same time, although this reduces your work area considerablyunless you have a large monitor

hav-Accessing the Menus

Like many programs, Dreamweaver’s menus duplicate most of the features accessiblethrough panels Certain features, however, are available only through the menus in the

Tip

Expand/Collapse arrowGripper

Floating panel group

Docked panel groupsOption menu

Document window or through a corresponding keyboard shortcut This section offers a ence guide to the menus when you need a particular feature or command (Note to Windowsusers: The menus referred to here are those for the Document window and not the Site panel;

refer-the menu options particular to refer-the Site panel are covered in Chapter 5.)

Almost every element placed in the Document window has a shortcut menu associated with

it To access a shortcut menu, right-click (Control+click) any area or object The shortcutmenus are context-sensitive and vary according to which object or area is selected Using theshortcut menus can enhance your productivity tremendously

The File menu

The File menu contains commands for file handling and overall site management Table 3-22describes the commands and their keyboard shortcuts

Table 3-22: File Menu Commands

Command Description Windows Macintosh

dialog box, where you can specify the type of document

to create

for opening an existing fileOpen in Frame Opens an existing file in the Ctrl+Shift+O Command+Shift+O

selected frameClose Closes the currently active Ctrl+W or Ctrl+F4 Command+W

open window

or displays the Save As dialog box for an unnamed documentSave As Displays the Save As dialog Ctrl+Shift+S Command+Shift+S

box before saving the documentSave As Template Stores the current document N/A N/A

as a template in the Templates folder of the current siteSave Frameset Saves a file describing the Ctrl+S Command+S

current frameset, or displays the Save As dialog box for an unnamed document This command is available only if a frameset is selected in the Document window

Continued

Tip

Table 3-22: (continued)

Command Description Windows Macintosh

Save Frameset As Displays the Save As dialog box Ctrl+Shift+S Command+Shift+S

before saving the current frameset This command is available only if a frameset is selected in the Document window

Save Frame Saves the file in the currently Ctrl+S Command+S

selected frame, or displays the Save As dialog box for an unnamed document This command is available only if a frame is active in the Document window

Save Frame As Displays the Save As dialog box Ctrl+Shift+S Command+Shift+S

before saving the file for the currently selected frame This command is available only if a frame is active in the Document window

As Template currently selected frame as a

template in the Templates folder

of the current site This command

is available only if a frame is active in the Document window

documents

version of the current page

This command is available only

if the current document has been changed since the last time

it was saved

dialog box to print the code for the current document

into Template inserting an XML file into the

current templateImport ➪ Word Opens an HTML file saved in N/A N/AHTML Microsoft Word and, optionally,

cleans up the codeImport ➪ Tabular Inserts a table derived from a N/A N/AData file with delimited data

Command Description Windows Macintosh

Export ➪ Template Saves the current template’s N/A N/AData as XML editable regions as an XML

file This is available only if the current document is attached

to a Dreamweaver template

Export ➪ CSS Styles Creates an external style sheet N/A N/A

based on CSS styles defined in the current document This is available only if styles have been defined in the document

Export ➪ Table Saves data in the currently N/A N/A

selected table as a delimited text file

Convert ➪ 3.0 Creates a new Web page from N/A N/ABrowser Compatible the current document, optionally

converting all layers to tables and converting any CSS styles

to HTML markupConvert ➪ XHTML Changes the current document N/A N/A

to use XHTML markupPreview in Displays a list of browsers F12 (Primary); Command+F12Browser ➪ Your established in Preferences; Shift+F12 or

Browser List choose one to preview the Ctrl+F12 (Secondary)

current page using that browser

Browser ➪ Edit Browser category of Browser List Preferences, where the user

can add, edit, or delete additional preview browsersDebug in Displays a list of browsers Alt+F12 (Primary); Option+F12 Browser ➪ Your established in Preferences; Ctrl+Alt+F12 (Primary);

Browser List choose one to debug the (Secondary) Command+

that browser

Browser ➪ Edit Browser category of Browser List Preferences, where the user

can add, edit, or delete additional preview browsersCheck Page ➪ Checks the current document N/A N/ACheck Accessibility against accessibility guidelines

and displays the results in the Site Reports panel This command

is available only in a document that has been saved

Continued

Table 3-22: (continued)

Command Description Windows Macintosh

Check Page ➪ Verifies hypertext links for the Shift+F8 Shift+F8Check Links current document and shows

the results in the Link Checker panel

Check Target Browsers dialog box, where Browsers the user can validate the

current file against selected browser profiles

Check Page ➪ Validates the current page Shift+F6 Shift+F6Validate Markup against the code standard

that you choose in the Validator category of the Preferences dialog box

Validate as XML document, displaying the

results in the Validation panel

dialog box for the current document

Your Last Opened Displays the last four N/A N/AFiles opened files; select any

name to reopen the fileExit (Quit) Closes all open files and quits Ctrl+Q or Alt+F4 Command+Q

The Edit menu

The Edit menu gives you the commands necessary to quickly modify your page — or recoverfrom a devastating accident Many of the commands (Cut, Copy, and Paste, for example) arestandard in other programs; others, such as Paste HTML, are unique to Dreamweaver Table3-23 lists all of the commands found under the Edit menu

Table 3-23: Edit Menu Commands

Command Description Windows Macintosh

Undo Reverses the last action; the Ctrl+Z Command+Z or

undo is determined by a Preferences settingRedo/Repeat Repeats the last action or Ctrl+Y Command+Y

restores the effects of an or Command + Zaction that was undone

Command Description Windows Macintosh

selection on the clipboard, and or Shift+Deleteremoves the selection from

the current document

selection on the clipboard, and leaves the selection in the current document

current cursor positionClear Removes the current selection Delete Delete

from the document or Backspace or BackspaceCopy HTML Copies the current selection Ctrl+Shift+C Command+Shift+C

onto the clipboard with the HTML codesPaste HTML Pastes the current selection Ctrl+Shift+V Command+Shift+V

from the clipboard as HTMLSelect All Highlights all the elements in Ctrl+A Command+A

the current document or frameSelect Parent Tag Chooses the tag surrounding Ctrl+Shift+[ Command+[

the current selectionSelect Child Chooses the first tag contained Ctrl+Shift+] Command+]

within the current selectionFind and Replace Displays the Find and Replace Ctrl+F Command+F

dialog box for locating items

in and modifying one or more documents in the site

(Find Again) Find operation

start of the specified line (Command+comma)(Code view only)Show Code Hints Presents a context-sensitive Ctrl+Space Command+Space

list of options for entering tags, attributes, or values within the code (Code view only)Indent Code Indents selected code Ctrl+Shift+> Command+Shift+

period)Outdent Code Removes indentations from Ctrl++Shift+< Command+Shift+,

selected code (Code view only) (Command+Shift+

comma)

Continued