csu extension webpage template l.
Skip this Video
Loading SlideShow in 5 Seconds..
CSU Extension Webpage Template PowerPoint Presentation
Download Presentation
CSU Extension Webpage Template

Loading in 2 Seconds...

play fullscreen
1 / 61

CSU Extension Webpage Template - PowerPoint PPT Presentation

  • Uploaded on

CSU Extension Webpage Template. Working with the new Extension CSS-based template. Basics. HTML and CSS . HTML: Content (text, images, links, etc.) is surrounded by tags to “define” it <p>for paragraph</p> <h2>for a #2 headline</h2> <strong>for bold text</strong>

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSU Extension Webpage Template' - HarrisCezar

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
csu extension webpage template
CSU Extension Webpage Template

Working with the new Extension CSS-based template

html and css
  • HTML: Content (text, images, links, etc.) is surrounded by tags to “define” it
    • <p>for paragraph</p>
    • <h2>for a #2 headline</h2>
    • <strong>for bold text</strong>
  • CSS: Defines what each tag does to the content it surrounds by ascribing values to specific properties

h2 {

font-size: 100%;

color: #0021a5;


border-bottom: 1px #929292 solid;


html tag syntax
HTML tag syntax
  • Tags are applied in pairs, an opening tag and a closing tag.  Everything between the opening and closing tag is affected by the tag.
  • <h2>Everything between the opening and closing tag is affected by the tag.</h2>
  • Some tags can have attributes added to them.  The <img> tag, for instance, inserts an image onto you page.  To define the image source, the size of the image, the alt text of the image and so on, you need to use add attributes to the tag:
  • <img src="images/staff1.jpg" width="100px" height="50px" border="1px" alt="Pueblo County Extension staff">
  • Folders for 2nd level pages, CSS, Scripts and images
  • 1, 2 and 3 column templates
  • Footer SSI
  • Left column navigation SSI
  • Top of page navigation SSI
  • About Us page
  • Contact Us page
  • Home page


  • Header
  • Top nav bar
  • Left nav bar
  • Main page content
  • Footer


  • Header is in the “images” folder, named “header.jpg”
  • Width of 804px, height of 130px
  • Two hotspots: CSU logo links to CSU home, Extension logo links to Extension home
  • Shouldn’t need to manipulate this at all
  • Top nav bar a separate file pulled in by:
  • <!--#include virtual="_ssi_topnav.html" -->
  • Left nav bar pulled in by:
  • <!--#include virtual="_ssi_leftnav.html" -->
  • Footer pulled in by :
  • <!--#include virtual="_ssi_footer.html" -->
  • These are separate files, manipulated separately
  • Won’t be governed by CSS
    • Will look like a simple list
top nav bar
Top nav bar
  • Unordered list within a “topnav” div
    • <div id="topnav">
  • Home point to your index page
  • About points to your own About page
  • Contact Us points to your own Contact Us page
  • Outreach, County Offices, Directory, Employment all point to Extension sites and need not be altered
  • Google search code inside “search” div
    • <div id="search">
    • Comes after last list item, before the ending </ul>


unordered lists
Unordered lists
  • Top navigation and left navigation panels use unordered lists
  • Anchor tags are inside list tags
  • Href points to the link itself
  • Should be absolute links (will be clicked from various places in the directory structure)


<li><a href=“http://www.link1.com/”>item 1</a></li>

<li><a href=“http://www.link2.com/”>item 2</a></li>

<li><a href=“http://www.link3.com/”>item 3</a></li>

<li><a href=“http://www.link4.com/”>item 4</a></li>


  • Footer uses anchors only, no lists


absolute vs relative link paths
Absolute vs. relative link paths
  • A relative path is relative to either the current page or the root folder of the site
    • /4h/4h.shtml
    • ../4h/4h.shtml
  • An absolute path is the entire URL of a page
    • http://www.coopext.colostate.edu/wapello/4h/4h.shtml
  • Since the links will be clicked at all different levels of your directory structure, an absolute path will insure they get to the correct place
  • Root-relative would work, but Yuma doesn’t support it


google search
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
  • More>Even More>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


google search con t
Google Search (con’t)
  • Try it out, go back and make corrections if needed
  • 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
  • Change text field size to 15


left nav bar
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


left nav bar code
Left nav bar code
  • Simple unordered lists, separated by “swoosh” divs

<div id="swoosh"></div>


<li><a href="http://www.coopext.colostate.edu/comptrain/4h/4h.shtml">4-H Youth Development</a></li>

<li><a href="http://www.coopext.colostate.edu/comptrain/agri/agri.shtml">Agriculture</a></li>

<li><a href="http://www.coopext.colostate.edu/comptrain/fami/fami.shtml">Family, Home &amp; Consumer</a></li>

<li><a href="http://www.coopext.colostate.edu/comptrain/hort/hort.shtml">Horticulture</a></li>

<li><a href="http://www.coopext.colostate.edu/comptrain/mast.shtml">Master Gardener</a></li>


<div id="swoosh"></div>

  • Add your own links in between the <li> and </li> tags, using absolute links


  • Only need to change the webmaster link and the Site Map
  • Webmaster is currently linked to CSU Extension

<a href="http://www.ext.colostate.edu/contact.html">Webmaster</a>

  • Change it to your email address

<a href=“mailto:jeffrey.wood@colostate.edu">Webmaster</a>

  • 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
    • Until you get it done, you may delete the Site Map link
    • Remember to put it back on!


adding cc and subject line to email link
Adding CC and Subject line to email link
  • Basic code for email:
    • mailto:jeffrey.wood@colostate.edu
  • For CC:
    • Add ?cc=diana.laughlin@colostate.edu
  • For subject:
    • Add &Subject=website
  • Result:
    • mailto:jeffrey.wood@ColoState.edu?cc=diana.laughlin@colostate.edu&Subject=website
    • Will send email to Jeffrey Wood and a cc to Diana Laughlin, with the subject line of “website”


where it goes 1 and 2 column format
Where it goes, 1 and 2 column format
  • In 1 column template, it goes between

<div id="oneColContent“> and

</div> <!-- end oneColContent div -->

  • In 2 column format, it goes between

<div id="content-main“> and

</div> <!-- end twoColContent div -->

where it goes 3 column format
Where it goes, 3 column format
  • In three column format, the middle column content goes between

<div id="centerCol"> and

</div> <!--end centercolContent div-->

  • The right column content goes between

<div id="content-right"> and

</div> <!-- end centerCol -->

  • Content goes after the storefront button (see next slide)
storefront button
Storefront button
  • In the right column, add your content after the storefront button code to include the button

<div id="content-right"> <!-- start Content Right div -->

<!--<h3 class="gold"><a href="/pubs/pubs.html">Storefront <span class="free"><em>&amp; Free Stuff</em></span></a></h3> -->

<a href="http://www.ext.colostate.edu/pubs/garden/pubgard_all.html"><img src="images/storefront5.png" alt="Storefront" width="195" height="55" /></a>


<dt><a href="http://www.ext.colostate.edu/pubs/pubs.html">Fact Sheets &amp; Publications</a></dt>


<br />


what goes on your pages
What goes on your pages?
  • Headers (headlines)
  • Text
  • Links
  • Images
  • Bullet points
  • Tables (for basic picture/caption formating, or tabular data)
  • Block quotes
  • Boxes
  • Types of headers
    • <h1> through <h6>
    • <h2> suited for headlines within columns
    • <h2> has 2 variations:
      • class=“green”
      • class=“grand”
  • Build your own classes in CSS to tweak headers
  • Add a new .css file, don’t change existing


  • No text should be “stand alone”
    • Surround headlines with heading tags <h2></h2>,
    • Surround paragraphs with paragraph tags <p></p>,
    • Surround lists with list tags <ul><li></li></ul>
    • Surround long quotes with blockquote tags <blockquote> </blockquote>
  • Why?
    • HTML transparency: tags have “meanings” which should accurately describe what they surround
    • Tags have preformatted margins and padding, size, colors
    • Consistency
  • Use the image tag in HTML
  • <img />
  • Define the source and the size
  • <img src=“images/heron.jpg width=“233px” height=“252” />
  • Giver it alt text
  • <img src=“images/heron.jpg width=“233px” height=“252” alt=“the great blue heron” />
  • Float is left by default, float image right with class=“right”
  • <img class=“right” src=“images/heron.jpg width=“233px” height=“252” alt=“the great blue heron” />
embrace the hyperlink
Embrace the Hyperlink!
  • An href attribute within <a> tags

<a href=“http://www.w3.org”>WWW Consortium</a>

  • Packs lots of content in a small space
  • The more sites you link to, and the more sites link to you, the more “google-juice” you have
  • Gives the end-user the option of delving for more information, or continuing with the overview
  • Two good examples:
    • NASA Astronomy Picture of the Day
    • Wikipedia
micro content
  • People read books, they scan web pages
    • Use short paragraphs, short sentences
  • Pull the eye in with lots of …
    • Headers
    • Lists
    • Links
    • Blockquotes
    • Boxes to highlight content
unordered lists29
Unordered lists
  • Bullet points are pre-formatted with custom images for the bullets
  • Each column (left, main, right for a 3 column layout) has a distinct bullet point style
  • Simply use list tags, CSS does the rest

Right column

Left column

Main column

unordered list code
Unordered list code
  • Previously discussed in SSIs for left and top

<ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ul>

  • Add <a href=“#”></a> around text INSIDE the <li> tags to create a link

<li><a href=“http://www.w3.org/”>list link 1</a></li>

data definition lists 3 rd column
Data Definition lists (3rd column)
  • Allows you to “define” each list item
  • <dl>=definition list
  • <dt>=definition term
  • <dd>=definition description
  • You can have more than one <dd> per term


<dt>List item one</dt>

<dd>Description of list item one</dd>

<dt>List item two</dt>

<dd>Description of list item two</dd>

<dd>2nd Description of list item two</dd>


  • Date is the definition list item <dt>
  • Event description is the definition description <dd>


more 3 rd column options
More 3rd Column Options
  • List elements with class=“video”:
  • List elements with class=“audio”:
  • List elements with class=“nobullet”:
  • Use class box to set this option
blockquotes boxed blockquotes
Blockquotes, Boxed Blockquotes
  • Strictly, should use only with quotes
  • <blockquote></blockquote> looks like this:
  • <blockquote class=“box”> looks like this:
  • Use <strong></strong> for bold text


  • Tables are a pain to write code for
  • Best to copy existing code
  • Basics:
  • <table></table> defines the table, sets attributes
  • <tr></tr> = table row
  • <td></td> = table column
  • Set rows, put columns within rows, put content within columns
  • <table width="95%" border=“1“ cellpadding="5"> <tr> <td>thumbnail image goes here</td> <td>text goes here</td> </tr> <tr> <td>thumbnail image goes here</td> <td>text goes here</td> </tr> </table>


template layout tables
Template layout tables
  • Great for index page; allows end-user to “jump” to several extension sites/fact sheets
  • Immediately engages the end-user
  • 4 row, two column table, no border, with images on left, text on right
  • Pictures are reusable thumbnail pictures for general topic areas
  • Add linked title within <strong> tags, 1 sentence description


table exercise
Table Exercise
  • Add an h2 headline – Hot Topics
  • Add a 3 row, 2 column table
  • Width: 100%
  • No border (line outside table)
  • No padding (space inside cell)
  • No spacing (space between cells)
table exercise con t
Table Exercise con’t
  • In upper left, insert “sunflower.jpg”
  • Alt text = “Attracting butterflies to your garden”
    • Link to http://www.ext.colostate.edu/PUBS/INSECT/05504.html
  • In upper right, type “Attracting butterflies to your garden”
    • Link to http://www.ext.colostate.edu/PUBS/INSECT/05504.html
    • Bold
  • Under the title add the sentence “Add living color to your garden with butterflies!”
  • Change format to “none” – separate title from text with a line break (Enter + Shift)
table exercise con t38
Table Exercise con’t
  • Second row
  • Left
    • Image – “chiles.jpg”
    • Change the alt text to “Preparing chiles”
    • Change the link to http://www.ext.colostate.edu/Pubs/foodnut/chili_pepper.pdf
  • Right
    • Title to “Preparing Chiles for the Supper Table”
    • Link to http://www.ext.colostate.edu/Pubs/foodnut/chili_pepper.pdf
    • Text “Now that the Chile Festival is over, learn how to prepare those chiles for the table”
table exercise con t39
Table Exercise con’t
  • Third row
  • Left
    • Image – “care.jpg”
    • Change the alt text to "Caregiver Characteristics"
    • Change the link to http://www.ext.colostate.edu/pubs/consumer/10231.html
  • Right
    • Title to “Caregiver Characteristics”
    • Link to http://www.ext.colostate.edu/pubs/consumer/10231.html
    • Text “There is a great deal of variety in the characteristics of the estimated 5 to 7 million individuals caring for loved ones in a family setting.”
building a box
Building a box
  • All pages refer to general.css
  • Two options for general.css
    • 1 – house it on your own site
      • Current set-up
      • General.css
    • 2 – House it on the extension site
      • Web_general.css points to .css files on the extension server
      • Allows us to tweak the CSS and make repairs
      • Change “general.css” to “old_general.css”
      • Change ”web_general” to “general.css”
adding your own css
Adding your own css
  • Build your own CSS in a separate .css file, add link to new sheet to general.css
  • Will work with either CSS option
  • Let’s build a box!
customizing the css
Customizing the CSS
  • Right-click on css folder, new file, “new.css”
  • Add this code

.box2 {

background-color: #669966;

border: #666666 1px solid;

padding: 8px;

margin: 20px;

color: #ffffff;

font-size: 110%;


  • Add this line to the general.css

/* new box */

@import url("new.css");

add to html
Add to HTML
  • At top of page
  • In code view:

<div class=“box2”>NEW! Our County Fairbook is now available for download</div>

  • Or…
  • Type text, select text, choose insert Div tag
  • Choose “box2” in “Class” box
creating a class for a specific tag
Creating a class for a specific tag
  • Add this to the new.css
  • Will only apply to the class “green” within a blockquote tag

blockquote.green {

border-left: #669966 5px solid;

padding: 8px;

margin: 20px;

font-style: italic;

color: #66666;


  • Add class=“green” to blockquote
1 column content
1 Column Content
  • No left column navigation
    • Still has top navigation bar and footer links
    • Potentially confusing to end user, as there is no navigation panel
  • Useful for 1 page websites giving basic information, no internal navbar
  • Useful for 3rd level pages - fact sheets and documents
    • Use carefully
    • May throw end users
  • Content goes between <div id="oneColContent"> and </div> <!-- end oneColContent div -->
2 column content
2 column content
  • Allows the left nav bar, but gives you more “real estate” on the page
  • Useful page format for secondary levels of the site
  • Content goes between

<div id="content-main“> and

</div> <!-- end twoColContent div -->

directory structure
Directory Structure
  • We’ve given you 1 home page and 7 second level pages
  • Home page: index.(s)html
  • Second level pages NOT within folders:
    • About Us (abou.shtml)
    • Contact Us (cont.shtml)
  • Second level pages within folders
    • 4H (4h/4h.shtml)
    • Agriculture (agri/agri.shtml)
    • Family/Consumer (fami/fami.shtml)
    • Horticulture (hort/hort.shtml)
    • Master Gardeners (mast/mast.shtml)
  • Naming Convention: 1st 4 letters (4H is the exception)
sample site structure
Sample Site Structure

Home page (index.html)

About Us

Contact Us

2nd level pages with little upkeep





Master Gardener

2nd level pages requiring own folders

Calendars, documents, links specific to topic

Calendars, documents, links specific to topic

Calendars, documents, links specific to topic

Calendars, documents, links specific to topic

Calendars, documents, links specific to topic

changing names of files and folders
Changing names of files and folders
  • You are NOT expected to have this specific set of secondary pages
  • Copy and rename existing folders to make your own
  • Example: you need a PYN page
    • Right-click the “4H” folder, choose copy
    • Right-click, choose paste
    • Right-click new folder, choose rename, then rename it “pyn”
    • Right-click “4h.shtml“, rename it “pyn.shtml”
    • Right-click “4h_docs” folder, rename it “pyn_docs”
  • Make sure to add the new page onto your left navbar
1 st level page pathnames
1st Level Page Pathnames
  • Home page
  • 6 lines of code refer to other areas of site
    • Images:
      • <img src="images/header.jpg" width="804" height="130" usemap="#Map" />
    • SSI:
      • <!--#include virtual="_ssi_topnav.html" -->
      • <!--#include virtual="_ssi_leftnav.html" -->
      • <!--#include virtual="_ssi_footer.html" -->
    • CSS:
      • <link rel="stylesheet" href="css/general.css" media="screen" type="text/css" />
      • <link rel="stylesheet" href="css/print.css" media="print" type="text/css" />
2 nd level page path names
2nd level page path names
  • ../ has been added to beginning of path to all images, CSS and SSIs (we’ve already done the coding)
  • “Backs up” a folder to root folder
    • Images:
      • <img src=“../images/header.jpg" width="804" height="130" usemap="#Map" />
    • SSI:
      • <!--#include virtual="../_ssi_topnav.html" -->
      • <!--#include virtual="../_ssi_leftnav.html" -->
      • <!--#include virtual="../_ssi_footer.html" -->
    • CSS:
      • <link rel="stylesheet" href="../css/general.css" media="screen" type="text/css" />
      • <link rel="stylesheet" href="../css/print.css" media="print" type="text/css" />
3 nd level page path names
3nd level page path names
  • If you’re creating a new page in a new folder within an existing folder, you need to back up two levels
  • Add ../../ to beginning of path to all images, CSS and SSIs
    • Images:
      • <img src=“../../images/header.jpg" width="804" height="130" usemap="#Map" />
    • SSI:
      • <!--#include virtual="../../_ssi_topnav.html" -->
      • <!--#include virtual="../../_ssi_leftnav.html" -->
      • <!--#include virtual="../../_ssi_footer.html" -->
    • CSS:
      • <link rel="stylesheet" href="../../css/general.css" media="screen" type="text/css" />
      • <link rel="stylesheet" href="../../css/print.css" media="print" type="text/css" />
using dreamweaver s ftp
Using Dreamweaver’s FTP
  • Define the site
    • Site>New Site>Advanced tab
    • Set Category to Local info
    • Set local root folder and default images folder
    • Set Category to Remote info
    • Set Access to FTP
    • Set Host (e.g. – yuma.colostate.edu), Host Directory (e.g. WWW/), Username and Password

get files

put files



Local site

Remote site