Basic Web Design Workshop

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.

Limit the span of your text. 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.

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 Friday- November 6th, 2009 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 separate page 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 several of the computers in the graduate computer lab. Dreamweaver is also available to use for free from MyApps on MyASU (see below). This is probably one of the best and easiest modern html editors. Opening Dreamweaver via MyApps: 1) Login to MyASU 2) Click on the MyApps link on the left hand side of the screen under Quick Links 3) You will then be prompted to enter your ASURITE password 4) Search for Dreamweaver in the search box at the top of the screen 5) Click the "Run App Now" link and follow the prompts and instructions [back to top]

	Managing your web page All graduate students and faculty at ASU have free public web space available through the MyASU system. To activate your web space, go to the ASU personal webpage FAQ and follow the directions. Steps to uploading or updating your web page: 1) Log into MyASU 2) Click on the My Files link on the left hand side of the screen under Quick Links 3) You will then be prompted to enter your ASURITE password 4) Click on the "www" sub-directory that appears under the folders heading on the left hand side of the screen 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 well 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. Limit the span of your text. 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 such as a phone number? Have you ever had trouble reading a web page because of the color scheme or background image? 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, check out 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. 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? 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>). How can I make it easier for people to find my page using search engines like Google? Check out this quick overview of Search Engine Optimization (SEO). Basically, you want to include pertinent keywords in your title, body text, image tags, etc. There are a number of free tutorials for this online. Just search for SEO tutorials and you will find what you need. [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 Tutorial Another Dreamweaver MX Tutorial Dreamweaver Tutorals from Cal Poly - if you really want to learn Dreamweaver, run through these tutorials. The SEO Rapper Free and Commercial HTML Editors: AceHTML - Free Dreamweaver CS4 - Commercial 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. 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