Adobe Dreamweaver CS3 Unleashed- P8

Adobe Dreamweaver CS3 Unleashed- P8: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars forstreamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver providesnumerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why somany windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowingdevelopers complete control when building websites and applications....
Nội dung trích xuất từ tài liệu:
Adobe Dreamweaver CS3 Unleashed- P8 Tip If youre 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 bars 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 tables width spans the 697 pixel width and 227 pixel height, consuming the first rectangular area outlined by the guides. Although Dreamweaver doesnt allow you to set an ID for a table in Layout mode, well assume this is the Header table. Later, well 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 youve 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 tables 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 doesnt 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 isnt 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 modeare effortless and much more straightforward than they are in Standard mode. For instance, to change thewidth or height, we would simply click, hold, and drag from the tables selection handles until weve reachedthe desired width or height. Although this is certainly simple enough, its even much more precise when youuse the features outlined within the Property inspector. As you can see from Figure 5.42, these propertiesare 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, well autostretch this table soon. Background Color— Sets the background color of the table. Cell Padding and Cell Spacing— Sets the tables cell padding or cell spacing based on a pixel value entered within these text boxes. To make our table co ...