»

Ouff!, well a lot of stuff happened between last October and today. The most important one is that my daughter, who was born last September, took most of my time outside of work. So I didn’t have much time updating the site. However, I’m pretty sure that no one ever noticed since I didn’t post “publicly” the new site. I won’t until more content is available. However, things are getting better and I can allocate more time into this site avocation.

The first post merely consisted of introducing myself and setting up the blog system. I’m using WordPress. WordPress it’s easy to use, to manage and to customize. WordPress is famous for providing several themes to choose from, but I wanted to create my own theme. After all, this site is all about me creating and designing and expressing my experience.

Since WordPress uses CSS layout for most of the customization, It’s fairly straightforward to customize style.css, the CSS file that WordPress provides in a theme and contains all the necessary selectors.

As usual, my typical technique for customizing a dynamic page ( PHP in this case ) is to take the source right from the browser and pasting it into a new static HTML document that you save to the root of your site.

For this exercise, I decided to compare the CSS capabilities between Expression Web and Dreamweaver CS3. In case you didn’t know yet, I used to work for FrontPage and Expression Web for 7 years before I switched to Expression Design last year. So using CSS layout using Expression Web is a piece of cake for me. Nothing beat Expression Web at the time it shipped. So I was curious to know if Dreamweaver managed to catch up on Expression Web in term of CSS capabilities. Let’s find out.

Before I got deeper, let me explain in my opinion was constitutes a good CSS editor.

  • Ability to display and managed all the styles a given document can potentially use
  • Ability to display the cascade of rules for a particular tag.
  • Ability to give a summary of all the applied style for a given tag
  • Ability to display the list of rules a given selector has defined
  • Ability to edit and modify styles at the source of where the style is declared (never override as an inline style)

The strength of Expression Web is his capability of supporting all the bullets above.

For instance, Above is the screenshot from Expression Web currently editing the tag <div class=”post” id=”post-3″>

  • You can see on the right panel all the available styles from style.css.
  • The left panel shows the cascade list of style (the applied rules).
  • The Summary button allows to display all the style currently being applied to the tag, and most importantly the source and any conflicts.
  • If you un-click the summary button, the CSS property grid displays the current properties for a given selected style in the “Applied Rules” section.

Above is the screen show of Dreamweaver also editing the tag <div class=”post” id=”post-3″>

    • “All” and “Current” is what allows you to view all the styles or the current style from the selection. As oppose to Expression Web, which chooses to display all the style into his own panel.
    • The summary for selection is the equivalent to pressing the summary button in Expression Web. The nice thing about DW is that the summary is “sticky”, always there. Expression Web will get out of summary mode if you click on one of the applied rules

DreamWeaver allows you to only display the applied properties. In Expression Web, the applied properties will be bold blue. The things I like about Dreamweaver compared to Expression Web is the fact that the summary is sticky. You can select a style in the summary view, which will highlight the actual rule the property comes from in the list of cascade rules (Expression Web will also do that) and finally display the list of CSS properties for that particular rule. Expression Web cannot do that. The only way to see the properties is to hover the rule and wait for the tooltip to display the properties.

The CSS functionality available in both product is what makes customization of the CSS style sheet so easy. By putting the IP inside a particular tag, you can clearly see the CSS rules being applied, you can locate where it comes from and you can finally change them in place. Both Expression Web and DreamWeaver CS3 does a fairly good job. However, Expression Web was the first to come out with all those cool features. DreamWeaver had the change to perfect and “copy” literally the functionality from Expression Web. That said, because the WYSIWYG is much better in Expression Web, I preferred using Expression Web. That’s said, Dreamweaver CS3 did beef up their CSS functionality.

I did use Expression Design SP1 a little bit for creating the gradient for the header title. But that’s as far as I went for actually Design. I’ll leave that up for another post:)

Next time, expect to see the Logo of Digital Epiphania 🙂

This entry was posted on 11 February 2008 at 6:20 am and is filed under Digital Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.