HTML Page

Page address: http://www.mnsu.edu/its/web/template/documentation/htmlpage.html

... > Documentation > HTML Page


HTML Page Example

Here is an example of a HTML page that uses SiteMaster for its navigation:

<?php require_once($_SERVER['SMARTBUILDER']); $version=1;
$master='/directory_master_file_is_in/';
$contentcolumns=2;
?>
<?php setup('header'); ?>
<?php place('header'); ?>
<?php place('menucolumn'); ?>
<?php place('menucolumn-end'); ?>
<?php place('content'); ?>
<!--CONTENT BELOW-->
<h2>First Headline</h2>
<p>Your content here>/p>
<!--CONTENT ABOVE-->
<?php place('content-end'); ?>
<?php place('footer'); ?>

MSU Logo Bar

Each MSU page is required to have the MSU Logo Bar. In order to aid MSU web developers, the MSU Logo Bar is automatically inserted into the page by the MSU Template application.

The MSU Logo Bar includes the MSU Logotype, which is a link back to the MSU homepage (Tier One); and the MSU Search box, which allows users to conveniently search the MSU website and directories from any MSU page.

MSU Navigation Bar

Much like the MSU Logo Bar, the MSU Navigation Bar is required on all MSU pages and is automatically inserted by the MSU Template application. The MSU Navigation Bar provides links to high-level (Tier Two) MSU web pages.

MSU Logo Bar and Navigation Bar Code

The Logo Bar and the Navigation Bar are inserted automatically into every MSU Template page. The line below tells the server how to process the web page, and is always the first line of an MSU Template web page:
<?php require_once($_SERVER['SMARTBUILDER']); $version=1;
The line cannot be deleted, and the version should not be modified at this point. No additional code is required to display the Logo Bar and the Header Bar.

Subheader

This optional feature is used to show a graphic on a department home page. It is displayed between the University navigation bar and the page title.

Requirements

  • The graphic used for $subheadbg must be 105px high, and, since it's tiled, does not need to be wider than 1-2px in most cases
  • The graphic used for $subheadimage must be 772px wide by 105px high
  • Only the locations of graphics should be modified.

Subheader Types

Static

Use the static sub-heading to display a single image, which will not change on page refresh. $subheadimage specifies the URL of the image to be displayed.

Static Code

$subhead='static';
$subheadimage='[/images/techcomsubheader.jpg]';

Custom

The custom option allows use of a sub-header image, along with a sub-header background to fill the width of the screen. TODAY magazine is a good example.

Custom Code
$subhead='custom';
$subheadbg='#fff url(/techcomm/images/techcomm-subhead-bg.png) repeat-x scroll 0 1px';
$subheadimage='Technical Communication[/techcomm/images/techcomm-subhead-logo.png]';

Note: image URLs (above, in italic) are the only items to be modified.

Flash

The flash option allows you to use Flash in the sub-header image. The Athletics homepage is a good example.

Flash Code
$subhead='flash';
$subheadbg='#fff url(http://www.mnsu.edu/kmsufm/images/kmsu-subhead-bg.png) repeat-x scroll 0 1px';
$subheadimage='KMSUFM Logo[http://www.mnsu.edu/kmsufm/images/kmsu-subhead-logo.png]';
$subheadobject = '/headerobs/header.swf';

Rotating

This option displays a single image in the sub-heading, which changes randomly on page reload. This option is primarily for MSU Tier 2 page use. Please verify with webteam@mnsu.edu before choosing this option for your pages.

Rotating Code
$subhead='rotating';

Images in Left Column

$leftimage[]='Mavjobs.com logo[/cdc/images/mavjobs-logo.png|http://www.mavjobs.com/]';

Use the left image when you would like an image in the left column under the left menu. This should be right under the $leftmenu[] items. Image description becomes the alt tag and is required. The first URL in the square brackets is the location of the image, the second URL, separated from the first with a pipe, is the link. The link is optional. Maximum image width is 145px.

$master='/directory_master_file_is_in/';
This line links to the master.php file that has all the owner, left navigation, window titles, header titles, and breadcrumbs.

$contentcolumns=1;
There can be one or two columns for content. One-column layouts are suitable for most of your pages. Two-column layouts ($contentcolumns=2) are best used for "gateway" pages, where most of the content is just links to other pages. In this case it is best to put the links in both columns, to help minimize unnecessary scrolling.

Right Menu

$rightmenutitle='*Page Title[]';
$rightmenu[]='*First Anchor Link []';
The right menu is an optional feature. Unlike the left navigation, the right menu should only be used on pages with one-column layouts. The right menu is great for navigation within a page, for long pages.

Right Menu Syntax

In the example below the title of the right menu is "Page Contents". This is optional. If you do have a title you can only have one level of items in the right menu. If you omit the title you may have multiple levels like the left menu.
$rightmenutitle='*Page Contents:[]';
$rightmenu[]='*Anchor link[#link one]';
$rightmenu[]='*Anchor link[#link two]';
$rightmenu[]='*Anchor link[#link three]';
$rightmenu[]='*Anchor link[#link four]';

Header Placement

<?php setup('header'); ?>
<?php place('header');?>

This should immediately follow the closing tag of the page header. It will insert into your page: the purple MSU header bar, the yellow MSU navigation bar, subhead (if defined), left navigation, window title, page title and breadcrumbs. You need the first one to beable to use the SiteMaster page.

Content

Note: The highest level heading tag allowed in the content area is h2. H1 is already defined by the $headertitle variable.

Content Placement

<?php place('content');?>
Immediately following the place header command (or the left menu placement command, if present) the beginning of the content is defined:
<?php place('content');?>
<!--CONTENT BELOW-->
Anything between the lines above and the lines below is the content of your page.
<!--CONTENT ABOVE-->
<?php place('content-end');?>

Right Column

<?php place('rightcolumn');?>
<?php place('rightcolumn-end');?>

If you're using the right menu, you must tell the processing file to place the menu. The right menu will not be rendered if these placement commands are missing, even if you defined the right menu items in the header. The right menu is always placed within the content area:
<?php place('content');?>
<!--CONTENT BELOW-->
<?php place('rightcolumn');?>
<?php place('rightcolumn-end');?>
Anything between the lines above and the lines below is the content of your page.
<!--CONTENT ABOVE-->
<?php place('content-end');?>

Starting New Column

<?php place('contentcolumn-add');?>
If you're using a two-column layout, you must mark the end of the first and the beginning of the second column:
<?php place('content');?>
<!--CONTENT BELOW-->
First column content.
<!--CONTENT ABOVE-->
<?php place('contentcolumn-add');?>
<!--CONTENT BELOW-->
Second column content.
<!--CONTENT ABOVE-->
<?php place('content-end');?>

Mixed Column

<?php place('contentcolumn-split-begin');?>
<?php place('contentcolumn-split-separate');?>
<?php place('contentcolumn-split-end');?>

Use the mixed column when you would like to have both one column content and two column content on the same page. The code for a mixed column layout looks like this:

<?php place('content');?>
<!--CONTENT BELOW-->
One column content.
<!--CONTENT ABOVE-->
<?php place('contentcolumn-split-begin');?>
<!--CONTENT BELOW-->
First column content.
<!--CONTENT ABOVE-->
<?php place('contentcolumn-split-separate');?>
<!--CONTENT BELOW-->
Second column content.
<!--CONTENT ABOVE-->
<?php place('contentcolumn-split-end');?>
<!--CONTENT BELOW-->
Return to one column content
<!--CONTENT ABOVE-->
<?php place('content-end');?>

Ending Content

<?php place('content-end');?>
After writing all the contents required for the page this line of code should be inserted to mark the end of the contents.

Footer

<?php place('footer');?>
Immediately following the place content-end command the footer is placed:
<?php place('footer');?>
The footer contains the content owner information, as well as the MSU logo, the MSU utility Links, and page information.