Due Date: Sunday October 28th, 2007 at 11:59pm
Weight: 25%

Part A: Graphics

Introduction

In this part of the assignment, you will create two images that will be used in the web site that you create for Part C of this assignment. These images may be created using Corel Paint Shop Pro Photo, Jasc Paint Shop, Adobe Photo Shop, or any similar graphics program. Save these two images in GIF or JPG format and store them in the images folder within the root folder of the web site that you set up in Dreamweaver for Part C.

Your Task

Create a logo that will be placed at the top of each page in your web site in Part C. The design of the logo is up to you. It may contain text, shapes, or whatever you please. The purpose of this exercise is to practice using a graphics program. We are not at all interested in how creative, complex, or professional-looking the logo is. Use the name logo.gif (or logo.jpg) for this image.

Create an advertisement to be displayed in the main index.html page of your web site in Part C. The image that you create must have the following dimensions: 100 pixels wide by 200 pixels high. The choice of the advertisement is up to you. It should include both text and graphics. It does not have to be as fancy as the advertisements that are generally posted on web sites. Use the name ad.gif (or ad.jpg) for this image.

Part B: HTML

Introduction

In this part of the assignment, you will be using Notepad (or any plain text editor) to create a single web page from scratch using the basic HTML tags that were taught in lecture (and are covered in the HTML section of the Course Package). You cannot use a program which automatically creates the HTML code for you (such as Dreamweaver). The purpose of this part of the assignment is to practice using HTML.

Your Task

Create a single web page using HTML that will be displayed when the user clicks on the advertisement logo that you designed in Part A. This means that the content of this single web page should be somewhat related to the advertisement logo. Name this web page ad.html, and save it on the W: drive on campus (or the public_html folder if you are using FTP from home). Do not put it within a folder on the W: drive on campus (i.e., the URL for this web page should be http://www.utsc.utoronto.ca/~07hunter/ad.html ... substitute your own user name for 07hunter).

Here are some requirements of this web page:

• set background colour of web page
• title (at top of window and at top of body of web page)
• different heading levels
• at least one paragraph
• at least one horizontal rule (the <hr> tag)
• at least one table
• at least one font change (use the <font ... > tag)
• include an absolute link to the main page of the web site that you create for Part C (i.e., link to http://www.utsc.utoronto.ca/~07hunter/a2/index.html ... substitute your own user name for 07hunter)

Part C: Dreamweaver

Introduction

For this part of the assignment, you must create a web site that has 4 pages that are linked using a navigation menu (each page has a link to each of the other pages). The content of this web site should be related to your co-op area of study. Keep in mind that you won't be evaluated for the actual content of the web site (and you may use Lorem Ipsum text if you prefer), but it is good practice for you to use a scenario that is related to a potential work placement that you might have.

Your Task

When you create your web site, you may use any of the templates or style sheets that are available within Dreamweaver to save yourself some work. Here are a few more specific requirements of your assignment:

• the 4 pages in your web site must have a consistent look
• the logo that you designed in Part A should be used on all 4 web pages
• you must use a cascading style sheet
• navigation to and from all pages (use relative links)
• an email link
• main page must be named index.html
• root folder for remote site must be called a2
• the main index.html page displays the advertisement image that you created in Part A. When the user clicks on this image, s/he is taken to the ad.html page that you created in Part B (use an absolute link since it links to a page that is not part of the root site that you set up in Dreamweaver for Part C).
• link to an external web site that opens in a new browser window

Your web site will be available from the Internet using the address http://www.utsc.utoronto.ca/~07hunter/a2/index.html (substitute your own user name for 07hunter).

Setting up Your Site

File Permissions Issue

Because of the way the file permissions have been set up at UTSC, the remote a2 folder must be created before you set up your new site in Dreamweaver. There are two ways to solve this problem (choose one of them):

Solution 1:

Open the site that you created in Dreamweaver during your tutorials and connect. Within the root folder, create an a2 folder. Within this a2 folder, create an images folder. Click on the a2 folder, and then click the Put icon to put the a2 folder and its contents on the server. Then delete the a2 folder from your local root folder. This will not remove the remote site copy.

Solution 2:

As shown during lecture 4, establish a UNIX connection to your account on fissure.utsc.utoronto.ca. Type the following UNIX commands:

cd public_html
mkdir a2
mkdir a2/images
chmod go+rx a2
chmod go+rx a2/images
logout

Dreamweaver Site

From within Dreamweaver, create your new site using Site-->New Site..., click the Advanced tab, and use the following settings:

Local Info:

Site name: <choose any name>
Local root folder: G:\...\a2 <create an a2 folder, and choose this location>
Default images folder: G:\...\a2\images <create an images folder within the a2 folder>
HTTP address: http://www.utsc.utoronto.ca/~07hunter/a2

Note: Your local root folder and your default images folder will be created somewhere on the G: drive if you are working from campus, but would probably be somewhere on the C: drive if you are working from home. The exact locations are up to you; we have used '...' above to indicate this.

Remote Info:

Access: FTP
FTP host: fissure.utsc.utoronto.ca
Host directory: public_html/a2/
Login: <your UTSC login id>
Password: <your UTSC password>

Submission

Part A: Graphics

Your TA should see your images listed using the following URL:

• http://www.utsc.utoronto.ca/~07hunter/a2/images/ (substitute your own user name for 07hunter)

Part B: HTML

Your TA will view your ad.html web page using the following URL:

• http://www.utsc.utoronto.ca/~07hunter/ad.html (substitute your own user name for 07hunter)

Part C: Dreamweaver

Your TA will view your web site using the following URL:

• http://www.utsc.utoronto.ca/~07hunter/a2/index.html (substitute your own user name for 07hunter)

Using Blackboard

You must submit the URL of your Part C web site to Blackboard. No files will be submitted using Blackboard, since your TA will be able to view your files from the Internet. Login to Blackboard by entering your UTORid and password.

• click on the link for the CSCA01 course
• click on >> View/Complete Assignment: A2
• type your web page address for Part C into the Comments box. If there is anything else that you wish to tell your TA, also type it into this box.
• there are no files to submit to Blackboard for this assignment.
• click Submit to submit the comments in the Comments box. Make sure that you have correctly entered your URL into the Comments box before clicking Submit, as you CANNOT RESUBMIT AN ASSIGNMENT! If you are not ready to submit, just click Save and visit this web site again later to complete the submission.

Always be sure to keep a backup of your submitted files, just in case something goes wrong.