Create a site design that incorporates all four of the design elements we worked on in class. Please read all of the following instructions before beginning, especially if you were not in class on Tuesday.

Step 1: In class, each of you brainstormed to come up with 15 or more possibilities for your website. Examples included a pet store, eye doctor, tattoo artist, shoe store, etc. There are limitless possibilities. Any store or organization can have a presence on the Web.

I asked you to take your top five choices and order them according to your preference, and email them to me. Please email me with your list of five as soon as possible, but definitely before Easter. I will look at your list and pick one for you. Most likely it will be your top choice, but I suggest you choose one of the others.

Step 2: After you get your site okayed, proceed to spend time during break designing your site. The entire site should consist of no more than 5 or 6 pages. There is no exception to this.

Here are some other guidelines for your site design:

• All images should be original. Any photos you place on your site should be taken by you (no stock photos). Any other designs must be created by you (in Photoshop or another similar program). Exceptions will be granted only with permission.
• Colors, fonts, branding (company logos or anything else which identifies the site as being Company X), etc., should be consistent across all the pages of your site.
• In order to carry styles consistently across all pages of your site, all HTML pages should link to the same CSS file. There should be only one CSS file and all styles that are common to the various pages should be defined in this file. (It is okay, but not necessary to define other unique styles within your HTML pages.)
• Styling with HTML is not okay. Styling must be done with CSS.
• All pages must be valid XHTML 1.0 and CSS.
• Your home page can have a different design than the other pages but it doesn't have to. If you do have a different home page design, then you should still be consistent with colors, fonts, branding, etc.
• If you have any other questions, please email me. You can also IM me at kylemgreen on Yahoo.

Important: Your site should be in draft form when you come back from break. It does not need to be complete.

List of students who have completed Step 1

Name	Emailed Mr. Green?	Website
Ariel		Online teen magazine
Jessica
Whitney		Coffee Shop
Armani		Freelance art for small business
Seph
Harolyn
Jackquelyn		Paintball Shop
Brittany		Pet Shop
Cynthia		Gym

Design one web page that is unified. Use any of the seven design elements discussed in class to compose a unified page. A good rule of thumb for unity is that the whole should predominate over the individual parts. Here are some examples:

Design one web page that portrays the design principle of rhythm. You should use various design elements to achieve rhythm (repetition), and your pag should also be balanced. Use any website theme that you would like. Be creative. The page you are creating should be the entry page to your site. Some examples follow.

Careful with the following design -- too much repetition becomes monotonous.

 

Design one web page that portrays the design principle of balance. You should use various design elements to acheive balance. Remember that your web page does not have to be symmetrical in order to be balanced--the page should, according to the definition, have roughly the same weight on the left and right sides of the page.

Note: Please make sure your page is centered in the browser and is exactly 750 pixels wide.

Here are some examples of balanced web pages:

San Francisco Museum of Modern Art - symmetrical balance

MattMercer.com screenshot - symmetrical balance

asymmetrical balance

symmetrical balance

digiknow.com - symmetrical balance

symmetrical balance with asymmetrical text

balanced vs unbalanced

Prepare for Quiz on Design Elements and Principles

Complete two questions which were handout out in class. #1 dealt with the LAMP solution stack. #2 pertained to Web 2.0.

If you weren't in class on Wed, Feb 20, we will arrange a time for you to make up the in-class work together with the others who were absent.

Everyone should have read all of Chapter 4 of your textbook (except Section 4.3) by Friday, Feb 22. We will begin discussing design basics and you need to have background before we begin.

Using nested tables, duplicate the screenshot below. The outer table consists of a single row with two columns. The first td element consists of the car image. The second td element consists of a second, nested table. (Place the second table inside the td element of the outer table.)

Hint: The inner table should have a caption.

Create a valid (XHTML 1.0 Transitional / CSS 2.0) page called swallowtail.html that has these features:

Both the title and heading (use h1) of the page is "Swallowtail Butterflies". Use a background color of your choice, but it must be relatively light. The content of the page includes (below the main heading) three sections. Each section begins with a subheading (use h2) and contains between one and three paragraphs. Each section contains a single image, whose longest side is no more than 120 pixels. Every image must have the same border (use class), but the width, color, and style are up to you. For each of the images, use appropriate margins (discussed in class) and keep them consistent.

Please style your headings creatively. You can change the font how you wish, but please use style rules that can eventually be applied to multiple pages. Your subheadings should read as follows:

The Swallowtail Butterfly Life Cycle

Migration of Swallowtails

Raising Swallowtail Butterflies

The actual content (the paragraphs in the three sections) should be taken from another source (copy and paste is fine). There should be a single line at the end of each section that is a link to your source's website. An example would be:

Source: thebutterflysite.com

A screenshot of a sample site is shown here. Your page will not look exactly like this, but there will be some similarities.

One XHTML 1.0 Transitional page called mypage.html

One style sheet called fantastic.css (linked to mypage.html)

Requirements for page:
*background color of your choice
*minimum of one image with a 1px black solid border
*at least three hyperlinks that do NOT have the default styles
*one table that has a 1px border of any color (no borders on individual cells) and margin of 5px on all sides -- inside the table can be any content of your choice
*your css file needs
-to cause all h3 elements to have blue font (not black)
-to include a class called highlight that causes the background of particular "important" words of that class to have a yellow background