Web Template - PowerPoint PPT Presentation

1 / 23
About This Presentation
Title:

Web Template

Description:

Create test web site. Configure web server to process SSI. Unpack template ... How to Use the Web Template. Create a test web site. How to Use the Web Template ... – PowerPoint PPT presentation

Number of Views:163
Avg rating:3.0/5.0
Slides: 24
Provided by: danew3
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com