Presentation on theme: "Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4."— Presentation transcript:
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4
2 Working with Tables for Page Design – Lesson 4 Objectives Import images to use as tracing images. Use tables to lay out your pages. Work with tables in Layout and Standard view. Import tabular data. Select elements of a table and modify their properties. Sort tables. Export a table.
3 Working with Tables for Page Design – Lesson 4 Use a tracing image If you have a graphic image you want to use as a page design, you can import it into Dreamweaver MX and use it as a tracing image to create your page. The image must be JPEG, GIF, or PNG format. The tracing image is visible only inside Dreamweaver MX. It is referenced in the HTML code, but will not be loaded or displayed by the browser. When using a tracing image, your page background image or color will be hidden in Dreamweaver MX, but it will be visible in the browser.
4 Working with Tables for Page Design – Lesson 4 Import a tracing image To insert a tracing image into your Dreamweaver MX document: Create a new document, name it, and save it. Click the View menu, point to Tracing Image, and click the Load option. Double-click Images and locate the file to be used as the tracing image. Click OK or Open. Click Apply to cause the image to appear on the page. Adjust the Image Transparency slider to adjust the opacity of the image to where you can see the image, but it is not a distraction. Click OK.
5 Working with Tables for Page Design – Lesson 4 Tables help lay out your pages Tables can give you greater control over where text and images appear on your Web pages. HTML tables are similar to a spreadsheet table where there is a series of rows and columns. Text and graphics can be placed inside table cells to precisely position them on the page and in relation to each other. Attributes of the table and the individual cells, such as cell height and width, can be adjusted as needed. Cells can be merged to further aid in aligning page objects. Dreamweaver MX has two modes for designing tables, Layout mode and Standard mode.
6 Working with Tables for Page Design – Lesson 4 Design tables in Layout mode Layout mode allows you to see just the cells of the table that you draw. In Layout view, you can add a layout table or just add layout cells to the page. If you draw just a cell, Dreamweaver MX will create a layout table for you. The layout table is as wide as the document window and starts in the top-left corner. Layout tables will have a tab at the top to help identify the table. It will contain column numbers and a column menu.
7 Working with Tables for Page Design – Lesson 4 Creating a layout cell and inserting a graphic image With a document open, Click the View menu, point to Table view, and then click Layout view. Click the Draw Layout Cell button on the Layout tab of the Insert bar. Place the pointer on the page and drag to draw a cell. The cell will be outlined in blue, and the table (created by Dreamweaver) will be outlined in green. If you move the pointer over the border of the cell, the border will turn red to let you know which cell you are over. If you click the red border, the cell will be selected and sizing handles will appear that you can use to resize the cell. Open the Assets panel and locate the graphic to insert in the cell. Drag it from the folder to the cell.
8 Working with Tables for Page Design – Lesson 4 Create tables in Standard view Dreamweaver MX Standard table view shows you the HTML table structure. You can create a new table in this view or view the table automatically created by Dreamweaver when you created a layout cell in Layout mode. If the information to be entered in the table is structured into rows and columns, similar to spreadsheet data, this mode is easier to work in than Layout mode.
9 Working with Tables for Page Design – Lesson 4 Insert a table in Standard mode Create a new document, name it, and save it. Position the insertion point in the document window where you want the table to start. Click the Insert menu, then click Table to open the Insert Table dialog box. Enter the number of rows and columns for the table. Set the table width and define a border. You can also set Cell Padding and Cell Spacing values if desired. Click OK to close the dialog box and display the table.
10 Working with Tables for Page Design – Lesson 4 Import data from a spreadsheet or text document If you have text in a spreadsheet or word processing document, you can import that data into a Dreamweaver table. The data to be imported must be in text format in a tab- or comma-delimited file. Dreamweaver MX will automatically create the table based on the information you supply in the Import Tabular Data dialog box.
11 Working with Tables for Page Design – Lesson 4 The Import Tabular Data dialog box This figure shows the Import Tabular Data dialog box. To open this box, click the Insert menu, point to Table Objects, and then click Import Tabular Data. Click the Browse button to find the text file to import. After finding your file, click the Delimiter list arrow and select the delimiter used in the text file. Click the Set option button and specify the table width. Set other parameters as needed. Click OK to import the data and build the table.
12 Working with Tables for Page Design – Lesson 4 Select table cells You can select cells in several ways: Select a row or column – Position the pointer at the left margin of a row or at the top of a column and click when the selection arrow appears. You can also click within a cell and drag down or across to select multiple cells. Select one or more cells – Click in a cell and drag down or across other cells to be selected. Or, click in one cell, press and hold down the Shift key, and click in another cell to select all cells within a rectangular region defined by the two cells. Select noncontiguous cells – Press the Ctrl or Command key and hold it down, then click in each individual cell to be selected.
13 Working with Tables for Page Design – Lesson 4 Modify table cells You can modify existing cells and add new table cells: Resize cells – Move the pointer over a border and drag. Add a new row – Click in the last cell of a row and press Tab. There are also operations to insert a row in the middle of the table or to add a row before or after the current row. Delete a row – Click in a row, click the Modify menu, point to Table, then click Delete Row. Span columns and rows – Drag to select multiple cells, then click Merge Cells on the Property inspector. Splitting a cell – Select the cell and then click Split Cell on the Property inspector.
14 Working with Tables for Page Design – Lesson 4 Set or change cell attributes You can modify cell attributes to format the table as you want it to appear: You can set the horizontal and vertical alignment of the cell’s contents. You can change the width and height of selected cells. You can set a background image or color for a cell. You can change the border for a cell. You can set text wrapping options for cells. You can format a header row for the table.
15 Working with Tables for Page Design – Lesson 4 Sort table data You can sort the data in the table on one or two columns: In Standard view, select the table, click the Commands menu, then click Sort Table. Select the column for the primary sort key and select a secondary key if desired. Select the desired sort order for each key. If your table has a header row, leave the Sort Includes First Row check box unselected. Set other options as desired and click OK to sort the table according to your settings. You cannot sort a table with merged cells.
16 Working with Tables for Page Design – Lesson 4 The Sort Table dialog box This figure shows the Sort Table dialog box. The Sort By box indicates the primary sort field. You can specify a secondary sort column in the Then By box. Choose the sort order in the Order box for each sort key. Set the check box options as needed to control your sort operation.
17 Working with Tables for Page Design – Lesson 4 Export a table You can export the data in your table as a text file, which can then be imported into a word processing program, spreadsheet, or database. To do so: Select the table, click the File menu, then click Export. Select the delimiter type to use for the export file (tab, comma, space, etc.). Select a Line Break option for the operating system that the file will be accessed by. Click the Export button to open the Export Table As dialog box, name the file, select the.txt file type, and click the Save button to export the data.
18 Working with Tables for Page Design – Lesson 4 Summary In this lesson, you learned: How to import images to use as tracing images. To use tables to lay out your pages. To work with tables in Layout and Standard view. How to import tabular data. Different methods of selecting elements of a table and modifying their properties. How to sort tables. How to export a table.