August 2009: New Navigational Header for all departments/units in the College of Agriculture.

The college is following the initiative set by the Dean to apply the New Navigation Header to all Web pages.

Standard Header

All new sites will include this new header in the design.
All existing sites will include this new header in the design by February 2010.
Webmasters within the departments/units can copy the code below and update pages:
- Create new links in the black navigation bar
- Add the department/unit name in the blue header area
- Contact Integrated Media for assistance in the update
Web Design standards for the Navigation Header (pdf)
View standard Headers (jpg)

Customizing the Header

Optional:
Customize the Blue area of the Header (requires extra code)
- The right side of the blue area can be customized to add a special graphic (static or as a link), or add links only.
  - Copyright/permissions for photos do apply!
  - When adding images, never go past the middle of the blue header, keep all customizing on the right-of-center.
- The left side of the blue area is reserved for the UKAG logo and the main program area UKAg logos for Academics, Research, Extension or HES
Contact Becky Simmermacher, Integrated Media section in Agricultural Communications Services to discuss options to customize the Header.
A sample page will be created so the code can be inserted by the dept/unit webmaster into other pages (adjustments to existing css that may affect the new header css and code).
Always make updates off-line and upload finished pages to the server.
View the possibilities (jpg) for customizing the Header.

Need the site redesigned?

To completely re-design the site, please submit a project clearance sheet (pdf)

__________________________________________________________________________________________________________________

Webmaster code for updating sites:

Below is the code for the new header. Contact Becky Simmermacher, Integrated Media section in Agricultural Communications Services if you need assistance with the code/css while placing the Header code. Always make updates off-line and upload finished pages to the server.

1) Header with logo on the left and editable title (like this page)

HEAD

Copy and Paste this Head code in between <head> and </head> part of your document

BODY PART

Copy and Paste this code part to your <body> document

Highlight the code. Then, right click inside the box on the highlighted text. Choose "copy" from the menu. Open your web editor and paste the code in appropriate place, usually right after opening <body> part of your page.

<!-- Required UK and College Headers -->
<div id="requiredukcollegeheader">
<div id="collegeheader">
<a href="http://www.uky.edu/" title="University of Kentucky Home Page"><img src="http://www.ca.uky.edu/internal/coll_headers/images/UK.jpg" border="0" alt="University of Kentucky" /></a>
<a href="http://www.ca.uky.edu/" title="College of Agriculture Home Page"><img src="http://www.ca.uky.edu/internal/coll_headers/images/CollegeofAg.jpg" border="0" alt="College of Agriculture" /></a>
</div>
<ul id="collegenavigation">
<li><a href="http://www.uky.edu/" title="University of Kentucky Home Page">UK Home</a></li>
<li><a href="http://www.ca.uky.edu/" title="College of Agriculture Home Page"> College Home</a></li>
<li><a href="http://www2.ca.uky.edu/index" title="College Site Index">Site Index</a></li>
<li><a href="http://www.ca.uky.edu/index_n.php?cx=003398099011942252124%3Agmpps7ysdwm&cof=FORID%3A11&q=&sa=Search&siteurl=www2.ca.uky.edu%2F#19" title="Search College of Agriculture">Search</a></li>
<li><a href="http://warehouse.ca.uky.edu/coahome/addrbook/people.asp" title="Directory of People">People</a></li>
<li><a href="http://www.ca.uky.edu/coahome/help.htm" title="Need Help?">Help</a></li>
</ul>	
<div id="header">
<div id="logo-title"><a href="http://www.ca.uky.edu" title="College of Agriculture Home"><img src="http://www.ca.uky.edu/internal/coll_headers/images/logo.png" alt="Home" id="logo2" /></a></div><div id="titleoforg">Editable text based title of department or institution</div>
<div style="clear: both;"></div>
<div id="specialmenu"> 
<ul class="blackmenu">

<li><a href="#" title="">Custom Link</a></li>
<li><a href="#" title="">Custom Link</a></li>
<li><a href="#" title="">Custom Link</a></li>
<li><a href="#" title="">Custom Link</a></li>
<li><a href="#" title="">Custom Link</a></li>
<li><a href="#" title="">Custom Link</a></li>
<li><a href="#" title="">Custom Link</a></li>

</ul>
</div>
</div>
</div>
<div style="clear: both;"></div>
<!-- End of Required Headers -->

2) Header with logo on the left and customized image on the right

See possibilities (assistance available) - See example with image in header on Alumni site or on Academic Programs site.

HEAD

Copy and Paste this Head code in between <head> and </head> part of your document

BODY PART

Copy and Paste this code part to your <body> document

<!-- Required UK and College Headers -->
<div id="requiredukcollegeheader">
<div id="collegeheader">
<a href="http://www.uky.edu/" title="University of Kentucky Home Page"><img src="http://www.ca.uky.edu/internal/coll_headers/images/UK.jpg" border="0" alt="University of Kentucky" /></a>
<a href="http://www.ca.uky.edu/" title="College of Agriculture Home Page"><img src="http://www.ca.uky.edu/internal/coll_headers/images/CollegeofAg.jpg" border="0" alt="College of Agriculture" /></a>
</div>
<ul id="collegenavigation">
<li><a href="http://www.uky.edu/" title="University of Kentucky Home Page">UK Home</a></li>
<li><a href="http://www.ca.uky.edu/" title="College of Agriculture Home Page"> College Home</a></li>
<li><a href="http://www2.ca.uky.edu/index" title="College Site Index">Site Index</a></li>
<li><a href="http://www.ca.uky.edu/index_n.php?cx=003398099011942252124%3Agmpps7ysdwm&cof=FORID%3A11&q=&sa=Search&siteurl=www2.ca.uky.edu%2F#19" title="Search College of Agriculture">Search</a></li>
<li><a href="http://warehouse.ca.uky.edu/coahome/addrbook/people.asp" title="Directory of People">People</a></li>
<li><a href="http://www.ca.uky.edu/coahome/help.htm" title="Need Help?">Help</a></li>
</ul>	
<div id="header">
<div id="logo-title"><a href="http://www.ca.uky.edu" title="College of Agriculture Home"><img src="http://www.ca.uky.edu/internal/coll_headers/images/hesalumnilogo.png" alt="Home" /></a></div><div id="extraitemright">
<!-- this image can be replaced with another customized image, height should be around 60px --><img src="http://www.ca.uky.edu/internal/coll_headers/images/seeblue_forever.png" alt="See blue forever" /></div>
</div>
<div style="clear:left; height: 1px; margin: 0px; padding:0px;"></div>
<div id="specialmenu"> 
<ul class="blackmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Custom Link</a></li>
<li><a href="#" target="_blank">Custom Link</a></li>
<li><a href="#">Custom Link</a></li>
<li><a href="#">Custom Link</a></li>
<li><a href="#" target="_blank">Custom Link</a></li>
<li><a href="#" target="_blank">Custom Link</a></li>
</ul>
</div>
</div>
<!-- End of Required Headers -->

Extra Resources

Questions? Please check your site on as many browsers (IE, Firefox, Netscape, Opera, Safari) and platforms (PC, Mac, Lynx viewer) as possible and under many screen resolutions ranging from 800x600 to 1280x1024. The new Header has been tested and works. If you experience incompatible errors, the code may have conflicts with the existing sites styles (css). Contact Becky Simmermacher for assistance.

Be aware that font size on pages is (and should be) adjustable and many users, mature adults for example use "larger" than "normal". IE, View --> Text Size. See Animated Example (150K)

Other links you may find useful:

Self-paced Dreamweaver (+other) learning

http://validator.w3.org/

http://www.w3schools.com/default.asp

http://www.webstandards.org/

http://www.w3.org/

Why Tables Are Bad For Layout

Did you know that properly designed XHTML page with content and layout separation can have special Mobile CSS attached to it and the same content that you see on PC can be viewable on your smart phone or PDA devices? See Example - check the Personalized Section on the left and choose "Mobile/Handheld" or simply browse to that page with your mobile device

An Equal Opportunity University
University of Kentucky, College of Agriculture
Last Updated: 05/05/11