How to Design, Implement, and Manage Your Own Website

Prepared for:Metropolitan State UniversityWriting 271

Prepared By:Tom Brice

Joseph SissonDavid Bluhm

Jason BleisteinGregory Kariuki

Jim Pierson

Table of Contents

Topic Page #

Website Introduction 02

Getting started 02

HTML Editors 02

Downloading an HTML Editor 03

Strategy 03

Storyboarding 04

Flowcharting 05

Navigation Approaches 05

Site Structure 06

Graphics 07

Web graphic file formats 08

Resolution and dimensions 09

GIF and JPEG 09

Cascading style sheets 09

Choosing a Website Host 10

Uploading 11

Add on features 12

Site Management 13

Additional Resources 15

References 16

Website Introduction

This report is intended to provide those with basic computer skills with a fundamental or beginner level of understanding of how to design, implement, and manage their own Website. For further information and leads, which are not included in the scope of this report, the Web is perhaps the best source.

In view of the above, this report discusses topic areas and associated aspects of HTML editors, storyboards for design, Website hosting considerations, Webpage font, graphics, navigation, uploading methods, cascading style sheets, flash, add on features, and Website management.

Getting started

Here is a basic list of what you need.

An idea for a WebsiteAccess to a computer that is connected to the Internet An HTML Editor (Webpage construction tool)A place to publish your site (a host service)

It is a good idea to create an email account specifically for correspondence pertaining to your Website. Registration for free Website hosting and software can cause your email to become filled with other, unsolicited correspondences. By using a dedicated email address for the business of the Website, you may be able to protect you primary email address from this “spam”. Many email services such as Yahoo and Hotmail provide email addresses free of charge. Advertising supports these services. Remember that the free Web hosting and software that you received is actually in return for advertising targeted to you and the audience of your Website. In addition, the providers of this hosting and software may sell your email address to a mass email advertiser. This results in the “spam” mentioned above.

About HTML

HTML is an abbreviation for Hyper Text Markup Language.

Hypertext is what enables Web pages to contain links, or elements, which when clicked on, take you to other Web pages, sites, or parts of a single Web page. Even though the term implies text is used, a graphic may also be used as the link.

HTML is not a programming language, per se, because Web pages are not programs. The definition of language in the context of HTML defines the syntax of how to format a Web document and is not related to a computer language in the context of a program. It is simply a way to tell a web browser how to display text and graphics in a window.

With the multitude of free WSIWYG (Acronym for “What you see is what you get”) HTML Editors available today, it is no longer an absolute requirement to learn much, if any, HTML code. However, HTML is very easy to learn. A basic understanding of HTML affords you a greater degree of control regarding modification of your Website, as well as a better understanding of your site context and consequently your ability to find and fix bugs (small, nagging problems). To begin learning HTML you can purchase a book or simply follow instructions from a Website. There are thousands of Websites that offer HTML tutorials, tips, and tricks. These Web sites, like anything else on the Web, can be found via a common search engine, like Google (http://www.Google.com/) by typing in a related word or phrase such as "Learn HTML". A few good places to start are:

http://www.webmonkey.com

http://htmlgoodies.com/primers/basics.html

Downloading an HTML Editor

There are hundreds of free HTML editors available for download by simply typing in HTML Editor in Google. Any editor available is more than sufficient to create a basic Website. For more features, you can purchase a more advanced HTML Editor such as Microsoft FrontPage 2002 or Macromedia Dreamweaver MX. A few examples of free editors available on the web are:

http://www.evrsoft.com

1st Page 2000

http://www.amiasoft.com/siteaid

SiteAid

In addition, you may want to investigate “editorless editors” which are useful for creating simple Web pages very quickly:

http://www.bloki.com

Bloki

http://www.jspwiki.org/

JSPWiki

After downloading an HTML editor, you will have to install it on your hard drive for operation. The operation of a basic editor is relatively simple and step-by-step help is usually incorporated in the package. The HTML Editor will typically offer a design and edit mode of operation and save files in HTML or HTM format by default. As mentioned before, for control and small problem fixes, it is a good idea that you develop at least a basic understanding of HTML.

Strategy

The first step in strategizing any Website is defining your goals. You can best do this by answering a few practical questions:

Who is the target audience?What does the site need to communicate?What is the scope of the site?What other sites are similar in scope and intent?

The target audience in your first Website could be for your friends or family or simply the public at large. Perhaps after some practice and trial and error you will further define a more formal or professional audience.

Your communication goal could be simply to keep in touch with family and friends. Alternatively, you may want to sell something or promote a nonprofit organization or cause.

Defining your site scope is very important. This step has more to do with services offered than visual design. For example, do you want to educate, create interaction, entertain, distribute information, collect information, or support commerce? By defining your scope in this manner, you will be better able to plan and estimate the cost in terms of money and time your site will require.

It is a good idea to review a few other sites that are similar to yours in scope, before embarking on your own. In terms of design inspiration, do not limit your research only to the Internet. A favorite magazine or television show may provide you with excellent ideas on how to make a visual impact.

Storyboarding

After establishing your goals, the scope, and the audience of your site, it is advisable to create some storyboards to facilitate producing ideas. The term storyboard used here is derived from the film industry. A storyboard can be some simple scribbling on a napkin for yourself or an exact colored depiction for presentation to a client. For our purposes, a simple piece of paper will work well.

A storyboard helps you to distribute various graphics and text on your Web pages in a manner that best facilitates navigation, as well as presentation considerations such as graphic display and text readability issues. You can printout an empty browser image so that your storyboard perimeter is relative to that of an actual browser. In addition, extravagant colored storyboards can be created in powerful photo applications such as Photoshop. The basic idea is to sketch a simple layout for your various pages in your site. For example, you might want to include your home page, about page, link page, photo page, and feedback page.

An example of a simple storyboard is shown below.

Flowcharting

The concept of flowcharting depicts a visual representation, or chart, showing the flow of a site. The idea is to design around the navigational flow of your Website, which may change over time as you progress in your site construction. For example, you may design your site to have all pages linked to one root index or home page, linked to each other, or linked in some other combination. Designing site flow is in some ways similar to designing subject flow in a paper. For example, you may design for topic, category, redundancy, size, simplicity, efficiency, etc. Many free Web site software tools are available for flowcharting and are usually incorporated with design applications. If you have the advantage of an advanced application such as FrontPage 2002, you can change the navigational flow of your site without writing any HTML. Not so long ago, even simple changes to site flow would take hours, days, weeks, or even months depending on site context. The advances in Web site construction tools and associated applications available today greatly benefit Web site beginners, advanced designers, and Internet users alike.

Some examples illustrating flowcharting and the associated flowcharting concepts are shown in the “Site Structure” section below.

Navigation Approaches

The term "site architect" refers to the person who oversees the process of designing navigation and information flow of the site. On a small scale, you must perform the job of a site architect. Do not rely on your browser's back button, if you want consistent results. Four basic Website architect navigational approaches are frame, hub, site map, and index. The frames enable you to display a common navigation bar throughout the site. However, frames can present problems for users trying to bookmark your pages, because they sometimes inadvertently bookmark only the navigation frame etc. The hub style architecture relates to the idea that a user should return to a "hub" in order to visit other parts of the site. This system is most often time consuming and difficult for a user when there are more than ten (10) pages in the site as there are in the Group One site. A site map is usually a visual map of areas within the site and often has text hyperlinks organized by category in columns of three or four. A site map should be a supplement to other navigation, because it would in effect become an overwhelming hub system as a stand alone navigational approach.

Finally, an index is helpful for sorting through large lists. However, it only works if the end user knows the name of where he or she wants to go. You will notice that often the terms "site map" and "site index" are interchanged.

Site Structure

Below is a partial image of a FrontPage 2002 navigation structure view of this Group One Website.

Below is a partial image of a Dreamweaver 4.0 navigation structure view of this Group One Website.

Graphics

As with many other Website aspects, there are so many issues regarding graphics, from bitmap to image maps, interlacing to animation, and in-depth discussion is beyond the scope of this report. These aspects can be overwhelming for a beginner to consider. Therefore, it is perhaps a good idea to study additional detailed material related to graphics as the need arises. You should also be aware that there are literally millions of graphics on the Web that are offered for personal use, free of charge. As with HTML, you do not need to know anything about web graphics to create your Webpage. You may simply use elements found at sites like these:

http://www.freegraphics.com/archive.html FreeGraphics.com

http://www.shawnsclipart.com/ Shawn’s ClipArt

In view of the above, we will focus on a few fundamental concepts regarding Webpage graphics.

Web Graphic File Formats

Probably the two most common graphic formats necessary for your Website are Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) files. These two formats are the most widely supported on the Web because they are native Multipurpose Internet Mail Extensions (MIME). For your purposes as a novice Web designer, the fundamental consideration regarding these file formats is size to insure that your Webpage loads in the users’ browser quickly.

A Word about Resolution

If you are planning to use your own customized graphics, it is important to note that a typical computer screen resolution is 72 dots per inch (dpi), and a high-resolution image is often 300+ dpi. Consequently, a computer screen cannot physically display a high-resolution file at actual size. High-resolution files are intended to be printed on high-resolution printers and will appear much bigger than you intended on the Web. In addition, you may want to adjust the size of your graphic to match an exact specification, while not distorting the image’s proportional characteristics.

You can set your graphic resolution and dimensions in applications such as Adobe Photoshop or JASC Paintshop Pro. Unfortunately, there are few alternatives for free image editing applications. You should consider the cost of these specialized applications before deciding to create custom graphics.

About GIF and JPEG

The GIF format was designed specifically for online delivery because it was originally developed for CompuServe in the late 1980’s. A GIF file compression scheme is capable of transparency, interlacing, and animation. Importantly, the GIF file format by definition can contain 256 colors or less. This makes GIF files very good at displaying areas of solid color with little or no shading. For example, company logos or bar graphs are good candidates for this format. On the other hand, the JPEG format was developed by a photographers’ trade organization for transfer of images over telephone lines. Its compression is “lossy” because it discards some of the information in the original image. It relies and a kind of optical illusion to trick the viewer into not noticing the parts of the picture it has left out. By definition, this file format may contain millions of different colors.

It excels in reproducing subtle variations for color and tone, such as those found in photographs. In view of these basic aspects, it is a good idea to save your graphic files in the GIF format unless they are photographs, which may require more than 256 colors to represent real life images such as people etc. Unlike GIFs, JPEGs can be saved at a variety of compression levels (with a corresponding degradation in image quality). A JPEG must also decompress prior to display which makes them marginally slower to load in a browser than a GIF.

Cascading Style Sheets

Almost all browsers support Cascading Style Sheets (CSS). If have an advanced HTML Editor, you may be able to insert and image via the CSS methodology and achieve absolute positioning without knowing any HTML. The basic advantage to CSS is that you can cascade a style of text from a single source file. Thus, if you want to make changes to a hundred or even thousand pages, you will save time doing so. The other advantage is that you can position an image within one pixel of accuracy in relation to the upper left browser corner.

The upper left browser corner is located at zero (0) pixels on the horizontal axis and zero (0) pixels on the vertical axis. Accordingly, all other pixel positions are in relation to this zero position. In addition, CSS allows for layering images and even text. For example, you may want to superimpose images and text for effect. You can obtain further information and detailed sequential instructions via "CSS instructions" and Google or a similar search engine.

The animated GIF image displayed via CSS in the upper left corner of every page on the Group One Website shown below.

Notice that animated GIFs will not animate until viewed in a browser.

Choosing a Website Host

After designing and constructing your Website with your HTML Editor and other associated Web construction tools, you need to choose a Website host. A Web host is a service that provides services pertaining to serving files on the Internet via a Web page server.

There are a multitude of services that might be considered depending on the scope and audience of your site. Also note that you may already have space reserved for you on the Web. If you have an account with a Internet Service Provider (ISP) for your web access, that account often will include a limited amount of space (typically 5 –10 MB) for you to publish your Website. You should check with your ISP to see if they offer this service and for more information.

Numerous Website hosts provide free services in return for advertising. Typically, this advertising takes the form of a small ad that appears with your Webpage in a specific location upon download. It is sometimes necessary to design your pages in relation to the location of this advertisement. Therefore, if you will be using a free service that has this form of advertising, you might want to establish your Website host prior to designing your site. All that is required to sign up for a free Web hosting service is a working email address and here is were your separate spam email will come in handy. Type in “Web Hosting” or a similar phrase on Google and you are sure to receive results depicting hundreds of free hosting offers. Below is a comparison chart obtained from the Internet at:

http://www.freeWebsiteproviders.com/free-personal.php , which compares various free hosting services with corresponding available options and features. In addition, you can click the alphabetical links for additional comparison charts.

Uploading

FTP and Browser issues

Snapshot of the free FTP WS_FTP LE version below:

Ensure that your Website host provider offers File Transfer Protocol (FTP) service with your free access. FTP access should be a primary consideration when choosing one free provider over another. Your Website host will provide you with the required Host Name/Address, User ID, and password to enter in the set dialog box as shown above. The setup session properties depicted above is configured for the Group One Website, which is hosted by Yahoo. By using an FTP application, you can upload hundreds of files within a directory structure with a single click of your mouse.

If you are using a browser upload box, each file has to be individually set for upload. The difference could amount to hours or even days depending on the number and size of your files. You can download a free version of FTP the WS_FTP LE version at http://www.ftpplanet.com/download.htm. In addition, there are numerous File Transfer Protocol (FTP) applications free for download via Google "FTP" or a similar word or phrase.

The image pasted below is an example of the free FTP application called WS_FTP LE, which we use for the Group One Website.

Add on features

Your Website hosting service will probably offer many free add on interactive features such as calendars, counters, guest books, clocks, animated GIFs, etc. These add-on features are dynamically integrated to provide you with interactive features. You can add on commerce and database feature for a monthly price of about $15 if you want to buy and sell products via a shopping cart and database. In addition, many animated GIFs are offered free or you can make your own custom GIFs with graphic applications such as Image Ready, which is incorporated in Photoshop. Creating these animated GIFs is a skill that takes some time and practice, but you can usually download them free without too much trouble. Simply type in "Animated GIFs" in Google and weed out the free ones for download. There are usually sequential instructions associated with these GIFs and you can even open them in Image Ready and modify them.

Site Management

When you want to make corrections or changes to your site, you can do so by accessing your Website host file manager, or by accessing your unpublished version of your site on your hard drive and uploading the changes. Which method you choose will depend on the context of the correction or change and the related application involved. For example, if you are using an integrated application such as FrontPage and the changes are extensive, it is perhaps more efficient to facilitate the changes in your unpublished version and then upload them.

Remember, if you have pages that are under construction you can prevent misunderstandings by placing an "under construction sign" on them. The Group 1 site has an example of an animated GIF "under construction" sign on the home page and several other pages.

Your Website host provider normally offers free site management tools such as statistical counters, which indicate the number of visits per individual site page. There are also free site promotional services such as free member pages, directories, and search engines services.

Additional Resources

Many additional resources are available to provide help to beginning Webpage designers. Links to common Internet resources are listed below, by category, to provide a starting point for those new to Webpage design and development.

HTML

Webmonkey – HTML Basics

http://hotwired.lycos.com/webmonkey/teachingtool/H

TML: An Interactive Tutorial for Beginners

http://www.davesite.com/webstation/html/

NCSA – A Beginner’s Guide to HTML

http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

HTML Goodies

http://htmlgoodies.com/primers/basics.html

HTML Editors

EvrSoft

http://www.evrsoft.com

SiteAid

http://www.amiasoft.com/siteaid

HTMLjive

http://www.cris.com/~raydaly/htmljive.html

Web Page DesignWeb

Page Design for Designers

http://www.wpdfd.com/

Usable Web

http://www.usableweb.com/

Cnet – Building a Better Interface

http://builder.cnet.com/webbuilding/pages/Graphics/UserInterface/ss05.html

Graphics

FreeGraphics.com

http://www.freegraphics.com/archive.html

Shawn’s ClipArt

http://www.shawnsclipart.com/

Website HostingFree

Website Providers

http://www.freeWebsiteproviders.com/free-personal.php

References

Simply The Best .Net. 2003, Retrieved from the World Wide Web on July 7, 2003

http://simplythebest.net/htmledit.html

Build Website.com 2003, Retrieved from the World Wide Web on July 22, 2003

http://build-Website.com/

Virtually Ignorant Web Design for Beginners. 2003 Retrieved from the World Wide Web on July 16, 2003 http://www.virtuallyignorant.com/index.html

Site Point 2003. Retrieved from the World Wide Web on July 16, 2003

http://www.sitepoint.com/

Tripod. 2003. Retrieved from the World Wide Web on July 20, 2003

http://www.tripod.lycos.com/build/

HTML Goodies. 2003. Retrieved from the World Wide Web on July 20, 2003 http://htmlgoodies.earthWeb.com/