How to Use the SEBS Unit Templates

Last Updated: 2/10/2020

The enclosed templates are for Adobe Dreamweaver. They have been tested with Dreamweaver CC. They are responsive templates, which means the layout changes depending on the width of your screen. As such, it is recommended that you work with these templates, and the pages you create from them, in Dreamweaver's Code view, rather than Design view.

Unlike the previous iteration of these templates, we are now using what is known as "nested" templates. There is one master tempalte and two sub-templates that are based on the master template.

Master Template

The master template (sebs-unit-2019-master.dwt) where you update information that will appear on all of your pages, such as your unit name contact info, and your main menu structure. When you are creating new pages for your site, you will not base them on this template, but on one of the sub-templates mentioned below. Rather than a template for your pages, think of this as a template for your sub-templates.

Sub-Templates

There are two sub-templates, one specifically for your homepage (sebs-unit-2019-sub-homepage.dwt), and one for all other pages (sebs-unit-2019-sub-interior.dwt). Other than indicating the type of main menu you want to use (horizontal or vertical), you shouldn't have to edit these templates. But when you are creating pages for your site, these are the templates those pages will be based on.

Several sample versions of a homage are enclosed (index.html, index2.html, index-v.html, and index-v2.html). They are provided to show you different options for designing your homepage. These are not the only four choices available for your homepage. They are merely examples of what you can do.

The templates are built on the Foundation 6 framework, so much of the style and plugins in Foundation 6 will work on pages created with these templates.

If you have any questions about using these templates not answered here, contact the OPOC Web Team.

Using the Templates

  1. Template Setup
  2. Replacing Old SEBS Templates
  3. Creating a New Homepage Based on the Homepage Sub-Template
  4. Creating a New Interior Page Based on the Interior Sub-Template
  5. Optional Regions
  6. Editable Regions
  7. Editing the Stylesheet
  8. Adding Javascript

Template Setup

Before you start creating pages, there are several places in the templates where you need to supply info for your unit.

Setting Up the Master Template

  1. Find the line in the <head> section that begins with <!-- TemplateParam name="NavClass" and set the value to one of three options, depending on which type of navigation structure you want to use for your main menu:
    1. horizontal-nav: For a menu that runs across the top of the page, below the header. This is a good option if you only have one nav menu, and you have seven or fewer main menu items
    2. vertival-nav: For a menu that runs down the left side of the page. This is a good option if you have multiple menu lists, you have more than seven menu items, or your main menu items are long.
    3. no-nav: Use this if your website consists of only one page and doesn't' need a menu.
    Note: you will have to repeat this step on both of the sub-templates as well.
  2. Find the bit of code in the <header> section that says #####Unit Name Here (1 of 2)##### and change it to the actual name of your unit/program
  3. Find the bit of code in the <header> section that says #####Website URL##### and change it to the URL of your unit/program's website (but leave off the "https://" or "https://" prefix).
  4. In the <footer> section, update contact info, update or remove the social media icons/links as needed, and update the webmaster email address.
  5. If you chose "horizontal-nav" or "vertical-nav" in step 1 above, edit menu as needed. The main menu appears in two places; the one in the <header> only needs to be updated if you chose "horizontal nav". The one in the <main> section only needs to be updated if you chose "vertical nav".
    • If you chose "horizontal-menu" (see horizontal menu example), we recommend having no more than 7 short main menu items, and no more than 6 sub-menu items for each main menu item.
    • If you chose "vertical-menu" (see vertical menu example), you can have more main menu items with longer titles, and you can even have mutiliple menus. This example also shows the three different menu structures you can use: accordion menu, straight menu, and nested menu. Choose whichever menues work best for your content.

Setting Up the Sub-Templates

  1. In both sub-temapltes, in the <head> section, update the "NavClass" code as you did in step 1 of "Setting Up the Master Template".
  2. In both sub-temapltes, in the <head> section, edit the <meta> tags for keywords and description to add any text that you want to appear in all of your pages. (Once you create your pages baded on the template, you should then edit both of these tags on each individual page. No two pages should have the exact same description.

Replacing Old SEBS Templates

If you are replacing the 2015 SEBS templates with these new ones, see How to Apply the New SEBS Templates to Your Existing Website.

Creating a New Homepage Based on the Homepage Sub-Template

A page based on the homepage sub-template has several optional and regional areas.

Optional Regions

There are four optional regions on a homepage, but only one of them (Right Sidebar Option) is actually used. The other three (Breadcrumbs Option, Is Homepage, and Page Title Option) are only included to make the transition from the 2015 templates easier. To change the Right Sidebar option for an individual page, open the page in Dreamweaver and go to Modify > Template Properties. You will see a list of all the optional regions. Each region will be followed by a value, either "true" (show it) or "false" (hide it). To change the value of an individual option, select it from the list and either check or uncheck the ""Show..." checkbox below the list.

1. Right Sidebar Option

The Right Sidebar Option is set to "false" by default. If you set it to "true", it will add an editable sidebar down the right side of the page.

Editable Regions

There are six editable regions on a homepage. These are regions where you can add your own code or text. You can find these by opening a page in Dreamweaver in Code view, and looking for any line that begins with <!-- TemplateBeginEditable.

1. doctitle

This is in the <head> section of the page. On your homepage, the doctitle should be the name of your website. Only edit the text between the <title> and </title> tags.

2. head

This is also in the <head> section of the page. It includes two meta tags, "keywords" and "description". It is a good idea to complete both of them. This area can also be used for anything else you need to add to the <head> including page-specific style.

3. Full Width Feature Area

This is where you can add a single large photo or 2-5 smaller photos at the top of your homepage. Unlike the content below it, the photo(s) here will fill the enire width of a browser. If set up correctly, only the first photo will show when viewed on a small device, such as a smartphone.

4. Main Content

As its name implies, this is where you enter the main conent of your page.

5. Right Sidebar

This area is only visible and editable if "Show Right Sidebar Option" is set to "true".

6. Javascript

This is where you can add page-specific javascript code, or links to external javascript files.

Creating a New Interior Page Based on the Interior Sub-Template

A page based on the interior sub-template has several optional and regional areas.

Optional Regions

Theere are three optional regions on an interior page: Right Sidebar Option, Subtitle Option, and Supertitle option. To change these options for an individual page, open the page in Dreamweaver and go to Modify > Template Properties. You will see a list of all the optional regions. Each region will be followed by a value, either "true" (show it) or "false" (hide it). To change the value of an individual option, select it from the list and either check or uncheck the ""Show..." checkbox below the list.

1. Right Sidebar Option

The Right Sidebar Option is set to "false" by default. If you set it to "true", it will add an editable sidebar down the right side of the page.

2. Subtitle Option

The Subtitle Option is set to "false" by default. If you set it to "true", it will add an editable region just below the page title.

3. Supertitle Option

The Supertitle Option is set to "false" by default. If you set it to "true", it will add an editable region just above the page title.

Editable Regions

There are ten editable regions on an interior page. These are regions where you can add your own code or text. You can find these by opening a page in Dreamweaver in Code view, and looking for any line that begins with "<!-- TemplateBeginEditable".

1. doctitle

This is in the <head> section of the page. This is one of the two places where you enter the name of the page. Only edit the text between the <title> and </title> tags.

2. head

This is also in the <head> section of the page. It includes two meta tags, "keywords" and "description". It is a good idea to complete both of them. This area can also be used for anything else you need to add to the <head>including page-specific style.

3. Full Width Feature Area

This is where you can add a single large photo or 2-5 smaller photos at the top of your page. Unlike the content below it, the photo(s) here will fill the enire width of a browser. If set up correctly, only the first photo will show when viewed on a small device, such as a smartphone.

4. ParentLink

This area is used for adding links to your page's parent pages, when your page is more than one link away from the homepage.

For pages that are one click from your homepage, you can delete the code in the editable region, and a homepage icon will display about the page title area. For pages that are more than one link away from your homepage, you can change the link in the editable region to link to the page's parent page(s).

If your page is only one step away from your homepage (for example, any of our main menu links), this area should be blank. The template will automatically add a home button, that links back to your homepage.

If your page is more than one step away from the homepage, see the examples below:

Example 1: Two Step Away From Homepage
<!-- TemplateBeginEditable name="ParentLink" -->
<li><a href="index.html"->Parent Page</a></li>
<!-- TemplateEndEditable -->
Example 2: Three Steps Away From Homepage
<!-- TemplateBeginEditable name="ParentLink" -->
<li><a href="../index.html"->Grandarent Page</a></li>
<li><a href="index.html"->Parent Page</a></li>
<!-- TemplateEndEditable -->

The template will automatically add a > between links.

5. Supertitle

This area is only visible and editable if "Show Supertitle Option" is set to "true".

6. Page Title

This is the second place you enter the name of your page.

7. Subtitle

This area is only visible and editable if "Show Subtitle Option" is set to "true".

8. Main Content

As its name implies, this is where you enter the main conent of your page.

9. Right Sidebar

This area is only visible and editable if "Show Right Sidebar Option" is set to "true".

10. Javascript

This is where you can add page-specific javascript code, or links to external javascript files.

Editing the Stylesheet

If you want to make site-wide changes/additions to your website's CSS style, use the the stylesheet found at /2019/css/local.css.

If you want to make changes/additions to the style on individual pages, find the editable region called "head" (near the top of the page) and add the following code:

<style> </style>

In between those tags, you can add your page-specific CSS style.

Adding Javascript

If you need to add javascript to an individual page, find the editable region called "Javascript" (at the bottom of the page) and add the following code:

<script> </script>

In between those tags, you can add your page-specific javascript code.