WEB DESIGN TABLES, PAGE LAYOUT AND FORMS

Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

Answers: People visiting can navigate throughout it Looks nice and easy to understand Refers to the way your page will display in the browser, which is one of the major challenges for any web designers

Table Great tool for designing a web page Very similar to the table feature in word processing programs (Microsoft Word) Allows you to enter (add) vertical or horizontal structure to a web page Can put anything in your page and have it display in a specific area

With a table you can: Lay out tabular data Create columns of text or navigation bars Delete, split, and merge rows and columns Modify table, row or cell properties to add color/alignment Copy and paste cells

Understanding and Planning Page Layout Process of arranging the text, images, and other elements on the page

Rules to live by when creating your page layout: Easy to navigate Easy to read Quick to download *web site does not load in 15 seconds visitors may lose interest *tables download quickly because they are in HTML code

Tables can be used anywhere: Homepage Menus Images Navigation bars

A typical web page is composed into three sections: Header-top; contains logos, images, or text that identifies web site Body-informational content; form of text, graphics, animations, video and audio Footer-provides hyperlinks for contact; information; navigational controls ex. Back to top What are the sections of HTML code?

Understanding Tables Table-consists of three basic components Row Column cell

Row Horizontal collection of cells Column Vertical collection of cells Cell Container created when the row/column intersect

Head content What section is the head content located? Meta Keywords Description Refresh Base Link

Meta Contains information about the current document. This information is used by servers, browsers, and search engines. HTML documents can have as many tags as needed, but each item uses a different set of tags.

Keywords List of words that someone would type into a search engine search field.

Description Contains a sentence or two that can be used in a search engine s results page

CREATING AND USING INTERACTIVE FORMS

Forms Interactive elements that provide a way for the Web site visitor to interact with the site

A form provides a method for: A user to give feedback Submit an order for merchandise or services Request information Etc Forms are created using HTML tags

Form processing Provides a popular way to collect data from a web site visitor Forms DO NOT process data They require a script to process the data for them

Script Is a text file that is executed within an application and usually is written in Perl, VBScript, JavaScript, etc. These are referred to as server-side scripts

Common Gateway Interface (CGI) Common way to process form data

How to process data: 1.When a browser collects data, the data is sent to a Hypertext Transfer Protocol (HTTP) server (gateway). 2.Server then starts a program which also is specified in the HTML form that can process the collected data 3.The Gateway can process the input however you choose 4.It may return customized HTML based on the user s input 5.Log the input to a file or the input to someone

Two types of HTTP methods are: 1.GET 2.POST

GET method Sends the data with a URL Not widely used Limitations: on the amount and format of the data that is transmitted to the application Information being sent is visible in the browser s address bar

POST method More efficient Sends data to the application as standard input with no limits Sends much more information Is not sent with the URL, so the data is not visible to the site visitor

Input Input-which collects data from check boxes, radio buttons, single- line text fields, form/image buttons, and passwords Select-used with lists and pop-up menu boxes Textarea-collects data from multiline text fields

Forms and Web Pages Form object-can be a text box, check box, radio button, list, menu, or other buttons

Text field A form object in which users enter a response Forms support three types of text fields Single-line Multiple-line Password

List/Menu List-provides a scroll bar with up and down arrows that lets a user scroll the list, whereas a menu contains a pop-up list Multiple selections can be made from a list, while users can select only one item from a menu

Jump menu Special type of pop-up menu that provides options that link to documents or files. You can create links to documents on your web site, links to documents on other web sites, links, links to graphics.

Validate Form Behavior verifies that the user has entered data into each designated field The form is checked when the user clicks the submit button If omissions or other errors occur, a Microsoft Internet Explorer dialog box is displayed