UF HTML Template

Web Services

HTML Template Overview

• Template Building Blocks• Template Pages• Template Parts• Template Help

Template Building Blocks

Lynda

• Lynda is an online training resource partner of UF and is free to all faculty, staff, and students

• Over 1,100 courses, covering topics such as HTML, CSS, Photoshop, Illustrator, JavaScript, and jQuery to name but a few

• Go to http://it.ufl.edu/training and click the Lynda logo to access the free University of Florida log-in

HTML5

• Better Semantic Tags• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Drag & Drop• Web SQL Databases

HTML5 Help

• W3schools Tutorials• HTML5 Readiness• HTML5 Rocks• HTML5 Logo & Examples• HTML5 Boilerplate• 22 Handy HTML5 & CSS3 Tutorials• 28 Ultimate HTML5 & CSS3 Tutorials• 15 HTML5 Tutorials & Cheat Sheets• html5tutorial

CSS3

• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts• Flexible Box Model

CSS3 Help

• W3Schools Tutorials• CSS3 Tips Tricks & Tutorials• 70 CSS3 & HTML5 Tutorials• 12 CSS3 Tutorials• 100 CSS3 Tutorials

Modernizr

• A JavaScript library that makes this template viewable in browsers that do not support the new HTML5 semantic elements

• Tests over 40 next-generation HTML5 and CSS3 features• Creates a JavaScript object (named Modernizr) that

contains the results of these tests as boolean properties• It adds classes to the html element that explain precisely

what features are and are not natively supported• It provides a script loader so you can use polyfills

Modernizer Help

• Official Site• Alistapart• Polyfill Library

jQuery

• HTML Traversal• Event Handling• Animation• Ajax• CSS3 Compliant• Cross Browser

jQuery Help

• Official Site• Official Site Tutorials• W3Schools• 53 jQuery Tutorials• 40+ Excellent Tutorials• Tutorials for Designers• Nettuts+ Absolute Beginner Tutorials

960 Grid

960 Grid Help

• 960 Official Site• 960 Six Revisions• 960 Webdesigntuts+• 960 Example

Chrome Frame

• Allows you to render web pages viewed in Internet Explorer (IE6-IE9) as if you were using Google Chrome

• Gives you access to HTML5 & CSS3 features supported by Chrome

• Give you Chrome’s performance and security features without in any way interrupting your browsing experience

• When Google Chrome Frame is installed, the web just gets better for IE users on Chrome Frame enabled sites

Server Side Includes (SSI)

• Files must be on a server that supports SSI such as Apache or IIS or you will get a blank page

Template Pages

Page

Page With Roles

Page With Two Columns

HTML Elements Page

Full Width Page

Full Width Page With Two Columns

Columns Page

Template Parts

_includes

index.html

Nav Institutional

Nav Institutional

• Intended to be universal across all sites• Updates may occur from time to time• Downloading and updating Nav Institutional will

be your responsibility• Notifications will occur via WEB-MANAGERS-L

list-serv• Changes to any part of template will generate a

notification to WEB-MANAGERS-L list-serv

Web Managers List

• To add yourself to a list, send an email to listserv@lists.ufl.edu with the line subscribe (listname) (your first name) (your last name)

• Ex: subscribe WEB-MANAGERS-L Jane Doe• To remove yourself from a list, send a piece of

email to listserv@lists.ufl.edu with the line unsubscribe (listname)

• Ex: unsubscribe WEB-MANAGERS-L

Nav

Nav

Nav Mega Menu

Nav Mega Menu

Nav Sidebar

Nav Sidebar

Banner

Banner Logo

Banner Utility Links

Banner Search Bar

Banner Social Networking Links

Banner Notifications

Stacker

Stacker

Stacker No Dates

Slider

Slider Half Width Image

Slider Full Width Image

Slider Without Scrubber

Slide Numbers

Slider Thumbs Last Item

Roles

Roles Purpose

• This area was intended for target audiences

Roles Styles

• This area has two unique looks one for the home page and another for sub pages

Roles 1 Column

Roles 2 Columns

Roles 3 Columns

Roles 4 Columns

Roles 5 Columns

Widgets

Widgets Purpose

• This area was intended for different types of feeds such as RSS, calendar, news, etc.

Widgets Styles

• This area has a blue and a white style option• class = “homepage_layout_white”

Widgets 1 Column

Widgets 2 Columns Equal

Widgets 2 Columns Varied

Widgets 3 Columns Equal

Widgets 3 Columns Varied

Widgets 4 Columns

Widgets 5 Columns

Footer Widgets

Footer Widgets Purpose

• Typically used to advertise services

Footer Widgets 1 Column

Footer Widgets 2 Columns

Footer Widgets 3 Columns

Footer Widgets 4 Columns

Footer Widgets 5 Columns

Footer Utility Links

Footer Utility Links

• Typically used to present useful links to other pages on your site or other sites

• Also includes the footer global

Footer Utility Links 1 Column

Footer Utility Links 2 Columns

Footer Utility Links 3 Columns

Footer Utility Links 4 Columns

Footer Utility Links 6 Columns

Footer Global

Footer Global

• Should remain relatively consistent from site to site

• Part of footer utility links

Contact Webmaster

Make a Gift

About This Site

Google Analytics

Help

Web Services

• Phone: (352) 273-4902• Mail: webmaster@ufl.edu• Walk-in: with appointment via phone or mail

Tutorials

• We have a number of tutorials ranging from changing menus to changing layout options for various areas

• Go to www.it.ufl.edu/webservices and click on the tutorials link to view the tutorials we have

Lynda

• Lynda is an online training resource partner of UF and is free to all faculty, staff, and students

• Over 1,100 courses, covering topics such as HTML, CSS, Photoshop, Illustrator, JavaScript, and jQuery to name but a few

• Go to http://it.ufl.edu/training and click the Lynda logo to access the free University of Florida log-in

Sample Sites

• webservices.ahc.ufl.edu• shcc.ufl.edu• plastic.surgery.ufl.edu• radonc.med.ufl.edu• egh.phhp.ufl.edu• phhp.ufl.edu• cancer.ufl.edu• vetmed.ufl.edu

Developer Tools

• Chrome Developer Tools• Firebug• IE Developer Tools• Seriously these tools save kittens

Thank You

Download HTML Template orHTML Presentation

www.it.ufl.edu/webservices