Website Content, Forms and Dynamic Web Pages

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.