1 / 31

Tables, Page Layout and Forms

Tables, Page Layout and Forms. WEB DESIGN. 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

colby
Download Presentation

Tables, Page Layout and Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tables, Page Layout and Forms WEB DESIGN

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

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

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

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

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

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

  8. Tables can be used anywhere: • Homepage • Menus • Images • Navigation bars

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

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

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

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

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

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

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

  16. Creating and Using Interactive Forms

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

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

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

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

  21. Common Gateway Interface (CGI) • Common way to process form data

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

  23. Two types of HTTP methods are: • GET • POST

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

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

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

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

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

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

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

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

More Related