1. STOP
2. If you were here during Lesson 3.4, Skip to the Green Bar.
3. If you were NOT here during Lesson 3.4, Follow Steps 1-10.

1. Step 1:
   Go to your “css” folder and create a new subfolder called “demo3”.
2. Step 2:
   Open Notepad++ and close down any of the files you had open from the last class.
3. Step 3:
   Create four new files in Notepad++ and save them as index.html, history.html, contact.html, and china.css in your “demo3” folder.
4. Step 4:
   In your index.html file, copy/paste this code.
5. Step 5:
   In your history.html file, copy/paste this code.
6. Step 6:
   In your contact.html file, copy/paste this code.
7. Step 7:
   In your china.css file, copy/paste this code.
8. Step 8: 
   Save your work, then open up your “index.html” with Chrome.
9. Step 9:
   Create a split screen.
10. Step 10:
    In Notepad++, go to your china.css file, then go help out another student (especially your team).

1. CONTINUE

• THIS IS A GRADED ASSIGNMENT
• …You have 40 minutes to complete a three page website…
  …Fill it in with the following five elements…
• IMAGES
  Find and insert at least four relevant images onto the “index.html” page and possibly more on other pages.
• COLOR PALETTE
  Pull appropriate colors from one of your images and apply a 3-5 color palette to the “style.css” file.
• HISTORY CONTENT
  Dig up some history about the Great Wall of China and copy/paste some of it into your “history.html” page.
• SOURCE LINKS
  Provide two links to two sources that you used for your content.
• EMBEDDED MAP
  Find a map to some random location on the Great Wall of China and embed that map onto your “contact.html” page.

1. GRADING RUBRIC

• A
  Three Page Website has been Completed with ALL Five Elements.
• B
  Three Page Website has been Mostly Completed with 3-4 Elements.
• C
  Three Page Website only has 2 Elements Applied.
• D
  Three Page Website only has 1 Element Applied.
• F
  Three Page Website has no Elements Applied.

Topic #1 – A New Message from Hakon Wium Lie

“It is important that HTML pages can be displayed even if the style sheet is not taken into account. CSS was designed with this in mind, and all content remains visible even if the style sheet is ignored. This is because of the fundamental principles of style sheets: the separation of content and presentation. By only describing the presentation of documents, all the content of the documents are available even if the style sheets are ignored.”

Hakon Wium Lie, Cascading Style Sheets: Designing for the Web

*Practice Removing Stylesheets through the Inspect Element*

Topic #2 – Review Questions

• Explain the difference between internal and external links.
• Explain the difference between text and font.
• When we say that a design is pleasing to the eye, this is known as good _______________.
• What exactly is a color palette?
• Explain the meaning of white space and focal points, but also explain how these two things are related.

Topic #3 – Design Concepts

• Begin with a Newspaper and a Blank Paper
• The F Pattern
  The Process of Reading Text from Top to Bottom, Left to Right
  

  ---

• Above the Fold
  Putting the best, most attention grabbing content at the top of the page.
  

  ---

• Symmetrical & Asymmetrical Design
  When the sides of a design are mostly the same (symmetrical) or very different (asymmetrical).
  

  ---

  Symmetrical Website
  

  ---

  Asymmetrical Website
  

• Visual Hierarchy
  Arranging content in terms of importance, making some elements stand out more than others.
  

  ---

• Usability & Functionality
  How easy a website is for a person to use and how functional the designer made it.
  

  ---

Topic #4 – Design Principles

• Contrast
  The obvious difference between elements of size, color, shape, etc.
• Repetition
  When the basic design stays the same, even while the content changes.
• Alignment
  The process of arranging content in straight lines.
• Proximity
  The nearness of different, but related things.

Topic #5 – Wireframing

If and when you know the purpose of your website, one of the most important things to consider is what kinds of things you want to have on your pages and how those things will be arranged. For example, will you have a logo? And if so, will it be centered at the top, off to the left, in a corner, or somewhere else? Where will your navigation links be located and what will they look like?

A Wireframe is basically a sketch or a drawing that shows the arrangement of page content (sections, elements, etc). This is more about setting up a skeleton of what elements will be on your site and in what arrangement. Once you have a wireframe in place, you can then create a layout, which includes a more specific drawing of what you want your pages to look like (logos, images, text, content).

So now comes the fun part. Think of a band or musician or a singer that you absolutely love. Imagine that the people who work with this band/musician/singer asked you to design them a website. What elements would you sketch in your wireframe? What designs would you make for your layout? What text would you have on your main page? What would the navigation links say and what would they look like?

If weather is good, we will go outside and sketch our wireframes and our layouts. If weather is not good, we will do the same activity inside. But this is not a group or partner challenge. You are to find a quiet spot where no one will disturb you and you will not disturb anyone else.