assignment
FORM exercise
Uploaded to the secure
server by Week 15
Create a page that has a form similar to this page forms_example.html.
A printed handout with the technical specs of this exercise will be handed
out in class. Or, click here to
view and print a pdf version of the Form Exercise.
assignment
FRAMES exercise
Uploaded to the secure
server by Week 13
Create a framed website with three
frames similar to the graphic below.
The site should have the following shape and number of window panes (3):
| Header | |
| Menu | Changeable content |
The menu frame on the left should have 3 links that target the right hand frame, i.e. each link should display a page into the right hand frame. Click here to see an example of a 2-framed site with menu links targeting the right hand frame window (but don't forget that your exercise will require 3 frames).
A printed handout for the technical specs of this exercise will be handed out in class. Or, click here to view and print a pdf version of the Frames Exercise.
week
11
assignments
number one
SLICING exercise
Uploaded to the secure
server by Week 12
From scratch, slice the Photoshop file contained in the download: image_slicing.zip
Keep the following in mind as you slice this image:
- Set the page title and background color
- Slice neatly!
- make a minimum number of slices
- match up the edges of slices to produce the simplest table
- don't leave any spaces between slices
- Set blank slices to no_image
- Set the optimization for each slice
- Set the matte for each slice
- Hide the background layer so the slices can have transparency
- Make the rollovers, being careful to turn layers on and off appropriately
- Set the URLs and ALTs for each slice that's a link
- Create a link on the "Need to Know" graphic
- Make the animation
- Export the HTML and sliced images
IMPORTANT:
Make sure the animation does not stop when your curser over
any of the rollovers. Check Week11,
under ImageReady Notes, "Animated Gif Issues" (bottom paragraph), on how
to do this.
Replace the graphic of the navigation bar at the bottom of the page with
LIVE text links inside Dreamweaver.
FINAL PROJECT (40%
of grade)
Upload to the secure server by Week 16.
Extra credit for completion on week 15.
Presentation of web site in class is required.
The focus of this project is to create a complete, portfolio quality web site. This project may be used for submission to the advanced Interactive Media Level II program. *You may choose one site from the list below. The objective is to redesign the web site using the assets (photos, graphics, etc.) already existing on the site. You are, however, free to redesign the company logo (and animate if you wish), and add additional graphic elements that you created from scratch. Do not grab images/photos/graphics from other web sites for copyright reasons. You may take your own photos of the site, if the location is local.
Browse through all the sites carefully before choosing which site you are going to redesign for your final project (40% of grade).
*If you prefer do design and build an original site you may do so. The parameters are the same. But keep in mind that you must develop your own visual and textual content, and that the site must be complete (no "this section coming soon" announcements) of high quality.
Also, Macromedia Flash may be used to create motion graphics, navigational, audio or content items, but the site must be built on a multiple page HTML basis.
Note: This list of companies may change. If it does, you will be advised ahead of time.
TITOMA
Time To Market: Design for Asian Marketing
Daedalus
Design, Inc.
A product design and engineering company.
The Griffith Observatory
An observatory in Los Angeles.
Deaton
Engineering, Inc.
A full service
mechnical engineering company.
The
Harvard Art Museum
A fine arts
museum in Harvard University.
The
Grove
A shopping complex
in Los Angeles.
Your new redesigned web site should have a strong aesthetic appeal, an efficient navigation interface, and reflect a level of practicality and technical sophistication that theses companies have.
Your site should consist of at least 6 complete pages with:
- A strong visual design that represents the company well
- A visual theme that is carried throughout the site
- A clear navigation system
- A good system of displaying the company's portfolio
- A design that works well on 800x600 displays (i.e. navigation & primary content inside 770x400)
- Pages that have complete content, including photos and text
Additionally, you must create a visual/informational "flowchart/storyboard" with your site's design, navigation structure and information overview drawn and described. This will be due by Week 13, and will count for 10 of the project's 40 total points.
|
|
|
|
Some examples of ET14 Students' Final Projects:
week 06
assignment
TABLES exercise
Uploaded to the secure server by Week 07
Download the set of files et14_tables.zip and reproduce this page in Dreamweaver. Finish during class, or turn in week 07.
Note: you do not have to make the text flow exactly as it does in the example, because this changes depending on how wide the browser is displaying.
MIDTERM Project: Record Company
Web Site (30% of grade)
Upload to the secure
server by Week 10
Presentation of web site in class is required.
Create a web site for a brand new record company that has a home page and two sub pages. You must develop an original design for the web site. The name of the company should be original (not an existing one). Design a logo or a corporate identity to reflect the type of record company that you are creating. The focus of this project is visual and navigational design, and the primary factor in the grade will be for these elements. Secondary grading criteria include page download size, making the site work well on an 800x600 display, quality of content, and use of tables. And of course, the site must display correctly with no broken links or images.
- The home page should have a graphic treatment that strongly represents the record company's personality and type of music. Do the best you can to represent the attitude of the record company. Pay particular attention to page layout, typography, color, and visual theme.
- The home page should have navigation elements that link to 5 different parts of the web site--you will create only 2 of these content pages. The rest of the web site will be simple placeholder pages that just has the navigation and header, with no content.
- The two sub pages must be complete and include content (i.e. photos and text) for two different areas of the record company site, e.g. Featured Artists and News.
- The two sub pages must include a navigation system that enables the user to get to the other major areas of the site without going back to the home page. This navigation design and the number of links must be consistent with the front page.
Below is an example of the web site layout which demonstrates the structure and navigation for the project. Notice that the sub-pages have a link back to the home page.
The home page must include any 5 of the following links (though
you may name them anything you want). The sub page navigation system
must
include
these 5 links, plus a link back to the home page.
- New Releases - Featured Artists
- Record company web radio station
- Tour Schedules
- Catalog/purchasing
- Submissions to get signed
- News
- Contact info
- Corporate information
Use this list of record company web sites for reference and inspiration:
week 03
assignment
Exercise Two assigned, due Week 4
After learning the last 9 HTML examples (font through meta), do Exercise Two in class, or as homework. Printed handout for technical specs of the exercise will be handed out in class. Or, click here to view and print a pdf version of Exercise Two.
Reading Assignment: Elements of Web Design
* Read pages 89-139 (Page Layout with HTML, Web Typography, Web Graphics)
week 02
assignment
Exercise One assigned, due Week 3
After learning the first 9 HTML examples (bgcolor through links), do Exercise One in class, or as homework. Printed handout for technical specs of the exercise will be handed out in class. Or, click here to view and print a pdf version of Exercise One.
Reading Assignment: Elements of Web Design
- Pages 28-37 (Who's Doing Web Design)
week 01
assignment
Reading assignment: Elements of Web Design
- Pages 1-27 (What is the web?)
- Pages 68-88 (HTML Basics)