TopStyle Pro Help & Tutorial
          version 3.11
TopStyleTM is Copyright © 2003 by Bradbury Software, LLC, (a.k.a. "Bradsoft.com") and is
protected by U.S. and internation...
TopStyle Help



Table Of Contents

TopStyle Help............................................................................
Topstyle Pro Help & Tutorial


                      8.4. Site Styles View ..................................................
Getting started




TopStyle Help
 1. Getting started

   1.1. Creating a New Style Sheet
       To create a new, blank st...
Topstyle Pro Help & Tutorial


       1.5. Using the View Bar
               At the left of the TopStyle screen you'll see...
Editing Style Sheets


 1.8. Find and Replace
      TopStyle's Find and Replace enables you to search for a specified stri...
Topstyle Pro Help & Tutorial


               What does the Active Style Definition do?
               The Active Style De...
Editing Style Sheets


     When this option is chosen, only style definitions which fully or partially support the
     s...
Topstyle Pro Help & Tutorial


                       Tip: If you have a large number of fonts installed on your system, y...
Editing HTML and XHTML


3. Editing HTML and XHTML

 3.1. HTML Definitions
     What is an HTML definition?
     When edit...
Topstyle Pro Help & Tutorial


       3.5. Style Upgrade
               TopStyle's style upgrade provides a quick, powerfu...
Working with Colors


      HTML element and/or the class assigned to the current HTML element. For a CSS rule, it
      w...
Topstyle Pro Help & Tutorial


                                          TopStyle Pro's Palette Editor is a powerful tool ...
Previewing


        1.    A default preview which shows every element, class and ID in the current style
              sh...
Topstyle Pro Help & Tutorial


       5.5. Choosing a Preview DOCTYPE
                       Please visit http://www.brads...
Style Checker Index


    validating against CSS Level 1 (since cursor isn't supported by CSS1). Checking this
    option ...
Topstyle Pro Help & Tutorial


               shouldn't also include font-family, since in effect this is defining font-fa...
Style Checker Index


RGB colors are not supported by this definition
You may get this error when the validating against t...
Topstyle Pro Help & Tutorial


               "x" selectors aren't supported by this style definition
               Many ...
Site Management


8. Site Management

 8.1. Create a New Site
      To create a new site, select File > New Site to open t...
Topstyle Pro Help & Tutorial


                   – Style Sheets - shows all style sheets in your site.
                  ...
Site Reports


        –   Orphan Classes
        –   Undefined Classes
        –   Class Usage
        –   ID Overview
  ...
Topstyle Pro Help & Tutorial


                       Note: Unlike the Class Usage report, which only displays classes whi...
Customizing TopStyle


      drive, and the "Map To" field should contain the HTTP address which corresponds to that
     ...
Topstyle Pro Help & Tutorial


                  – Toolbars
                  – Inspector
                  – Selector Lis...
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
Upcoming SlideShare
Loading in...5
×

TopStyle Help & <b>Tutorial</b>

3,308

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,308
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "TopStyle Help & <b>Tutorial</b>"

  1. 1. TopStyle Pro Help & Tutorial version 3.11
  2. 2. TopStyleTM is Copyright © 2003 by Bradbury Software, LLC, (a.k.a. "Bradsoft.com") and is protected by U.S. and international copyright laws. Design and development: Nick Bradbury Documentation: Nick Bradbury and Robert Crooks Graphics: Gus Reiber and GlyFX (http://www.glyfx.com/) Background gurgles: Isaac and Hannah Bradbury (http://www.bradsoft.com/isaac/) TopStyle's CSS Reference was created by the Web Design Group (http://www.htmlhelp.com/) and is used with their permission. TopStyle was written using Borland Delphi (http://www.borland.com/delphi) and uses several third-party controls from Developer Express (http://www.devexpress.com/). This Help & Tutorial PDF was created by Giampaolo Bellavite (giampaolo@bellavite.com) from the TopStyle Help On Line. W3C is a trademark of the World Wide Web Consortium (http://www.w3.org/). Special thanks to Clifford Anderson, Steve Bowen, Christopher Bradford, John Carpenter, Erki Esken, Aaron Gravvat, Brad Halstead, Zack Jones, David Laws, Tim Morris, Noelle Neuwirth, Christopher Owens, Al Rider, Mark Woodward and everyone else who helped test TopStyle 3.0. I'm grateful for all your feedback!
  3. 3. TopStyle Help Table Of Contents TopStyle Help..............................................................................................1 1. Getting started ............................................................................................... 1 1.1. Creating a New Style Sheet .................................................................... 1 1.2. Creating a New HTML or XHTML Document.......................................... 1 1.3. Opening an File ....................................................................................... 1 1.4. Opening a File from the Web .................................................................. 1 1.5. Using the View Bar.................................................................................. 2 1.6. Using the File Panel ................................................................................ 2 1.7. Using the Clip Library .............................................................................. 2 1.8. Find and Replace .................................................................................... 3 1.9. Find in Files ............................................................................................. 3 1.10. Auto-Replace......................................................................................... 3 2. Editing Style Sheets ...................................................................................... 3 2.1. All About Style Definitions ....................................................................... 3 2.2. Style Insight ............................................................................................. 4 2.3. Style Inspector......................................................................................... 4 2.4. Property Help........................................................................................... 4 2.5. Selector List............................................................................................. 5 2.6. Creating New Selectors........................................................................... 5 2.7. Choosing Fonts with the Font Picker ...................................................... 5 2.8. Style Sweeper ......................................................................................... 6 2.9. Exporting Style Sheets ............................................................................ 6 2.10. Related Styles ....................................................................................... 6 3. Editing HTML and XHTML ............................................................................ 7 3.1. HTML Definitions..................................................................................... 7 3.2. Tag Inspector........................................................................................... 7 3.3. HTML Insight ........................................................................................... 7 3.4. HTML TagComplete ................................................................................ 7 3.5. Style Upgrade.......................................................................................... 8 3.6. Hyperlinking in HTML Documents........................................................... 8 3.7. DOCTYPEs in HTML/XHTML ................................................................. 8 3.8. Related Styles ......................................................................................... 8 3.9. Editing Styles in HTML Documents......................................................... 9 3.10. Using HTML Tidy................................................................................... 9 4. Working with Colors...................................................................................... 9 4.1. Inserting Colors with the Color Picker ..................................................... 9 4.2. Using the CSS Palette Editor .................................................................. 9 4.3. Creating Custom Color Palettes............................................................ 10 5. Previewing.................................................................................................... 10 5.1. Internal Previewer ................................................................................. 10 5.2. Selecting a Page for Previewing Styles ................................................ 11 5.3. Configuring External Browsers.............................................................. 11 5.4. Full Screen Preview .............................................................................. 11 5.5. Choosing a Preview DOCTYPE ............................................................ 12 6. Style Checker Index .................................................................................... 12 6.1. Configuring the Style Checker............................................................... 12 6.2. Reading the Style Checker Results ...................................................... 13 6.3. Style Checker Error Levels.................................................................... 13 6.4. Style Checker Error Messages.............................................................. 13 7. Validation...................................................................................................... 16 7.1. Using CSE HTML Validator................................................................... 16 7.2. Using the W3C HTML and CSS Validators with TopStyle .................... 16 7.3. Watchfire Bobby Accessibility Checker................................................. 16 8. Site Management ...................................................................................... 17 8.1. Create a New Site ................................................................................. 17 8.2. Opening a Site....................................................................................... 17 8.3. Site Summary View ............................................................................... 17 i
  4. 4. Topstyle Pro Help & Tutorial 8.4. Site Styles View ..................................................................................... 17 8.5. Rebuilding a Site.................................................................................... 18 8.6. Link Wizard ............................................................................................ 18 9. Site Reports.................................................................................................. 18 9.1. Orphan Classes ..................................................................................... 19 9.2. Site Reports - Undefined Classes ......................................................... 19 9.3. Site Reports - Class Usage ................................................................... 19 9.4. Site Reports - ID Overview .................................................................... 19 9.5. Site Reports - Case Mismatch............................................................... 20 10. Understanding Mappings.......................................................................... 20 10.1. Using Mappings with the Internal Previewer ....................................... 20 10.2. Using Mappings when Building a Site ................................................. 20 11. Customizing TopStyle ............................................................................... 21 11.1. Docking Panels.................................................................................... 21 11.2. Customizing Toolbars .......................................................................... 21 11.3. Editor Context Menu ............................................................................ 21 11.4. Working with Layouts .......................................................................... 21 11.5. Custom Keyboard Shortcuts................................................................ 22 11.6. Customizing the View Bar ................................................................... 22 12. Third-Party Integration with TopStyle ..................................................... 22 12.1. Using TopStyle with Macromedia Dreamweaver MX .......................... 22 12.2. HomeSite Integration........................................................................... 23 12.3. Using TopStyle with FrontPage ........................................................... 23 CSS Basics............................................................................................... 25 1. What are style sheets? .................................................................................. 25 2. What does a style sheet look like? ................................................................ 25 3. How do I use styles on my site? .................................................................... 26 4. What are the drawbacks of style sheets?...................................................... 26 TopStyle Tutorial ..................................................................................... 27 1. Starting from Scratch ..................................................................................... 27 2. Adding a Selector .......................................................................................... 27 3. Adding a Declaration ..................................................................................... 27 4. Using Fonts.................................................................................................... 28 5. Adding an H2 Selector................................................................................... 28 6. Adding a Class Selector ................................................................................ 29 7. Intermission.................................................................................................... 29 8. Using TopStyle's Internal Preview ................................................................. 30 9. The Style Checker ......................................................................................... 30 10. Interpreting the Style Checker Results ........................................................ 31 11. Using the External Preview.......................................................................... 31 12. Linking your Style Sheet .............................................................................. 31 13. Site Management with TopStyle .................................................................. 32 Where to Go from Here ..................................................................................... 32 Appendix .................................................................................................. 33 Appendix A. CSS Tips & Tricks...................................................................... 33 A.1. General.................................................................................................. 33 A.2. Working Around Netscape 4.x Bugs ..................................................... 34 A.3. Advanced Techniques........................................................................... 35 Appendix B. TopStyle Tips & Tricks .............................................................. 37 Appendix C. Style Sheet Resources .............................................................. 38 Appendix D. TopStyle’s Default Keyboard Shortcuts.................................. 39 Appendix E. Regular Expressions ................................................................. 41 Appendix F. Wildcards (Find in Files)............................................................ 42 ii
  5. 5. Getting started TopStyle Help 1. Getting started 1.1. Creating a New Style Sheet To create a new, blank style sheet, click the "New Style Sheet" toolbutton, or select File > New Style Sheet. You can then begin adding rules to your new style sheet by typing them in by hand or by using the New Selector Wizard. To add and edit properties, use Style Insight or the Style Inspector. If you're new to CSS, you may want to use the Style Sheet Wizard instead, since it will step you through the creation of a simple style sheet. To use the wizard, select File > New Style Sheet Wizard. At the right of this menu item you'll see a dropdown arrow, which displays the following additional items when clicked: New style sheet from template - create a new style sheet which contains the contents of an existing style sheet. New style sheet from HTML document - choose the HTML file you want to use, and TopStyle will automatically create new selectors for each of the HTML elements and classes used in the page that accept styles. New style sheet using selectors of an existing style sheet - choose a style sheet, and TopStyle will create a new style sheet containing empty rules based on the selectors of the chosen style sheet. 1.2. Creating a New HTML or XHTML Document Select File > New HTML Document or click the "New HTML Document" toolbutton to create a new HTML or XHTML document. The arrow at the right of the menu or toolbutton displays a list of templates from which you may create a new document. TopStyle includes templates for HTML 4.01 and XHTML 1.0 documents, but you can easily create your own templates. Simply select "Edit Templates" from this same menu to display the template editor. The template editor enables adding any existing document to the list of templates. Note: Make sure to choose an XHTML template if you wish TopStyle to insert XHTML- compliant markup. 1.3. Opening an File To open an existing HTML document or style sheet, click the Open toolbutton select File > Open. The dropdown menu next to the toolbutton gives you quick access to recently opened files. The list of recent files is split between style sheets and HTML documents for easier navigation. 1.4. Opening a File from the Web TopStyle's Open from Web feature enables you to download any HTML document or style sheet from the Internet. Select File > Open From Web to display the "Open from Web" dialog, then choose whether to download a style sheet or HTML document. When downloading an HTML document, TopStyle will also download all style sheets linked to that document (ex: specifying http://www.bradsoft.com/topstyle/ will download the TopStyle home page along with its style sheet.) Tip: Some web sites use server-side "browser-sniffing" to serve a different style sheet depending on the visitor's browser, so you may want to specify which browser TopStyle should identify itself as when retrieving your style sheet. To do this, go to the Connection page in Options and change the "User Agent" setting. 1
  6. 6. Topstyle Pro Help & Tutorial 1.5. Using the View Bar At the left of the TopStyle screen you'll see the View Bar, which enables switching between TopStyle's different views. If the view bar isn't showing, you can display it by selecting "Show View Bar" from the View menu. The following primary views are available: – Edit - TopStyle's main editing view, where you work on your HTML documents and style sheets – Site Summary - style statistics on the current site – Site Links - style links in the current site – Site Reports - style class/ID usage reports for the current site – TopStyle News - Connects to www.bradsoft.com and displays the latest TopStyle- related news, including new versions and free downloads. To the left of the view bar is a tab which displays the following secondary items: – Sites - displays a list of your TopStyle sites. – Thumbnails - displays a preview of all images in a specific folder. Right click on the thumbnail list to choose a differnet folder. – Resources - displays a list of external web sites which may be of interest to web authors. 1.6. Using the File Panel TopStyle's file panel provides a convenient way to navigate your file system. The filter selection above the list of files enables limiting the types of files that are shown. The file panel offers the following features: – Double-click a style sheet or HTML document to open it in TopStyle – Double-click an image or other file type to open it in the associated application – Drag-and-drop files to create the appropriate <a>, <img> or <link> tag – Right-click to rename a file or view its properties, or to insert a link at the current position in the editor Use the address bar beneath the file panel to quickly select from a history list of the most- recently visited folders, or simply type the name of the folder into the address bar and hit Enter. At the far right of the address bar is your favorites menu, which stores a list of folders for quick access. This same menu is available from TopStyle's File Open and File Save dialogs. Tip: For improved performance and maximum workspace, try hiding the folders and using the Favorites menu and address bar to navigate between folders. 1.7. Using the Clip Library The clip library (Ctrl+Shift+L) enables you to store commonly-used snippets in a central location. Right-click on the clip library to add or remove items, and double-click or drag- and-drop an item to insert it into the current document. For even faster insertion, use the quick insert (Ctrl+Q) feature to display a menu of up to 26 style library items. Once the menu is displayed, just type the letter corresponding to the item you want inserted. Replacement Tokens may be used in clip library items. When TopStyle encounters a replacement token, it will prompt you for custom text before inserting a library item in the editor. Replacement tokens are delimited by %r[..], and the text between these delimiters appears on the prompt. For example, if you have the following item: value="%r[what is the value]" TopStyle will display a prompt with "what is the value" on it. If you respond to this prompt with "THIS VALUE" then TopStyle will insert: value="THIS VALUE" 2
  7. 7. Editing Style Sheets 1.8. Find and Replace TopStyle's Find and Replace enables you to search for a specified string of code with another string either in the current document or in all open document. Other options include making the search case-sensitive, searching only for instances of the string as whole words ("thin" would match "thin" but not "thinner"). Regular Expression (see Appendix E) searches are also supported. If you're unfamiliar with regular expressions, you might want to experiment with some of the expressions built into TopStyle. Just click the arrow button to the right of the "Text to Find" field to select from a list of pre-defined regular expressions. 1.9. Find in Files TopStyle's Find in Files provides a very quick, customizable tool for searching multiple files. Find in Files enables searching within a specific folder, within a folder and its subfolders, or within a TopStyle site. To use Find in Files, click the toolbutton shown at left, or select Edit > Find in Files. Find in Files is configured using hyperlinks which describe each setting. To change a setting, simply click the hyperlink to display the options for that setting. For example, in the image shown at left we can choose whether to do a standard (plain text) search, a regular expression search, or a wildcard search. We recommend experimenting with the various Find in Files settings, since they enable a great deal of customization. For example, you can: – Report files that contain only one match, one or more matches, or more than one match – Report files that contain no matches (example: find which HTML documents don't contain a !doctype) – Report each match or only the names of files containing matches – Specify a file filter to include - or exclude - specific file types – Specify a date range to include or exclude files based on their modified or created date. At the top right of the Find in Files dialog are two toolbuttons, the first of which enables saving a Find In Files "rule" for later use. The second button is used to restore a saved rule. 1.10. Auto-Replace Auto-replace is similar to Microsoft Word's "Auto Correct" feature, and is a great way to save keystrokes. To see auto-replace in action, type fs: in the editor and then hit the spacebar - your typing will automatically be replaced with font-style:. This can be a real time-saver if you're keyboard-centric and prefer not to rely on features such as style insight. To configure your own auto-replace items, or to view the list of pre-configured items, go to the Auto-Replace page in TopStyle's Options (under the Editor page). 2. Editing Style Sheets 2.1. All About Style Definitions What is a style definition? In TopStyle, a style definition is simply a set of properties, values and rules that apply to a specific implementation of CSS. For example, the "Internet Explorer 4" style definition contains a list of properties and values supported by Microsoft Internet Explorer 4. Likewise, the "CSS Level 1" style definition contains information about CSS1. How are Style Definitions used in TopStyle? Style definitions are used wherever information about a specific CSS implementation is needed. For example, the style checker uses style definitions to determine whether a specific CSS property or value is supported by a particular browser. 3
  8. 8. Topstyle Pro Help & Tutorial What does the Active Style Definition do? The Active Style Definition tells TopStyle which style definition to consult when displaying properties and values in style insight and the style inspector. To change the Active Style Definition, simply select a new definition from the dropdown shown below. Only properties and values that are supported by the Active Style Definition will appear in style insight and the style inspector. Properties that are invalid (not supported) by the Active Style Definition will be color-coded red in the editor. To see this in action, select "Internet Explorer 5" from the CSS definition dropdown, and create a rule which contains the CURSOR property. Internet Explorer 5 supports this property, so it's color-coded as normal. However, if you switch to "CSS Level 1," CURSOR will now be color-coded red since the cursor property isn't supported by CSS1. 2.2. Style Insight Style Insight simplifies the entry of style properties and values as you type them into the editor. Use the arrow keys or PageUp and PageDown to navigate the list, or begin typing the name of the property or value. Style Insight will display automatically if you hit spacebar and pause after entering a property or value. You can also force insight to display by hitting Ctrl+Space. Important: Style Insight only displays properties and values that are supported by the Active Style Definition. 2.3. Style Inspector The style inspector displays all properties supported by the Active Style Definition. The value column to the right of each property includes a dropdown containing values that are appropriate for the active style definition. Properties with assigned values are sorted to the top and colored blue. The image of the style inspector shown here displays an example of a shorthand property. Shorthand properties such as font accept multiple values and are expandable, showing you the "sub-properties" from which they're composed. For example, font is composed of font-weight, font-style, font-variant, font-size, line-height and font-family. When you choose a value for a "sub-property," the value will be added to that of the shorthand property. Note: Most shorthand properties must follow a specific set of rules. For example, the font property requires font-size and font-family values to be considered valid. For details, please refer to the W3C CSS1 Recommendation at http://www.w3.org/TR/REC-CSS1 Beneath the style inspector you'll see property help, which shows which style definitions support the selected property. 2.4. Property Help Property Help appears below the style inspector and shows the level of support each style definition has for the property selected in the style inspector. The example below is for a property fully supported by CSS1, partially supported by Internet Explorer 4, and not supported by Netscape 4. Clicking the ? at the right of the property help will display detailed help about the selected property. You can customize which style definitions are shown in property help by going to the Property Help page in TopStyle's Options (F8). The property help settings in Options also includes the ability to hide style definitions which don't support the select property. 4
  9. 9. Editing Style Sheets When this option is chosen, only style definitions which fully or partially support the selected property will be shown. Tip: Right-clicking on the property help panel will display a context menu that enables you to select the style definitions you wish to appear. 2.5. Selector List The Selector List displays all selectors in the current style sheet grouped by element, class and ID. Clicking any selector in the list will highlight it in the editor so that you can edit the properties. The toolbar at the top of the selector list enables you to open the New Selector dialog or to create a new selector with the properties of the selected one -- this is a useful shortcut for creating a new selector whose properties will be similar to an existing one. 2.6. Creating New Selectors TopStyle's Selector Wizard helps you create a list of selectors to insert into the current style sheet. To start the wizard, choose "New Selector" from TopStyle's Tools menu. The first page on this wizard gives you the option to insert your list of selectors as a single, grouped selector or as separate selectors. After you make this choice, click on the item at the top of the wizard that denotes the type of selector you wish to create. Note that you can create several different types of selectors at once. For example, click the "Simple" item to create a simple selector, then click the "Add" button to add this simple selector to your list of current selectors. Then switch to the "Class" item to add a selector class to this list. When you click the OK button at the bottom of the wizard, every selector in the list of current selectors will be inserted into your style sheet. If you're already experienced with CSS selectors, you can skip the wizard by going to the "Advanced" page and choosing the option to always go to the advanced page when the wizard is shown. The advanced page enables you to add a single new selector or you can add several at once. By using the different fields in the dialog, you can add selectors of the following types: – Tag: choose from the Tag list in the dialog – Class: define a class name (which must begin with a period) – ID: must begin with a # symbol – Pseudo-Class: choose from the pseudo-class list – Pseudo-Element: choose from the pseudo-element list (note that browser support is limited) – You can also add Grouped selectors (example: P, TD, LI) by typing the appropriate selector name in the Current Selector field and adding it to list on the right Add all the selectors you wish to the list on the right side of the dialog and order them if you like (the order is only for the readability of the style sheet). Click OK to add the new rules for the selectors. 2.7. Choosing Fonts with the Font Picker For the Font and Font-Family properties, both Style Insight and the Style Inspector display a dropdown list of font categories as well as specific fonts that are installed on your system. This quick, single-font selection is very useful when designing your style sheets, but in your finished style sheet you should specify additional fonts as alternatives in case your primary font selection doesn't exist. The Font Picker simplifies the selection of multiple fonts. To display the font picker, click in a font-family row inside the style inspector then click the button shown at left, which will appear at the right of the row. To use the font picker, simply place a checkmark next to each font you want to add to your list of fonts. Generic fonts - which are fonts that should be supported by all CSS-enabled browsers - are shown in the font picker with a red A next to them. Fonts that are installed on your system are marked with Aa. To update your style sheet with your font selection, press the OK button. Pressing the Cancel button will close the font picker without updating your style sheet. 5
  10. 10. Topstyle Pro Help & Tutorial Tip: If you have a large number of fonts installed on your system, you may find it easier to work with the font picker if you limit the number of installed fonts it displays. To do this, simply go to the "Fonts" page in TopStyle's Options (under General), then select the fonts you wish to display. The font picker also enables you to create groups of common fonts, saving you from having to enter them one at a time. TopStyle comes with a list of built-in font groups, but you may modify this list at any time by clicking the font group button on the font picker and selecting "Edit Font Groups" from the resulting dropdown. 2.8. Style Sweeper The Style Sweeper is a powerful tool for reformatting your style sheets. To set the Style Sweeper options, select "Configure Style Sweeper" from the Tools menu. You'll be presented with a list of available sweepers. The default sweeper in this list is the one that will be used when you click the Style Sweeper toolbutton. To modify the settings for a specific sweeper, select that sweeper in the list and click the Edit button. This will display the Sweeper Configuration dialog for that sweeper. Click the Add button to create a new sweeper, or select Copy to create a new sweeper using settings from an existing sweeper. Note: We recommend running the style checker before using the style sweeper on a document for the first time. This will locate syntax problems such as duplicate colons and extra braces which can't be processed by the style sweeper. 2.9. Exporting Style Sheets Many web developers use "browser sniffing" on their sites to determine which browser a visitor is using, and then use server-side coding (ASP, CFML, PHP, JSP, etc.) to add a <link> to a style sheet specifically tailored to that browser. While this technique has the benefit of avoiding the process of creating a single style sheet that works across all browsers, it can still be very time-consuming to employ. Luckily, TopStyle can help by exporting a style sheet to a new style sheet which contains only properties and values supported by a specific style definition. To export a style sheet, select File > Export. The Export dialog will then appear, displaying a list of target style definitions. Simply select one of these target definitions and click OK, and TopStyle will create a new style sheet based on the current style sheet. This new style sheet will contain only items supported by the target definition. Note: Although TopStyle can remove properties and values that aren't supported by the target browser, it can't compensate for bugs in the target browser that only appear when styles are used in specific situations (such as in tables, which often cause problems with Netscape 4.x). For this reason, keep in mind that you will still need to test the exported style sheet in the target browser(s). 2.10. Related Styles Right-clicking within an HTML tag or CSS rule enables you to see a list of related styles. For an HTML tag, the related styles list will contain selectors that include the current HTML element and/or the class assigned to the current HTML element. For a CSS rule, it will show any selectors which have the same element or class. Clicking on an item in this list will navigate to that item's style. The related styles list can also be shown from the Tools menu. 6
  11. 11. Editing HTML and XHTML 3. Editing HTML and XHTML 3.1. HTML Definitions What is an HTML definition? When editing HTML, an HTML definition works much like a style definition does when editing CSS. An HTML definition tells TopStyle which elements and attributes to display in the tag inspector and HTML Insight, and also determines how HTML TagComplete operates. What happens when I choose an XHTML definition? If you wish to write XHTML-compliant markup, it's important that you select an XHTML definition instead of the default HTML 4.01 definition. When an XHTML definition is selected, TopStyle will make sure that XHTML-compliant code is inserted by the inspector, insight and TagComplete features. Note: Rather than manually changing the HTML definition, we recommend letting TopStyle switch the HTML definition based on the current document's DOCTYPE. This setting is enabled by default and can be changed on the "HTML Settings" page in Options. In effect, when an XHTML DOCTYPE is used, TopStyle will switch to the XHTML 1.0 or 1.1 definition; otherwise, it will default to HTML 4.01. 3.2. Tag Inspector When editing HTML, TopStyle's inspector displays the attributes and values supported by the current HTML tag in the editor. When the inspector is categorized by clicking the button shown to the left, the tag inspector will group attributes into the following categories: – Required Attributes (if any) – (Standard) Attributes – Deprecated Attributes – Events Note: The list of items that appears in tag inspector is determined by the active HTML definition. When an XHTML definition is chosen, the tag inspector will insert XHTML-compliant markup. 3.3. HTML Insight When editing HTML, HTML insight greatly reduces your typing by displaying a menu of valid elements, attributes and values as you type. HTML insight is the HTML equivalent of style insight for CSS. In order to help you create markup that suits your needs, HTML insight shows required attributes in bold and deprecated elements and attributes in gray. Deprecated markup refers to outdated items which often have CSS replacements. For example, the align attribute of the div element is deprecated because the CSS text-align property serves the same purpose. Note: The list of items that appears in the insight menu is determined by the active HTML definition. When an XHTML definition is chosen, XHTML-compliant markup will be inserted 3.4. HTML TagComplete In our ongoing effort to save you from unnecessary typing, TopStyle will complete HTML tags as you type. Simple enter an HTML tag, and TopStyle will automatically insert the correct closing tag for you. When the active HTML definition is an XHTML definition, TopStyle will insert the XHTML-compliant /> at the end of tags that don't have a closing tag (such as img and br). 7
  12. 12. Topstyle Pro Help & Tutorial 3.5. Style Upgrade TopStyle's style upgrade provides a quick, powerful way to "upgrade" an HTML document to CSS. Select HTML > Style Upgrade, and style upgrade will convert to CSS any HTML markup that has been deprecated (outdated) in favor of CSS. For example, the HTML font tag has been deprecated in favor of style sheets, so TopStyle will convert all font tags to their CSS equivalents. Upon completion, style upgrade will insert a <style>..</style> block which contains the classes that replaced your deprecated markup. Note: Since TopStyle can't guess your preferred naming convention, you may wish to rename the classes that TopStyle generates. 3.6. Hyperlinking in HTML Documents TopStyle's editor simplifies navigating between documents by using hyperlinks. Simply move the mouse over a hyperlinked item and single click to open it. If the hyperlink is another HTML document (such as an <a href> link) or style sheet (such as a CSS <link>), the hyperlinked document will be opened in TopStyle. If the hyperlink points to a file that can't be opened in TopStyle (such as an <img>), that file will be opened in the application associated with the file's extension. HTML elements that contain class attributes are also hyperlinked, so you can click on the class to navigate to its declaration. If the class is defined in a style block within that HTML document, TopStyle will scroll the editor to the class definition. If the class is defined in an external style sheet, TopStyle will open the style sheet and then navigate to the class definition. Note: By default, TopStyle automatically activates hyperlinks as you move the mouse. If you find this distracting, go to the Editor page in Options and place a checkmark in the box labeled "Don't activate hyperlinks unless Ctrl key is down." This way, hyperlinks will remain inactive until you hold down the Ctrl key. 3.7. DOCTYPEs in HTML/XHTML What is an HTML DOCTYPE? Also known as the "document type declaration," a DOCTYPE is a way for a document to declare which version of HTML it's using. In the past it was often considered unnecessary to use a DOCTYPE, but the most recent browsers - including those from Microsoft and Netscape - may render pages differently depending on the DOCTYPE, so it's important to choose the right one. A full explanation of the usage of HTML DOCTYPEs is outside the scope of this help document. For more information about DOCTYPEs, please visit the DOCTYPE reference on our web site (http://www.bradsoft.com/topstyle/support/doctype.asp). Tip: TopStyle's full screen preview enables experimenting with different DOCTYPEs, so you can see how different DOCTYPEs affect the rendering of your pages. How TopStyle Uses DOCTYPE By default, TopStyle uses the DOCTYPE to determine the active HTML definition. When an XHTML DOCTYPE is used, TopStyle will insert XHTML-compliant markup. To change the current document's DOCTYPE, select from the DOCTYPE list under TopStyle's HTML menu. Note: TopStyle's list of DOCTYPEs may be modified from the "HTML Settings" page in Options. 3.8. Related Styles Right-clicking within an HTML tag or CSS rule enables you to see a list of related styles. For an HTML tag, the related styles list will contain selectors that include the current 8
  13. 13. Working with Colors HTML element and/or the class assigned to the current HTML element. For a CSS rule, it will show any selectors which have the same element or class. Clicking on an item in this list will navigate to that item's style. The related styles list can also be shown from the Tools menu. 3.9. Editing Styles in HTML Documents When editing HTML documents, almost all of TopStyle's CSS editing features are available if the document contains an HTML <style>..</style> block. Simply position the editor within a style block to use the style inspector or style insight to modify the block's style declarations. The style checker may be used to validate the style rules within your style blocks, and the style sweeper may be used to reformat them. If your HTML documents contain deprecated (outdated) markup, TopStyle's style upgrade will convert it to valid CSS. 3.10. Using HTML Tidy Created by the W3C's Dave Raggett (http://www.w3.org/People/Raggett/tidy/), HTML Tidy is a powerful, free tool for validating and reformatting HTML documents. Similar in design to the CSS Style Sweeper, TopStyle's integration with HTML Tidy provides a user- friendly way to tap into its power. Simply choose a built-in Tidy configuration (such as the handy "Convert to XHTML" configuration), or define your own configuration and save it for future use. After HTML Tidy executes, TopStyle displays its output in two separate tabs within the output panel. The errors and warnings generated by HTML Tidy are displayed in the "Messages" tab, and the reformatted HTML is displayed on the "Tidy" tab. Simply click the "Copy to active editor" toolbutton on the Tidy tab to overwrite the current document with the reformatted ("tidied") HTML. Important: No changes are made to the current document until you click the "Copy to active editor" toolbutton. This way, you can review the reformatted HTML before it replaces your code. 4. Working with Colors 4.1. Inserting Colors with the Color Picker To insert color values for properties, you can choose from the drop-down that appears automatically for color properties in the inspector or insight. Clicking the Choose Color item from either of these dropdowns will display the color picker, which enables selecting from a number of palettes. Beneath the selected color in the Color Picker is a secondary color dropdown which enables viewing: 1. Harmonious colors - set of colors which work well with the selected color. 2. Nearest browser-safe - the browser-safe color that's closest to the selected color. 3. Complementary color - in color wheel terms, displays the color directly opposite the selected color. 4. Favorite colors - similar to "custom colors" in the previous version, except that favorite colors are also shown in the Windows color dialog. To update your document, either double-click a color or single-click a color and press the OK button. Pressing the Cancel button will close the color picker without updating your style sheet. Tip: To change an existing color value in the editor, simply right click on it and select "Edit color value." 4.2. Using the CSS Palette Editor 9
  14. 14. Topstyle Pro Help & Tutorial TopStyle Pro's Palette Editor is a powerful tool for viewing and changing colors in your style sheets and HTML style blocks. To display the CSS palette editor, select View > Panels > Palette Editor. The palette editor displays an expandable list of all the colors used in the current style sheet or style block along with a count of how many times they're used. Expanding a color will display a list of style declarations which use that color. Clicking one of these declarations will highlight it in the editor. Tip: To quickly navigate through every usage of a particular color, simply click on that color multiple times. Any color which is used as the BODY foreground color will be underlined and shown in bold. Any color which is used as the BODY background color will be shown in bold without an underline. In the example shown to the right, White is the foreground color and Blue is the background color. Tip: Colors may be dragged from the palette editor into the current document. You can also right-click on a color and select "Copy Color" to copy the color value to the clipboard. The toolbar above the palette editor enables you to manipulate your style sheet's colors. The toolbutton on the far left is used to replace a color and only operates on the color currently selected in the palette editor, whereas the other toolbuttons operate on every color in your style sheet. 4.3. Creating Custom Color Palettes The color picker includes a "Palette" menu which enables selecting from a list of pre- defined palettes, but you can also create custom palettes for future use. Just select "Manage custom palettes" from the color picker's palette menu to display the Palette Manager. The Palette Manager serves as the "control panel" for custom palettes, enabling you to create, delete, edit and rename palettes. The following options are available when creating a new palette: 1. Create an empty palette 2. Copy an existing palette 3. Import a palette from a style sheet - creates a palette by extracting all color values from a style sheet 4. Import a palette from Adobe PhotoShop (ACT format only) 5. Import a palette from Macromedia Fireworks 6. Import a palette from Macromedia HomeSite 7. Import a palette from Jasc PaintShop Pro (Jasc PAL format only) 8. Gradient palette - select two colors and the number of steps between them. 9. Harmonious color palette - creates a palette of harmonious colors from the selected base color. 5. Previewing 5.1. Internal Previewer When editing HTML, TopStyle's preview will always show the current HTML document. When editing CSS, however, TopStyle gives you two choices for previewing: 10
  15. 15. Previewing 1. A default preview which shows every element, class and ID in the current style sheet. The default preview is used when "Create from current style sheet" is selected, 2. An HTML-based preview which enables selecting an HTML page to use when previewing style sheets. After an HTML preview file is chosen, TopStyle will display it with the current style sheet applied. If you wish to use pages containing server-side scripting such as ASP, CFML, PHP or JSP as preview documents inside of TopStyle, you should set up a preview mapping in order to view these pages correctly. At start-up, TopStyle will automatically detect Internet Explorer 4.01 or later and configure it to be used an an internal previewer. TopStyle will also detect whether you have Netscape Gecko installed, enabling you to choose either browser, or both browsers in a split preview window, as your internal preview browser. Versions of Netscape prior to 6.01 cannot be used within TopStyle (or any other application) due to a limitation of Netscape's browser. Note: Although TopStyle can use Internet Explorer 3.x as the internal previewer, it is strongly recommended that you upgrade to a later version. IE 3.x has very limited CSS support, which may make it unsuitable as a previewer (depending on your target audience, of course). In addition, IE 3.x has a number of resource (memory) leaks that may cause problems after prolonged use in TopStyle. 5.2. Selecting a Page for Previewing Styles When editing CSS, by default TopStyle uses an automatically-generated HTML page for previewing styles either internally or externally. By clicking the "Select Preview File" toolbutton above the preview (or by choosing Preview > Select Preview File) you can select an existing HTML or XML page for the preview. When using an existing page, TopStyle's previewer will display the chosen HTML or XML page as it would appear when the current style sheet is applied to it. Important: TopStyle does not remove existing style links from the selected preview page before displaying it, so if the chosen preview file already has style links, the previewer will show it using both the current style sheet and the linked style sheet(s). If you wish to change this behavior, go to the Preview page in TopStyle's Options and check the box labeled "Remove existing link tags from preview document." Please note that this option does not modify the actual preview file in any way. 5.3. Configuring External Browsers The first time you run TopStyle, it will automatically detect most browsers and add them to the external browser list. However, since not all browsers can be detected, you may want to modify this list by selecting Options > Configure External Browsers. Note: Although TopStyle auto-detects external browsers the first time you run it, it can't detect multiple versions of the same browser. So if you have multiple versions of Netscape installed, only the last installed version will be detected. When you select an external browser for previewing, it will use the page you currently have set up for internal previewing. 5.4. Full Screen Preview TopStyle's full screen preview enables you to view your documents in a preview window sized to your desktop. The full screen preview may be split into two panels, each of which has its own DOCTYPE selection. Even better, each panel has its own browser-type selection, so you can configure one preview panel to show the current document in Internet Explorer and the other to show you the same document in Netscape Gecko. Note: To exit full screen preview, press the close toolbutton, hit the Escape key, or press the same keyboard shortcut that you used to show the full screen preview (F12 by default). 11
  16. 16. Topstyle Pro Help & Tutorial 5.5. Choosing a Preview DOCTYPE Please visit http://www.bradsoft.com/topstyle/support/doctype.asp for more information about HTML DOCTYPEs. The latest browsers from Netscape and Microsoft use the HTML DOCTYPE element to switch on special "modes" that alter the document's rendering. Since these modes may affect how your style sheets are interpreted, TopStyle includes a drop-down DOCTYPE selection above the full screen preview which enables you to see how using a different DOCTYPE in your HTML documents affects their appearance. When "(None/Unchanged)" is selected from this drop-down, TopStyle will use the existing DOCTYPE in files selected for preview and will apply no DOCTYPE to the default preview. If a DOCTYPE is selected, TopStyle will always apply it to the preview, overriding any existing DOCTYPE. Note that this feature is only for previewing and alters none of your files - no changes are actually made to your documents when a DOCTYPE is selected. To modify TopStyle's list of DOCTYPEs, go to the HTML Settings page in TopStyle's Options and press the "Edit DOCTYPEs..." button. Note: By default, TopStyle's internal previewer uses an embedded copy of Microsoft Internet Explorer. DOCTYPE "sniffing" was added in Internet Explorer 6, so choosing a different DOCTYPE will have no effect if you have an earlier version of Internet Explorer. Of course, even if you have IE6 installed, you may see nothing change when you select a different DOCTYPE since only certain CSS features (such as the box model) are affected by the DOCTYPE in IE6. Note about Netscape Gecko Gecko is the code-name of the layout engine behind the Mozilla and Netscape 7 browsers. If you're having trouble using Gecko in TopStyle, please visit our web site for the latest information about using Gecko with TopStyle. 6. Style Checker Index TopStyle's Style Checker is a powerful tool that helps you locate problems in your style sheets. The style checker will validate your style sheet against multiple style definitions, flagging any invalid properties or values it finds. It will also warn you if bugs in popular browsers may cause problems even when your style sheet is perfectly valid. 6.1. Configuring the Style Checker To configure the style checker, select Tools > Configure Style Checker. This will activate the style checker page in TopStyle's Options. The first thing you'll see is a list of style definitions. Any style definition with a checkmark next to it will be validated against by the style checker. After choosing which style definitions you want to include, click the error levels item underneath the style checker item in the Options dialog. This is where you choose which types of errors you want to see reported. You can also choose how the style checker should handle URL values, such as those used in the background-image property. By default, only local URLs are verified, but you can choose to verify remote URLs if desired. By default the style checker will report every error that it finds, but in some cases this may result in more error messages than you would like. To reduce the number of messages, place a checkmark in the option labeled "Hide duplicate messages within the same style definition." When this is selected, the style checker will only warn about an error the first time it's found per style definition. For example, if you use the cursor property throughout your style sheet, the style checker will default to flagging every use of cursor when 12
  17. 17. Style Checker Index validating against CSS Level 1 (since cursor isn't supported by CSS1). Checking this option will cause only the first use of cursor to be flagged. When you're done configuring, select Tools > Style Checker to run the style checker. 6.2. Reading the Style Checker Results As the style checker runs, it reports a list of error messages related to each style definition you selected during configuration. Clicking on an error message will select the associated property or value in the current style sheet. Note: If no errors are found for a specific style definition, that definition will not appear in the style checker results. In addition to errors related to each style definition, you may also see a General warning area. This area includes warnings that apply regardless of the style definition. For example, you may have a property defined twice within the same rule, or you may have used the same selector more than once within a style sheet. Please refer to the Error Message Reference (section 6.4) for further details on some of the problems listed in the style checker results. 6.3. Style Checker Error Levels The Style Checker reports four levels of error messages: – Errors: The style sheet contains unknown properties, unbalanced comments, broken URLs and other problems that will significantly impact the style sheet – Warnings: The style sheet contains empty rules, duplicate properties (ie: "Color" defined twice in the same rule), duplicate selectors and other problems that may impact the rendering – Hints: The style violates recommended practices (example: a color is specified for a rule without a background color) – Browser Tips: These are warnings about particular browsers, usually bugs in their CSS implementation (ie: Netscape incorrectly treats URLs as relative to the HTML document instead of the style sheet) In addition, TopStyle can also report errors concerning unsupported selectors and pseudo- classes. It's recommended that you always leave these two items checked, since unsupported selectors and pseudo-classes are a common source of problems when creating style sheets. 6.4. Style Checker Error Messages Property redefined. The shorthand property "x" already defines "x". Shorthand properties are used to group related values under a single property. For example, the font property is composed of font-style, font-variant, font-weight, font-size, line-height and font-family. So, a rule that includes the font shorthand property 13
  18. 18. Topstyle Pro Help & Tutorial shouldn't also include font-family, since in effect this is defining font-family twice. Another common mistake is to redefine background-color by using the shorthand property background. Property "x" does not exist in this definition The identified property is not valid for the style definition. For example, the CSS1 definition will raise this error if you use the cursor property, since cursor wasn't introduced until CSS2. "x" is not a valid value for "x" The value given for the specified property is not valid. Common mistakes that lead to this error are: – Failing to add a unit to a length value (ex: 12 instead of 12pt) – Using a value that's valid in one style definition but not in another (ex: none is a valid text-decoration value in Internet Explorer 4, but it's not supported by Internet Explorer 3) – Using a percentage value for a property that doesn't support percentages. – Neglecting to use a hash in front of a hex color value (ex: 99cccc instead of #99cccc) When using the color property, a background or background-color property should also be defined The background and color properties should be specified together to avoid conflicts with user style sheets. A generic family name should be included in your font list Your document may be viewed by many different systems, so there's no guarantee that every visitor will have a particular font. Generic fonts, on the other hand, are fonts that should be understood by every CSS-capable browser. Always add a generic font (such as sans-serif, serif or monospace) to the end of any font-family value. Note that some style definitions (such as WebTV Plus) don't support the full set of generic font names, so you may get this error even when a generic name is used. The font property should include a size value. The shorthand font property requires a font size value, but none is given. "x" is defined multiple times in the same rule The same property is used more than once within a single rule. Value for "x" is empty A property is defined with no value. Example: { font-size: ; }. "x" is not a valid length unit A length value is using an invalid unit. This may occur if you misspelled the unit name (example: "pz" instead of "px") or if a particular style definition doesn't support the specified unit (example: Internet Explorer 3 doesn't support the "em" unit). System colors are not supported by this definition System colors aren't real colors, but are instead colors on the user's system. For example, the system color ButtonText refers to the color used for push buttons. System colors were introduced in CSS2 and aren't supported by all browsers, so this error will be generated by any style definition that doesn't understand them. Only the standard 16 named colors are supported by this definition Style definitions such as CSS1 only understand the standard 16 named colors (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow), so color values such as AntiqueWhite or Coral aren't supported. 14
  19. 19. Style Checker Index RGB colors are not supported by this definition You may get this error when the validating against the Internet Explorer 3 style definition, since IE3 doesn't support RGB color values. Multiple values are defined for "x", but this property does not allow sub- values A property which only accepts a single value has more than one value given. Too many values are defined for "x" The specified property only accepts a certain number of values, and you have more than that number of values defined. For example, margin accepts four values, so you'll get this error if you supply five values. The number of comments opened (/*) does not match the number closed (*/). You'll see this error if you neglect to close a comment. The style checker will quit if it runs into this problem, since it normally skips comments. The number of open braces does not match the number of close braces This error will occur if you neglect to close a rule, or if you accidentally type an extra { or } somewhere in your style sheet. Selector "x" redeclared - rule will not be checked A selector is used more than once within the same style sheet. You can turn this warning off on the Style Checker page in TopStyle's options. Local URL not found: "x" A local URL could not be resolved. Make sure that the URL value points to a valid file. The invalid character "x" is used in selector "x" Selectors must begin with an alphabetic character, and can't contain spaces or other special characters. This selector contains an underscore, which will cause most browsers to ignore it. Some browsers, such as Internet Explorer 5, support the use of underscores in selector names. However, most do not, and will ignore the entire rule. Empty declaration block for "x" You have an empty declaration block (ex: BODY { } ). Font names that contain spaces should be enclosed in quotes. Although most browsers don't enforce this rule, it's a good idea to place quotes around font names that contain spaces. The font property requires a font-size or font-family value. A common mistake when using the font property is to neglect to include a font-size or font-family value. These values are required in order for the font property to be considered valid. There should not be a space between the number and the length unit in this value. A common mistake is to use a space between a number and its unit (ex: 12 pt instead of 12pt.) Pseudo-class "x" isn't supported by this style definition. Many pseudo-classes aren't supported by every browser. Most notably, the commonly-used A:HOVER pseudo-class isn't supported by Netscape 4.x. 15
  20. 20. Topstyle Pro Help & Tutorial "x" selectors aren't supported by this style definition Many selector types aren't supported by every browser, resulting in this error. In particular, CSS2 selectors (such as attribute selectors) are poorly supported by current browsers. 7. Validation 7.1. Using CSE HTML Validator CSE HTML Validator is a popular HTML syntax checker created by AI Internet Solutions (http://www.htmlvalidator.com/). If you own the Pro or Standard versions of CSE HTML Validator, TopStyle will integrate with it to provide a powerful way to check your HTML documents for mistakes. To start CSE HTML Validator in TopStyle, click the toolbutton shown at the left (if you don't see this toolbutton, it may not be showing in the current layout, in which case it should be available from beneath the HTML menu). After a brief pause, the "Messages" tab in TopStyle's output panel will display the results of CSE HTML Validator's syntax checking. If you're using CSE HTML Validator version 4.5 or above, the results will be grouped by category. Note: We're not the creators of CSE HTML Validator - we simply offer integration between it and TopStyle. If you have any questions about this product, please visit the CSE HTML Validator home page (http://www.htmlvalidator.com/) 7.2. Using the W3C HTML and CSS Validators with TopStyle The World Wide Web Consortium (W3C - http://www.w3.org/) offers free HTML and CSS validation services which may be accessed from within TopStyle. The W3C CSS Validator offers stronger validation than TopStyle's style checker, but it doesn't offer the style checker's browser compatibility warnings. For this reason, we recommend using both tools to check your style sheets for problems. To pass the current style sheet to the W3C CSS Validator, click the toolbutton shown at left, or select Tools > W3C CSS Validator. To send the current HTML document to the W3C HTML Validator, click the toolbutton shown at left, or choose HTML > W3C HTML Validator. When the validation has completed, the results will be shown in the Reports tab within TopStyle's Output panel. Note: The W3C validators are online tools, so you will need to have an active Internet connection in order to use them. Please keep in mind that these services are provided by the W3C and are not under our control. 7.3. Watchfire Bobby Accessibility Checker Watchfire's Bobby (http://www.watchfire.com/) aids in locating accessibility problems with your HTML documents by testing for compliance with government standards, including the U.S. Government's Section 508. Bobby is available both as a free online service and as a commercial desktop application. TopStyle uses the online version by default, but TopStyle may be configured to use the Java desktop version of Bobby instead. To configure Bobby for use with TopStyle, open TopStyle's Options and click on the Validation page. To access Bobby from within TopStyle, click the toolbutton shown at left, or select HTML > Bobby. After Bobby finishes checking your document, the results will be displayed in the Reports tab of TopStyle's Output panel. Note: Please remember that we aren't the creators of Bobby - we simply provide a way to integrate it with TopStyle. Questions related to Bobby should be directed to Watchfire. 16
  21. 21. Site Management 8. Site Management 8.1. Create a New Site To create a new site, select File > New Site to open the new site dialog, then choose the root directory of the site. TopStyle will give the site the same name as the selected folder, but you may change this. After you have chosen the root directory, clicking the Exclusion button will allow you to exclude selected subdirectories from the site. You may also specify a pattern which will be used to exclude HTML files from your site. Important: When building a site, TopStyle will only include files that match the HTML Document Extensions shown on the File Extensions page in TopStyle's Options. If your site contains server-side code such as ASP, CFML, PHP or JSP, you should elect to use mappings when building the site. This is critical, since server-side code won't be processed by TopStyle's Site Summary or Site Reports unless the site was built using a mapping. 8.2. Opening a Site Select File > Open Site to display a list of available sites, then click the icon for the site you want to open. Once a site has been opened, TopStyle will show the site's name at the far right of the status bar. Note: Information about a site is cached for quick access. If you regularly make changes to files in your site, this cache may become out of date unless you regularly rebuild your site (see 8.5). You can tell TopStyle to automatically rebuild your site on the "Site Options" page in Options. 8.3. Site Summary View TopStyle's Site Summary View is a powerful way to get a quick style-based overview of your site. TopStyle's site summary enables you to immediately see the following information: – All style sheets in your site – All HTML documents in your site – All HTML documents with style links – All HTML documents without style links – All HTML documents with broken style links – All HTML documents with <style>..</style> blocks – Recently changed HTML documents – Recently changed style sheets – Unused style sheets – External (remote) style sheets – All style sheets with @import statements Note: in order for TopStyle's site summary to report accurate information, it's important that you regularly rebuild your site to reflect the latest changes. Unless your site is exceptionally large and would take a long time to rebuild, it's recommended that you let TopStyle rebuild it automatically. You can configure TopStyle to automatically rebuild sites on the "Site Options" page in Options. 8.4. Site Styles View TopStyle's Site Styles View is a great way to find out what pages in your site are - and are not - linked to style sheets. Site Styles view is broken into three lists: 17
  22. 22. Topstyle Pro Help & Tutorial – Style Sheets - shows all style sheets in your site. – HTML documents - shows HTML, CFML, ASP and other browsable web documents in your site. The files which appear in this list depend on the current filter, which enables you to see either all HTML documents linked to the selected style sheet, or all HTML documents NOT linked to the selected style sheet. – Linked style sheets - shows all style sheets linked to the document currently selected in the web document list. Site Styles view also provides an easy way to remove a style sheet link. Simply right-click on a style sheet in the linked style sheets list, then select "Remove Link" from the context menu. When filtered to show documents NOT linked to the selected style sheet, the selected style sheet may be linked to the selected document by right-clicking on the style sheet and choosing "Link to" from the context menu. 8.5. Rebuilding a Site When you create a site, TopStyle builds a database of all files in the site along with all style sheets linked within those files and all classes used in those files. Over time this database may become out-of-date as you use other programs to update these files. For this reason, it's important to rebuild your site to make sure it's current. Select File > Rebuild Site to rebuild the active site. After scanning the files in your site, you'll be presented with a dialog listing all files that have been added, deleted or modified since the site was last rebuilt or created. If no changes were detected, no dialog will appear - instead, you'll see a message in the status bar stating that no changes were found in your site. If you regularly make changes to the documents in your site, you might find it helpful to tell TopStyle to automatically perform a rebuild every time it opens a site. This way, you don't have to worry about rebuilding the site - TopStyle will do it for you. To turn this feature on, go to the "Site Options" page in TopStyle's Options. Tip: Select "Recreate Site" from the File menu to create the current site from scratch using the same information you provided when you first built the site. 8.6. Link Wizard The Link Wizard is used to quickly link a style sheet to multiple HTML documents. Simply select the files or files in folders that you want to link the style sheet to, then select the Insert style. Note: we strongly recommended inserting a style <link> instead of choosing to insert a <style> block. If you use a <style> block, the contents of the style sheet will be inserted between <style>...</style> tags in every HTML document, defeating one of the main benefits of style sheets. Please refer to the CSS Basics section on using style sheets for more details. Example of a <link> tag: <html> <head> <title>Linking Style Sheets</title> <link rel="STYLESHEET" type="text/css" href="styles.css"> </head> 9. Site Reports TopStyle Pro's Site Management features include a powerful Site Reports view which provides detailed information on style usage in your site. 18
  23. 23. Site Reports – Orphan Classes – Undefined Classes – Class Usage – ID Overview – Case Mismatch Important: If you use server-side scripting such as ASP, ColdFusion or PHP to insert styles into your HTML documents, you must build your site using a mapping. This enables TopStyle to pass your documents through your local web server before reading them, translating any server-side code in the process. If you build your site without using a mapping, then each of the site reports will fail to reflect any style links, include files, etc., added through server-side scripting, resulting in inaccurate information. 9.1. Orphan Classes The Orphan Classes report displays style sheets which contain definitions for classes that aren't used in any HTML documents which link to those style sheets. For example, if your style sheet contains the class .warning but none of the HTML documents which link to that style sheet contain class="warning", then .warning will appear in this report. If any orphan classes exist in the current site, this report will show an expandable list of style sheets which contain the orphans. Clicking a style sheet in this list will display its contents in the read-only editor. To edit the style sheet, simply click the Edit toolbutton to the left of the editor. When a style sheet is expanded, a list of its orphan classes will appear below it. Clicking an orphan class will locate it in the read-only editor. If that class is used in more than one selector (ex: .caption, h2.caption, h3.caption), then the "Next" and "Previous" toolbuttons to the left of the editor will be enabled so you can quickly navigate through each usage. 9.2. Site Reports - Undefined Classes The Undefined Classes report displays HTML documents in your site that use style classes which aren't defined in any style sheet linked to those HTML documents. If any undefined classes exist in the current site, this report will show an expandable list of HTML documents which contain the undefined classes. Clicking an HTML document in this list will display its contents in the read-only editor. To edit the HTML document, simply click the Edit toolbutton to the left of the editor. Note: When editing an HTML document, it will be opened in the HTML editor defined in TopStyle's Options. When an HTML document is expanded, a list of its undefined classes will appear below it. Clicking an undefined class will locate it in the read-only editor. If that class is used in more than once, then the "Next" and "Previous" toolbuttons to the left of the editor will be enabled so you can quickly navigate through each usage. 9.3. Site Reports - Class Usage The Class Usage report displays an overview of where your style classes are used in the current site. All style sheets with classes that are used in your site's HTML documents will be listed here. When a style sheet is expanded, all classes in that style sheet which are used will be displayed, and each class will show a count of how many HTML documents use that class. Expanding the class will list all HTML documents which use that class. Note: Classes that aren't used in any of your site's HTML documents are not shown in this report. To see unused classes, refer to the Orphan Classes report. 9.4. Site Reports - ID Overview The ID Overview report displays an overivew of where your IDs are defined and used in your site. All style sheets that define IDs will be listed here. Expanding a style sheet in this list will show each of its IDs. If an ID is used in any of your site's HTML documents, then expanding the ID will show those HTML documents. 19
  24. 24. Topstyle Pro Help & Tutorial Note: Unlike the Class Usage report, which only displays classes which are used in your site's HTML documents, the ID Overview report lists IDs even if they're unused. 9.5. Site Reports - Case Mismatch The Case Mismatch report displays HTML documents which use class names that have been defined in your style sheets using a different case. For example, if your style sheet contains .warning (lowercase) but you use class="WARNING" (uppercase) in an HTML document, then that HTML document will be included in this report. Most browsers use case-insensitive matching, so using class="WARNING" is the same as using class="warning". However, Netscape 6 uses case-sensitive matching (which is correct, according to the W3C specifications). So, as far as Netscape 6 is concerned, .warning and .WARNING are two different classes. This, of course, has resulted in a lot of confusion among web authors seeking compatibility with Netscape 6. In order to work with Netscape 6 - and any other standards-compliant browsers released in the future - it's important to use consistent case in your style sheets and HTML documents. The Case Mismatch report will help you locate situations where you've used inconsistent case so that you may correct them. Tip: For more information about the importance of using consistent case in class names, take a look at http://www.bradsoft.com/redir.asp?id=308. 10. Understanding Mappings TopStyle uses mappings to translate a location on your hard drive to a URL on your local web server. Most TopStyle users will never need to use mappings. However, if you work with HTML documents containing server-side coding, you may find mappings very helpful. These server-side languages require a web server in order to be processed, so by using a mapping you can force your web pages to be passed through a local web server before being seen by TopStyle. A mapping is simply a way for TopStyle to retrieve local documents via HTTP through a web server, translating any server-side code in the process. To set up a mapping, go to the Mappings page in TopStyle's Options. A mapping consists of a local directory name and its corresponding URL as seen by your local web server. Normally, "Map From" should contain the name of your local web server's home directory (a.k.a. "Document Root"), and "Map To" should contain http://localhost/. For example, if you're using Microsoft IIS, in most cases your mapping should be something like this: Map From: C:InetPubwwwroot Map To: http://localhost/ 10.1. Using Mappings with the Internal Previewer If you develop web sites which employ server-side coding, you'll most likely want any server-side code to be processed before displaying one of your pages in TopStyle's internal preview. To do this, you'll need to configure a mapping, which forces TopStyle to pass documents through your web server before they're previewed. After you specify your mappings on the Mappings page in TopStyle's Options, be sure to place a checkmark in the box labeled "Use mappings when previewing." Once this is set, any preview documents that can be mapped will be passed through a local web server before being displayed in TopStyle. 10.2. Using Mappings when Building a Site If you use server-side scripting such as ASP, ColdFusion or PHP, you'll most likely want to use a mapping when building your site. If your site employs include files or uses server- side code to insert style <link>s in your documents, you must use a mapping in order for the site summary and site reports to give accurate results. To use a mapping when building a site, simply fill in the "Map From" and "Map To" fields on the New Site dialog. The "Map From" field should contain the location on your hard 20
  25. 25. Customizing TopStyle drive, and the "Map To" field should contain the HTTP address which corresponds to that folder. Note: Building a site when using mappings may take significantly longer, since each page must be passed through your local web server before TopStyle can process it. 11. Customizing TopStyle 11.1. Docking Panels Docking enables you to rearrange the positions of the following panels: – Style Inspector – Selector List – Output – View Bar – Palette Editor – Files – Clip Library To rearrange a panel, click on its title bar and drag it to the desired location. TopStyle features two different types of docking: 1. Stacked - panels are stacked in rows or columns when docked. 2. Tabbed - each panel is shown on a separate tab when docked. The docking style may be changed at any time by right-clicking in the caption of any docked panel. 11.2. Customizing Toolbars TopStyle's toolbars are similar to those used in Microsoft Office, and are very easy to customize. The first - and simplest - customization method is to click the arrow at the far right of any toolbar. This will display a menu listing all toolbuttons that can be displayed on that toolbar. Simply place a check next to any toolbutton in the list to add it to the toolbar. Right-clicking on any toolbar will bring up a menu listing all available toolbars for you to choose from. If you select the "Customize..." item at the bottom of this menu, the toolbar customization dialog will appear. When this is open, you can completely customize the toolbars by dragging-and-dropping toolbuttons from the customization dialog to any toolbar. In addition, you can remove a toolbutton by dragging it off its toolbar. You can also create new toolbars from within the toolbar customization dialog. 11.3. Editor Context Menu The editor context menu is the menu that appears when you right-click on the editor. TopStyle enables you to completely customize this menu, so your favorite features are always a click away. Select "Customize Editor Menu" from either the Tools menu or the editor context menu itself to display the Menu Editor and the toolbar customization dialog. Simply drag items from the customization dialog to the menu editor to add toolbuttons to the editor context menu. Note that the menu editor will collapse when it doesn't have the focus, but it will re-expand when an item is dragged to it. 11.4. Working with Layouts Layouts are a way to save and restore the position of everything on the TopStyle display, enabling you to define different ways of working with minimal fuss. TopStyle comes with a few built-in layouts, but you can easily create your own by either clicking the Layout toolbutton or selecting Options > Manage Layouts. When you save a layout, TopStyle retains the location, size and visibility of the following screen elements: 21
  26. 26. Topstyle Pro Help & Tutorial – Toolbars – Inspector – Selector List – Output – Palette Editor – File Panel – Clip Library – Status Bar To restore a layout, simply click the Layout toolbutton and select the desired layout. Note: The editor context menu is not stored with each layout. Customizations made to it apply to every layout. 11.5. Custom Keyboard Shortcuts TopStyle Pro 3.0 takes customizable keyboard shortcuts to a new level by enabling you to create multiple sets of keyboard shortcuts. Even better, you have the ability to insert different text strings based on the context of what's being edited. For example, you could create a Ctrl+B shortcut which inserts font- weight: bold when editing a style sheet or style block, but inserts <strong>..</strong> when editing HTML. Create keyboard sets that mimic your favorite text or HTML editor, or create your own from scratch. Just select Options > Keyboard Shortcuts to change or customize the active keyboard set. 11.6. Customizing the View Bar Right-clicking within the view bar will display a context menu that enables the creation of custom groups or custom items. Creating a custom group will add a new item to the view bar tab. Each custom group (including the "Resources" group) may contain custom items which point to local files, style sheets or external web sites. If a custom item points to a web site, clicking on it will open that site in your browser. If it points to a style sheet or local HTML file, then it will be opened in TopStyle for editing. If the item points to another type of local file, the file will be opened in its associated application. Note: The "View" and "Sites" groups cannot be modified, but the "Resources" group can be customized. 12. Third-Party Integration with TopStyle TopStyle offers unsurpassed power as a standalone style sheet editor, and it also offers first-class CSS editing from within a number of popular web authoring tools. TopStyle integration is also supported by third-party editors such as NoteTab Pro, HTML- Kit, AceHTML, 40tude HTML, SpiderWriter, Multi-Edit, and ASPEdit. The list of tools which support TopStyle is constantly growing, so please stop by our web site (http://www.bradsoft.com/topstyle/thirdparty/) the latest details about products which integrate with TopStyle. 12.1. Using TopStyle with Macromedia Dreamweaver MX Stop by our site (http://www.bradsoft.com/redir.asp?id=162) for the latest information about integrating TopStyle with Dreamweaver! Macromedia Dreamweaver MX automatically detects TopStyle and enables it as the external CSS editor, so Dreamweaver MX users benefit from improved TopStyle integration. More details are available from our site (http://www.bradsoft.com/redir.asp?id=162). Versions of Dreamweaver prior to MX enable you to configure editors for different file types. When TopStyle is Dreamweaver's CSS editor, opening a style sheet from a Dreamweaver site will pass it to TopStyle for editing. To enable this, go to TopStyle's Options (F8) and switch to the "Third Party Integration" page, then place a checkmark in the box labeled "Make TopStyle Dreamweaver's CSS editor." 22

×