Chapter 3. Table have many uses in a HTML design but are mostly used for the organization of your...
-
Upload
ronald-long -
Category
Documents
-
view
219 -
download
1
Transcript of Chapter 3. Table have many uses in a HTML design but are mostly used for the organization of your...
• 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
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”
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