Page Title

We are a research and service division of:

This is a sample page that shows most of the elements available for constructing new pages for our website (https://geoinfo.nmt.edu). Excluding the banner and other portions of the page locked by the template, you can modify and copy the page elements here to suit your needs. The template makes extensive use of pre-defined styles (CSS) which you can choose from a drop down menu. Using the template and these pre-defined styles will make our site more uniform and easier for our audience to use.

Some remarks on page design and organization

The homepage for every site should be called home.html (or home.cfm for dynamic pages) --this makes the URL simpler to get to because of the way the web server is set up: i.e. https://geoinfo.nmt.edu/staff/home.html can be reached by typing https://geoinfo.nmt.edu/staff.
Your pages should be quick to load (i.e. avoid long tables and large images, especially on a home page).
Remember that your page may be read by anyone, from gradeschool kids to research scientists to members of congress. Also, don't put any information up that you don't want public (like your home address/phone# etc).
A page 'jump menu' utilizing anchors (a.k.a. targets) has links to specific section within each page from the table of contents or TOC and is very helpful for browsing longer pages.
Use all lower case for webpage file names to avoid problems with some operating systems that are case-sensitive. Do not include spaces in the name (use_underscores or-dashes) because spaces will cause your links will break.
Use lower case for all HTML tags.

Page Structure and Semantic HTML Tags

Make an effort to structure your document so that the formatting has semantic meaning and a logical structure. For instance, headings (h1, h2, h3, etc.) should be chosen based on their hierarchy in the document, not just by how you want them to look. A h3 should follow an h2 with no jumps between levels (i.e. no h3 below an h1). Where appropriate, use HTML tags that define what the content means. For instance, you could enclose our address in an <address>e.g. our address here</address> tag or enclose an abbreviation or acronym in an <abbr> or <acronym> tag. There are numerous resources on the web that explain HTML tags (try Index DOT HTML) or contact the webmaster for help.

Initial page setup

The page banner and main link rollover state is controlled by setting the template properties (Dreamweaver menu: Modify / Template Properties; Contribute: Format / Template Properties). Acceptable values include: "about-page"; "pubs-page"; "geoscience-page"; "resources-page"; and "collections-page". You could also just copy this or another pages for use as a starting point.

The 'breadcrumbs' within the banner show where a given page within the hierarchy of the site. Please update and set up links accordingly. If you use a nearby page as the basis for a new one, often most of the breadcrumbs and other menu items will already be set properly.

There are two places where the page title will need to be set:

The centered heading is the title that will appear on-screen
The document title (set separately in page properties) will appear in the window frame in the browser.

Sub-Menus

All menus are coded as unordered lists for accessibility reasons and to simplify code structure. The main menu is a single file that will be updated as new pages are added. Secondary tabbed navigation is also available for closely related pages or pages that present a multi-page narrative with previous & next links. Currently active portions of the tabbed menu should have a CSS class of 'current' applied to the <a> element.

Sub-Site Navigation Links

There is an optional sub-site navigation structure that is useful for a series of related pages. This menu is disabled by default, but can be activated via the Template properties menu. It is also an unordered list. A paired --Previous-Home-Next-- menu will also appear a the foot of the page (this can be deleted).

ExtraContent

There is an optional editable region 'ExtraContent' that is hidden by default. It can be activated via the Template properties menu. This editable region is used by the PubsDetail sub-template for price and download info, but could be used for any other page for extra content beneath the main page content.

Links

Please try to create links that provide context for the link. Avoid using links like 'click here' because this text will be annoying if the page is printed out. A better approach would be something like: a full text PDF is available (10 KB). Note that when a link is to a file, please specify the file size so that users with slow connections can decide if following the link is worthwhile for them.

Use the class "linkbutton" if you want a link to look like a button. If you want a slighty smaller button, add the class "smallertext": button or define the font size yourself (e.g. style="font-size:0.75em") button.

Typography

Screen and print fonts are already assigned by the template for various page elements. Use HTML headings like <h2>, paragraph, and bullet lists to format your page. It'll look better, be easier to deal with, and load faster. Headings should have a logical structure and nest properly (a heading 3 shouldn't follow a heading 1 for instance). You may apply bold and italics to text and you can change the color and background of text.

Subscripts and superscripts

One necessary text formatting feature that you can't get from the menu is subscripts and superscripts. The HTML tag to do this is <sub> and <sup> e.g. <sup>40</sup>Ar/<sup>39</sup>Ar will be rendered: ⁴⁰Ar/³⁹Ar and CaCO<sub>3</sub> will be rendered: CaCO₃. Neither Dreamweaver or Contribute have a shortcut for this formatting.

Below is a list of some common sub/super scripted text which you can cut and paste and edit in your page:

A geologist in the field — This is a <figure class="right shadow"> to add a drop-shadow. To add a border, add the class "add-border". A <figcaption> will wrap to the margin of the figure so long as the figure has an inline style with the max-width set equal to the image width (e.g. style="max-width:262px" within the <figure> tag).

Al₂SiO₅

⁴⁰Ar/³⁹Ar

¹⁴C

CaCO₃

H₂O

H₂SO₄

KAlSi₃O₈

SiO₂

Images

Images must be in either one of three formats for the web. JPEG (.jpg) is a lossy compression image file format that works well for photographs but not for graphics. GIF is a lossless compression format that works well for graphics with areas of solid color (but doesn't work well for photographs). PNG is a lossless compression format that works well for all types of images and is supported by all but the very oldest browsers.

Images are sized relative to the pixel dimension on the browser. Most screens are 72 or 96 dpi, but the pixel dimension is what is really important. The default page layout has room for an image 984 pixels wide (without margins or borders). Contribute has been set to not allow larger images because they affect load times and will break the look of the layout. Should you need to post a larger image for some reason, contact me. If you are using Dreamweaver, please avoid posting images larger that 984 pixels wide including margins and borders. Images enclosed in a <div> or <figure> tag can be assigned to several classes: "left", "right", and "center" are for postition; "noborder" will not have a border (see examples on this page). You can also enclose a <figcaption> and add class of center if you want the caption text to be centered. A <div> with and class of "credits" can also be included. These <div> and <figure> tags containing images should have an inline style applied to set the max-width (see examples). It may be easiest to just copy one of the sample images on this page and then replace the various parts on your page.

To aid those with visual disabilities, images should have alternative text that describes what the image portrays. Your software should prompt you to supply this information when images are added.

Sidebars

Sidebars are only appropriate in webpages for a very short aside because it annoys readers to have to scroll up and back down to read webpages. If a more extensive aside is appropriate, create a new page or use a summary sidebar to hook into the more expanded discussion.

Validation

If you are using Dreamweaver or are hand coding your new page based on the template, be sure to validate your page before posting it. In Dreamweaver, use menus: File > Check page > Validate markup. Please fix any reported errors. You can also validate the page once it is posted by clicking on the 'Valid HTML' link at the bottom of the page. Another very useful method is to view the page source using the 'TIDY HTML validator' extension for Mozilla Firefox.

The rest of this document shows examples of various page elements in use.

SubTitle: Heading 2

Integer a nulla quis lectus nonummy fermentum. Sed sit amet justo. Nunc imperdiet felis ornare tortor pretium tincidunt. Curabitur pellentesque ipsum vitae orci. Curabitur nisl. Nam elit. Aenean ultrices ante quis est. Donec nec mi sed nisi pretium mattis. Praesent semper. Cras justo arcu, consectetuer ut, scelerisque sodales, adipiscing consequat, nisi. In et magna. Nunc at massa ac ante bibendum fermentum. Morbi dignissim. Vestibulum eget tellus. Fusce egestas. Nunc ante est, laoreet malesuada, posuere a, pulvinar vehicula, urna. Quisque vitae mi vel neque tempus ullamcorper.

Nulla tristique lacus vel dui. Integer ante. Nulla vitae mi. Nullam magna diam, bibendum sit amet, aliquet eget, feugiat vitae, risus. Donec in pede. Cras ac eros. Mauris nec leo a lorem egestas scelerisque. Praesent lacinia nunc sit amet sem. Maecenas vel elit a sapien ultricies eleifend. Donec porta faucibus massa. Nunc et purus. Aliquam interdum, ante vitae faucibus vestibulum, lorem magna tincidunt pede, eget tempor elit augue sit amet quam. Aenean eget dui.

Nullam imperdiet. Suspendisse purus tellus, adipiscing sed, euismod ut, sagittis nec, est. Nullam nisl enim, euismod ac, consequat quis, hendrerit malesuada, arcu. Etiam facilisis. Phasellus et pede sit amet nisi tincidunt convallis. Praesent magna. Suspendisse potenti. Suspendisse ac augue. Donec gravida orci porttitor mauris. Nam neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc enim, volutpat at, condimentum a, pellentesque at, massa. Suspendisse id pede sed augue ultrices tincidunt. Vestibulum bibendum dapibus lectus. Sed quam urna, semper sit amet, fringilla et, bibendum ac, sem. Quisque cursus sapien et dolor. Nunc cursus tincidunt diam. Aliquam ligula. Phasellus nunc pede, mattis quis, rhoncus cursus, dignissim ac, magna.

Much effort has been made to ensure that the layouts in the BlueRobot Layout Reservoir appear as intended in CSS2 compliant browsers. The content should be viewable, though unstyled, in other web browsers. If you encounter a problem that is not listed as a known issue, I am most likely not aware of it.

SubTitle: Heading 3

Proin sit amet diam. Nulla arcu purus, vehicula id, faucibus quis, gravida ac, lacus. Cras ac lacus. Pellentesque viverra, sem id rhoncus cursus, enim augue ultricies mauris, ornare volutpat eros ipsum ac orci. Vivamus ligula felis, iaculis vel, posuere nec, luctus nec, nisi. Sed rhoncus. Suspendisse id diam a massa consectetuer rhoncus. Morbi purus leo, hendrerit id, posuere pellentesque, dapibus et, ligula. Vivamus placerat magna quis mi. Nam ut massa quis ipsum fermentum commodo. Nulla at dui a enim cursus sollicitudin.

Right <aside> Title

This is a <figure class="left" and a <figcaption>.

Contains links to related pages or short descriptions or elaborations of subjects mentioned within the content. Could change size and color as needed for Emphasis. Add the class "shadow" for a box shadow effect.

This is coded <aside class="right">.

Contains links to related pages or short descriptions or elaborations of subjects mentioned within the content. Could change size and color as needed for Emphasis.

Also note that right sidebars will be positioned in the whitespace to the right of the page content if the browser window is wide enough.

You can include images or figures in sidbars as well.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec malesuada porttitor dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum, est quis pretium nonummy, odio enim elementum diam, et bibendum arcu nibh id tellus. Sed eget lectus at dolor euismod lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mattis. Cras laoreet rhoncus libero. Curabitur ultricies varius neque. Sed ultricies, arcu ac imperdiet mollis, orci orci varius lacus, ut convallis nibh justo at lorem. Aliquam hendrerit tortor non enim. Donec vestibulum felis vitae libero. Aliquam erat volutpat. Vestibulum ac lorem eget justo condimentum consequat. Nam sit amet odio at diam porta condimentum. Nulla consectetuer nulla eget est. In fermentum pretium felis. Nam ipsum. Aliquam est turpis, mattis pulvinar, varius molestie, elementum ac, lacus. Pellentesque ac arcu. Aliquam erat volutpat.

SubTitle: Heading 4

Tent Rocks Panorama — A larger image could be centered without text content on either side and either a <figcaption class="center">. If the max-width of the image is specified as an inline style on the <figure> tag, the image will automatically dynamically resize

SubTitle: Heading 5

Subtitle: Heading 6

Tables

Tables can be styled numerous ways. This is a very basic default style that will be applied. To change the style, add add styles to the page or add inline styles. You can either use the simple table model or the more complex version that uses <thead><tbody> and <tfoot>.

This is a table caption
This	Is a	Header Row <thead><tr><th>
body cells	body cells	body cells <tbody><tr><td>
body cells	body cells	body cells
This	is a	footer row <tfoot><tr><td>

Add a class of "data" to the table tag for tables that contain spreadsheet-like data that need borders between columns:

This is a table caption for a "data" table
This	Is a	Header Row <thead><tr><th>
body cells	body cells	body cells <tbody><tr><td>
body cells	body cells	body cells
This	is a	footer row <tfoot><tr><td>