Chapter 19. Slicing Images for Layout Tables
| One popular technique for creating Web layouts is slicing. In slicing, you design the layout as a graphic file in an application such as Macromedia Fireworks, Adobe Photoshop, or Adobe ImageReady. Then, you literally slice the file into pieces for the different sections of the page as in Figure 19.1, and your graphics software gives you an HTML table that reassembles the pieces in a Web browser. This is the perfect solution for people trained as graphic designers: You get to design in a completely visual environment, and you don't have to do any of the coding yourself. Figure 19.1. Slicing a layout in software such as Macromedia Fireworks gives you individual graphics files and an HTML table that reassembles them in a Web browser.
That's the theory, at least. To make slicing work in a practical sense, you need to know something about creating layout tables the hard way, from the HTML up instead of from the graphics down. This book has made a habit of warning you against the evils of colspans and rowspans in your layout tables, and layout tables that come from sliced graphic files are no exception. If your slices result in a layout table that uses colspans or rowspans (like the slicing job in Figure 19.1, incidentally), you will almost certainly run into problems when you try to add content to the layout in your site editor. Content that pushes against the boundaries of the table causes your layout to break in unattractive ways, as in Figure 19.2. Figure 19.2. Problem. Your layout table uses colspans and rowspans, so it breaks easily when you fiddle with it. Avoiding colspans and rowspans is pretty easy if you slice each area of your page separately. Divide the initial slices from Figure 19.1 into separate graphics files, as in Figure 19.3, and slice and export these layouts individually. In this case, you get four separate layout tables for the four areas of the page. Figure 19.3. To avoid colspans and rowspans, divide the areas of your layout into separate graphics, and slice each graphic individually. Now, how to put the areas back together? The best way is to roll up your sleeves, fire up your HTML editor, and build the container table by hand. Make a sketch of the overall layout, as in Figure 19.4. Notice that the bottom cell of the container table requires a nested table to avoid a colspan, and the right cell of the nested table needs another nested table to avoid a rowspan. Listing 19.1. View Source for Figure 19.4.<table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Top</td> </tr> <tr> <td> <!-- First nested table begins. --> <table width="125" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Nav</td> <td> <!-- Second nested table begins. --> <table width="475" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Main Content Area</td> </tr> <tr> <td>Footer</td> </tr> </table> <!-- Second nested table ends. --> </td> </tr> </table> <!-- First nested table ends. --> </td> </tr> </table> Figure 19.4. Sketch the container table, using multiple nested tables to avoid colspans and rowspans, and build this table in your site editor.
Now, just paste the HTML code from the four sliced graphics into their corresponding cells in the container table, and you have a table-based layout built to last, as in Figure 19.5. Figure 19.5. Insert the HTML from the sliced graphics into the container table. When the dimensions of the table change, your layout doesn't break.
|
