The acronym CSS is a really large umbrella. CSS stands for Cascading Style Sheets, which means in the largest sense a separation of concerns in Web design between the content (words and pictures) the structure (semantic tags like H1 or DIV) and the way those elements look (the Style part of CSS). In a perfectly-realized example of this style, you would have nothing except the content and structural tags in the HTML file, and everything to do with the style – the text style, the position of elements and their visual relationship to one another – in a separate CSS file.
Freeway does a sort of middle way here, and puts the positioning information inline within the HTML, and (if you elect to use external style sheets) all the text styling information in an external css sheet.
If the CSS button in Freeway is blue, then anything you draw on the page after that point will be placed as a CSS-positioned element. This means that it is (usually) alone on an infinite plane in Cartesian space. Its position is noted as a distance from at least two sides of the page, and its dimensions are noted (usually) in pixels. The third axis (Z) is the stacking order of these infinite planes, with higher numbers closer to the viewer of the page, and lower numbers nearer the bottom of the stack. These elements are not aware of one another, so if one grows, it will simply over- or under-lap any adjacent elements. At the very bottom of the stack, unmoved by any notion of Z-index, is the background color of the page, and directly above that is the background image of the page. Everything else floats above that.
If the button is gray, then everything you draw will be part of one or more “layout tables”, and HTML elements will not be able to overlap one another. They will also repel one another when they grow, so you won’t have the overlap issue. This benefit (for you) comes at the cost of taking an element that has a specific semantic meaning (tables hold tabular data, which relates in terms of columns and rows to the other content in the same table structure) and using it for a completely meaningless purpose (the visual layout) instead. This has serious repercussions for visually-disabled site visitors, who are not only not interested in the visual layout at all, but are desperately trying to maintain the thread of what your page is about even while it is carved up into multiple unrelated boxes without regard for the overall meaning.
The inline layout technique, where you nest HTML and graphic elements within a parent HTML box, and use floats and padding and margin to create the visual structure of the page, is a way to take the best of the table layout (the content items don’t overlap when the text resizes) and also get the best of the modern CSS-positioned layout (the content is organized according to its logical flow, and the positioning and visual style is separate). It’s not as easy, but in the long run, the benefits outweigh the drawbacks.
CSS also controls the way that the text looks and behaves, and that can’t be turned off or on in Freeway, unless you switch the output mode of the page to HTML 3.2 for some reason. These styles are either written into the head of the page or an external stylesheet.
Just to be clear, toggling the CSS button only affects things you draw after that moment in time. The Inspector controls each element separately and can change the layout mode for those elements separate of what the big button is set to. If you want to convert an element you’ve already drawn into a positioned layer, then you can simply check the Layer checkbox in the Inspector while that element is selected in the design view. You can then use the Move Forward/ Backward controls or drag and drop within the list of elements in the Site pane to change the sort order.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options