Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 4: Table - Frameset

Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 4 introduce table and frameset. This chapter present content: Table basics, inserting a table, selecting parts of a table, expanded table mode, formatting tables,...and another content.

TABLE -FRAMESET

Table Basics

A table is a grid of rows and columns that

intersect to form cells Two different types of cells

exist:

– Table cell that contains data, is created with the

<td>

– A cell that holds a label of information in a row

or column, is created with the <th>

Table Basics

The structure of an table

Inserting a Table

Place the insertion point in the document window where you’d like to insert a table

Choose Insert ➝ Table

Using the Rows and Columns fields, specify number of rows and columns

Type the amount of cell padding (in pixels)

Type the amount of cell spacing (in pixels)

Inserting a Table

– Table width: specify how wide you want the table to be

– Border thickness: type a number (in pixels) for the border

– Using the buttons in the middle of the dialog box, select a Header option

– In the bottom section of the Table dialog box, add any Accessibility settings you wish to use

Selecting Parts of a Table

– Selecting a Table

– Selecting Rows or Columns

– Selecting Cells

Expanded Table Mode

To remove all padding, cell spacing, and borders from a table

– Choosing View ➝ Table Mode

– Expanded Tables

Expanded Table mode never changes the actual page code; it merely affects how the page is displayed in Design view

The guideline borders and extra spacing that appear in Design view don’t appear in a Web browser

Formatting Tables

Aligning Tables: select the table, use one of the

three alignment options in the pop-up menu at the right of the Property inspector:

– The Left and Right options align the table with the left or right page margins

– The Center option makes the table sit in the

center of the page

Formatting Tables

Resizing a Table: select the table, and then take

either of these steps:

– Type a value into the W (width) box on the Property inspector, and then choose a unit of measurement, either pixels or percentages, from the pop-up menu

– Drag one of the resize handles on the right edge

Formatting Tables

Setting Cell Dimensions: Specify the width or

height of a particular cell

– Select one or more cells, and then type a value

in the Property inspector’s W (width) or H (height)field

– This value can be in either pixels or percentage

You can also resize a column or row of cells by dragging a cell border

Adding and Removing Cells

Adding One Row:

– Click inside a cell On the Insert panel’s Layout category Insert Row

– Above button to add a row above the current row

– Row Below button to add a row below the current row

Adding and Removing Cells

– Or Click inside a cell Choose Modify ➝ Table ➝

Adding and Removing Cells

Add a single column of cells:

– Click inside a cell On the Insert bar’s Layout tab, click the “Insert Column to the Left” button to add a column to the left of the current column – Click the “Insert Column to the Right” button to add a column to theright of the current column – Or Click inside a cell, and then choose Modify  Table Insert Column

Merging and Splitting Cells

Merge cells: Select the cells you wish to merge

– On the Property inspector, click the Merge Cells button,

– or choose Modify ➝ Table ➝ Merge Cells Dreamweaver joins the selected cells, forming a single new super cell

Merging and Splitting Cells

Split cells: divide one cell into multiple cells

– Select one cell that you wish to split

– In the Property inspector, click the Split Cells button (ModifyTable Split Cell)

– The Split Cell dialog box opens

– Indicate to split the cell into rows or columns – Type the number of rows or columns you wish

to splitOK

Tabular Data

Importing Data into a Table:

– Choose File ➝ Import ➝ Tabular Data

– The Import Tabular Data dialog box appears

Tabular Data

– Click Browsefind and select the delimited text file you wish to import

– Select a table width

– Set Cell padding, Cell spacing, and Border, if you like

– Select a formatting option for the top row of data OK

Tabular Data

Sorting Data in a Table:

– Select the table you wish to sort

– Choose Commands ➝ Sort Table

– The Sort Table dialog box appears

– Using the “Sort by” pop-up menu, choose the column by which you wish to sort

– Use the next two pop-up menus to specify how you want the data sorted

Tabular Data

Sorting Data in a Table:

– If you like, choose an additional column to sort

by, using the “Then by” pop-up menu

Tabular Data

Sorting Data in a Table:

– If the first row of the table contains data to be sorted, turn on “Sort includes the first row.”

– Choose whether to sort header rows and footer rows as well

– Choose whether to keep row colors with the sorted row

– Click Apply to see the effect of the sort without closing the dialog box

Frame and Frameset

A frame is a region in a browser window that can display an HTML document independent

Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document

In the most common use of frames, One frame containing navigation controls, while another frame containing content

Frame and Frameset

A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame

The frameset file itself doesn’t contain HTML content that displays in a browser, except in the noframes section;

Frame and Frameset

To view a set of frames in a browser, enter the URL

of the frameset file; the browser then opens the relevant documents to display in the frames

The frameset file for a site is often named index.html, so that it displays by default if a visitor doesn’t specify a filename

Frame and Frameset

Create Frame and Frameset

Create a predefined frameset and display an existing document in a frame:

– Place the insertion point in a document and do one of the following:

 Choose Insert > HTML > Frames and select a predefined frameset

 In the Layout category of the Insert panel, click the drop-down arrow on the Frames button and select a predefined frameset

Create Frame and Frameset

If you have set up Dreamweaver to prompt you for frame accessibility attributes, select a frame from the pop-up menu, enter a name for the frame, and click OK

Select Window > Frames to view a diagram of the frames you are naming

Create Frame and Frameset

Create an empty predefined frameset

– Select File > New

– In the New Document dialog box, select the

Page from Sample category

– Select the Frameset folder in the Sample Folder column

– Select a frameset from the Sample Page column and click Create

Create Frame and Frameset

Split a frame into smaller frames

To split the frame where the insertion point is:

– Modify > Frameset

– Select a splitting item

To split a frame or set of frames vertically or horizontally, drag a frame border from the edge into the middle of the Design view

Frame properties

Select a frame by click a frame in the Frames panel

In the Property inspector, click the expander arrow in the lower-right corner to see all of the frame properties

Set the frame Property inspector options

Frame properties

Frame Name : The name used by a link’s target

attribute

Src : Specifies the source document to display in

the frame Click the folder icon to browse to and select a file

Scroll: Specifies whether scroll bars appear in the

frame Default: Auto

No Resize : Prevents visitors from dragging the

frame borders to resize the frame in a browser

Frame properties

Border Color: Sets a border color for all of the frame’s borders This color applies to all borders that touch the frame, and overrides the specified border color of the frameset

Margin Width: Sets the width in pixels of the left

and right margins

Margin Height: Sets the height in pixels of the top and bottom margins

Control frame content with links

The target attribute of a link specifies the frame

or window in which the linked content opens

In Design view, select text or an object

– In the Link box in the Property inspector Click the folder icon or drag the Point to File icon to the Files panel and select the file to link to

Control frame content with links

In the Target menu, select the frame or window

in which the linked document should appear:

– _blank opens the linked document in a new browser window

– _parent opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset

Control frame content with links

– _self opens the link in the current frame, replacing the content in that frame

– _top opens the linked document in the current browser window, replacing all frames

NOFRAMES

Dreamweaver lets you specify content to display in older graphical browsers that do not support frames

This content is stored in the frameset file, wrapped

in a noframes tag

When a browser that doesn’t support frames loads the frameset file, the browser displays only the content enclosed by the noframes tag

NOFRAMES

– Or Select Window Code Inspector, place the insertion point between the body tags that appear inside the noframes tags, then type the HTML code for the content

Select Modify  FramesetEdit NoFrames Content again to return to the normal view of the frameset document