UF HTML Template 2-3-12
•Download as PPTX, PDF•
1 like•1,518 views
Introduction to the html version of the website template available to University of Florida constituents.
Recommended
More Related Content
What's hot
What's hot (17)
Similar to UF HTML Template 2-3-12
Similar to UF HTML Template 2-3-12 (20)
Recently uploaded
Recently uploaded (20)
UF HTML Template 2-3-12
- 1. UF HTML Template Web Services
- 2. HTML Template Overview • Template Building Blocks • Template Pages • Template Parts • Template Help
- 4. 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
- 5. HTML5 • Better Semantic Tags • New Attributes • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Drag & Drop • Web SQL Databases
- 6. 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
- 7. CSS3 • New Selectors • New Properties • Animations • 2D/3D Transformations • Rounded Corners • Shadow Effects • Downloadable Fonts • Flexible Box Model
- 8. CSS3 Help • W3Schools Tutorials • CSS3 Tips Tricks & Tutorials • 70 CSS3 & HTML5 Tutorials • 12 CSS3 Tutorials • 100 CSS3 Tutorials
- 9. 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
- 10. Modernizer Help • Official Site • Alistapart • Polyfill Library
- 11. jQuery • HTML Traversal • Event Handling • Animation • Ajax • CSS3 Compliant • Cross Browser
- 12. jQuery Help • Official Site • Official Site Tutorials • W3Schools • 53 jQuery Tutorials • 40+ Excellent Tutorials • Tutorials for Designers • Nettuts+ Absolute Beginner Tutorials
- 13. 960 Grid
- 14. 960 Grid Help • 960 Official Site • 960 Six Revisions • 960 Webdesigntuts+ • 960 Example
- 15. 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
- 16. 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
- 17. Template Pages
- 18. Page
- 19. Page With Roles
- 20. Page With Two Columns
- 22. Full Width Page
- 23. Full Width Page With Two Columns
- 24. Columns Page
- 25. Template Parts
- 26. _includes
- 27. index.html
- 29. 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
- 30. 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
- 31. Nav
- 32. Nav
- 33. Nav Mega Menu
- 34. Nav Mega Menu
- 35. Nav Sidebar
- 36. Nav Sidebar
- 37. Banner
- 38. Banner Logo
- 41. Banner Social Networking Links
- 43. Stacker
- 44. Stacker
- 45. Stacker No Dates
- 46. Slider
- 47. Slider Half Width Image
- 48. Slider Full Width Image
- 50. Slide Numbers
- 51. Slider Thumbs Last Item
- 52. Roles
- 53. Roles Purpose • This area was intended for target audiences
- 54. Roles Styles • This area has two unique looks one for the home page and another for sub pages
- 55. Roles 1 Column
- 56. Roles 2 Columns
- 57. Roles 3 Columns
- 58. Roles 4 Columns
- 59. Roles 5 Columns
- 60. Widgets
- 61. Widgets Purpose • This area was intended for different types of feeds such as RSS, calendar, news, etc.
- 62. Widgets Styles • This area has a blue and a white style option • class = “homepage_layout_white”
- 63. Widgets 1 Column
- 64. Widgets 2 Columns Equal
- 65. Widgets 2 Columns Varied
- 66. Widgets 3 Columns Equal
- 67. Widgets 3 Columns Varied
- 70. Footer Widgets
- 71. Footer Widgets Purpose • Typically used to advertise services
- 72. Footer Widgets 1 Column
- 73. Footer Widgets 2 Columns
- 74. Footer Widgets 3 Columns
- 75. Footer Widgets 4 Columns
- 76. Footer Widgets 5 Columns
- 78. Footer Utility Links • Typically used to present useful links to other pages on your site or other sites • Also includes the footer global
- 79. Footer Utility Links 1 Column
- 80. Footer Utility Links 2 Columns
- 81. Footer Utility Links 3 Columns
- 82. Footer Utility Links 4 Columns
- 83. Footer Utility Links 6 Columns
- 84. Footer Global
- 85. Footer Global • Should remain relatively consistent from site to site • Part of footer utility links
- 87. Make a Gift
- 88. About This Site
- 89. Google Analytics
- 90. Help
- 91. Web Services • Phone: (352) 273-4902 • Mail: webmaster@ufl.edu • Walk-in: with appointment via phone or mail
- 92. 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
- 93. 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
- 94. 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
- 95. Developer Tools • Chrome Developer Tools • Firebug • IE Developer Tools • Seriously these tools save kittens
- 96. Thank You Download HTML Template or HTML Presentation www.it.ufl.edu/webservices
Editor's Notes
- A CSS framework created to make web development faster and easierAccounts for various browser quirksVisually pleasing margins and grid structureUse the classes span-1, span-2, span-3, etc. to set your column widthsIf you want to fill a page horizontally, make sure the numbers add up to 24 (span-8 + span-8 + span-8 = 24) (3col 20px gutters 10px edges)In this template you will find places where that is not necessarily trueFor example in the widgets area you will need to add alpha to each of your span-8’s to achieve desired resultsUse the push and pull classes to independently position items on the page, regardless of their position in your page’s markupUse the prefix and suffix classes to create empty spaces in your layoutUse the alpha and omega to fix the margins for any nested grid units
- Check this box to replace the default slider with the Story StackerThis will completely replace the slider and the previous two options do not applyUpload images using the “Set featured image” option the same way as with the half width and full width options
- Check this box to replace the default slider with the Story StackerThis will completely replace the slider and the previous two options do not applyUpload images using the “Set featured image” option the same way as with the half width and full width options
- Once a category is chosen the posts from the category will be show in a slider on the homepageNumber of Posts to Display in Slider:This option sets how many posts will be shown in the sliderPosts are always shown in reverse chronological orderThis option only affects the slider, the Story Stacker option is fixed at 3 postsThe half width image slider will use half of the slider area for an image and the other half of the area for title and excerpt textThe image is uploaded to each post by clicking on “Set featured image” in the post edit screenUse the media uploader dialog box to upload your image and then click on “Use as featured image”
- Once a category is chosen the posts from the category will be show in a slider on the homepageNumber of Posts to Display in Slider:This option sets how many posts will be shown in the sliderPosts are always shown in reverse chronological orderThis option only affects the slider, the Story Stacker option is fixed at 3 postsTo use the full width image option, upload the image using the “Set featured image” option the same way as with the half width imageUnder the Post editor is the Featured Content Slider Options panelCheck the box labeled “Full Width Image” in order to use the Full Width optionBy default the title of the Post and the excerpt will be overlaid on the image with a dark black background To disable this option check the box labeled “Disable Image Captions” in the Featured Content Slider Options box
- Check this box to disable the timeline scrubber underneath the sliderDefault is unchecked
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember that the .span-6, .span-8, .span-12, and .span-16 classes are overwritten for the widgets areaHowever you can still combine these classes along with alpha to achieve desired resultsThis appears to be done to achieve 10px rather than 20px gutters between widgetsWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
- Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
- Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
- Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
- This is for Google Analytics trackingEnter the domain’s account number here and the tracking code will be inserted into the websiteUses one of the following formats: 'UA-xxxxxxx-x‘'UA-xxxxxxx-xx'