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
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
Cell padding
is the white space that surrounds the contents of the cell.
Cell spacing is
used to create distance between cells
A truncated row
is a shortened table that does not display all rows
Inserting an Excel Worksheet
a.
b. TO split cells
Creating a Table Caption-
Click anywhere
inside the table, Click table on the
menu bar
Using the “Caption Side” property
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
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.
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
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