Week 04

September 16, 2008 — Jamie

week 04 – mid-term project due, final project assignment, web critiques, mid-term project critiques, swap image, more dreamweaver basics, AP divs, Assignment 4, Quiz 4.

This week your midterm projects are due.

THE DEADLINE FOR THE MIDTERM PROJECT TO MIDNIGHT, FRIDAY, SEPTEMBER 19. Please be sure to upload your midterm project to the class server by this new deadline. See the week 02 class notes for information on how to connect to the class server. Please be sure you know how to upload your “midterm_lastname” folder there before the final deadline.

Please be sure that you name your web project folder “midterm_lastname.” And be sure you upload your entire folder and not just the individual html pages and images folder. Please review the FTP video demonstration to make sure you understand how to do this.

You will be responsible for critiquing each other’s midterm project work. See the notes below regarding web critiques.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Your final project will be due by midnight on Friday, October 17. I want to give you plenty of time to do the research and design necessary for this project so I’m giving you the specifications for the project below. Please let me know if you have any questions about the final project.

Final Project
The focus of this project is to create a complete, portfolio quality web site. You are to redesign the web site for a company that currently has a web site. Designing a personal web site is not allowed:

  • Argyle Design (www.argyle-design.com). This company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering

Your new web site design should have a strong design aesthetic that reflects a new attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original, but you may borrow content from the existing site — you may use images and text from the sites you’re redesigning, or from any other product design or industrial design company site. Your site should consist of:

  • 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
  • A sub navigation for “what we do” and “portfolio sections.”
  • A strong visual design
  • A theme and visual concept that carries through the site
  • A clear navigation system
  • An effective and clear system of displaying the company’s portfolio
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
  • 6 pages that have complete content, including photos and text.
  • You must use some html text in the site
  • Yahoo directories of product design & architecture companies:
  • Product_Design

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

  • Sites take too long to download, often because of too many rollover images.
  • Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course.

NEW REQUIREMENT FOR FINAL: You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from the actual Argyle Design web site. You may use your own original artwork and/or photography if you prefer.

Student 1
Student 2
Student 3


Final Project checklist

1. Did you research the project and determine a specific look and feel for your site?
2. Did you successfully create a strong, visually effective site?
3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution?
4. Did you create your site using a combination of divs and tables?
5. Did you design effective main navigation and sub-navigation for your portfolio section?
6. Did you title your pages, insert rollovers, and highlight navigation?
7. Did you use HTML text in your site?
8. Did you create and use only one CSS file for your site?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Site Critiques

Part of your assignment for next week will be to critique your fellow students’ midterm projects. One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing other’s work you begin to understand more fully what makes a web site effective and well-designed. Different types of web sites have different goals. What make a good web site?

What makes a good site?

  • Information design – Goals, audience, requirements, and organization of content
  • Interaction design – Functionality, navigation, style of interaction
  • Media design – Visual layout, integration of text, audio, graphics, animation, video
  • Story/game design – Narrative, perspectives, paths, game play, goals, themes, characters
  • Business design – Economic and organizational benefits and operations
  • Technical design – Capabilities, integration, technologies, performance, security

General Sites to study:


Seven Criteria for discussion. These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

  • Look & feel / Attitude of site
    Does the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of color
    Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layout
    Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • Typography
    Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • Content
    Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experience
    Is the site easy to navigate? Is it east to find content on the site?
  • Navigation
    Is the navigation well-organized. Is the navigation consistent from page to page?

I would like you to take a look at all of the web sites below. The sites are Product Design sites so you should look at them as part of your research for your final project.

Design-related Web sites to critique:

  • Cooper Interaction Design
    Conceptual product design and user interface design. Breakthrough design from the initial concept to the details of the user interaction.
    www.cooper.com
  • Product Development and Management Association
    Cross-industry gathering of people interested in and devoted to the study and practice of product development.
    www.pdma.org
  • Continuum
    Strategy group focusing on design and engineering.
    www.dcontinuum.com
  • Speck Product Design
    Product design and development firm creating innovative solutions for the mobile electronics, consumer electronics, medical, and furniture industries.
    www.speckdesign.com

Using the Seven Criteria for discussion outlined above, I’d like you to post a comment about one of the sites below. What makes it well-designed or what makes it less effective as a web site?

Please post your comments to the Discussion > Web Critiques: Design Web sites section on the smconline.org site.

Midterm Project Web sites to critique:

Using the Seven Criteria for discussion, offer your fellow students constructive advice on how they may make their midterm web project more effective. How might they work on the following criteria as it relates to their project? Look & feel, Use of color, Composition / Layout, Typography, Content, User Experience, and Navigation.

Here is the URL to the midterm projects:

http://www.everythingaboutweb.com/grdes66online

Please post your comments to the Discussion > Web Critiques: Midterm Project section on the smconline.org site.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


Change a different image
Using the swap image behavior

If you want a different image to change when you rollover, it’s a little more complicated. See example page here.
  • Insert the image that will be changed
  • Select this image and define a name (e.g. “rollover2″) in the property inspector (in the upper left hand corner)
  • Insert the other image that will cause the rollover graphic change
  • Select this image and put a link or “#” character in the link box in the properties inspector
  • Then, while the image that causes rollover is still selected, open the WINDOW>BEHAVIORS window.
  • Using the “+” pull-down menu on the left, select the behavior/action Swap Image

  • In Swap Image, select the name of the image you want to change (the first image inserted above, rollover2)

  • Then browse for the replacement image (the highlight image)
  • Note that you can select rollover images for as many named images as desired.
  • Check the Preload Images and Restore Images onMouseOut checkboxes
  • Select OK
  • If you want a different event than a mouseOver to cause the image swap, you can change the event. Click on the “swap image” event, and then click on the downward pointing arrow at the right of the “Events” column. Select the event you want to cause the rollover change.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Another way to postion content on the pages is through the use of what Adobe calls AP divs. “AP” stands for “Absolute Position” and AP divs were once referred to as Layers. (So if you are working in a Macromedia version of Dreamweaver instead of Adobe, you will see they are referred to as layers not AP divs.)

AP divs/Layers: a way to position content on a page

AP divs/Layers are boxes that can be positioned anywhere on the page, and contain anything that can be put in a normal web page. AP divs/Layers can

  • Be positioned with pixel accuracy, in relation to the upper left hand corner of the web page, or in relation to another
    layer.
  • Contain anything, including text, links, gifs, animated gifs, and jpgs.
  • Have a stacking order, so that elements in a layer can be in front of, or behind elements in another layer.
  • Can be shown or hidden.
  • Can have their position changed over time.

Creating layers

  1. Insert a layer by selecting INSERT > LAYOUT OBJECT > AP DIV.
    Alternatively, select the layer icon in the insert menu
    then click and drag a box to create a layer on the screen.
  2. With the div selected, note the following div features in the properties inspector:
    • Left, Top – defines the top left corner of the layer rectangle relative to the upper left corner of the browser window
    • Width, Height – defines the size of the layer in pixels (note that the layer may expand to accomodate its content)
    • The layer name
    • Background image – tiles an image in the background
    • Background color – defines a background color for the layer.
    • Visibility – whether the contents of the layer will show when the page loads
    • Overflow – what to do with any content that exceeds the stated dimensions of the layer (only works in the most recent versions of browsers)
    • Z index – the layer order – higher is in front
    • Clip – the upper left corner and dimensions of a clipping area that will show reveal a part of the layer contents
  3. The AP elements window displays information about all the divs on the screen.
    • The order of the divs, based on the Z index. The order determines the visibility of layers when one overlaps another. Divs with higher numbers are in front. You can change the order by simply dragging one div to a new location.
    • The currently selected div. You can select a div by clicking the layer name in this window
    • The nesting level of a div
    • The visibility of the div. The eye indicates if the div’s visibility when the page is loaded is set by default (no eye), visible (the open eye), invisible (closed eye)

CSS box model

To help you understand positioning you need to understand the box model.

Here’s a helpful tutorial you will want to review:

http://www.brainjar.com/css/positioning/default.asp

Video Demonstration

I demonstrate how to re-create the tables_example.htm sample page using AP divs. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the file tables_example.htm in Dreamweaver. Note, that this page is actually built using a table structure. I will demonstrate how to build the page using a combination of AP divs and tables. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (54MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted all three videos below.

AP divs | Part 1

AP divs| Part 2

AP divs | Part 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Required Reading:
Read pages 93-114 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:

Below are additional resources you may find helpful:
Adobe Video: Using and customizing CSS based layouts
Adobe Dreamweaver Developer Center: CSS page layout basics

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment Week 04

1) Ten Ton Books AP div assignment

Watch the following 3 videos about how to create layouts using CSS. You may watch the videos on either YouTube or Geoff Blake’s site Ten Ton Books. (I think the videos on the Ten Ton Books site have better resolution)

Videos on YouTube:
Creatin’ CSS Layouts In Dreamweaver, Part 1
Creatin’ CSS Layouts In Dreamweaver, Part 2
Creatin’ CSS Layouts In Dreamweaver, Part 3

Same videos on Ten Ton Books site:
Creatin’ CSS Layouts In Dreamweaver, Part 1
Creatin’ CSS Layouts In Dreamweaver, Part 2
Creatin’ CSS Layouts In Dreamweaver, Part 3
I want you to follow the tutorial and create the page as demonstrated by Geoff Blake. Your assignment is to complete the following steps as outlined in all three parts of the video:
• Create the web page using divs for the Header, Content, and Footer (Part1)
• Create a nested div for the Menu (Part 2)
• Center the page (Part 3)

Remember in order to center the page you need to follow the steps below.
(Refer to Part 3, you may need to watch it more than one time):

  1. Create new CSS tag for body
  2. Set text align to center
  3. Add the div #Master. Set the margin to top=0, right=auto, bottom=0, left=auto. The postion needs to be set to “relative,” and the placement for the left (L) and top (T) should both = 0.
  4. Cut the closing div tag for # Master and paste it before the closing body tag.

Create the web page as demonstrated in part 1-3 of the videos listed above. Upload the zipped file to “DropBox” on the smconline.org site by noon, Friday, September 26.
2) Re-create the web page from my Video Demonstration

Re-create the web page from my Video Demonstration using a combination of AP divs and tables. I demonstrate how to re-create the tables_example.htm sample page using AP divs. Using the files found here web1_tables_example.zip, re-create the web page found here tables_example.htm in Dreamweaver. You are to build the page using a combination of AP divs and tables.

Recreate the web page as demonstrated in my video demonstration. Upload the zipped file to “DropBox” on the smconline.org site by noon, Friday, September 26.

3) Web critiques

Using the Seven Criteria for discussion outlined in the notes above, comment on one of the Design web sites, and all of your fellow student midterm projects. Please post your comments to the Discussion section of the smclone.org site.

Please post your comments to the Discussion section by noon, Friday, September 26.

4) Quiz 4

Also, answer the question in the attached Quiz 4 and upload to the “Dropbox” on smconline.org site by noon, Friday, September 26.

Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

copyright © 2006-2008, jamie cavanaugh

Posted in Uncategorized. Comments Off
«

»