Transcript Slide 1
Working With SSI’s (Server Side Includes) Working With Websites Session 3 November 2011 Components • Top nav (_ssi_topnav.html ) • Left nav (_ssi_leftnav.html ) • Footer (_ssi_footer.html) What is an SSI? • Server Side Include • A file the server includes in a web page before sending it out to a browser • The extension .shtml tells the server it needs to perform some sort of action • 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 • Add a new link to the left nav bar, all pages will get the new link SSI Files • 3 files pulled into every webpage • _ssi_topnav.html = top navigation bar • _ssi_leftnav.html = left navigation bar • _ssi_footer.html = footer • These are separate files, manipulated separately • E.g. - to change the left navigation bar, bring up ssi_leftnav.html • It won’t look the same (no CSS to format it) • Will look like a simple list • REMEMBER: webpages are .shtml; SSIs are .html Top nav bar • Home points to your index page • About points to your own About page (usually) • Contact Us points to your own Contact Us page (usually) • 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 Absolute vs. relative link paths • Since the SSI links will be clicked at different levels of your directory structure, use absolute paths Home = actual website URL E.g. - http://www.extension.colostate.edu/fremont/ About us = URL + about.shtml E.g. - http://www.extension.colostate.edu/fremont/about.shtml Contact Us = URL + contact.shtml E.g. - http://www.extension.colostate.edu/fremont/contact.shtml Easiest way: set relative link, copy-and-paste URL in front of it 6 Google Search • 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 • You can create searches of multiple URLs • Video tutorial at: • http://www.ext.colostate.edu/vid_tutorials/goog_search .html 7 Left nav bar • 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 8 Left nav bar links • 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 link text to whatever you like for each second level page (just type it in) • Use absolute links! • E.g. - http://www.extension.colostate.edu/fremont/4h/4h.shtml • Use the link box to add the URLs of the pages Footer • All links stay linked to CSU except Webmaster link and Site Map • Change Webmaster to your email address with email link icon 10 Footer (con’t) • 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! 11 Adding a New Topic Area • Take an existing folder>Right-click>Edit>Duplicate • F2 to rename folder, interior page, interior doc folder • E.g. – For Land Management, rename folder “land”, rename page “land.shtml,” rename docs folder “land_docs” • Make sure page ends with .shtml • Delete existing page content and replace • Add absolute link to _ssi_leftnav.html