Using Mozilla Composer to create ECEn Pages

This tutorial was written using Composer from Mozilla 1.7.8. Please note that it assumes a prior understanding of the basics of web page creation in Composer: this tutorial only covers what you need to know to work with the ECEn web page templates. Also, the steps outlined in this tutorial are not the only way to do things: if you can get the result you're looking for by doing something else, go for it! Feel free to contact the ECEn Web Team if you need any extra help.

Choose a Template

First, you need to decide what template to use as a starting point. There are two basic styles you need to know about: "Main" pages and "Secondary" pages. Here are some general guidelines to help you decide which to use (and when):

Main Pages

Usually, your site will only have one Main page if it has one at all (you don't necessarily need one). Main pages generally contain menus and indexes that lead to the rest of the pages on the site. An example of a page using the "Main Page" style is the ECEn Home Page.

Click for screenshot

Secondary Pages

Secondary pages usually make up the majority of pages on a site. They usually contain most of the actual information and content presented on your site. An example of a page using the "Secondary Page" style is the ECEn News Page.

Click for screenshot

For your convenience, we provide several templates for each style that have different combinations of "extras" like sidebars and news sections. Browse through the templates listed below and decide which one you want to use:

Main Page Template Files

File	News Section	Right Sidebar
main.html	Yes	Yes
main_nobar.html	Yes	No
main_nonews.html	No	Yes
main_nonews_nobar.html	No	No

Secondary Page Template Files

File	Left Navigation Bar	Right Sidebar
secondary.html	Yes	Yes
secondary_noright.html	Yes	No
secondary_noleft.html	No	Yes
secondary_noleft_noright.html	No	No

Once you've chosen a template that meets your needs, download a copy of it. Do the following:

1	Right-click on the link of the template you selected and choose "Save Link As..." or "Save Target As..."

2	Browse to a suitable folder, rename the file if you wish, and click "Save".

3	Fire up your editor of choice and open the file you just downloaded.

Important Information

Before continuing, there are a few things you need to be aware of:

This tutorial primarily uses the "HTML Tags" Composer design mode. Although what you see in the window as you edit will appear different from the final product, the visible tags make editing the templates much easier. You can switch design modes by selecting the appropriate tab at the bottom of the screen--if you want to see how the page will really look, use the "Preview" tab.

Click for screenshot

When the tutorial says to select a tag, the best way to do so is to click once on the yellow tag label (not the contents). The HTML tag and all of its contents will be cleanly and completely selected.

What Now?

OK, you've downloaded and opened a template page and are now facing what may seem like an ugly, confusing mess. Fortunately, turning it all into a beautiful, functional web page is easier than it looks! The links below will give you specific instructions on how to use the Main Page and Secondary Page templates, walking you through the process. Good luck!

Main Page Template Instructions (Mozilla Composer)

Secondary Page Template Instructions (Mozilla Composer)