Web Template

1
Web Template
Using The State of California
January 16, 2007
Presented by the Office of eServices and the
Department of Technology Services
2
How to Use the Web Template
Process Overview

• Download the template package
• Create test web site
• Configure web server to process SSI
• Unpack template package to a directory
• Copy and rename the master template or one of the
  samples to create your department master template

3
How to Use the Web Template

• Build primary navigation in header include in the
  SSI folder
• Substitute your title graphic in the header
  include
• Add any additional footer information you need in
  the footer include in the SSI folder
• Configure department master template to suit your
  needs
• Test your master template

4
How to Use the Web Template

• Copy and rename department master template to
  begin creating site pages
• Change the active tab value on each page to
  reflect the appropriate navigation tab value
• Populate new pages with content
• Test the site

5
How to Use the Web Template

• Download the template package
• http//www.webtools.ca.gov/downloads/

6
How to Use the Web Template

• Create a test web site

7
How to Use the Web Template

• Configure web server to process SSI
• By default, IIS cannot process the include
  statements for a .html file
• Change the default in the application settings
  configuration
• Alternative rename files and matching references
  to .shtml or .asp
• Other web servers may vary
• Consult your web server support staff if you need
  assistance in this area

8
How to Use the Web Template

• Unpack template package to a directory
• If testing locally, you can develop directly from
  your web server directory location or develop in
  a separate directory and copy to IIS directory
  for testing
• If testing remotely, unpack to a local directory
  and ftp to remote server for testing (or set up
  your development application to use remote server
  functionality to test locally)

9
How to Use the Web Template

• Copy and rename the master template or one of the
  samples to create your department master template
• CAtemplate.html master template CA portal color
  scheme, two column content layout plus Governors
  link, Flex Your Power and Amber Alert blocks
• sample1.html master template, one column
  content area
• sample2.html master template, two column
  content area
• sample3.html master template, three column
  content area

10
How to Use the Web Template

• Build primary navigation in header include
• Include files are located in the SSI folder
• Navigation is built using an HTML unordered list

ul id"nav_list"gt ltligtlta href"/"gtHomeltspangtlt/s
pangtlt/agtlt/ligt ltligtlta href""gtLink
1ltspangtlt/spangtlt/agt ltulgt ltligtlta
href""gtLink 1 Alt/agtlt/ligt ltligtlta
href""gtLink 1 Blt/agtlt/ligt ltligtlta
href""gtLink 1 Clt/agtlt/ligt lt/ulgt lt/ligt
ltligtlta href""gtLink 2ltspangtlt/spangtlt/agt
ltulgt ltligtlta href""gtLink 2 Alt/agtlt/ligt
ltligtlta href""gtLink 2 Blt/agtlt/ligt
ltligtlta href""gtLink 2 Clt/agtlt/ligt ltligtlta
href""gtLink 2 Dlt/agtlt/ligt lt/ulgt
lt/ligt lt/ulgt
Primary list item populates tabs
List items in nested list populates the second
row of navigation
11
How to Use the Web Template

• Substitute your title graphic in the heading
  include

lta id"agency_branding" href"/"gt ltimg
src"images/CDA_New_Logo_home.jpg"
alt"California Department of Aging Logo" /gtlt/agt

• Add any additional footer information you need in
  the footer include

12
How to Use the Web Template

• Configure department master template to suit your
  needs
• Modify the document title and meta information

lt!-- Begin Document Title - Customize to fit your
needs --gt lttitlegtState of Californialt/titlegt lt!
-- End Document Title --gt lt!-- Begin Meta
Information - Customize to fit your needs --gt
ltmeta name"Author" content"State of California"
/gt ltmeta name"Description" content"" /gt
ltmeta name"Keywords" content"" /gt lt!-- End Meta
Information --gt
Document Title
Meta Information (author, description and
keywords)
13
How to Use the Web Template

• Configure department master template to suit your
  needs (continued)
• Select one or two level navigation

/ _at_import url(css/navigation_1_level.css")
/ / _at_import url(css/navigation_2_level.css")
/ _at_import url(css/navigation_2_level.css")
Navigation options available (commented out)
Navigation option selected

• Select one, two or three column content layout

/ _at_import url(css/content_1_column.css") / /
_at_import url(css/content_2_column.css") / /
_at_import url(css/content_3_column.css") /
_at_import url(css/content_2_column.css")
Column options available (commented out)
Column option selected
14
How to Use the Web Template

• Configure department master template to suit your
  needs (continued)
• Select color scheme

/ _at_import url(css/color_scheme_01_sf.css")
/ / _at_import url(css/color_scheme_02_ca.css")
/ / _at_import url(css/color_scheme_03_eureka.css"
) / / _at_import url(css/color_scheme_04_napa.css
") / / _at_import url(css/color_scheme_05_montere
y.css") / / _at_import url(css/color_scheme_06_sa
c.css") / / _at_import url(css/color_scheme_07_la
.css") / / _at_import url(css/color_scheme_08_sc.
css") / / _at_import url(css/color_scheme_09_sd.c
ss") / / _at_import url(css/color_scheme_10_oakla
nd.css") / _at_import url(css/color_scheme_02_ca
.css")
Color options available (commented out)
Color option selected
15
How to Use the Web Template

• Configure department master template to suit your
  needs (continued)
• Set the active tab value

Change this value to match the name of the page
as listed in your navigation
var defaultMainList "Home"

• Make any department-specific CSS modifications or
  additions in the ca_department.css file located
  in the css folder

16
How to Use the Web Template

• Test your master template

17
How to Use the Web Template

• Copy and rename department master template to
  begin creating site pages
• Change the active tab value on each page to
  reflect the appropriate navigation tab value

var defaultMainList Business"
var defaultMainList Education"
18
How to Use the Web Template

• Populate new pages with content

lth3gtAging Related Linkslt/h3gt ltulgt
ltligtlta href"http//www.pware.com/index.cfm?client
id2261"gtRegister for CDA Conferences lt/agtlt/ligt
ltligtlta href"aaa_business/aaa_partners_index.
html"gtAAA Partnerslt/agtlt/ligt lt/ulgt lth3gtAging
Related Linkslt/h3gt ltulgt ltligtlta
href"http//www.aoa.gov"gtAdministration on Aging
lt/agtlt/ligt ltligtlta href"links/related_links
.html"gtRelated Linkslt/agtlt/ligt lt/ulgt ltpgt
lta href"html/programs/medicare_consumers/medic
are_consumers.html"gt ltimg height"68"
alt"Link to Medicare for Consumers"
src"images/medicare4consumers.jpg"
width"113"gtlt/agt lt/pgt ltpgt lta
href"html/programs/medicare_partners/medicare_par
tners.html"gt ltimg height"68" alt"Link to
Medicare for Partners" src"images/redder_red_medi
care4consumers.jpg" width"113"gtlt/agt lt/pgt
ltpgt lta href"html/programs/ombudsman.html"gt
ltimg height"68" alt"Link to Long-Term
Care Ombudsman" src"Images/Ombi_btn_copy.jpg"
width"113"gtlt/agt lt/pgt
19
How to Use the Web Template

• Test the site

20
Tips

• Understand and use semantic coding for content
• Dont forget the double ltspangt tags in the
  navigation
• Its probably easier to insert your content then
  tweak the CSS to improve presentation for the
  first few pages rather than tweak the CSS first
• Once you understand your site structure you can
  optimize your code by making additional includes

21
Tips

• Once youve selected a color scheme, you can
  delete the other color scheme CSS and image files
  to optimize your file structure and size
• Stick with the authorized colors
• Sites need to be reviewed and approved by
  eServices before going live
• eServices is producing a policy with regard to
  web look and feel and the use of the template

22
Tips

• Troubleshooting
• Are you viewing the site via a web server?
• Did you alter the directory structure?
• Did you modify any CSS or include file names?
• Are all the files the same version number?
• Did you change or remove the doctype of the
  template?

23
How to Get Help or Provide Feedback

• For technical issues, contact the DTS Service
  Desk at 464-4311 and open a ticket
• To provide feedback
• Send an email to info_at_eservices.ca.gov