Review provided by Julie Jacobs

CHAPTER 7   CREATING TABLES

Working with tables
HTML
does not have a program for tables, but EW does. CSS is the preferred means of creating tables and other page layout. A data table is a table whose sole purpose is to align text and numbers in rows and columns... A layout table occupies the entire page and align all the text and images on the whole page. Any element can be placed in a table. A layout table can contain a data table. A nested table is one that contains or is contained in another table <table><tr><td></td><td></td></tr></table>  web page designers no longer use tables for page layout.  P 370

 Tracer lines are dotted lines that outline each of the table cells.

 

Creating a table
1.  
Click table on the menu bar, the common toolbar or the standard toolbar.
2.  
Insert table
3.  
specify the number of rows and columns
4.  
select choices for layout and borders if desired
5.  
If tracer lines do not appear, chose visible borders in Visual Aids (in status bar at the bottom of the editing window.
6.  
Tables begin with the start <table> tag and end with the end </table> tag
7.  
Rows begin with the start <tr> tag, etcl
8.  
Cells (data) begin with the start <td> tag, etc.
9.  
Table borders are the horizontal and vertical rules inside and outside the table
10.
Table borders are referred to as table gridlines or the table grid.
11.
Unless you assign an attribute to the table gridlines, they will not appear in the browser
 

Setting the table properties- Right click anywhere in the table to open the table properties menu Then Chose among the choices offered for size, layout, borders, background, and tools and set (an option to make the selections a default choice.)
Cell padding
is the white space that surrounds the contents of the cell.
Cell spacing i
s used to create distance between cells
A truncated row
is a shortened table that does not display all rows

Inserting an Excel Worksheet- You can insert an excel worksheet in EW to create a HTML table, but make sure the worksheet is a single page only. In EW, create a one cell table. Click inside the cell, click insert and insert the entire excel spreadsheet.

 To select the content of a row or column, pass the pointer over the outside border. When the selection arrow appears, click the left mouse button.

 Merging or Splitting Cells-
a.
To merge cells:-        Click anywhere inside the first cell, then  Click and drag to select the cells to be merged,  Click TABLE on the menu bar, select MODIFY and select MERGE CELLS.
b. TO split cells-
  Click anywhere in the cell to be split,   Click TABLE on the menu bar, then MODIFY, then choose SPLIT CELL

Creating a Table Caption- Click anywhere inside the tableClick table on the menu bar, Click insertEnter the caption text,  Right click on the caption text to enter caption properties.

Using the “Caption Side” property -  This property has little browser support. Do not use it. Position captions above or below the table.

 

7.1 Quick check
What is the name of a table that aligns rows and columns                                 a data table
What is the name of a table used for page layout                                                 a layout table
What is the name of a table within another table                                                  nested

What are table gridlines                                                                             the borders within and around the table
What are tracing lines                                                                 dotted lines that indicate the table cells when no border is specified
|What are two ways to create tables                                         insert table from common toolbar                                                                                                        Select table from menu bar
What is cell padding                                                                   white space around contents of cell
Cell spacing                                                                                 distance between cells.
What is the purpose of the caption                                           describes the purpose of the table
Does the table have to have a caption                                    no

 

 Creating layout tables
CSS is a better way to create tables.

The TABLE DRAW FEATURE allows you to sketch a design of the layout you want. EW also has a Table Gallery of commonly used table layouts.

 TO CREATE A TABLE LAYOUT-                                                           
               Create a blank web page
               
Display the layout tables task pane
               
Expand the layout tables task pane to see the layout table gallery
               
Create width and height, or just start entering data in celll

The table element is a block level element.  It can have padding, margins and a border,

            And it can float left and right.

Setting Vertical alignment-
1.    
Right click in a cell
2.    
open cell properties
3.    
open vertical alignment list arrow 

Creating a navigation bar for the layout table

 

Converting text to a table
1.    
Click table on the menu bar, point to convert, then click Text to Table
2.    
specify what character you want to use to separate text (paragraph, tab, or comma
3.    
This process can also be reversed to create text from a table

Seamless appearance: eliminating the borders from a layout table.

 

Using the Table Auto format feature
1.    
click anywhere in the table
2.    
click table, open modify, then specify auto format
3.    
Specify the format you wish to use. 

7.2 quick check

 Are layout tables commonly used?                                                                                  No
What is a template gallery                                                                                 a library of commonly used layouts
To what value must you set the table border to see gridlines                     one or greater
What attribute gives vertical alignment                                                           valign (top, middle or bottom)
What EW feature provides automatic tables                                                  table auto format
 

Table borders

 

 

 

CHAPTER 8       CREATING FORMS

 

                An HTML form is an object used to gather and transmit information. In EW, a form area is a space to create a form. Data is the source of input for the form. Information is the knowledge gained from the data. CGI, common gateway interface, is a standard by which the computer communicates data with a server. A CGI script is a series of instructions written in scripting language. The form handler program, which is not part of EW, uses CGI script to process the data. The form handler program is part of the web server, not EW.

 

                Forms begin with the start  <form> tag and must enclose the <table> tags. Each form must have a unique name. The form tag has a few lines of scripting code.

 

                The action attribute and its value show the part of the server that will be used and the script that will be employed when the user submits the form.

 

                The method attribute and its value determine how the material will be sent to the server, and usually has only two values: get  or post. EW uses post, as it is less limited in the amount of data that can be transmitted.

 

                Form fields are the areas the users  fill out. A field is a piece of data. The field name is a unique identifier given to each field. The field value is the piece of data the user supplies to a field.

 

                Prompting text is a description of data, prompting the user to supply certain types of answers. whether the data is to be a selection from a list or data entered into a field..

 

Using Windows Controls

 

            A Windows Control is any object in a window or dialog box. EW creates windows controls. A command button is a control used to execute or reject a user action. The OK button is an example of a command button!!)

 

                A form control is any Windows control used to create a form. Examples of form controls are text areas, option buttons, check boxes and list boxes.

 

Once the table structure is correct, you should add the form controls.

 

FORM CONTROLS IN EW (16)

 

SEE TABLE, P 441

 

Note: radio buttons are the same as option buttons

Note: Drop down buttons are the same as list box

Creating a Form Element

 

1.     In design view, click the area where the form is to be inserted

2.     If there is no content on the page, click the Form button in the toolbox task pane

3.     If there is content on the page, select the content which will be part of the form. Wrap the rest of the content around the form.

4.     While composing a form, close the Apply styles, Manage Styles, ASP Net Controls and Tags panes

5.     form elements should be aligned horizontally and vertically

6.     Pressing the Shift+Enter keys aligns fields to the left

 

Creating a text field

 

            Text fields are used when there will be only one line of text in the box. The field can hold any character on the keyboard, not just alphabet... Text fields are used to collect data such as names, addresses and zip code.

To create a text field

1.     click the area where you wish to insert the text field

2.     In the toolbox task pane, click Input (text) button or click and drag it.

3.     To change the field dimensions, open the text box properties dialog box

4.     To change the text field to a password field, click the text field to open the text properties box and click the radio button for “yes”.

5.     A password field is one that generates asterisks, etc, rather than numbers or letters (for security). The number of entries is not limited to the width of the box.

 

Creating Radio Buttons

 

     A radio button form control is used to limit the user to a single choice of several. The group must have a name, and each button must have a different value so the form handler can assign

 

1.     click in the area where you want to insert the group

2.     Double-click the radio button in the toolbox task pane or click and drag it.

3.     To add more buttons, use the right arrow key and then Shift+Enter, then double click the radio key to insert the next button.

4.     To assign a name, double click the button to open the option button properties dialog box

5.     Enter a name in the group name field.

6.     Do not create more than five radio buttons per group.

 

Creating labels for buttons

 

1.     the  HTML label element provides text  for radio buttons

2.     If you wrap just the prompting text with label tags, you can only style only. If you wrap the prompting text and the position of input control together, you can style both and keep margins, etc, equal. P457

USING THE LABEL ELEMENT

 

The for element enables an impaired user to click close to rather than in the area of a button.

 

 

Creating Check Boxes.

 

A check box control allows the user to use none, one or more selections from a group.

 

1.     click the area where you want to insert the check box

2.     double click the input checkbox button in the  toolbox task pane

3.     to add more boxes, use the arrow key, then Shift+Enter to add boxes

4.     To assign a group name, double click the check box and enter a name and a value.

 

Creating a drop-down box

 

        When a list box displays only one choice at a time, it is called a drop-down box.

 

           1. Click the area where you want to insert the drop down box

            2. Double click the drop down box button in the toolbars task pane

             3. Assign a name and a value as needed

 

Designing a form

 

In general, use as many boxes as necessary to minimize typing errors and confusion on the part of the user.

 

Creating a text area

 

          A text area creates a space where the user can add multiple lines of text.

          1. Double click the text area button in the toolbox task pane.

           2. Drag to place the text area

            3. In the text area box properties, name the area

            4, optionally, specify the width, number of lines, etc.

 

Quick Check

 

What is a form?                                             An object used to gather, transmit or organize information

How does data differ from information           Data is the source of input. Information is the knowledge gained.

What is a form handler                                   A program, running on your server, with CGI script, to process data

What is a field                                                a single piece of data

What is a field value                                       the particular data the user submits to the field

What is a windows control                            any object in a   window or dialog box

Name two ways to insert a form control        double click or click and drag

 

 

WORKING WITH ADVANCED FORM CONTROLS

 

Inserting a file upload control

 

1.   click the area where you want to insert the file upload control

2.   double click the input file button in toolbox

3.   open the file upload properties box

4.   specify the name, width in characters for the box

 

CREATING A COMMAND BUTTON

 

           In design view, locate a place for the command button

            In the Toolbox task pane, double click the Input (submit) or the Input (reset)

            Open the push button properties dialog box, provide a label.

             Reset clears the form, submit submits the data

 

Creating an Advanced Button

 

The advanced button allows you to style the reset and submit buttons. The advanced button is a COMMAND BUTTON THAT CAN BE STYLED. It uses the HTML element <button>. In this element, you can enter text and specify a design

 

1.     click where you want to locate the advanced button

2.     double click the ADVANCED BUTTON button

3.     right click the button

4.     In Advanced properties dialog box and specify height and width, and type the text that will appear on the button.

 

SETTING THE TAB ORDER

 

    You can set an order in which the user answers questions, but it should be an order that makes sense to the user.

 

Organizing Form Controls

 

                  Use the <fieldset> element and the <legends> element to group items in a form. The fieldset element is used to draw a border around related groups. The legend element provides a caption.

          1.  Double click the group box button in the toolbox task pane

         2. Click in the group box to display sizing handles

        3. Double click any form control to add it to the box

        4. Open the group box dialog box

        5. Enter the caption (legend) or align the text right left or center.

 

Quick Check p.488

 

How do you change the text that appears on a Submit or Reset button             double-click button and type in new text

 

Why do some web pages not have a reset button                 some designers think people will not complete the form

 

How do you change the text on an advanced button             click inside the button? Delete text. Type new text

 

What control is used to attach a file                                         File upload

 

What element is used to place a border around forms             fieldset

 

What element is used to provide a caption for the border          legend?

 

 

Vocabulary

 

Action attribute

Advanced button

Alphanumeric data

CGI script

Check box

Command button

Common Gateway Interface

Data

Drop-down box

Field

Field name

Field value

Fieldset element

File upload control

Form

Form area

Form control

Form fields

Form handler

Information

Label element

Legend element

List box

Method attribute

Password field

Prompting text

Radio button

Text area

Text field

Value

Windows control

 

END OF CHAPTER 8 OUTLINE