Using Secondary Page Templates with Composer

Table of Contents Go Down to Content
General Page Changes Setting the Page Title Changing the "Last Modified" date The Breadcrumb Adding Breadcrumb Links Removing Breadcrumb Links Editing Breadcrumb Links Content Guidelines Editing Content	The Left Sidebar The Right Sidebar Adding Headings Removing Headings Adding Single Menu Items Adding a Submenu Removing a Menu Item or Submenu

This page contains specific instructions for using the ECEn Secondary Page templates in Mozilla Composer. It is essentially a checklist of things you need to do to turn the template into a working page. Secondary Pages contain most of the actual information and content presented on your site.

General Page Changes

Setting the Page Title

This explains how to set the title that appears at the top of the browser.

Click for screenshot

Select "Page Title and Properties..." from the "Format" menu.

Click for visual guide

Enter the desired title in the text box labeled "Title".

Click for visual guide

3	Click "OK".

Changing the "Last Modified" date

The "Last modified" date is found at the very bottom of the page and indicates when it was last updated.

Click for screenshot

You should update this value before posting a new version of your page. Editing it is easy--simply click on the text and start typing.

The Breadcrumb

Near the top of the page is a list of links that shows where you are in the page hierarchy. Like the breadcrumbs left by Hansel & Gretel, this "breadcrumb" shows where you have been and provides a way to get back. A good example of a breadcrumb in action is found on the ECEn Employment: TA Positions page.

Click for screenshot

Adding Breadcrumb Links

If you need to make the breadcrumb trail longer by adding more links, do the following:

Select the "li" tag surrounding one of the breadcrumb links.

Click for visual guide

2	Type CTRL-C or select "Copy" from the edit menu.

3	Hit the right arrow key once.

4	Type CTRL-V or select "Paste" from the edit menu to add a new breadcrumb link. Repeat once for each new link desired.

Removing Breadcrumb Links

If you have too many breadcrumb links and need to delete one (or more), do the following:

Select the "li" tag surrounding the breadcrumb link you want to axe.

Click for visual guide

2	Type CTRL-X or select "Cut" from the edit menu to delete the link.

Editing Breadcrumb Links

Once you have the right number, edit them as you would any other links. The last element of the breadcrumb should not be a link, it should be the title of the current page (in bold). The link before that should point to the parent page, the next link back should point to the parent page of the parent page, and so on.

Content

Most of the secondary page is reserved for the actual content, the "meat" of the page.

Click for screenshot

Guidelines

In general, it is best to not worry about colors or styles and to let the templates take care of that for you.

Editing Content

Change the heading in the "h1" tags to suit the page. Then, below the heading, add whatever lists, links, tables, text, paragraphs, and pictures you want!

The Left Sidebar

This part of the tutorial only applies if you have selected a template that includes a left sidebar. The left sidebar is used for navigating through your site. All of the pages in a given section of your site should share the same left sidebar.

Click for screenshot

If your template has a left sidebar, you can find it in Composer right underneath the "div" tags reserved for content.

Click for screenshot

Working with the left sidebar is exactly like working with the right sidebar (below).

The Right Sidebar

This part of the tutorial only applies if you have selected a template that includes a right sidebar. The right sidebar is intended to contain links to similar or related pages. Although the steps here describe how to edit the right sidebar, the same steps will also work with a left sidebar.

Click for screenshot

If your template has a right sidebar, you can find it in FrontPage at the very bottom of the page, right above the footer bar.

Click for screenshot

Adding Headings

Do the following to add a sidebar heading:

Select the "h1" tag of an existing heading.

Click for visual guide

2	Type CTRL-C or select "Copy" from the "Edit" menu.

3	Select a tag next to where you want to put the new heading. if you want to add the new heading before the tag, hit the left arrow key once. If you want to add the new heading after the tag, hit the right arrow key once.

4	Type CTRL-V or select "Paste" from the "Edit" menu.

5	Edit the text of the new heading to taste.

Removing Headings

Select the "h1" tags surrounding the heading you want to remove and hit CTRL-X or the delete key.

Click for visual guide

Adding Single Menu Items

The easiest way to do this is to use a "copy/paste" on an existing menu item. Do the following:

Select the "li" tag of a menu item next to where you want to add.

Click for visual guide

2	Type CTRL-C or select "Copy" from the edit menu.

3	If you want to add an item before the one you selected, hit the left arrow key once. If you want to add an item after the one you selected, hit the right arrow key once.

4	Type CTRL-V or select "Paste" from the edit menu.

5	Modify the new menu item to be whatever you wish (usually a link to another page).

Adding a Submenu

The easiest way to do this is to turn an existing menu item into a submenu. Do the following:

Select the menu item that you want to turn into a submenu.

Click for visual guide

From the "Insert" menu, select "HTML..."

Click for visual guide

3	Insert the following into the box that appears: `<li>Submenu Title <ul> <li><a href="secondary.html">Submenu Text</a></li> </ul> </li>`

You should now see something like this:

Click for screenshot

5	Click the "Insert" button.

6	Congratulations! You have a new submenu. Edit it however you want.

Removing a Menu Item or Submenu

If you want to remove any menu item, select the "li" tags that surround it and hit CTRL-X or the delete key.

Click for visual guide