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 – A cell that holds a label of information in a row or column, is created with the 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 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 When you select a table, the Property inspector changes to reflect that table’s settings You can adjust the table by entering different values for height, width, rows, columns, and so on in the appropriate fields 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 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 Delete a frame Drag a frame border off the page or to a border of the parent frame If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the document 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 Borders: Shows or hides the borders of the current frame when it’s viewed in a browser – Yes (show borders), No (hide borders), Or Default (show borders); – A border is hidden only when all frames that share the border have Borders set to No 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 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 To insert NoFrames, In the Document window of Frameset page – Select Modify  Frameset Edit NoFrames Content – In the Document window, type or insert the content just as you would for an ordinary document 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 ... with the 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... Design view don’t appear in a Web browser Formatting Tables When you select a table, the Property inspector changes to reflect that table s settings You can adjust the table by entering different... 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