Friday, December 10, 2010

CSS tactics

I have been engrossed in web design for the last 2 months and I am discovering that you can do most anything if you learn CSS. I have 7 books that are solely CSS, I’ve devoured them, taking an absurd amount of notes and there is still so much to learn! My 2 favorites are {speaking in styles} Fundamentals of CSS for Web Design by Jason Cranford Teague and CSS the Missing Manual by David Sawyer McFarland. {speaking in styles} teaches CSS like a language (foreign not programming) with syntax, semantics and vocabulary. These are the 3 sections that I am constantly referring to since I can never remember how to write in-line CSS, I get it confused with the syntax of HTML. The rest of the book puts CSS in context with web design and once you’ve read it, you’re pretty much done with that part. Most CSS books provide you with the same information so why this one? I like the way they list a term or CSS objective on the left side and present examples on the right side. With each item having a 2 page spread, it’s easy to use, there is a lot of white space so I’m not overwhelmed and searching for what I want in a sea of text. It’s a great introductory book.

CSS the Missing Manual is a workhorse! The text is easy to read and follow. I’ve read most of the book twice, once cover to cover and now project by project. I struggle with the index in most of the technical books, I don’t call things by the same name. I do use this index some but I find it much easier to look in the table of contents. I have just spent 2 days setting up a simple interactive map, it was so easy to design in Photoshop! But Dreamweaver was wearing me out! I finally pulled out the missing manual and started with basic layouts using floats and positioning. As I found bits and pieces of my puzzle examined, I was referred back to the chapter on background images.  Several hours later, I got the first block in my map laid out! The Photoshop map is basically 2 columns (below) while the Dreamweaver version is 3 columns with a nested column in the middle. The street lines are made up of 2 background images; it’s still going to be a challenge to figure out the best way to do the half street near the bottom!

print-map-web 

The other site that I have been working on has been equally educational. I have created a collage that has  images appear when you roll over the photographs. It’s a simple concept and you see it regularly but…

home-page-idea-blue

Once the site is up and running, I will post the address so you can play.

No comments:

Post a Comment