Page 1: Stylesheets intro | 2 | 3 | 4 | »
Part two of the guide to building a modern web site deals with the ‘meat’ of the standards compliant site, i.e the content, and the styling of the content. This part of standards building with Freeway will probably turn out to be more challenging than the first part, because standards based design and validation of the site forces us to step away from the DTP-style of Freeway. It also means that the WYSIWYG feature of Freeway will not be available to us— instead we will have to rely on our inner eye, or preview a lot.
Building a Modern Web Site – Pt. 2
If you have followed the “Building a Modern Web Site”, you now have a Freeway document with a bunch of boxes that are waiting to be filled with content, and a few folders relating to the HTML file that you produced at the end of the guide, by previewing. And there’s a file named styles.css, that came with the Freeway document. So, where do we go from here? What do we do with the .css document? Will Feeway 4 save the day? Will Benson ever learn his master’s secret? All that and more to come...
I’m going to assume a few things now. 1: The content you will be adding to the main content box will be either a) headers and body text, b) a little body text and a few images or c) lots of images (maybe a line of text here and there). 2: The content you will be adding in the sidebar will mainly be navigation links. 3: You normally use graphics and related actions to create your navigation system. 4: You have never used an external stylesheet (some of you will have used it, or thought about using it, or at least know what it is, but never mind that for now). These assumptions are the pretext for this guide. Bear with me while i elaborate.
Do Not Use Styles In Freeway
This part of standards based design uses external stylesheets to decorate, and to some extent position, the contents of your site. To avoid conflicts between this stylesheet and the code generated by Freeway, we will not use any styles in the Freeway document. That’s right, no styles. None what so ever. Text content added to a box on the Freeway page should be left unstyled, boxes used (even tables when those are used) should not be styled or have styling actions applied. The content and placeholders on the page should remain in a ‘raw’ form at all times. (“But, but... but..?”) I know, if we can’t use styles and styling actions, why do this in Freeway at all? Because of Master pages, because of easily applied and maintained hyperlinks, because of the layout-based interface, because of personal preferences. Because we can. Because we won’t have to learn another application, just another way of using an application that we do know. In all honesty though: yes, it can just as well be done in a text editor. (And there went half the audience...)
The Tools
There are two ways of creating a stylesheet for use with Freeway documents: 1) Use an Action. There are a couple of actions around that either reads all the text styles used on a Freeway page and writes them to a text file that can be referenced just like any other .css file (the External CSS Actions by Walter Davis, found in the Softpress Actions library) or gathers all the inline CSS styles used on an FW page and moves them to the <head> section of the HTML document (Paul Dunning’s CSS Suite does this for example). Or 2) write your own external stylesheet to use with a Freeway document. Personally I prefer the latter method, primarily because I can pass the HTML file and the .css file (stylesheet) to any colleague or other joint developer I may be working with and stay confident that my site design will be preserved even if the files would be used in Dreamweaver, GoLive etc for content editing or further tweaking. And I stay in control of the debugging process, I don’t have to rely on an Action that I have no powers over, no matter how good its output may be.
As you may have noticed when you unpacked the dbs-doc.sit file containing the sample documents for this guide, that there is a .css file included in the package. What you need to edit that file is a good text editor. TextEdit will work, but I would recommend a more extended tool like BBEdit or SubEthaEdit. What you will find in the .css file is a bunch of style “hooks”. I have only included the basic elements in this stylesheet, things that every page should have, like body, a, h1-h6, p and a few other things. They serve as a model for how a stylesheet looks and what it contains in a very basic state. When it comes to adding styles for specific items in your site, there are a couple of things that you need to know, such as the difference between #something and .something – i.e the difference between id and class. You need to know that the title you give an HTML item in the Inspector, in your FW document, equals an id (#...) in the stylesheet. For example: in the test document you have an item named ‘mainwrap’ (or similar), right? To style that particular item, you will need to write a style in the stylesheet named #mainwrap. The style itself could look something like this:
#mainwrap { background: #ff0000; border: 1px solid #000; }
This will give the item mainwrap a red background colour and a 1 pixel, black border. This will show when you preview the page in a browser, it will not be visible in the Freeway application interface.
Ok, so much for the basic why and how of stylesheet writing. What about how we use the prepared stylesheet? We use it in the Freeway document by adding a link relation in the <head> section. So, go to the Freeway document included in the dbs-doc.sit file, then on the Master page you go to Menu / Page / HTML Markup, where you select the “After <HEAD>” slot (it should be underlined). Now, as you can see, I have already added the reference needed to call the stylesheet into action. It looks like this:
<link rel="stylesheet" type="text/css" href="styles.css">
One line of code. That is all it takes to bring your styles into the page; one, single line. Compare that to any “normal” Freeway-generated page, where every style used is written into the source code. This is the reason for using separate stylesheets – economy.
Next: Writing the ’sheet.
Colophon
180 mph is a periodically published website and PDF magazine, created by Fred Kylander of Glimmerman Design. The purpose of 180 mph is to serve as an independent resource for users of the web desktop publishing software Freeway, by Softpress Systems Ltd. Neither 180 mph nor Glimmerman Design are affiliated or connected to Softpress Systems in any way. For official information about Freeway, please visit the Softpress web site.
180 mph is produced on an Apple G4, 17" Powerbook. The magazine is produced with Adobe InDesign 3, Illustrator 11 and Photoshop 8 (CS). The website is produced with Freeway Pro 3.5, SubEthaEdit 2 and Adobe Photoshop 8. Other hardware include a Canon EOS 300D and a Wacom Intuous tablet.
ISSN 1652-1652-8085
