Create Constituency in Web Pages
Before attempting to construct a website, it is important to have a good conceptual understanding of what exactly a website is and how it is architected. By adhering to good architectural principals, you will save yourself much website development effort and ongoing maintenance work.
Using simple graphics, this tutorial explains how web pages can be partitioned into reusable page parts or page partitions in order to make the site aesthetically attractive, easier to navigate and less onerous to maintain. It discusses web page components such as images, graphics, buttons and web forms. The important topic of website navigation is also discussed.
When you visit a well designed website, you will notice and appreciate design consistencies that extend across all pages in the website. For example, the page titles will hopefully appear at or near the top of each page in a consistent color and font. A “home” button will appear in the top left hand corner. The highest level site menu options will appear below the title and a list of related pages will display on the left hand side.
If your website consists of only a few pages, it is not a big issue to apply consistency as new pages are added. In fact, many people just clone existing web pages and then make the required changes. The problem with this approach, however, is that when the need arises to make a change (e.g. add a new hyperlink to the menu), that change must then be replicated on multiple pages. Should inconsistencies inadvertently be introduced (e.g. fonts, colors, position), the site can appear unprofessional or confusing to the visitor. To avoid such problems, it is a good idea to construct your website using reusable web page parts or partitions as depicted in the following diagram:
Technically, the web page parts are actually themselves web pages that have been combined into a web page that one actually sees. When a change is made to one web page part, it appears in all web pages. Most major web authoring tools support this type of partitioning functionality.
Website Navigation refers to the use of navigation menus and hyperlinks to allow visitors to move from one web page to another. Although technically, it is possible to create a hyperlink to any page in or outside of a domain, it is important to adopt a standard, intuitive navigation approach that won’t leave visitors in a state of confusion.
Many web authoring tools provide easy-to-use graphical tools to define the layout of a website. The diagram below illustrates a simple website navigation diagram that is comprised of three main sections (i.e. parents). Normally, hyperlinks to a site’s main sections should appear at the top of each web page, just below the title.
In this particular example, two of the parents each have “child pages” that contain further details about those website sections. The two parent pages normally would include a navigation menu (in the page body) listing each of their child pages.
When viewing a child page, a menu in the left hand margin, should normally list each of the siblings (i.e. related pages). All pages in a website should include a “Home” button at the top left corner of each page. If visitors gets lost in the web, they can then return to the home page and begin drilling down again.
When a web authoring tool like Microsoft’s FrontPage 2003 is used to create a website, the navigation menus are automatically maintained as pages are added, deleted or moved from one location to another. This saves a great deal of maintenance effort and reduces the chances of “dead links” occurring.
A website should normally not have more than five or six main sections (i.e. parent pages). The depth of the website should not be greater than 5 levels deep. Non-standard links (e.g. shown with a dotted red line) should only be used on an exception basis.
When constructing a website, it is often a good idea to make use of one or more visual elements to help communicate your message. Many people respond better to graphics and images than they do to text. Web browsers and html code support a variety of web page elements. Examples of commonly used graphical elements are shown below:
| Element Name |
Example |
File Type |
| Graphic: |
 |
.gif |
| Picture: |
 |
.jpg |
| Line: |
|
.html tags |
| Table: |
|
.html tags |
| Interactive Button: |
 |
.jpg |
Normally, it is a good idea to create a directory solely for graphics (e.g. .gif, .jpg files). If the same graphic is used on multiple web pages, the browser will know to used the cached version of the graphic rather than downloading a fresh version from the server each time that graphic is needed by a page.
HTML Forms are electronic forms that are used to capture data from website visitors. These web forms are comprised of one or more data capture fields, field descriptions and buttons.
When a website visitor submits a form, the form content can be sent to a designated email address or the data can be stored in a file or database. Because the form is processed on the web server, the web server must be able to support the back-end processing requirements (i.e. logic to validate the data, store the data or email the form contents.
Courtesy of: create-website.org
Example of the different types of form field objects that can be added to a form are illustrated below:
| Form Field |
Example |
Usage |
| Text Box: |
|
- Used for single line entry
|
| Text Area: |
|
- Used for multiple entry lines
|
| File Upload: |
|
- Used to identify file for upload
|
| Check Box: |
smoker? drinker? |
|
| Option Button: |
yes no |
- Used to choose between options
|
| Group Box: |
Group box |
- Titled border around form fields
|
| Drop Down Box: |
single married separated divorced |
- Used to select from option list
|
| Form Buttons: |
|
- Buttons to submit and clear form
|
