WEEK 4 (2/10-2/15)

Lecture:

  • Review of HTML site so far and CSS so far.
  • How do you save, open and edit someone else’s site?
  • How do you use the element inspector in Chrome?
  • How do you link a CSS file? How do you add images? How do you position DIVs?

Demo:

  • Let’s develop the entire solution for everything so far.
  • Editing and testing your Website

Resources:

Preparing images for the web in Photoshop

Inserting an image into HTML

Color codes for major brands:

http://brandcolors.net/

Color palettes from Google

“Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” found in Color – Style – Google design guidelines at https://goo.gl/U8pRbP

How to critique:

Code:

HTML elements CSS selectors CSS properties
  • <img>(alt and src attributes)
  • img
  • vertical-align

Review:

  • FTP basics
  • Working with images
  • Working with Wireframes

Due Next Week (2/17):

Discussion Question:

4: BACKGROUND & CONTENT IMAGERY

Pick a website that has a compelling design and identify the message or personality that is communicated by the website. Describe one of the background images used in the website (it can be the background of a div or the body). Discuss how the texture, scale and pattern of the background contribute to the message. Describe one of the content images used in the website. Do the content images and background images play different roles in the website you chose? Explain your answer. (Please include a link.)

Project 1:

Personal Website (Historical Figure) (20% of your grade)

For this project you will pick a historical figure who died before 1923. You will create a webpage in the style of wikipedia for that figure that conveys who that person was through the text and through the design. You will use the text from wikipedia and create your own images in Photoshop or from public domain images. The only requirements are that you can only use one representational image of the person, the rest of the images must be non-representational.

Project 1 Rubric

Advertisements