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