HCS 560 - Lab #5

STEP

Create a new directory in your temp folder (in class) or in your documents folder (in the lab or at home) that matches your website username (or just use webproject). Create a folder called images within the project folder.

In the public labs, Enable your network access. Otherwise, connect to your Internet Service Provider. Start up your normal web browser. Connect to: hcs.osu.edu/hcs560/template.html

This is your resume template to modify for this assignment. In your browser, click on File/Save As, name this file resume.htm, and save it to your username directory on your disk or in your temp folder.

Connect to the class website at: hcs.osu.edu/hcs560/

Position your mouse over the OSU logo at the top of the page and click on the right mouse button. Select Save Picture As.... Enter logo as the new file name and save it into your images folder.

STEP

You are now ready to start modifying the template. Start the Dreamweaver program by clicking the Dreamweaver program icon in the programs menu or the Macromedia Dreamweaver shortcut in the public lab. You only need the Properties window open. Feel free to close the others. Then click on File, Open and navigate to your downloaded file - resume.htm

Now you are ready to start typing in the appropriate Employment, Education, Experience, Activities, and References information. Just highlight the existing text and replace each entry with your own information. For example, highlight First Name, Last Name and replace it with your name.

DO NOT erase or delete the Employment | Education | Activities | References entries. These are hotlinks to the major sections of the resume. Please be sure to complete each of the three sections under Activities and Reference.

It is OK to delete the second set of entries (Name of School, Degree earned, etc.) in the Education section if you don't want to list a second school. Alternatively, feel free to copy and expand the number of work positions beyond one company in the Employment section.

STEP

In the Education section, include the following text:

Contributed to the development of the Ohio State Horticulture & Crop Science distance education program.

You will now make a hotlink to the OSU HCS150 web site. In the Dreamweaver Properties window, click in the "Link" box on the left side of the properties window and type in the following:

http://hcs.osu.edu/hcs150/

Next you will create another hotlink to your email address by highlighting the text that says "Email address" in the upper right of the resume template. You will notice in the properties window that the hotlink reads: mailto:username@hostname. You need to change the username@hostname portion to your own email address. Otherwise, any email messages will be undeliverable.

STEP

Change the color of the background from the default color to white. This is done by selecting Modify from the Dreamweaver top main menu selection, then scrolling down to Page Properties. Click on the small square background color choice box, then select the white color box to select a white page background. Alternatively, you can type the following color code in the space to the right of the color picker, #FFFFFF. Click Apply.

Remain in the Page Properties dialog box, then go to the input box for page titles and type in "Resume of Your Name" (replace "Your Name" with your name). This will personalize the title of your resume webpage. Click OK to leave the page properties dialog box. Clicking OK will apply both the background color and page title changes you have made.

Next you will insert an OSU logo in the empty table cell to the left of your name. In the Dreamweaver main menu click on Insert, then scroll down to Image. Locate the image file of the OSU logo that you saved in Step 1. click Open.

Lastly, add a line at the top of your resume that says: Return to Home. This line should be hotlinked to: index.htm

STEP

Click on File, Save. Congratulations, you just created your first page of HTML.The next step is to preview it using a web browser. Click on File, Preview in Browser. Check to make sure that everything is working and looks fine. If something needs to be corrected, switch back to Dreamweaver.

STEP

Now you are ready to create your index page. This is the first page that gets loaded when someone connects to your website. In Dreamweaver, click on File, New. This will create a blank page. To make things easy, we are going to start with a title page that informs people about your project. Specifically, use your Project Proposal form and include the five major topics that you have already started thinking about. You can present it as numbered items, bulleted items, a combination of the two, or some other approach.

At the bottom of your page, include the following: Website design by (Your name)

Your name should be hotlinked to resume.htm You can add more than this if you want but this is all that is required to get your website up and running. Click on File, Save. Save the file as index.htm and make sure it is in the same folder as resume.

STEP

You are ready to upload your files to your free account using the ws_ftp software. This time, the settings are:

Server Name: free.hostdepartment.com
User Name: (your username)
Password: (your password)

You will need to navigate to the My Documents folder on the Local site. Upload the index.htm page and the images folder.

Depending on the traffic, transferring files may take a few seconds. Be patient.

STEP

Check your exported file on your free account in a web browser. If it looks fine, print a copy of your resume from the browser. The address should be: http://free.hostdepartment.com/*/username/resume.htm

* first letter of your username