Freeway tutorial

Table or CSS Layout

Web page layouts are built using two different methods: table structures or CSS positioning. A table-based layout is like a two-dimensional scaffolding structure that holds item in place in the browser window. CSS-positioned items, on the other hand, are independent little tykes that don’t need extra structures to help them work.

In traditional web production software you have to do at least some of the structural building work to make things sit where you want in the page. But in Freeway, this is all done for you; an invisible table structure is created to hold table-based things in place, and CSS-positioning code is whipped up to tell other items where to sit. All you have to do is choose whether a box you put on the page is to be layered (i.e. CSS-positioned) or not (i.e. table-managed) - and you can change your mind at any time without any fuss.

To make things you are GOING to add to the page be table or CSS-positioned, click the CSS button in the toolbar. It toggles between CSS Layout (blue) and Table Layout (grey). To make something that is ALREADY on the page behave as table or CSS, select it and use the Layer checkbox in the Inspector pallete; layered is CSS, unlayered is table-based.

Okay, so what should I use, table or CSS stuff? It is generally better to use CSS (layered) layouts, although you really shouldn’t get too concerned about it, just understand the subtle differences in how things work. Leave that button set to CSS Layout and make your layout as normal.

If you work with the CSS button turned off (grey) then unlayered, overlapping graphics will be merged in the output and be shown as a single graphic in the browser. If you work with the CSS button turned on (blue) then overlapping graphics will each be output separately, layered, and stacked as required in the final output.

If you want to change an item from being unlayered to being layered just check the Layer checkbox in the Inspector palette. Uncheck to turn a layered item into an unlayered one, of course.

If you want two graphics to be merged but you don’t want to make them unlayered, select them both and group them together by choosing Item > Group. This wrapes them up in a new container object, and that item can be made to be layered. Rollover graphics must either be unlayered or grouped together, preferably before applying the Rollover action.

But how do I make rollovers? That’s pretty simple, although there are a few things to remember. First, a standard rollover is achieved in a browser by a bit of JavaScript that swaps one image for another when something (i.e. your mouse moving across) triggers it. To get this done you need to set up both the normal graphic and the one that gets shown when your mouse is over it.

If you’re working with unlayered graphics just put one on top of the other, then (with it still selected) choose Item > Actions > Rollover. In the Actions palette (can’t see it? choose Window > Actions), make sure you’re looking at the Images panel, then simply click the checkboxes on and off to set up which combination of graphics you want visible in the Normal and the MouseOver states.

If you’re working with layered graphics then you must group the items together first, or the Rollover ‘action’ won’t be able to see the separate layered items. Once grouped, apply the Rollover action and proceed as above.