Chapter 3. Table have many uses in a HTML design but are mostly used for the organization of your web site. Tables also give vertical and horizontal structure.

Chapter 3

• Table have many uses in a HTML design but are mostly used for the organization of your web site.

• Tables also give vertical and horizontal structure to a page through the use of rows and columns.

• Page layout is the process of arranging the images, text, and other elements inside your web page.

• This setting can use tables not only to help organize your web page, but to also increase the download speed of your web site

Designing a Web Page using Tables

• Table structure is an important part of designing a web page using a table.

• Table structure is separated into rows and columns. • Rows: Horizontal cells• Columns: Vertical cells• Rows and Columns form cells where information is stored. • Cell: a container created from the intersection of rows and

columns.• Cells provide neatness and structure to web pages as well

as a place to organize information.

Table Structure

• To add content to a table simply click on a cell and start typing.

• Cells can also hold images as well as text.• To insert a image into a table make sure that in

the insertion point of a image is in the table.

Adding Content to a Table

Adding a Border• There are two ways

to add a border to a table the first way is the table pop-up menu.

• The second way is to use the property inspector.

• Borders in a table are measured by pixel.

• Formatting tables can be a great tool when you want to add or delete information on your website.

• To delete a row or column simply click on the row or column and then hit the delete key.

• To add cells or columns select a cell first and then right click. The context menu should appear and allow you to add new rows and columns.

Formatting a Table

• You can also use the modify tab on the application bar.

• To merge cells, select the cells first and then go to the property menu an click merge cells.

• To split cells select the cells you wan to split then go to the split cells dialogue box. There you can select how many

Formatting a Table cont.

• Click on the image – the image Property Inspector should appear

• Enter a value into the border box (border is measured in pixels)

Add Borders to Images

Head Content Elements • Meta - contains information about the current

document• Used by servers, browsers and search engines• Invisible - shown in code • Keywords - list of words to type into a search

field • Description - a sentence or two that can be

used in a search engine's results page • Refresh - refresh tag is processed by the

browser to reload the page after a specified amount of time has elapsed

• Base - base tag sets the base URL to provide an absolute link and/or a link target that the browser can use to resolve link conflicts

• Link - the link element defines a relationship between the current document and another file

• To Insert: Click Insert > HTML > Head Content and then select the type of head data you would like to use

Create Head Content

• Forms enable the web page designer to provide visitors with dynamic information and to obtain and process information and feedback from the people viewing the web page

• To insert a Form click Forms on the Insert Bar and then click the Form button

Creating a Form

• Tables can add structure to your form and make it easier to add form objects

• To start, make sure you have clicked inside of the form

• To insert a Table, click Layout on the Insert Bar and then click the table button. From there you can adjust the specifications as discussed in Chapter 3

Inserting a Table into a Form

Step 1

Step 2

Chapter 4

Jim Langway and Noah Laplante-dube

Adding a Horizontal Rule

• To add a horizontal rule: - Click the insert tab- Scroll down to HTML- Choose Horizontal rule- Edit length, shading and

thickness of the horizontal rule in the properties menui

Creating a Form

• To create a form:• -Click on the insert bar• -Select the first object “Form”• -In the properties menu you can change the

action of the form as well as what the form will be used for. i.e.) What type of information the web site visitor enters

“Form”

Inserting a table into a form

• To insert a table into a form:• -first place a form into the page• -Click the insert tab and select

table• -Or select the layout bar and

choose the table featureHere you can change settings for the table altering rows, columns, border thickness, etc.

“Table”

Using Form Objects

• To use form objects:• -First select the form bar• -Form Objects are items you can place inside a form such as:• Text Field• Text Area• Check Box• Radio Button• List/Menu• Button

“Form bar”

Adding text fields and areas to a form• To add a text field or area

to a form:• -First select the form bar• -Scroll over to “Text Area”

or “Text Field” and select the one you wish to use

• -In the properties menu you can change settings of the text field and area such as:

• Max character value• Character width• Type (Single line, Multi Line

or Password)

“Text Field”“Textarea”

CHAPTER 4 Part 2

By Rousseau and Shepard

Add lists and menus to a form

• Click the List/Menu button on the forms tab

Add form buttons to a form

• Click the Form button on the forms tab

Apply behaviors to a form

• 1st click the window tab• 2nd click behaviors• 3rd click the plus symbol inside the behaviors

box• 4th click the validate form command

View and test a form

• 1st click F12 to preview in the browser• 2nd fill out the table properly and send email to

[email protected]