Reading about Links for Thursday, Oct. 25

Posted on: October 22nd, 2012
For Thursday, some reading in Learning Web Design:

  • Review pages 105 – 111 in Chapter 6: Adding Links
  • Read pages 112 – 120 in Chapter 6: Adding Links

After we’ve finished the crit on our Artist/Musician site, we’ll do an in-class exercise based on this reading.

Enjoy your day off – see you Thursday!


How to create a webpage – with rollovers! – using Photoshop & Dreamweaver

Posted on: October 16th, 2012

Thursday we learned about creating multiple optimized images from one Photoshop webpage comp.

Today, we’ll review those steps and take it further. We’ll use Photoshop to slice and optimize the comp images (that’s the review part).

We’ll also use Photoshop to actually create our html page! When the page and all the images are created, we’ll open it up in Dreamweaver and make our Javascript rollovers.

Step-by-step directions below:

Slicing+rollovers from Ann Foley

Busy Week! (Week 7)

Posted on: October 11th, 2012

Busy week!

We started work on the artist/musician assignment, which is fun and creative and challenging.

This week, we talked about and worked on these steps of the assignment:

  1. Choose artist and gather images.
  2. Using Photoshop, create a static comp of your artist page.
  3. Slice up the comp into the required areas: titlebar, navi, etc. Slicing, BTW, is a Photoshop term that means cutting up a comp.
  4. Optimize each slice appropriately for the web. We will cover slicing and optimizing thoroughly.
  5. Create a gif animation to put in the little animation div in the lower right-hand corner.
(I’m going to simplify the steps below. We’ll use Photoshop to create slices and to create the html for our pages. Much better!)

Next week, we’ll talk about and work on the following steps:

  1. Open the Artist.html page from the materials folder in TextWrangler. Save it as your Artist webpage. In this html page, place the images you created in the slice/optimize process in their correct divs.
  2. Returning to the navi and back and next slices, we’ll make rollover animations using Photoshop.
  3. We’ll plug the ani, navi, and back/next slices into their areas.
  4. W00T! We’re done! Time for the crit.

Artist/Musician Site

Posted on: October 9th, 2012

Tonight we’ll have a look at our scuba site and plunge right in to the Artist/Musician assignment.

Note that the deadline for the Artist/Musician assignment is now October 25 at the beginning of class.

And here, for your viewing pleasure, Gangnam Style. This video always makes me smile.


September 27 – External Style Sheets & Extended Deadline

Posted on: September 28th, 2012
The due date for the Scuba/100k assignment is extended to Thursday, Oct. 4 at 5:45. We’ll have a crit as soon as they’re all uploaded.

Here’s how you put all your styles into an external style sheet.

  1. Create a document with the extension .css. For example, mystyles.css.
  2. Put that document in the same directory at the same level as the html document you’re working on. In the same folder, in other words.
  3. Copy all the styles from the head portion of your html document. Just the selectors and declarations – not the <style type=”text/css”>…</style> portion.
  4. Paste the styles into the mystyles.css document.
  5. Delete the styles from your html document.
  6. Link  mystyles.css to your html page by putting this in the <head></head> portion of your page:

<link rel="stylesheet" href="mystyles.css">

And there you have it.


Tuesday, Sept. 25 – Optimizing Images

Posted on: September 25th, 2012

Hi everyone,

If you weren’t here, here’s a brief recap:

  • Returned your corrected Resume assignments.
  • Talked about some common errors on the assignments – not many! You guys did great work!
  • Demo’d optimizing images.
  • Started the Scuba/100k assignment.

To catch up:

  • Read Chapters 21 and 22 of your text, Learning Web Design. Practice optimizing some images using Exercise 21-1, p. 525, and Exercise 21-2, p. 528-530.
  • Go to the Scuba/100k assignment page and read it over.
  • Download the files you’ll need to do the assignment.
  • Download the Handout for the assignment and print it (though it says exactly the same thing as the assignment page, so you don’t have to download and print it if you don’t need it.
  • Download and print an Optimization Cheatsheet.

Hope to see you on Thursday!



Week 4 Recap – Putting it all together

Posted on: September 20th, 2012
Web Gazette Stage 3 should be uploaded by tomorrow, Sept. 21, at midnight.


  • Chapter 7 – Adding Images: p. 123 to 132.
  • Chapter 13 – Colors and Backgrounds: p. 284 – 300.
  • Chapter 21 – Web Graphic Basics: p. 507 – 533.
  • Chapter 22 – Mean and Lean Web Graphics: p. 541 – 553.

This week we finished up and critiqued our resumes and finished up Web Gazette.

In order to do that we had to learn about laying out web pages using CSS and HTML. The basics of how to do that are in the slide decks from this week, below.

Next week

We’ll start a new assignment – Scuba! You’ll learn about optimizing images for the web.


Background Images

Posted on: September 20th, 2012


Using absolute positioning for layout

Posted on: September 20th, 2012


Centering an HTML Page

Posted on: September 20th, 2012