Quick guide to website building

From Online Business Wiki

Contents 1 Web pages and Templates 2 CSS and templates 3 How your template is styled 4 How modules are formatted 5 How modules are styled 6 Other module customization 7 Creating a site from scratch

Web pages and Templates

In the system, you'll notice that web pages aren't the entirety of what you see in the web browser. This is because usually, you apply a "Site-Wide Template" to your pages. A Site-Wide Template wraps around your page, and are used for keeping a consistent look and feel, for re-using content (like headers and footers).

Site-Wide templates are found under Admin->Site-Wide Templates. Read more here.

CSS and templates

Modern web design uses CSS to control layouts and style elements on your pages. This is fully supported by the system. To use CSS, you can either:

• Attach CSS stylesheets using a <link> tag in your template. The CSS will then apply to any item that uses that template.

• Attach CSS stylesheets using a <link> tag in your web pages. The CSS will then apply to the page. Remember that any stylesheets linked in by the template will also apply.

You can also use inline and embedded styles in your templates and pages.

You can access the HTML code of your template by clicking the "<>" button at the bottom left hand corner of the editor.

How your template is styled

If you've created a template site, you'll find the site's CSS inside base.css and screen.css. Both of these files are in /StyleSheets/.

You can access your CSS either by FTP or by using the File Manager. To get to the File Manager, mouse over the "Website" tab and you'll see it appear under the "Recent Items" tab on the far right.

How modules are formatted

Nearly every module is laid out according to a customizable layout. All layouts can be found in Admin -> More Customization options. Layouts allow you to modify the HTML code, use CSS and add or remove information by modifying "data tags" which are replaced by the system when the module is rendered.

How modules are styled

Modules are styled using ModuleStylesheets.css. If you view the source code of the rendered modules, you'll see the various styles apply to the module. We use Firebug (getfirebug.com) which makes life really easy in this regard.

You can modify ModuleStyleSheets.css to your liking. It's found in /StyleSheets/.

Other module customization

Most modules and tags can be further customized using "module attributes". For details on this, search the specific module on the online business wiki.

For an example of this, see here and here for a general list of modules.

Creating a site from scratch

Here's the high level process we'd recommend when starting out on a new site.

1. Work out your common elements and design your site-wide template's HTML
2. Alongside the above, create your CSS stylesheet, upload it via the File Manager, and link it into your template in the usual way (with a <link> tag in the HTML code).
3. You may want to insert modules into your template at this stage, like Dynamic Menus.
4. Create your web pages, apply your template and insert modules.
5. Go to Admin->More Customization Options and modify your module layouts as appropriate.
6. Modify ModuleStyleSheets.css as appropriate.

So that was a quick overview of some concepts to get you started. For further and more detailed help please use the browse menu and the search box on the left.