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