| Basic Web Design
Tuesday - November 14th, 2006 - 12:15-1:15 |
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 |
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.
|
|||
|
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. |
|||
|
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. |
|||
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: |
|||
|
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: If
you're still not convinced, check out the world's
worst web page. 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. |
|||
|
Is
HTML source code/Dreamweaver case sensitive? For
what size screen should I design my page? Why
are my images and links not working once I upload my page? What
should I name my HTML file? How
do I create a link that users can use to email me? Can
I link to a PDF document? |
|||
|
Online
Guides to HTML and Web Design: |
|||