| Basic Web Design
Friday- November 6th, 2009 |
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 separate page
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 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. |
|||
|
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. |
|||
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: |
|||
|
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: 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? How
can I make it easier for people to find my page using search engines
like Google? |
|||
|
Online
Guides to HTML and Web Design: |
|||