working on my website with Dreamweaver CS5.5

English: css example

Image via Wikipedia a little CSS code

earlier this week i downloaded Dreamweaver CS5.5 from Adobe for a 30 day free trial onto my laptop. it has given me a real boost in working on my website: daydreaming arts.

i already own dreamweaver but the now ancient CS3. it’s stuck on my desktop because i lost the product disc. so i’ve been struggling with my aging desktop, which is slow as molasses, and can’t be upgraded (long sad story there), and which, no matter how i situate it, i get i pain in my neck!

so guess what? i haven’t been working on my website!

the situation was getting critical because my pal Heidi Rand has featured me in her new book “Sell Your Artwork & Crafts Online: An Insider’s Guide to the Worldwide Arts Market” telling everyone how great my website is. and then she started promoting it on her popular blog! but of course i knew there were several of bugs. so what to do? get to work!

first i used dropbox to move the site from the desktop to my laptop, fastest way to move files ever! (it too is free.) and downloaded the most recent dreamweaver and got to work cleaning things up.

well i have to say that working on my laptop with my feet up is a pleasure! an even greater pleasure is working on the latest dreamweaver. the program is finally more useful than it is confusing. of course i’m sure it still takes a while to learn it. i’ve been using it since it in it’s infancy under the now defunct Macromedia so i only need to learn the upgrades.

one of the most amazing features of the CS5.5 version is the improved CSS panel and the “Inspect” mode. in my webdesign i make use of freely available code such as CSS styling rules and know enough to write some of my own, but i’m lost if i seriously break something!

the new CSS panel is active while you work in design mode, so you can click on something that doesn’t look right and it will show you all the rules applying to that feature. for example, the hardest thing to format is my long boring list of shows on the about me page. no matter what i did i could not tighten up the paragraphs! i’d been working on this problem for a while but not until the new CSS panel in dreamweaver showed all the rules that were affecting those paragraphs could i stop the madness.

in a similar way, the new “Inspect” mode helps you track down layout problems. but in a very visual way. while in “Inspect” mode the page elements light up, highlighted in different colors to represent all the margins, padding and property sizes you have in play.  something to low down on the page? mouse over that and it’s neighbors and you can see that the problem comes from some extra padding on a nearby element. the page lights up and so does your mind!

it wasn’t apparent to me what was going on when i checked out “Inspect” mode on my own. it all became clear when i watched this free video on Adobe’s help site. BTW the video was developed by my favorite learning site! now that i’ve cleared out the competing rules applying to my CV i’m heading back into dreamweaver land to apply my own styles to the page.