Article Preview
Buy Now
| Print: | |
| PDF: |
Feature
Style Master
REALbasic Helps Weave the Web
Issue: 4.1 (September/October 2005)
Author: John Allsopp (with Matt Neuburg)
Article Description: No description available.
Article Length (in bytes): 16,435
Starting Page Number: 11
RBD Number: 4108
Resource File(s): None
Related Link(s): None
Known Limitations: None
Excerpt of article text...
Style Master is a tool to help web designers and developers work with Cascading Style Sheets (CSS). Now, some people might be thinking: "OK, it's a CSS editor; why didn't he just say that?", but most CSS editors are, by and large, tools to help people write CSS code. In essence, they are text editors, glorified with some syntax coloring, basic property editors, and so on. CSS, however, is not simply a programming language; it's a design tool. A lot of what Style Master does is to help designers design, not just code.
A couple of quick examples might put this into context. Right now, a very common design for blogs and other web sites is a multicolumn site with header and footer. This can be achieved in several ways, but it does involve quite a bit of CSS and HTML. With Style Master, we have a "wizard" to help you set up and style a multicolumn page with headers and footers, helping users generate both the HTML and CSS for such a site in literally a minute or less (Figure 1).
On a more methodological level, CSS is all about how HTML interacts with a style sheet. This interaction is complex and subtle. One statement in a style sheet can contribute to the look of many elements in a web page; similarly, any given element in an HTML document might be governed by several statements in its style sheet. Visualizing these relationships is not only hard but (in most non-trivial cases) essentially impossible. So, in Style Master, we have a set of tools we call "X-Ray", for showing you visually the association between a style sheet and the HTML page it styles. You can click any statement in a style sheet, and Style Master shows you all of the elements on a web page which this statement styles. The reverse is also true: in Style Master you can click an HTML element, and the app shows you all the statements in its style sheet which affect this element (Figure 2).
...End of Excerpt. Please purchase the magazine to read the full article.
Article copyrighted by REALbasic Developer magazine. All rights reserved.
|
