Table Basics. The structure of an table

Transcription

1 TABLE -FRAMESET

2 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>.

3 Table Basics The structure of an table

4 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).

5 Inserting a Table

6 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

7 Selecting Parts of a Table Selecting a Table Selecting Rows or Columns Selecting Cells

8 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

9 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.

10 Formatting Tables Aligning Tables: select the table, use one of the three alignment options in the popup 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

11 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.

12 Modifying Cell and Row 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.

13 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.

14 Adding and Removing Cells Or Click inside a cell. Choose Modify Table Insert Row, Or press Ctrl+M to insert a new row of cells above the current row. Or right click a cell, and then, from the shortcut menu, choose Table Insert Row. To add a new row at the end of a table, click inside the last cell press Tab.

15 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.

16 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.

17 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.

18 Tabular Data Importing Data into a Table: Choose File Import Tabular Data. The Import Tabular Data dialog box appears

19 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

20 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.

21 Tabular Data Sorting Data in a Table: If you like, choose an additional column to sort by, using the Then by pop-up menu.

22 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.

23 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

24 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;

25 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.

26 Frame and Frameset

27 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.

28 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.

29 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.

30 Create Frame and Frameset

31 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.

32 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.

33 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.

34 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.

35 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.

36 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

37 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.

38 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.

39 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.

40 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.

41 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.

42 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.

43 Advanced CSS - Page Layout

44 Advanced CSS Compound Selectors: Is a Dreamweaver term, not a CSS term. Describes more advanced types of selectors such as the pseudo-class styles or the descendent selectors. In the CSS there are a variety of these advanced selectors but in Dreamweaver, all of them are created in the same way Start by creating a CSS style.

45 Advanced CSS When you open New CSS Rule window, instead of selecting the Class, ID, or Tag selector type, choose the Compound option.

46 Advanced CSS Except the four link state options in the drop-down menu, you must type the selector name in the Selector Name box. You need to use a different syntax for each type of selector. Descendent Selectors: If a tag is inside another tag, it s a descendent of that tag.

47 Advanced CSS EX: On your web page have <h1>, you want to emphasize a word within <h1>: You select the word and press the B button, it applies the <strong> tag to that word. Most browsers display both tags, so you can t see any difference between the emphasized word and the other words in the headline.

48 Advanced CSS Creating a tag selector to change the <strong> tag s color and make it stand-out from the headline isn t much of a solution: You end up changing the color of every <strong> tag on the page, like it or not. A descendent selector lets you do what you really want: change the color of the <strong> tag only when it appears inside of an <h1> tag. The descendent selector is h1 strong

49 Advanced CSS

50 Advanced CSS A descendent selector can contain more than just two elements as well. The following are all valid selectors for the <a> tags inside the bulleted lists. ul li a body li a html li a html body ul li a

51 Advanced CSS Styling Groups of Tags: To create a style that applies to several different elements at once, In the Selector Name box, type a list of selectors separated by commas.

52 Advanced CSS Fast Style Editing With the Properties Pane: The Properties pane displays CSS properties in one of three different views: A set properties view: displays only the properties that have been define A Category view: groups the different CSS properties into the same seven categories used in the Rule Definition window A List view: provides an alphabetical listing of all CSS properties for the selected style

53 Advanced CSS

54 Advanced CSS Moving and Managing Styles: To move a style from one place to another in the same style sheet: Drag the style in the CSS Styles panel. The order the styles are listed in the CSS Styles panel represents their order in the actual CSS You can select and move more than one style at a time by Ctrl-clicking

55 Advanced CSS EX:

56 Advanced CSS To move one or more styles between two style sheets: Drag the style from one style sheet to another in the CSS Styles panel. This is applied both for moving a style from an internal style sheet to an external style sheet, and for moving a style from one external style sheet to another

57 Advanced CSS The Cascade: The page has two different styles, two sets of formatting rules for the same tag. The browser merges the three styles into a sort of hybrid, following these rules: Properties that don t conflict are applied as usual. Properties do conflict, the Web browser uses the property from the style with the greatest specificity.

58 Page Layout Types of Web Page Layouts: Floatbased layouts offer three basic approaches to this problem: Fixed width Liquid Elastic

59 Page Layout Float Layout Basics: Float-based layouts take advantage of the CSS float property to position elements side by side, and create columns on a Web page. In essence, the float property moves a page element to the left or the right. Any HTML that appears after the floated element moves up on the page, and hugs up against the side of the float.

60 Page Layout Float is a CSS property, available when you create a CSS style. It s listed in the CSS Rule Definition window s Box category Choose the left option, and the styled element floats to the left, Choose the right option and the element moves to the right.

61 Page Layout Fixed

62 Page Layout Liquid

63 Page Layout Elastic

64 Page Layout With the fixed-width approach, you don t have to worry about what happens to your design on a very wide (or small) monitor. Liquid: Your page gets wider or narrower as your visitor resizes the window. Elastic: With this kind of design, you define the page s width using em values. An em changes size when the browser s font size changes.

65 Page Layout The Mighty <div> Tag: With CSS, the most common element for organizing content is the <div> tag. The <div> tag is an HTML element that has no inherent formatting properties you use it to mark a logical grouping of elements, or a division, on the page.

66 Page Layout

67 Page Layout The Insert Div Tag Tool: lets you wrap a <div> tag around a selection of page content To use this tool, either select the content you wish to wrap with a div or click on the page where you wish to insert an empty <div> tag. Then click the Insert Div Tag button on the Layout category of the Insert panel

68 Page Layout You can also insert a div by choosing Insert Layout Objects Div Tag. In either case, the Insert Div Tag window appears

69 Page Layout Choose a class from the Class menu or choose an ID from the ID menu.

70 Page Layout Ex: To create a two-column design, you could follow these easy steps: Select the contents of the banner. Then, on the Layout category of the Insert panel, click the Insert Div Tag button. In the ID box, add an ID name. Click OK to close the Insert Div Tag window

71

72

73 Page Layout Select the contents of the sidebar, and then, in the Insert bar, click the Insert Div Tag button. Click the New CSS Style button, and create a new ID style named #storylinks In the CSS Rule Definition window, click the Box category, and then, from the float menu, select left

74 Page Layout Type a value in the Width box Complete the style, and then insert the div Follow the same steps for the main content div: Select the page elements that form that main content on the page, click the Insert Div Tag button, and then create a new ID style for the page s main content region.

75 Page Layout

76 Page Layout Understanding the Box Model: CSS properties located within this category: width, height, padding, margin, and clear. Width and height: specify the width and height for any styled object using these properties. Float: move an object to the left or right side of a page and have other content wrap around it.

77 Page Layout Clear: Clear prevents an element from wrapping around any object with a right or left Float property. Padding: Padding is the gap that separates the content of the styled tag. Margin. The margin is the outermost space surrounding an element.

78 Page Layout

79 Page Layout

80 Dreamweaver s CSS Layouts Dreamweaver s CSS Layouts are simply basic designs. Each layout is a simple HTML file and a style sheet. Creating a new CSS layout page takes just a few steps: Choose File New. Choose Blank Page from the left column, and the type of page you wish to create in the Page Type column.

81 Dreamweaver s CSS Layouts

82 Dreamweaver s CSS Layouts From the Layout column, select a page layout. Choose a DocType from the DocType menu. From the Layout CSS menu, select where to store the layout s CSS code. Click the Attach Style Sheet button to attach any external style sheets to the page Click the Create button to bring your new Web page to life

83 Dreamweaver s CSS Layouts The Structure of Dreamweaver s CSS Layouts

84 Absolute Positioning (AP) Beyond float-based layouts, CSS s other main technique for placing elements on a Page Absolute positioning lets you specify an exact position on a page for any element. Web is a environment that s difficult to control with pixel level precision. If increase the font size in the browser, the enlarged text may spill out of your carefully crafted layout.

85 The CSS Positioning Properties Positioning type: Absolute is the most common option. It lets you place a tag anywhere on a page. Relative: lets you position a tag relative to its position in the HTML. Static: is the normal behavior of HTML. Static simply means the content follows the normal top-down flow of HTML.

86 The CSS Positioning Properties Fixed is similar to the fixed value of the CSS attachment property used to lock a background image in place. Width and height: set the width and height of the element Visibility: Dreamweaver makes the contents of all tags visible on the page. Z-index: represented by a number in the Z index field, controls the stacking order of AP elements on a page.

87 The CSS Positioning Properties Placement: specify an absolutely positioned element s position which is, after all, the whole point of AP div. The four properties control where each of the four edges of the AP div begin.

88 Adding an AP Div to Your Page Drawing AP Divs: Click the AP div button, and then drag the + cursor diagonally in the document window to create a box. Use a menu command: at the insertion point, choose Insert Layout Objects AP Div.

89 The AP Elements Panel The AP Elements panel: manage absolutely positioned elements in a document.

90 The AP Elements Panel Visibility: To change an absolutely positioned element s visibility property AP element ID: If you use Draw AP div tool, Dreamweaver gives the AP div a generic ID name. Z-index: provides a third dimension to absolutely positioned elements.

91 FORM

92 Form basic A form is form-processing program running on the Web server. The operations of the form follow those steps: First, someone fills out a form on your Web page, and then clicks the Submit button. Next, the Web browser transmits the form data over the Internet to a program on your Web server. The program collects the data and does something with it, Finally, the Web server returns a page to the Web visitor.

93 Creating a Form In the document window, click where you d like to insert the form. On the Insert panel, select the Forms category. Click the Form icon. Click the dotted red line to select the form, type a name for your form into the Form ID field. Into the Action field, type a URL, or select a file by clicking the tiny folder icon Select method in the method pop-up menu.

94 Adding Form Elements In the document window, insert a form. Of the Insert panel s Forms category, click the appropriate button (form element). In the Input Tag Accessibility Attributes window, type an ID, Type a label, and then select label options. Type an Access key and a Tab Index number, and then press OK. In the Property inspector, set the form element s properties

95 Adding Form Elements Text Fields: Char Width: The width of a text field is measured in characters (default 20 Char). Type: have three different types of text fields A single-line text field. Multiline fields (Text area) Password.

96 Adding Form Elements Max Chars/Num Lines: Max Chars lets you limit the number of characters the field accepts. Init Val: specify the Initial Value of the field. Disabled and Read-only: prevents visitors from clicking into the field, or even selecting any text that s already there and any data in

97 Adding Form Elements Checkboxes and Checkbox Groups Checked value: specify the information that s submitted. Initial state: checkbox be filled when your Web page first appears.

98 Adding Form Elements Checkbox Groups: On the Insert panel, click the Checkbox Group button.

99 Adding Form Elements In the Name field, type a name. In the Label column, click the top Checkbox label. Hit the Tab key to jump to the Value column for that checkbox, and then type a value for the first checkbox. Repeat for the second checkbox in the group.

100 Adding Form Elements Radio Buttons: radio buttons restrict your visitor to making only one choice from a group. In the Property inspector, you can set up the following options for a radio button: Name Checked value. Initial state. Radio Group: provides a single dialog box for creating a group of radio buttons.

101 Adding Form Elements Pull-Down Menus and Lists: offer many choices without taking up a lot of screen space. Properties of the Menus and List: Type. Height. Allow multiple. List Values.

102 Adding Form Elements File Field: you easily add a field for uploading image files, text files, and other documents. When you click the File Field button on the Insert panel s Forms,Dreamweaver inserts a text field and a Browse button; together, they constitute a single File Field.

103 Adding Form Elements Buttons: Submit button for your Web visitors to click as a final step. Only then do their responses set out on their way to your form-processing application. The Reset button clears all the form entries, and resets all the form fields to their original values.

104 Adding Form Elements Button name: provides the first half of the name/value pair that s sent when the form is submitted. Value. is the label that appears on the button. Action: Submit form: transmits the form data over the Internet Reset form: sets all the fields back to their original values.

105 Adding Form Elements <label> Tag: lets you associate a label with a particular form element, like a checkbox or text field. <fieldset> Tag: is a form organization tool, intended to let you group related form fields.

106 Validating Forms Spry Validation Basics: The Spry validation widgets let you validate input received via a text field, a text area, a pulldown menu, a checkbox, or a group of radio buttons. The basic process for all form validation widgets is the same: Insert the Spry widget (seven types): select the form element on the page, On the Insert panel, clicking the appropriate Spry form button.

107 Validating Forms Assign a validation requirement: Use the Property inspector to assign the type of validation to the field. Select when validation occurs: A browser validates form fields when the visitor submits the form. Or when someone clicks the Submit button on the form, the JavaScript code in the Web page checks to make sure everything was filled out correctly.

108 Validating Forms You dictate when a field is validated by turning on one or both of the Property inspector s Validate on checkboxes Dreamweaver lets you validate a form field when the field is blurred, changed, or both.

109 Validating Forms Modify the error messages: in Design view, select the text, and then type a new error message.

110 Validating Forms Formatting Spry Error Messages and Fields: Open the CSS Styles panel click the Current button. Make sure the Cascade button is pressed. Select the Spry validation widget. From Preview states menu, select the preview state you wish to format. In the document window, click inside

111 Validating Forms Spry Text Field includes Validation types: None. This option is the default setting: no validation Integer. Use this option to verify that a whole number was typed into the field. . This option looks for a validly formatted address. Date: To specify the format of the day. Time. This option validates a time in one of several different formats...

112 Validating Forms Custom validation: Select a Spry text field widget, From the Property inspector s Type menu, choose Custom, and then into the Pattern field, type the pattern.

113 Validating Forms Spry Text Area: Specify content is required; Dictate the minimum and maximum number of characters.

114 Validating Forms Spry Checkbox: The Spry validation checkbox lets you make sure a particular checkbox has been selected. To add a single Spry checkbox, choose Insert Form Spry Validation Checkbox, Or, on the Insert panel s Forms category, click the Spry Validation Checkbox button. The Spry checkbox that appears on the page already has the Required option

115 Validating Forms To create a group of related Spry checkboxes: Insert a Spry checkbox. Click the label text. Press the <label> tag disappears from the Tag selector. Insert a regular (non-spry) checkbox

116 Validating Forms Spry Select: validates the selection of pull-down menus, and has two options to determine whether or not a selection in the menu is valid. Do not allow: To prevent a visitor from submitting the form without selecting options.

117 Validating Forms Spry Password: This helpful tool lets you enforce a set of rules for naming passwords so that visitors don t create easily hacked credentials.

118 Validating Forms Spry Confirm: works only with text fields, and pops up an error message, if the value in the text field doesn t match the value in another text field on the page. To use this widget First, you add a text field. That field is the original Type your or Create a password box. Next, from the Insert Panel s Forms category, add the Spry Confirm widget, or choose Insert Form Spry

119 Validating Forms Spry Radio Group: To add a Spry Radio Group, use the Insert panel s Forms category or Insert Form Spry Validation Radio Group. Use the Property inspector to set up the validation options. The other two options Empty Value and Invalid Value produce error messages when a particular radio button is selected.

120 Validating Forms In either of these boxes, enter the value you assigned when you first created the radio button. Selecting the radio button with the specified value produces one of two errors when the form is submitted. For the Empty Value, the error informs the visitor that he hasn t made a selection. For the Invalid Value, the error announces that the choice he made was invalid.