Upload
ady
View
50
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Working With SSI’s (Server Side Includes). CSU Extension Webpage Template Session 4 February 2010. Components. Top nav Left nav Footer. What is an SSI?. Server Side Include A file the server includes in a web page before sending it out to a browser Usually a specific element - PowerPoint PPT Presentation
Citation preview
CSU Extension Webpage TemplateSession 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 links
Extension 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 the link box to add the URLs of the pages10
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