Nancy Cheng, 204c Pacific Hall, 346-3674 nywc@darkwing.uoregon.edu

With this assignment:

• Begin a web portfolio for your course assignments.
• Create assign01.html, a web page containing your self portrait and architectural transformation images from assignment one.
• Create assign02.html, a web page containing an image of a favorite place and an architectural web link to share.

-Understand the concepts of local and remote disk space.
-Understand how to download files from remote locations to the local disk.
-Become skilled at manipulating Web page text, images and links.
-Understand how to upload files from the local disk to a remote location.

PART I:

Download, Organize, Add text & link, Upload

1. Download one of the student web page templates. There are two templates: a simple template and a sophisticated template. Choose the one that matches your web authoring skills.

The simple template has an index page and an assignment 1 page. To add new pages, open the assign01.html file and save it as assign02.html, and so on throughout the quarter. The sophisticated template already has all these pages, plus subdirectories for images, rollovers, and image map navigation.

You can browse the files and download them individually. To get them all at once (wise if you're using the sophisticated template), you need to download and uncompress the .ZIP format simple or sophisticated archive files with a tool such as Stuffit Expander (Mac) or WinZip or ZipCentral (Windows). These tools are available on the UO Computing Center Duckware CD.

Regardless of which templates you use, homework assignments MUST be named assign01.html, assign02.html, etc. within an arch610 folder so we can find your homework. File names on the darkwing.uoregon.edu Web Server are CaSe SenSitiVe (keep them lower case) and avoid spaces.

2. Download your Assignment 1 images into simple template's "images" directory or the sophisticated template's "assign02/images" directory on your own computer. The files and their folder organization should be the same on your local computer and on the Darkwing server.

3. Customize the assign01.html text. From GoLive, open up the assign01.html file on your computer and edit the text. Provide a concise and compelling description of yourself as you would like the public to see it. Later you will add your self-portrait and Photoshop work from Assignment 1.

4. Create a link. Highlight some text and click on the chain 'link' button in the menu bar, or in the Window mneu > Inspector - Link. You can now find a file to create a link to. For example, you could type at the bottom of the page "Department of Architecture", then highlight it and create a link to <http://arch-uo.uoregon.edu>.

5. Upload the pages into your own remote network account. Use a file transfer program (SFTP, Fetch, Fugu, GoLive FTP) to put a copy of all the local Web template files into your remote public_html account. Check to see if your page is accessible from the student webpage index.

E-mail your GTF John or Harper if your name and address are not listed correctly.

PART II:

Develop assign01.html

Throughout the term you will developing your web pages by adding new material and editing how work is presented. The first step is to add in your images.

6. Plan your pages.Your assign01.html page should include your initial Photoshop work, your assign02.html page should include an image for the Design Collaboration project in Week 4 and a link and description of an interesting architectural web page.

Sketch possible layouts. At any time during the term , you can optionally customize the cover index page and standard assignment sheet with your own graphic elements and layout.

7. Create a GoLive site. Use File menu > Open > New SIte > Single User > Import from Folder>, then select your arch610 folder.  The program will create a folder for the website, .data folder for supplementary files and .settings folder and a .site file that keeps tracks of what files go together. After creating the site, GoLive will open a Site Files window. Double click on assign01.html to open it.

8. Add images, text and links. Using GoLive, drag each image file from the Site Files window onto the assign01.html page and release it where you want it to appear in the page layout. Edit the page's descriptive text & links. Adjust placement of pieces to create a pleasing layout. Align edges and standardize typefaces for unity.

TIP: resize your images in Photoshop rather then using GoLive to reduce image and file size. If necessary, replace the existing file in you images directory with the transformed file - maintaining the same file name in order to preserver links to that file.

9. Upload and check. Using FTP, upload the revised *.html and *.jpg or *.gif files to your /public_html/ directory on inside on the Darkwing or Gladstone servers maintaining the same file directory structure as on your local machine. Check the uploaded files in your Web browser, then adjust and upload again as necessary.

PART III:

Develop assign02.html

10. Share place image and architectural Web example  For assign02.html, take an evocative exterior photo of a place in Oregon or your howntown that should be more well-known. Publish the image for German students to see by posting a 200 x 150 pixel thumbnail image called 2.1place.jpg on the assign02.html page linked to a 800 x 600 .TIF image (with LZW compression) in the images directory . The TIF format holds the full color of the image but can't be displayed by the browser so don't place it on a page, just leave it in the images directory.

Find out how designers and architects are using the Web by browsing through suggested websites or conducting a Web search.  Look for content quality, usable organization, beautiful graphics and compelling interactivity. Create a link to the page and explain your choice.

Trouble-shooting

Web pages are a composite of the HTML text file and the separate media files that it references (.GIF, .JPG, etc.). Since the HTML files refer to the media files by name and relative location, broken image links are often caused by:

• link references incorrect: for example using an absolute reference to D:\ drive
• filenames okay in Mac or Windows but not UNIX: Capitol vs. lowercase does matter in UNIX.  Avoid spaces and punctuation in filenames
• filetype can't be displayed (.PSD, .TiF) or file is a different type than named

OR

Students with web authoring experience can submit a Web page design for either the Hong Kong or Rome study abroad programs. Contact the instructor for more information.

References

Cohen, Jonathan, Communication and Design with the Internet
Weinman, Linda, Designing Web Graphics, Deconstructing Web Graphics 2
GoLive Classroom in a Book, Adobe Press (see Computing Center Documents Room for how-to books)
Adobe GoLive Tutorials
Adobe GoLive Video Training
Scan Tips
other web authoring links