wiley adobe dreamweaver cs5 bible phần 5 potx

503 Chapter 11: Using Behaviors 2. Select the object in the Document window or the tag in the Tag Selector to which your behavior is attached. 3. Double-click the action that you want to alter. The appropriate dialog box opens, with the previously selected parameters. 4. Make any modifications to the existing settings for the action. 5. Click OK when you are finished. Sequencing behaviors When you have more than one action attached to a particular event, the order of the actions is often important. For example, you should generally implement the Go to Timeline Frame action ahead of the Play Timeline action to make sure the timeline is playing from the correct frame. To specify the sequence in which Dreamweaver triggers the actions, reposition them as necessary in the Actions column. To do this, simply select an action and use the up and down arrow buttons (refer to Figure 11-1) to reposition it in the list. Deleting behaviors To remove a behavior from a list of behaviors attached to a particular event, simply highlight the behavior and click the Remove (–) button. Modifying Behaviors To further reveal the power of Dreamweaver’s standard behaviors, add another series of behaviors to your practice page. In the process, you’ll get a chance to adjust attributes of an applied behavior. 1. From the Files panel, re-open the behaviors_start.htm file you previously worked upon. 2. Place your cursor anywhere in the Living Room link. 3. From the Behaviors panel, click Add (+) and select Open Browser Window. 4. In the Open Browser Window dialog, set the following parameters: Click the Browse button and choose L living_room.htm from the dialog box. In the Window Width field, enter L 200. In the Window Height field, enter L 100. Select the Resize Handles option. L continued 504 Part III: Adding Advanced Design Features 5. Click OK when you’re done. A second behavior is added to the link in the Behaviors panel, with the default event of onClick. 6. Save your file and press F12 (Option+F12) to preview the page in your primary browser. 7. Click the Living Room link to test the behavior. 8. You’ll notice that the window height is too small for the text; you can easily make the adjustment. In Dreamweaver’s Behaviors panel, double-click the Open Browser Window event to re-open the dialog box. 9. Change the Window Height value to 150; click OK when you’re done. 10. To verify that the change is sufficient, test the page in the browser as before. 11. In Dreamweaver, repeat Steps 2–5 for the Kitchen North link and set the Browser Window behavior to open kitchen.htm with a width of 200 pixels and height of 150 pixels. 12. Repeat Steps 2–5 for the Kitchen South link and again set the Browser Window behavior to open kitchen.htm with a width of 200 pixels and height of 150 pixels. 13. Save your page. Test your page in the browser to verify that all the windows open as expected. continued 505 Chapter 11: Using Behaviors Summary Dreamweaver behaviors can greatly extend the Web designer’s palette of possibilities — even if the Web designer is an accomplished JavaScript programmer. Behaviors simplify and automate the process of incorporating common and not-so-common JavaScript functions. The versatility of the behavior format enables anyone proficient in JavaScript to create custom actions that can be attached to any event. When considering behaviors, keep the following points in mind: Behaviors are combinations of events and actions. L Behaviors are written in HTML and JavaScript and are completely customizable from L within Dreamweaver. Different browsers support different events. Dreamweaver enables you to select a spe- L cific browser or a specification, such as HTML 4.01, on which to base your event choice. Dreamweaver includes 25 standard actions. Some actions are not available unless a par- L ticular object is included, and selected, on the current page. In the next chapter, you learn how to work with tables and structured data. 507 Setting Up Tables IN THIS CHAPTER Learning about tables in HTML Setting up a table in Dreamweaver Dreamweaver Technique: Adding a Table to the Page Customizing tables Sorting table contents Dreamweaver Technique: Inserting Table Content Dreamweaver Technique: Adjusting Table Properties Importing tabular data T ables bring structure to a Web page, and they are especially impor- tant when displaying data for Web applications. Whether it is used to align numbers in a spreadsheet or arrange columns of infor- mation on a page, an HTML table brings a bit of order to otherwise free- flowing content. Tables are the preferred method for presenting structured information. Dreamweaver’s implementation of tables reflects this trend in Web page design. Drag-and-drop table sizing, easy organization of rows and columns, and instant table reformatting all help get the job done in the shortest time possible. Table editing features enable you to select and modify any- thing in a table — from a single cell to multiple columns. Moreover, using Dreamweaver’s commands, you can sort static table data in a variety of ways or completely reformat it. Cross-Reference This chapter covers everything you need to know to get started creating HTML tables in Dreamweaver. You can also dynamically add data to tables from an external data source using server-side processing. Using dynamic data is covered in Chapter 19. n 508 Part III: Adding Advanced Design Features  If you’re familiar with HTML tables and just want to know how to add a table in Dreamweaver, follow these steps: 1. Place your cursor on the page where you’d like the table to appear. 2. From the Common category of the Insert panel, click Table. 3. When the Table dialog box appears, enter the number of rows and columns you want to start within the appropriate fields. 4. Set the width of the table in pixels or percentage. 5. Specify any of the other parameters you want, such as border width, cell padding, cell spacing, header placement, and caption. 6. Click OK. Add content to the table by clicking into any cell and typing or inserting images or other media. As you’ll learn in the rest of this chapter, there’s a lot you can do with tables, but this should get you started. HTML Table Fundamentals A table is basically a grid that expands as you add text or images. Tables consist of three main components: rows, columns, and cells. Rows extend across a table from left to right, and columns run up and down. A cell is the area within the intersection of a row and a column; it’s where you enter your information. Cells expand to fit whatever they hold. If you have enabled the table bor- der, your browser shows the outline of the entire table and each cell. In HTML, the structure and all the data of a table are contained between the table tag pair, <table> and </table>. The <table> tag can take numerous attributes, determining a table’s 509 Chapter 12: Setting Up Tables width (which can be given in absolute pixel measurement or as a percentage of the screen) as well as the border, alignment on the page, and background color. You can also control the size of the spacing between cells and the amount of padding within cells. Note You can insert a <table> . . . </table> pair directly in your code by choosing Insert ➪ Table Objects ➪ Table or by clicking the Table Tag button in the Tables category of the Insert panel. You must do this in Code view, where you can see the exact location of your cursor before inserting the tag pair. n HTML uses a strict hierarchy when describing a table. You can see this clearly in Listing 12-1, which shows the HTML generated from a simple table in Dreamweaver. Listing12-1 Code for an HTML Table <table border=”1” width=”75%”> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> Note The &nbsp; in the table code is HTML for a non-breaking space. Dreamweaver inserts this code in each empty table cell because some browsers collapse the cell without it. Enter any text or image in the cell, and Dreamweaver automatically removes the &nbsp; code. n Rows After the opening <table> tag comes the first row tag <tr> . . . </tr> pair. Within the current row, you can specify attributes for horizontal alignment or vertical alignment. In addition, brows- ers recognize row color as an added option. 510 Part III: Adding Advanced Design Features If you are working directly in Code view, you can insert a <tr> . . . </tr> pair by choosing Insert ➪ Table Objects ➪ TR or by clicking the Table Row button in the Tables category of the Insert panel. See “Inserting rows and columns” later in this chapter for methods of inserting rows in Design view. Cells Cells are marked in HTML with the <td> . . . </td> tag pair. No specific code exists for a col- umn; rather, the number of columns is determined by the maximum number of cells within a single table row. For example, in Listing 12-1, notice the three sets of <td> tags between each <tr> pair. This means the table has three columns. Note Most <tr> attributes are better set up using CSS; attributes such as bgcolor were deprecated under HTML 4.0 and XHTML 1.0 specifications and have been removed from XHTML 1.1 entirely. n A cell can span more than one row or column — in these cases, you see a rowspan=value or colspan=value attribute in the <td> tag, as illustrated in Listing 12-2. This code is also for a table with three rows and three columns, but the second cell in the first row spans two columns. Listing12-2 HTML Table with Column Spanning <table width=”75%” border=”0”> <tr> <td>&nbsp;</td> <td colspan=”2”>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> Cells can also be given horizontal or vertical alignment attributes, which override any similar attributes specified by the table row. When you give a cell a particular width, all the cells in that column are affected. Width can be specified either in an absolute pixel measurement or as a per- centage of the overall table. 511 Chapter 12: Setting Up Tables Note Again, modern Web designers prefer to use CSS rather than HTML attributes to format and style table cells. Both the align and bgcolor attributes have been deprecated and recent browsers don’t support other attri- butes such as height. n In Code view, you can insert a <td> . . . </td> pair to define a single table cell by choosing Insert ➪ Table Objects ➪ TD or by clicking the Table Data button in the Tables category of the Insert panel. Column and row headings HTML uses a special type of cell called a table header for column and row headings. Information in these cells is marked with a <th> tag and is generally rendered in boldface, centered within the cell. To insert a <th> . . . </th> pair for a table heading cell, choose Insert ➪ Table Objects ➪ TH or click the Table Heading button in the Tables category of the Insert panel. See the section “Setting cell, column, and row properties” later in this chapter for another way to designate table header cells. Tip After the initial <table> tag, you can place an optional caption for the table. In Dreamweaver, you can enter the <caption> tag in the Code view or Code inspector by choosing Insert ➪ Table Objects ➪ Caption. From Code view, you can also click the Table Caption button in the Tables category of the Insert panel. The following example shows how the tag works: <caption valign=”bottom”>Table of Periodic Elements</caption> n Inserting Tables in Dreamweaver You can control almost all of a table’s HTML features through Dreamweaver’s point-and-click interface. To insert a table in the current cursor position, use one of the following methods: Choose Insert L ➪ Table. Click the Table button in either the Common or Layout category of the Insert panel. L Use the keyboard shortcut: Ctrl+Alt+T (Command+Option+T). L Depending on your preference settings, any one of these methods either immediately inserts a table into your page or opens the Table dialog box. The dialog box is bypassed — and the pre- vious settings used — if the Show Dialog When Inserting Objects option in Preferences is not enabled. The Table dialog box, shown in Figure 12-1, contains the values shown in Table 12-1 when it is first displayed. 512 Part III: Adding Advanced Design Features tabLe12-1 Default Values for the Table Dialog Box Attribute Default Description Rows 3 Sets the number of horizontal rows. Columns 3 Sets the number of vertical columns. Width 200 pixels Sets the preset width of the table. This can be specified as a percentage of the containing element (screen, AP element, or another table) or an absolute pixel size. Border 1 pixel Sets the width of the border around each cell and the entire table. Cell Padding 0 Sets the space between a cell’s border and its contents, measured in pixels. A value of 0 indicates no margin space within the cell. Cell Spacing 0 Sets the number of pixels between each cell. A value of 0 indicates no space between cells. Header None Determines whether the top row and/or column is designated as a header cell. In addition to simply creating the header cell with <th> tags instead of the usual <td>, this attribute adds the scope attribute to the cell. The scope attribute helps nonvisual browsers interpret and present the structure of the table, by indicating whether the cell is a column heading or a row heading. In visual browsers, text in header rows or columns is typically displayed as bold and centered. Caption Blank Sets a brief description for the table. Align Caption default Enables you to specify whether the table caption appears at the top, bottom, left, or right of the table. Choosing default does not add an align attribute to the <caption> tag and uses the browser’s default alignment instead. Note that the align attribute on the <caption> tag is deprecated in HTML 4.0. This means that, although the attribute is still currently supported, the preferred method to achieve the same effect in newer browsers is to use CSS. Summary Blank Enables you to add the summary attribute to your <table> tag. The summary is a verbal description of the table layout, so that people who are having the page read to them (for example, through a nonvisual browser) can understand it. For example, your summary could say, “This table compares the number of students and teachers in each Minnesota secondary school for the years 1997 through 2002. It lists each school in Minnesota, grouped by school district. For each of the years 1997 through 2002, there are columns for the number of students and number of teachers in each school.” This is particularly important for complex tables. The text you enter for the summary is not displayed in visual browsers. [...]... the development phase that browser window is Dreamweaver —a Use the Window Size option on the status bar to expand Dreamweaver s Document window to the size you expect your website to be seen at in various browser settings n 52 8 Chapter 12: Setting Up Tables Inserting rows and columns You can change the number of rows and columns in a table at any time Dreamweaver provides a variety of methods for... particular section Dreamweaver has an option for designating these cells: the Header option Table header cells are usually rendered in boldface and centered in each cell Figure 12- 15 shows an example of a table in which both the first row and first column are marked as table header cells Figure 12- 15 Table header cells are a good way to note a category’s labels ​  ​or a row, column, or both —f 53 7 Part III:... panel’s Common category, click the Table object 5 When the Insert Table dialog box opens, set the following parameters: (Return) to create a new line Rows: 4 Columns: 2 Table Width: 50 0 pixels Border Thickness: 0 continued 51 5 Part III: Adding Advanced Design Features continued 6 Leave both the Cell Padding and Cell Spacing fields blank 7 In the Header area, select Left 8 Leave all the fields in the... contents and ignore the attributes Dreamweaver has one basic restriction to table cut-and-paste operations: your selected cells must form a rectangle In other words, although you can select non-adjacent cells, columns, or rows and modify their properties, you can’t cut or copy them Should you try, you get a message from Dreamweaver like the one shown in Figure 12 -5; the table above the notification... in Figure 12 -5; the table above the notification in this figure illustrates an incorrect cell selection Figure 12 -5 Dreamweaver enables you to cut or copy selected cells only when they form a rectangle Copying attributes and contents When you copy or cut a cell using the regular commands, Dreamweaver automatically copies everything ​  ​ ontent, formatting, and cell format ​  ​n the selected cell Then,... table in Dreamweaver goes beyond the expected left, right, and center options You can also make a table into a free-floating object, around which you can wrap text ​  ​ o the left —t or right Figure 12-7 illustrates some of the different results you can get from aligning your table Figure 12-7 Tables can be centered, as well as aligned left or right ​  ​ ith or without text wrapping —w 52 5 Part III:... and drag any border to new dimensions 52 6 Chapter 12: Setting Up Tables As noted earlier, tables are initially sized according to their contents After you move a table border in Dreamweaver, however, the new sizes are written directly into the HTML code, and the column width is adjusted ​  ​ nless the contents cannot fit If, for example, an inserted image is —u 1 15 pixels wide and the cell has a width... resized:                   Notice how the width for both the cells and the entire table are expressed... percentage; it is followed by a second value in parentheses that indicates the current size in pixels For example, if a table is set to 75% and placed in a browser window where the interior screen width is 970 pixels, the actual width of the table is 693 pixels Dreamweaver displays 75% (693), as shown in Figure 12-2 The same figure shows two other tables: one at 100%, which takes up the full width of the browser... you’re done Dreamweaver creates a surrounding tag and centers the table within it Your final task is to remove the widths from the lower table columns so that they tightly fit the data 1 Select the bottom table again, if necessary 2 From the lower portion of the Property inspector, click Clear Column Widths 3 Save your page The table columns collapse to just the widths needed 53 5 Part III: . In Dreamweaver, repeat Steps 2 5 for the Kitchen North link and set the Browser Window behavior to open kitchen.htm with a width of 200 pixels and height of 150 pixels. 12. Repeat Steps 2 5. and height of 150 pixels. 13. Save your page. Test your page in the browser to verify that all the windows open as expected. continued 50 5 Chapter 11: Using Behaviors Summary Dreamweaver behaviors. you get a message from Dreamweaver like the one shown in Figure 12 -5; the table above the notification in this figure illustrates an incorrect cell selection. Figure12 -5 Dreamweaver enables you