Adobe Dreamweaver CS3 Unleashed- P8 pptx

Tip If you're having trouble setting the guides at the exact positions, you can double-click the guide. Doing this opens the Move Guide dialog, which allows you to precisely position the guide based on a pixel value you set. 3. With the guides now set, place your cursor on the page and then select the Layout Table icon within the Insert bar's Layout category. Your cursor will change to a crosshair. 4. Using the new tool, draw a square by clicking, holding, and dragging from the top left-most edge, moving down and right until the table's width spans the 697 pixel width and 227 pixel height, consuming the first rectangular area outlined by the guides. Although Dreamweaver doesn't allow you to set an ID for a table in Layout mode, we'll assume this is the Header table. Later, we'll explore the Autostretch option to make this table span 100% of the browser region. The result will resemble Figure 5.39. Figure 5.39. Draw a new table on the page that spans 697 pixels wide and 227 pixels high. [View full size image] Note To make it easier to draw tables, hit Ctrl+Shift+I ( +Shift+I) to hide all visual aids that seem to get in the way and prevent you from drawing a new table under the existing one. After you've finished drawing all your tables, you can select Ctrl+Shift+I ( +Shift+I) again to redisplay all the visual aids. 5. Draw another table below the Header table. To do this, select the Draw Layout Table icon again, then click, hold, and drag from the top left-most edge (below the existing Header table), moving down and right until the table's width snaps to the guide set at 697 pixels and snaps to the guide at 383 pixels. The result will resemble Figure 5.40. Figure 5.40. Draw a new table on the page that spans 697 pixels wide and reaches the 383 pixel guide. [View full size image] 6. With your table now in place, switch to Standard mode to see the table transformation. You can temporarily hide the guides by choosing View, Guides, Show Guides. As you can see from Figure 5.41, the table looks exactly as it would had you added it using the Table dialog. The difference, in this case, is that the drawing tools are a bit friendlier to use—and much more flexible to manipulate—than tables would be in Standard mode. Figure 5.41. Even though it doesn't look like much of a table in Layout mode, the transformation is exact within Standard mode. [View full size image] 7. Switch back to Layout mode to continue the editing process for the new table. Note If you draw a layout table in the middle of an empty document, Dreamweaver will create it as a table nested inside a larger table. If this isn't what you intended to happen, undo, and try redrawing. With the new table drawn and firmly in place, manipulating properties like width and height in Layout mode are effortless and much more straightforward than they are in Standard mode. For instance, to change the width or height, we would simply click, hold, and drag from the table's selection handles until we've reached the desired width or height. Although this is certainly simple enough, it's even much more precise when you use the features outlined within the Property inspector. As you can see from Figure 5.42, these properties are slightly different from those provided when the table is in Standard mode. Figure 5.42. The Property inspector supports basic table formatting options while in Layout mode. [View full size image] The following list outlines the properties shown in callouts within Figure 5.42 in more detail: Fixed Width and Height— Sets a width and height in pixels for your table. The table is considered a fixed width and remains the specific width and height even if the user expands the page within the browser. Autostretch— Autostretch is the term given to tables in Layout mode that are set to percentage values. Our Header table (the layout table we created first), for instance, could be considered an autostretch table because it will stretch the width of the browser window regardless of browser width. Again, we'll autostretch this table soon. Background Color— Sets the background color of the table. Cell Padding and Cell Spacing— Sets the table's cell padding or cell spacing based on a pixel value entered within these text boxes. To make our table consistent with the Content table we inserted within the index.html page, select the second layout table and enter values of 3 for cell padding and 5 for cell spacing. Clear Row Heights— Enables you to quickly remove the height of the table. This option is also available from the Table Widths Visual Aid's submenu. Make All Widths Consistent— If you have fixed-width cells in your layout, choosing this option makes the cell widths match their apparent width on the screen. When you enable the Make All Widths Consistent option, Dreamweaver resets the width specified in the HTML for each cell in the table to match the width of the content within that cell. Remove All Spacer Images— Choosing this option removes spacer images from your layout table. Used specifically with autostreched tables, spacer images are transparent images that are used to control the spacing in your layout. Remove Nesting— Removes a nested table without losing its contents. When the nested table is removed, the layout cells (mentioned in the next section) become part of the outer table. Class— You can apply CSS styles to your tables by selecting from a created class within this menu. CSS is covered in more detail in the next chapter. Now that you have an idea as to how tables are inserted into the page, let's move on to adding cells. Drawing Cells After you've drawn your table on the page, you're ready to begin structuring the overall layout of the table by drawing cells. To draw cells within your table, follow these steps: 1. Select a table to draw a layout cell into. Now select the Draw Layout Cell icon from the Insert bar. Your cursor will immediately change to the crosshair when you mouse over the layout table. 2. Draw a cell within the first Header table that spans 697 pixels wide by 227 pixels high. Again, the layout cell will snap to the guides. The result will appear similar to Figure 5.43. Figure 5.43. Draw a layout cell that covers the header table. [View full size image] 3. Draw a cell within the Content table that spans from the top left all the way over to the far right and down to the first guide set at 254 pixels. This cell will hold the subheader_welcome.gif image. 4. Draw another cell that spans a square of about 100 pixels wide and reaches the bottom of the Content table. This cell will eventually hold the employee's headshot image. 5. Draw a third cell to consume the final area of our Content table. This cell will hold the bio text for the employee. When you've finished, the result of drawing three new cells within the Content table will resemble Figure 5.44. Figure 5.44. Draw three new cells within the drawn Content table. [View full size image] You'll begin to notice a few interesting aspects when drawing cells. First, the cells attempt to snap themselves to the border of the layout table when you're within eight pixels of the border. Second, the cell can't be resized past the boundary of its containing table. Also, you'll notice that a cell is highlighted in white whereas areas not defined as cells are highlighted gray. (You may or may not see the gray areas. It ultimately depends on how you drew the cells within the table.) This gray area is part of the layout table and cannot have content added to it within Layout mode. In general, keep these points in mind when drawing cells within a Layout Table: Cells and nested tables will automatically snap to existing cells when within eight pixels of an existing cell or guide. A layout table cannot be resized so that it would be smaller than the cells it contains. A layout cell cannot be resized beyond the borders of its containing table. No overlapping is allowed. A layout cell is always at least as large as the content it contains. After the cells have been added to the Layout Table, you can select them to modify their properties within the Property inspector. To select a cell within a layout table, hold down the Ctrl ( ) key and select the cell you want to make modifications to. You'll notice that after you select the cell, the cell highlights from the blue border (represents the drawn cell) to the red border (represents the selected cell). With the cell selected, the Property inspector will change to accommodate property modifications, also shown within callouts in Figure 5.45. Figure 5.45. The Layout Cell Property inspector supports various property modifications while in Layout mode. [View full size image] A complete list of the properties supported by the Layout Cell Property inspector in Layout mode is given next: Fixed Width and Height— Sets a width and height in pixels for your cell. The cell is considered a fixed width and remains the specific width and height even if the user expands the page within the browser. Autostretch— Assign a value within this text box to have the cell span a width of 100% within its layout table. Background Color— Sets the background color of the cell. Horizontal and Vertical Alignment— Sets the horizontal alignment (Left, Center, Right) and the vertical alignment (Top, Middle, Bottom, Baseline) of the content within the cell. Layout cells always default to a vertical alignment of Top. No wrap— Check this box to prevent text within a cell from wrapping to the next line. Class— You can apply CSS styles to your cells by selecting from a created class within this menu. CSS is covered with more detail in the next chapter. With your cells now created, you're ready to begin adding content. Adding Content to Layout Cells Adding content to layout cells is just as easy as it would be if the table were in Standard mode. To add content such as images, select the image from the Site Files panel and drag it into the cell. For instance, I'll drag the header_withnav.gif image into the Header cell. Next, I'll drag the subheader_welcome.gif image into the first cell of the Content table. Finally, I'll drag the head_adatheadminassistant.gif into the second cell. When finished, your design should resemble Figure 5.46. Figure 5.46. You can add images to your layout cells by dragging them over from the Files panel. [View full size image] Adding text is just as easy. For instance, you can open the companydirectory.txt file located within the Assets folder, copy Ada's bio, and then paste it into the cell next to her picture. You can format the content after it's in the cell as well. When you're finished, your design should resemble mine, pictured in Figure 5.47. Figure 5.47. Adding text into a layout cell is a matter of copying and pasting. [View full size image] Of course, Ada isn't the only employee within our directory. The problem becomes adding more rows to our layout table. In Standard mode, we had numerous options for adding a new row within our table. For instance, we could place our cursor into the last cell and press Tab to create a new row; we could access the Insert Row option from the Table submenu in both the context and Modify menus; and we could also use the Insert Rows or Columns dialog available from both the context and Modify menus. The Layout mode, however, doesn't support these options. Instead, we must use the Insert Row Above or Insert Row Below buttons located within the Layout category of the Insert bar. Clicking one of these effectively creates a new row within our layout table. To use this feature, place your cursor in the last cell and click the Insert Row Below button. A new row with the same dimensions as the previous row will be added directly underneath (see Figure 5.48). Figure 5.48. Use the Insert Row Below button within the Layout category of the Insert bar to create a new row within a layout table. [View full size image] [...]... image As you can see from Figure 5.49, the Choose Spacer Image dialog contains the following options: Create a spacer image file— Choose this option to have Dreamweaver automatically create the 1 pixel by 1 pixel transparent GIF image for you Dreamweaver places this image within the Default Images folder or if one is not defined, within the root of your project Use an existing spacer image file— Choose... You can set Dreamweaver to automatically add spacer images when working with autostretch tables by opening the Layout Mode category within the Preferences window Remember from Chapter 4, "Defining Preferences," the Layout Mode category contains options for setting color preferences in Layout mode as well as various spacer image preferences, including an option button that enables you to tell Dreamweaver. .. on the solution name Tracing Images Many times, our design prototypes become so complex that it becomes difficult to figure out exactly how to structure the page with tables using Dreamweaver To aid you with this obstacle, Dreamweaver allows you to include a tracing image Tracing images allow you to build your page prototype within your favorite image-editing program, save the prototype as a GIF or... solution offerings to a table within the main page, will be discussed in Part V, "Dynamic Web Page Development." For now, let's discuss a simple alternative, the Import Tabular Data feature, available within Dreamweaver' s Insert menu The Import Tabular Data option, available by choosing Insert, Table Objects, Import Tabular Data, enables you to quickly build an HTML table based on preformatted tab-, comma-,... solutions_delimited.txt Opening the file reveals that the text within the file is, in fact, separated by tabs similar to Figure 5.51 Figure 5.51 A tab-delimited file contains text separated by tabs [View full size image] Dreamweaver, recognizing that the file is separated by tabs, will pick apart all text elements within this file and place them into their own cells within a new table To see this feature for yourself,... Even worse, imagine that all your rows were unsorted within the table Trying to manually sort a table that contained hundreds of rows could take hours Instead, you can use the Sort Table command to have Dreamweaver automatically sort the table based on a column that you choose To use this feature, select the newly created solutions table and choose the Sort Table command available from the Commands menu... layout cell, you can also use the Insert Column to the Left and Insert Column to the Right buttons to create new columns within your layout table Working with Autostretch Tables As I mentioned earlier, Dreamweaver refers to tables and cells that span a width of 100% as Autostretch tables in Layout mode Although tables and cells are assigned fixed widths when they're drawn on the page, you can always... the tracing image, you can revisit the Tracing Image category within the Page Properties dialog and remove it Summary As you have seen, tables provide flexibility when working with your page designs in Dreamweaver In Chapter 2, we used simple page-formatting techniques such as line breaks, paragraph and heading formatting, paragraph breaks, lists, and so on to create designs that were limited in the... creating rich layouts and clean page designs Chapter 6 Page Formatting Using Cascading Style Sheets IN THIS CHAPTER An Introduction to CSS CSS Versus HTML Browser Support for CSS Designing CSS Using Dreamweaver and the CSS Styles Panel Designing CSS Styles by Redefining HTML Tags Working with Pseudoclasses Designing CSS Styles by Using IDs Attaching a Style Sheet Tips and Tricks for Using CSS As you... may refer to the terms CSS, Cascading Style Sheets, Style Sheets, and Styles Don't be confused by the different terms; they are all synonymous In detail, there are four ways of defining style rules in Dreamweaver: Classes— Arguably the most popular way of defining styles within a style sheet, classes allow you to set up a custom style and use the class name as an attribute value later in the tag For . options: Create a spacer image file— Choose this option to have Dreamweaver automatically create the 1 pixel by 1 pixel transparent GIF image for you. Dreamweaver places this image within the Default Images. difficult to figure out exactly how to structure the page with tables using Dreamweaver. To aid you with this obstacle, Dreamweaver allows you to include a tracing image. Tracing images allow you. match their apparent width on the screen. When you enable the Make All Widths Consistent option, Dreamweaver resets the width specified in the HTML for each cell in the table to match the width