Basic Web Design Workshop - November 14th, 2006

This page is meant to provide a general introduction to web design including basic html, page layout, and site management. The sections below focus on how to use the free web space provided to every graduate student and faculty member at ASU.

HTML (hyper text markup language) - This is the primary language for creating documents to be published as web pages. It provides a structure for web pages by organizing text and images into paragraphs, tables, lists, headings, etc. using special codes known as tags.

Don't use fancy fonts. Most html editors use fonts that almost every computer will have.

Don't use huge images. Many people do not have high speed connections.

Create a text only version of the page for people with slow connections.

Don't rely exclusively on active content (Flash, etc.). Some people cannot run this content.

Provide alternatives for visual content. If you use images as words, be sure to label the images with the word.

Use tables for the main body of the page. This makes text easier to read.

Be kind to the color blind. There are web sites and programs that can help you with this.

Don't use background images. They make pages hard to read.

Use background and text colors that contrast.

Don't overuse graphics. More images do not make your page look better.

Never NEVER use animated images (can you tell this is a pet peeve of mine?)

Do not over use frames. People with smaller monitors will often be left with little space to read your text.

Don't use music set to autoplay. It's just annoying.

Don't make your tables so wide that users are required to scroll across their screens to read your text.

Use a navigation bar at the top and bottom of your pages so that people can easily find what they need.

Put important information such as contact info in multiple places so that it is easy to find.

Don't use "under construction" signs. If some content is not there, your users will never know unless you tell them.




	Basic Web Design Tuesday - November 14th, 2006 - 12:15-1:15 ANTH 254 (Anthropology Conference Room) Matt Peeples	This page is meant to provide a general introduction to web design including basic html, page layout, and site management. The sections below focus on how to use the free web space provided to every graduate student and faculty member at ASU.

	Arizona State University School of Human Evolution and Social Change	Email: Matthew.Peeples[at]asu.edu

	The Basics *HTML* (hyper text markup language) - This is the primary language for creating documents to be published as web pages. It provides a structure for web pages by organizing text and images into paragraphs, tables, lists, headings, etc. using special codes known as tags. *Tags* - The basic units of HTML code. Tags tell internet browsers such as Mozilla Firefox or Microsoft Internet Explorer how to display images or text. Specific tags are defined between the "< >" characters (i.e. <font>, <list>, etc.). A tag has three basic parts; the tag identifier (i.e. <font>), the tag specifier (i.e., <font face=“Times New Roman”> and the tag closer (i.e., </font>). All tags follow this basic format. I have created a separatepage explaining many of the most commonly used tags. Luckily, with modern web editors, you will usually not have to deal directly with html code. It is useful sometimes, however, when you want a very specific page layout or effect. I have included a number of links to pages with a great deal of information on HTML code below.

	Building your web page There are a number of options for designing, building, and publishing your web page. You can (if you have a lot of free time) write all of your html code yourself using a simple text editor such as Notepad. There are, however, much easier options. Many free html editors are now available. I have included links to several popular open source programs below. Beyond this, a number of "WYSIWYG" (what you see is what you get) html editors are now available commercially. Dreamweaver by Macromedia is installed in all of the computers in the graduate computer lab. This is probably one of the best and easiest modern html editors. The most recent version of Dreamweaver can be purchased from the Computing Commons store for $99 with a student ID. Click here to check out the wonderful Cal Tech web site with tutorials on using Dreamweaver. Steps to starting a new page in Dreamweaver: 1) Open Dreamweaver, go to the "File" menu and click on "New" 2) Select the "Basic HTML" option and click "Create" 3) Go to the "Site" menu at the top of the screen and click on "New Site" 4) Fill out the site name and the location where you want it to be on your hard drive 5) Start editing your page! [back to top]

	Managing your web page All graduate students and faculty at ASU have free public web space available through the EMMA system. To activate your web space, go to the ASURITE service activation page. Log in and click on the account management link to get to the subscriptions page. Subscribe to the Personal Web Hosting service. You will now be able to manage your web page through the EMMA page through the AFS manager link. Steps to uploading or updating your web page: 1) Log into myASU 2) Click on the EMMA link in the top right hand portion of the screen 3) Click on AFS Manager link on the left hand portion of the screen 4) Double click on the "WWW" sub-directory 5) Browse for the file you want to upload (this is the same for html, images, or anything else) and click "upload" 6) Repeat this for all files you used in creating your web page Remember, file associations must remain the same on your web space as they were on your local computer. If your images were in a folder called "pics", you need to create a new directory within "WWW" and upload your pictures there. To create a new directory, simply click on the "Create" button above the listing of sub-directories. To enter your new directory, double click on it. Click here for more information. [back to top]

	Making your web page accessible If you go to the trouble of creating and publishing a web page, you want anyone to be able to see it, right? Many web pages are designed so that they only work on computers with particular operating systems or browsers (such as the NSF fastlane web page). It is extremely easy to make sure your pages are accessible (in fact, you usually have to do something to make them inaccessible). For more on this check out the web content accessibility guide from the University of Wisconsin. In addition to this, Dreamweaver can automatically check your page for accessibility and give you suggestions on how to make sure your page is accessible. Here are a few tips to ensure that anyone can view your page: Don't use fancy fonts. Most html editors use fonts that almost every computer will have. Don't use huge images. Many people do not have high speed connections. Create a text only version of the page for people with slow connections. Don't rely exclusively on active content (Flash, etc.). Some people cannot run this content. Provide alternatives for visual content. If you use images as words, be sure to label the images with the word. Use tables for the main body of the page. This makes text easier to read. Be kind to the color blind. There are web sites and programs that can help you with this. [back to top]

	Web Design and Layout How much time have you spent searching through the web pages of businesses or government organizations looking for information that should be easy to find like a phone number? Have you ever had trouble reading a web page because of the color scheme or background image? Many web designers shoot themselves in the foot by not thinking about their users. If you make something look fancy but none of your users can find anything, what's the point? A simple and clearly organized web site is not only easier to use, it also looks more professional. If you are particularly interested in the elements of design that can help you communicate your messages clearly, I recommend looking into the books and online tutorials of Edward Tufte. In the meantime, here are a few tips that should help you avoid making common mistakes in web design: Don't use background images. They make pages hard to read. Use background and text colors that contrast. Don't overuse graphics. More images do not make your page look better. Never NEVER use animated images (can you tell this is a pet peeve of mine?) Do not over use frames. People with smaller monitors will often be left with little space to read your text. Don't use music set to autoplay. It's just annoying. Don't make your tables so wide that users are required to scroll across their screens to read your text. Use a navigation bar at the top and bottom of your pages so that people can easily find what they need. Put important information such as contact info in multiple places so that it is easy to find. Don't use "under construction" signs. If some content is not there, your users will never know unless you tell them. If you're still not convinced, check out the world's worst web page. #1 Tip: Take things apart The easiest way to learn how to create web pages is look at pages that others have made. If you find a page with a particular feature, color scheme, layout, or anything else that you like, you can save the page on your hard drive and look at it in an html editor. To save the source code and other content for a page in Mozilla Firefox, simply go to the File menu and click on “save page as”. In Microsoft Internet Explorer, go to the File menu and click “save as”. You can copy and paste sections of html source code into your own pages to reproduce things you like. [back to top]

	Frequently Asked Questions: Is HTML source code/Dreamweaver case sensitive? Many portions of HTML are not case sensitive (such as tags - <font> is the same as <FONT> or <FoNt>. Links to other files and images, however are case sensitive (<img src="web_workshop/top.jpg"> is not the same as <img src="web_workshop/TOP.jpg"> or <img src="web_workshop/top.JPG">). The same goes for Dreamweaver. When typing file names as links or for images, make sure that you are consistent with capitalization, including the file extension. The easiest way to ensure that this isn't a problem is to always use all lowercase letters for file names. For what size screen should I design my page? When setting the width of tables and text on your page, remember that the people who will view your page have a variety of screen resolutions and sizes. If you keep table widths below about 600 pixels wide, that is usually okay for almost everyone. Another way to deal with this issue is to set the size of any tables or images based on the percent of the screen it will take up, rather than the absolute number of pixels. This way, your page will work fine for people with older monitors or who do not use their browsers maximized. For example, instead of setting your table width like this (<table width="600">) you can do this (<table width="75%">). In Dreamweaver, simply set the table width by pixels or percent in the properties frame at the bottom of the page. Here is a link with more information on this issue. Why are my images and links not working once I upload my page? When you are creating your web page on your hard drive, you may be linking to images or other files in various folders. When you upload you web page, however, the file structure must remain the same on the web server as it is on you computer. For example, if you are saving your html file in a folder on your hard drive such as this (C:\my_webpage), and you are using an image in this folder (C:\my_webpage\pictures\), then you need to create a folder on your server space called /pictures and upload the image there rather than in the same folder as the html file. Click here to find out more about how to deal with file management. What should I name my HTML file? Most HTML editors give you the option of naming your files with two different extensions (file.html and file.htm). This just has to do with the different naming conventions on various web servers. It doesn't really matter which you choose anymore, but some old school web designers poke fun at people who use the .htm extension. The only other naming convention that matters to most people is for naming the main page of your site. If you want someone to be able to type in you web address without the name of the file (i.e., http://www.yourdomain.com/* rather than http://www.yourdomain.com/mywebpage.html), all you need to do is name your primary file index.html. The browser will automatically be directed to this file if the user does not type the "mywebpage.html" at the end of the address. How do I create a link that users can use to email me? This is basically the same as any other URL link with one small addition (i.e., <a href="mailto:youremail@youremail.com">This is the text the user will see</a>. It is a good idea to type or name or something else rather than your actual email address inside the tag. There are a number of automated programs that search for email addresses on web pages to send people spam. Some people replace the @ symbol with [at] to avoid this. In Dreamweaver, simply type mailto:youremail@youremail.com into the link blank in the properties frame at the bottom of the screen. Can I link to a PDF document? Yes, you can link to a pdf document the same way you link to another html file (i.e., <a href="http://www.yourdomain.com/mypdf.pdf">My PDF</a>). [back to top]

	Useful Links Online Guides to HTML and Web Design: The Bare Bones Guide to HTML HTML Source - Tutorials HTML Forms Tutorial Steps to optimizing your HTML code About.com Java Script Index The Secrets to Building a Successful Web Site Dreamweaver Tutorials from Cal Tech - If you really want to learn Dreamweaver, run through these tutorials. Dreamweaver MX Tutorial More Dreamweaver Tutorials Free and Commercial HTML Editors: AceHTML - Free Dreamweaver 8 - Commercial Easy HTML - Free Matrix Y2K HTML Editor - Free NVU HTML Editor - Free Seamonkey HTML editor from Mozilla - Free Web Design: 10 good deeds in web design - Useful tips for your page Current Web-Style - modern graphic design for web pages Web pages that suck - learn to design good web pages by looking at bad ones. Website development information - some tips to help you design your page Web design features - the good and the bad Web Accessibility: Color blind color picking program Color Theory for the Color Blind Creating Accessible HTML Web Content Accessibility Guide Other Useful Stuff: Flickr - A neat site that allows you to share photos. Once photos are uploaded here, you can link to them in your personal page. Giga Files - A file hosting site that allows you to upload many types of files to use on your page. Photobucket - A photo hosting page that allows you to upload images for your own web page for free. ASU faculty/student web page directory - A great source of ideas for your own page. [back to top]

The Basics