1. Chapter 3

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

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

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

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

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

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

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

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

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

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

12. Chapter 4 Jim Langway and Noah Laplante- dube

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

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

15. 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 feature Here you can change settings for the table altering rows, columns, border thickness, etc. “Table”

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

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

18. CHAPTER 4 Part 2 By Rousseau and Shepard

19. Add lists and menus to a form Click the List/Menu button on the forms tab

20. Add form buttons to a form Click the Form button on the forms tab

21. Apply behaviors to a form 1 st click the window tab 2 nd click behaviors 3 rd click the plus symbol inside the behaviors box 4 th click the validate form command

22. View and test a form 1 st click F12 to preview in the browser 2 nd fill out the table properly and send email to jmullen@stjohnshigh.org