80 Part I ✦ Dreamweaver MX 2004 Basics Table 3-4 (continued) Icon Name Description Detailed Information 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 as those needed to emphasize text, change the font face, or create bulleted lists. Table 3-5 describes 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 or Code 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, the tag pair is inserted at the current text insertion point. 543504 ch03.qxd 12/10/03 10:23 PM Page 80 81 Chapter 3 ✦ Touring Dreamweaver In Design view, Dreamweaver also surrounds selected text with the appropriate tag pair. But in some situations, Dreamweaver does more than blindly surround the selected text with the specified 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 3 objects are treated as mutually exclusive. If you select text that is formatted as a Heading 1, and then you click the Heading 2 button on the Insert bar, Dreamweaver not 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 inappro- priate coding and should be avoided. ✦ When you select one or more paragraphs of text in Design view and then click the Unordered 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 addi- 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. In Design view, if no text is selected when you click one of the text formatting buttons in this category, no tags are added until you start typing. This feature helps prevent the inclusion of empty 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 to choose. 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 Icon Name Description Detailed Information 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 543504 ch03.qxd 12/10/03 10:23 PM Page 81 82 Part I ✦ Dreamweaver MX 2004 Basics Table 3-5 (continued) Icon Name Description Detailed Information 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 15 Description 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 6 Line Break wrap at the cursor position. Characters: Inserts a hard space at the current See Chapter 6 NonBreaking Space cursor position. Characters:Left Inserts the code for the opening curly See Chapter 6 Quote double-quote symbol. 543504 ch03.qxd 12/10/03 10:23 PM Page 82 83 Chapter 3 ✦ Touring Dreamweaver Icon Name Description Detailed Information Characters: Inserts the code for the closing curly See Chapter 6 Right Quote double-quote symbol. Characters: Inserts the code for the em dash symbol. See Chapter 6 Em Dash Characters:Pound Inserts the code for the pound See Chapter 6 currency symbol. Characters:Euro Inserts the code for the Euro See Chapter 6 currency symbol. Characters:Yen Inserts the code for the yen See Chapter 6 currency symbol. Characters: Inserts the code for the copyright symbol. See Chapter 6 Copyright Characters: Inserts the code for the registered See Chapter 6 Registered trademark symbol. Trademark Characters: Inserts the code for the trademark symbol. See Chapter 6 Trademark Characters: Opens the dialog box for inserting See Chapter 6 Other Characters special characters. HTML The objects in the HTML category of the Insert bar insert a variety of HTML tags, some of which have visual representation on the page, but most of which work behind the scenes. This category is made up of a single object for inserting the horizontal rule tag, and four menu buttons: Head, Tables, Frames, and Script, as shown in Figure 3-18. 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 the page — are written into the <head> section of an HTML document. The Head menu objects enable Web designers to drop in these bits of code in a handy object format. Although Dreamweaver enables you to see the <head> objects onscreen via the View➪ Head Content menu option, you don’t have to have the Head Content visible to drop in the objects. Simply click 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 HTML tags without parameters or additional structures. For example, the Table Tag object inserts just that and nothing more, whereas the Table object (found on both the Common and Layout categories) 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 to your page. All the objects in the HTML category of the Insert bar are described in Table 3-6. 543504 ch03.qxd 12/10/03 10:23 PM Page 83 84 Part I ✦ Dreamweaver MX 2004 Basics Table 3-6: HTML Category Icon Name Description Detailed Information 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 13 Header 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 13 Caption 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. 543504 ch03.qxd 12/10/03 10:23 PM Page 84 85 Chapter 3 ✦ Touring Dreamweaver Icon Name Description Detailed Information Frames:Floating Inserts <iframe></iframe> tags to create See Chapter 17 Frame 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 28 Include 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, the same basic code that is used to insert employee records into a Human Resources database may 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 supply- ing objects in the 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 currently onscreen, and links to another page with detailed information from a selected record. Dreamweaver’s Application objects may be used separately or together. The Master Detail Page Set object includes two other Application objects: the Recordset Navigation Bar object and the Recordset Navigation Status object. Application objects are particularly powerful when combined with Dreamweaver’s template feature. It’s possible, for example, to create a basic Master Detail Page Set with the Application object 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 to the 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. 543504 ch03.qxd 12/10/03 10:23 PM Page 85 86 Part I ✦ Dreamweaver MX 2004 Basics Table 3-7: Application Category Icon Name Description Detailed Information 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 22 Collection only in JSP. Dynamic Data: Inserts a table in the document that is See Chapter 21 Dynamic Table populated with data from a recordset you have defined. Dynamic Data: Adds data from a recordset to the document. See Chapter 21 Dynamic Text Dynamic Data: Binds data from a recordset to a text field See Chapter 21 Dynamic Text Field form element. Dynamic Data: Binds data from a recordset to a checkbox See Chapter 21 Dynamic Checkbox form element. Dynamic Data: Binds data from a recordset to a radio See Chapter 21 Dynamic Radio group form element. Group Dynamic Data: Binds data from a recordset to a select list See Chapter 21 Select List form element. 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 20 Show If Recordset area if the recordset is not empty. Not Empty Show Region: Inserts server code to show the enclosed See Chapter 20 Show 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 20 Show If Not area if records from the first page of the First Page recordset are not currently available. 543504 ch03.qxd 12/10/03 10:23 PM Page 86 87 Chapter 3 ✦ Touring Dreamweaver Icon Name Description Detailed Information Show Region: Inserts server code to show the enclosed See Chapter 20 Show 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 20 Show 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 20 Recordset graphics-based navigation bar for moving Navigation Bar among records. Recordset Paging: Inserts code for navigating to the initial See Chapter 20 Move to First record of a recordset. Record/Page Recordset Paging: Inserts code for navigating to the prior See Chapter 20 Move to Previous record in the current recordset. Record/Page Recordset Paging: Inserts code for navigating to the See Chapter 20 Move to Next following record in the current recordset. Record/Page Recordset Paging: Inserts code for navigating to the final See Chapter 20 Move to Last record of a recordset. Record/Page Recordset Paging: Inserts code for navigating to a specified See Chapter 20 Move 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 20 Count: 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 20 Count: Starting current recordset. Available only in Record ColdFusion, .NET, and PHP. Display Record Inserts the ending record value of the current See Chapter 20 Count: Ending recordset. Available only in ColdFusion, Record .NET, and PHP. Display Record Inserts the total number of records in the See Chapter 20 Count: Total current recordset. Available only in ColdFusion, Records .NET, and PHP. Continued 543504 ch03.qxd 12/10/03 10:23 PM Page 87 88 Part I ✦ Dreamweaver MX 2004 Basics Table 3-7 (continued) Icon Name Description Detailed Information Display Record Inserts the present page value of the current See Chapter 20 Count: Current recordset. Only available in .NET. Page Number Master Detail Creates a master page with data in a See Chapter 21 Page Set repeated region and navigation elements, along with a detail page. Insert Record: Creates a form for inserting a record into See Chapter 21 Record Insertion a database. Form Wizard Insert Record: Adds code to an existing form to include See Chapter 21 Insert Record a record into a data source. Update Record: Places a table with the specified form fields See Chapter 21 Record 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 21 Update Record record in a data source. Delete Record Inserts code for deleting a record from See Chapter 21 a data source. User Authentication: Verifies the user is allowed access and sets See Chapter 22 Log In User variable necessary for entry. Not available in .NET. User Authentication: Clears the authentication variable. Not See Chapter 22 Log Out User available in .NET. User Authentication: Inserts code to protect page. Not available See Chapter 22 Restrict Access in .NET. to Page User Authentication: Verifies that the current username is not See Chapter 22 Check New Username already used in the specified data source. 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 slide shows with a variety of animated transitions. Newly added Flash elements — whether from Macromedia or other developers—are also displayed in this category, as described in Table 3-8. 543504 ch03.qxd 12/10/03 10:23 PM Page 88 [...]... the gripper and dragging the inspector In this workspace, the Property inspector can be docked at the top or the bottom of the Dreamweaver window If you move or resize the Dreamweaver window, the docked Property inspector moves with the window 97 98 Part I ✦ Dreamweaver MX 20 04 Basics The Property inspector initially displays the most typical attributes for a given element To see additional properties,... Touring Dreamweaver System color picker Default color Eyedropper Color swatch 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 of color swatches, but you can also select any color onscreen with Dreamweaver s... Chapter 24 Shockwave: Chapter 24 Movies: Chapter 25 Scripts: Chapter 6 Templates: Chapter 27 Library: Chapter 28 Search F7 to open the Results panel and then choose the Search category Shows the results of a Find All request See Chapter 8 Validation F7 to open the Results panel and then choose the Validation category When you validate a document, the results are displayed in this panel See Chapter 29 Target... a JSP comment More Tags Opens the Tag Chooser dialog box, which gives you access to additional JSP tags %>, used to delimit a block of Java code 95 96 Part I ✦ Dreamweaver MX 20 04 Basics You can get information about JSP tags without leaving Dreamweaver To view the JSP documentation, choose Window ➪ Reference, and then select Wrox JSP Reference from the Book drop-down list Tip PHP objects The PHP category... inspector 99 100 Part I ✦ Dreamweaver MX 20 04 Basics Another aspect of the Property inspector is worth noting The circled question mark in the upper-right corner of the Property inspector is the Help button Selecting this button invokes online Help and displays specific information about the particular Property inspector you’re using Customizing Your Workspace with Dockable Panels Dreamweaver is known for... 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 Ctrl+F7 (Command+F7) Continued 101 1 02 Part I ✦ Dreamweaver MX 20 04 Basics Table 3-14 (continued) Panel Keyboard Shortcut Description Detailed Information Files F8 Manages the files in your local, remote, and testing sites See Chapter 5 Assets F11 Gives... 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 %> delimiters for bound data Continued 91 92 Part I ✦ Dreamweaver MX 20 04 Basics Table 3-10 (continued) Icon Name Description 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... Panel Group from the dropdown list This action expands the panel to the fullest possible height, but leaves the panel width unchanged 103 104 Part I ✦ Dreamweaver MX 20 04 Basics Collapses/expands bottom panel area Collapses/expands side panel area 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... you can move floating panels by dragging the title bar, panels can be docked only when you are dragging with the gripper 105 106 Part I ✦ Dreamweaver MX 20 04 Basics Cursor over Gripper Expand/collapse arrow Options Docked panel groups Floating panel group Figure 3 -25 : Use the gripper to dock and undock panel groups Tip On the PC, you are not limited to having your panels on one edge of the window You... view and Code view One of the handiest commands hides all the visual aids with a keyboard shortcut, Ctrl+Shift+I (Command+Shift+I) Table 3-17 describes each command under the View menu 111 1 12 Part I ✦ Dreamweaver MX 20 04 Basics Table 3-17: View Menu Commands Command Description Windows Macintosh Code Displays the code for the current page N/A N/A Design Displays a view of the current page that is similar . Chapter 8 <strong></strong> tags. Continued 543504 ch03.qxd 12/ 10/03 10 :23 PM Page 81 82 Part I ✦ Dreamweaver MX 20 04 Basics Table 3-5 (continued) Icon Name Description Detailed Information Emphasis. Detail Page Set, are created in one action with Dreamweaver s Application objects. 543504 ch03.qxd 12/ 10/03 10 :23 PM Page 85 86 Part I ✦ Dreamweaver MX 20 04 Basics Table 3-7: Application Category Icon. See Chapter 20 Count: Total current recordset. Available only in ColdFusion, Records .NET, and PHP. Continued 543504 ch03.qxd 12/ 10/03 10 :23 PM Page 87 88 Part I ✦ Dreamweaver MX 20 04 Basics Table