[ Pobierz całość w formacie PDF ]
.To add a background image, specify a border color, designate the cell as a header cell, or splitthe cell, you need to switch to Standard view.To reshape or resize a layout cell, drag any one of the sizing handles on the border of the cellinto the unused area of a table.Likewise, you can drag a cell into any open table area thatis, any area of the table unoccupied by another cell by holding down the Ctrl key(Command key) as you click and drag.To maintain the width-height ratio of a cell, press Shift while resizing.TipChanging layout table propertiesTables may be similarly selected and resized.Layout tables are selected by clicking the titlebar marking the table, or by Ctrl+clicking (Command+clicking) inside an open area within thetable or on the table border.If the layout table is nested within another table, it can even bedragged to a new location within the outer table.Non-nested tables cannot be dragged to anew location on the page, however. 134931-6 ch10.F 7/18/02 6:58 AM Page 407Chapter 10 &' Setting Up Tables407Once a layout table is selected, the attributes in the Property inspector become available, asshown in Figure 10-27.These attributes include the following:&' Width: Enter a pixel value for a Fixed table width or select the Autostretch option toallow the table to grow as needed.&' Height: Enter a pixel value for table height.Percentages are not permitted in Layoutview.&' Bg: Choose a background color for the table.&' CellPad: This controls the amount of space between the content and the cell borderthroughout the table.The default value is 0.&' CellSpace: This controls the amount of space between cells throughout the table.Thedefault value is 0.&' Clear Row Heights: This button removes any set height values for all rows, andreduces the table to existing content.CautionWhen used with nested tables, Dreamweaver doesn t redraw the cell border to match thetable border; to correct this, drag the bottom cell border to match that of the table.&' Make Cell Widths Consistent: This button changes the width of all cells to the size oftheir respective content.If a cell is stretched beyond its original fixed size by an imageor some text, the column header of the layout cell shows the fixed size next to theactual size in parentheses.Choosing Make Cell Widths Consistent adjusts the fixed sizeto match the actual size.&' Remove All Spacers: Choosing this button deletes all single-pixel images used, toensure browser compatibility for layout tables and their corresponding rows.Spacersare discussed in the section Altering column widths, later in this chapter.&' Remove Nesting: This button converts a nested table to rows and cells of the outertable.This feature is available only in Layout view, and it provides a quick way ofremoving nested tables from a page.Make Cell Widths ConsistentClear Row HeightsRemove All SpacersRemove NestingFigure 10-27: The Layout Table Property inspector includesimportant options for converting nested tables and sizing cellsto fit existing content. 134931-6 ch10.F 7/18/02 6:58 AM Page 408Part II &' Web Design and Layout408Altering column widthsThe table elements in Layout view borrow a couple of pages from the professional Webdesigner s manual.For example, any column can easily be converted from a fixed width to aflexible width in Dreamweaver this is known as autostretch.When a table uses the autostretchoption, one column has a flexible width, and all other columns are of fixed width.You can alter the width of a fixed-width column in a number of ways:&' Visually select the cell and then drag a sizing handle to a new position.&' For pixel-precise width, use the Layout Cell Property inspector and enter the desiredsize in the Width field.If the cell is currently in Autostretch mode, select the FixedWidth option to enable the value field.&' To convert an Autostretch column to its current onscreen pixel width, choose MakeColumn Fixed Width from the column header menu, as shown in Figure 10-28.&' Insert content wider than the set width and then choose Make Column WidthConsistent from the Layout Table Property inspector.Figure 10-28: You can switch between fixed width and autostretch by using the columnheader menu.To make a fixed-width column automatically stretch, choose Make Column Autostretch fromthe column header menu.Only one column can be made to autostretch.When you set a col-umn to autostretch, Dreamweaver automatically converts any previously defined autostretchcolumn to have a fixed width. 134931-6 ch10.F 7/18/02 6:58 AM Page 409Chapter 10 &' Setting Up Tables409When the autostretch option is chosen for a layout table, Dreamweaver inserts a spacer(a single-pixel, transparent GIF) in a new row along the bottom of the table.The spacer issized to match the width of each of the fixed-width columns.Only the autostretch columndoes not have a spacer image.If you ve ever painstakingly created a complex table only to find that it looks great in onebrowser but collapses into an unidentifiable mess in another, you re going to love spacers.Spacer images have long been used by Web site designers as a method of ensuring a table sstability.Because no browser will collapse a column smaller than the size of the largest imageit contains, spacers retain a table s design under any circumstances.Dreamweaver gives you several options when working with spacers:&' You can have Dreamweaver create a spacer for you.&' You can use an existing image as a spacer.&' You can opt to never include spacers.The first time autostretch is applied as an option in a table, Dreamweaver displays theChoose Spacer Image dialog box (see Figure 10-29), which enables you to create or locate aspacer image.If you choose to create a new spacer, you are then asked to select a location inthe current site in which to store it.Generally, you would save such a file in an images, assets,or media folder.Figure 10-29: Spacers essentially make layout tables browser-proof; you can either letDreamweaver create one for you or use an existing image. 134931-6 ch10.F 7/18/02 6:58 AM Page 410Part II &' Web Design and Layout410This image is then automatically inserted whenever an autostretch table or cell is created.One circumstance for using an existing image rather than a new one is if you work with slicedtables from Fireworks.Fireworks creates a single-pixel GIF image titled shim.gif.The choice ofa spacer image is a site-wide preference that can be viewed or changed by selecting theLayout View category of Preferences.Although it is not recommended practice, you can dis-able spacers in the Layout View category.SummaryTables are extremely powerful Web page design tools.Dreamweaver enables you to modifyboth the appearance and the structure of your HTML tables through a combination ofProperty inspectors, dialog boxes, and click-and-drag mouse movements.Mastering tables isan essential task for any modern Web designer and worth the somewhat challenging learningcurve.The key elements to keep in mind are as follows:&' An HTML table consists of a series of rows and columns presented in a gridlike arrange-ment
[ Pobierz całość w formacie PDF ]