Although not a Macromedia 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.
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 environment.
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... as shown in Image 2 below:
Image 2: Defining a new site
This action opens the New Site dialogue box, shown below in Image 3:
Image 3: Adding your site name and root folder
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.
I use this feature if I'm working on a new section of a site that I don't want included in TopStyle's site definition until it's complete.
Image 4: Excluding folders within 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.
TopStyle will then change its view to show you the contents of the site you have just defined.
Image 5: The files within your defined site
You will notice that I have 14 documents in this site definition that are linked to a style sheet and 10 that aren't. Clicking the All HTML Documents option will give me a list showing all the pages in the site. All of the files that are linked to style sheets will be duly noted in the list. This gives me easy access to see if any of my files that should be linked to the style sheet aren't. In this case the 10 files that aren't linked shouldn't be linked; they are things like the application.cfm file, error catching pages and server side includes that pick up the style sheet when they are called into the page.
Image 6: All the files in the defined site and their status
I 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 with <style> blocks option.
TopStyle provides you with several options for ensuring your site definition is kept up to date. You can use the keyboard shortcut F8 to open the Options dialog box. When the Options dialog opens, click the Site Options option to reveal the different methods of maintaining your site definition.
Image 7: Setting the site re-building options
We have three options, and they are all self explanatory. My preference is to rebuild my site definitions when I choose to do so, and to those ends I have the first radio button selected.
Once your site has been created you can re-access at anytime from the File menu.
Image 8: Re-accessing your site definition
Selecting the Open Site option opens the Open Site dialogue window as shown in Image 9 below.
Image 9: The Open Site dialog window
You simply select the site icon you want to work on and click the OK button. TopStyle automatically switches the view to the site definition view. To close the site definition window you once again visit the File menu and select the Close Site option.
In this tutorial we have seen how we can integrate TopStyle with Dreamweaver and make it our primary CSS editor. We have also had a quick insight into creating a site definition within TopStyle and we have seen how we can gain easy access to an overview of the files contained within our site. Additionally, we've learned how we can set the site rebuilding preferences to be completed automatically or by hand when the need arises.
You can of course use TopStyle with Dreamweaver without defining a site within TopStyle, but you will miss out on a lot of the functionality TopStyle provides if you don't. We have seen some of this functionality already, and we will see more as the series progresses.
In Part 2 of this series we will look at how we can gain in-depth reports on the rules used within our documents and how we can track down any orphan rules that have become surplus to requirements.
Until next time :~)
Approximate download size: 232k
Keywords
TopStyle, top, style, site, definition, integration, rebuilding, css
