UF HTML Template 2-3-12

2,441 views
2,342 views

Published on

Introduction to the html version of the website template available to University of Florida constituents.

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,441
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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' 
  • UF HTML Template 2-3-12

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

    ×