common object example

Summary:

Build a website about an Artist, Art Genre, or Era in Dreamweaver

    ●   Research the subject of your website and sketch your site's layout, including buttons, content and navigation.

    ●   Then create your website on the computer using CSS, HTML, Illustrator, and/or Photoshop.


The Project Happens in 3 Parts:

Part #1: Sketch Your Layout ~


Design Always Begins with Paper and Pencil!

Sketch the layout for your web site design on a blank piece of paper as in these examples

sketch your layout

Include the layout, color, buttons, graphics, fonts, theme, style, etc. Include as much detail as you can think of including interactive elements.

All major elements of your Wireframe should be labeled, as detailed as possible, includding:website-layout-sketch.jpg

  •   Header / Logo
  •   Navigation
  •   Search Fields
  •   Content Area
  •   Banner Ads
  •   Contact Info Area
  •   Footer
  •   Specific Objects (photos, galleries, videos, etc.)

 

Your goal is to show what's going where: Descriptions, Titles, names, paragraphs, etc.

Let your imagination go. Don't worry about coding yet. Better to overestimate your abilities rather than underestimate. The closer your "mock up" design is the better the end product will be.


Part #2: Move to the Computer ~


•   Scan your drawing into the computer and make a Wireframe layout in Illustrator by following this tutorial.


 

•   Then turn your wireframe into a real website on the computer using HTML, Illustrator, and Dreamweaver.

 

 

 

 


 

 

 

 

•   Your index page design will become the template for at least 3 other linked pages, according to the rubric.

 

 


Last Part: The Final Product ~

2 or 3 Linked Pages Containing:

clipping-mask-border.png

Art Quotes – Slideshows of Images – Associated Famous or Influential People – Historical Timeline – Political Views – Country of Origin – Language – Best Work – Etc.


Your site must also contain the folllowing:

o   Favicon  o    Floats  o   Borders o   Goggle Fonts o   Backgrounds & Colors o   Transparent backgrounds o   First Letter o Rounded Divs   o    CSS Gradient Backgrounds

  •   Visual Hierarchy: Important images, links & content are listed lined up and balanced & evenly distributed.

  •   Alignment: Images & content are lined up and balanced & evenly distributed.


  •   Banner, links, text and images must reflect the nature of the subject in a positive manner and must be school appropriate.


Other People's Work:

These are examples created by students following this project.

Example 1

Example 2

Example 3

Example 7

Example 8

Example 9

 

Example 4

Example 5

Example 6

Example 10

Example 11

 

 

Art Genre Project - Day 1

Digital Art and Design

New Project Begins Today  ~ 

Introduce this PBL project by reading the Entry Document with the Class - Pick your Art Genre and complete your Graphic Organizer.

Reflection Journal - Attach the previous project to your portfolio (if necessary) and defend your learning by reflecting upon what you have learned from the project.

Introduction the Graphic Art Terms - Line.

Task#1 - Create a New Site In Dreamweaver - NOTHING TO ATTACH - Just Do it!

Task#2 - Begin to Sketch Your Layout Design - Not Due Today …


Art Genre Project - Day 2

Digital Art and Design

"Art Genre Project - Day 2"  ~  

Daily Journal - What are you trying to do? Begin class with this warm-up writing prompt.

Tutorial #1  - Create a New Folder In Dreamweaver -  NOTHING TO ATTACH - Just Do it!

Tutorial #2 - styles.css - Attach your CSS file by the End of Class.

Tutorial #3 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

DUE SOON! - Your Sketch.

Continue sketching your web page layout. Remember, you will scan your sketch into Illustrator before you are done.

Introduction the Graphic Art Terms - Today's vocabulary - Texture -What does it mean?

Workshop - Multiple Websites - Folder Management - How do you keep from erasing your previous work when creating a new site?


Art Genre Project - Day 3

Digital Art and Design

"Art Genre Project - Day 3"  ~  

Daily Journal - What's the Most Interesting Thing?  Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - What do Colors Mean?  Begin class with this warm-up writing prompt.

Assignment #1 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Tutorial #1 - HTML Tag - Attach your CSS file by the End of Class.

Continue on your Web Page Sketch Layout … Due Soon!

Introduction the Graphic Art Terms - Today's vocabulary - Value & Color.

  •   workshop - Review Font Presentation.


Art Genre Project - Day 4

Digital Art and Design

"Art Genre Project - Day 4"  ~  

Daily Journal - Name 1 advantage of Dreamweaver - Begin class with this warm-up writing promp. ~ OR ~

Daily Journal - What's the most interesting thing? Begin class with this warm-up writing prompt.

Tutorial #1 - Container - Attach by Due Date.

Tutorial #2 - Brushes Background in PS - Attach by Due Date.

Tutorial #3 - Rounded Corners Banner/Header in AI - Attach by Due Date.

Continue on your Web Page Sketch Layout … Due Tomorrow!

Introduction the Graphic Art Terms - Today's vocabulary - Focal Point.

  •   Workshop - What is CSS? It controls your entire site with one document!

  •   workshop - Margins - Why your text and content shouldn't touch the edges of your composition.


Art Genre Project - Day 5

Digital Art and Design

"Art Genre Project - Day 5"  ~  

Daily Journal - 5 Basic Parts Journal - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - What's the difference between CSS and HTML … Begin class with this warm-up writing prompt.

Tutorial #1 - Header - Attach by Due Date.

Tutorial #2 - Wireframe - Attach by Due Date.

Tutorial #3 - Rounded Corners Banner/Header in AI - Attach by Due Date.

Tutorial #4 - Banner - Attach by Due Date.

Continue on your Web Page Sketch Layout … Due Now!

Introduction the Graphic Art Terms - Today's vocabulary - SPACE!

  •   Workshop - Margin Auto - Why design with CSS?

  •   workshop - Margins - Why your text and content shouldn't touch the edges of your composition.


Art Genre Project - Day 6

Digital Art and Design

"Art Genre Project - Week 2"

Daily Journal - Scroll through the 10 Commandments - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Margins - Begin class with this warm-up writing prompt.

Tutorial #1 - Nav Div Tutorial - Attach by Due Date.

Tutorial #2 - Wireframe - Attach by Due Date.

Tutorial #3 - Sketch Font - Attach by Due Date.

Tutorial #4 - Animated Header - Attach by Due Date

Can you do this on Weebly? I think not …  

Introduction the Graphic Art Terms - Today's vocabulary - Balance!


Art Genre Project - Day 7

Digital Art and Design

"Art Genre Project - Day 7"

Daily Journal - View this Art Site - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Margins - Begin class with this warm-up writing prompt.

Tutorial #1 - Content Div Tutorial - Attach by Due Date.

Tutorial #2 - Wireframe - Attach by Due Date.

Tutorial #3 - Animated Header - Attach by Due Date.

  •   workshop - Critique each others work according to this procedure.

Introduction the Graphic Art Terms - Today's vocabulary - Emphasis!

  •   Workshop - 5 components of the average web page workshop

  •   workshop - Margins - Why your text and content shouldn't touch the edges of your composition.


Art Genre Project - Day 8

Digital Art and Design

"Art Genre Project - Day 8"

Daily Journal - Wireframe Critique Journal - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Evaluating URL - Begin class with this warm-up writing prompt.

Tutorial #1 - Footer Div tutorial - Attach by Due Date.

Tutorial #2 - Drop Shadow Divs - Not Due Today but get Started.

Tutorial #3 - Animated Header - Attach by Due Date.

Introduction the Graphic Art Terms - Today's vocabulary - Emphasis!

  •   Workshop - Responsive Layouts discussion. Your Banner should flex to fit the space! background-size:100% Open this example to demonstrate.


Art Genre Project - Day 9

Digital Art and Design

"Art Genre Project - Day 9"

Daily Journal - Name 2 Things you would fix to make this website Better! Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - What are you trying to Communicate with your work? Begin class with this warm-up writing prompt.

Tutorial #1 - Footer Div tutorial - Attach by Due Date.

Tutorial #2 - Drop Shadow Divs - Not Due Today but get Started.

Tutorial #3 - Animated Header - Attach by Due Date.

Tutorial #4 - Simple Navigation - Attach by Due Date.

Introduction the Graphic Art Terms - Today's vocabulary - Emphasis!

  •   Workshop - HTML vs. CSS: Open this example to demonstrate.


Art Genre Project - Day 10

Digital Art and Design

"Art Genre Project - Day 10"

Daily Journal - Navigation - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Find an Image from your Artist or Genre - Begin class with this warm-up writing prompt.

Tutorial #1 - Simple Navigation - Attach by Due Date.

Tutorial #2 - img Border - Attach by Due Date.

Tutorial #3 - Semi-Transparent Background Content Div using CSS - Attach by Due Date.

  •   workshop - .png - .jpg what's the difference? Transparency! Open this example to demonstrate.


Art Genre Project - Day 11

Digital Art and Design

"Art Genre Project - Day 11"

Journal - Text and Font - Begin class with this warm-up writing prompt. ~ OR ~

Journal - Horizontal vs. Vertical Navigation - Begin class with this warm-up writing prompt.

Tutorial #1 - Drop Shadow Roller Navigation - Attach by Due Date.

Tutorial #2 - Gradient Rollover Navigation - Attach by Due Date.

Tutorial #3 - Semi-Transparent Background Content Div using CSS - Attach by Due Date.

workshop - Review Font Presentation.


Art Genre Project - Day 12

Digital Art and Design

"Art Genre Project - Day 12"

Journal - What are you trying to communicate with your work? Begin class with this warm-up writing prompt.~ OR ~

Journal - What makes good art? Begin class with this warm-up writing prompt.

Tutorial #1 - Squares Background - Attach by Due Date.

Tutorial #2 - Nav Text Shadow - Attach by Due Date.

Tutorial #3 - img Border - Attach by Due Date.

Tutorial #4 - Untitled Document - Nothing Due - Just Do It.

workshop - Why can't you have spaces in your file names?


Art Genre Project - Day 13

Digital Art and Design

"Art Genre Project - Day 13"

Journal - Who is the Leading Artist? Begin class with this warm-up writing prompt. ~ OR ~

Journal - Mission Statement - Begin class with this warm-up writing prompt.

Tutorial #1 - Float Tutorial - Attach by Due Date.

Tutorial #2 - Google Fonts - Attach by Due Date.

Tutorial #3 - TEXT SIZE - Attach by Due Date.

workshop - Why does Microsoft Word have a margin of 1.5 by default? Everyone's text should have some padding.

OR

  •   workshop - Peer Edit Critiques.

Continue working on your sites, adding content, making links, asking questions.


Art Genre Project - Day 14

Digital Art and Design

"Art Genre Project - Day 14"

Journal - How does it make you feel? Begin class with this warm-up writing prompt. ~ OR ~

Journal - Marilyn - Begin class with this warm-up writing prompt.

Tutorial #1 - Tables - Attach by Due Date.

Tutorial #2 - Google Fonts - Attach by Due Date.

Tutorial #3 - div Border - Attach by Due Date.

workshop - What is Alt Text?

OR

  •   workshop - Peer Edit Critiques.

Continue working on your sites, adding content, making links, asking questions.


Art Genre Project - Day 15

Digital Art and Design

"Art Genre Project - Day 15"

Journal - Marilyn - Begin class with this warm-up writing prompt. ~ OR ~

Journal - Rubric Requirements - Begin class with this warm-up writing prompt.

Tutorial #1 - Java Slideshow - Attach by Due Date.

Tutorial #2 - img Padding - Attach by Due Date.

• PROJECT DUE SOON!  MAKE SURE ALL YOUR TEXT IS YOUR OWN!  NO COPY AND PASTED TEXT!  IDENTIFY ALL YOUR ARTWORK: NAME, DATE AND AUTHOR.



Art Genre Project - Day 16

Digital Art and Design

"Art Genre Project - Day 16"

Journal - Critical Eye - Begin class with this warm-up writing prompt. ~ OR ~

Journal - What's in a Name? - Begin class with this warm-up writing prompt.

Tutorial #1 - Blockquotes - Attach by Due Date.

Tutorial #2 - Untitled Document - Nothing Due - Just Do It.

• PROJECT DUE SOON!  MAKE SURE ALL YOUR TEXT IS YOUR OWN!  NO COPY AND PASTED TEXT!


Art Genre Project - Day 17

Digital Art and Design

"Art Genre Project - Day 17"

Journal - 2 Things you Learned - Begin class with this warm-up writing prompt.

Tutorial #1 - img padding - Attach by Due Date.

Tutorial #2 - First Letter Pseudo Class - Attach by Due Date.

Project due tomorrow!  IDENTIFY ALL YOUR ARTWORK: NAME, DATE AND AUTHOR.


Art Genre Project - Day 18

Digital Art and Design

"Art Genre Project - Day 18"

Journal - 2 Things you Learned - Begin class with this warm-up writing prompt.

Tutorial #1 - Favicon - Attach by Due Date.

Tutorial #2 - img Resize - Attach by Due Date.

Project due now!  NO COPY AND PASTED TEXT!


Art Genre Project - Day 19

Digital Art and Design

"Art Genre Project - Day 19"

Journal - 2 Things you Learned - Begin class with this warm-up writing prompt.

Tutorial #1 - Favicon - Attach by Due Date.

Tutorial #2 - img Resize - Attach by Due Date.

workshop - Moving CSS code from individual pages to your CSS file.

Project due! MAKE SURE ALL YOUR TEXT IS YOUR OWN!  NO COPY AND PASTED TEXT!  IDENTIFY ALL YOUR ARTWORK: NAME, DATE AND AUTHOR.