course documents

course calendar

technical support

assessments

communication

student portfolio

main index

COURSE CALENDAR | WEEK 13 CLASS OUTLINE | HOMEWORK

Topics covered in class:

1. REVIEW: Web Design = Usability + Functionality + Aesthetics
   • What is Functionality? "Functionality" refers to the features or functions provided by the product. The primary focus is on what the user can do with the product.
   • What is Usability? "Usability" refers to the ability to use a product easily, effectively, and efficiently to perform a task. The primary focus is on how people work with a product.
   • What are Aesthetics? "Aesthetics" are a set of generally agreed upon ideas about what makes effective communication in a given medium. Establishing an aesthetical sensibility requires that you look beyond your own personal likes and dislikes to evaluate a work within the medium in which it is presented.
2. REVIEW: web standards and accessibility principles
3. REVIEW: Principles of Web Design: Page Design from WEEK FOUR | Design Meltdown
4. Defining your DESIGN METHOD for building a web site.
5. Browser Testing: BrowserCam

Lab:

1. Alternate Style Sheet / Same HTML:
   1. Create a copy of your resume.html and name it test.html.
   2. Remove the current style sheet by selecting the style sheet in the CSS styles palette and clicking on the trash can icon.
   3. Create a new style sheet called alt.css and apply it to test.html.
   4. Create a new folder called alt_images
   5. Create a new folder called mockups. Here you will place all your final mockups.
2. Alternate color schemes and layouts: We are using the same divisions: header, content, main-content, sidebar-content, footer and wrapper. On a piece of paper, create a diagram of the existing divisions in your HTML and identify each of these sections in your new photoshop layout (example). Also identify any elements you'd like to replace text with images, like headers or buttons.
3. Build your alternate style sheet: Once you have figured out each division and the contents of each division start to build your alternate style sheet. Here are some tips:
1. Establish the overall layout using the main divisions (wrapper, header, content, sidebar and footer). Test the layout to make sure it works in several browsers. Then work on the finer details, like typographic styles and background images.
2. Use as few IDs and classes as possible. You should be able to style almost any element inside a container using descendant selectors.
   
   For example:
   
   #content {} /* styles the container */
   #content h2 {} /* styles any <h2> in the container */
   #content p {} /* styles any <p> in the container */
   #content ul {} /* styles any <ul> in the container */
   #content ul li {} /* styles any <li> in the container */
   #content a {} /* styles any <a> in the container */
   #content li a:link {} /* styles any <a> within an <li> in the container */
3. Here is a good tutorial with a method for creating two-column fixed width layouts.
4. Slicing and Optimizing the new photoshop mockups for use in the alternate stylesheet.
5. Adding comments to your HTML and CSS
1. A comment is a string of code within HTML, XML, and CSS that is not viewed or acted upon by the browser. It is simply in the code to provide information about the code or other feedback from the code developers.
2. Most programming languages have comments, they are used to:
   * Describe and explain complicated code.
   * Provide details about when the code was edited or reviewed.
   * Remove sections of the code, but leave them available for later use.
   * Chat with other developers working on the code.
3. An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.

   <!-- this is an HTML comment -->
   <!-- and so is this one,
   which occupies more than one line -->

4. CSS comments can be inserted in a CSS file to explain your code. A CSS comment begins with "/*", and ends with "*/" and does not contain "/" or "*" anywhere in the comment.

   /* CSS comment here */
   p
   {
   margin: 1em; /* CSS comment here */
   padding: 2em;
   background-color: blue;
   }
   /*
   multi-line
   CSS comment here
   */

Continue to work on alt.css

There are only two classes left! You have all done an amazing job. Keep up the great work!

Next week is the last working class-- DO NOT MISS THIS CLASS!!

What is required on the last day of class for the CRITIQUE:

• Original and NEW mockup in Photoshop or Illustrator (if your mockup looks like this, you will not get credit)
• ALL sections of the site have been structured in XHTML and designed using CSS, using recommendations and standards followed in this course.
  1. resume.html
  2. bio.html
  3. projects.html (plus second and third level navigation to project sections)
  4. contact.php
  5. index.html
• Navigation is functioning on the global level.
• Local navigation is defined and functioning in Projects section.
• A second style sheet, named alt.css, with alternate color scheme and graphic style has been created, properly linked to index.html and uploaded to the FTP server. A folder with corresponding images has also be included.
• Site is uploaded to your folder on the FTP server. (Check to make sure the link from the Student Portfolio page is functioning!! This will tell you if you files are in the right place.)

If you miss the Final Critique, you will receive a failing grade on the Final Project.