|
Home > Developing > Web Pages
Developing: Web pages
Now that you have established the "look and feel" of the site, you need to build it. There are several methods to building a Web site, but the goal is to build optimal pages and we do that with the template method.
The template method uses a master file that provides the basic components of a page. Once this page is completed, you can use this template to create the remainder of the pages on your site.
See also:
Below is a basic listing of components that make up a template.
Header component
The header is one of the most important components of a Web page because it includes the identifying factors of your site and that particular section or page. The identifying factors are the Doc Type, title, meta information, JavaScript, and style sheet.
Here is a sample header and the identifying factors found in the code.
Doc Type
The doc type sits above the <head> tag and tells the server what
type of mark-up language is used and the language type the Web site is
displayed in. In this case, the mark-up language is "XHTML" and
the language is "English."
Title
The title tag is the first identifying component of your Web site.
Meta Information
The meta tags serve two purposes. They help searches pull relevant information and provide an archival bread trail to historians. There are a variety of meta tags and types that can be used. In this example, the Dublin Core type is used.
JavaScript
The JavaScript used here is a "framebuster" script. It automatically pops the Kansas.gov site out of a Web site that was using frames into a frameless browser window.
Style Sheet
The style sheet is a CSS (Cascading Style Sheets) file
that controls specified "presentation" aspects of the Web site with
element tags. Because of common compatibility issues between browsers, we have
made the "older browser" style sheet the default, so all elements
in the CSS are rendered. We have then imported the "current browser" CSS
that has advanced elements that are only viewed in supported browsers.
< top
Navigation component
The navigation component contains a search form and the navigational links. Below is a sample navigation image.
 Search form
Regardless of how small your Web site may be, a search engine is a beneficial
component to have. Many users will use the search engine to navigate through
the Web site with a specific keyword. Below is an example of the Kansas.gov
search form.
Navigational Links
This is your main navigation method and should be very clear
and accessible to the user. With the use of style sheets, you can provide
a more stylistic look that
previously could
only be accomplished through images and JavaScript.
Your site architecture should be very tight so navigation links are kept consistent and additions are at a minimum.
< top
Body component
The body component contains the "meat" of the content. You
should already have a good understanding of how your data
will be organized. Below is a sample image.
a. Bread crumb navigation
It is imperative to provide a visual path (AKA, "bread
crumb trail") to users so they have a relational guide as to where
they are and where they came from. It also helps the user learn the navigation
structure quicker.
b. Title
The title is the main focus of the site. It should be
stylistically
The content of the site should be written properly for the Web. Most
readers will scan content, looking for the relevant fac
constructed to be the first thing noticed and labeled properly so users quickly
understand
what the page is about.
c. Content paragraph
ts. It is important
to keep your paragraphs short and not overly populated with hyperlinks.
d. Lists and hyperlinks
Lists can be ordered (1,2,3...a,b,c...) or unordered (bulleted). Providing
content in a listing helps user's scan text and also this
is correct mark up to other devices such as screen readers and PDAs.
e. additional data
A content area that can hold any information you wish to highlight.
< top
Footer component
Below is a sample footer image that contains copyright
information, agency name and additional links to
policies, contact information. You can also include the last modified date.
< top
|
Kansas.gov: The Official Web site of the State of Kansas
