Skip to Navigation | Skip to Content

Web Template Guide: Creating a New Page

Create a new page in your Web site

When you open a new page in your template, there are six things that you must do to make sure that the page follows the standards set for the new template on Calvin’s Web site.

Add a title in the “Heading Content” area at the top of the page

In the Heading Content area at the top of your Web page, enter the name of the section your page is in. If the page is the home page for one of your sections, enter only the section name here.

Faculty

If the page is a sub-page in a section, type a colon following the section name. Then type the name of the sub-page as it appears in the secondary navigation bar for the section.

Academics: Biology Major

Capitalize the words in your heading content (except "and," "the" and other like words.

Copy and paste your heading content into the title box

Copy and paste your heading content (described above) into the box called "Title:" above the Web content in Dreamweaver.

title box in Dreamweaver

Paste the heading so that it appears after "Calvin College" and your department name in that box as follows:

Calvin College - English - Majors and Minors

or for sub-pages:

Calvin College - English - Majors and Minors: ESL Minors

Note: Place spaces between words and dashes.

Make sure that your page is connected to the right navigation bar

The navigation bar for your page should be the one created for the section your page is in. For example, if your page is in the “Academics” section of your Web site, then the right navbar may be “navbar-academic.htm”.

If your page is either your home page, or the only page in a section, you do not need to change your navigation bar. It is already set to display your default navigation bar.

Connect to the right navigation bar by opening you page, clicking on the navbar area and looking in the HTML source code for the line that says something like:

<!--#include virtual="/admin/communications/includes/navbar.htm" -->

Simply replace the "navbar.htm" above with the correct file name for the navbar you want on your page. You should only have to type something like "-academic" or "-programs" after the word "navbar" and before ".htm".

Quick Tip: if you forget the names of your navbars, just open the "includes" folder in your Web site and refresh you memory!

Make sure that your page has the right bodyClass

Entering the right bodyClass value on your page will ensure that the section your page is in will be highlighted, or bold, on your navigation bar. This helps your visitors with orientation within the Web site.

Only one section in your navigation bar should be bold at any given time.

Enter the bodyClass by going to Modify>>Template Properties at the top of Dreamweaver. Click on "bodyClass" and enter the correct word into the text box.

The correct bodyClass word can be found by opening your Web site's style sheet (style-local.css). Under "Auto-Selecting Navigation" in the style sheet, find the word that corresponds to the section your page is in.

"academics" is the word for all pages in the Academics section of your Web site.

All bodyClass words are lowercased.

If you enter the bodyClass word on your page and the section your page is in does not appear bold in the navigation bar, check the word again to:

  • make sure you spelled it correctly
  • lowercased the first letter

Learn more about the bodyClass property »

Choose a layout option for your page

Decide if you want one, two, three or one+sidebar columns on your page (click on the above numbers for examples of each kind of page).

Choose a layout option based on what you need your page to do:

  • One column + sidebar: Use if you have action items or items to highlight in addition to your main content. See example »

  • One column: Use for purely information pages with no action items. See example »

  • Two columns: Use if you have two equally important things to convey on one page. See example »

  • Three colums: Use primarily for home pages and section home pages when you need to convey many different types of information. See example »

Change your layout

To change your layout, go to Modify>>Template Properties and change your bodyID accordingly. Enter one of the following values into the textbox for bodyId:

One column: oneColLayout

Two columns: twoColLayout

Three columns: threeColLayout

One column plus sidebar: defaultLayout

You must type in the option you choose EXACTLY as shown above, or your layout change will not work.

Save the page in the appropriate folder

Go to File>>Save As to save your new page.

First think about exactly where you need to save the new page. If your page is a new page within the Academics section of your site, save it in your "academics" folder. If your page is the first page in a new section of your site, create a new folder in your site and save the page in this folder.

Name your page

If your page is the home page of your Web site, or the home page for a section in your Web site, name the page "index.html" and save it in the folder for the corresponding section.

If your page is not the home page for your site or a section in your site, give the page an appropriate name. Web page names must always be followed by the extension ".html".

Secondary

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut nibh.

New page checklist

1. Add a title to the Heading Content are of your page. More »

2. Copy and paste your heading content into your title box. Add additional content from the Heading 2 if the Title is not specific enough. More »

3. Make sure your page is connected to the right navigation bar. More »

4. Add a bodyClass to your page in Modify>>Template Properties. More »

5. Choose a layout option with the bodyID attribute in Modify>>Template Properties. More »

6. Save your page in the right folder and give it a name that makes sense for the page. More »

See the complate Web page checklist »

Quick Tips

• Give your page a name that makes sense given the content of the page. A page that talks about scholarships given by your department might be called “scholarships.html.”

• If your page is either the home page for your Web site, or the main page for a section of your Web site, name it "index.html"

• The bodyClass word for your pages are always something very simple and intuitive. The word for the "Academics" section is "academics". The word for the "Faculty" pages will be "faculty".