Intro to Web Design
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, 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:
- Dave Raggett's Introduction to HTML - This is a short introduction to writing HTML.
- HTMLSource - HTML Tutorials
- HTML for Beginners / WebDeveloper.com - What is a Web page? What, in brief, are Web pages capable of doing?
- Introduction to HTML - A step by step HTML tutorial, with a quiz at the end of every chapter.
- An interactive introduction to HTML and CGI scripts on the WWW (courseware Netscape) - Covers basic HTML as well as creating forms and frames. CGI scripts are also included.
- HTML - An Interactive Tutorial - Dave's HTML Code Guide - Learn to code HTML with our free HTML help guide!
- Basic HTML: Learning Page of the Library of Congress - A great resource that walks the user through what HTML and to how write code. This site also includes a list of online resources, including guides, tutorials and reference tools related to HTML and web design.
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:
- Macromedia - Dreamweaver - Dreamweaver for beginners - welcome to the workspace for Dreamweaver 3
- Dreamweaver for Beginners - This site contains an introduction to Dreamweaver, as well as walking the user through setting up a site, and much more.
- Dreamweaver MX for Beginners - Dreamweaver MX is a visual editor for creating and managing Web sites and pages. With Dreamweaver, it is easy to create and edit cross-platform, cross-browser pages. Dreamweaver provides advanced design and layout tools and allows users to utilize Dynamic HTML features, such as animated layers and behaviors, without writing code.
- Macromedia Dreamweaver Tutorial - Dreamweaver for Beginners - Leave hand coding by the wayside. This online course shows you how to create a basic web site with some of Dreamweaver's most useful and powerful features...
- Harnessing Adobe's Web Bundle: Dreamweaver For Beginners - Creating Dynamic Layers in DW with Interactive Image Rollovers
- Microsoft FrontPage 2000 Tutorial - Takes you through the creation of a sample site in logical steps.
- FrontPage 2000 Tutorial (FGCU Technology Skills Orientation) - On the Florida Gulf Coast University site, this is a clear and concise guide to creating your first site and will take you step by step through the procedure in a painless fashion.
- Training Tools FrontPage Course - A full course to follow online which includes an introduction to HTML and general web design. Also available as a free download.
- FrontPage 2000 in the classroom - A very nice site which uses the example of how a school class created their site to illustrate various aspects of FrontPage.
Hosting your web site
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.
- 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.
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.
- 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.
WebQuest - 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!"
WebQuest - 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
Task 1 - Research:
- Using Google, Ask.com, and a third search engine of your choice; locate five different dentist websites.
- 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.
- What was included on the sites that you didn't expect to find?
- What wasn't included on the sites that you felt would have made the site experience better?
- Was the navigation on the sites logical and easy to understand?
- 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?
- 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.
Task 2 - Gather Content:
- Create some sort of welcome or introduction for the home page that is easily understood by your intended readers.
- Hours of operation?
- Contact information by phone and/or email?
- Additional areas that you believe should be included.
- Locate images for the web pages. Make sure your images are not copyrighted. (Check the Copyright Examples section under "Links" for assistance.)
Task 3 - Web Addresses:
- Locate official companies that sell web domains. (Look for a message saying that the company is ICANN approved.)
- 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.
- Is the address a .com, .net, .org? Or is it available in multiples?
- What is the cost for each for a year? Two years or more?
- 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.
Task 4 - Hosting:
- Locate at least three different web site hosting companies.
- Compare the products offered.
- What are the pros and cons between the plans and companies?
- Write up an evaluation on what you would be the first, second and third best options for the dentist office to go with.
Task 5 - Develop your web site:
- 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.
- Create a means to keep your web site organized.
- Create a working navigational structure.
- Include all of your content and images into the site.
WebQuest - Resources
Use 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.
- Top Ten Web Design Mistakes of 2005 (Jakob Nielsen's Alertbox) - What not to do when designing a site.
- How Google manages its homepage - An average person can deal with only 7-10 choices on a web page, according to Google research. That's why it's so hard to get a link on the Google homepage.
- Linking to PDFs - Have a specific page in a PDF you'd love to link directly to on your web site? Read about how to do it here!
- Five Critical (and Overlooked) Design Elements - Ask any Web designer about the most important aspects of Web page design. You're likely to hear the same three things over and over: usability, intuitiveness, and color. All are critical.
- Here are 15 tips to make your Web site accessible - Tips for making a dynamic or multimedia filled site accessible to others.
- Build Your Own Website - This site provides information for beginners to advanced web developers.
- Site Editor - Tips when building your web site.
- Tips, Tricks, How to, and Beyond - Web Design Resource - This site was created to help you design "a better web page".
- How to Display Tabular Data - A New Perspective - It's common for a Web developer to build a site or Web application where tabular data is used. ... This article will show you how to display tabular data in a non-conventional manner, preventing table cells from expanding in spite of the length of the text contained inside it, with a nice scroll to show the full text and yes, cross-browser compatible!
- WebReference.com - The Webmaster's Reference Library - Web Authoring Tips & Tutorials for Developers.
- WebsiteTips.com HTML Tutorials, Web Design Tips, Web Master Resources, Web Page Design Tutorials, Articles, HTML Color Charts, CSS Cascading Style Sheets Help - WebsiteTips.com is an educational Web site design and development resource especially for Web site owners, Web designers, Web professionals, webmasters, teachers and educators, students, and anyone wanting to learn about Web sites.
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.
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.
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.|
WebQuest - Conclusion
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
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...
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..."
- 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 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.
- Watchfire WebXACT - Make sure your website is ADA/508 compatible!
- Why Make Web sites Universally Accessible - Accessible Web Design, what's it all about?
- Visually Impaired Users - How To Help Them - Accessible Web Design
- Good Web Site Navigation - Reaching The Information Instantly - Accessible Web Design
- Liquid Design - A Step Forward To Make Your Web site Accessible - Accessible Web Design
- Liquid CSS Layouts - Design Alternative to Table Based Web sites - Accessible Web Design
- Improve Accessibility While Maintaining Design Attractiveness - Accessible Web Design
- CSS Layouts Vs. Table Layouts - Alternate Browsers and Accessibility Issues - Accessible Web Design
- Code Validation - Does It Really Help Users? - Accessible Web Design
- Bobby WorldWide Web Accessibility Tool - How Accessible Is Your Web Site? - Accessible Web Design
- Flash - New Technology That Slows Down Users - Accessible Web Design
- True Web Usability - What is Usability? What makes a Web site usable? How can you prove that a Web site is usable? And how does usability affect me?
- Here are 15 tips to make your Web site accessible - Tips for making a dynamic or multimedia filled site accessible to others.
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
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
- Web Page Design - PDF Article
- The 'Don'ts' of Web Page Design. - Abstract: Discusses online resources that focus on what not to do in Web page design. "Don'ts" include: making any of the top 10 mistakes identified by Nielsen, qualifying for a "muddie" award for bad Web sites, forgetting to listen to users, and forgetting accessibility. A sidebar lists the Web site addresses for the nine resources discussed. (AEF)
- The Evaluation Toolkit: A Work-in-Progress - PDF Article
- World Wide Access: Accessible Web Design - PDF Article