UF/COM Web Templates

UF/COM Web Pages

IT Center Training Email: [email protected] Web Page: http://training.health.ufl.edu Diane Millican Email [email protected] 2 3 University of Florida Web Sites

University of Florida Web Sites...... 5 The UF Template page...... 6 Getting started...... 9 Behind the Scene – Looking at the HTML Code...... 10 Explaining the HTML Code...... 11 Another look at HTML - From the COM Index Page...... 12 Protect webmaster email from spam...... 16 Rotate Images...... 17 Important Information about Creating UF Web Sites...... 18 Web Graphics...... 18 University of Florida Web Administration...... 18 To request a link from the UF Home Page for a UF department or organization...... 18

4 5 University of Florida Web Sites

University of Florida has provided web page templates so that anyone creating a web site for university purposes can create pages based on the templates. This allows the web pages to have a uniform look immediately recognizable as affiliated with the University of Florida. In addition, the College of Medicine has added some bells and whistles to the UF templates and tailored the pages specifically for all entities within the College of Medicine.

These are a type of template, but they are not like what Dreamweaver calls a “template” with specific editable regions. These “templates” are more like a sample page on which to base your page. These templates come with several Cascading Style Sheets. The CSS set up specific fonts, sizes, images and colors. There are also different CSS for print and aural views of the pages.

The UF / COM templates also make use of Server Side Includes (SSIs). SSIs are pages that hold repetitive information and some small scripts for items such as a last modified date that updates automatically each time the page is saved. SSIs contain instructions for the server to process (parse) certain items before the page is displayed for the viewer. The navigation pane of the UF and COM pages are set up through SSIs, as are the headers and footers. Because each page within the web site calls the same SSI, each page will be exactly the same. Consistency in the pages in your site helps a viewer see information on your page quicker and easier.

When working with the UF / COM templates with SSIs, a couple of important facts are: 1. Even though you can see the whole page including the SSIs in Dreamweaver, you can only edit the SSI in the actual include file.

2. The pages must have a file extension that activates the server to parse the information before it sends it out to the browser. The extension we are using is .shtml. This means that if the page is not already saved as index.shtml it must be renamed. Each page must be saved with that same .shtml extension.

3. You can only preview on a browser pointing to the remote site on the public server. You can’t “preview in a browser” from the Dreamweaver program. Once the pages are created on the local machine they must be “Put” to the server.

6 The UF Template page

To download the templates http://www.webadmin.ufl.edu/templates/index.html

7 Page Views from the College of Medicine Templates index.shtml and/or primary.shtml

This is a live view, showing the index page, the header SSI, and the navigation SSI.

secondary.sh tml

This page set up shows no top image and the double entry in the navigation bar that creates the highlighting system.

8 To download the COM templates go to COM Administrative Resources. http://medinfo.ufl.edu/omi/tools/comweb/download.shtml

Server Side Includes from the COM templates

com_menu.shtml

Highlights the page the user is viewing using an “if statement” and a variable called “title”.

com_head.shtml

Creates the Header images and links.

com_foot.shtml

Creates the footer information including a webmaster contact, Copyright, Disclaimer, and last update date

9 10 Getting started The templates are available for download in a .zip file. Create the local root folder and the remote root folder. The best practice is to have both a local and a remote site. This allows two copies of your site in case something should happen to any of your files. Also you can create new pages or edit existing pages and just upload them to the server when they are completed.

Once you have your root folders created, download the file (you can download to your desktop so it will be easy to find) and unzip (extract) the files to your root folder. Make sure you have the home page, and the sub folders css, images, and includes all inside the root folder. If you have any other files for the web site move those into the root file as well. Now you are ready to define your site in Dreamweaver and start creating your web site. Define the site so that you can see all the files needed for your site.

(if the extensions are not .shtml, right click on the name of the page in the files panel and choose Edit and Rename)

Root folder

Home page and sub- folders inside the root folder

11 Behind the Scene – Looking at the HTML Code University of Florida Template Adding the Server Side Include

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sit amet leo non ligula pulvinar pulvinar.. Donec posuere elit quis justo.

Donec posuere nibh sit amet massa. Integer tincidunt, sem dapibus pellentesque blandit, turpis eros laoreet lectus, sed sagittis velit pede et orci..

Maecenas in magna eget velit laoreet fringilla. In vitae dolor eget est commodo ornare. Sed felis. Sed blandit ultrices elit..

Pellentesque massa libero, lobortis at, pharetra at, commodo sit amet, massa. Vestibulum et leo vel urna vehicula rutrum.

Link, Link, Link, Link

Explaining the HTML Code

As we look at the HTML code there are a few items that need to be addressed. The circled code is where a Server Side Include is added. Note that they are enclosed with comment tags with the structure:

This tells the server to include the file from the includes folder before sending the page to the browser.

SSI’s allow you to have one file that can be sent to all the calling pages.

Also note that several areas are enclosed with div or span tags. A div can be thought of a container for content which is formatted in a specific way. You must have a beginning and ending div tag. Each beginning div tag is assigned an id which is defined in the CSS. For example, the main part of the page is called “mainContainer”. The main container is defined in the CSS as:

#mainContainer { background: #FFFFFF url("../images/com_dropshadow.jpg") repeat-x; width: 772px; position: relative; margin-right: auto; margin-left: auto; text-align: left; padding: 0; display: block; border-top-width: 1px; border-top-style: solid; border-top-color: #b3b3b3; }

To tell the browser where to apply this information Dreamweaver puts a beginning and ending div tag. Remember div tags must be in pairs.

13 Another look at HTML - From the COM Index Page

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut faucibus mollis risus. Pellentesque tempus adipiscing dui. Integer magna velit, rhoncus id, nonummy eget, rutrum quis, metus. Proin hendrerit convallis sapien. Sed rutrum. Integer a est at lacus facilisis posuere. Fusce vel erat. Curabitur nisl turpis, fermentum ac, mollis eget, lobortis vel, diam. Vestibulum enim mauris, accumsan ac, elementum ut, imperdiet eget, lacus. Vivamus id felis. Sed in lorem ac massa ultricies accumsan. Maecenas pretium suscipit lacus. Sed elit neque, convallis eget, cursus quis, vulputate id, libero. Phasellus tempor.

Aliquam bibendum commodo purus. Cras vitae pede. Aliquam non arcu. In placerat, ipsum ac dictum feugiat, orci neque imperdiet ipsum, vel iaculis felis dui quis lacus. Morbi porttitor turpis at magna. Pellentesque tristique, felis sit amet porta scelerisque, wisi leo luctus nibh, eget aliquet sapien enim at magna. Integer id enim. Phasellus tellus. Phasellus commodo mi in nisl rutrum bibendum.. Integer pretium. Fusce eget quam vitae leo ultricies accumsan.

In this example the set variable item () has been added to prepare for the special highlighting system in the navigation or menu section for the page. Each page in the site will have a set variable for the title of the page. Also in the menu include there is a section that will look at the title variable to determine if the link is active (ie: the viewer is actually looking at that particular page) and needs to be highlighted to show that is the page currently displayed.

Anything added to the description value will show up in the head Meta tag section.

Look at the next section of HTML to see the other side of the title variable in the menu include.

14 Menu HTML

Title area for content pages Links can be deleted or duplicated as secondary headings, needed. The grey line in secondary headings, the Nav section comes from the CSS for the

tag secondary headings, and the H1 tag. secondary headings,

In this section of HTML, note the circled code and in particular the section:

This is the beginning of the “if statement” which says if the variable “title” = what is inside the / / then use the id called highlight; if not, then display as a normal link. What is inside the / / must be the same as part of the title and is case sensitive. So if the title of the page is About the College, put /About/ in the if statement exactly as it appears in the title. Do this for each pair of titles, the title on the content page and the title in the menu include file.

15 The first section (title area for the index (home) page) is a little different. There is no / / section. In the case of the home page you will not give the home page a short title. So this expression:

Head HTML

The head include also requires a small amount of input.

Short Department Title -  Long Department Title

Enter a title for the web site in this area. In the first section, on the Browser title bar the “long department title” will show when the home page is displayed. When any other page is displayed, the “short department title” will show followed by the actual content page title. You might want to put a dash and a space following the short department title to make it look nice in the browser title bar.

16 Foot HTML In the Foot section, replace “yourdomain.edu” with the host domain of your site. For example my site is located at http://www.health.ufl.edu/~dmillic/com_web/ so the host domain would be www.health.ufl.edu. Then it will print out as the full path. The foot section also has a last modified date which will update each time the page is saved.

Updated: :: Contact: Webmaster
Location: http://yourdomain.edu

The contact section can be handled in a couple of ways. It could be straight forward with the webmasters email address. However there is a CGI script available to protect against spam mail. This script will create a form so that respondents can contact the webmaster without displaying the actual web address. If you are not in the College of Medicine, you may want to contact your IT department to see if there is a CGI script in your area as well.

17 Protect webmaster email from spam

To help protect your email from spam, please use: http://medinfo.ufl.edu/cgi- bin/mailto.cgi?make= in place of the webmaster address. (Delete Mailto:webmaster)

This will come up the first time you preview your site. Decide whether you want the person sending the email to always enter their name or if that can be optional. Fill in the blanks including the confirmation text box.

This information will come up. Copy the url and paste it in place of the webmaster address.

This is the form the viewer will see when they want to write to the webmaster.

18 Rotate Images

One other option for College of Medicine is to rotate images on the home page using the College of Medicine images. This script gives a different image each time the page is accessed.

Put this image source in place of the “top image source”.

For example the original code:

The altered code including the script for rotating COM images:

19 Important Information about Creating UF Web Sites

Web Graphics *From http://www.webadmin.ufl.edu/graphics/index.html

Do not alter official UF themes, templates or graphics. Please read the disclaimer [below] before use. This collection includes graphics in the GIF, JPG, and PSD formats. Please DO NOT ALTER OFFICIAL UF TEMPLATES OR GRAPHICS except to: Add text to side bars or headers (GIF and PSD images); Change the background colors of side bars or headers (PSD images only); or Change the height of side bars (PSD images only).

Disclaimer

The name, marks and image of the University of Florida cannot be used to imply or suggest endorsement of any product or service not provided by the university. For additional information on the use of the wordmark, please refer to UF's Graphical Standards (http://www.urel.ufl.edu/standards/) and its Acceptable Use Policy (http://www.it.ufl.edu/policies/aupolicy.html). If you have any questions regarding the altering or use of these graphics or if you would like a custom graphic, please fill out the Graphic Order Form (http://www.webadmin.ufl.edu/graphics/orderForm.html). These graphics were designed or redesigned by the UF Communications Network for use by official units of the University of Florida. They include or are based on the original designs created by Brian Slawson from the School of Art and Art History.

University of Florida Web Administration Policies / Guidelines http://www.webadmin.ufl.edu/policies/

Including: Accessibility Recommendations for UF Web Sites http://www.webadmin.ufl.edu/policies/accessibility/

UF Graphic Standards Policy http://www.urel.ufl.edu/standards/graphicpolicy.html

To request a link from the UF Home Page for a UF department or organization. http://www.webadmin.ufl.edu/policies/link_register

UF/COM Web Templates

Header One

Header Two

Header

Header

Header

Header

DEPARTMENT TITLE

DEPARTMENT TITLE

PRIMARY1 HEADING

PRIMARY1 HEADING

DEPARTMENT TITLE

DEPARTMENT TITLE