PLEASE NOTE:

In order to kickstart the UO[v]MoMA, PART I is due Thursday Sept 29, 2005. PART II and III are due, as all subsequent assignments, the following lecture session from when they are introduced.

PART I: Thumbnail picture for student section

Use a digital camera or scanner to capture your face. Open the picture in Photoshop and crop and alter the image size so the final picture is 156 x 156 pixels. Name the picture lastname_firstname.jpg Send an e-mail to your GTF, including your name, section info and attach your picture.

PART II: Download, Text Format, Link, Upload

1. Download the student web page template : [student_template.zip]. Uncompress these files with Stuffit Expander on Microsoft Windows or Stuffit Lite on Macs. Both utilities are available on the Duckware CD-ROM from the Computing Center.
Homework assignments MUST be named assignment01.html, assignment02.html, etc. in an Arch222 folder to show up on our class web page and be graded.

2. Customize the index.html text. The web page template folder has an organization you will use as the course progresses. Inside the Arch610 directory (folder), there is a subdirectory or folder named “template_images”. Keep image files pertaining to your index.html file in this folder. Your assignments will be in individual folders. The individual assignment folders will contain your assignment html file and assignment images. Keep your assignment image files within the correct “assignment_images” folder. Start by placing a digital image for your homepage in the first "assignment_images" directory.

Opening up the index.html file, use Adobe GoLive to edit the text and insert the picture into your homepage

3. Create a link from your homepage. Highlight some text and click on the chain button in the menu bar. You can now find a file to create a link to. Suggestion: type in a sentence at the bottom of the page that reads, "go back to Arch610 class page", then highlight it and create a link to <http://darkwing.uoregon.edu/~graphics/index.html>.

4. Upload the template into your own remote network account on Darkwing. When you sign up for e-mail, you are assigned file space on the Darkwing server that can be used for webpages. Using GoLive, enter your e-mail password and user name to establish an ftp-connection and then upload the web page template. Once you are connected to the server, create a folder called "public_html" if you do not have one already created. You will put all your webfiles in this folder only.

Check the page with Internet Explorer or Mozilla browser. If your e-mail is jsmith@darkwing.uoregon.edu, you would enter your URL in your browser as:

http://darkwing.uoregon.edu/~jsmith/

PART III: Virtual Museum Example.

5. Analyze an online design presentation on the assignment01.html file.
Browse the class Design and Museum Resources and select a website that excels at presenting art or design work. In the text, discuss one or more of the following (~300 words)

• What is the message and how do the graphics contribute to its communication?
• Identify how design principles such as Contrast, Hierarchy, Rhythm, Color, Shape, Alignment contribute to the presentation.
• What would you change about the website to improve its appearance or functionality?
• What opportunities and limitations come with online (vs. print) presentations?

Include 2 to 4 thumbnail images resized from selected website. (See fair-use guidelines) You can "hunt" for images by taking screenshots (shift-cmd-4 for the Mac; shift-printscreen on PC) and pasting them into Photoshop.

6. If necessary, correct the image format. Using Photoshop's, "save for web" command, save the image as a JPEG or GIF file. (File type descriptions.) Upload the file to the images subdirectory.

7. Insert the images onto your web page. Using GoLive, drag the image file onto the assignment01.html page and release it where you want it to appear in the page layout. You might have to delete extra placeholders.

8. Upload the new files. Using GoLive, upload your assignment01.html file and image file into your network space, in the correct location.

9. View the new home page. Using your browser, type in your own URL and click through the pages to see what your new home page looks like, and to make sure the links are all correct. If you cannot view the web page using your browser, you probably have not completed each of the steps correctly.

10. Send an e-mail to your GTF telling how it went and listing your web address.

For the advanced: Create custom graphics to substitute for the given components of the student template.

References:

These movie tutorials show the above steps on GoLive CS on Windows. You may download the compressed zip files or view the movies on the web. The steps are also available in text form.

Downloading and saving "Student Template":
-view tutorial | download movie: [Downloading_Template.zip]

Unzipping the template files:
-view tutorial | download movie: [Unzipping_Template.zip]

Getting started:
-view tutorial | download movie: [Getting_Started.zip]

Editing your homepage:
-view tutorial | download movie: [Editing_Homepage.zip]

Editing your assignment pages:
-view tutorial | download movie: [Edit_Assign01.zip]

Uploading your student templates:
-view tutorial | download movie: [Uploading_Template.zip]

Expanding your website with new assignments
-view tutorial | download movie: [Expanding_Assignments.zip]

Entire Tutorial
-view tutorial | download movie: [All.zip]

Arch610 Design and Museum Resources
Fair-use Copyright Guidelines
GoLive and Photoshop Manuals