Exercise 10: Photoshop Tennis Website

Creating a Webpage
1) Create a folder on your desktop titled “Webpage”. Inside that folder create another folder titled “images”.

2) Place your six images from last week’s class into that folder. Re-title those images, “1.jpg”, “2.jpg”, “3.jpg”, “4.jpg”, “5.jpg”, “6.jpg”.

3) Open Dreamweaver. Create a new HTML page. Save that page in the “Webpage” folder, and call it “index.html”.

4) Explore the “Properties” tool bar in Dreamweaver as well as the three different interface layouts (code, split, design).
*Notice that once you have created a new font style it can be accessed in the “style” drop down menu in the Properties tool bar.

5) Once you have explored the interface a little, make a page that includes the following:

A) Title
B) Authors (you and your partner)
C) Starting image
D) Navigation buttons
E) A background colour that is not white

6) Once you have designed a page that you like, save it again as “index.htm”. Now choose “save as” and call the page “2.html”. Repeat this process, saving the page as “3.html”, “4.html”, “5.html” and “6.html”.

7) Open each page in Dreamweaver and change the images to correspond with the title of the pages (for instance, “3.htm” should feature 3.jpg). Also change the locations that your navigation buttons link to (for instance the “Backwards” link on the “3.html” page should link to “2.html”, and the “Forward” link should link to “4.html”).

8) Hit F12 to test your page and see if all the links work. If so, move on to uploading the webpage.

Uploading a Webpage
1) Open Fetch.

2) In Fetch input the following information:

Hostname: ‘webspace.ocad.ca’
Username: your own username (your OCAD login id)
Password: your own password (your OCAD login password).
Connect using: “SFTP”.

3) Start by double-clicking on the www folder in order to go inside it. (If you want something to be visible on the web, it must go INSIDE the www folder.)

After you are inside the www folder, click on the “Put” command (at the top of the screen). Then select the files you want to upload.
*ONLY use the “Put” command. Do not drop the files in or copy and paste them.

4) Open an internet browser (Firefox or Safari) and type in the following URL: http://webspace.ocad.ca/~youruserid

Notice the “tilde” ~ symbol before your user id. You must type it in the URL to get to your website. Also remember to substitute your own OCAD login id where it says youruserid. You should see your index.htm page.

5) Create a post on the blog that includes your name and the URL for your index.html page (the same one you typed into the browser in step 7 above.