University of Nebraska at Omaha
UNO global navigation:
This page's main content:
SITE ORGANIZATION
The organization of your site is important — careful consideration now will save you from many potential difficulties later. Not only that, using the recommended structure for your site will speed your template development. In the discussion below, we'll use the ever-so popular 'yoursite' pictured in the graphic at right. Directories and files in red are the essential ones, those in green are just for demonstration purposes.
top level.
'Top-level' refers to the pages on your site that reside in your main directory. For instance, with a site structure of 'http://www.unomaha.edu/yoursite/', all pages in the 'yoursite' directory are top-level (contact.php, facstaff.php, index.php, services.php, site.php, visitors.php). Aside from the pages and directories in red, it's up to you, but try to make it as logical as possible. Also, you can add additional directories into the 'img' folder.
abbreviations.
Just in case you don't know, 'img' is short for 'images', 'btn' is short for 'buttons', and 'inc' is short for 'includes'. But you probably already had that figured out.
yourincludes.htm.
Your customized includes reside within your 'inc' directory. This means that the path to those files will be different than those outside of 'yoursite', like the 'mark.inc' file decribed on this page. Let's take a look.
It is very important that you modify the paths to your includes if your site structure involves nested directories. All you need to do is alter the template paths to your includes as follows (example shows 'yoursite' on avalon):
http://www.unomaha.edu/yoursite/ = <?php require_once('./inc/inside_home.htm');
?>
http://www.unomaha.edu/yoursite/books/ = <?php require_once('./../inc/inside_home.htm');
?>
http://www.unomaha.edu/yoursite/books/2005/ = <?php require_once('./../../inc/inside_home.htm');
?>
http://www.unomaha.edu/yoursite/books/2005/02/ = <?php require_once('./../../../inc/inside_home.htm');
?>
If you're going to have pages in nested directories, you might want to save a 'model' page for each level in the directory — such as 'model_top' (top-level pages) saved at the top-level (yoursite/model.php), 'model_down1.php' (down one level in the site hierarchy) saved down one level (yoursite/nested/model_down1.php), and so on.
If your page doesn't work, but you're not getting a '404 Not Found' error message, the issue is most likely with the path(s) to your include(s).
SECTION 00 FILE HEAD
The 'file head' contains some important things that you'd be well advised to consider.
00 Title
Robots scour the web, and your page will surely be crawled by them. Among the many things they look at, is your page's title. To make it easier for people find your pages via search engines, make good use of title tag. Aside form the robots, people find title tags useful as well. It helps them to see where they are in your site. The title is also the text that will appear when someone bookmarks your page. Oh, and before we forget about the robot invasion, pay attention to the first sentence or so of your 'main content' area — it's prime for many robots as well.
00 Palette
In the <head> of your template, you'll find the line:
<link rel="stylesheet" href="http://www.unomaha.edu/css/06/pal_gry.css" type="text/css" />
All you have to do is change the part of the URL after 'palette_' to reflect your color preference. Use (do not copy and paste):
href="http://www.unomaha.edu/css/06/pal_blu.css" for Blue
href="http://www.unomaha.edu/css/06/pal_grn.css" for Green
href="http://www.unomaha.edu/css/06/pal_gry.css" for Gray
href="http://www.unomaha.edu/css/06/pal_orn.css" for Orange
href="http://www.unomaha.edu/css/06/pal_pur.css" for Purple
href="http://www.unomaha.edu/css/06/pal_yel.css" for Yellow
SECTION 01 CONTENT HEAD
The 'content head' holds your site identifier and the 'breadcrumbs'. Look over the information below, and click the 'inside' links at left to get more detailed information.
01 Breadcrumbs
The 'breadcrumbs' text represents the user's current location, with each word linked to the appropriate area. It should always start with UNO. For example: UNO > Your Site > Your Page. This navigational aid also serves as a quick reference, enabling users to see where they are in the site hierarchy.
01 Header Title
This text is what we'll call your 'identifier'. It tells the world who you are, and serves as the main identifying element on all your pages — tying them all together under a singular, unified brand.
If you're using one of the default 'Header Images', as described in 'Section 01 Header Image' all you have to do is edit the text to reflect your site's name and you're done here. Pretty easy.
01 Header Image
To change the default white 'header image' you'll need to first alter the image tag: <img src="http://www.unomaha.edu/img/lay/06/header/gry_01.jpg" alt="Your Site Name" width="770" height="57" />. There are many styles of backgrounds, so hopefully you'll find something that goes well with your chosen palette. Now, take a look at all of the available default header images by following this link. Copy the URL for the one you like, or do nothing and just use the default one that your template is already pointing to. If you do choose one of the alternate images, paste the copied URL into the 'src' box in your 'properties' window. Also in the 'properties' window, change the 'alt' tag for the image to 'Yoursite Name'.
SECTION 02 TABS
The css tabs in your template file are produced with CSS. The advantage here is that you won't have to mess with a Photoshop file. By default, your 'tabs_home' include will only two tabs — the 'Home' tab, and a 'Link One' tab. The 'home' should always link to your home. Add other tabs as needed.
Note that there are two different classes used to define the 'tabs'. One, 'nav' (as on the 'Link One' tab below) refers to the default state of the tabs — 'off'. The tab that refers to the actual page or category the browser is on will use the class of 'navon' (as on the 'Home' tab below). Your template's default 'home' tab is of the 'navon' class, so it appears with a red background. Look below for an example. (do not copy and paste from this page)
<a href="http://www.unomaha.edu/yoursite/index.php" class="navon">Home</a><a href="http://www.unomaha.edu/yoursite/page1.php" class="nav">Link One</a>
Each tabbed section of your website will require a unique include — if you have six tabs, you'll need six separate tabs includes. This is because each section will require a different tab to have the 'navon' class. Simply open up your 'tabs_home' include, and save a copy for each of your other sections into your 'inc' folder. For instance, if you have 'home', 'students', and 'faculty' tabs, save additional copies as 'tabs_students' and 'tabs_faculty'. Pages in each section will then need to have their include paths modified to point to the proper tabs include. It's easier than it sounds, really.
Be sure to use absolute links on your tabs.
SECTION 03 LEFTNAV
The 'leftnav' column contains an additional identifying image, and more detailed navigation within your site. The wta_02 always has the left colunm, and an image that sits at the top of that column.
'03A Inside Image'
You can use any image here that you'd like. By default it's Durango. The image size MUST BE 118px wide by 120px high. If Durango's not your cup of tea, you can create your own graphic by using the 'square.psd' file as a template.
'03B Inside Include'
The 'inside' links are used to show the pages available within a chosen 'top-level' section, and other important pages users might expect to find there. Some links may appear on the 'inside' lists of several, or all, of your pages. For each page you create that requires a different 'inside' list, you'll have to save a separate copy of the 'inside_home' file. For instance, if you had a contact page that needed its own 'inside' list, you'd save your copy as 'inside_contact.htm'. Then, just make sure that the page, in this case contact, changes the path to the 'inside' include to point to the new 'inside_contact.htm' file.
SECTION 05 RIGHTNAV
The 'rightnav' column contains an additional identifying image, and more detailed navigation within your site. The wta_03 always has the right colunm, and an image that sits at the top of that coulmn.
'05A Inside Image'
You can use any image here that you'd like. By default it's Durango. The image size MUST BE 118px wide by 120px high. If Durango's not your cup of tea, you can create your own graphic by using the 'square.psd' file as a template.
'05B Unomaha Include'
This link list is for pages that are related, and ⁄ or might be of interest to users that reside within the UNO system. Create separate listings, if needed, by using the same methods outlined for the 'inside' include.
'05C Also Include'
The 'also' links are for pages and sites that might be of use to users, but that reside outside of the official UNO web presence. For pages that are related, and ⁄ or might be of interest that reside within the UNO system, use the 'unomaha.edu' links list. Create separate listings, if needed, by using the same methods outlined for the 'inside' include.
SECTION 06 FOOTER
'06 Footer'
The 'footer' lets users know who is resonsible for the page, and how to contact them. Put in your own copyright, address, and a link to your 'contact' page or e-mail address.
FONTS
There are a wide variety of fonts available through the sitewide 'type.css' style sheet. They have been created to support uniformity and compliance with the NU system 'Identity Standards' document (http://www.nebraska.edu/news/news_identity.shtml). To get a listing to appear in your 'properties' window in Dreamweaver you'll need to use the Dreamweaver 'design-time style sheets' feature. Use the list below to reference styles that you'll be using.
class=content_title.
<h1>, or class=head_160blk. as a link.
<h2>, or class=head_140blk. as a link.
<h3>, or class=head_120blk. as a link.
class=head_120gry. as a link.
<h4>, or class=head_100blk. as a link.
class=head_100gry. as a link.
<h5>, or class=head_80blk. as a link.
class=head_80gry. as a link.
<h6>, or class=head_77blk. as a link.
class=head_77gry. as a link.
<p>, or class=main_80blk. as a link.
class=box_77. as a link.
class=feat_77. as a link.
class=foottext. as a link.
class=caption. as a link.
class=date. as a link.
class=fineprint. as a link.
default (no class) as a link.
