Week #7 – Image Maps and Organizing Site Layouts

What we talked about in class today:

How to create an image map with Adobe Dreamweaver. What types of images work best. Photographs vs. artist created images. Using 3D tools to create graphics.

Adobe Image Map

3D graphics tutorial

Image Map

CSS Tutorials:

Advanced selectors

Block quote and corresponding CSS

Display Block to center an image

Box Shadow CSS for drop shadows effect

Screen Shot 2014-10-16 at 8.14.07 PM


  1. Ten (10) images (at least 1000 px wide) on your USB drive OR in Dropbox.

Required Reading:

Comments Off on Week #7 – Image Maps and Organizing Site Layouts

Filed under Classes

Week 6 – Working with CSS

DEMO – Adding custom fonts and lists to CSS

Follow these tutorials.

Adding a custom google web font

Inserting and Styling Lists


Using classes to specify custom fonts

Adding fake links

  • hint–if you use a # instead of a url, you will create something that looks like a link but doesn’t link to any content

  • hint–this helps you style links before you link them


Lecture: Choosing a display and accent type

DEMO –Positioning in HTML & CSS: Part 1

Follow these tutorials.

Review Layout Basics (optional)


Create a wireframe using Google Drawings


Leave a comment

Filed under Uncategorized

Week 5 – Imagery and DIVs

Review: Design Principles
Please review the following lectures. The visual design of each assignment is a large part of your grade. I am looking for the principles and concepts that are outlined in these lectures.
Choosing a color scheme (Links to an external site.)
Choosing the chroma & value
Choosing a dominant color
Imagery  – Intro
Adding texture (Links to an external site.)
Adding pattern (Links to an external site.)
Choosing a text typeface (Links to an external site.)
Styling a text typeface (Links to an external site.)

Review: Technical Skills
Please review these demonstrations. For the next project you will be expected to know the skills included in these demonstrations. Let me know if you have any questions about any of the skills.
Demonstration: Html Basics
Demonstration: Intro To Css
Demonstration: Css Layout
Demonstration: Creating And Inserting Background Images
Demonstration: Creating And Inserting Content Images

Demonstration: Introduction To Photoshop

Leave a comment

Filed under Uncategorized

Week 4 -Working with Content

DEMO – Creating and Inserting Content Images

Some tutorials:

Preparing the image in Photoshop

Saving the image for the web (review)

Inserting an image into HTML


Sample Page

To see the code: right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.


DEMO – Uploading your website

FTP Software

How to upload your files

  • Uploading your files – link T/K
  • Fixing common problems – what to do about misplaced images, css, folders, etc. link T/K

Leave a comment

Filed under Uncategorized

Week 3 – HTML and CSS

DEMO – CSS Layout

Layout Basics


Positioning a Block


Styling the Box



  • 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 ect.) and body elements in CSS you will get rid of extra space between elements.




DEMO – Introduction to Photoshop

Follow these tutorials from Adobe TV.

Photoshop basics

DEMO – Creating and Inserting Background Images

Follow these tutorials from me and Adobe TV.


DEMO – Creating a background image


Adding shapes, lines and patterns


Saving the image for the web


Inserting backgrounds into CSS

Leave a comment

Filed under Classes

Week #2 – Intro to HTML & File Structure

Lecture: How the web works

DEMO – Getting setup

File Directory: 

File structure Rules:

  1. File names have no spaces or strange characters
  2. File names are lower case
  3. All files in folder named project1_website
  4. Folders named images, fonts, js inside project1_website folder
  5. All images are inside the images folder
  6. External stylesheet called project1.css
  7. All css in external file
  8. No psds uploaded
  9. All pages titled
  10. All images have alt text

Resource: How to use W3 schools:


DEMO – Working with the text editor



Create a very basic HTML page.

Content Requirements: (minimum)

  • 1 title
  • 1 line of text in all caps, in a color other than black.
  • 3 paragraphs of lorem ipsum. Usetags for each paragraph.
  • 1 image <img src=””>
  • 1 hyperlink <a href=”(the URL for your link” title=”” target=”_blank”>
  • Name the file “firstHTML_yourname.html”


Set up a Flickr account. This is where you will share all your screenshots and store images that inspire you. Tags, sets, groups and other aspects of Flickr will be explained. Our Flickr group pool: duCret Web Design Class. You will be expected to update this weekly.

Leave a comment

Filed under Uncategorized

Week #1 – Welcome to Web Design!

Checking out the code

What was discussed in class today:

We started with what we’ll cover this semester (see syllabus). Then went on to “about the instructor”. Attendance, homework and class policies. Student introductions. Brief review of necessary software and useful tools. Introductory explanation of terms used in web design and HTML.

Setting up a Flickr account. This is where you will submit all your assignments and store images that inspire you. Tags, sets, groups and other aspects of Flickr will be explained. Our Flickr group pool: duCret Web Design Class

You can keep track of your progress in this class via Thinkwave. Your instructor will email your user name and password to the email address you provided in class. Please make sure she has your most current email address.

What you absolutely NEED to know:

Be prepared for class. Each week you should have with you:

  1. Notebook
  2. Pen or pencil
  3. USB drive (no less than 8GB) or other removable storage device.
  4. Sketchbook



Create a speculative styletile as per directions using Google drawings and share with cartoongoddess@gmail.com. It should include a recent photo of you, 4 square color swatches, both color and pattern elements. Assignment details can be found in web design class Thinkwave.


  1. Get inspired (Flickr) – for collecting ideas. Find two (2) samples of eye-catching images and upload. Can be anything, whatever inspires you. Jot down ideas and comments in description panel! You will be expected to update this WEEKLY.

Comments Off on Week #1 – Welcome to Web Design!

Filed under Classes