« December 2003 | Main | February 2004 »

January 30, 2004

Style Master secrets and tips #2 Dreamweaver and GoLive

What's this, two posts in two days?

I've been working to make it easier to integrate Style Master with Dreamweaver MX 2004 (quite a mouthful) and Adobe GoLive CS (ditto, though what happens when they upgrade? DS (Citroen may sue), or CX? of CS 2? Anyhoo) so that you can use Style Master easily to edit CSS while using those applications.

Why bother?

Well, with all due respect to these apps they aren't dedicated CSS editors and so (hopefully) Style Master's CSS editing features will have the edge on their editing of CSS. And at about 18% of the price :-)

So for today, well look at using these apps and Style Master on Mac OS X. In the next day or two, we'll do Windows.

Macromedia Dreamweaver

It's a little involved, but here's what you have to do.

  1. In the Dreamweaver menu Choose Preferences…
  2. In the preferences window, choose the category File Types / Editors
  3. In the Open in code view field, remove the .css entry
  4. Click the + button above the Extensions list
  5. Enter .css
  6. Now click the + button above the Editors list
  7. Locate the Style Master application in the window which opens and click Open
  8. Now click OK

Now you are set up, how do you actually edit style sheets with Style Master?

Read on.

  1. Open an HTML document with a linked style sheet
  2. Open the CSS Style tab of the design palette
  3. Right click in this window and make sure that Use External Editor is checked (otherwise you'll end up using Dreamweaver's CSS editor)
  4. Right click the name of the style sheet or any of its styles and choose Edit...

and the style sheet should open in Style Master.

Note that this won't work for embedded (what Dreamweaver calls "internal") style sheets.

Adobe GoLive

GoLive's integration with other applications isn't as extensive (perhaps a generous term) as far as I can determine as Dreamweaver's. In GoLive, you can specify external editor, then in a site, you canright click a file to edit that file in an external editor. If you can do more than this, please leave me a comment, and all will be the wiser.

This will work in all versions since and including 5 I believe.

OK, fasten your seatbelts, its going to be a bit of a bumpy ride.

  1. In the Golive menu choose Web Settings…
  2. In the Web Settings window, choose the File Mappings Tab
  3. In the Suffix column select css
  4. In the Inspector Window, in the Application pane, click the folder button
  5. Locate the Style Master application inthe Window which opens and click Open/li>
  6. Now close the Web Settings window

Again, how do we take advantage of this?

  1. Open a Site
  2. Right click a CSS file
  3. Choose Open>Open in Style Master and behold the miracles of modern science

You can also just double click a style sheet file and it will be opened in Style Master.

Next Time, we'll do Windows, including FrontPage (people keep asking!) NoteTab and HTMLKit. Stay tuned.

January 30, 2004 | Permalink | Comments (0) | TrackBack

January 29, 2004

Heads up - Style Master 3.5 approaches

Right now we are working very hard on the beta of Style Master 3.5 for Mac OS X and Windows.

We hope to have a public beta in the next couple of weeks.

But, to keep you interested, here are some of the new things you can expect in this version.

validation

Until you make sure that your CSS is valid, trying to work out why what you are attempting to achieve is "not working" is a waste of time, because a syntax problem may well be throwing a spanner in the works.

Some browsers are more "forgiving" of malformed CSS, so if your CSS "works" in one browser and not another, again, it may be invalid CSS causing the problem.

To help you ensure your CSS is valid, Style Master's syntax coloring will pinpoint incorrect properties, and in version 3.5, invalid property values. For instance, padding can't take negative value, so padding: -1em will show up with the -1em styled as invalid. By the way, you can customize how you want invalid property names or values to appear.

In 3.5, the property editors also indicate whether a value is invalid. So writing valid CSS is even easier.

And to triple check that validity, in 3.5 you can now check the validity at the W3C's CSS validator either in your default browser, or within Style Master, with a single menu selection.

previewing

Windows previewing has been good since version 3, however, the Mac previewing has been a bit more rudimentary. Style Master 3.5 will sport sophisticated previewing inside the app itself, courtesy of WebKit, the rendering engine of Safari. Which is just about as good a standards based rendering engine as there is.

templates

We've long had CSS templates for you to base your style sheets on, but Style Master 3.5 now features a dozen or so sophisticated layouts, many with graphics, which you can reuse under a creative commons license. These templates demonstrate many of the latest based design techniques.

The templates also feature HTML for your pages, so just add your own content and you are ready to go, or to customize them as you please.

Want an example. Try this on for size.

wizards

Developing style sheets can be daunting for the beginner, and even to the experienced developer. To help make some of the more sophisticated aspects of CSS more accessible, and to help beginners get going quickly with CSS we have introduced a number of "Wizards" that step by step help you

  1. create a new style sheet (including fonts, colors, text and page layout, link styles, heading styles and more)
  2. create standards based multi column layouts with headers and footers
  3. create attractive looking "breadcrumb trails"
  4. make sophisticated navigation bars (horizontal or vertical)
  5. style links - background colors, text colors, fancy underlining, in all the states you need

These wizards don't just create your CSS, but where necessary, your HTML as well. They'll even link your pages or whole sites to your style sheet where appropriate, should you want that.

Designing and developing CSS based designs will never be the same.

linking and embedding

We've made linking and embedding a style sheet in HTML documents much more intuitive. You can drag a file to link a style sheet to it, or a folder to link to all the html files in it.

And the same goes for embedding.

While you are at it, you can manage media, stylehseet types and other advanced aspects of a linking and embedding style sheet, again with wizard-like ease.

links to resources

We've included links to a number of the best CSS and web design related resources, blogs and books right in the Help menu. Inspiration and help will always be close at hand.

browser support

3.5 now features browser support information for Safari 1.1, and Mozilla 1.6, on top of all the other browsers on previous versions.

tutorial

We have developed a new, detailed tutorial that takes you through the steps of developing a sophisticated standards based web site, using the latest CSS design features.

it's the little things

Sometimes it's those finishing touches which make working with an application just right. We've been working hard to polish the app

type ahead

Our code auto-complete feature can now be invoked while it is disabled by hitting control-space. It's more context sensitive now too. So your hand coding will be even more efficient, and you'll save plenty of key strokes.

performance

We've worked hard to make Style Master more responsive to typing, clicking, scrolling, selecting and all the other actions you take while editing a style sheet. Whether on Mac or Windows, you'll find the application more responsive to your needs.

shorthand support

Many users have asked for it, so now its here.

In the Options (that's preferences for you Mac users :-) you can choose to use shorthands by default. So when you use editors to define font, background and other properties of CSS which support shorthands (such as margins ) Style Master will automatically create a shorthand version of the property.

But shorthand support is much cooler than that. Whether or not shorthand support is turned on, if you edit a shorthand property with the property editors, Style Master will keep the property a shorthand, while as you would expect, if you edit a longhand property, Style Master will make sure the edited property remains a longhand version.

the wrap

Style Master has been around for along time, since September 1998 to be precise. Since then CSS, browser support, developer knowledge and use, and not least Style Master have grown more sophisticated, more powerful, and increasingly fundamental to the way we design for the web.

We are very excited about Style Master 3.5. Keep an eye for the public beta due very soon.

January 29, 2004 | Permalink | Comments (2) | TrackBack

January 23, 2004

Bloggies awards

No,

I'm not asking you to vote for me :-) Either of you :-)

However, just a quick note to let you know about the 2004 Bloggies awards.

Basically, I've become converted to the value of blogs in a big way. And the bloggies recognizes excellence in blogging.

So get over there and take a look.

To help the Bloggies on their way, westciv is offering a copy of Style Master for the winner of each category (there are a couple of dozen categories).

How we use blogs

At westciv we are currently using blogs

  1. to let you know about what is happening with Style Master (I'll update you about where the beta is at later today I promise)
  2. to let you give us feedback about the application, what you like, what you don't, what needs fixing, what you'd like to see. What better place than a public forum to keep us to our word
  3. Maxine's fabulous blog keeps you up to date with the latest news in the web standards world. Not just your average list of links to other blogs which link to other blogs which all link to the same article, you get Maxine's intelligent editorial and dry wit to the bargain.
  4. While it's not public, we actually run our beta test program using a blog. I post details of the latest versions, what's new, what's been fixed, and so on, and beta testers reply with test reports, comments and so on right on the blog. Everyone involved in the program sees what is going on, so I don't get a dozen reports of the same problem, and testers don't get lots of email in their inbox. I feel it has improved the process of managing a beta test enormously.
This is the year of the blog, I feel. It will be the year that email, opt-in, opt-out, mailing lists, forums, and so on take a back seat to the simple yet powerful capabilities of the blog.

A year from now, I feel that subscribing to blogs using RSS, and reading blogs via a feed reader will even start replacing a fair proportion of the average web users browsing.

Update on the nearly ready Style Master 3.5 for Mac OS X and Windows coming shortly.

January 23, 2004 | Permalink | Comments (0) | TrackBack

January 14, 2004

Style Master secrets and tips #1

This is the first in a series of occasional articles about some of the features of Style Master, particularly some of their more obscure aspects.

If you have used Style Master 3 for Windows or Mac OS X, hopefully you've noticed the syntax coloring feature. Today I'll talk a little bit about what it does, and how you can customize it

This morning someone wrote to me asking why some property names in a style sheet they were looking at had a red background.

I guess it is not immediately obvious that this is a warning that something is wrong with the syntax of the style sheet.

In Style Master 3 for Windows, Style Master will warn of incorrect property names. In Style Master 3 for Mac OS X, and the upcoming 3.5 for windows, Style Master will warn of incorrect values as well.

Here are some examples of when this feature can be very helpful.

What's wrong with this?

li {list-style-tpe: circle} ?

or this

body {scrollbar-arrow-color} ?

In the first instance, simple typing errors can be very hard to spot, especially in a sea of code.

In the second, scrollbar-arrow-color is not part of CSS, it is an internet explorer extension. As we promote standards based coding, it is important to point this out. At the very least it will stop you scratching your head for 30 minutes wondering why Mozilla 1.5 does not support scrollbar properties.

When it comes to property values, things get even trickier.

In our workshops, I've seen time and again people wonder why color: #fefef for example doesn't work. If an editor highlights a problem for you, it can save a serious amount of work.

Customising

In the Options (Windows) and Preferences (Mac OS X) you can choose the color and style for any of the syntax elements of a style sheet, including invalid properties and values.

Open the Preferences from the Style Master menu in Mac OS X, or the Options from the File menu of windows, and go to the syntax style tab. Select the kind of element you want to style, then use the style editor to change their style.

People comment from time to time that Style Master is just a glorified text editor, so why use it in place of other text editors that are more general purpose? Syntax coloring is just one of many reasons why specialized tools can make you much more productive. And save your hair :-)

January 14, 2004 | Permalink | Comments (1) | TrackBack

January 13, 2004

back on track

Ok,

I've just got a cable connection (nice month wait for that) in my new apartment, and am back online.

And how. Up to 1MB (byte) a second, up from maybe 5 on my dial up line of old.

In the meantime there has been anew Mac Style Master beta, with a Windows version due very soon.

Stay tuned.

January 13, 2004 | Permalink | Comments (0) | TrackBack