Working with the new Extension CSS-based template

2

•
–
–
–
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; padding-left:0px; border-bottom: 1px #929292 solid;
}
3

•
•
•
•
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">
4


Folders for 2 nd 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
5

6



Header
Top nav bar

Left nav bar

Main page content
7

Footer





8









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
9








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>
10



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)
<ul>
<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>
</ul>

Footer uses anchors only, no lists
11







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
12









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
13





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
14


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
15


Simple unordered lists, separated by “swoosh” divs
<div id="swoosh"></div>
<ul>
<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">Agricult ure</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">Horticul ture</a></li>
<li><a href="http://www.coopext.colostate.edu/comptrain/mast.shtml">Master
Gardener</a></li>
</ul>
<div id="swoosh"></div>

Add your own links in between the <li> and </li> tags, using absolute links
16



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!
17






mailto:jeffrey.wood@colostate.edu

Add
?cc=diana.laughlin@colostate.edu

Add
&Subject=website

mailto:jeffrey.wood@ColoState.edu?cc=diana.laughlin
@colostate.edu&Subject=website

18

19


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 -->
20


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)
21


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>
<dl>
<dt><a href="http://www.ext.colostate.edu/pubs/pubs.html">Fact Sheets
&amp; Publications</a></dt>
</dl>
<br />
22









Headers (headlines)
Text
Links
Images
Bullet points
Tables (for basic picture/caption formating, or tabular data)
Block quotes
Boxes
23





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
24







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
25








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
”
/>
26






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
27




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
28




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
29


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>
30

rd



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
<dl>
<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>2 nd Description of list item two</dd>
</dl>
Date is the definition list item <dt>
Event description is the definition description <dd>
31

rd



List elements with class=“video”:
List elements with class=“audio”:
List elements with class=“nobullet”:

Use class box to set this option
32



Strictly, should use only with quotes
<blockquote></blockquote> looks like this:

<blockquote class=“box”> looks like this:

Use <strong></strong> for bold text
33









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>
34






Great for index page; allows end-user to “jump” to several extension sites/fact sheets
Immediately engages the enduser
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
35


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)
36






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)
37







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”
38




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
39 a family setting.”

40





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”
41




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!
42


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");
43



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
44



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
45

46

47







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 3 rd level pages - fact sheets and documents
Use carefully
May throw end users
Content goes between <div id="oneColContent"> and </div> <!-- end oneColContent div -->
48

49



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“>
</div> <!-- end twoColContent div -->
50

51





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: 1 st 4 letters (4H is the exception)
52

Home page (index.html)
About Us Contact Us
2 nd level pages with little upkeep
4H
53
Calendars, documents, links specific to topic
Agriculture Family/Consumer Horticulture
2 nd level pages requiring own folders
Calendars, documents, links specific to topic
Calendars, documents, links specific to topic
Master Gardener
Calendars, documents, links specific to topic
Calendars, documents, links specific to topic

54

•
•
•
•
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
55

st
•
•
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" />
56

nd
•
•
../ 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" -->
–
57
•
•
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" />

nd
•
•
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" />
58

59








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
60

connect refresh get files put files
62
Remote site Local site