After wandering, browsing and using the web, some of us get the notion that it might even more interesting and useful to make the waves instead of surf them. The following information assumes that readers have spent a number of hours on the Internet and on its World Wide Web, are familiar with the Web's most basic conventions and are now ready to go beyond and design their own section of the web. The Web design process involve numerous steps which are described below. This page is just a higher level introduction to web composition. There are hundreds of books, courses and web sites that go far beyond the information on this web page. Once web design is connected to community needs, it also provides economic and social capital that builds communities and regions.

But the web is more than technique. It is also about a positive attitude towards many different scales of collaboration that are stimulated by web page linking, networks of links that range from personal to global. It is further informed by an intuition that even the meekest and most insignificant of human initiatives can become a part of efforts that will have a profound long term impact on the citizens of our world.

Introduction

• Step 1: Start a Plan
• Step 2: Compose
• Create Web Pages with an Editing Tool
• Reviews of Web Page Design (HTML Authoring) Software
• Learn Design Issues
• Use the Target Command to jump to special places within a web page
• Consider Web Page Colorizing
• Add Images (graphics)
• Positioning Media Elements and Text: the Table Commands
• Add other Multimedia Options: Sound and Video, Virtual Reality (VR)
• Step 3: Publish Your Web Pages
• Quick introduction to positioning of text and images using tables

Expand the Web Site Cycle

• Select a New Web Host: Free or Commercial
• When you leave the institution that is currently hosting your web pages, where and how do find a new web host?
• Plan B: Compose Pages in HTML Code
• Add Other Special Features
• Add Programming Features: Java Scripting
• Integrate Databases
• Buy Your Personal Domain Name - e.g., JaneDoe.com
• Promote Your Personal Domain or Your Web Pages

Learning Organizations: Building a Service or Business with the Web

Introduction

Effective web design is really no different than planning a paper, video, newsletter or slide show. First, you need to collect and organize your ideas. This means that the composers should have thought for a while about a topic or topics, recorded their ideas and those of others and determined the nature of the audience for their creations. Then the developer should choose a presentation format (such as a theater, newsletter or web site) and layout the sequence or sequences by which others will find their thoughts. Second, the creator inserts the collected information into this planned structure and does so in an appropriate but attention grabbing manner for the intended audience. Third, composers move their creation to a medium or setting by which their audience can encounter their work. This public sharing might be thought of as publishing (newsletter), conferencing (a meeting to trade ideas), showing (video) or live performance (music). A web site, a collection of web pages, might include all four.

1. Step One: Plan

Keep your audience in mind. That is, the usefulness of the vocabulary level, images and complexity of the navigation all depend heavily on the prior knowledge, maturity and experience of those you hope to attract to the site.

One effective way to plan a web site is to work with a team to develop a storyboard. This storyboard can be made in many ways:

• posterboard and post-it notes.
• drawing objects on a sheet of paper.
• a draw or paint program that lets you create design objects and move them around as needed for later editing and printing. Further, the file that you creat can easily be turned into a web page that can serve as a map of your web site. The Draw application within Clarisworks on either Windows or Macintosh applications is an excellent tool for this purpose but there are many others such as Photoshop, Paint, PhotoDraw, and more.
Create a storyboard relevant to your audience:
• Your Computers in Education course storyboard needs to include some required design elements which included selected assignments. Other design elements are up to you. (This storyboard web page was created in Clarisworks.)
• Teacher or instructor storyboards might include assignments, lesson plans, unit plans, tutorials, grading criteria for important assignments, relevant web site addresses, calendars for important events during the grading period and semester, tutorials, sample test questions, study guides, teacher contact information (school phone, fax, and teacher email address) and student creations. If your information might go on a chalkboard, poster or printed handout, it is also a strong candidate for a web page.
• Business sites require product and price information, entertainment or news that generates repeat visits, contact information, and so forth.


Web page designers may also benefit from the collection of bookmarks that you have been building which are relevant to your topic and class interests. The pages you bookmark may suggest design ideas for your topic that you may want to incorporate in your own web design.

Step 2: Compose

Create Web Pages with an Editing Tools

• How to Edit Web pages with Netscape Composer: as a University course student; as a classroom teacher. Use Netscape 4.0 and higher (free full version available from Netscape)
• Edit Web pages with Home Page 3.0 (30 day free trial version available from Claris).
• Edit Web pages with Dreamweaver (30 day free trial version available from MacroMedia).
• Adobe Web Collection.
• Edit web pages with FrontPage 1.0 (available from Microsoft for $99).
• Edit Web pages with MacroMedia Director (available from MacroMedia for $999 or with 50-70% educational discounts).



Reviews of Web Page Design (HTML Authoring) Software

• Reviews of Web Authoring Resources, April, 1998.
• Review of Netscape 4.0 - "The Revolution Begins".
• MacUser Magazine's current review of four top web page editors.
• Major download site from ZDnet, with ratings.
• MacUser's download page of shareware web editors, with ratings. Type in the words "html editor" and tap the return key.
• Yahoo's Reviews of Other HTML Editors

Learn Design Issues

• The Ten Commandments., by Sean Howard.

 
• Tips for Writers and Designers by David Siegel.

 
• Creating Web sites by the publication Computer Paper.
• Web Page for Designers, by Joe Gillespie

 
• Web News from Web Watch.

 
• Web Design and Review.

 
• Design Forum, dedicated to making the work of the graphic designer or web designer, quicker, easier, and more accurate.

Readings in paper format:
 
 

• Absher, Linda. (1997). Beyond Clip Art: Creating Graphics for the Web. ERIC NO: ED412903 Review by Dale Bradshaw.
• Jacobson, Linda Ed. (1992) CyberArts: Exploring Art and Technology. Miller Freeman Books. Review by Dale Bradshaw.
Some school web sites are concerned about whether permission must be given to link to another web page. Though this is currently a gray area and not spelled out in the law, it deserves ongoing attention for changes in such policy and law. One site has developed these policies:
• Qualifying and Citing Web Pages
• Permission to Link or Post.

More Advanced Linking - the Target Command

Sometimes a web page becomes very long with its own sub-sections. A table of contents list can be put at the top of the page with links to points (called targets) further down the page. These same targets can be linked from other web pages as well so that the targeted place on a long web page will be position at the top of the page when it opens.

The general design issue is to realize that when a page is getting long enough for targets to be useful, it is also time to decide if the sub-sections of the page need to be cut out become separate web pages or remain together in one long page. If the decision is made to keep the sub-sections of the page together, then the target command can help in quickly reaching the chunks.

To use the target command while in Netscape Composer, look for symbol of a target in the tool bar. The Target button is immediately to the right of the Link button. Before clicking the target button, position your cursor at the front of the line or heading that should appear at the top of the page when the link to the target is clicked. When the target button is selected, a box opens to ask for the name of the target. It is best to use a single word that stands for the section in question. Next, move to the place in a web page where you want to make a link to the target that is on the same page or on a different page. Highlight the word or phase, and click the Link button in Composer. If the target is on the same page as the link that is being created, then merely enter a "pound" sign (#) then precisely type the name of the target word or phrase. If the target is on a different page, then the link address will begin with the file name, followed by a # sign and the target name. For example, this could be
 

unitplan.html#resources


and note that there are no spaces on either side of the # sign.

As a further example of in-document links, open this web page in Composer. There is a table of contents at the top of this page. Open up the links at the top of the page in the link editor to see the links that use the target command. You will see the target command symbolin many places as you scroll on down the page.

Study Web Page Color

There are several steps you can take in coloring your web pages, but be careful and ask others to help you develop some color judgment. Not all colors work well together. Today, only 216 colors, known as browser-safe colors, will work across a wide range of windows, mac, and unix platforms. Further, each image you add to your page delays the time that the reader can see your complete page, so use them sparingly and meaningfully, not just for decoration.
 
 
• Use Netscape Composer's color tools or other editing tools to:
• Change differentwords on the same line to be different colors overiding the set text color. That is highlight some text, and click on the multi-colored square in Composer's toolbar. When its dialog box comes up, select the HTML Picker in the left column in order to select your choice of browser-safe colors. If this picker is not available, use any, but any colors you select other than black or white may not display well on other computer systems.
• Using Netscape Composer's Format/Page Properties commands you can also:
• Change the color of your background
• Change all your text to the same color.
• Change the colors of your links including the: Link Text; Active Link Text and Followed Link Text.
• Change the background to be the tiling of an image file, repeating the image to whatever the size of the web page. You may need to lighten your image to keep it in proper contrast with your text.
 
• Select browser safe colors. Use search engines to find pages on "browser safe colors or check out these sites:
• Color Utilities - Web Design - Net Links "Learn about color on the web and browser-safe colors, from your Mining Co. Guide"
• 216 Browser-Safe Colors -- RGB values
• Hexadecimal Values of the 216 'Browser-Safe' Colors
• Colors for web pages | 216 browser-safe colors

Imagery or Graphics

A quick common procedure is to add an image to your web page that is already in the correct GIF or JPEG/JPG format or the newer PNG format. The Internet is full of images that you can easily copy. The problem here is to avoid using an image that is copyright protected. If there is any question or doubt, send email and ask permission. Many sites offer free collections of images for use in your web site. Each has its own permission policy that you need to find and read.
 
 
• The process goes like this:
1. Find an image.
Graphics. You can search the net for numerous "clipart" collections or use these "starter" sites.
1. Graphics Notebook, an index to graphics sites and resources.
2. Graphic Specific Sites
• Online Institute's Clip Art Library, which indexes dozens of other clipart libraries
• Icon Bazaar
• Dr. Black's Animated Clipart Library
• Original Animated GIFs
• Large collections of clip imagery, sound and video can also be purchased. Search Amazon.com's store for related clipart and graphics art CD's.
3. Photograph and Image Sites
• http://memory.loc.gov/ This Library of Congress site provides a wider range of media than still images, but still images make up the majority of their media collection. Use of the images on this site is permitted on web pages with appropriate citation. Though this collection is historical in nature instead of current, given their free use web policy, this is a superb source of images for the web pages of students and teachers.
• http://www.google.com  features: click the tab or button for images, which are then presented in thumbnail sets of 20 at a time; note that the "mature content filter" can be turned on or off with a click so  use in settings with children requires checking to see that it is turned on
• http://www.hotbot.com/adv.asp?prov=Inktomi&tab=web the advanced search page of this search engine, see the checkmark on the page for image search)
• http://www.altavista.com/image search engine
• http://www.ncrtec.org/picture.htm The Amazing Picture Machine offers a variety of image types including architecture, animals, maps, artwork, world leaders, etc.
• http://dailynews.yahoo.com/headlines/g/ts/ Yahoo! News Image Gallery presents current news photos and a searchable directory of archived news photos
• http://www.corbis.com/ - the Corbis image collection representing millions of works from photographers, museums, cultural institutions, and public and private collections with special pricing for educators
• Art Museum Image Consortium (AMICO) offers a searchable thumbnail catalog of artwork from member museums, but use requires paying a membership fee for image use, http://www.amico.org/
• Numerous commercial (for sale) images sites are also available. Search for commercial or stock images, photography, and media.
• The Picture Collection - commercial site offering free access to more than 22 million photos, prints and illustrations from the Time-Life magazines and the historical Mansell photograph collection; but registration is required.
• Stock Photography  Searches at Excite.com
• http://www.scour.com/ - Scour is a searchable collection of multimedia on the Web; search by media type: audio, video and more
2. Save this image to your diskette:
1. On a Mac, position the cursor directly on top of the image of your choice and hold down the mouse button. If the button is held long enough a short-cut menu appears from which you select, "Save This Image As . . ." then follow normal Macintosh procedures for saving the file to your web folder.
2. Using Windows, position the cursor on the image of your choice and click the right button. Choose the appropriate command to save your image to disk using normal Windows procedures and put the file in your web folder.
3. Next, copy the web site address of the image, image title information and other relevant citation information and paste into your web page.
3. Link this image to your web page.
1. Move the image into the same folder on your computer that holds the HTML or web page file.
2. In Netscape Composer position and click the cursor in the place you want your image.
3. Next, click the graphic button in the tool bar and
4. enter the correct file name of the image. Re-save this web page.
5. Where using images that are not your own work, yet images based on some permission policy, add relevant citation information
4. Upload both the image file and your updated web page to the web server, placing them in the same folder.
1. That is, place these two files on your Internet host site and test it.
2. A broken graphic symbol generally means you:
• forgot to upload both the image file and its updated web page to the correct directory or folder.
• did not get the file name correct when you made the link.
• did not upload the image as a raw data/binary file.
5. Additional information on linking images to web pages is also available.
• If you create and digitize your own images you avoid copyright issues. There are many programs you can use, such as:
• online draw and paint applications
• desktop draw or paint applications. Tutorial examples: Clarisworks Draw and Clarisworks Paint.
• and the software for scanners, digital cameras or video digitizing cards.
• Decide on GIF or JPEG Format
Depending on the age/version of your software application, it may or may not have the capacity to save the file into the Internet formats of GIF and JPG. Check and see if when you save the format options include GIF and JPG. The more recent versions of Clarisworks beginning with 5.0 and Microsoft Office beginning with Office 97 and Photoshop include these Internet compatible formats.

If you cannot save into these Internet formats directly, use whatever format the application provides, such as PICT on a Mac and BMP on Windows. Then use a second application, sometimes called GIF Converters to change to the right format. They are available as shareware on many platforms. An example of image format conversion is available (screen movie).

 Save to the GIF format for images when the image has a large amount of solid color and use the JPG (also JPEG) format for photographic type images.
 

• There are other commonly used web image skills:
• Make an image the basis for a tiled background to your page.
1. First, prepare a small image, small in both file size, and display size, as a gif or jpeg file. This file should be 10k or less in file size. If it is not a small file, it really slows down the display of the web page, especially for those using telephone modems. This image will clone itself across your page display space to fill whatever space is needed.
2. It is especially important that the color in the background does not interfere with the reading of the text in the foreground. If it does, change it or do NOT use the background. It is also important for the background image to be relevant, otherwise it is just a distraction. Always use relevant meaningful images. Don't just do it to be cute or to show off!
3. Next, from Netscape Composer, select Format then Page Properties. In the page properties dialog box that appears, click the radio button for background images, then enter the filename of the image.
4. Finally, move both the saved web page and the image to the same location in the account space for the web site.
5. There are many web sites that provide more instruction on the process and free backgrounds that are optimized for small display space and file size. Searching for "web backgrounds" will yield more. Here's some: http://www.backgroundsarchive.com/   ; http://www.free-backgrounds.com/ ; http://www.freebackgroundzone.com/
• Add thumbnails. Follow the directions on this page to put small images on one page that link to other larger images.
• Add animated images that you find or create with Gif Builder (Mac) or Gif Animator (Win) or other such tools such as Macromedia's Flash.

Positioning Media Elements and Text: the Table Commands

It is common in publishing to need to position text and an image side by side, or to have text immediately under the image. On the web, the table command creates a set of cells in rows and columns that allows for such positioning.

In Netscape Composer there is a Table button. When clicked on it asks for the number of columns and rows needed along with providing many other options to control the use of the table. Tables can be nested in the cells of other tables. A table may consist of only one cell, a single row and column to control how closely text should get to the margin of its display window. It is optional whether the borders around the cells are visible or not.

A separate web page with more information on table commands with examples is available. This same page also links to further information on adding images to web pages and on colorizing. For more examples of the use of tables mixed with images, see my "web office page" which is my home page.

Add other Multimedia Options: Sound and Video, Virtual Reality (VR)

• Depending on your experience, you may need a rationale for the educational use of information that looks like "entertainment" and is otherwise known today as multimedia education.
• Now that you have an understanding of the concept, study these multimedia design ideas and skills.
• Now that you have an understanding of the concept, study these Audio Q & A ideas by Graeme Bennett (Updated Apr. 12, 1998).
•  

Step 3: Publish Your Web Pages

Publishing a web page or pages generally means electronically transmitting what you have created and stored on your diskette to your own storage area on a distant computer that runs web server software. Such server software "serves" web pages to requesting computers across the Internet. Every Web Server will have its own special policies and commands for uploading files into its system. Beginners should stick with one Web Server until they thoroughly understand its procedures, but over time web creators will find that it is easy to keep web files on many different Web Servers located around the world.

Assuming that you already have a designated web server, use appropriate software to transfer your files to the online computer of your choice.

• File Transfer Using Fetch with the Mac operating system
• File Transfer Using WS_FTP on the Windows operating system
If you do not have a place to publish your files, consider the options below under the heading Select Your Web Host.

 University increasingly provide students with Web space. For example, Western Carolina University's Vax computer provides 1 megabyte of storage space. The trade-off for larger free server space is commercials or advertisements (adv.s) inserted in the top of your web pages. I chose those listed below simply because they offer the largest storage areas for free and I have heard about them more than others.

 

Expand the Web Site Cycle

The first time through you learn one application (e.g., Netscape Composer) and one way to get involved with web page composition. With time and experience, the larger picture emerges. This is really about web site composition, and web page composition is just one piece of this overall design. Where web pages will be stored and served from is another major issue. Web site hosting can be free when part of local educational institutions or free to sites that post advertisements in your web pages. Your local Internet Service Provider may already have provided you with free web space as part of your monthly Internet bill so check with them as well. In very little time, you may be ready to go beyond that knowledge, and grow beyond that account space to places that have some charge per month or  year. There is always more to learn.

Select Your Web Host: Free, Commercial, or Your Computer

Just as sea organisms shed one shell to move to a larger one, it may be time to find a new web host. To have a place to exercise your continued web learning, use the information below to select your next home or perhaps second home. But, before you actually buy web hosting space or put up pages on a free host that sticks advertisements in your web pages, check with your current Internet service provider to see if they are not already providing you space that you did not know you have. Or, switch to a local Internet service provider, who for practically the same amount, provides free web page hosting service to its customers. A tiny fraction of the free and commercial services are noted below.
 

	Free Web Server Systems
Space	Obtain Account	Site Development Assistance	Intended Users
$0/1 MB	WCU Account/adv. free	Vax Web Server.	Western Carolina University members
$0/ ? MB	Your Classroom, School Building or District Web Server	See District Computer Coordinator	Your district staff
$0/11 MB	Geocities Account/adv.s	Geocities	personal
$0/11 MB	Tripod Account/adv.s	Tripod	personal
$0/11 MB	Xoom Account/adv.s	Xoom	personal
$0/20 MB	Fortune City Account/adv.s	Fortune City	personal
$0/20 MB	Hypermart/adv.s	Hypermart	business
	Commercial Options
$5/25 MB	Geocities/adv.s free	Geocities	personal
$6/22 MB	Tripod/adv.s free	Tripod	personal
$10/30 MB	Hypermart/adv.s free	Hypermart	personal/business
$25/25 MB	GeoShops	.	business
.
	Your Own Personal Computer
$0/1000+ MB	Your Computer	varies with OS	every WCU computer owner

• There could easily be other better systems for your needs. To check out the competition, see Yahoo's list of other free web server sites, which also has directories of free hosting services, or search for "free hosting." For fee based systems, simply search for "web hosting" using Internet search engines.
• Each web server site has its own rules and as well as its own arrangements for uploading files to their web sites. Also, you could easily have more than one free account, using your University account as well as other systems. The problem will be remembering each system's different way of doing things.

Plan B: Composing Pages in HTML Code

There is no getting around it. Learning HTML code brings increased power and efficiency to the web design process. Know your code.
 
 
• HTML Code for Beginner's at Builders.com
• Beginner's First Steps to make a two page Web site.
• Learn Cascading Style Sheets (CSS). The current HTML 4.0 standards recommends that all web page work be done using CSS design. The WYSIWYG Web page editors that are free such as Netscape's Composer do not include tools for CSS. You will have to learn HTML code to use this structure or pay for a current web page editor that has specific CSS tools built-in to it.
• Cascading Style Sheets (CSS) - Graphic Design Net Links, from your Mining Co. Graphic Design Guide
• How do I use Cascading Style Sheets?, HTTP://www.zdnet.com/wsources/content/0298/feat_web_css.html
• Using Cascading Style Sheets? (CSS), http://builder.cnet.com/Authoring/CSS/ss02.html
• How do get started with Cascading Style Sheets?, http://www.zdnet.com/products/garage/css/primer/
• How do I create an attractive page layout with Cascading Styl Sheets?, http://www.zdnet.com/devhead/stories/articles/0,4413,1600433,00.html
• How do I use Cacading Style Sheets to take control of Web fonts? http://www.zdnet.com/devhead/stories/articles/0,4413,1600431,00.html,
• The Web Design Group's guide to Cascading Style Sheets. http://www.stack.nl/htmlhelp/reference/css/
• WC3.org's style pages
• CSSCheck, a Cascading Style Sheets Lint. CSSCheck is a lint to check the syntax, style, and accessibility of Web authors' Cascading Style Sheets. http://toad.stack.nl/htmlhelp/tools/csscheck/
• Tools that can handle CSS and Dynamic HTML (DHTML).
• For other general help, see ZDNet's How do I? page.
• http://www.zdnet.com/zdhelp/howto_help/howto_int_help.html
More HTML Instruction
• ZDNet's Introduction to Web Page Creation
• Web Builders Spotlight on HTML
• Concepts in Web Page Design
• Terse table summary of HTML codes

Java Scripting and Java

Java scripts are short special feature programs that can be added to your web pages. They use the underlying Java language that is part of many web browsers such as Netscape and Internet Explorer.
• JavaScript for the Total Non-Programmer
• Educational Object Economy. Over 2,000 Java Applets are available at this site to copy and insert into your web pages.
• WebObjects.

Database Integration

A "form page" is a special kind of web page. Like any paper form that you fill out, the web form provides blank spaces for the user to enter information. This information might be used to carry out a search of a database, to modify the database or to add a new record to the database.
 
 
• Educational examples of web integrated databases
• Instruction on writing your own web form page/database designs.
• Writing search forms for FilemakerPro 4.0 (Mac/Win).

Buy Your Personal Domain Name - e.g., User.com

• How much does it cost to register your own domain name? As of April 1, registering a domain name will cost US$70 rather than US$100 for the first two years. Annual renewals will be US$35 rather than US$50., Network Solutions (www.internic.net), the organization that administers .COM, .NET and .ORG domain name. Use this Whois function to test names you may wish to become your domain name. Buying a domain name is only an electronic address not actual space on a hard drive. For web page storage space you need an Internet host site.

Promote Your Personal Domain or Your Web Pages

• NetPromote

Other sites that take you through the Web Site Design Cycle Issues:

 
• A Solid Intranet in Eight Steps (Web Techniques, July 2001).
• Web Site Garage
• Howstuffworks "How Web Servers and the Internet Work"
• Steps to Web Document Quality
• ZDNet: developer: Five steps to accessible Web sites
• Evaluation Rubrics for Websites: for Elementary, Middle and Secondary Students
• Five steps to accessible Web sites
• Web Monkey: The Web Developer's Resource
• One Minute Designer 1 - 25 steps towards more reader-friendly web sites by Roger Parker for eFuse.com
• Steps to Analysis, creation and design of web sites, E Business
• How to Build Lame Web Sites

Next Steps

Significant web development topics are covered in greater detail in the fall EDEL 610 Distance Education graduate course held in Asheville and the spring activities held at WCU on Multimedia Education ( for the moment at the graduate level EDEL666, Projects in Educational Computing, and in a series of Continuing Education Events on multimedia open to any students, undergraduate, graduate or community member).
 

---

 


---

[Chapter Parent Frame | Top | Updated September 29, 2004; 3:04 p.m. | Pageauthor Houghton]

---

---