Projects 3 and 4

schedule

Project 2 Review: Open your site and explain how you solved the problem of creating a six page site in HTML and CSS in Dreamweaver. Talk about your choices in style by opening your stylesheet and explaining it.

Project 3: Create a WordPress.com site about the same (or similar) topic you chose for Project 2. Be able to explain the features, benefits, and navigation of your site. The site should have 10 posts related to your main topic. The site should have 5 pages related to your main topic.  Themes should be carefully chosen and customized. Posts should be crafted with the intent of building an audience. Your colors, graphics, and photography should have consistency in style and effect.

Project 4: Make a professional website for your future independent business. Use whatever tools you wish to create the site. The site should have at least 20 destinations of original content. The visual and written content should be of the highest quality.

Advertisements

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