uf html template presentation
DESCRIPTION
Introduction to the html version of the website template available to University of Florida constituents.TRANSCRIPT
![Page 1: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/1.jpg)
UF HTML Template
Web Services
![Page 2: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/2.jpg)
HTML Template Overview
• Template Building Blocks• Template Pages• Template Parts• Template Help
![Page 3: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/3.jpg)
Template Building Blocks
![Page 4: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/4.jpg)
HTML5
• Better Semantic Tags• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Drag & Drop• Web SQL Databases
![Page 5: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/5.jpg)
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
![Page 6: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/6.jpg)
CSS3
• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts• Flexible Box Model
![Page 7: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/7.jpg)
CSS3 Help
• W3Schools Tutorials• CSS3 Tips Tricks & Tutorials• 70 CSS3 & HTML5 Tutorials• 12 CSS3 Tutorials• 100 CSS3 Tutorials
![Page 8: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/8.jpg)
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
![Page 9: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/9.jpg)
Modernizer Help
• Official Site• Alistapart• Polyfill Library
![Page 10: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/10.jpg)
jQuery
• HTML Traversal• Event Handling• Animation• Ajax• CSS3 Compliant• Cross Browser
![Page 11: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/11.jpg)
jQuery Help
• Official Site• Official Site Tutorials• W3Schools• 53 jQuery Tutorials• 40+ Excellent Tutorials• Tutorials for Designers• Nettuts+ Absolute Beginner Tutorials
![Page 12: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/12.jpg)
960 Grid
![Page 13: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/13.jpg)
960 Grid Help
• 960 Official Site• 960 Six Revisions• 960 Webdesigntuts+• 960 Example
![Page 14: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/14.jpg)
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
![Page 15: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/15.jpg)
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
![Page 16: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/16.jpg)
Template Pages
![Page 17: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/17.jpg)
Page
![Page 18: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/18.jpg)
Page With Roles
![Page 19: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/19.jpg)
Page With Two Columns
![Page 20: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/20.jpg)
HTML Elements Page
![Page 21: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/21.jpg)
Full Width Page
![Page 22: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/22.jpg)
Full Width Page With Two Columns
![Page 23: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/23.jpg)
Columns Page
![Page 24: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/24.jpg)
Template Parts
![Page 25: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/25.jpg)
Nav Institutional
![Page 26: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/26.jpg)
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
![Page 27: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/27.jpg)
Web Managers List
• To add yourself to a list, send an email to [email protected] 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 [email protected] with the line unsubscribe (listname)
• Ex: unsubscribe WEB-MANAGERS-L
![Page 28: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/28.jpg)
Nav
![Page 29: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/29.jpg)
Nav
![Page 30: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/30.jpg)
Nav Mega Menu
![Page 31: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/31.jpg)
Nav Mega Menu
![Page 32: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/32.jpg)
Nav Sidebar
![Page 33: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/33.jpg)
Nav Sidebar
![Page 34: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/34.jpg)
Banner
![Page 35: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/35.jpg)
Banner Logo
![Page 36: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/36.jpg)
Banner Utility Links
![Page 37: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/37.jpg)
Banner Search Bar
![Page 38: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/38.jpg)
Banner Social Networking Links
![Page 39: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/39.jpg)
Banner Notifications
![Page 40: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/40.jpg)
Stacker
![Page 41: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/41.jpg)
Stacker
![Page 42: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/42.jpg)
Stacker No Dates
![Page 43: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/43.jpg)
Slider
![Page 44: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/44.jpg)
Slider Half Width Image
![Page 45: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/45.jpg)
Slider Full Width Image
![Page 46: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/46.jpg)
Slider Without Scrubber
![Page 47: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/47.jpg)
Slide Numbers
![Page 48: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/48.jpg)
Slider Thumbs Last Item
![Page 49: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/49.jpg)
Roles
![Page 50: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/50.jpg)
Roles Purpose
• This area was intended for target audiences
![Page 51: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/51.jpg)
Roles Styles
• This area has two unique looks one for the home page and another for sub pages
![Page 52: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/52.jpg)
Roles 1 Column
![Page 53: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/53.jpg)
Roles 2 Columns
![Page 54: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/54.jpg)
Roles 3 Columns
![Page 55: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/55.jpg)
Roles 4 Columns
![Page 56: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/56.jpg)
Roles 5 Columns
![Page 57: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/57.jpg)
Widgets
![Page 58: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/58.jpg)
Widgets Purpose
• This area was intended for different types of feeds such as RSS, calendar, news, etc.
![Page 59: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/59.jpg)
Widgets Styles
• This area has a blue and a white style option• class = “homepage_layout_white”
![Page 60: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/60.jpg)
Widgets 1 Column
![Page 61: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/61.jpg)
Widgets 2 Columns Equal
![Page 62: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/62.jpg)
Widgets 2 Columns Varied
![Page 63: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/63.jpg)
Widgets 3 Columns Equal
![Page 64: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/64.jpg)
Widgets 3 Columns Varied
![Page 65: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/65.jpg)
Widgets 4 Columns
![Page 66: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/66.jpg)
Widgets 5 Columns
![Page 67: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/67.jpg)
Footer Widgets
![Page 68: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/68.jpg)
Footer Widgets Purpose
• Typically used to advertise services
![Page 69: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/69.jpg)
Footer Widgets 1 Column
![Page 70: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/70.jpg)
Footer Widgets 2 Columns
![Page 71: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/71.jpg)
Footer Widgets 3 Columns
![Page 72: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/72.jpg)
Footer Widgets 4 Columns
![Page 73: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/73.jpg)
Footer Widgets 5 Columns
![Page 74: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/74.jpg)
Footer Utility Links
![Page 75: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/75.jpg)
Footer Utility Links
• Typically used to present useful links to other pages on your site or other sites
• Also includes the global footer
![Page 76: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/76.jpg)
Footer Utility Links 1 Column
![Page 77: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/77.jpg)
Footer Utility Links 2 Columns
![Page 78: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/78.jpg)
Footer Utility Links 3 Columns
![Page 79: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/79.jpg)
Footer Utility Links 4 Columns
![Page 80: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/80.jpg)
Footer Utility Links 6 Columns
![Page 81: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/81.jpg)
Footer Global
![Page 82: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/82.jpg)
Footer Global
• Should remain relatively consistent from site to site
• Part of footer utility links
![Page 83: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/83.jpg)
Contact Webmaster
![Page 84: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/84.jpg)
Make a Gift
![Page 85: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/85.jpg)
About This Site
![Page 86: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/86.jpg)
Google Analytics
![Page 87: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/87.jpg)
Help
![Page 88: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/88.jpg)
Web Services
• Phone: (352) 273-4902• Mail: [email protected]• Walk-in: with appointment via phone or mail
![Page 89: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/89.jpg)
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
![Page 90: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/90.jpg)
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
![Page 91: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/91.jpg)
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
![Page 92: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/92.jpg)
Developer Tools
• Chrome Developer Tools• Firebug• IE Developer Tools• Seriously these tools save kittens
![Page 93: UF HTML Template Presentation](https://reader034.vdocument.in/reader034/viewer/2022051514/54b5c88b4a79595d5f8b4616/html5/thumbnails/93.jpg)
Thank You
Download HTML Templatewww.it.ufl.edu/webservices