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 <meta> 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 email 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, e-mail 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