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

Your Home page URL:

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

Your Projects 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.

Complete and submit the following during the critique:

1. One page desgin in two differnt page versions (you will create two web pages).
   One page should present a fluid design and the other should present the same design in absolute measurements.
2. Create a design and present it in three different target resolutions (you will create three pages, one for each resolution targeted):
   1024 x 768
   800 x 600
   640 x 480
   Include Lorem Ipsum text to fill the cells and use one image (the same one) in each design.
3. Create one page that contains two images as "thumbnails" and link them to
   a) an html page that contains a larger version of the image
   b) the larger version of the .jpg file
4. Create one page with an image background and include two links: one relative link and one absolute link.

You will create 7 total pages for this assignment.
Make one page that contains links to all seven pages. Use descriptive text as anchor for each link. Name this page as1.html and link to this one from your "Projects Page".

Some more useful links:

Google Search: Background Tutorials

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 all the things you learned in assignment 1:

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

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?

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?

4

Due:

Mon. 4/26

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 simulates 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 the 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 Portfolio, a complete web site.

Plan, design, execute, and upload a comprehensive web 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 best work in a mutually beneficial way.

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.