Using Topstyle for more than CSS prototyping

Although not a Macromedia/Adobe application, TopStyle is used by many web designers and developers as their first choice for working with style sheets. In truth, the later versions of Dreamweaver, and in particular Dreamweaver 8 do a great job of supplying you with most of the things that you would need for working with style sheets. TopStyle, however, is a specialist CSS editor that has many capabilities for managing your style sheets that aren't present in Dreamweaver. It is these abilities that we will be looking at in this tutorial. It should be noted that TopStyle is a Windows only application.

Integrating TopStyle with Dreamweaver

TopStyle integrates nicely with Dreamweaver, in fact, it is more or less seamless, which makes its use all the more appealing. You can set TopStyle as your default CSS editor from within Dreamweaver's preferences. The preferences can be selected by utilising the Ctrl+U keyboard shortcut. If you would like to try TopStyle, you can purchase it from bradsoft.com or you can download the free lite version. Many aspects of this tutorial will not be available to you if you are using the lite version.


Image 1: The Dreamweaver preferences window

When the Preferences window opens select the File Types/Editors option from the Category column and then the .css extension from the Extensions window. To add TopStyle to the Editors window you must first click the + button and navigate to your TopStyle installation, which you will find in the Bradbury folder within the Program Files folder of your windows installation. Double click the TopStyle icon and it will be inserted into the Editors window. From here you can select it and then click the Make Primary button. TopStyle is now referenced as the primary CSS editor in your Dreamweaver


Defining a Site in TopStyle

TopStyle allows you to define sites in much the same way you would do when creating a new site in Dreamweaver. We will start this tutorial here. We'll examine how we can set up a site and look at how we can manage our style sheets from within TopStyle. TopStyle allows you to manipulate its appearance, so your view of the GUI may differ from mine. Click the File menu and select New Site







In most cases you will only need to add a name for your site. I generally use the domain name without the extension and the root folder from which you have defined your site in Dreamweaver. You can see my root folder resides in wwwroot of CFusionMX7. Yours may be defined within IIS or Apache etc; or at any other location if you are not implementing server side technologies in your web site.

You will notice next to the Root Alias... button is an Exclusions button. TopStyle has an ability to exclude all folders beginning with an underscore. This excludes Dreamweaver generic folders such as _notes and _mmserverscripts from being included in the site definition.





In Image 4 you can see that I have a folder where I am working on a new site. This work is progressing in the _newsite folder. For now I have this work excluded from the TopStyle site definition. To do this I have placed an underscore in front of the folder name and clicked the "Exclude All Folders Starting with an Underscore" button. You can see that these folders now have an X against them showing that they will be excluded. Once you have your information in the fields you can click the OK button to return to the New Site dialogue box., click the OK button on this dialogue box to generate your new site definition.



 have added an extra page to this site definition that isn't linked to the main style sheet. Within this file I have used an embedded style sheet within the document's head. You can see this file has been picked up by TopStyle and is shown under the HTML documents.