TABLE -FRAMESET - WordPress.com · dialog box, select a Header option. In the bottom section of the...

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

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

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.

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.

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.


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 TableInsert

Row.

To add a new row at the end of a table, click inside the last cell press Tab.


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. (ModifyTable 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 splitOK.

Tabular Data

Importing Data into a Table:

Choose File ➝ Import ➝ Tabular Data.

The Import Tabular Data dialog box appears

Tabular Data

Click Browsefind 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


If you like, choose an additional column to sort by, using the “Then by” pop-up menu.

Tabular Data


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.


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

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.


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.


_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

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 FramesetEdit NoFrames

Content again to return to the normal view of the frameset document.

Advanced CSS - Page Layout

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.

Advanced CSS

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

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.

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.

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

Advanced CSS

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

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.

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

Advanced CSS

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

Advanced CSS

EX:

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

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.

Page Layout

Types of Web Page Layouts: Float-based layouts offer three basic approaches to this problem:

Fixed width

Liquid

Elastic

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.

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.

Page Layout

Fixed

Page Layout

Liquid

Page Layout

Elastic

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.

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.

Page Layout

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

Page Layout

You can also insert a div by choosing Insert ➝ Layout Objects ➝ Div Tag.

In either case, the Insert Div Tag window appears

Page Layout

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

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

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”

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.

Page Layout

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.

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.

Page Layout

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.


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


The Structure of Dreamweaver’s CSS Layouts

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.

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.


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.


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.

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.

The AP Elements Panel

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

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.

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.

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.

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


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.


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

it isn’t submitted when the form is submitted.


Checkboxes and Checkbox Groups

Checked value: specify the information that’s submitted.

Initial state: checkbox be filled when your Web page first appears.


Checkbox Groups: On the Insert panel, click the Checkbox Group button.


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.


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.


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.


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.


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.


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.

None: activate your own programs.


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

Validating Forms

Spry Validation Basics: The Spry validation widgets let you validate input received via a text field, a text area, a pull-down 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.

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.

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.

Validating Forms

Modify the error messages:

in Design view, select the text, and then type a new error message.

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 the error message or select the form field you wish to format Edit the

style’s properties

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.

Email. This option looks for a validly formatted email address.

Date: To specify the format of the day.

Time. This option validates a time in one of several different formats...

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.

Validating Forms

Spry Text Area:

Specify content is required;

Dictate the minimum and maximum number of characters.

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 selected in the Property inspector

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

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.

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.

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 email” or “Create a password” box.

Next, from the Insert Panel’s Forms category, add the Spry Confirm widget, or choose Insert ➝ Form ➝ Spry Validation Confirm.

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.

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.

TABLE -FRAMESET - WordPress.com · dialog box, select a Header option. In the bottom section of the...

Documents

Transcript of TABLE -FRAMESET - WordPress.com · dialog box, select a Header option. In the bottom section of the...