1. Demo: Conversion to the New External Template March 29, 2007

3. Differences An all-CSS layout and web best practices No more class=“content” in every paragraph and list item. HTML elements are styled for you. Server side includes XHTML strict not HTML

4. HTML vs XHTML All tags must be closed, i.e. Tags can’t overlap, i.e. content All tags and attributes must be lowercase All attribute values must be in quotes i.e. <img src=“image.gif” height=“10”…

5. Strict vs Transitional Elements that are not allowed in Strict DOCTYPEs center font iframe strike u Attributes not allowed in Strict DOCTYPEs align (allowed on elements related to tables: col, colgroup, tbody, td, tfoot, th, thead, and tr) language background bgcolor border (allowed on table) height (allowed on img and object) hspace name (allowed in HTML 4.01 Strict, not allowed on form and img in XHTML 1.0 Strict) noshade nowrap target text, link, vlink, and alink vspace width (allowed on img, object, table, col, and colgroup)

6. Before and After Weigh In Main page: 45 KB 18 KB Inner page: 23 KB 17 KB (not including images or style sheets)

7. Other Departments DMV converted 8000 – 10,000 pages in 6 weeks. They used DW templates and converted the pages in two weeks, then spent 4 weeks making adjustments. Consumer Affairs estimates that it took them 30 minutes per page. Justice is using php for all pages instead of includes

8. Conversion Steps Clean up and reorganize your site Remove all spaces and special characters from file and folder names Make a copy of your site Download/unzip the Caltrans-ready template Select 2 or 3 column page Modify the footer to use your email address

9. Conversion Steps Change the highlighted tab if necessary Copy and paste content - or - use BK ReplaceEM text replacement tool Open each page to make needed adjustments Modify the breadcrumbs Validate your page

10. Details “ becomes " - no quotes ( or ) are allowed in text of html code becomes or add this style to the surrounding p tag or <p class=“center”… becomes or <td width=“100px; … becomes <td style=“width:100px;” … becomes

11. New styles in ca_department.css.indent { margin-left: 20px; }.red { color:#FF0000; }.img-right { float:right; }.img-left { float:left; }.floatleft { float:left; margin:.5em; }.floatright { float:right; margin:.5em; }.center { text-align:center; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-size: 1.8em; …

12. New Table Style … Better example: http://www.dot.ca.gov/bondhttp://www.dot.ca.gov/bond

13. ?