1 / 49

Website Content, Forms and Dynamic Web Pages

Website Content, Forms and Dynamic Web Pages. Electronic Portfolios. Portfolio: A collection of work that clearly illustrates effort, progress, knowledge, achievement and skills Traditionally takes the form of a file folder or three-ring binder. Electronic Portfolios. Electronic Portfolio:

rock
Télécharger la présentation

Website Content, Forms and Dynamic Web Pages

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. Website Content, Forms and Dynamic Web Pages

  2. Electronic Portfolios • Portfolio: • A collection of work that clearly illustrates effort, progress, knowledge, achievement and skills • Traditionally takes the form of a file folder or three-ring binder

  3. Electronic Portfolios • Electronic Portfolio: • Stores and presents portfolio content in a digital format such as a website

  4. Electronic Portfolios • Are preferred over traditional portfolios because they: • Are interactive • Can include video, sound and digital images • Are easy to access, distribute and share • Take up less space than a binder or stack of papers • Can be updated easily • Demonstrates technical knowledge

  5. Electronic Portfolios • Content and design varies depending on: • Purpose • Target audience • In general, the home page of an electronic portfolio website should include: • Introduction • Contact information • Appropriate links

  6. Electronic Portfolios • Additional content and design considerations include: • Resume information • Education, work experience, volunteer work, awards and athletic achievements • E-mail link • To allow reviewers to send comments, questions, or request additional information • Work samples • Which may be scanned images or links to files

  7. Website Categories • Most websites can be classified into general categories by the type of content: • Personal • Informational • Commercial

  8. Personal Web Sites • Convey the opinions, hobbies, knowledge or skills of an individual • The purpose and target audience varies depending on the focus of the content

  9. Personal Web Sites • May Include: • Information on a topic of interest • Compilation of likes and dislikes • Personal information

  10. Informational Web Sites • Created for the purpose of displaying factual information about a particular topic • Typically created by educational institutions, governments and organizations • Should be updated frequently to keep content accurate • Target audiences vary

  11. Informational Web Sites • Will have a variety of content to include: • A site map for easier navigation • A search form so that users can search the site for information • A list of links to websites that contain related information • Tables of tabular data • Banner ads or other advertising to help pay for site maintenance

  12. Commercial Web Sites • Include corporate presence websites and e-commerce websites

  13. Corporate Presence Websites • Present information about a company’s product or services • Do NOT have online ordering capabilities • Form of branding: • The technique of raising awareness about a company by making a company logo visible in many places • Successful branding means the user will recognize the logo at a later time

  14. Corporate Presence Websites • Corporate Presence Websites typically include: • Company history • List of products or services • FAQ page • Site map • Search capabilities • Description of employment opportunities • Feedback page • A promotion or contest to keep the users returning to the site

  15. Corporate Presence Websites • The purpose is to make users aware of the products and services offered by the company • The target audience varies greatly

  16. E-commerce Websites • Created by businesses for the purpose of selling their products or services to consumers online • Amazon.com is a well known e-commerce web site

  17. E-commerce Websites • E-commerce Websites typically include: • Products and service descriptions • Visuals of available products • Search capabilities • Site map • Contact and return information • A promotion or coupon to keep users returning to the site • Personalized user account information • A shopping cart

  18. FAQ Page • A web page that contains frequently asked questions and their answers • The intent is to answer commonly asked questions quickly without the user having to call or send an e-mail

  19. Importing Tabular Data • Tables are used for page layout and can also be used to display tabular data: • data that has been created in another application and saved in delimited text format, which can be a text (.txt) file • Tab-delimited data: • Indicates that each item in a row is separated by a tab character

  20. Importing Tabular Data • To import tabular data and create a table for the data click: • Insert (drop down menu)  Table objects  Import Tabular data • A dialog box is displayed with many options • A table will be created at the insertion point which includes data. • Cell contents can further be formatted just like any cells in a table

  21. Creating a Site Map • A web page that contains links to information on other pages of the website • The links are usually arranged in alphabetical order or grouped by subject • Helps users find the web page they are looking for if they cannot find the web page using the navigation bar • The links also provide an overview of the website’s contents

  22. Jump Menu • A navigation tool that contains a list of hyperlinks • To add a jump menu at the insertion point, click the Jump Menu button in the Forms category in the Insert Panel

  23. Creating a Form • A form allows users to communicate and interact with a web server • Forms are used extensively on websites for tasks such as surveys, polls, online ordering and guest books • The design of the form should be simple to use, easy to understand and as short as possible

  24. Creating a Form • The size of a form is determined by the form objects that are added • Form objects are used to obtain information from the user in a structured manner • Form object properties are set in the Property Inspector

  25. Form Objects • Single Line text field: • Allows users to type a short amount of text • Labels: • Describe the purpose of a form object • Check boxes and Radio buttons: • Allows users to select options • Multi Line text field: • Allows users to type one or more lines of text

  26. Form Objects • Buttons: • Used to send the form results to a file or e-mail address • Used to clear the form entries

  27. Creating a Form • Forms and form objects are created using buttons in the Forms category of the Insert panel • A form should be created in a table cell to control the form layout

  28. Creating a Form • To create a form: • Place the insertion point in a table cell • Click the Forms button in the Insert Panel • A form indicated by a dashed red outline is created and the insertion point is placed in the form

  29. Creating a Form • To add objects at the insertion point, click a button in the Forms category in the Insert panel. • The Input Tag Accessibility Attributes dialog box is displayed when a form object is added • Appropriate accessibility information should be added for all form objects

  30. Check Boxes and Radio Buttons • Check Box form object: • Allows users to select an option by clicking a check box • Radio Group form object: • Allows users to only select one radio button from each group • Should be added in groups

  31. Check Box form object • Click the Checkbox button in the Forms category of the Insert panel to add a check box form object • Properties include: • CheckBox name: form object name • Check value: indicates the value entered if the user selects the check box; can be a text or numeric value • Initial state: sets the check box to checked or unchecked when the form loads

  32. Radio Button form object • Click the Radio Group button in the Forms category of the Insert panel, which displays a dialog box • Type a name for the radio button group in the Name box

  33. Radio Button form object • The radio button group is created with at least two buttons, which are already listed in the Radio Buttons list and include labels and values • The Lay out using options indicate the way the radio buttons will be separated in the web page document • The Table value creates a one-column table with each radio button in a separate cell

  34. Scrolling Lists • Allows the user to select an option from a list of items by scrolling the list using a scroll bar • To add a scrolling list: • Click the List/Menu button in the Forms Category of the Insert panel

  35. Scrolling Lists • A scrolling list is created by selecting List in the Property Inspector • A name for the list should be typed in the List/Menu box • Click ListValues to display a dialog box which will allow you to add list items • Each item should have: • Item label: text that is displayed in the scrolling list • Value: data that is returned to the server

  36. Drop-Down Menu • Allows users to select an option from a list of items that appear when the user clicks the next to the list • To create a drop-down menu: • Add a List/Menu form object and select Menu from the Property Inspector • A name for the menu should be typed in the List/Menu box • Click ListValues to display a dialog box which will allow you to add menu items

  37. Drop-Down Menu • Each item should have: • Item Label: text that is displayed in the menu • Value: data that is returned to the server

  38. Scrolling List vs. Drop-Down Menu • A scrolling list differs from a drop-down menu: • Has scroll arrows • Can be enabled so that the user can select more than one option • The height can be set

  39. The Validate Form Action • Can be applied to a form to: • check the contents of a field for the correct type of data • See if a value falls within a specific range • This action is available on the Behavior’s Panel

  40. Pop-up Message • The Pop-up Message behavior can be used to communicate important messages to the user • A message is typed in a dialog box that will be displayed when the user performs a predetermined action

  41. Interactive Forms • A form represents the client side of a client-server relationship because it allows the user to interact with the server • When the user clicks the Submit button, the form information is sent to a server where a server-side script or application processes it • Once a form is processed, information is sent back to the user

  42. Interactive Forms • Forms can be processed by a: • Common Gateway Interface (CGI) script • ColdFusion page • JavaServer Page (JSP) • Active Server Page (ASP) • Or other applications

  43. Interactive Forms • The server-side script or application used to process the form is defined in the form’s Action property • Select a form to display from properties in the Property Inspector that allow the server-side script to be defined • Type a name for the form in the Form name box • A form should be named because it allows the form to be referenced using a script

  44. Interactive Forms • Simple forms can use JavaScript or VBScript to create client-side script: • Processes a form on the user’s computer instead of sending the information to a web server for processing • To create a client-side JavaScript function: • Select the Submit button in the form • Open the Behavior’s panel • Select the Call JavaScript behavior

  45. Dynamic Web Pages • Static web page: • Contains only text and images • Dynamic web page: • Contains any animation or is interactive • Dynamic content: • Content that changes as the source is updated

  46. Dynamic Web Pages • Dynamic website: • A website that contains dynamic content on any of the web pages • Also called a Web Application • Employs a server technology to process input from the user and then send a web page with dynamic content to the user’s browser • The information that is returned to the user is from a data source such as a database file

  47. Dynamic Web Pages • A data source: • An external file that is used to display dynamic data on a web page • Databases are the most common way for websites to access dynamic content or data • Access: • A Microsoft Office database application • An example of a file-based data source

  48. Dynamic Web Pages • Database: • A collection of related information organized into tables • Consists of a series of related records • Within the records, each piece of data is called a field • Flat-file database: • A series of records with the same fields

  49. Dynamic Web Pages • In order to extract data from a data source into a web page: • The data wanted must be specified • Recordset: • Specified data • The Data category in the Insert panel is used to create and filter recordsets.

More Related