Adobe Dreamweaver CS3 Unleashed- P8

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

0
51
lượt xem
9
download

Adobe Dreamweaver CS3 Unleashed- P8

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P8: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:
Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P8

  1. 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
  2. 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]
  3. 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]
  4. 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.
  5. 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.
  6. [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.
  7. 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.
  8. [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]
  9. 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]
  10. Now repeat the same process, adding Agnes's picture and her bio. When you're done with Agnes, add a new row and continue the process until you have all the bios added to the page. When you're finished, you can switch to Standard mode and format the cells to your liking. Tip Aside from just adding new rows above or below the existing 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 convert a fixed width table or cell to Autostretch by selecting the Autostretch option button within the Property inspector when either the layout table or layout cell is selected. A second option is to choose the Make Column Autostretch option from the Column Widths Visual Aid's menu. To demonstrate the use of Autostretch, select the Header layout table. Next, click the Autostretch option button within the Property inspector. The Choose Spacer Image dialog will appear (see Figure 5.49). Figure 5.49. Selecting the Autostretch option button in the Property Inspector opens the Create Spacer Image dialog.
  11. Spacer images are generally 1 pixel by 1 pixel transparent GIF images and can be inserted into a table cell and given a fixed width attribute in pixels. This stabilizes the column containing that cell, preventing it from shrinking any smaller than the dimensions of the spacer. If you define a column as autostretch, and other columns in the table don't have some sort of content in them propping them open, the stretching column will shrink them down to nothing, regardless of what their fixed pixel widths are. If your table's fixed columns contain content, such as images, this will keep them from shrinking. But in case they don't, this is the time to use a spacer 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 this option if you've created a spacer image already and would prefer to use it. Don't use spacer images for autostretch tables— Choose this option when you'd prefer not to use spacer images. This option is handy when you already have an image within a table or cell that is marked as autostretch. You can also add a spacer image by selecting the Add Spacer Image option from the Column Widths Visual Aid's menu. If you'd prefer to remove existing spacer images from all columns in a table, you can select the Remove All Spacer Images option from the Table Widths Visual Aid's submenu or select the Remove All Spacer Images icon from the Property inspector. 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 to always use a spacer image when working with autostretch tables. Refer to the previous chapter for more information. To round out our design, choose the Don't Use Spacer Images for Autostretch Tables option and click OK. You'll notice the Header layout table now stretches to consume 100% of the Document window. To add the background image to the table, switch to the Standard mode, select the table, and use the point-to-file icon within the Bg Image text box of the Property inspector to point to the header_bg.gif image file within the Files panel. The result will resemble Figure 5.50.
  12. Figure 5.50. Add the header_bg.gif image as a background to the header table of our design. [View full size image] That's it! You've effectively created a table-based structure for your site using the Layout mode.
  13. Importing Tabular Data Earlier in the chapter, we built a table within index.html to hold the company's solution offerings. Remember that we created a table with six rows and three columns and then manually added solutions images and descriptive text. Numerous options exist for making this solution more dynamic. One solution, using a database to feed 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-, semicolon-, or colon-delimited files. This means that Mike over in Marketing can maintain a spreadsheet of the company's solution offerings. When he's ready to have a set of new offerings posted on the website, he can export his spreadsheet to one of the delimited options, and then send it to Wally the webmaster for quick import via the Import Tabular Data feature. For our example, we'll use a tab-delimited file located within the Assets folder called 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, first open index.html, remove the existing company events table, leaving your cursor within the cell, and choose Insert, Table Objects, Import Tabular Data. The Import Tabular Data dialog box will appear (see Figure 5.52).
  14. Figure 5.52. The Import Tabular Data dialog allows you to import a file based on a delimiter option and then format the table that will be created for the content. Looking at the dialog, you'll notice that it contains options for importing the file to use, choosing a delimiter option, and then formatting the table that will be created for the content. The complete list of functionality exposed by the dialog is outlined next: Data file— Click the Browse button from this file field to look for and select the file to use. For our example, browse to the solutions_delimited.txt file located within the Assets folder. Delimiter— Choose a delimiter option. Options include Tab, Comma, Semicolon, Colon, and Other. Choosing Other enables a text box allowing you to type in the delimiter symbol. For our example choose Tab. Table width— Choose the Fit to Data option button to have the newly generated table added to the page with no widths specified. Because no widths will be specified, the table will be as wide as the longest text element within the cells. You can also choose the Set option to manually specify a width in either pixels or a percentage. For example, choose the Set to Radio button, type the value 100 into the text box, and choose the Percent option from the menu. Cell padding and Cell spacing— Assigns a cell padding or cell spacing or both to your table. For our example, enter 2 for cell padding and 0 for cell spacing. Format top row— Select an option from this menu to format the top row of your table if you have one. Options in this list include Bold, Italic, and Bold and Italic. For our example, leave this as is. Border— Enter a value within this text box to assign a border to your table. For our example, enter 0. When you've finished reviewing the options and have made the appropriate additions and selections, click OK. The new table will be added to your page. The page should look like Figure 5.53.
  15. Figure 5.53. The new table is created based on the content within our tab-delimited file. [View full size image] The final task is to format the table, add a new column in front of the existing content, and then add the logos to the cells within the new column. When you're finished, the table will resemble Figure 5.54. Figure 5.54. Format the table, add a new column before the content, and add the product icons to the cells within the new column. [View full size image]
  16. Sorting Tables In the previous section, we imported data that created a table with three rows of content. Imagine that instead, you imported data that created hundreds of rows within a table. 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. The Sort Table dialog will appear similar to Figure 5.55. Figure 5.55. The Sort Table command allows you to sort a table based on a prespecified column. [View full size image]
  17. As you can see from Figure 5.55, the Sort Table command allows you to sort the table based on a primary and secondary column. A complete list of features is outlined next: Sort by and Order lists— Choose an option from the Sort list to specify which column from the table the sort will be performed on. Furthermore, you can select options from the Order menus to specify how the sort should be performed. You can perform alphabetic and numeric sorts and then choose whether to sort the values in the column in an ascending or descending order. Then by and Order lists— Choose a column from the Then By list when you want to perform a sort on a second column after the primary sort has been complete. Again, you can set the order of the sort on the secondary column. Sort includes the first row— Generally the first row of a table contains a header describing the content within the columns. If your table doesn't, you can include the first row in the sort by choosing this check box. Sort header rows— Check this option to sort all the rows in the table's section (if it exists) using the same criteria as the body rows. Sort footer rows— Check this option to sort all the rows in the table's section (if it exists) using the same criteria as the body rows. Keep all row colors the same after the sort has been completed— Check this option so that the table row attributes (such as color) remain associated with the same content after the sort. For instance, if your table rows are formatted with two alternating colors, do not select this option to ensure that the sorted table still has alternating-colored rows. For our example, choose the Column 2 option from the Sort By list and click OK. Immediately the dialog closes and the table is sorted based on the solution name. Tracing Images Many times, our design prototypes become so complex that it becomes difficult to figure out exactly how to
  18. 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 JPG image, and then lay it down as a temporary background to your page so that you can build your page structure over it. To demonstrate the use of tracing images, follow these instructions: 1. Create a new blank page by choosing File, New or by pressing Ctrl+N ( +N). When the New Document dialog appears, choose the HTML page type from the Blank Page category, choose the option from the Layout category, and click Create. A new blank page is created. 2. With the page now open, select the Page Properties option from the Modify menu or by pressing Ctrl+J ( +J). The Page Properties dialog appears. 3. Enter 0 for each of the Left Margin, Top Margin, Margin Width, and Margin Height text boxes within the Appearance category. 4. Switch to the Tracing Image category. As you can see, the Tracing Image category outlines two options. First, a file field that allows you to select the tracing image to use, and second, a transparency slider to select the opacity of the tracing image within the Document window. 5. In the Tracing Image text box, browse to the prototype.gif image located within the Assets folder. 6. Slide the Transparency slider to 30% and click Apply. As you can see from Figure 5.56, the prototype design is faintly visible in the background. Figure 5.56. The tracing image is faintly visible in the background of the page. [View full size image]
  19. 7. Click OK to close the Page Properties dialog. With the prototype faintly visible in the background, you can switch to Layout mode and begin developing the table structure using Layout Tables and Layout Cells over the image as if you were working with tracing paper. As you can see from Figure 5.57, layout tables have been drawn on the page, using the tracing image as a reference. Figure 5.57. Layout tables are drawn on the page using the tracing image as a reference. [View full size image] When you've finished creating the structure based on the tracing image, you can revisit the Tracing Image category within the Page Properties dialog and remove it.
Đồng bộ tài khoản