Week 6 (2/24, 2/29, 3/2)

spoon feeding in the long run - EM Forster cc-by lemasney

Agenda for Week 6


What is the attendance/grading policy for this class?

  • Let’s look at the Syllabus.
  • Originally: 4 absences is an automatic withdrawal. Several of you would be withdrawn.
  • There is no difference between an excused absence and an absence. Sickness, etc. is absence. Be here.
  • Presence and participation is 20% of your grade. Having the work in on time and being able to defend it on the presentation day is key.
  • As always: Each project/presentation is also 20% of your grade.

Tell me about your progress in Dreamweaver demos by explaining something (anything) you learned there.

Show me your progress in Codecademy.

Show me your USB keys.

Tell me what your site is going to be about.


Using the CSS Zen Garden files in Dreamweaver



Continue to use Adobe’s Dreamweaver tutorials.



Continue your effort towards finishing the Codecademy course on HTML and CSS


The Only Zen You Find - Robert Persig cc-by lemasney

Week 5 (2/17-2/22)

Agenda for Week 5

Project 1 wrap up: Site reviews and student presentations


Introduction to Project 2: Develop a 6 page site in HTML and CSS using Dreamweaver that demonstrates your understanding of color, typography, photography, style, or other creative topics. Navigation, layout, style, and creativity will all be considered in your grade. Use Photoshop heavily in this and future projects. (Project 2 is 20% of your grade)


I show you how in Dreamweaver:

  • Creating a site,
  • making pages,
  • links, etc.


Dreamweaver tutorials on Adobe. https://helpx.adobe.com/dreamweaver/tutorials.html

CSS Zen Garden http://www.csszengarden.com/


Create an account and begin completing HTML and CSS in Codecademy: http://codecademy.com

WEEK 4 (2/10-2/15)


  • 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?


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


Preparing images for the web in Photoshop

Inserting an image into HTML

Color codes for major brands:


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:


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


  • FTP basics
  • Working with images
  • Working with Wireframes

Due Next Week (2/17):

Discussion Question:


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

WEEK 3 (2/3-2/8)

Lecture (lemasney):

“Unless you are a graphic designer by training (like me!), chances are you’ve never needed to understand things like what separates a TIF from a PDF or a PSD. While the large variety of image formats may seem overwhelming, there is a method to the madness. We’ve put together a useful outline to help you understand the difference between each file format, and when they are appropriate to use.” found in How And When To Use Different Types of Image Files at http://goo.gl/pZn19l

Introduction to Imagery

Demo (lemasney):

Introduction to Photoshop (Adobe)

Resources (self-driven learning):

CSS Layout Tutorials (Continued W3 Schools)

Layout Basics (w3 schools)

Positioning a Block (w3 schools)

Styling the Box (w3 schools)

Working with images and linear elements:

Creating a background image

  • “In this article you will learn about the different large background styles and how to use them. You will also find out about the impact that large backgrounds has on bandwidth and site performance in general. Finally you will learn how to properly implement large backgrounds.” found in Large Website Backgrounds Do’s and Don’ts | Webdesigner Depot at http://goo.gl/KoOk

Adding shapes, lines and patterns

Saving the image for the web

  • Save For Web (Adobe)
  • hint — save your .psd files in the project1_extras folder
  • hint — save your optimized files (.gif, .png, .jpg) into the project1_website folder

Inserting backgrounds into CSS

Code (be able to discuss):

HTML elements CSS selectors CSS properties
<div> id selector (#)
  • width (container 900px)
  • height (do not use)
  • min-height
  • position: relative
  • float
  • border-style
  • border-width
  • border-color
  • outline-style
  • outline-color
  • outline-width
  • margin
  • padding


  • If you add the overflow:hidden property to the containing CSS div element in CSS–the background color will stretch to include floated elements.
  • If you add margin:0px to the header(h1, h2, etc.) and body elements in CSS you will get rid of extra space between elements.
HTML elements CSS selectors CSS properties
  • background-image
  • background-repeat
  • background-position
  • background (optional)


  • New HTML
  • New CSS
  • Photoshop review

“If you’re a designer and you’re not subscribing to RSS feeds, I strongly encourage you to start. RSS, short for “Really Simple Syndication” is a format for delivering regularly changing content (i.e. blogs) to a single user. The old way of browsing the web involved bookmarking and visiting sites whenever you wanted to check for updates. RSS and accompanying RSS readers bring news stories, blog posts, etc. to a central location whenever new content is published. Basically, it does all the hard work for you and gives you a bucket full of content ready for consumption.  For more information on RSS, check out this RSS in plain English video. It provides a great overview and will help get you started.” found in 75 RSS Feeds Every Designer Should Follow: Design Community Connect (Part 2) at http://goo.gl/vWAVP

Due Next Week (2/10):

Discussion Question (answer with a Google Drive Document):


Find a website where you think the text type contributes to the visual design. Describe how the choice of serif/sans serif, font-color, weight, style and type size impact how easy it is to navigate the website and how these choices contribute to the overall message. (Please include a link)

Weekly Assignment (answer with HTML):

3: HTML with CSS & Layout

Add layout elements and style rules to your historical figure wikipedia page.

Content Requirements: (minimum)

  • 1 headline
  • 1 sidebar
  • 3 paragraphs
  • all names of people linked to their wikipedia pages

Technical Requirements: (code from agenda)

  • you must use relative positioning
  • you must have a floating element
  • you must have at least two div elements
  • the width of your main element must be 900px