Transcript Slide 1

CSU Extension Webpage Template
Session 4
February 2010
 Top
nav
 Left
nav
 Footer
 Server
Side Include
 A file the server includes in a web page
before sending it out to a browser
 Usually a specific element
• Header, navigation panel, counter
VERY useful because you only need to
change one file
 Every page using that element picks up
the update

3
files pulled into every webpage
• _ssi_topnav.html = top navigation bar
• _ssi_leftnav.html = left navigation bar
• _ssi_footer.html = footer
 Change the file, every page updates
 These are separate files, manipulated
separately
• E.g. - to change the left navigation bar, bring up
ssi_leftnav.html
• Won’t be governed by CSS, so won’t look the same
• Will look like a simple list
4
 Home
points to your index page
 About points to your own About page
(eventually)
 Contact Us points to your own Contact Us
page (eventually)
 Outreach, County Offices, Directory,
Employment all point to CSU Extension
sites and need not be altered
 Google Site Search searches CSU
Extension site
• Once published, you can have it search your own
5
 Since
the SSI links will be clicked at all
different levels of your directory structure, an
absolute path will insure they get to the
correct place
• Home = actual website URL
 E.g. - http://www.coopext.colostate.edu/comptrain/
• About us = URL + about.shtml
 E.g. http://www.coopext.colostate.edu/comptrain/about.shtml
• Contact Us = URL + contact.shtml
 E.g. http://www.coopext.colostate.edu/comptrain/contact.shtml
6
 Currently
points to Extension site search
• You can leave it that way!
 To
customize, register with Google (email
address, password)
• Site need to be up before you can create a custom
search
 Custom
Search>Create a Custom Search Engine
• Name, Description, Keywords, Language
• Choose “Only sites I want”
• Type in your site URL (or multiple URLs)
• Choose Standard Edition, no ads
7
 Click
Finish and you will be emailed a link
to code to put into the top navbar
 Cut and paste the code within the “search”
div of the top navbar
 Delete the last line of Google code
 It begins <link rel=“stylesheet”
8
 Your
links to pages on your
own site
 Swooshes
• Use to separate sets of links
 Extension
 Extension
links
links are already
set, so just set your own
9
 Simple
unordered lists, separated by “swoosh”
divs
 Only top section are yours
• Upper left is PRIME real estate
• Below yours are CSU Extension links
 Change
text to whatever you like for each
second level page
 Use absolute links!
• E.g. - http://www.coopext.colostate.edu/comptrain/4h/4h.shtml
 Use
10
the link box to add the URLs of the pages
 All
stays linked to CSU but Webmaster link
and Site Map
 Change Webmaster to your email address
with email link icon
11
 Site
Map is a little more complicated
• Once you site is fully populated, you need a Site
Map
• One page laying out your site structure
 Increases Google Juice
Helps the end user see the entire site in one click
• Until you get it done, you may delete the Site
Map link
• Remember to put it back on!
12