This page contains specific instructions for using the ECEn Main Page templates in Microsoft FrontPage. It is essentially a
checklist of things you need to do to turn the template into a working page. As the name suggests, "Main" pages are best used as a main menu page,
providing links to the rest of 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
1
Select "Save As..." from the "File" menu.
2
Click the "Change Title" button. When the dialog appears, type in the title that you want the page to have.
Click for visual guide
3
Click "OK", then "Save". When asked if you want to replace the existing file, click "Yes".
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.
Features
The "Features" section is the large white rectangle almost at the top of the page. Usually, there will be more than one. When the page is loaded,
one of them is selected at random and displayed (the others remain hidden). When viewing the page in a browser, the "prev" and "next" buttons at the
bottom of the section allow you to view the other features.
Click for screenshot
Removing Extra Features
Do the following to remove unwanted features. Note: You'll want to keep at least one.
1
Select the "div" tag that represents one of the feature sections.
Click for visual guide
2
To delete the feature, type CTRL-X or select "Cut" from the edit menu.
Adding More Features
Do the following if you want to add more features (three is the default in the templates).
1
Select the "div" tag that represents one of the feature sections.
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 feature. Repeat once for each new feature desired.
Editing Features
For each feature, here is what you need to edit:
The feature title (inside the "h1" tags).
The feature text (inside the "p" tags). You can add links if you wish.
The "More" link. Usually, you will want this to point to a page with
more detailed information on the subject of the feature. If you don't have a separate page with more information, then delete this link.
The feature image. Replace the image with one of your choice (it must be 200 pixels high).
If you would like help formatting the picture so that it has the right dimensions and style, the ECEn Web Team would be happy to help.
Tab Sections
Main Pages are divided into tabs. Each tab contains its own content, independent of the other tabs, and users can switch easily between them. Clicking on
a tab makes the corresponding content visible below it while hiding content from the other tabs.
Click for screenshot
Special Tabs
There are a couple of tabs with special behavior that you need to be aware of.
The "Main" tab. Usually, this tab contains some sort of main menu. Only menu items in this tab will be included in the automatic A-Z index.
The "A-Z Index" tab. This tab, by default, will automatically make an alphabetical index out of of the menu items in the "Main" tab. If you don't want this feature,
feel free to delete this tab. Remember, the A-Z index is generated automatically, so you don't need to build it yourself.
The "Route Y" tab. This tab, as the name suggests, provides a way for users to log in to Route Y. It shouldn't contain any other content. If you want to keep this,
your best bet is to leave it how it is. Otherwise, feel free to delete it.
Removing Extra Tabs
If the template contains more tabs than you want or need (a likely scenario), the following steps will get rid of them.
Select the "li" tag surrounding the tab you want to get rid of.
Click for visual guide
Hit CTRL-X or select "Cut" from the "Edit" menu to delete the tab.
Now, delete the corresponding section of data. Scroll down until you find the "div" that corresponds to the tab you just removed. (The "div"
sections for each tab are in the same order as the "li" sections).
Select the "div" tag you want to delete.
Click for visual guide
Hit CTRL-X or select "Cut" from the "Edit" menu to delete it.
Adding More Tabs
Unfortunately, this requires directly editing HTML code and is beyond the scope of this tutorial. If you really need more tabs and can't figure
out the HTML yourself, contact the ECEn Web Team and we'll be happy to help.
Editing Tabs
For each tab, here is what you need to edit:
The tab title (inside the "a" tags in the list of tabs).
The tab contents (inside the "div" tags below the list of tabs). Add whatever you want! Chances are, at least one tab (probably the "Main" tab) will contain
a menu. See the section below on Designing Menus for more help with that.
Designing Menus
A Main Page should have at least one menu. Usually, it's located on the "main" tab and is one of the first thing your visitors will see. Well designed
menus are important: they serve as a navigation guide to the rest of your site! You can also add menus under other tabs (below), if you wish.
Click for screenshot
Adding Single Menu Items
Do the following to add an item to the menu:
1
Select the "li" tag of a menu item next to where you want to add.
Click for visual guide
2
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.
3
Hit Enter. Your cursor should now be inside an empty set of "li" tags.
4
Add whatever menu item you wish (usually a link to another page).
Adding a Submenu
If you want to add a submenu, start by doing the steps in "Adding Single Menu Items" above. When you get to the final step, do the following:
1
Type in the title you want the submenu to have in the tags you just created, then press enter.
2
Add the items you want in the submenu after the item you just created. It should look like you are extending the current list.
Click for screenshot
3
Select all of the "li" tags you added, except for the first one (the submenu title). Find the "Increse Indent" button and hit it twice.
Click for visual guide
4
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
Adding a Menu in Another Tab
The easiest way to do this is to copy an existing menu structure.
1
Select the "ul" tag that contains the entire menu and submenus.
Click for visual guide
2
Type CTRL-C or select "Copy" from the edit menu.
3
Locate the "div" tag where you want to create a menu. Remember, there is a one-to-one correspondence between the tabs and
the "div" sections underneath them.
4
Select the placeholder text (you won't be needing it).
Click for visual guide
5
Type CTRL-V or select "Paste" from the edit menu.
6
Edit the new menu structure to taste.
The News Section
This part of the tutorial only applies if you selected a template that includes a News section.
Click for screenshot
Adding More News Items
If you need more than three visible news items, do the following:
1
Select the "div" tag that represents one of the news items.
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 news item. Repeat once for each new news item desired.
Removing Extra News Items
Do the following to get rid of unwanted news items:
1
Select the "div" tag that represents one of the news items.
Click for visual guide
2
To delete the news item, type CTRL-X or select "Cut" from the edit menu.
Editing the News Section
Here is a list of things you'll need to edit in the News section:
The News Section title (inside the "h1" tags).
The News date (inside the "h2" tags). Update this whenever you
change the contents of the News section.
News Item titles (inside the "h3" and "a" tags). Each News item should have
a unique title. If you have another page with more detail about this news item, the title should link to it.
News Item images. Replace the image embedded in each news item with one of your choice.
The picture dimensions should be 55 x 60 pixels.
News Item summary (inside the "p" tags). This should contain a short summary of the
news item.
News Item "more" link. If you have another page with more detail about this news item,
the "more" link should point to it. If not, you should delete the "more" link.
The "Main News Page" link (at the bottom of the News section).
If you have another page dedicated to News, change this link to point to it. If your site doesn't have a separate news page, you can delete this.
The Right Sidebar
This part of the tutorial only applies if you selected a template that includes the right sidebar. The right sidebar is intended to contain
links to similar or related pages.
Click for screenshot
Although the right sidebar is actually located on the right edge of the Main page, FrontPage's "Normal" editing mode shows it on the bottom of the page.
You will have to scroll almost all the way down to find and edit it.
![[image]](./images/frontpage/main_changetitle_show.png)
![[image]](./images/frontpage/main_changetitle.png)
![[image]](./images/main_modified_show.png)
![[image]](./images/main_feature_show.png)
![[image]](./images/frontpage/main_feature_select.png)
![[image]](./images/main_tab_show.png)
![[image]](./images/frontpage/main_tab_select.png)
![[image]](./images/frontpage/main_tab_select2.png)
![[image]](./images/main_menus_show.png)
![[image]](./images/frontpage/main_menus_item_select.png)
![[image]](./images/frontpage/main_menus_sub_create.png)
![[image]](./images/frontpage/main_menus_sub_indent.png)
![[image]](./images/frontpage/main_menus_copy_select.png)
![[image]](./images/frontpage/main_menus_copy_placeholder.png)
![[image]](./images/main_news_show.png)
![[image]](./images/frontpage/main_news_select.png)
![[image]](./images/main_sidebar_show.png)
![[image]](./images/frontpage/main_sidebar_show2.png)
