Adobe CS5 is coming…

If you are free next Monday morning, be sure to sign up the Adobe CS5  Launch event. You can sign up here.  Adobe has released videos of some of the new features. Take a look.

Favicons

Did you ever notice when you load a webpage in the browser that an image will appear next to the web address? In some browsers this image will also appear when you bookmark a page.

This is called a favicon and is relatively easy to create. There are several favicon generators where you can upload an image to create the favicon but you can also create it in Photoshop or Fireworks as well. Follow the guidelines below when setting up your document.

Creating your own favicon

1. Create a new document 16 px X 16 px.
2. Zoom in and create your image. Keep it simple and use as few colors as possible.
3. Save for Web and in the save dialog box change the file extension to .ico.

Favicon Generators

• Bradicon
• http://www.favicon.cc
• http://favikon.com

This links shows the code necessary to display your favicon in the address bar.

• How to Add a Favicon to your Site – via W3C

CSS and Background Images

I have posted some more content on my student site to prepare for Dreamweaver module. Today we will take a closer look at using CSS and background images. Remember that next week is spring break so I will not assign any new homework but I do want to review the HTML & CSS refresher.

CSS Resources

As we move to the next module it is important to brush up on your HTML and CSS skills. We won’t go into depth here but will be focusing on using background images to enhance our designs and using CSS text properties to design the text for maximum readability. Below are a few of the best links from my Diigo bookmarks.

Back to Basics

• SitePoint Reference for CSS, HTML, & JavaScript – this is great place to look something you can’t remember
• http://www.cssbasics.com – just as the name says
• CSS Inheritance – presentation by Max Design
• Cascading Order and Inheritance in CSS – via David’s Kitchen

Lists and Backgrounds

• Listutorial – great instruction on creating lists to look like image rollovers.
• Backgrounds In CSS: Everything You Need To Know – via Smashing Magazine

Web Design layouts with CSS

• Selector Tutorial – This is a great tutorial for learning the more advanced features of CSS
• Floatutorial - learn how to use the float property to layout a web page.
• Smart Fixes for Fluid Layouts via Smashing Magazine
• Understanding CSS Positioning Part 1 – via Kilian Valkhof

Cool CSS Tricks

• Bubble Effect with CSS – CSS technique to make an image appear bigger on hover
• CSS Homer, animated – using CSS and a bit of jquery to animated Homer Simpson
• CSS/Edge – Eric Meyer’s playground of CSS tricks

The Design Process in comics

Many people have created comics about the design process. Here are some of the best ones.

• How a Web Design Goes Straight to Hell
• Strong Bad’s email about a website
• The Brads – Browser Support

Design Process

We have talked some about the design process but now as we move closer to creating a web site design it is important to understand the process in detail. Keep in mind this process will be different depending on a number of factors but I think you will find it helpful to develop your own process. Below are some of the sites mentioned in lecture today.

• http://clientsfromhell.tumblr.com
• CSS layouts, Max Design
• Screen Displays Statistics
• Scrapblog
• Archiveronline
• Close To My Heart
• Creating Keepsakes Magazine
• Creative Memories

Web Graphics Presentation

We will do something a bit different for this lecture. Here is the link to the presentation.