Greg Chapman
Web Design

A Word on Content and Style

The General Concept

If you have never written more than a personal two page letter in a word processor and expect to use that as your model for how to construct a web site of more than three or four pages, then you're likely to struggle when it comes to web design.

However, if you have written a multi-chapter book or been required to submit a chapter to be incorporated into an organisation's annual report, then there's a chance you'll have encountered your word processor's "template" facility and that will put you in a much better position.

The experience may have made you aware that it is possible for the function of a button on the toolbar to change. A heading button may no longer just increase the size of the font and make it bold but change the font, colour and alignment too. You'll be aware that the template will ensure that all future chapters of your book will look the same as the first or that your report will adopt your organisation's "house style" without any special effort from you.

The only difference with a website is that you don't start by opening a template file and writing your content. Instead you create a new page and link it to a "stylesheet". Your chosen stylesheet will take over from the browser's internal stylesheet and gives your site its own house style.

How It's Implemented

The advantage of this approach is that as you prepare content you don't need to remember how to match the styling of similar content elsewhere on the site. The stylesheet will do that for you. However, an implication of this is that if you come across a type of content for which appropriate styling has not been defined then, unless you know the situation is unique and will not be repeated, it is best practice to add a new rule to the stylesheet rather then try to add styling information to the content file and, in WonderCMS and every other similar package I know, that does require you can write some CSS code.

A
	sample WonderCMS siteHere we see a newly created site built with WonderCMS with the "GregCustom" theme installed and a "TestPage" added.

In short, it means that, unless you plan to develop a site with only a very few pages, then to get the best from WonderCMS, you do need to know at least the basics of of HTML and CSS. Elementary word processing skills are not directly transferable to web design as a rather different model is required.

In WonderCMS the theme you adopt comes with two essential files, "theme.php" and "style.css". The function of the theme file is to define the structure of the page and the elements within it, in the same way that a word processor template will for letterheads, resumés, CVs, Business Cards and those other specialised documents that need their content to have a particular layout. The function of the stylesheet file is to define how each of those components should appear.

That is a potentially tricky job as, unlike a document to be printed on paper of a known size, a web site might be displayed on anything from a three inch wide touch sensitive portrait orientation phone screen, to an eight foot wide projected image in someone's home cinema.

Content

In a web site the content of each page is held in a separate file or as a single entry in a database. WonderCMS uses the latter approach. You may have scores or even hundreds of related documents to display. These files and entries contain plain text that have added "tags" that tell the browser which text is to be rendered as headings, paragraphs, list items, etc. Most of these tags come in opening and closing pairs that are often nested within each other.

It's stating the obvious that you cannot embed an image, video or audio file in a plain text file. Instead, you insert a tag into the file, that tells the browser the location of the file that holds such material. These various tags form the basis of HTML (HyperText Markup Language).

HTML code for the
	header

The snippet of HTML code you see in the illustration comes from that for the page illustrated above. It produces the text to appear within the dark blue header area that will appear on every page of the site. The text "Website title" is tagged so it appears as a primary header (h1) and shall be given special emphasis (em). That text is followed by a line break (br). The text following the line break appears without any special treatment over and above that for a primary heading. What this code does not say is how primary headings should appear and what effect the special emphasis will have.

Styling

By default, a browser will render a heading in larger type than other text and will appear in bolder type, have a wider following margin. But a site's styling rules can change browser defaults and have it rendered in any way the site's writer wishes.

Where HTML tags are nested styling rules that apply to an outer tag will normally be inherited by the inner tags, and are said to cascade. These styling instructions are written in a language known as CSS (Cascading StyleSheets).

CSS code for the
	header

The snippet of CSS code that you see in the illustration is that which determines how that HTML snippet above is rendered by the browser.

The first part determines the margins around three sides of any primary heading appearing within the header area of the page. The lack of definition for the fourth side means this item will inherit the setting from the tag surrounding it. In this case it is the styling for the surrounding header tag that sets background to blue and, on wide screens, sets the text to be right aligned. Here's the settings for the primary heading continue with the font to be used, with a generic alternative should, for some reason that font not be available, along with the size it should have. Padding is space to be allowed around the text but inside any border applied to this content. Margin is space between any border and neighbouring content.

The second part determines how the emphasised text should differ from the standard primary heading within the header. There's a different font, size and colour and, in this case, it won't be bold, as is the default for a heading, or other possible font effect. The colour is set to a variable, defined elsewhere, as red. In this stylesheet all the colours appear in a list at the start of the file, making it vary easy to completely change the general colour scheme, as has been done with the site which now is set to a light generally monochrome colour scheme.

Summary

Given the two different languages used you'll realise that one of the fundamental principles in web design is the separation of content and styling. To ensure the required house style is maintained as the browser renders a page it refers to a dedicated "stylesheet" file that contains the common set of styling rules for that site. The whole point of having a separate stylesheet file is to get consistency of appearance across the whole site, which could contain scores or hundreds of pages.

Related pages: Default Editor, Alternative Editors and External Editors.