Pro only

Page 1: Building | 2 | 3 | 4 | »

This guide requires a couple of things: 1) Freeway Pro 3.5.12. 2) The starter’s kit, including an empty Freeway Pro document, an external stylesheet text file and all the Freeway actions needed. 3) Some courage.
Download the kit and move the unstuffed Freeway Action files in the Standard folder within the Freeway Actions folder in the Freeway application folder. You can also place the Freeway document and the CSS file belonging to it in a new folder somewhere on your hard drive if you wish, just keep them together.

Building a Modern Web Site

Before we look at the actual construction, you should decide on a general layout structure. A web site will typically have a horisontal head column, two vertical columns for the main content, and a footer column. You may choose a different layout, but for the purpose of this guide we will use that standard two-column construction.

One of the stumbling blocks with standards compliant design is understanding why content should be separated from non-content such as style definitions and function scripts. This is probably particularly true for Freeway users, since Freeway lets you build sites without ever having to worry about the underlying code—and the underlying code is precisely what we’ll be tampering with in this experiment. Meaning that you need to have an open mind about the layout process. Meaning furthermore that you won’t be doing much styling in the Freeway document. Instead, we’ll use Freeway and its layout paradigm to sketch the overall layout and place the content where it should go.

Are you set? Ok, off we go. Open the provided Freeway Pro document. Go to the existing Master page. You will notice that the Page Actions that are necessary for this experiment to work are already in place and set as they should be, so we can skip right over to the layout. One thing, before we start placing boxes on the page; make sure that the ‘Layers’ checkbox in the Tools palette is ticked. Ok. Place one HTML box at the top of your page, make it as wide as the page and approx. 30 points high and give it the title pagehead in the Inspector. Whenever you place an item on a Freeway page, you should immediately give it a name like this (instead of the default name ‘item1xx’). It makes debugging easier and a few other things. The title should preferably reflect either the function of the box (ex. “textcontent”) or its hierarchic context (ex. “pagehead”).

Then continue placing boxes on the page. Below the pagetop box goes the main wrapper box (page width×150 pt). Next, place two boxes side by side on top of the main wrapper box. Name one of them “content” and the other “sidebar”. Add a slim box, for example page width×5pt, directly below the content boxes and name it “clearer”. Finish the layout by adding the page footer box with the same dimensions as the page top box. The page skeleton should now look something like this:

Add some dummy content

Now add some placeholder content in all of the boxes except the main wrapper box and the clearer. The main wrapper only serves as a frame for the main content boxes and the clearer is there to close the main wrapper so that the page footer doesn't get affected by any styles or other details that we might add to the main wrapper or its content items. Input a few lines of blah text in the content items, that’s all.

Enter the Div-a-Tron

What we have now is a page with a stack of 3+3 boxes. If we were to preview the page at this point, we would see more or less three blocks of text and images flowing over each other, blocking each other out. So we need a way to control the flow of the boxes, especially when text is resized in the browser. There are two ways of doing this. One is by hand coding positioning and behaviour stuff for each box through the Item/Extend… option, or we can add control by applying the Div-a-Tron action to each box. Which is exactly what we’re going to do.

Page 1: Building | 2 | 3 | 4 | »