Tips, web design book reviews, resources and observations for teaching and learning web development.
My latest Web Teacher Tip is a test drive of the new slideshow creator in Fireworks CS3. The article is on a separate page so as to accomodate the completed slide show. Read about slideshows here.
If you don’t own Fireworks, I suggest other slideshow creators you can try.
If you have any comments to add, return to this post to leave them here.
The short answer is yes. The long answer is about why it’s a big deal. I’ve been searching the few available resources on PNG transparency lately and I’ve found that most of them are impossibly difficult to understand. But I’m trying. I think I’ve finally figured out why PNG transparency is so longed for, while GIF transparency is regarded as inadequate.
With IE7 about to be released, the future for PNG transparency is suddenly brighter. The possibility of IE7’s release has driven all of us to extremes of relearning, and PNG has been my interest lately.
A GIF can be transparent. True. It uses what is called index transparency. This means that a color is either completely visible (opaque) or completely invisible (transparent.) A PNG can do that, too. But it goes several steps better. A PNG also can handle alpha transparency. This means that up to 254 different colors can be set to varying degrees of transparency in a single image. You can imagine the fancy effects you could get layering a transparent PNG over a background image. Or piling up a bunch of transparent PNGs using z-index to achieve all sorts of interesting effects. Or sliding transparent PNGs over each other with a technique like the sliding doors effect.
I’m shaking my head yes, because I finally figured out what the big deal was all about. I know the great designers have already known this for a long time. Not being a great designer, I just got it. The great designers have whipped up ways to make IE5/6 work with PNG transparency, in spite of the fact that it doesn’t want to, just so they can play with this marvelous toy. Well, I’m on the bandwagon now, and I say this is a big deal!
Technorati Tags: web design, CSS, education, web design education, web standards
Scott Moschella’s Plastic Bugs – Announcing GIMPshop I’ve mentioned the open source graphics software GIMP here before. Now Scott Moschella has made a version that has menus very similar to what Photoshop users are familiar with and that works on Mac OSX (10.3).
Here’s a recurring scenario in my life. Someone who took some college classes to learn to make web sites has decided to try to implement CSS and to make their sites accessible. The classes taught them to make web sites by using Fireworks to slice an image and to export the resulting table-based HTML to Dreamweaver. Now this person, who–I admit–does beautiful graphics in Fireworks, comes to me or to some discussion list I participate in and asks for help in making their Fireworks generated HTML work with CSS or fulfill some accessibility need. This question is like asking how to get a tricycle to go from zero to 60 in under 6 seconds—it demonstrates a gap in the basic knowledge of what is involved.
Some college has given this poor person a difficult handicap to overcome. That handicap is the belief that what they are doing is a best practice that will adapt to every requirement. Yes, Fireworks can generate HTML. No, learning to generate HTML with Fireworks is not the best way to learn to make web sites.
In terms of best practice, students should be learning how to structure an HTML document intelligently so that it can be presented with CSS based enhancements (including, perhaps, lovely images created in Fireworks). An intelligently structured HTML document can adapt to every requirement: CSS/accessibility for screen, print, handheld, etc.
A sliced image exported from Fireworks as a table full of empty cells, spacer gifs, images and almost no text is not the web design solution that some college classes lead students to believe it is. Classes should teach HTML, CSS, and then how to apply that knowledge with a tool like Dreamweaver.
Fireworks does have its place: to create graphics. It should be taught as a graphics design tool, not as a web design tool. Students who use Fireworks to create exportable HTML should know how to adapt it in Dreamweaver to make it meet their other requirements.
There are many options available to an instructor who wants to teach students to think in terms of building structure with HTML that will support CSS and accessibility. My own book is written in these terms, and other books I have reviewed here such as Web Standards Solutions by Dan Cederholm are as well.
Tasks such as photo retouching, image composition and image authoring free with GIMP – The GNU Image Manipulation Program.
People who have learned to lay out Web pages graphically using Fireworks or Image Ready can export HTML containing sliced images poured into a tables-based layout. For years, students have been taught how to wrangle Fireworks and Image Ready into creating good rollovers, layouts, and optimized images in order to create beautiful and functional Web pages.
Some of those students are now wanting ways to use their knowledge of Fireworks and Image Ready graphical layouts to generate HTML using CSS-based layouts. How about it, Adobe and Macromedia? Can you give a demanding public updated tools that generate HTML and/or CSS fit for a world in which CSS is becoming the standard for layout?
Graphics Resources | WebDevBiz.com Linda Rathgeber, a Macromedia Fireworks guru, has a new e-book full of “recipes” for Fireworks visual effects.