UF/COM Web Templates

<p> UF/COM Web Pages</p><p>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</p><p>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</p><p>4 5 University of Florida Web Sites</p><p>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. </p><p>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.</p><p>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. </p><p>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.</p><p>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.</p><p>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. </p><p>6 The UF Template page</p><p>To download the templates http://www.webadmin.ufl.edu/templates/index.html </p><p>A. B.</p><p>C. D.</p><p>7 Page Views from the College of Medicine Templates index.shtml and/or primary.shtml</p><p>This is a live view, showing the index page, the header SSI, and the navigation SSI.</p><p> secondary.sh tml</p><p>This page set up shows no top image and the double entry in the navigation bar that creates the highlighting system.</p><p>8 To download the COM templates go to COM Administrative Resources. http://medinfo.ufl.edu/omi/tools/comweb/download.shtml </p><p>Server Side Includes from the COM templates</p><p> com_menu.shtml</p><p>Highlights the page the user is viewing using an “if statement” and a variable called “title”. </p><p> com_head.shtml</p><p>Creates the Header images and links.</p><p> com_foot.shtml</p><p>Creates the footer information including a webmaster contact, Copyright, Disclaimer, and last update date</p><p>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. </p><p>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. </p><p>(if the extensions are not .shtml, right click on the name of the page in the files panel and choose Edit and Rename)</p><p>Root folder</p><p>Home page and sub- folders inside the root folder</p><p>11 Behind the Scene – Looking at the HTML Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>University of Florida Template</title> <link rel="stylesheet" type="text/css" media="screen" href="css/basic.css" /> <link rel="stylesheet" type="text/css" media="print" href="css/print.css" /> <style type="text/css" media="screen"> @import "css/all.css"; @import "css/style.css"; </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> Adding the Server  Side Include</p><p><div id="mainContainer"> <div id="content"> </p><p><h4>Header One</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sit amet leo non ligula pulvinar pulvinar.. Donec posuere elit quis justo.</p> <p>Donec posuere nibh sit amet massa. Integer tincidunt, sem dapibus pellentesque blandit, turpis eros laoreet lectus, sed sagittis velit pede et orci..</p> <h4>Header Two</h4> <p>Maecenas in magna eget velit laoreet fringilla. In vitae dolor eget est commodo ornare. Sed felis. Sed blandit ultrices elit..</p> <p>Pellentesque massa libero, lobortis at, pharetra at, commodo sit amet, massa. Vestibulum et leo vel urna vehicula rutrum.</p> </div> <div id="priNav2"></p><p></p><p><h4>Header</h4> <p><a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a></p> <h4>Header</h4> <p><a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a></p> <h4>Header</h4> <p><a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a></p> <h4>Header</h4> <p><a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a>, <a href="#">Link</a></p>  </div>  </div> </body></p><p>12 </html></p><p>Explaining the HTML Code</p><p>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:</p><p></p><p>This tells the server to include the file from the includes folder before sending the page to the browser. </p><p>SSI’s allow you to have one file that can be sent to all the calling pages. </p><p>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:</p><p>#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; }</p><p>To tell the browser where to apply this information Dreamweaver puts a beginning and ending div tag. Remember div tags must be in pairs. <div> </div>. Also sometimes the beginning or ending div is in the include rather than the main document. A div tag is a block element which means it takes the object it contains out of the flow and separates it. Alternatively, a span tag is more like a bookend that just holds things together within a block. The span tag does not take the object it contains out of the flow. For an example, a paragraph tag is a block tag, but a bold tag just defines what follows. See the head section (page for a span example.</p><p>13 Another look at HTML - From the COM Index Page</p><p>  </p><p></p><p><div class="top_image"> </div></p><p><h1></h1></p><p><p> 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. </p></p><p><p>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. </p> <p> </p> </p><p> </p><p>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.</p><p>Anything added to the description value will show up in the head Meta tag section. </p><p>Look at the next section of HTML to see the other side of the title variable in the menu include.</p><p>14 Menu HTML</p><p></div></p><p><div id="menu"> Title area for  index <h1><a href="index.shtml">DEPARTMENT TITLE</a></h1>  (home) page <h1>DEPARTMENT TITLE</h1> </p><p> <span id="menu_highlight"><h2>PRIMARY1 HEADING</h2></span>  <h2><a href="primary.shtml">PRIMARY1 HEADING</a></h2>  <p> Title area for content pages Links can be deleted or  duplicated as <span id="menu_highlight">secondary headings</span>, needed.  The grey line in <a href="secondary.shtml">secondary headings</a>, the Nav section  comes from the CSS for the <p>  tag <span id="menu_highlight">secondary headings</span>, and the H1 tag.  <a href="secondary.shtml">secondary headings</a>, </p></p><p>In this section of HTML, note the circled code and in particular the section:</p><p></p><p>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.</p><p>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:  <h1><a href="index.shtml">DEPARTMENT TITLE</a></h1>  <h1>DEPARTMENT TITLE</h1>  is saying if the page has a variable “title” then display a link; if there is no variable “title” then display just a normal h1 title in the menu. So when the home page is displayed there is no link for the home page. Whenever another page (a content page) is displayed those pages have a title variable so the link for the home page will be available. </p><p>Head HTML</p><p>The head include also requires a small amount of input.</p><p> <title>Short Department Title - </title>  <title>Long Department Title</title> </p><p>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. </p><p><div id="header"> <div class="com_logo"><a href="http://www.med.ufl.edu/">College of Here the span tag is used Medicine<span></span></a></div> as a container for the <div class="uf_logo"><a href="http://www.ufl.edu/">University of header. The span tag is Florida<span></span></a></div> defined in CSS as having </div> a background image and #header .com_logo a span{ it is inserted where the background-image: url("../images/com_com_top.gif"); span tag is. top:0; left:0; display:block; position:absolute; width: 305px; height: 40px; margin:0; padding:0; font-size: 1px; cursor: pointer; }</p><p>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. </p><p><div id="footer"> <p> <a href="http://www.ufl.edu/"></a></p><p>Updated:  :: Contact: <a href="mailto:[email protected]" target="_blank">Webmaster</a> <br /> Location: http://yourdomain.edu <br /></p><p><a href="http://www.med.ufl.edu/about/disclaim.shtml">Disclaimer and Permitted Use</a> :: © 2005 University of Florida</p> </div></p><p>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.</p><p>17 Protect webmaster email from spam</p><p>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)</p><p>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. </p><p>This information will come up. Copy the url and paste it in place of the webmaster address.</p><p>This is the form the viewer will see when they want to write to the webmaster.</p><p>18 Rotate Images</p><p>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.</p><p>Put this image source in place of the “top image source”.</p><p></p><p>For example the original code:</p><p></p><p><div class="top_image"></p><p></p><p></div></p><p>The altered code including the script for rotating COM images:</p><p></p><p><div class="top_image"></p><p> </p><p></div></p><p>19 Important Information about Creating UF Web Sites</p><p>Web Graphics *From http://www.webadmin.ufl.edu/graphics/index.html </p><p>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). </p><p>Disclaimer</p><p>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.</p><p>University of Florida Web Administration Policies / Guidelines http://www.webadmin.ufl.edu/policies/ </p><p>Including: Accessibility Recommendations for UF Web Sites http://www.webadmin.ufl.edu/policies/accessibility/ </p><p>UF Graphic Standards Policy http://www.urel.ufl.edu/standards/graphicpolicy.html </p><p>To request a link from the UF Home Page for a UF department or organization. http://www.webadmin.ufl.edu/policies/link_register </p><p>20</p>

UF/COM Web Templates

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support