Dreamweaver MX 2004 Bible phần 2 potx

Table 3-10 continuedasp:TextBox Inserts a .NET Form Control text box in a form More Tags Opens the Tag Chooser dialog box, giving you access to additional ASP.NET tags CFML objects The C

Table 3-4 (continued)

Checkbox Inserts a checkbox for selecting any See Chapter 14

number of options at the cursor position

Radio Button Inserts a radio button for making a See Chapter 14

single selection from a set of options

at the cursor position

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

define a group of related radio buttons

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

scrolling list at the cursor position

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

pop-up menu that activates a link

Image Field Includes an image that can be See Chapter 14

used as a button

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

for selecting a file to submit

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

button at the cursor position

Label Inserts a <label></label> tag pair See Chapter 14

in 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 the See Chapter 14

tags <fieldset></fieldset>, with

an optional legend

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-5describes the objects in the Text category of the Insert bar (see Figure 3-17)

Figure 3-17: Change the format of selected text by choosing a Text object.

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, thetag pair is inserted at the current text insertion point

in some situations, Dreamweaver does more than blindly surround the selected text with thespecified HTML tags The following examples illustrate the additional processing that occurs

in Design view:

✦ 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, Dreamweavernot only 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 This is priate coding and should be avoided

inappro-✦ 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 a separate item in that list by inserting the appro-priate <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 one of the text formatting buttons in thiscategory, no tags are added until you start typing This feature helps prevent the inclusion ofempty tag pairs within your document

The Text category contains a single menu button: Characters Certain special characters —

such as the copyright symbol (©) — are represented in HTML by codes called character

entities Dreamweaver eases the entry of these complex, hard-to-remember codes with the

Characters objects The most commonly used characters are included as separate objects,and another button opens a dialog box with additional special characters from which tochoose The Characters category also contains objects for inserting a line break and a non-breaking space The text objects are shown in Table 3-5

Table 3-5: Text Category

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

the <font> tag, where you can specify font choices, such as font face, size, and color

Bold Formats text as bold using either <b></b> See Chapter 8

or <strong></strong> tags The tag used depends on a setting in the General

` category of the Preferences dialog box

Italic Formats text as italics using <i></I> or See Chapter 8

<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 8

<strong></strong>tags

Continued

Table 3-5 (continued)

Emphasis Adds emphasis to text using the See Chapter 8

<em></em>tag pair

Paragraph Creates a new paragraph by inserting the See Chapter 8

tags <p></p>

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

this inserts the tags <blockquote>

</blockquote>

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

that the text should be displayed as is

preserving spacing

Heading 1 Formats text as a level 1 heading using See Chapter 8

the <h1></h1> tag pair

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

the <h2></h2> tag pair

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

the <h3></h3> tag pair

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

a bulleted list

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

numbered list

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

an item within an ordered or unordered list

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

used to surround a definition list

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

a term within a definition list

Definition Inserts a <dd></dd>pair, which marks the See Chapter 15Description definition portion of a definition list entry

Abbreviation Opens a dialog box in which you can enter See Chapter 8

the full text for the abbreviation, before inserting the <abbr></abbr> tags

Acronym Inserts <acronym></acronym> tags after See Chapter 8

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

Characters: Inserts a <br> tag that causes the line to See Chapter 6Line Break wrap at the cursor position

Characters: Inserts a hard space at the current See Chapter 6NonBreaking Space cursor position

Characters:Left Inserts the code for the opening curly See Chapter 6Quote double-quote symbol

Characters: Inserts the code for the closing curly See Chapter 6Right Quote double-quote symbol.

Characters: Inserts the code for the em dash symbol See Chapter 6

Em DashCharacters:Pound Inserts the code for the pound See Chapter 6

Characters: Opens the dialog box for inserting See Chapter 6Other Characters special characters

Figure 3-18: Tags in the HTML category help with the overall structure of the page.

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 menu objectsenable Web designers to drop in these bits of code in a handy object format AlthoughDreamweaver enables you to see the <head> objects onscreen via the View ➪ Head Contentmenu option, you don’t have to have the Head Content visible to drop in the objects Simplyclick any of the objects, and a dialog box opens prompting you for the needed information

Both the Tables and Frames menus are intended to work in Code view, inserting basic HTMLtags without parameters or additional structures For example, the Table Tag object insertsjust that and nothing more, whereas the Table object (found on both the Common and Layoutcategories) inserts the entire table structure with all the requested rows, columns, and cells

The Script menu objects simplify the task of adding custom scripts or server-side includes toyour page All the objects in the HTML category of the Insert bar are described in Table 3-6

Table 3-6: HTML Category

Horizontal Rule Draws a line across the page at the See Chapter 9

cursor position

Head:Meta Includes document information usable See Chapter 6

by servers and browsers

Head:Keywords Inserts keywords used by search engines See Chapter 6

to catalog the Web page

Head:Description Provides a description of the current page See Chapter 6

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

redirect the browser to another URL

Head:Base Specifies the base address of the See Chapter 6

current document

Head:Link Declares a relationship between the current See Chapter 6

document and another object or file

Tables:Table Tag Inserts just the <table></table> tags at See Chapter 13

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

Tables:Table Row Inserts <tr></tr> tags at the text-insertion See Chapter 13

point or surrounding selected text The <tr>

tag denotes a row within a table Only available in Code view

Tables:Table Adds tags for a table header cell, <th></th>, See Chapter 13Header at the text-insertion point or around the

selected text Only available in Code view

Tables:Table Data Inserts <td></td> tags, which demark a See Chapter 13

cell within a table The tags are added at the text-insertion point or surrounding any selected text Only available in Code view

Tables:Table Inserts <caption></caption>tags at See Chapter 13Caption the text-insertion point or around any

selected text Only available in Code view

Frames:Frameset Inserts the tags <frameset></frameset> See Chapter 17

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

Frames:Frame Inserts the <frame> tag at the current See Chapter 17

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

Frames:Floating Inserts <iframe></iframe>tags to create See Chapter 17Frame 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

Frames:No Frames Inserts the tags <noframes></noframes> See Chapter 17

to surround alternative content viewed in browsers that don’t support frames Only available in Code view

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

enable you to add JavaScript or VBScript either directly or from a file

Script:No Script Inserts <noscript></noscript> tags in See Chapter 6

Code view, which surround content displayed

in browsers that don’t support scripting

Script:Server-Side Inserts a directive that indicates to the server See Chapter 28Include that another file should be displayed within

the current document

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, thesame basic code that is used to insert employee records into a Human Resources databasemay be used to add a new entry into a database that maintains a DVD collection

Dreamweaver removes much of the tedium of scripting common Web applications by ing objects in the Application category of the Insert bar

supply-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 includes two other Application objects: the Recordset Navigation Bar objectand the Recordset Navigation Status object

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 Numerous menu buttons bring almost all of Dreamweaver’s server-side power tothe Insert bar; the Application objects, shown in Figure 3-19, are outlined in Table 3-7

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

in one action with Dreamweaver’s Application objects

Table 3-7: Application Category

Recordset Opens a dialog box in which you can define See Chapter 18

the subset of data to be extracted from

a database

Stored Procedure Enables you to define variables and code See Chapter 22

for Stored Procedures, also called Callables

in JSP Not available for PHP

Prepared Adds code for inserting, updating, and See Chapter 22

deleting records Available only in JSP

Java Bean Inserts a Java Bean Available only in JSP See Chapter 22

Java Bean Defines a Java Bean collection Available See Chapter 22Collection only in JSP

Dynamic Data: Inserts a table in the document that is See Chapter 21Dynamic Table populated with data from a recordset you

Repeated Region Alters the selected dynamic area of the page See Chapter 20

so that data from more than one record is displayed on the page at a time

Show Region: Show Inserts server code to show the enclosed See Chapter 20

If Recordset Empty area if the recordset is empty

Show Region: Inserts server code to show the enclosed See Chapter 20Show If Recordset area if the recordset is not empty

Not EmptyShow Region: Inserts server code to show the enclosed See Chapter 20Show If First Page area if records from the first page of the

recordset are currently available,Show Region: Inserts server code to show the enclosed See Chapter 20Show If Not area if records from the first page of the

First Page recordset are not currently available

Show Region: Inserts server code to show the enclosed See Chapter 20Show If Last Page area if records from the last page of the

recordset are currently available

Show Region: Inserts server code to show the enclosed See Chapter 20Show If Not area if records from the last page of the

Last Page recordset are not currently available

Recordset Paging: Includes the server behavior for a text- or See Chapter 20Recordset graphics-based navigation bar for moving

Navigation Bar among records

Recordset Paging: Inserts code for navigating to the initial See Chapter 20Move to First record of a recordset

Record/PageRecordset Paging: Inserts code for navigating to the prior See Chapter 20Move to Previous record in the current recordset

Record/PageRecordset Paging: Inserts code for navigating to the See Chapter 20Move to Next following record in the current recordset

Record/PageRecordset Paging: Inserts code for navigating to the final See Chapter 20Move to Last record of a recordset

Record/PageRecordset Paging: Inserts code for navigating to a specified See Chapter 20Move to Specific record of a recordset

Record/Page

Go To Detail Page: Inserts code to link to a dynamically See Chapter 20

Go To Detail Page specified page by passing new or current

URL parameters Available in ASP and JSP

Go To Detail Page: Inserts code to link to a dynamically See Chapter 20

Go To Related Page specified page, passing current URL or form

parameters Available in ASP and JSP

Display Record Adds a server behavior for showing which See Chapter 20Count: Recordset records are currently displayed out of a total

Navigation Status number of records available; this object is

not a menu button in ASP

Display Record Inserts the beginning record value of the See Chapter 20Count: Starting current recordset Available only in

Record ColdFusion, NET, and PHP

Display Record Inserts the ending record value of the current See Chapter 20Count: Ending recordset Available only in ColdFusion,

Record NET, and PHP

Display Record Inserts the total number of records in the See Chapter 20Count: Total current recordset Available only in ColdFusion,

Records NET, and PHP

Continued

Table 3-7 (continued)

Display Record Inserts the present page value of the current See Chapter 20Count: Current recordset Only available in NET

Page NumberMaster Detail Creates a master page with data in a See Chapter 21Page Set repeated region and navigation elements,

along with a detail page

Insert Record: Creates a form for inserting a record into See Chapter 21Record Insertion a database

Form WizardInsert Record: Adds code to an existing form to include See Chapter 21Insert Record a record into a data source

Update Record: Places a table with the specified form fields See Chapter 21Record Update on the page along with the server behavior

Form Wizard for updating the record in a database

Update Record: Adds code to an existing form to modify a See Chapter 21Update Record record in a data source

Delete Record Inserts code for deleting a record from See Chapter 21

Not available in NET

Flash elements

Flash elements are Flash movies that can be configured in Dreamweaver After a Flash element

is added, its attributes are available in the Tag inspector for personalization Dreamweaver MX

2004 ships with one Flash element, Image Viewer, which enables designers to easily create slideshows with a variety of animated transitions Newly added Flash elements — whether fromMacromedia or other developers — are also displayed in this category, as described in Table 3-8

Table 3-8: Flash Elements Category

Icon Name Description

Image Viewer Copies the Image Viewer Flash movie to your site for

parameterization through the Tag Inspector

Favorites

Because you can choose from an overwhelming number of objects on the Insert bar, theFavorites category is a welcome and productive addition to Dreamweaver Initially, no objectsare displayed in the Favorites category — it’s up to you to choose which objects to include

All modification of the Favorites category is handled through the Customize Favorite Objectsdialog box (see Figure 3-20), which shows all the available objects on the left and the selectedobjects on the right Objects can be grouped through use of a dotted-line separator

Figure 3-20: Personalize your Insert bar for maximum productivity

using the Customize Favorite Objects dialog box

To add, remove, or modify objects in the Favorites category, follow these steps:

1 Choose Favorites from the Insert bar menu or tab.

2 Right-click (Control-click) and choose Customize Favorites from the context menu You

can actually perform the same action from any category/tab of the Insert bar to openthe Customize Favorite Objects dialog box

3 In the Customize Favorite Objects dialog, select the category holding the object you

want to display in the Favorites category from the drop-down list under AvailableObjects The All category displays every available object, sorted by category If youknow what category your object is in, it’s quicker to select that category from the list

4 Choose an object from those listed in the Available Objects area and select the

double-arrow button The selected item moves to the Favorite Objects list

5 Repeat Steps 3 and 4 to declare additional objects as favorites.

6 Change the order in which the objects are displayed by selecting an object and then

clicking Up or Down to move the object left or right, respectively

7 To delete an object from the Favorites list, select it and choose Remove.

8 To group objects together, choose Add Separator to insert a dotted-line divider.

9 When you’re finished, click OK.

The objects you’ve selected, in the order you’ve specified, appear in the Favorites category.You can modify these objects at any time by re-opening the Customize Favorite Objectsdialog

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-9describes each of the objects in the ASP category

Table 3-9: ASP Category

Icon Name Description

Server Variable Opens a dialog box from which you can choose one member of the

server variables collection to reference in your codeInclude Inserts a #include statement for implementing a server-side

includeCode 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 codeElse Inserts an Else statement in the ASP code

Else If Inserts an ElseIf statement in the ASP code used to create

alternative conditionsEnd 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 displayTrimmed 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.CreateObject method, used to instantiate ASP

components or scripting objectsMore 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-10, give youquick access to frequently referenced elements of an ASP.NET page

Table 3-10: ASP.NET Category

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

use to implement new server behaviorsImport Namespace Adds the statement <%@ Import Namespace=”” %> to

your codeTrimmed Form Element Inserts the code for trimming elements in a form

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

Runat Server Inserts the code runat=”server” at the current locationBound Data Inserts the <%# %> delimiters for bound data

Page_Load Inserts a Page_Load subroutineasp:Button Inserts a NET Form Control button in a formasp: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 checkboxesasp:DropDownList Inserts a NET Form Control drop-down list in a formasp:ImageButton Inserts a NET Form Control graphical button in a formasp:Label Inserts a NET Form Control label for an element in a formasp: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

Continued

Table 3-10 (continued)

asp:TextBox Inserts a NET Form Control text box in a form

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

additional ASP.NET tags

CFML objects

The CFML category of the Insert bar gives you access to the most frequently used objects inthe ColdFusion toolbox This category is only available on the Insert bar if the active docu-ment has a file extension of cfm or cfc Table 3-11 describes each object in the CFML cate-gory, including those found under two menu buttons The first is Flow, which insertsColdFusion markup tags that alter the flow of control through the code The second isAdvanced, which provides numerous advanced functions, such as those which enable you totransfer files and data using a variety of protocols

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

Table 3-11: CFML 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 codecfquery Opens the Tag Editor for the cfquery tag, which queries a data

sourcecfoutput Opens the Tag Editor for specifying attributes of the cfoutput tag

cfinsert Opens the Tag Editor for specifying attributes of the cfinsert tag for

adding form data to a data sourcecfupdate Opens the Tag Editor for specifying attributes of the cfupdate tag for

updating records in a data sourcecfinclude Opens the Tag Editor for specifying attributes of the cfinclude tag,

used to include a file in a ColdFusion pagecflocation Opens the Tag Editor, in which you can specify the file to open when

the cflocation tag is processedcfset Inserts the <cfset > tag at the current location; used to set the value

of a variable

Tip

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 of ColdFusion codeFlow:cftry Inserts the <cftry></cftry> exception handling tags at the current

locationFlow:cfcatch Opens the Tag Editor for the <cfcatch></cfcatch> tags, used to

intercept and process an interruption in the program flowFlow:cfthrow Opens the Tag Editor for <cfthrow>, which forces an interruption in

the program flowFlow:cflock Opens the Tag Editor for the <cflock></cflock> tag pair, used to

serialize access to shared dataFlow:cfswitch Opens the Tag Editor for a <cfswitch></cfswitch> pair, where

you can define the expression to be evaluated in the ColdFusionversion of a Case statement

Flow:cfcase Opens the Tag Editor for a <cfcase></cfcase> tag pair; these tags

enclose the actions to be taken when the expression specified by

<cfswitch>has a given valueFlow:cfdefaultcase Inserts <cfdefaultcase> </cfdefaultcase> tags, which specify

what action should be taken when the expression specified by the

<cfswitch>tag has a value not specified in any <cfcase> tagFlow:cfif Inserts <cfif ></cfif> tags, used to indicate a conditional

statementFlow:cfelse Inserts the <cfelse> tag at the current location

Flow:cfelseif Inserts a <cfelseif> tag, used to implement alternative conditions

Flow:cfloop Opens the Tag Editor for the <cfloop> </cfloop> pair, which are

used to repeat statements until some condition is metFlow:cfbreak Inserts the <cfbreak> tag, used to exit a <cfloop> before the

specified loop condition is metAdvanced:cfcookie Opens the Tag Editor for the <cfcookie> tag, which is used to

save cookies — small amounts of textual information — on the client’shard drive

Advanced:cfcontent Opens the Tag Editor for the <cfcontent> tag, where you can specify

the type of encoding used in the file

Continued

Table 3-11 (continued)

Icon Name Description

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

Advanced: Adds tags to specify page encoding and content typeColdFusion Page

EncodingAdvanced: Opens the Tag Editor for the <cfapplication> tag, where you can cfapplication specify session and application characteristics, such as timeout valuesAdvanced:cferror Opens the Tag Editor for the <cferror> tag, which enables the code

to define a particular page to display when an error occursAdvanced: Opens the Tag Editor for the <cfdirectory> tag, which enables your cfdirectory code to create, rename, delete, and obtain the contents of server

directoriesAdvanced:cffile Opens the Tag Editor for the <cffile> tag, which enables your code to

read, write, update, copy, delete, upload, rename, and move server filesAdvanced:cfmail Opens the Tag Editor for the <cfmail> </cfmail> tag pair, which

enables your code to send an e-mail message with dynamic contentAdvanced: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 themAdvanced:cfhttp Opens the Tag Editor for the <cfhttp></cfhttp> tag pair, enabling

the code to upload files using HTTP protocolAdvanced: Opens the Tag Editor for the <cfhttpparam> tag, needed if the cfhttpparam methodspecified in the <cfhttp> tag is post

Advanced:cfldap Opens the Tag Editor for you to specify parameters for the <cfldap>

tag, used to communicate with an LDAP serverAdvanced:cfftp Opens the Tag Editor for the <cfftp> tag, which the code can use to

transfer files to and from an FTP serverAdvanced:cfsearch Opens the Tag Editor for the <cfserach> tag, which enables the code

to search a collectionAdvanced:cfindex Opens the Tag Editor for the <cfindex> tag, which adds indexed

entries to a pre-existing collection; this is required before thecollection can be searched

Advanced:cfimport Opens the Tag Editor for the <cfimport> tag, used to insert

ColdFusion or JSP tag librariesAdvanced:cfmodule Opens the Tag Editor for the <cfmodule> tag, used to call a custom tagAdvanced:cfobject Opens the Tag Editor for you to specify <cfobject> parameters

Advanced:cfchart Opens the Tag Editor for a <cfchart></cfchart> tag pair, used to

graphically depict dataMore Tags Opens the Tag Chooser dialog box, giving 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 afile extension of jsp Table 3-12 describes the objects in the JSP category

Table 3-12: JSP Category

Icon Name Description

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

location in the documentInclude Directive Inserts an Include directive, <%@ include %>, used to include

either a static HTML page or another JSP page in the documentTaglib Directive Inserts the code to implement the Taglib directive, <%@ taglib

%>, for working with custom tag librariesJSP Page Encoding Adds tags that set the encoding to the top of the page

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

the definitions for page-level variables and supporting methodsJSP 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 or around the selected textJSP Use Bean Opens the Tag Editor for the <jsp:useBean /> tag, which is

required before you can access a bean within a JSP pageJSP Set Property Opens the Tag Editor for the <jsp:setProperty /> tag, which

is used to store the value of a propertyJSP Get Property Opens the Tag Editor for the <jsp:getProperty /> tag, which

retrieves the current value of a propertyJSP Include Opens the Tag Editor for the <jsp:include /> tag, which

includes another static HTML page or JSP file at runtimeJSP Forward Opens the Tag Editor for the <jsp:forward /> tag, which

redirects a request to another JSP, servlet, or static HTML pageJSP Params Inserts the <jsp:params></jsp:params> tag pair at the current

location in the documentJSP Param Opens the Tag Editor for the <jsp:param /> tag, which is used

to provide additional information for other tags, such asjsp:includeand jsp:forward

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

specify a bean or Java appletJSP Comment Inserts the code for a JSP commentMore 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, choose 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-13 describes the PHP objects available in the Insert bar

Table 3-13: PHP Category

Icon Name Description

Form Variables Inserts a reference to $_POST, used to retrieve form data passed

using the Post method

URL Variables Inserts a reference to $_GET, used to retrieve information passed

using the GET method

Session Variables Inserts a reference to $_SESSION, an array that contains session

variables available to the script

Cookie Variables Inserts a reference to $_COOKIE, 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 is encounteredwhile the included file is being read, 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 is encounteredwhile the included file is being read, a fatal error occurs

PHP Page Encoding Adds PHP tags to the top of the page that set the encoding

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

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

conditions specified in the corresponding If statement are not met.More Tags Opens the Tag Chooser dialog box, which gives you access to

additional PHP tags

Tip

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, size, and so on If you click an image, theProperty inspector displays a small thumbnail of the picture, and the image’s attributesfor height and width, image source, link, and alternative text (see Figure 3-21)

Figure 3-21: 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 the board shortcut, Ctrl+F3 (Command+F3) As with the Insert bar, the Property inspector can beclosed by selecting the Close button (only available if the Property inspector is floating),unchecking Window ➪ Properties, or by 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 Onthe PC, you can collapse the Property inspector so that only the title bar is left showing byclicking the Properties name on its window

key-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 On Windows only, youcan also click and drag any open gray area in the floating inspector itself, a differencebetween it and the Insert bar This technique is handy for quickly moving the inspectoraside, out of your way When you move the floating inspector near the edge of thescreen or near a window border, the Property inspector snaps to the edge of the win-dow or screen

✦ In the PC workspace, whether the inspector is docked or floating, you can move it byclicking on the gripper and dragging the inspector In this workspace, the Property inspec-tor can be docked at the top or the bottom of the Dreamweaver window If you move orresize the Dreamweaver window, the docked Property inspector moves with the window

Gripper

Point to File

OptionsCollapse

Browse to File

ExpandHelpQuick Tag Editor

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 andenter a 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 new data —the old value is immediately replaced You can see the effect of your modification by pressingthe Tab key to move to the next attribute or by clicking in the Document window

Using the Quick Tag Editor, you can make small additions to the code without switching toCode view Located on the right of the Property inspector, just below the Help button, the QuickTag Editor pops open a small window to display the code for the currently selected tag You canswiftly change attributes or add special parameters not found in the Property inspector.For several attributes, the Property inspector also provides drop-down list boxes that offer alimited number of options To open the drop-down list of available options, click the arrowbutton to the right of the list box Then choose an option by highlighting 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 anddrag 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

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

You can type in a color’s name (such as blue) or its six-figure hexadecimal value (such as#3366FF), or select the color box Choosing the color box opens a color picker, shown in

Figure 3-22, that displays 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 Selecting this icon opens a range Color dialog box in which you can choose a color visually or enter its red, green, andblue values or its hue, saturation, and luminance values

full-Tip Tip

Figure 3-22: 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

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 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 optionsfrequently, Macromedia standardized the color picker across its product line to make it easier

to switch between applications

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

On the PC, the Property inspector also includes an Options menu Open this context-sensitivemenu by clicking the Options menu icon, located in the upper-right corner of the Propertyinspector The commands on this menu vary depending on what type of object has beenselected in the Document window Some basic commands, however, are always available,regardless of what has been selected, such as 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

Note Tip

Default color

Color swatch

Eyedropper

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, and so much more.Dreamweaver presents its tools in a variety of panels, as shown in Figure 3-23 Panels can becombined into the same window; when grouped together in this way, each panel is displayed

as a tab within the panel group The panel groups can be floating or docked to each other Onthe PC, the panel groups can also be docked within the Dreamweaver window

Figure 3-23: Dreamweaver’s many tools

reside in panels, which can float anywhere onthe screen, or, on the PC, can be docked withinthe Document window

Table 3-14 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

Panels Collapsed panel groups

Expanded panel group

Table 3-14: Dreamweaver Panels

Panel Keyboard Shortcut Description Detailed Information

CSS Styles Shift+F11 Enables you to create external See Chapter 7

and embedded CSS style sheets

Behaviors Shift+F3 Enables you to create Dynamic See Chapter 12

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 Presents extensive reference See Chapter 6

(Shift+F1) documentation for HTML, CSS,

JavaScript, accessibility guidelines, and a variety of server-side scripting languages

Databases Ctrl+Shift+F10 Provides a bird’s-eye view of all See chapters in Part IV

(Command+Shift+F10) the connections currently defined

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 Part IV

(Command+F10) and datasets and display that

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

Server Behaviors Ctrl+F9 Gives you access to prewritten See Chapter 35

(Command+F9) server-side scripts that are used

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

Components Ctrl+F7 Enables you to quickly add new See Chapter 19

(Command+F7) 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 gives you full introspection to all the pieces of that component

Continued

Table 3-14 (continued)

Panel Keyboard Shortcut Description Detailed Information

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

remote, and testing sites

Assets F11 Gives you access to many See the following:

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

Movies: Chapter 25Scripts: Chapter 6Templates: Chapter 27Library: Chapter 28Search F7 to open the Shows the results of a Find See Chapter 8

Results panel and All request

then choose the Search categoryValidation F7 to open the Results When you validate a document, See Chapter 29

panel and then choose the results are displayed in the Validation category this panel

Target Browser F7 to open the Results Displays results of a target See Chapter 29Check panel and then choose browser check

the Target Browser Check categoryLink Checker F7 to open the Results Shows the results when you See Chapter 10

panel and then choose check for broken links within the Link Checker category your site

Site Reports F7 to open the Results Displays the output from a See Chapter 30

panel and then choose variety of site reports

the Site Reports categoryFTP Log F7 to open the Results Lists the results of FTP See Chapter 5

panel and then choose operations

the FTP Log categoryServer Debug F7 to open the Results Enables you to browse your page See Chapter 35(Windows only) panel and then choose directly in Dreamweaver’s Design

the Server Debug window as if it were a Web category browser This is different from

Live Data view because the page

is not editable

Code Inspector F10 Provides an alternative to Code See Chapter

view in a floating window

Frames Shift+F2 Enables you to select and rename See Chapter 17

frames within a frameset

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

enabling you to undo and redo multiple steps at a time

Layers F2 Enables you to view and change See Chapter 11

some characteristics of layers

Hiding and showing panels

Because of the large number of panels available in Dreamweaver, your workspace canbecome cluttered very quickly To reduce the amount of screen real estate taken up by theindividual panels, 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-14, or

by using commands in the Window menu; a separate command opens each 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 collapses the panel 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-On the PC, the panel groups may be docked along the edges of the Dreamweaver window Inthis situation, you can collapse all the panel groups to maximize your work area by clickingthe button that appears along the border of the panel area, as shown in Figure 3-24 Thisaction collapses only the panel groups docked on one edge of the screen, leaving intact tool-bars, floating panels, or even panels docked along a different edge of the window

In any workspace, you can collapse an individual panel group so that just its title bar is ing To do this, click the panel group name in the title bar, or click the small triangle next tothe panel group name

show-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

Tip Tip

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

the click of a single button

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 opens automatically

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’re not limited to the predefined panel groups In fact, the panel groups are completelycustomizable, 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

Note

Collapses/expands side panel areaCollapses/expands bottom panel area

Next, right-click (Control+click) in the title bar of the panel group, select 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, select 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 want

To create a new panel group, open a panel that you want to include in the new group andright-click (Control+click) in the title bar of the current panel group Then choose 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, butyou can change it, as explained in the following paragraph You can add other panels to yournew panel group, using the method described previously; your new panel group name auto-matically shows up in the context menu for the panel group You can also dock the new panel group with others, and on the PC, you can dock the panel group within the Documentwindow

Some caveats apply when customizing panels You cannot combine panels with the Insertbar or the Property inspector without undocking the panels first Also, if you customize yourpanel groups and then change workspace layouts, your customizations are lost

Dreamweaver initially assigns a new panel group the same name as the first panel in thegroup You can change this name — or the name of one of Dreamweaver’s original panelgroups — by choosing Rename Panel Group from the Options menu, accessed by clicking theicon at the right of an open panel group’s title bar The same command is available by right-clicking the panel group title bar

How do you remove a panel from a panel group? First choose the Group <panel> With ➪ New

Panel 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 (seeFigure 3-25) and dragging the window to any location on the screen

In the Macintosh workspace, you can dock panel groups to each other, but you cannot dockthem within the Document window On the PC, not only can you dock floating panel groupstogether, you can dock panel groups within the Dreamweaver window; when you move orresize the Dreamweaver window, the docked panels move, too To dock panel groups, dragthe window by the gripper over another panel group, or to the edge of the window, until theoutline of the window changes to indicate it is in position When you release the mouse but-ton, the panel group is docked Although you can move floating panels by dragging the titlebar, panels can be docked only when you are dragging with the gripper

Note Tip

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

On the PC, you are not limited to having your panels on one edge of the window You candock panels to both the left and right sides of the screen at the same time, although thisreduces your work area considerably unless you have a large monitor

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 theDocument window or through a corresponding keyboard shortcut This section offers a refer-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 Filespanel; the menu options particular to the Files 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

Tip Tip

The File menu

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

Table 3-15: File Menu Commands

New Opens the New Document dialog box, Ctrl+N Command+N

where you can specify the type of document to create

Open Displays the Open dialog box for opening Ctrl+O Command+O

an existing file

Open Recent Displays the last 10 opened files; select N/A N/A

any name to reopen the file

Open in Frame Opens an existing file in the Ctrl+Shift+O Command+

Close Closes the currently active open window Ctrl+W or Ctrl+F4 Command+WClose All Closes all open windows Ctrl-Shift-W Command-

Shift-WSave Saves the current document, or displays Ctrl+S Command+S

the Save As dialog box for an unnamed document

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

Save Frameset Saves a file describing the current Ctrl+S Command+S

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

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

saving the current frameset This command Shift+S

is available only if a frameset is selected in the Document window

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

frame, or displays the Save As dialog boxfor 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 before Ctrl+Shift+S Command+

saving the file for the currently selected Shift+Sframe This command is available only if a

frame is active in the Document window

Continued

Table 3-15 (continued)

Save Frame Stores the document in the currently N/A N/A

As Template 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

Save All Saves all currently open documents N/A N/ASave to Stores the current file on any defined N/A N/ARemote Server remote server

Save As Template Stores the current document as a N/A N/A

template in the Templates folder of the current site

Revert Loads the previously saved version of N/A N/A

the current page This command is available only if the current document has been changed since the last time

it was saved

Print Code Opens the standard Print dialog box to Ctrl+P Command+P

print the code for the current document

Import ➪ XML Creates a new document by inserting an N/A N/Ainto Template XML file into the current template

Import ➪ Inserts a table derived from a file with Tabular Data delimited data

Import ➪ Word Converts a Microsoft Word file to HTML N/A N/Adocument and inserts it at the current cursor location

(Windows only)Import ➪ Excel Converts a Microsoft Excel file to HTML N/A N/ADocument and inserts it at the current cursor location

(Windows only)Export ➪ Template Saves the current template’s editable N/A N/AData as XML 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 based on N/A N/A

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 selected table N/A N/A

as a delimited text file

Convert ➪ XHTML Changes the current document to N/A N/A

Browser List edit, or delete additional preview browsers

Check Page ➪ Checks the current document against N/A N/ACheck Accessibility accessibility guidelines and displays the

results in the Site Reports panel This command is available only in a document that has been saved

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

Link Checker panel

Check Page ➪ Displays the Check Target Browsers dialog N/A N/ACheck Target box, where the user can validate the current

Browsers file against selected browser profiles

Check Page ➪ Validates the current page against the Shift+F6 Shift+F6Validate Markup code standard that you choose in the

Validator category of the Preferences dialog box

Check Page ➪ Validates an XML or XHTML document, N/A N/AValidate as XML displaying the results in the Validation panel

Design Notes Displays the Design Notes dialog box for N/A N/A

the current document

Exit (On the Closes all open files and quits Ctrl+Q or Alt+F4Macintosh,

Dreamweaver ➪Quit Dreamweaver)

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-16 lists all the commands found under the Edit menu

Table 3-16: Edit Menu Commands

Undo Reverses the last action; the number of Ctrl+Z Command+Z

times you can undo is determined by a or Option+

Redo/Repeat Repeats the last action or restores the Ctrl+Y Command+Y

effects of an action that was undone or Command + ZCut Places a copy of the current selection on Ctrl+X Command+X

the clipboard, and removes the selection or Shift+Deletefrom the current document

Copy Places a copy of the current selection on Ctrl+C Command+C

the clipboard, and leaves the selection in the current document

Paste Copies the clipboard to the current cursor Ctrl+V Command+V

position; if the clipboard contains Word or Excel content, the content is converted to HTML first

Clear Removes the current selection from Delete or Delete or

Copy HTML Copies the current selection onto the Ctrl+Shift+C Command+

Paste HTML Pastes the current selection from the Ctrl+Shift+V Command+

Paste Text Pastes just the text contained on the

clipboard without any formatting

Select All Highlights all the elements in the current Ctrl+A Command+A

Find and Replace Displays the Find and Replace dialog box Ctrl+F Command+F

for locating items and modifying one or more documents in the site

Find Next Repeats the previous Find operation F3 Command+G(Find Again)

Go to Line Moves the cursor to the start of the Ctrl+G Command+,

specified line (Code view only) (Command+

comma)

Show Code Hints Presents a context-sensitive list of options Ctrl+Space Command+Space

for entering tags, attributes, or values within the code (Code view only)

Indent Code Indents selected code (Code view only) Ctrl+Shift+> Command+Shift+

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

comma)Balance Braces Selects code within the nearest surrounding Ctrl+’ Command+’

parentheses or braces (Code view only) (Command+

apostrophe)Repeating Cuts, copies, or removes the currently N/A N/AEntries ➪ Cut selected entry within a template’s

Repeating Entry/ repeating region

Copy Repeating Entry/Delete Repeating EntryEdit with External Opens the current document in the N/A N/AEditor (Editor is External HTML Editor as defined in

named in menu Preferences ➪ File Types/Editors

item after being defined in Preferences)Tag Libraries Opens the Tag Library Editor, where you N/A N/A

can control how Dreamweaver works with and formats tags and their attributes

Keyboard Opens the Keyboard Shortcuts dialog N/A N/AShortcuts (On box to enable customization of the

the Macintosh, keyboard shortcuts

Dreamweaver ➪Keyboard Shortcuts)Preferences (On Displays the Preferences dialog box, Ctrl+U Command+Uthe Macintosh, where you can customize many aspects

Dreamweaver ➪ of the Dreamweaver work environment

Keyboard Shortcuts)

The View menu

As you build your Web pages, you may find that it’s helpful to be able to turn certain features

on and off The View menu centralizes all these commands and switches between Design viewand Code view One of the handiest commands hides all the visual aids with a keyboard short-cut, Ctrl+Shift+I (Command+Shift+I) Table 3-17 describes each command under the View menu

Table 3-17: View Menu Commands

Code Displays the code for the current page N/A N/ADesign Displays a view of the current page that N/A N/A

is similar to the view in a browserCode and Design Splits the view, showing Code and Design N/A N/A

views simultaneously; also known as Split view

Switch Views Switches between Design view and Code Ctrl+` Command+`

view, and activates the alternate view in Split view

Refresh Design Applies changes made in Code view to F5 F5

Server Debug Displays a ColdFusion page in an internal Crtl+Shift+G N/A(Windows only) browser for debugging

Live Data Processes the current page using the Ctrl+Shift+R Command+

defined testing server, so that the actual Shift+Rdata is visible in Design view

Live Data Settings Displays a dialog box for altering N/A N/A

parameters passed to the current pageHead Content Displays symbols for elements inserted Ctrl+Shift+W Command+

in the <head> section of the current Shift+Wdocument

Noscript Content Displays any content enclosed within N/A N/A

<noscript></noscript>tags, in addition to regular contentTable Mode ➪ Displays the Standard Mode in the N/A N/AStandard Mode Document window

Table Mode ➪ Shows table borders with increased F6 F6Expanded Tables padding and spacing

ModeTable Mode ➪ Engages Layout Mode for creating layout Ctrl+F6 Command+F6Layout Mode cells and tables

Visual Aids ➪ Toggles all the visual aids on or off Ctrl+Shift+I Command+

Visual Aids ➪ Displays or hides the width indicators for N/A N/ATable Widths each table column

Visual Aids ➪ Displays or hides the border outlining N/A N/ATable Borders a table

Visual Aids ➪ Toggles the border outlining an N/A N/ALayer Borders unselected layer

Visual Aids ➪ Displays/hides borders in a frameset N/A N/AFrame Borders

Visual Aids ➪ Controls whether the hotspots for N/A N/AImage Maps defined image maps are shown

Visual Aids ➪ Displays or hides the symbols for certain N/A N/AInvisible Elements HTML tags, which can be specified in the

Preferences dialog boxCode View Options Determines whether lines automatically N/A N/A

➪ Word Wrap wrap in Code viewCode View Options Indicates whether line numbers are N/A N/A

➪ Line Numbers displayed in Code viewCode View Determines whether invalid markup is N/A N/AOptions➪ Highlight highlighted in Code view

Invalid HTMLCode View Determines whether the code is N/A N/AOptions ➪ Syntax displayed with color and other formatting

Coloring defined in the Preferences dialog boxCode View Specifies whether the code is N/A N/AOptions ➪ Auto automatically indented

IndentRulers ➪ Show Displays the horizontal and vertical rulers Ctrl+Alt+ R Command+

Option+ RRulers ➪ Reset Resets the rulers’ 0,0 coordinates to the N/A N/AOrigin upper-left corner of the window

Rulers ➪ Pixels/ Sets the rulers to a selected measurement N/A N/AInches/Centimeters system

Grid ➪ Show Grid Displays a background grid using Ctrl+Alt+ G Command+

Grid ➪ Snap To Grid Forces inserted objects to align with Ctrl+Alt+ Shift+G Command+

Grid ➪ Settings Displays the Grid Settings dialog box N/A N/ATracing Image Displays the image chosen as the Tracing N/A N/A

➪ Show Image according to the Page Properties

settingsTracing Image ➪ Aligns the top-left corner of the Tracing N/A N/AAlign with Selection Image with the upper-left corner of the

selected objectTracing Image ➪ Enables the Tracing Image to be moved N/A N/AAdjust Position using the arrow keys or numerically

Tracing Image ➪ Resets the position of the Tracing Image N/A N/AReset Position to the upper-left corner of the document

Continued

Table 3-17 (continued)

Tracing Image Displays the Open File dialog box for N/A N/A

➪ Load inserting the tracing imagePlugins ➪ Play Plays the selected plugin Ctrl+Alt+P Command+

Option+PPlugins ➪ Stop Stops the selected plugin from playing Ctrl+Alt+X Command+

Option+XPlugins ➪ Play All Plays all plugins on the current page Ctrl+Alt+Shift+P Command+

Option+Shift+PPlugins ➪ Stop All Stops all plugins on the current page Ctrl+Alt+Shift+X Command+

Hide Panels Hides or restores all open panels F4 F4Toolbars ➪ Insert Toggles the Insert bar to be visible N/A N/A

or hiddenToolbars ➪ Toggles the Document toolbar to be N/A N/ADocument visible or hidden

Toolbars ➪ Standard Toggles the Standard toolbar on and off N/A N/A

The Insert menu

The Insert menu contains the same items available through the Insert bar In fact, if you addadditional objects (as discussed in Chapter 33), you can see your objects listed on the Insertmenu the next time you start Dreamweaver All objects selected from the Insert menu areadded to the page at the current cursor position Table 3-18 lists the items available to beinserted in the standard version of Dreamweaver

Table 3-18: Insert Menu Commands

Tag Opens the Tag Chooser, where you can Ctrl+E Command+E

select a markup tag to insert at the currenttext insertion point

Image Opens the Insert Image dialog box, which Ctrl+Alt+I Command+

enables you to input or browse for a Option+Igraphics file

Image Objects ➪ Reserves space on a page for an image to N/A N/AImage Placeholder be specified later

Image Objects ➪ Opens a dialog box for inserting N/A N/ARollover Image a Rollover button.

Image Objects ➪ Opens the Insert Navigation Bar dialog N/A N/ANavigation Bar box for creating a series of Rollover

buttons with links

Image Objects ➪ Imports HTML and JavaScript generated N/A N/AFireworks HTML by Fireworks

Media ➪ Flash Inserts a specified Flash movie file Ctrl+Alt+F Command+

Option+FMedia ➪ Image Adds a Flash element slide show N/A N/AViewer

Media ➪ Flash Text Includes a Flash object for displaying N/A N/A

rollover text

Media ➪ Inserts an animated button based on N/A N/AFlash Button a Flash template

Media ➪ Shockwave Inserts a specified Shockwave file Ctrl+Alt+D Command+

Media ➪ Applet Enables you to input or browse for a N/A N/A

Java class source

Media ➪ ActiveX Inserts an ActiveX placeholder N/A N/AMedia ➪ Plugin Inserts a specified plugin into the N/A N/A

document

Option+TTable Objects ➪ Adds the specified row or column in N/A N/AInsert Row Above/ relation to the cursor in an existing table

Below, Insert Column to the Left/RightTable Objects ➪ Creates a table derived from a file with N/A N/AImport Tabular delimited data

DataTable Objects ➪ Inserts the specified table-related markup N/A N/ATable/TR/TH/TD/ tags at the text-insertion point Best used

Caption in Code view

Layout Objects ➪ Inserts a <div> tag with an ID N/A N/ADiv Tag and/or class

Layout Objects ➪ Inserts a layer of a preset size N/A N/ALayer

Continued

Table 3-18 (continued)

Layout Objects ➪ Inserts a layout table (in Layout mode) N/A N/ALayout Table

Layout Objects ➪ Inserts a layout cell (in Layout mode) N/A N/ALayout Cell

Form ➪ Form Creates the form structure on your N/A N/A

Web page

Form ➪ Text Field/ Inserts the selected form object at the N/A N/ATextarea/Button/ current cursor position

Checkbox/Radio Button/List-Menu/

File Field/Image Field/Hidden FieldForm ➪ Radio Group Creates a group of related radio buttons N/A N/A

formatted as you specify

Form ➪ Jump Menu Opens a dialog box for creating a list box N/A N/A

with links

Form ➪ Fieldset Inserts a <fieldset></fieldset> tag N/A N/A

pair around the current selection or at the current cursor position if nothing is selected;

used to group objects on a form

Form ➪ Label Inserts <label></label> tags Best N/A N/A

used in Code view

Hyperlink Inserts a text hyperlink into the page N/A N/A

Named Anchor Inserts a named anchor at the Ctrl+Alt+A Command+

Date Inserts the current day, date, and time N/A N/A

in a format of your choosing

Comment Inserts an HTML comment in the document N/A N/AHTML ➪ Inserts a horizontal line the width of the N/A N/AHorizontal Rule current window

HTML ➪ Frames ➪ Inserts the selected frameset N/A N/ALeft/Right/Top/

Bottom/Bottom Nested Left/Bottom Nested Right/Left Nested Top/Left Nested Bottom/

Right Nested Bottom/

Right Nested Top/Top and Bottom/Top Nested Left/Top Nested Right

HTML ➪ Frames ➪ Inserts the selected frameset-related N/A N/AFrameset/Frame/ markup tags at the current position in your

Floating Frame/ document Best used in Code view

No FramesHTML ➪ Inserts <font></font> tags in the N/A N/AText Objects ➪ Font document

HTML ➪ Creates the specified effect for selected N/A N/AText Objects ➪ text in Design view; in Code view, it also

Bold/Italic/ insert the appropriate empty tags if no text Strong/Em is selected

HTML ➪ In Design view, converts the current block N/A N/AText Objects ➪ of text to the specified format; in Code

Paragraph/Block view, inserts the appropriate tags around Quote/Preformat- the selected text or as empty tags if noth-ted Text/H1/H2/H3 ing is selected

HTML ➪ In Design view, converts the current block N/A N/AText Objects ➪ of text to an item in a list of the designated

UnorderedList/ type; in Code view, inserts the opening and Ordered List closing tags for the list at the current posi-

tion or around the selected text

HTML ➪ Inserts <li></li> tags at the current N/A N/AText Objects ➪ location or around the selected text

List ItemHTML ➪ In Design view, converts the current block N/A N/AText Objects ➪ of text to a definition term within a defi-

Definition List nition list; in Code view, inserts the tags

for a definition list

HTML ➪ Formats the selected text as a term or N/A N/AText Objects ➪ definition in a definition list, or inserts

Definition Term/ empty tags for the term or definition if Definition nothing is selected

HTML ➪ Inserts <abbr> or <acronym> tags N/A N/AText Objects ➪ the current selection or at the around

Abbreviation/ text-insertion point

AcronymHTML ➪ Opens a dialog box for you to insert N/A N/AScript Objects ➪ JavaScript code in addition to alternative

Script content for browsers that do not have

scripting enabled

HTML ➪ Opens a dialog box in which you can N/A N/AScript Objects ➪ specify content that displays in browsers

Noscript with scripting disabled

HTML ➪ Opens the dialog box for inserting a N/A N/AScript Objects ➪ server-side include file

Server-side Include

Continued

Table 3-18 (continued)

HTML ➪ Head Tags ➪ Displays the appropriate dialog box for N/A N/AMeta/Keywords/ inserting the selected HTML tag in the

Description/ <head>section

Refresh/Base/LinkHTML ➪ Inserts a line break <BR> tag Shift+Enter Shift+ReturnSpecial Characters ➪

Line Break

spacebar)HTML ➪ Inserts the HTML code for the selected N/A N/ASpecial Characters ➪ character entity

Copyright/Registered/

Trademark/Pound/

Yen/Euro/Left Quote/

Right Quote/Em-DashHTML ➪ Opens the Insert Other Character dialog N/A N/ASpecial Characters ➪ box to choose a special character

OtherTemplate Objects ➪ Converts the current page to template N/A N/AMake Template/Make type chosen

Nested TemplateTemplate Objects ➪ Inserts the selected type of region into N/A N/AEditable Region/ a template file

Optional Region/

Repeating Region/

Editable Optional Region/Repeating Table

Application Objects ➪ Opens a dialog box in which you N/A N/ARecordset can define the subset of data to be

extracted from a database

Application Objects ➪Command

Application Objects ➪ Adds data from a recordset to the N/A N/ADynamic Text document

Application Objects ➪ Inserts into the document a table that N/A N/ADynamic Data ➪ is populated with data from a recordset

Dynamic Table you have defined