INTERACTIVEPROOFING.COM

drown proofing training - www.interactiveproofing.com

Menu


  Inserting and Working with Tables If you can remember from Chapter 3, "Building a Web Page," the development


of our Dorknozzle web page was severely limited to inserting text and images in a vertically linear fashion. Elements on the page were organized such that we inserted images, followed by a line break, then either another image or text, and then repeated the process until the page looked somewhat presentable. Although this process may work for simple web pages, it does expose immediate drawbacks that become obvious when large amounts of text are added to the page. As you can see from Figure 6.1, the background image that we added to the top of the page begins to repeat itself near the bottom of the companydirectory.htm page. Figure 6.1. The background image begins to repeat itself near the bottom of the page. [View full size image]   The reason for this flaw may not seem immediately clear but begins to reveal itself with some explanation. The image we used for the background (header.gif) is 1 pixel wide by 2000 pixels high. The positive side is that the image always tiles horizontally no matter how wide we make the page. The downside is that the image is 2000 pixels high and because the natural viewing of pages is such that users navigate up and down, if the page exceeds that 2000 pixel height, the image tiles vertically just as it does horizontally. Another problem, visible in Figure 6.2, is the fact that there's no definitive break between paragraphs. Depending on how the page's width is resized, the text and images begin to run together. Figure 6.2. Because there's no definitive break between paragraphs, everything begins to run together. [View full size image]   Although these design flaws are minor, they begin to demonstrate the complexity our designs could potentially hold. As your web pages become more intricate and complex, structuring your web pages using elements such as tables becomes a viable alternative. Working with tables in Dreamweaver can be a complex process depending on how intricate your designs become. To walk you through all the table-based features exposed by Dreamweaver, we'll rebuild our Dorknozzle website from scratch. Not only will this help you understand all the features available for working with tables in Dreamweaver, rebuilding the website will show you how the small design flaws mentioned previously can be avoided by using tables to structure your designs. To insert a new table, create a new blank page and then choose the Table option from the Insert menu (press Ctrl+Alt+T in Windows or Contrl+Option+T on a Mac). The Table dialog appears, similar to Figure 6.3. Figure 6.3. Insert and format basic properties for a table from the Table dialog.   The features outlined in the Table dialog should start looking relatively familiar. If you've used word processing, database, or spreadsheet programs, the concept of rows, columns, and headers should be somewhat recognizable. NOTE Tables were never meant as a way to structure HTML elements on the page; they were meant as a way of structuring large amounts of data in well-formed and ordered format. Over time, web designers realized that the concept of rows and columns could easily structure images, text, and media elements on a page. Although this method of page design has stood the test of time, newer methods in