Creating Web Pages
A school's Web site creates a first impression. It represents the school district and presents a huge opportunity to provide information and interact with the public.
Navigability - If you want people to
hang out at your websites, one of the most important features you could add is
easy navigation. There is no faster way on Earth to drive away viewers than to
frustrate them by hiding what they are looking for.
- Don't confuse your viewers by radically changing your design from page to page.
Consistency of design lets the user get familiar with the features of your site
and "burns" the look of your site into their minds. There is a lot to
be said for "branding".
Speed - Since broadband
is becoming more prevalent you might think that download size is not really a
concern anymore. Not true ... yet. With about 80% of all users still using a 56K
or slower connection, download speed is still a very real concern. Keep your graphics
optimized and don't go overboard with your imagery. File size is still important.
Lots of people, organizations, and companies publish to the Web. At first, only a few individuals had that knowledge necessary to publish Web pages. Now almost anyone can publish on the Web because the technology is not too formidable. Basically, anyone with a computer, an Internet connection, and something to say can have a Web site. On the World Wide Web, there are corporate image sites, small businesses, government agencies, universities, schools, political organizations, charities, clubs, special interest groups, and thousands of individuals. Some individuals sites are devoted to hobbies, special interests, family albums, and personal newsletters.
Creating Web pages is the easy part. What you really need in order to publish on the Web is access to a Web server. Many service providers offer Web site hosting as part of the package of services they include with basic Internet access accounts. An alternative to publishing on the Web is to publish on an intranet. It uses the same technology as the World Wide Web, it is just available to a different audience. Intranets are available only to those connected to the same local area network. The same tools, Composer and Navigator, are used to create and view HTML documents on an intranet that you use to create an view Web pages on the Internet.
First, set a goal. A Web site should have a purpose, a mission, and a reason for existence. This goal should be the guiding principal as a site is designed. Everything about the site should support the goal. It is often helpful to write out a sentence or two articulating the purpose of the Web site. The purpose of having a written goal for the Web site is to help keep the work focused. As the Web site is developed, looking at the goal from time to time is a good idea. If some aspect of the site doesnt match up to the stated goal, then something needs to changeeither the content or the goal. After the goal is decided, selecting and developing content can begin. Text can be written, graphics can be found or drawn, and other sites to link to can be located.
Second, define the audience. Who will be viewing the Web site needs to be determined. The viewers background and previous experience, their interests, their tastes, and why thy might be visiting the site all need to be considered. Part of the goal is to reach the target audience as effectively as possible. All Web site design decisions should be based on the needs and wants of the viewers who have been determined to be the target audience. The keys to successfully communicating with the audience is to first identify the audience, and then to anticipate that audiences reaction to the various elements of the Web site design. The Web site can then be tailored to the intended audience, from the way the information is organized to the kind and number of images to the colors and fonts used.
Next, organize the information. The best way to start developing content for the Web site is to organize the things you have and know aboutexisting documents and images, samples of publications in other media, information on Web sites you admire, samples of Web sites you hate (and why you hate them), clip art collections and information on sources of Web art, media, and special effects.
sure you have the legal right to use any material you plan to include in your
Web site. For more information on copyright law, visit the law page published
by Cornell University at: http://topics.law.cornell.edu/wex/Copyrightl.
For more about copyright, visit my page on this site: Copyright Laws
Then, create a storyboard. With the materials and information you want to work with, sit down and plot the site out. A storyboard is a sketch of the home page and each page it will link to. Include all the elements being consideredtext, images, buttons, and hyperlinks. As you plan the Web site, you need to work on two different levels. First, you need to plan the flow of the information and the appearance of the page.
Second, you need to design a map of the site as whole so you can visualize how all the pages relate to each other and how they work together to create a whole site. Remember that users dont expect to read an entire Web site. They want to jump quickly to an item that interest them and then move on to something else.
site navigation easy for viewers. Users need to be able to move around a Web site
quickly and easily to locate and access information. The most important factor
in making your Web site easy to navigate is organization. Designing a well-organized
site allows you to present information in such a way that it is easy for viewers
to see and understand where things are located and how to find what they need.
Thats one of the reasons why storyboarding is so important. Besides good
organization, for ease of use, incorporate navigation aids that provide easy one-click
access to key locations and sections of your Web site. You can use text links,
buttons, graphic icons, or image maps (clickable images) to identify and link
to important destinations, such as the home page, next page, or starting points
for key topics. It is essential to make the navigational elements obvious, simple
to use, consistent throughout the site, and to place them where they are readily
available to help viewers find their way around the site. Users need to be able
to move around a Web site quickly and easily to locate and access information.
The most important factor in making your Web site easy to navigate is organization.
Designing a well-organized site allows you to present information in such a way
that it is easy for viewers to see and understand where things are located and
how to find what they need. Thats one of the reasons why storyboarding is
so important. Besides good organization, for ease of use, incorporate navigation
aids that provide easy one-click access to key locations and sections of your
Web site. You can use text links, buttons, graphic icons, or image maps (clickable
images) to identify and link to important destinations, such as the home page,
next page, or starting points for key topics. It is essential to make the navigational
elements obvious, simple to use, consistent throughout the site, and to place
them where they are readily available to help viewers find their way around the
A Browser-Friendly Site
Different brands and versions of Web browsers have different capabilities. Older versions of browsers may not be able to view all of the latest changes in Web design.
Another factor to consider when designing a site is the size of the files that make up your Web pages. HTML files are generally quite small, even when they contain large quantities of text. Images and multimedia files can be very large. The biggest problem with large files is the time it takes for the page to appear in the visitors Web browser window. Some studies suggest that a Web surfer will wait only about 12 seconds for a page to download. This may be a little short but a page should certainly download in less than 30 seconds so viewers will stay at your site.
Maintain Your Web Site
A good Web site needs to be updated on a regular basis. As a result, you cant consider your job finished when you complete the process of planning, producing, and posting a Web site. You must devote time to the continued care of your Web site. From time to time, you need to add new information and cut out outdated material, particularly broken hyperlinks. A Web site is an ongoing commitment that can be a very rewarding experience.
Using composer to create or edit Web pages and other HTML documents is like using a word processor. You work in a WYSIWYG (What You See Is What You Get) environment that provides a reasonable approximation of what your page will look like when viewed in a browser. In Composer, you type your text on a screen that looks and acts like most word processing programs. You can select text and format it using menu commands and familiar toolbar buttons.
As you create a page in Composer, you are actually building a text file that contains, in addition to any text on your page, HTML markup codes for text formatting, layout, graphics, and hypertext links. You dont need to know the code however. Not HTML codes appear in Composers normal view of your page, and you enter your formatting choices by choosing menu commands, clicking toolbar buttons, and setting options in dialog boxes, instead of by typing markup codes.
Giving the Page a Title
One detail of Web page design youll want to think about is what title to choose for your Web page. This will be the name of the Web page and will appear in the browsers title bar when you view the page. The title also shows up as the name of your page when a reader creates a bookmark or shortcut to the page.
Choosing Background Colors
The box design with
bold black outlines is a great vehicle for keeping information clear, readable,
and consistent. The structure provided by the bold lines creates a strong
site, and the black lines play well against the bold colors.
Use of Color in Background Design
The default colors for a Web page are black text on a white or light gray background. Color on your Web page can make the page more interesting, but color must be used very carefully. The right combination of colors can make the page appealing and easy-to-read. The wrong combination of colors can produce a page that is unattractive and illegible. Colors also have a strong emotional and psychological effect that must be considered. In general warm tonesred, orange, yellowseem to advance toward the viewer. They tend to convey excitement and energy. Cool colorsblues and greensseem to recede away from the viewer. They tend to evoke feelings of tranquillity. The number and kind of colors you choose for you Web pages can influence a visitors perception of you site even before they read a single word. You can set a quiet, conservative tone by sticking with basic black and white and adding a few accents of navy blue or hunter green. You can create a feeling of festive excitement with the liberal use of bright, high intensity colors, especially reds and yellows.
One of the best ways to learn how to use color is to observe how other designers have used color. Studying magazines, brochures, annual reports, TV, and other Web pages to look at the colors used and how they affect your perception of the publication.
Your choice of color also determines the legibility of the text on your Web page. It is critical that your page be easy to read.
Along with the background color, you can also specify default colors for text. This is a way to develop a color scheme for your page. You can specify colors for regular text, hyperlink text, active hyperlinks (ones that have already been clicked), and visited hyperlinks (hyperlinks that have already been activated).
After you develop an acceptable color scheme, you can make it the default for all new pages you create with Composer by checking the Save These Settings For New Pages checkbox. Click OK to close the
For more about color, visit my page on this site: Create Accessible Web Sites
After you enter some text, you many want to designate some of that text as headings. Headings are usually (but not always) larger and bolder than the body text of your page.
Formatting details such as bold, italic, and underline, which change the appearance of text and differentiate certain text from the rest, are known as attributes in a word processor. The types of attributes you can specify using HTML are broken down into two classes: Physical attributes and Logical attributes.
The physical attributes specify how text characters will look: italic or bold, for instance. They will be italic or bold no matter which Web browser is used for viewing. The logical attributes specify the amount of emphasis you want to give important text and leave it up to the Web browser software to determine what physical attributes to use to make the text stand out from the normal body text. You can choose to make text big, small, emphasized, or strongly emphasized. Different Web browsers will have different ways of displaying logical attributes. Some may show strongly emphasized text as bold, others may show it as red or in a slightly larger size, for instance.
Unfortunately, when a visitor to your Web site views your page, their Web browser displays the page using the fonts installed on the viewers system. That means the visitor will see the text of your page in the font you specified only if they have the same font installed on their system. If you use a font on your Web page that the visitor doesnt have, the text you formatted will appear in a default font. If you want to be confident that the font you choose for some text and the font the viewer sees will be the same, you must choose one of the standard fonts that are found in some form on nearly every computer: Times Roman, Courier, Ariel or Helvetica.
A group of companies headed by Microsoft have proposed establishing a list of core fonts and encourage all Web users to install these fonts on their systems for displaying Web pages. Microsoft makes a selection of TrueType fonts available on its Web site for free downloading at: http://www.microsoft.com/truetype/
You can set the font size for your Web page. HTML documents traditionally have supported seven different font sizes. A user defines a default text size for their Web browser, then the browser displays text in the default size and in six other sizes, two smaller and four larger, based on variations of the default size. These are called relative font sizes.
The initial cap effect is one good example of a way to use font size adjustments in your Web page. You can select the first letter of a word, then select a larger size from the Font Size drop-down list in the format toolbar. You might even repeat the process on each word of a title. The title below has a larger font size and bold on the first letter of each word:
Changing the font color is another way to change the appearance of the text on your page. Like the text attributes and font size settings, you can apply a color to a single character, a word, a line of text, or an entire paragraph.
Alignment of Text
When you enter paragraphs of text, they will show up as left-justified like most often seen in print. However, you can change the alignment of a paragraph to make it either centered or right-justified instead of left-justified.
Bulleted lists, sometimes called unnumbered or unordered lists, are the most often used type of list. In a bulleted list, each paragraph is indented and preceded by a bullet or another symbol:
Creating a numbered list, sometimes called an ordered list, is basically the same as a bulleted list, but with numbers in place of the bullets. Actually, the number can be a numeral, a letter, or a Roman numeral.
The standard numbering style for numbered lists is numbers such as 1, 2, and 3. If you prefer, you can specify another numbering style such as letters or Roman numerals. You can also define a starting point for the numbering scheme. This is useful when a numbered list is interrupted by other text. You can create one list, add some normal text, and then create another list that picks up where the first list left off so that the numbering continues instead of staring over.
A description list in a Web document is a special element designed to make it easy to format related items like terms and definitions. In fact, description lists are sometimes called glossary lists because glossaries are the most common application of description lists.
A description list consists of two components: a description title paragraph style (commonly used for a glossary term) and a description text paragraph style (commonly used for glossary definitions). Basically, the description list paragraph styles are just slight variations on the normal text style. The difference between the two paragraph styles is that the Description Title style is not indented and the first line of the Description Text style is indented one step. You can use the description list styles to create a glossary or other, similar list, or you can simply use the styles to create paragraphs of text with and without indents.
Working with (Un)Formatted Paragraphs
Typically, the text on a Web page appears in a proportional or variable-width font such as Times New Roman. Also, Web browsers follow certain rules such as ignoring multiple spaces and automatically wrapping long lines of text to fit in the browser window. The combination of these features enables Web browsers to display text in a way that is attractive and easy to read, despite significant differences in the size of the browser window and the characteristics of different users computer systems.
Generally, this is a good thing. However, the developers of the HTML standard envisioned some circumstances in which users might miss the formatting capabilities of a plain text document using a fixed-width font. For example, you might want to simulate the appearance of a text-mode computer screen or create a crude table by using multiple spaces to separate lines of text into columns. The Formatted (sometimes called Preformatted) paragraph style addresses this need.
You must always investigate the copyright status of any ClipArt you use for a commercial purpose and only use it LEGALLY. Making a sales presentation is definitely commercial use.
The images on your Web page can be anything. You can use charts, graphs, and diagrams to illustrate a point. You can use logos and graphic symbols to establish a visual identity for your page. You can use scanned photos and drawings to set a mood or show details. Background images can provide a backdrop as subtle as fine silk or rich as polished marble.
Most images that are part of a Web page are called inline images. These images typically appear over, under, or beside the text on a Web page. Each image is stored in a separate file. Normally, the images used on Web pages will be in one of two file formats GIF or JPEG designed to store graphic information in an efficient, compressed form.
You cant position an image at just any random location on the page it must be positioned in reference to some surrounding text. The image tag can be imbedded in the middle of a paragraph of text, placed at the beginning or end of a paragraph, or, ore often, placed in a paragraph of its own. The image tag anchors the image in the text. As the text flows from the top of the page to the bottom, the image will appear in its place within the text moving with the text as it wraps to fit the browser window.
Dealing with Image File Formats
There are many different file formats in use for recording graphics data. It seems like every major graphics program has its own file format. Then there's an assortment of different standard formats used by scanner software, clip art collections, and the like. Dealing with the alphabet soup of file name extensions and abbreviations for file format names is a constant source of confusion and frustration for graphics professionals who must work with multiple file formats.
Fortunately, the World Wide Web community has settled on a short list of file formats that are the supported de fact standards for images.
Creating Textures with Background Images
The HTML standard makes special provisions for using an image to create a background for your Web page. The background image appears in the background with the text and inline images appearing in the foreground.
You can use any GIF or JPEG graphic file as your background image. For example, many companies like to use dimmed versions of their logos as background graphics kind of like a watermark in expensive stationery. Another popular technique is to use a background image to simulate a texture such as paper, wood, stone, feather, or fabric.
You might expect that an image large enough to fill the entire background of a Web page would require a very large image file (and you would be right). When creating your background, consider your audiences attention span because an image large enough to fill even a moderately sized browser window would probably require more time to download than most viewers are willing to invest to view your page. Another problem to be aware of is how big to make the background image because theres no way to predict the exact size of the viewers browser window.
What makes background images practical is that the browser tiles the image you specify as a background to fill up the entire window. That is, it will repeat the image in its original size until it covers the pages viewing area. As a result, you can specify a small, compact image file that will download quickly, even over a dial-up connection. The background image gets downloaded only once. The browser automatically displays as many multiple copies of the background image as needed to fill the background of the page without using the download time or memory resources required by a larger image.
Since the background image is tiled, only a small sample (less than an inch square) is required to create a texture such as paper, cloth, or stone. Textures such as wood grains and veined marble need slightly larger images to create attractive backgrounds. An image of a logo is likely to be even larger, but its still much smaller than a single page-sized image.
Images can be an incredibly powerful and versatile Web page design tool. You can achieve a tremendous range of effects with images largely because an image in a Web page can be virtually anything. An image can contain a photograph, drawing, diagram, chart, graph, illustration, logo, symbol, or even text in a special typeface color or arrangement that would be difficult to reproduce with HTML commands.
In addition to all the things you can do with regular images, there are a few special effects that can add even more pizzazz to your Web page. Some effects are subtle and others can be quite dramatic. What all the special effects have in common is that they are built into the image file when it is created. The Web browser may need the capability to recognize and display the special effect properly.
Getting Linked Up
Its the Hypertext links that are the defining characteristic of the World Wide Web. Hypertext links enable you to build relationships between Web pages. You can create links from a location in one Web page to different parts of the same Web page, to other files on your Web site, or to other files on the Internet or an intranet. When a visitor to your Web site views a Web page and clicks a hyperlink, they are transported to another Web address for supplemental information, a continuation of the same topic, or anything else you choose to link to.
A minor but important part of designing for the Web is ensuring that as you link pages, you display images at consistent heights. When a user clicks through a site, the layout should remain in exactly the same position, as pages in a book remain within the same template. As the bandwidth on the Web increases, the pages of a Web sites will turn as easily as the pages in a book. Keeping the edges aligned within a template structure will create a clean and professional design.
The appearance of a hyperlink when it shows up in a Web browser window will differ depending on the browser being used, but usually it will appear as underlined text in a special color. However, theres much more to a hyperlink than an underline and a distinctive color. When you click the hyperlink, the browser loads the Web page with which the hyperlink is associated (the other end of the link, if you will) and displays it onscreen.
Creating Hyperlinks to Other Files
The most common hyperlink is probably one that links a word or phrase of text to another Web page either a Web page stored in another file on your Web site or a file located elsewhere on the Internet.
Creating Hyperlinks within a Web Page
In addition to hyperlinks to other Web pages, you can create hyperlinks to locations within the same Web page. You can use this kind of hyperlink to cross-reference two bits of text, or you can create a table of contents for a long Web page document by adding at the top of the page a list of headings that are each linked to the corresponding portion of the document.
Truth About Web Design Or "How to Build a Web Page in 25 Steps"
This site began in March
1998 and was created by Janet Luch.
This page was last updated on
October 16, 2011