Introduction to Web Site Design (v3)

Door A Designs > Projects > School > Introduction to Web Site Design (v3)

Intro to Web Design

Welcome to the design side of the world wide web!

With the rise of technology, it has become easier for people to create websites without having to know HTML. Unfortunately, this ability has also created a problem within the World Wide Web. Large numbers of poorly designed, difficult to navigate websites now exist on the web because people think that programs such as Dreamweaver and FrontPage will do all the work for them. However, with a little patience and a willingness to learn and plan before designing, you can create a website that is easy for all people to access, navigate, and learn from.

This site is designed for the person with basic computer knowledge and who has the desire to learn how to design their first website. However, this site can also be used by anyone with web design knowledge who just needs help remembering something or just desiring a "refresher" course on some of the basics of design.

HTML

Image: Snippet of HTML code

HTML, also known as HyperText Markup Language, is what websites are made of. Browsers take files written in HTML and display the pages in a format that is understandable to us humans.

It used to be, that if you wanted to build a web page, you needed to know how to code with HTML because there were no programs yet that would automatically code it for you. Personally, I feel that everyone developing web pages should know something about HTML. There are times when the programs that are automatically creating sites for you, mess up and display things incorrectly. However, if you know HTML, how it's supposed to be laid out, and such, then you can go into the code and correct the mistakes of the program.

Informative links on HTML:

Software

Image: Colorful CD

As the web began to develop, people began to develop software programs that would make creating web pages a lot easier. Over the years, these programs have evolved to become highly sophisticated, yet as easy to work with as the everyday word processor.

Some of the popular web design programs today include Microsoft's FrontPage and Macromedia's Dreamweaver. In addition to these, there are a multitude of free and for purchase programs available out on the web.

Information on two of the popular programs:

Hosting your web site

Image: Microchip Processor

Once you have created a website, you have to find a way to place it on the internet for others to find it. There are many types of hosting out there available to you, so before you go spending your money, it is important that you figure out if you want to purchase a domain name, how much you are willing to spend per month on hosting, and what other features are important to you.

Free Hosting Providers:

  • Bravenet.com - The free web hosting package comes with 1.5 GB of bandwidth, 50 MB of disk space, and a web builder.
  • Tripod Hosting - Provides site-building and management tools, 20 MB of disk space, a blog builder, and a photo album builder all for free.
  • Yahoo! Geocities Free - Offers three website packages, with the most basic package being free. Provides a blogging tool and web site management tools.

Note: Almost all Free Web services will be add supported, also many of these providers also offer paid hosting. These are just three of the many free services available. Please feel free to search the web for more available services.

Paid Services:

  • GoDaddy - Has several different plans available as well as many "extras" which can be purchased. In addition, they also offer domain registration.
  • HostGator Web Hosting - Offers multiple hosting plans, as well as a site builder, FTP ability, e-mail, and many other features.
  • Hostland - Web Hosting for Power Users - Provides multiple plans, E-mail accounts, subdomains, databases, and much more. They also offer domain registration.

Note: This is just a small sample of the hosting providers available. For more options, please feel free to search the web.

WebQuest

Image: Man instructing someone on the computer

This WebQuest is a semester-long project designed to complement an introduction to web design course for high school or adult users who have a basic foundation in computer skills. The goal of the WebQuest is for the user to be able to compile the information required for a web site, as well as build an easy to navigate web site.

Special Requirements:

  • A web design program such as Macromedia Dreamweaver, Adobe GoLive, Microsoft FrontPage, or another free program.
  • If students are going to be changing machines frequently, or taking materials home to work on, then an alternate means of storage (floppy disks, CDs or jump drives) for their files will be required.

Image: Tooth with mirror and brushWebQuest - Introduction

You've been recently employed at a local dentist office, working at the front desk, your job includes fielding telephone calls and making appointments with the dentist.

On Friday at 4:45 p.m., a young man comes into the office very frustrated. "I've been looking for this place all day! I tried calling and the phones were always busy! Don't you have a website where I can look up your hours, get directions, and stuff?"

"No sir, we don't, but I'll mention it to the dentist." You told him reassuringly before going about helping him make an appointment.

That afternoon as everything is locked up, you tell the dentist what happened in the office. "Well," He says, "You seem to be really good with all that high tech stuff, you make a website for us!"

Image: It's as simple as 1, 2, 3WebQuest - Tasks

  • Research and create at least three categories of information to place on a web site.
  • Gather content and images to place in the categories. There should be at least one image per page.
  • Research and come up with at least three potential web addresses and costs for purchasing the address.
  • Research various hosting options for the web site, and provide multiple options for your employer to look at. Make sure to take into consideration cost, bandwidth, and disk space.

All research information should be typed up into a presentation using a word processor.

  • Using a Web Development program, create a mock-up website that includes your categories as navigation, as well as the content and images you had previously gathered.

WebQuest - Process

Image: First thing is researchTask 1 - Research:

  1. Using Google, Ask.com, and a third search engine of your choice; locate five different dentist websites.
  2. Create a list in Word (or other word processing program) of the various categories of information provided on the sites. Specify if a specific item is included on only one site, several of the sites, or all of the sites.
  3. What was included on the sites that you didn't expect to find?
  4. What wasn't included on the sites that you felt would have made the site experience better?
  5. Was the navigation on the sites logical and easy to understand?
  6. Did the colors or images on the sites promote the message they were trying to portray? Or did they distract you or make things confusing?
  7. Write up an evaluation in which you state the main categories you believe the dentist office should include on its web site. Include in your evaluation a selection of colors that you think would most benefit the site.

Image: Second, gather your content!Task 2 - Gather Content:

  1. Create some sort of welcome or introduction for the home page that is easily understood by your intended readers.
  2. Hours of operation?
  3. Location?
  4. Contact information by phone and/or email?
  5. Additional areas that you believe should be included.
  6. Locate images for the web pages. Make sure your images are not copyrighted. (Check the Copyright Examples section under "Links" for assistance.)

Image: Web Site Address ... it's a must if you want to be on the web!Task 3 - Web Addresses:

  1. Locate official companies that sell web domains. (Look for a message saying that the company is ICANN approved.)
  2. Come up with potential URLs for the web site that include 'dentist' or something that lets people know that the web site belongs to a dentist.
  3. Is the address a .com, .net, .org? Or is it available in multiples?
  4. What is the cost for each for a year? Two years or more?
  5. Write up an evaluation on which name you believe to be the best for the dentist office and provide two alternatives. Include in your write up the benefits (or lack thereof) of purchasing the domain name for more than one year.

Image: More important than a web address ... some place to actually put your web site on the web where people can see it! They can't find it if its just on your machine!Task 4 - Hosting:

  1. Locate at least three different web site hosting companies.
  2. Compare the products offered.
  3. What are the pros and cons between the plans and companies?
  4. Write up an evaluation on what you would be the first, second and third best options for the dentist office to go with.

Image: Time to build your web pages!Task 5 - Develop your web site:

  1. Using the web development software (either one your teacher has selected for you, or one of your own choosing should your teacher not have a preference and more than one program is available to you) begin to create your web site.
  2. Create a means to keep your web site organized.
  3. Create a working navigational structure.
  4. Include all of your content and images into the site.

WebQuest - Resources

Image: Helping HandUse the links below to help you design your site. For help with HTML, click the "HTML" link in the sidebar. For help with FrontPage or Dreamweaver, click the "Software" link in the sidebar. Additional resources can be found under "Links" in the sidebar.

Hints and Tips

Hints and tips that other people have discovered about website creation and are passing on to the rest of the world.

Tutorials

Generalized Web Tutorials - You can never have too many!

  • CSS Tutorial - Save a lot of work with CSS! In this CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once!
  • Building a School Web Site - A great step-by-step introduction to learning how to build a complete web site.
  • Build Your Own Website - This site provides information for beginners to advanced web developers.
  • How to Make a Website of Your Own - How to build a great web site and avoid the steep cost of hiring a designer.
  • Creating good websites - This site is the companion to an evening class in which I teach Web design, concentrating on important design skills rather than technical aspects.
  • How To Build Web Sites and Create Your Own Web Pages - The How To Build Web Sites tutorial will teach you how to create, host and market web sites - from the initial concept, to monetizing, design, building, publishing, marketing, right through to web site maintenance.

Misc. Links

A list of random links that are still very important, but just didn't fit into any specific category

  • Color Wheel Pro - Learn about color theory basics.
  • Whatever:hover - If you've learned how to use Style Sheets, this is a great tool/addon for creating hover overs on things other than links. (For use with IE, since the other browsers basically do the hover effects already.)
  • css Zen Garden - The Beauty in CSS Design. A great resource for those interested in learning about Style Sheets.
  • Design for the Web: Learning Page of the Library of Congress - An excellent web site that all people interested in web design should read before actually starting on their first design project!
  • Top Ten List for Web Designers - An extremely good resource for those trying to design and develop curriculum for the web.

Image of a man looking through a magnifing glass.WebQuest - Evaluation

Your final report and web site mock-up will be graded according to the guidelines below. Feel free to use this rubric throughout the semester to gauge your progress in the assignment.

Excellent 4 points Adequate 3 points Inadequate 0-2 points
Spelling & Grammar No spelling or grammar errors present in the paper or web project. No more than 5 errors in spelling & grammar in the paper or web project. More than 5 errors in spelling & grammar in the paper and web project.
URL's - web site address Provided three or more URL addresses along with all the purchase information. Provided most of the information but lacked one or two pieces. Less than 3 addresses, and/or no purchase information.
Hosting Provided three or more hosting providers and packages as well as pros & cons for each provider/package. Provided most of the information but lacking one or two small items (such as missing prices) Less than three choices provided, no pros/cons listed, no discussion about which choice is best.
Images Provided at least one image per page, included alt tags and/or captions for all images, if the images are copyrighted, obtained permission for their use and provided proper credit. Provided all the images, but lacking alt tags or credit. Not enough images, missing alt tags and/or credit for images.
Legibility Used proper fonts and sizes, good contrast of colors, proper use of heading tags. Font slightly small, or low contrast, or no use of heading tags Missing/lacking two or more of the items
Navigation Easy to locate on the page and consistent throughout the site, uses logical names, uses titles/tips Missing no more than two of the items Missing two or more of the items
Main content Provided three ore more areas of content; each area provides sufficient information; information is well written and easy to comprehend All areas provided but minimal information or the information is difficult to comprehend. Insufficient number of content areas provided, insufficient content within the areas, information is difficult to comprehend.
Sub content Web contact information provided, footer information with last updated information, office information such as "hours", office address, and contact information provided No more than two areas missing More than two areas missing.

Image: Balloons and confettiWebQuest - Conclusion

Congratulations image with flowers

Throughout the course you have learned how to research information on the World Wide Web; gather and build content, as well as select appropriate images; find URL's appropriate to the task at hand; find a hosting provider for your web site; and most importantly, develop a well thought out, well organized web site.

Remember, websites are always works-in-progress, after all, they are a reflection of society around us; but most importantly, remember to have fun!

Links & Additional Resources

Copyright Examples

If your intellectual property is on the web, you need to copyright it. Use the following web sites to learn how to do copyright your material.

  • The UT System Crash Course in Copyright - Find out what copyright is and when/how to use it.
  • The "Copyright Website" - The Internet has been characterized as the largest threat to copyright since its inception. The Internet is awash in information, much of it with varying degrees of copyright protection. Copyrighted works on the net include news stories, software, novels, screenplays, graphics, pictures, Usenet messages and even email. In fact, the frightening reality is that almost everything on the Net is protected by copyright law.
  • Copyright Office Basics - What is copyright? Who can claim it? What's protected by it? Find out the answer to these questions and more.
  • Web Shoppe | Copyright Notice - An example of a copyright notice.
  • Web Shoppe | Web Design | Internet Copyright - How and why you need a copyright statement on your web site.
  • What is Copyright Protection? - "This page covers the basic definitions regarding copyrights."
  • Copyright.com - Providing the most complete and convenient access to copyright permission for millions of publications worldwide.
  • Stanford Copyright & Fair Use Center - The Copyright & Fair Use Center from Stanford University Libraries.
  • Association of Research Libraries: Copyright Home - Updating copyright and intellectual property laws to meet the challenges of the networked environment has been a key focus for Congress, the courts, and state legislatures for several years. The Digital Millennium Copyright Act, the Sonny Bono Copyright Term Extension Act, peer-to-peer file sharing and digital rights management, and legislation to create additional protections for databases have dominated the agenda...

Books

A list of various books which I have found helpful in building web sites!

  • Cascading Style Sheets 2.0 Programmer's Reference - By: Eric A. Meyer "In order to comprehend how CSS affects the presentation of a document, there are some key concepts that must be grasped..."
  • Designing with Web Standards (2nd Edition) - By: Jeffrey Zeldman "An equal opportunity disease afflicts nearly every site now on the web, from the humblest personal home pages to the multimillion-dollar sites of corporate giants..."
  • Don't Make Me Think: A Common Sense Approach to Web Usability - By: Steve Krug Usability design is one of the most important--yet often least attractive--tasks for a Web developer. In Don't Make Me Think, author Steve Krug lightens up the subject with good humor and excellent, to-the-point examples.
  • More Eric Meyer on CSS (Voices That Matter) - By: Eric A. Meyer "Ready to commit to using more CSS on your sites? If you are a hands-on learner who has been toying with CSS and want to experiment with real-world projects that will enable you to see how CSS can help resolve design issues, this book is written just for you!"
  • Programming PHP - By: Rasmus Lerdorf, Kevin Tatroe "PHP is a simple yet powerful language designed for creating HTML content..."
  • The Zen of CSS Design: Visual Enlightenment for the Web - By: Dave Shea, Molly E. Holzschlag "Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to create beautiful, progressive CSS-based Web sites."
  • Digital Copyright: Protecting Intellectual Property on the Internet - By: Jessica Litman "AMERICAN IDEAS OF FREEDOM ARE bound up with a vision of information policy that counts information as social wealth owned by all..."
  • Ajax For Dummies - By: Steve Ph.D. Holzner "Brush up on JavaScript, use free Ajax frameworks, and make your sites rock."
  • Web Standards Solutions: The Markup and Style Handbook - By: Dan Cederholm "Web Standards are the standard technology specifications enforced by the World Wide Web Consortium (W3C) to make sure that web designers and browser manufacturers are using the same technology syntax. It is important that these implementations are the same throughout the Web, otherwise, it becomes a messy proprietary place, and lacks consistency. These standards also allow content to be more compatible with multiple different viewing devices, such as screen readers for people with vision impairments, cell phones, PDFs, etc. HTML, XML, and CSS are all such technologies."
  • Teach Yourself AJAX in 10 Minutes - By: Phil Ballard "Sams Teach Yourself Ajax in 10 Minutes is a concise introduction to the basics of building Ajax applications and the architecture and operation of these applications. You will learn the techniques employed in using Ajax, introducing Ajax and explaining how it may be used to solve realistic user interface problems. You will be able to immediately begin building web applications, and will have platform from which to explore more advanced aspects of Ajax."
  • Web Designer's Reference - By: Craig Grannell "Web Designer's Reference provides an intriguing, comprehensive reference for Web design, using XHTML, CSS, and presentation-oriented JavaScript. This book is divided primarily in two sections: the Tutorial section, which includes Modular discussion and tutorial-based chapters; and the Reference section, which features essential reference guides to XHTML and CSS.
  • Web ReDesign 2.0: Workflow that Works - By: Kelly Goto, Emily Cotler "Anyone who has managed the process of developing or redesigning a Web site of significant size has likely learned the hard way the complexities, pitfalls, and cost risk of such an undertaking."
  • Patents, Copyrights & Trademarks for Dummies - By: Henri Charmasson "What is intellectual property?..."
  • Web Design in a Nutshell - By: Jennifer Niederst "This is the rare book for designers that is almost completely nonvisual. It doesn't show what's hip in navigational bars or what the coolest colors are. Rather, it gives readers the kind of know-how that can make a difference between someone who just whips up pretty pages with WYSIWYG applications like Dreamweaver and someone who can make those pages cross-platform, cross-browser, fast loading, and accessible to all."

Accessibility & Usability

Links about web site accessibility and usability. These resources can be extremely beneficial to have if you need to make sure your website is compliant with the law.

Search Engines

What is a search engine? Why do you need to know about them? How do you get good rankings on them? Use the links below to find out more about Search Engines.

  • Second Generation Searching on the Web - This tutorial covers some of the more innovative search engine services on the Web. It includes a group of search services that make use of technology that organizes search results by peer ranking, or clusters results by concept, site or domain.
  • Ask.com - Ask.com Search Engine
  • Google - Google.com Search Engine
  • Clusty - Clusty the Clustering Engine
  • SurfWax, Inc. - Practical Tools for Finding and Using Information
  • Brainboost Answer Engine - Brainboost actually finds answers to your questions posed in plain English as opposed to directing you to pages that simply mention the questions.
  • Search AllinOne MetaSearch feature - combining the power of all the worlds best search engines into a metasearch

Articles

The following links are articles related to web design. The standards are changing every day and you find out about it by reading the articles.

  • A Web Page Kit Full of Tools for Beginners - A review on Web Studio 2.0 by The New York Times
  • Real world cross-browser HTML development - Few subjects are as widely debated among developers as browser preference. Unfortunately, regardless of your predilection, you most likely build Web sites that require support for both major browsers. Beginners might assume that this would be an effortless task because both Netscape Navigator and Microsoft Internet Explorer support the HTML standard.
  • How to create a Web site - An article reviewing several books on how to build and maintain a web site.

ERIC (at EBSCOhost)

A list of links to documents that I found on Eric at EBSCOhost