Class 1-5

News Flash

1. Web-based alternative to Photoshop for photo editing for the web! It's called picnik.com and it does the basics for free - rotate, crop, resize, color and brightness adjustments and sharpen.
2. There's an alternative for creating a multi-column layout. Instead of using float:left for each of the columns, you can use the display: table-cell command which now works in all the major browsers. Put that on EACH of the columns in your css and then put a display:table on the wrapper for these "columns". The single advantage to this method is that it keeps all the columns the same length - so your background no longer has to be applied to the row, but can be applied to each cell separately. See html and css (right click and save or click to view). We'll talk more about this next term.

Some Useful distinctions

Should I use <img> or background img?

Images are simpler, more obvious to change. They're first and foremost part of the content (html), so in general, use img in html if the image is part of the content

Background images are part of the look and feel (css)

Use <img> when any of these pertain:

1. The picture is part of the content and will change over time or from page to page
2. The whole picture must be seen, no matter how much content is in that section
3. You want text to flow around it
4. You have, or might have, more than one image in the div

Use background image when any of these pertain:

1. The picture is part of the template and does not change from page to page
2. You want to display content (text or images) on top (in front) of it.
3. the picture is decorative or textural and it doesn't matter if you just see part of it (you have to set height to force the whole background image to be seen)

How to Hand in Your Project

Submission required by Monday after this class

--unless you let me know you want more time!

Course Survey

1. Go to Blackboard - http://courses.wwu.edu
2. Select the courses tab
3. Find the Web Certificate course and select it
4. Select the Survey button
5. Please complete it to help me out for next term and next time I teach this class.

---

Next Term - adding professionalism and dynamic effects

This term we learned the rudiments of HTML and CSS - enough for you to hand-code small sites with a few pages. Next term we take this up a level and learn some techniques that make it easier to produce and maintain larger sites. You will learn to create email forms and enough javascript to authenticate and spam-proof these forms. Plus some cool graphic effects using jQuery. Additionally we touch on applying meta-data for Search Engine Optimization (SEO). During this term you be using a commercial server and standard FTP tools - similar to that used by most web professionals.

• Forms
• Metadata and SEO
• Javascript validation and spam blocking
• javascript libraries with jQuery
  • expanding menus (see sample of menu)
  • accordion (see sample of sliding accordion)
• Dreamweaver site management tools

Don't forget that EESP needs your enrollment by January 10, 2009

Class Dates - Winter Term

See Calendar

Some Reading over the Break on layouts

• 3 columns, liquid center
• 3 columns Layout
• Variations (fix for nav background ending too soon)
• Another Version
• Fully liquid layout
• Containing Floats

See More Learning Resources