78 Part I ✦ Dreamweaver MX Basics Additional preferences settings, located in the Accessibility category of the Preferences dialog box, also cause dialog boxes to appear when you insert an object using the Insert bar. These accessibility dialog boxes appear even if the Show Dialog When Inserting Objects option is clear. Layout objects Use the Layout category of the Insert bar to work with tables and layers — objects that enable you to define the layout of your page. Dreamweaver offers you two ways to work with tables — Standard view, where you define the structure of a table using dialog boxes, menu commands, and the Property inspector, and Layout view, where you create tables and cells by drawing them. The Layout objects enable you to switch between Layout and Standard view, and create tables in either view. In Windows, the Layout objects reside in a separate category only in the Dreamweaver MX and HomeSite/Coder Style workspaces. On a Macintosh, the Layout objects reside in a separate category only if the Insert bar is configured horizontally. In the Dreamweaver 4 workspace on Windows or if the Insert bar is configured vertically on Macintosh, the same layout controls are available, but they are not grouped into a separate Layout category. Instead, the controls for switching between Standard and Layout view and for drawing Layout tables and cells are visible on the Insert bar for every category, as shown in Figure 3-16. The buttons for creating a table in Standard view and for drawing layers are available in the Common category of the Insert bar. Figure 3-16: In the Dreamweaver 4 workspace, the layout objects for working with Layout tables are visible in every category of the Insert bar. Draw Layout Table Draw Layout Cell Layout ViewStandard View Note 054931-6 ch03.F 7/18/02 6:56 AM Page 78 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 79 Chapter 3 ✦ Touring Dreamweaver Due to the visual nature of tables and layers, many of the objects in the Layout category can only be used in Design view. Table 3-3 describes the Layout objects. Table 3-3: Layout Category Icon Name Description Detailed Information Insert Table Creates a table at the cursor See Chapter 10 (Available in Dreamweaver MX position in either Code view or and HomeSite/Coder Style Design view. This button is not workspaces for Windows, and available in Layout view. If you when the Insert bar is in its are using the Dreamweaver 4 horizontal configuration on workspace for Windows, or if a Macintosh) you are using a Macintosh with the Insert bar in its vertical configuration, this button can be found in the Common category. Draw Layer Enables you to drag out a layer See Chapter 21 (Available in Dreamweaver MX of a specific size and shape at a and HomeSite/Coder Style specific location. This button is workspaces for Windows, and not available in Layout view. If when the Insert bar is in its you are using the Dreamweaver 4 horizontal configuration on workspace for Windows, or if a Macintosh) you are using a Macintosh with the Insert bar in its vertical configuration, this button can be found in the Common category. Standard view Switches the display of tables See Chapter 10 (For Dreamweaver MX and to Standard view, in which you HomeSite/Coder Style create tables and cells using workspaces in Windows or the menus, Table object, and when the Insert bar is in its Property inspector horizontal configuration on a Macintosh) Standard view Switches the display of tables See Chapter 10 (For Dreamweaver 4 to “Standard view,” where you workspace in Windows or create tables and cells using when the Insert bar is in its the menus, Table object, and vertical configuration on Property inspector. In the a Macintosh) Dreamweaver 4 workspace (Windows) or if the Insert bar is in its vertical configuration (Macintosh), this button is available for every category. Continued Note 054931-6 ch03.F 7/18/02 6:56 AM Page 79 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 80 Part I ✦ Dreamweaver MX Basics Table 3-3: (continued) Icon Name Description Detailed Information Layout view Switches to a view of tables in See Chapter 10 (For Dreamweaver MX and which you can draw tables and HomeSite/Coder Style cells by dragging the mouse workspaces in Windows or when the Insert bar is in its horizontal configuration on a Macintosh) Layout view Switches to a view of tables See Chapter 10 (For Dreamweaver 4 in which you can draw tables workspace in Windows or and cells by dragging the when the Insert bar is in mouse. In the Dreamweaver 4 its vertical configuration workspace (Windows) or if on a Macintosh) the Insert bar is in its vertical configuration (Macintosh), this button is available for every category. Draw Layout Table Enables you to drag the See Chapter 10 mouse to create a new table in a document. This object is only available in Layout view. In the Dreamweaver 4 workspace (Windows) or if the Insert bar is in its vertical configuration (Macintosh), this button is available for every category. Draw Layout Cell Enables you to draw a cell See Chapter 10 within a table by dragging with the mouse. This object is only available in Layout view. In the Dreamweaver 4 workspace (Windows) or if the Insert bar is in its vertical configuration (Macintosh), this button is available for every category. Text objects The text objects represent the most commonly used text formatting HTML tags, such as those needed to emphasize text, change the font face, or create bulleted lists. Table 3-4 describes the objects you’ll find in the Text category of the Insert bar. The Text objects behave differently, depending on whether you are working in Design view 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, then the tag pair is inserted at the current text insertion point. 054931-6 ch03.F 7/18/02 6:56 AM Page 80 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 81 Chapter 3 ✦ Touring Dreamweaver In Design view, selected text is also surrounded by the appropriate tag pair. But in some situa- tions, 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. ✦ 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 be a separate item in that list by inserting the appropriate <li></li> tags. The same is true for Ordered lists and Definition lists. In Design view, if no text is selected when you click a button in the Insert bar, no tags are added until you start typing. This feature helps prevent the inclusion of empty tag pairs within your document. Table 3-4: Text Category Icon Name Description Detailed Information Font Tag Editor Opens the Tag Editor dialog box for the See Chapter 7 <font> tag, where you can specify font choices, such as font face, size, and color Bold Formats text as bold using either <b></b> See Chapter 7 or <strong></strong> tags. The tag used depends on a setting in the General category of the Preferences dialog box. Italic Formats text as italic using <i></i> See Chapter 7 or <em></em> tags. The tag used depends on a setting in the General category of the Preferences dialog box. Strong Formats text with strong emphasis, using See Chapter 7 <strong></strong> tags Emphasis Adds emphasis to text using the See Chapter 7 <em></em> tag pair Paragraph Creates a new paragraph by inserting the See Chapter 7 tags <p></p> Block Quote Typically used to format long quotations, See Chapter 7 this inserts the tags <blockquote> </blockquote> Continued 054931-6 ch03.F 7/18/02 6:56 AM Page 81 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 82 Part I ✦ Dreamweaver MX Basics Table 3-4: (continued) Icon Name Description Detailed Information Preformatted Text Inserts <pre></pre> tags, to indicate See Chapter 7 that the text should be displayed “as is,” preserving spacing Heading 1 Formats text as a level 1 heading using See Chapter 7 the <h1></h1> tag pair Heading 2 Formats text as a level 2 heading using See Chapter 7 the <h2></h2> tag pair Heading 3 Formats text as a level 3 heading using See Chapter 7 the <h3></h3> tag pair Unordered List Adds the code <ul></ul>, used to See Chapter 12 create a bulleted list Ordered List Inserts <ol></ol> tags to create a See Chapter 12 numbered list List Item Inserts the tags <li></li>, used to See Chapter 12 denote an item within an ordered or unordered list Definition List Adds the HTML code <dl></dl>, which See Chapter 12 is used to surround a definition list Definition Term Inserts the <dt></dt> tags, which See Chapter 12 denote a term within a definition list Definition Description Inserts a <dd></dd> pair, which See Chapter 12 marks the definition portion of a definition list entry Abbreviation Opens a dialog box in which you can See Chapter 7 enter the full text for the abbreviation, before inserting the <abbr></abbr> tags Acronym Inserts <acronym></acronym> tags See Chapter 7 after opening a dialog box in which you can enter the expanded text of the acronym 054931-6 ch03.F 7/18/02 6:56 AM Page 82 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 83 Chapter 3 ✦ Touring Dreamweaver Table objects Primarily for use in Code view, the Tables category on the Insert bar provides quick access to the HTML tags used in defining tables. In Design view, only the Insert Table button is active in the Tables category of the Insert bar. The remaining objects are only available in Code view. In Design view, you can use instead the Layout objects on the Insert bar, the Property inspec- tor, and the menus to work with tables. The objects in the Tables category are described in Table 3-5. Table 3-5: Tables Category Icon Name Description Detailed Information Insert Table Creates a table at the cursor position See Chapter 10 Table Tag Inserts just the <table></table> See Chapter 10 tags at the text insertion point or surrounding any selected text. Only available in Code view. Table Row Inserts <tr></tr> tags at the text See Chapter 10 insertion point or surrounding selected text. The <tr> tag denotes a row within a table. Only available in Code view. Table Header Adds tags for a table header cell, See Chapter 10 <th></th>, at the text insertion point or around the selected text. Only available in Code view. Table Data Inserts <td></td> tags, which demark See Chapter 10 a cell within a table. The tags are added at the text insertion point or surrounding any selected text. Only available in Code view. Table Caption Inserts <caption></caption> tags at See Chapter 10 the text insertion point or around any selected text. Only available in Code view. Frames objects In HTML terms, a frame is a collection of separate pages arranged on a single screen. Frames are contained within framesets. Because it involves multiple pages, creating a frameset can prove difficult for the novice designer. However, the process for making standard framesets is greatly simplified when using the Frames category objects. The most commonly used designs are now immediately available. Select any frame object, and the frameset is made, incorporat- ing the existing page. 054931-6 ch03.F 7/18/02 6:56 AM Page 83 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 84 Part I ✦ Dreamweaver MX Basics The blue, shaded area in the frame object icons indicates the frame in which the current page is placed when the frameset is created. For example, if you create a single page with the text “Table of Contents” and then choose the Top Frame object, “Table of Contents” is moved below the newly inserted top frame. All of the Frames category objects are described in Table 3-6. Table 3-6: Frames Category Icon Name Description Detailed Information Left Frame Inserts a blank frame to the left of the See Chapter 14 current page Right Frame Inserts a blank frame to the right of See Chapter 14 the current page Top Frame Inserts a blank frame above the See Chapter 14 current page Bottom Frame Inserts a blank frame below the See Chapter 14 current page Bottom and Nested Makes a frameset with three frames; See Chapter 14 Left Frame the bottom frame spans the width of the other frames. The current page is placed in the upper-right frame. Bottom and Nested Makes a frameset with three frames, See Chapter 14 Right Frame with the bottom frame spanning the other frames. The current page appears in the upper-left frame. Left and Nested Opens a frameset with three frames. See Chapter 14 Bottom Frame The left frame spans the other frames and Dreamweaver places the current page in the upper-right frame. Right and Nested Makes a frameset with three frames, See Chapter 14 Bottom Frame with the right frame spanning the other frames. The current page is placed in the upper-left frame. Top and Bottom Inserts a three-frame frameset, with all See Chapter 14 Frames frames spanning the width of the entire window. The current page goes in the center frame. Left and Nested Creates a frameset with three frames, See Chapter 14 Top Frames with the left frame spanning the height of the other frames. Dreamweaver puts the current page in the lower-right frame. 054931-6 ch03.F 7/18/02 6:56 AM Page 84 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 85 Chapter 3 ✦ Touring Dreamweaver Icon Name Description Detailed Information Right and Nested Inserts a frameset with three frames, See Chapter 14 Top Frames with the right frame spanning the height of the other frames. The current page is placed in the lower-left frame. Top and Nested Creates a frameset with three frames, See Chapter 14 Left Frames with the upper frame spanning the width of the other frames. The current page is put in the lower-right frame. Top and Nested Inserts a frameset with three frames, See Chapter 14 Right Frames with the top frame spanning the other frames. Dreamweaver inserts the current page in the lower-left frame. Frameset Inserts the tags <frameset> See Chapter 14 </frameset> at the text insertion point or surrounding any selected text. Only available in Code view. Frame Inserts the <frame> tag at the See Chapter 14 current text insertion point or around any selected text. Only available in Code view. Floating Frame Inserts <iframe></iframe> tags See Chapter 14 to create a floating frame in the document. The tags are inserted at the current text insertion point or around the current selection. This object is available only in Code view. No Frames Inserts the tags <noframes> See Chapter 14 </noframes>, which surround alternative content viewed in browsers that don’t support frames. Only available in Code view. Forms objects The form is the primary method for implementing HTML interactivity. The Forms category of the Insert bar gives you the basic building blocks for creating your Web-based form. Table 3-7 describes each of the elements found in the Forms category. 054931-6 ch03.F 7/18/02 6:56 AM Page 85 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 86 Part I ✦ Dreamweaver MX Basics Table 3-7: Forms Category Icon Name Description Detailed Information Form Creates the overall HTML form structure See Chapter 11 at the cursor position. In Code view only, Dreamweaver wraps the <form></form> tags around any selected text. Text Field Places a text box or a text area at the See Chapter 11 cursor position Hidden Field Inserts an invisible field used for passing See Chapter 11 variables to a CGI or JavaScript program Textarea Inserts a multiline text box See Chapter 11 Checkbox Inserts a checkbox for selecting any See Chapter 11 number of options at the cursor position Radio Button Inserts a radio button for making a single See Chapter 11 selection from a set of options at the cursor position Radio Group Opens a dialog box in which you can See Chapter 11 define a group of related radio buttons List/Menu Enables either a drop-down menu or a See Chapter 11 scrolling list at the cursor position Jump Menu Opens a dialog box for building a See Chapter 11 pop-up menu that activates a link Image Field Includes an image that can be used See Chapter 11 as a button File Field Inserts a text box and Browse button See Chapter 11 for selecting a file to submit Button Inserts a Submit, Reset, or user-definable See Chapter 11 button at the cursor position Label Inserts a <label></label> tag pair in See Chapter 11 Code view. If you are in Design view, selecting this button automatically switches the Document window to Code and Design view before inserting the tags. Fieldset Groups selected controls by inserting See Chapter 11 the tags <fieldset></fieldset>, with an optional legend 054931-6 ch03.F 7/18/02 6:56 AM Page 86 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 87 Chapter 3 ✦ Touring Dreamweaver Template objects Templates are special Dreamweaver documents that define the layout and visual design of a page. Once you’ve set up a template, you can create new pages based on that template, or apply the template to existing pages in your site. Pages based on a template inherit that template’s design and layout. The objects in the Templates category of the Insert bar are described in Table 3-8. Table 3-8: Templates Category Icon Name Description Detailed Information Make Template Saves the current document as See Chapter 28 a template Make Nested Makes a template based on another See Chapter 28 Template template Editable Region Defines an area that can be modified See Chapter 28 in a document that is based on the template Optional Region Delimits part of the template that may See Chapter 28 not appear within some of the documents that are based on the template Repeating Region Defines structured content that may See Chapter 28 appear more than once within a document that is based on the template Editable Optional Creates an area of optional content that See Chapter 28 Region may be modified in documents based on this template Repeating Table Inserts a table with repeating editable See Chapter 28 rows into the template Character objects Certain special characters — such as the copyright symbol (©) — are represented in HTML by codes called character entities. In code, a character entity is either a name (such as &copy; for the copyright symbol) or a number (&#169;). Each character entity has its own unique code. Dreamweaver eases the entry of these complex, hard-to-remember codes with the Characters category. 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. Table 3-9 details the Characters category objects. The Characters category also contains objects for inserting a line break and a non-breaking space. 054931-6 ch03.F 7/18/02 6:56 AM Page 87 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... ✦ Dreamweaver MX Basics other If you’re using the Dreamweaver MX or HomeSite/Coder Style workspaces, the panel groups can also be docked within the Dreamweaver window Expanded panel group Panels Collapsed panel groups Figure 3 -21 : Dreamweaver s many tools reside in panels, which can float anywhere on the screen, or, in the Dreamweaver MX workspace, can be docked within the Document window Table 3 -21 ... any location on the screen, as shown in Figure 3 -23 111 054931-6 ch03.F 7/18/ 02 6:56 AM Page 1 12 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 1 12 Part I ✦ Dreamweaver MX Basics Floating panel group Gripper Expand/Collapse arrow Option menu Docked panel groups Figure 3 -23 : Use the gripper to dock and undock panel groups In the Dreamweaver 4 workspace, you can dock panel groups... Comment Inserts the code for a PHP comment If Inserts the tag used to conditionally execute code Continued 101 054931-6 ch03.F 7/18/ 02 6:56 AM Page 1 02 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 1 02 Part I ✦ Dreamweaver MX Basics Table 3 -20 : (continued) Icon Name Description Else Inserts the tag used to indicate the actions taken when the conditions specified in the corresponding... Chapter 25 Applet Includes a Java applet at the cursor position See Chapter 6 param Inserts a tag in Code view, used to specify settings within and tags See Chapter 6 ActiveX Inserts a placeholder for an ActiveX control at the cursor position, using the tag See Chapters 25 and 27 Plugin Use for including a file that requires a plugin See Chapters 25 , 26 , and 27 Head... Detail Page Set, are created in one action with Dreamweaver s Application objects 91 054931-6 ch03.F 7/18/ 02 6:56 AM Page 92 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 92 Part I ✦ Dreamweaver MX Basics 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... component See Chapter 16 Continued 107 054931-6 ch03.F 7/18/ 02 6:56 AM Page 108 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 108 Part I ✦ Dreamweaver MX Basics Table 3 -21 : (continued) Panel Keyboard Shortcut Description Detailed Information Site F8 Manages the files in your local, remote, and testing sites (In the Dreamweaver 4 workspace, the Site panel behaves as a separate... Shockwave objects, movies, scripts, templates, and library items See the following: Images: Chapter 8 Colors: Chapter 7 URLs: Chapter 9 Flash: Chapter 25 Shockwave: Chapter 25 Movies: Chapter 26 Scripts: Chapter 6 Templates: Chapter 28 Library: Chapter 29 Search Ctrl+Shift+F (Command+Shift+F) Shows the results of a Find All request See Chapter 7 Validation Ctrl+Shift+F7 (Command+Shift+F7) When you validate... Pressing F4 again restores all the hidden tools In the Dreamweaver MX and HomeSite/Coder Style workspaces, the panel groups may be docked along the edges of the Dreamweaver window In this situation, you can collapse all of the panel groups to maximize your work area by clicking the button that appears along the border of the panel area, as shown in Figure 3 -22 This collapses only the panel groups docked on... panels, or even panels docked along a different edge of the window, intact 109 054931-6 ch03.F 7/18/ 02 6:56 AM Page 110 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 110 Part I ✦ Dreamweaver MX Basics Click to collapse bottom panel area Click to collapse right panel area Figure 3 -22 : You can collapse all the panel groups along one edge of the screen with the click of a single... not use these options may frequently, Macromedia standardized the color picker across its product line to make it easier to switch between applications 054931-6 ch03.F 7/18/ 02 6:56 AM Page 105 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 3 ✦ Touring Dreamweaver System color picker Default color Color box Eyedropper Figure 3 -20 : Dreamweaver s color picker enables you . 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. ActiveX See Chapters 25 control at the cursor position, using the and 27 <object> tag Plugin Use for including a file that requires See Chapters 25 , 26 , a plugin and 27 Head objects General. <blockquote> </blockquote> Continued 054931-6 ch03.F 7/18/ 02 6:56 AM Page 81 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 82 Part I ✦ Dreamweaver MX Basics Table 3-4: (continued) Icon