Your Arch 610 website will contain a summary of your computer graphics work for the term with at least 9 pages. As curator, you will choose a selection of work from your assignments or other digital design projects to demonstrate your ability with 3D modeling & rendering, image processing and illustration software.

For this assignment, you will edit your index page and customize your first project page with 3 or more images from a previous homework assignment.

Plan how to format graphics for the small screen considering the following:

• Who is my audience?
• What is the main point to convey?
• How can my material be broken into a logical sequence of chunks?
• What additional graphics are needed to present the idea?
• How can design principles such as Contrast, Hierarchy, Rhythm, Color, Shape, Alignment contribute to the presentation?

PART I: Download, Text Format, Link, Upload

1. Download the student web page template : [student_template.zip]. Uncompress these files into a student_template folder by double clicking. Older computers may require ZipCentral on Microsoft Windows or Stuffit Lite on Macs utilities are available on the Duckware CD-ROM from the Computing Center.

2. Customize the index.html page. The web page template folder has an organization you will use to organize projects. 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 projects should be in individual assignment 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.

a. Add an image. Start by placing a digital image JPG or GIF for your homepage in the first "template_images" directory. Opening up the index.html file, use Adobe GoLive to insert this image into your homepage by clicking on the large grey box and drag an image filename from the site window.

b. Edit the text. Type over the dummy text to give your name

c. Create a link. Type "Visit My Blog", highlight the text and click on the chain button in the Inspector Palette. Type the URL of your Blogger.com site: http://title.blogspot.com. You can also type in a phrase at the bottom of the page that reads, "go back to Arch610 class page", then highlight it and create a link to <http://www.uoregon.edu/~graphics>.

3. Upload the template into your own remote network account on UOREGON. When you sign up for e-mail, you are assigned file space on the UOREGON shell 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.

File Structure
When you have correctly uploaded your website with your first assignment, your UOREGON account should contain a public_html folder that looks like the image below left, with pictures for assignment01.html in the "assignment_images" folder. Check the page with Internet Explorer or Mozilla browser. If your e-mail is jsmith@www.uoregon.edu, you would enter your URL in your browser as:

http://www.uoregon.edu/~jsmith/arch610

After you have developed 2 additional assignments and other course web pages, your public_html folder could look more like the image below right. Your course webpage will be accessible from:

Later, you can create a cover for your overall UOREGON homepage, a "public_html/index.html" file, which masks the contents of your public_html directory, and should contain a link to your public_html/arch610/index.html page. This overall cover page will cover the directory visible from : http://www.uoregon.edu/~login/

PART II: Virtual Museum Example

4. Edit the assignment 01.html to present a previous Arch 610 assignment. Using Plan where images could go using the assignment01.html table format. Write about 300 words to describe your project.

5. Prepare images. If necessary, resize and correct the image format. Using Photoshop's, "Save for Web" command, save the image as a JPEG or GIF file. (File type descriptions.) Copy the files to the assignment01/assignment_ images subdirectory.

6. Insert the images onto your web page. Using GoLive, highlight a gray box on the assignment01.html page and browse to select an image from your assignment_images folder. release it where you want it to appear in the page layout. You might have to delete extra gray box placeholders.

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

8. View the new pages. Using your browser, type in your own URL and click through the pages to see what your new website 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.

9. 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.
• Get a head start and create other pages for your portfolio.  Make small JPG files that link to large PDF files.
• Create and link in a movie created from your Sketchup Tourguide slideshow
  

REFERENCES
STEP BY STEP ASSIGNMENT DIRECTIONS: These text directions are an updated version of older video tutorials below prepared on GoLive CS on Windows with the Gladstone rather than the UOREGON Shell server. You may download the compressed zip files or view the movies on the web.

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]

A List Apart Primer - lays out the territory of web design with links to key essays
Web Design From Scratch - for understanding what works
Architect & Designer Webpages - for inspiration
Color Scheme Generator - for fun ideas

EVALUATION CRITERIA

Concept (~2 points)

• Expressive sense of place - conveys a strong personality or story rather than a "generic" atmosphere
• Presentation has a focus and hierarchy
• Each element contributes to the whole

Design Quality (~2 points)

• Takes risks in experimenting with possibilities
• Unified aesthetics:  harmonious geometry, forms
• Well-composed images
• Harmonious color palette
• Strong sense of craft 
• Navigation logical & easy to follow

Technical Competence (~3 points)

• Hyperlinks work correctly
• Images are resized in Photoshop rather than Golive
• Images of proper Web formats show up with good quality
• Naming conventions are followed

Completeness (multiplier factor 0 to 100%)

• Timeliness
• Comprehensiveness (i.e. 3 images on assignment01.html)
• GTF emailed