Let's work on your web pages

Some of this comes from:
John Butler's web page at the Univeristy of Houston (Get through the funny stuff about moles and there are links to a Mac and PC version of his Short Course. It shows examples of the header sizes, etc. and what all the various open/close commands mean. Thanks Pam!)

Link here to the files that we generated in class

Fire up the html editor: Alpha

1) On the Macintosh side of the computers, connect to your afs space. This can also be done by FTP.
2) Launch Alpha.

Set up your home page

3) You need to get into the HTML mode with may have to be done by saving a file to your afs space (www directory) called index.html without any formatting. That should get a menu to appear that will have the Netscape N.
I figured out that you can get into the html mode by looking under the Config menu->Current mode-> Menus->Html menu.
Note that the file called index.html is your actual HOME page and the browsers look for it when they enter your space.
Your home page will thus be at: http://www.public.asu.edu/~yourafsid.
From it you can then link off to other pages.

Create the document

4) Once the page appears in Alpha, select new document under the HTML menu (we will use it almost all of the time).
5) You will get a dialogue box asking about parameters such as background color, etc.
You can experiment with colors by looking under the html menu->html utilities->Colors...->View, etc. Once you get a color that you like, you can give it a nmae (only saved on that local machine in the Alpha Prefs files. Change the background color on a page by going to html menu->html utilities->Colors...->View->html picker (find this on the column on the left), find you color, and then copy the color code and paste it into the background color spot in the body tag.
6) Now you are ready. Start typing, and format away. Save often, and then send the file to the browser to see how it looks occasionally.
Other things to consider:
Last modified tag
Lists
Tables
Preformatted text

Links

7) Link things up by copying the link if you can or otherwise making a note of it, highlighting the link text, and then find links under the html mode menu. You can choose images or actual links.
8) Add images by choosing to link to an image instead of a site.
9) Markers can be used to navigate within your page:
use this <a name="marker"> to indicate the location to which you can transfer, and then in a table of contents or otherwise set up the link, give the file name and then #marker: <a href = "html.html#marker">Go To marker </a>.

Page layout considerations

Try to think a bit about how you want your pages to look. Try to use a uniform style (backround color, headings, etc.). Add navigation buttons so that the users can get around in your pages. Note how all of our class pages have that graphic linked to the class home page.

Converting other files to web ready ones

Graphics

Note that browsers only like to see *.jpeg or *.gif files for graphics. These are bitmap file formats with 72 dpi resolution. If you want to convert a graphic that you may have drafted in Canvas, save as *.gif and select 72 dpi. Note that you may want to go into Adobe Photoshop to adjust the size and resolution to be appropriately sized.
Here is a big graphic that uses a smaller thumbnail as a link:

Here is how I did it:
<A HREF="../CentralAsia.gif"><IMG SRC="../CentralAsia.gif" WIDTH="117" HEIGHT="95"></A>
Notice that I squashed the figure to be one-tenth of its original size in the image tag. That could be done also by making a second smaller file in Photoshop, but this seems ok.

Word processor to html

I like to use rtftohtml to go from Rich text format (saved as from Microsoft Word) to html.
See other links on this page for other converters.

Image maps

Have a look at the map that Steve Reynolds has developed by viewing the page source on this page: http://www-glg.la.asu.edu/~sreynolds/azvt/azrelief_new.htm
The basic point is that you define a series of zones on the image and those zones correspond to links (that is called the map). Then when you display the image, you tell the browser the name of the map that you will use:
Define map:
<MAP NAME="azrelief" WIDTH=400 HEIGHT=480>
<AREA shape="poly" coords=" 102,1, 60,94, 217,177, 221,215 ,403,283 ,402,1, 102,1 " href="az_northern/azn_relief.htm ">
<AREA shape="poly" coords=" 8,74, 57,0 ,102,1, 60,94,99,220, 34,227, 9,74, 8,74" href="az_northern/aznw_relief.htm ">
<AREA shape="poly" coords=" 63,93, 99,219, 405,353, 404,283 ,221,216, 216,177, 60,93, 63,93 " href="az_central/azc_relief.htm ">
<AREA shape="poly" coords=" 1,380,34,225, 99,219 ,404,351, 402,479, 259,477, 1,380" href="az_southern/azs_relief.htm ">
</MAP>

<IMG align=left SRC="azrelief_color_reduced.jpg" usemap="#azrelief">

Assignment #9

Assignment 9 is to make your own web home page with formatted text, links to other sites, and have at least one graphic. Include a link to a page that is the outline of your final project, and add at least one link to a formatted presentation page. Email the url of your home page by Wednesday, November 26 at the beginning of class to glg490@asu.edu


Pages maintained by
Prof. Ramón Arrowsmith
Last modified December 28, 1997