Required Set up:

Create server space and submit URL

Setting up your local site:

In your portable hard drive create a folder and name it www

Setting up Dreamweaver:

Perform the following actions every time you sit on a computer for the first time.

Open Dreamweaver

Site > New Site (or "Edit Site" if you already have one created)

Select "Advanced" (on top)

Select "Local Info" and fill it the form like this.

Click "Remote Info" and set it up like this (replace "maasjr23" with your own user name)

Your URL:

http://students.oneonta.edu/yourusername/

Your Projects Page:

http://students.oneonta.edu/yourusername/projects..html
You email this page to your professor so he can grade your assignments .

email to: sakoult@oneonta.edu
subject: CART206-01 (or CART206-02) yourlastname
body: your assignments page (http://students.oneonta.edu/yourusername/projects.html)

Complete these Assignments

Check the class calendar for dates and deadlines. The calendar was distributed with the syllabus you received the first day of classes.

Social Commentary

Create an entire web site dedicated to a social issue you care about.

Your web site should demonstrate good awareness of the concepts at hand, and it should demonstrate technical understanding of the web as a medium.

Your site must have:

1. An external CSS file that controls formatting.
2. Images in the right formats and optimized
3. Efficient navigation between the pages
4. Organized page content in invisible tables
5. Image background on at least one page
6. Efficient navigation between pages
7. Buttons
8. A logo/header on top (some good examples)

Your site should reflect understanding of:

1. Page size control
   Control both width of page and file size. Target a common resolution and adhere to it.
   
2. Font control
   Don't use fonts that won't appear on other computers
3. Image optimization
   Show control of file size, format, width and height
4. Table control
   Control width, cells, borders, formatting, padding, and cell spacing
5. Backgrounds
   Control tilling and interaction with the other page elements (tables, text, and images)

Your site must be

Creative, visually exciting, and innovative

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Look at some of the sites included in the the following sites and analyze them:

Design Inspiration | Vandelay Design Blog

Consider these questions as you look at the different designs:

• What makes them appealing?
• Do the pages appear to be part of the same site?
• How does the visual style reflect the content?
• How do the visual elements (fonts, backgrounds, color schemes, banners) enhance the unity of the pages?
• How are they organized in terms of navigation?

Some more useful links:

Google Search: Background Tutorials

Templates

For this assignment you will finish 5 separate pages based on the design of one template as follows:

1. Use Photoshop
   Your templates must be made in photoshop using the "slicing" concept. Export the html and the images to your www directory (you should make a separate folder just to save these pages in).
2. Use Dreamweaver
   In Dreamweaver, you should be able to further prepare exported pages to receive content.
   1. Add "editable regions" and save them as "Dreamweaver Templates"
   2. Process the backgrounds
   3. Add photographs
   4. Add at least five paragraphs of text (use Lorem Ipsum as text holder)
3. Upload your templates to your server and test to make sure everything works as it should .

As you work on your design keep these requirements in mind:

Your design must be able to accommodate:

• Text that's different for each page which will be based on the template.
• An advertisement banner 468 x 60
• At least one image that's different for each page which will be based on the template
• Footer with contact and other auxiliary information

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Take a look at the designs in this link and in this link.
Do you relate to any of them? If yes, what makes them interesting (composition, color, image/space utilization, lines, typeface). Can you use some of the same elements in your design without copying? Can you create competent designs without resorting to animation or scripting tricks?

3

Fall 2009: skip this assignment

Animation that Illustrates a Process

In this assignment you will work with Flash and Dreamweaver to do the following:

1. Create one original flash movie that illustrates a process
2. Export the movie as a SWF file
3. Embed the SWF file in an html page
4. Upload the finished page and animation to your server

Your animation should contain movement, defined steps, and interactivity in the form of "Goto" and "GetURL" actions.

Create a small flash animation that illustrates a process in several steps.

You choose the process you would like to illustrate. This could be a continuous movie, or a step by step explanation of the process.

Here is a nice little example of Kayaking instructions

A few good rules: please, no violent cartoon humor, and no stick figures.

If you are new to Flash, you might want to get more familiar with the software. Flash is a complex application and has a steep learning curve. Most beginners confuse themselves by not focusing on what's essential.

For this assignment allocate the considerable amount of time to do the following:

Open Flash and click Help.

Read the following

• Using Flash
  • Workspace
  • Creating and managing documents
  • Using Imported Artwork
  • Drawing
  • Working with graphic objects
  • Using symbols, instances, and libraries
  • Creating animation
  • Publishing Flash content
    • Publishing Flash documents
      • Publishing overview
    • Exporting from Flash
      • Exporting Flash content, images, and video
    • Best practices

Pay particular attention to the layout, the color combinations, and generally the composition of your animation.

It takes a long time to create competent drawings in Flash. Take the time to make sure your drawings are worthy of an advanced art student like you.

A few good rules: please, no violent cartoon humor, and no stick figures.

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Professional "sales" or "information" web site.

For this assignment you will create:

Create three (3) templates using the concepts you learned in assignment 2 and 3.

Use these templates to create a web site that simulate real product sales, information services, or subscription services.

Each template needs to serve a specific function of the site. For example, one template needs to present a number of products the viewer can choose from.

Another template should allow the viewer to see more details of a particular product (if they clicked on one from above).

A third template needs to be the page where even more details of a particular product.

Each of last two templates need to have a button to either "buy now" or "subscribe now"

Study online shops you frequent and try to simulate their look and functionality.

Create a logo, images for the products, buttons, navigational bars etc.

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Some live examples:
amazon.com - B&H - Nike - Levi's

Some design examples:
web templates

Personal Narratives, a complete web site.

Plan, design, execute, and upload a comprehensive web site.

This is site could be either a self-portrait, or it could focus around a single event that has defined you as a person, or it can be a "portfolio" site.

Place emphasis on a clean, mistake-free design, and try to find a creative way to deliver your message. Concentrate on creating a visually compelling design that frames your story or your best work in a mutually beneficial way.

Don't use images you download from the web without permission. Get used to creating designs that don't rely on other artists' work.

During the final critique your entire site must be in perfect shape, and available for viewing. If during the critique your site is unavailable you are responsible for it. Make a CD back-up and have it handy just in case the server that hosts your pages is down.

All work must be original, the entire site must be technically immaculate, and all pages must be live on your web server.

This is your final assignment. Present it during the final critique.

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.