Griffin | Web Design
Resume Table of Contents  

Web Design

Project 1
Creating a New Medina
Medina J. Crew Own Page Multi-page Site
1. Medina Cycleworks

Dreamweaver Lesson 1 Assignment
Duration: 2 Periods

1. Create a NEW folder called "dreamweaver". Save all future dreamweaver files in this folder. Remember, no spaces or extra periods in filenames.

2. Create a new Medina Cycle Works using Macromedia Dreamweaver using the image below as a sample.

medina thumb

1. Image Size (450 x 275)  
2. Text w/ shadow (large)  
3. 3 lines  
4. Fake links w/ Arial text  
5. Bullets  
6. Page titled  
 ___ 10 points

2. J. Crew

Dreamweaver Lesson 2 Assignment
Duration: 2 Periods

  1. Draw the J. Crew Site on paper using current class info. Class info should be on the left or right and club/activities at the top. (You do this so you know how many columns and rows to insert in your table.)
  2. Have the instructor check the paper version.
  3. Open Macromedia Dreamweaver.
  4. Insert a table (1 row X # of Periods + 1 for the top bar)
  5. Insert a table (4 rows X 2 columns)
  6. Merge the first column as shown.
  7. Adjust column widths
  8. Insert picture
  9. Add own info.
  10. Include lunch and link lunch to a real food related web site.
  11. 'Fake link' the rest of the links.
  12. Do not worry about crossed out areas.
  • Note Arial font and font sizes.


1. Table Size (750 - 800w width)  
2. Logo Text Large from Fireworks  
3. Remaining text small, arial text  
4. Lunch linked  
5. Fake links  
6. Page titled  
 ___ 10 points
3. 3-Pager

Dreamweaver Lesson 3 Assignment
Duration: 3 Periods

thumb crest

  1. Create the web site linked above in Dreamweaver with your own information. 
  • You may use my table (6 rows, 5 columns) - 750 width
  • Main page photo is 300-ish H X 500 W
  • 2nd Page Photo is 100 H X 750 W
 Grading: Site
1. San Serif Fonts  
2. Table Size Matches/Border=0  
3. Text small (except in photo)  
4. Column widths are close to the sample (250 x 3)  
5. Picture Sizes match  
6. HTML Title  
7. Page-2 linked / no movement  
8. Page-3 linked / no movement  
Total    ___ 15 points

  Own Page

Dreamweaver Lesson 3 Assignment
Duration: 3 Periods

  1. Print, in landscape, a professionally designed web page that adheres to the design principles (CRAP). Possible sites might be found at
  2. Using CRAP, hand draw a web page with info that relates to FHS in some way.
  3. Create page in Dreamweaver.  Links may be ‘faked’. Keep things simple. Not everything needs to be the same but one should be able to tell you are using the same design.
  4. Link both your site and the site you are using in your this.
  5. Create a document to review your site. (Sample)
  6. Have a peer review your site and make suggestions on how to better make yours like thiers.
  7. Make corrections in Dreamweaver.
  8. Write a design analysis outlining how your web page uses each of the four design principles. This is an excellent example.
 Grading: Site
1. Sites Match  
2. San Serif Fonts  
3. text small  
4. Row heights match  
5. Picture Sizes match  
 ___ 10 points

 Grading: CRAP Analysis
1. CRAP Analysis  
2. Use Example linked above
3. At least 3 sentances per principle
4. Site print screened
 ___ 10 points

4. Add Extra Pages

Dreamweaver Lesson 4 Assignment
Duration: 2 Periods

  1. Create your page and have it approved by the instructor.
  2. Add the links.
  3. Type in the link-file names. (ie. Page2.htm, Page3.htm)
    (Note: You are creating the link names before you have actually created them.)
  4. Save the MainPage again.
  5. Save the MainPage As Page 2 (i.e. Page2.htm)
  6. Set everything to handle the text for all pages. Indent and align text. Change the HTML Title and main text to note it is now Page 2.
  7. Save Page 2 again.
  8. Save Page 2 as Page3.htm.
  9. Repeat the process until all links are saved.
  10. Test all links on all pages to see what you missed.
 Grading: Site
1. functional multipage site.  
 ___ 10 points