This chapter is from the book
This chapter is from the book
This chapter is from the book
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 separated by tabs similar to Figure 4.31.
)
Figure 4.31 A tab-delimited file contains text separated by tabs.
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 4.32).
)
Figure 4.32 The Import Tabular Data dialog box 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 box, 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 box is outlined here:
- 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 4.33.
)
Figure 4.33 The new table is created based on the content within our tab-delimited file.
The final tasks are to set the font for the text in the table, add a new column in front of the existing content for the product logos, add the logos to the cells within the new column, and then set pixel widths for each of the three columns within the table. When you’re finished, the table might resemble Figure 4.34.
)
Figure 4.34 Format the table, add a new column before the content, and add the product icons to the cells within the new column.
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 box will appear similar to Figure 4.35.
)
Figure 4.35 The Sort Table command allows you to sort a table based on a prespecified column.
As you can see from Figure 4.35, the Sort Table command allows you to sort the table based on a primary and secondary column. A complete list of features is outlined here:
- Sort by and Order—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—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 <thead> 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 <tfoot> 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 box 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 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 JPEG 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:
- Create a new blank page by choosing File, New or by pressing Ctrl+N (Command-N). When the New Document dialog box appears, choose the HTML page type from the Blank Page category, choose the <none> option from the Layout category, and click Create. A new blank page is created. Immediately save your page as tracingimage.html.
- With the page now open, select the Page Properties option from the Modify menu or by pressing Ctrl+J (Command-J). The Page Properties dialog appears.
- Enter 0 for each of the Left Margin, Top Margin, Margin Width, and Margin Height text boxes within the Appearance (HTML) category.
- 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.
- In the Tracing Image text box, browse to the prototype.gif image located within the Assets folder.
- Slide the Transparency slider to 30% and click Apply. As you can see from Figure 4.36, the prototype design is faintly visible in the background.
- Click OK to close the Page Properties dialog box.
)
Figure 4.36 The tracing image is faintly visible in the background of the page.
With the prototype faintly visible in the background, you can now add and manipulate tables to create a design using the background tracing image as a reference.
When you’ve finished creating the structure based on the tracing image, you can revisit the Tracing Image category within the Page Properties dialog box and remove it.