Institute of Arctic Biology
416 Irving I Building
University of Alaska Fairbanks
Fairbanks, AK 99775

Overview

There are several steps to creating your personal IAB web page and publishing it on Mercury. Many of these steps depend on previous steps, so if you are going to use this method to create you web page, please follow the steps in order. These steps are detailed below, and summarized here.

1. Obtain a Mercury computer account (username and password).
2. Download and install the key client software.
3. Download and install Dreamweaver.
4. Set up your Mercury account for web hosting.
5. Set up your computer for web editing.
6. Create your main web page using Dreamweaver templates (optional).
7. Edit your newly created web page.

This page was created using templates, so the structure of your new page will be similar to this one.

Getting access to Mercury, the IAB web server

Mercury is the web server for the Institute of Arctic Biology, the Department of Biology and Wildlife, and the Alaska Cooperative Fish and Wildlife Research Unit. Any user with a Mercury account can also have their own personal web space. If you do not yet have an account, contact Carol Piser in the Biology and Wildlife office 211 Irving I (phone: 474-6294). An account will be created in which your username is your first and last name, separated by an underscore (e.g. john_doe). An email with instructions and a temporary password will be sent to you when your account is created.

Getting Dreamweaver on your computer

Getting a Concurrent License Copy

The easiest way to get started is is to download Dreamweaver from the UAF Office of Information Technology web download site. The way it works is that UAF has a license for a certain number of "seats", which really means the number of people that can use the software simultaneously. For Dreamweaver that number is 70 for Windows and 30 for Mac. The way the license is enforced is that you must download and install a key client to your computer, which will check with the key server to see how many folks are running Dreamweaver at the moment that you launch the program. If there are less than 70, then the key client will say "OK" and launch the program. If there are 70, then you won't be able to start the program. If your computer doesn't have the key client software, you will need to download that as well.

So go to the Windows Key Client installation page for instructions and the link to the key client installer (go here for Mac OSX). After you load the key client, then go back to this page, http://www.alaska.edu/keys/, and download and install Dreamweaver. Remember to write down the serial number listed, because you will be asked for it during installation.

It's pretty easy. While you are on that page, you might want to download and install Fireworks (made by the people that make Dreamweaver), which is designed for creating and editing web graphics.

Here is a recap:

• Download and install the key client
• Download and install Dreamweaver
• Download and install Fireworks (optional)

Benefits to using Dreamweaver:

• It is free
• It is easy

Drawback:

• You can only use it on a computer that is connected to the UAF network. The key server will not recognize computers that come from other networks, such as your ISP from home.

Purchasing a Copy of Dreamweaver

As a member of the UAF community, you are entitled to Academic Discounts at the UA Technology Center on College Road. Last time I checked, Dreamweaver was $99 (it is $399 list price). Fireworks is also $99, but if you are going to purchase both, you might as well get Macromedia Studio, which includes Dreamweaver, Fireworks, Flash, Freehand, ColdFusion, and maybe a couple of other things. Last I checked it was $199.

Benefit: you can use it on any computer, anywhere, any time.

Drawback: costs money.

Dreamweaver and other HTML Editors

Dreamweaver, a program made by Macromedia, is one of the most popular HTML editors on the market. It is a full-featured editor that can work in WYSIWYG (what-you-see-is-what-you-get) mode or in HTML code mode. It also integrates well with several other Macromedia programs designed for creating and maintaining web sites.

If, however, you would rather use a different editor, there are many options. HTML files are just text files, so if you want to edit the HTML code directly, you could use Notepad or any other text editor. (Click on View, then Source or Page Source to see what HTML code looks like.)

Here is a list of some other editors available for download (some will require payment after a certain length of time). For a more compete list, go to the ZDNet download site.

• Homesite
• NVu
• SiteBuilder

Back to top

Getting set up to create your IAB web page

We first need to create the directory, or folder, structure that will contain your web site. You must be logged into Mercury for this step. If you have a network drive labelled "M:\" then you are logged into Mercury.

• At the root of your own M drive, create a directory called "public.www" to contain your web files. Any files in this folder or subfolders will be visible on the web.
• If you are going to use the IAB CV templates in Dreamweaver, you must also create a folder for them. Within the public.www directory, create a subfolder called "Templates".
• For all but the simplest web pages, I would also recommend creating folders called images and publications, so that supporting files will be organized.

Once your site is set up, the base URL for your website will be "http://mercury.bio.uaf.edu/~user_name/" where "user_name" is your Mercury user account, typically your first and last name separated with an underscore.

Back to top

Creating Your Page From Scratch

There are many IAB faculty web pages that were made from scratch, rather than from a template. There is nothing wrong with doing it that way. You can base your web page on your CV, and you can control all aspects of how your web site looks. If, however, you would like to do the formatting in a quick and easy process, and have the structure of your page conform to the "IAB look," very similar to this page, see the next section.

If you do intend to create your site from scratch, you must still copy your web page files into the public.www folder that you just created on mercury. Again, the URL for your website will be "http://mercury.bio.uaf.edu/~user_name/" where "user_name" is your Mercury user account, typically your first and last name separated with an underscore.

You can copy your files to public.www via an FTP client, or using the mapped drive (M:/) if you log in to Mercury. If you don't understand what that means, then you are a candidate for using the method below!

Back to top

Creating Your Page Using Dreamweaver

Dreamweaver has a function called templates, which are pre-built framworks for web pages that can be used over and over. There are two IAB CV-style templates available for your use that are stored on the Mercury public drive (P:\).

You can use Dreamweaver with or without using the template(s). If you choose not to use a template, just ignore the steps about templates below.

Create a Site within Dreamweaver:

To create a page in Dreamweaver (DW), first open Dreamweaver. You will have to create a site first:

1. Click on Site, Manage Sites, then New Site.
2. Give your site a name (e.g. Irons CV). This name will be what your computer calls the site. Click Next.
3. For Server Technology, if you don't know what it is, then you don't want it. Click Next.
4. Now you tell DW where to store the local files, the ones that you work on before putting them on the web. DW calls this the Local Site, where you do your editing. By default, it creates a new folder in your My Documents folder, using the name that you gave the site in step 2. If this doesn't suit your needs, browse to another folder using the folder icon, or create a new folder. Click Next.
5. Now we set up the Remote Site (the actual web site that the world will see). In the drop-down menu in the first text box, select FTP as your connection method. The settings on this page are as follows
   1. Connection Type: FTP
   2. Hostname: mercury.bio.uaf.edu
   3. Folder on Server: public.www
   4. FTP Login: user_name (enter your own username here)
   5. FTP Password: enter your mercury password here. If this computer is not used by others, you can have DW save your password so that you don't have to type it. But, for security, you might not want to do this.
   6. Click on Test Connection to, of all things, test the connection. If you get an error message, check the typing on all your entries, especially your password. When the test successfully connects, click Next.
6. If you enable check-in and check-out, you (and others) can work on the site without the danger of two people work on a file and overwriting it, losing all the work of the other person. But if only you will be maintaining the site, I would not enable checkin. Click Next.
7. You should be done setting up the site now.

Create an index page from scratch using DW

Begin editing your web page, and save it with a filename of index.html. All modern browser automatically look for a file called index.html, so you do not have to specify the file name in the URL. If you want to use a different filename (e.g. my_way_cool_home_page.html), then you will have to specifiy it in the URL.

Some advice on file names:

• Don't include any spaces in the file name. Instead, use underscores.
• Some web server are case-sensitive, and some are not. I prefer to use all lower case letters in filename.
• Keep filenames short, but have enough information that you will know what the contents of the file are (e.g. iab_logo.jpg, family_photos.html).

Copy the template(s) to your site

1. Go to the public drive on Mercury ("P:\") and look in the cv_templates folder. Copy all the templates into your Templates folder that you just created.
2. If you are not logged into Mercury, you can still access these files by:
   • Start your favorite browser
   • In the location or address bar, type ftp://mercury.bio.uaf.edu/cv_templates/
   • Copy the template files found there.

Create an index page from a template using DW

Next, you will create your main web page, using a template. Open Dreamweaver (if it isn't already open). By default, DW opens a blank page. Close this blank page. Here are the steps to apply a template to a new page.

1. Over on the right side of DW, you should see the Files panel, with the Files tab selected and your new site highlighted. Press the downward pointing green arrow ("Get Files") (it may not be green yet) to get the templates which you copied into your mercury folder. If it asks whether to include dependent files, choose no (there aren't any yet!).
2. Now, click on File | New and choose the Templates tab. If you have more than one site defined in Dreamweaver, then select your IAB site.
3. Once you do that, a list of templates should pop up, with a preview on the right, and a short description below the preview. Pages made with each of the two templates are linked below:
   1. Template5 (blank)
   2. Template5 (partially filled in)
   3. Template6 (blank)
4. Select the template that you want to use, and apply it to the page. This page was made using Template5.
5. Click File | Save As | and save the page as index.html (browsers open pages called index.html automatically, with having to type the file name).

If you chose a template which allows editing of the background colors, let's change the colors next:

1. Click on Modify | Template Properties
2. Choose the area of color that you want to change. The names describe the area that that each property controls.
3. If you know the hexidecimal color that you want, you can type it into the text box. Otherwise, you can click on the color picker (the little box with a color, probably white, in it), and choose a color.
4. If you have a color that you would like to use on another page somewhere, but don't know what the hex number is and it doesn't appear on the color picker, try the following.
1. Choose the area of color that you want to change
2. Choose the color picker
3. Click on the color that you want to change to. It can be anywhere on your screen: it doesn't have to be in the Dreamweaver window.
4. Press return. Your new color should be in the small window!
5. If the template won't let you edit the color of a region that you want to change, send me an email, and I'll see what I can do.

Now to the page content:

1. There is a little box right at the top of the page called "Title:" with the words "Your Name" in it. Change this to your name.
2. Do the same in the box labeled "YourName".
3. Add your title (e.g. Associate Professor of Botany) in the box called "yourtitle".
4. Modify the address, phone number, etc.
5. When you change the email address, you will have to change it in two places: in the address area of the page, and the link to which it refers. In the property inspector (the gray box at the bottom of your screen), you will see a box labeled Link with "mailto:email@uaf.edu" in it. Change this to reflect your correct email address.
6. Add a short title to the box called "title1link" on the left-hand side of the page. This is the start of your "table of contents."
7. Add the same or similar title in the box called "title1." This is where the table of contents link will take you.
8. Add the appropriate content under that heading in the box called "content1." Continue adding as many fields as you wish.
9. Continue adding Headers (titles) in the Table of Contents area and in the main body of the page, and adding content associated with each header.

Photos

1. You can change the photo by clicking on the photo, then clicking on the folder icon next to the box in the property inspector called "Src" (stands for source). This assumes that you have copied your photo into the public.www folder.
2. You can add photos within any of the blue text boxes by:
   1. Copy the photo into your public.www folder.
   2. Put the cursor in the location that you want the photo to appear.
   3. Click the button on the toolbar that looks like a small tree and says Images when you hold the mouse over it. Click Images. (Or click Insert | Images and choose the file).
3. If you want to add a photo in an area that is locked by the template, see below.

Back to top

Editing Your Page

Once you have your site set up, and your index.html file created, editing your page is quite easy. There are many tools in Dreamweaver, and a good help system. A number of tutorials are bundled with the program as well: click on Help | Getting Started and Tutorials. There are many more tutorials and articles on the Macromedia web site: go to http://www.adobe.com/support/dreamweaver/ and you can search for many types of problems or tasks.

If you find that using the template is too restricting, you can detach your new file from the template by clicking on Modify | Templates | Detach from Template. Now, all areas of the page will be accessible to you for modifications.

Enjoy, and happy webmastering!

Back to top