INTERACTIVEPROOFING.COM

digital workflow - www.interactiveproofing.com

Menu


It may seem redundant to have alignment icons in the top half of the Properties Inspector and a Horizontal Alignment menu that list essentially


the same options. The difference, however, is element specific. Choosing an option from the Horizontal Alignment menu creates an align attribute within the <td> tag similar to <td align="center">. Depending on the content of the cell, the align icons create a <span align="center"> or a <div align="center"> tag in the <td> tag. The former is much more efficient code.   Setting the Background Color, Image, Border Color, and Cell Wrapping Looking at the text to the right of the intranetsymbolism.gif image in Figure 6.27, you can see that the text is cleanly formatted with spacing and line breaks. Of course, we didn't add the spacing or the line breaks at the end of each line; Dreamweaver does it automatically for us. When a line reaches the end of the cell, the text breaks and keeps going on to the next line as you might expect. But what if you didn't want that to happen? What if you wanted the text to keep going and automatically stretch the width of the table regardless of the pixel size we explicitly set? A good way to prevent text within a cell from wrapping is to use the No Wrap check box in the Properties Inspector. The question becomes, "Why would I want to prevent the text from wrapping within the cell?" Assume for a moment that you had a website that contained a tabbed navigation bar at the top of the page. Depending on the page you happen to be on, those tabs change based on the page and the content within the page. Assuming that you have a few dozen web pages in your site, your tabs could number in the hundreds. Would you want to create a few hundred different images for every tab in your website? Probably not, right? Instead, you could create dynamic tabs that stretched (using the No Wrap option) based on the content in the cell. This way, you're only creating the tab structure once; the text within the tab is the only part that changes. Doing this would make your tabbed navigation much easier to manage. To demonstrate my point, let's do a quick example: 1. Create a new blank HTML page by choosing the New option from the File menu, choosing HTML from the Basic Page category, and clicking Create. The new blank page appears. 2. Create a new table by choosing the Table option from the Insert menu. When the Table dialog appears, create a table with 1 row, 3 columns, a width of 150 pixels, a border thickness of 0, cell padding of 0, and cell spacing of 0, and click OK. The new table appears within the page. 3. Resize the first column to 24 pixels and the third column to 30 pixels. 4. Add the lefttab.gif image to the left cell and the righttab.gif image to the right cell. These images are both located in the NoWrap folder in the Images folder of the project. 5. Set the middle column's background image to bg.gif by placing your cursor in the cell and using the point-to-file icon located to the right of the Bg text box in the cell-based Properties Inspector. After it's added, the table should resemble Figure 6.28. Figure 6.28. Create a table to mock the functionality and look of a tab. [View full size image] 6. With your cursor still focused in the middle cell, choose the Center option from the Horz menu and the Bottom option from the Vert menu in the Properties Inspector. 7. Select the table, choose edit, Copy from the main menu, place your cursor just after the table and press Shift+Enter twice to create two line breaks. Then choose Edit, Paste. Now you'll have two tables that look like tabs. 8. Place your cursor in the middle cell of the first table and choose Insert, Hyperlink. When the Hyperlink dialog appears, enter the text Option 1 and type the # (to create an anchor with no link) symbol in the Link text box. Click OK.