Web Application Templates

The templates provided here are HTML/CSS templates that can be used to create task based web sites or applications. You can mix and match main components to create a site that meets your users needs. If you feel you want to significantly add, remove, or alter  elements within the templates, or if you would like assistance in putting together your site, please contact  Vincent Scordo.

Click on the links below to access individual templates and additional information on how to apply them.

Table Display Only
Detailed Display
Search for Items/ Table Display Allowing Edit
Select Specific Item/ Edit Item
Simple Search
Advanced Search
Calendar
Search Results
Input Form

Download All Templates

Table Display Only

 Purpose: Use this component to display a list of items for viewing only

  1. Drop down boxes: use to allow users to filter items displayed. The items in the second drop down box may or may not depend on the users selection from the first box.

  2. Table headings: Use to allow users to click on a heading link to re-sort items according to values under that heading (as in Windows Explorer). Links with this functionality have blue underlined text, and non-links appear black text.

  3. Table items: The name of each table item can link to a detailed view of that item.

  4. Navigational feedback: This text gives users important feedback on which page they are viewing.

  5. Navigation: Use to help users navigate through many pages. For listings that have very few pages, "Previous" and "Next" buttons may be used instead.

Download Template

Detailed Display

 Purpose: Use this component to display a detailed view of one item.

 

  1. Drop down boxes: Use when you have a number of different views available for a specific item. For example, if you had several different detail screens for a particular car, drop downs could be used to navigate to other detailed views on the same car.

    Note: The drop down boxes should not be used to navigate to views of other items - this should be done using the Previous and Next buttons at the bottom of the page, or by clicking Back to Main.

  2. Navigational feedback: This text gives user important feedback on which page they are viewing.

  3. General and other information: Under General, include the headings and information displayed for the items main table listing. After the general section, display other information in small manageable chunks under headings that make sense for your data.

  4. Back to Main: Takes the user back to the main listing or screen.

  5. Previous and Next: Take the user to the previous or next entries on the main listing without having to go back to the main screen.

Download Template

Search for Items / Table Display Allowing Edit

 Purpose: Use the search to allow users to search for items within a listing, especially when they may have limited knowledge of the item that they are looking for. Use the table to display items and allow users to add items, view detailed information, change items or delete items.

Before you get started, it is good to know the difference between global and local functions:

 GLOBAL FUNCTIONS appear outside of the table listing and can be performed on more than one item at once using the checkboxes; for example, Add and Delete.

 LOCAL FUNCTIONS appear within the table listing and relate to specific items in the listing. The local functions appear next to the item that they specifically relate to; for example, Edit and View.

.

  1. Selection box: Users input as much information as they can about the entry they are looking for, and press “Go.” Thereafter, all entries that match data entered appear below.

  2. List All: Lists all items

  3. Add: Global function that adds new items to the list (see Edit Item template below for adding items)

  4. Delete: Global function that deletes all checked items after confirming with user via a pop up.

  5. Check boxes: Allow users to select items in order to apply global functions. Users can select individually or check the box in the header to select all items.

  6.    View: Local function that takes users to a detailed view of each item (see Detailed View template above). This has the same functionality as clicking on each items entry name.

  7.    Edit: Local function that allows users to edit item (see Edit Item template below)

  8. Function buttons: Additional function buttons can be added here, or just above the table. Please contact  Vincent Scordo for recommendations on button creation and placement.

Download Template

Select a Specific Item / Edit Item

 Purpose:  Use the Select box  to allow users to select one item from a database using a value specific to that item; for example, an ID# or Name. Use the Edit area to allow the user to create, display, and/or edit a single item.

  1. Select box: Allows users to indicate the type of value they would like to select by, such as by name or employee ID. Users then type a value into the text box, and press Select. The corresponding item appears below. If it is possible that more than one item is returned ( for example, with a persons name), include a selection procedure for this. A good example would be the Lotus notes pop-up that appears during a name search and allows you to select from a list of names.

  2. Add: Allows users to add a new entry.

  3. Delete: Allows users to delete current entry.

  4. Tabbed Edit  box: Allows users to edit item values. The tabs along the top allow item information to be separated into categories. Each tabbed view can be separated into sections using lined boxes.

  5. Previous and Next: Allow users to navigate through individual items

  6. Reset: Cancels any changes that users have made to the item. Either resets to the most recently saved values or resets to a blank template for new items.

  7. Save: Saves changes that users have made to the item. The save action can save all tabs or only the current tab.

  8. Done: Saves any changes to the current item and takes users back to the page they were on previously.

Download Template

Simple Search

• Purpose: Use this component for a simple search

The search involves a single input box for text, a drop down for users to define the scope of the search and a drop down to define how results are presented.  See the search tab on the employee portal for a live example of a simple search.

Download Template

Advanced Search

 Purpose: Use this component for an advanced search.

The advanced search . See the search tab on the employee portal for a live example of an advanced search.

  1. Input box: Collects users search value

  2. Choose drop down: Allows users to indicate which part of each document to search. For example, search by title, body, or author.

  3. Look In drop down: Allows users to indicate what area  they would like to search in; for example, which department in the company.

  4. Date Range: Allows users to indicate what date range they would like. Clicking on the calendar icons on the right will bring up a date selection pop-up ( see below).

  5. File Format drop down: Allows users to select a single file format for results. For example, only PDF, Word, or Excel documents.

  6. Sort by drop down: Allows users to select different ordering of results. The usual values here are order by Date, or order by Relevance.

  7. Num Results drop down: Allows users to indicate the number of results that they would like to appear per page.
Download Template

 

Calendar

Purpose: Use this component to allow users to easily select a single date.

 

  1. Selection: Users select a date by clicking on a number within the calendar.

  2. Controls: The "<<" and " >>" symbols are used to scroll through which year is selected. The "<" and ">" symbols are used to scroll through which month is selected.

Download Template

Search Results

 Purpose: Use this component to display any kind of search results

  1. Search box: Display the search box, including the users search value.

  2. Result: Each search result item includes a title, a short description (100 words of text from page or document), date posted and the size of the document.

  3. Document type icon: Displays an icon representing what type of document each search result is.

Download Template

Input Form

 Purpose: Use this component to allow users to input information

The form is split up into boxed components. Short forms can appear on one page, while longer forms should be presented on multiple pages connected by continue/submit buttons.

  1. Address: This is an example of basic input boxes. Use this for user input of address information.

  2. List drop down: Allows users to select one or more items from a list. Especially useful when you have a limited amount of space to display choices.

  3. Radio buttons: Allow users to select one (and only one) item out of a number of choices. If you have more than 4 or 5 choices, use a drop down box.

  4. Drop down box: Allows users to select one item from a number of choices. Drop downs are useful when you  have limited space on your form.

  5. Check boxes: Allow users to select multiple choices from a list.

  6. Text block: Allows users to input larger amounts of text.

  7. Continue button: Use a Continue button to the right of the screen when the user needs to navigate through several pages of the same form.

  8. Submit Button: Use a Submit button to the left of the screen when the user has finished filling in a form and needs to submit it.

Download Template 

 



© Mercedes-Benz, 2003