CSU Extension Webpage Template

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> • 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; }

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

Files • 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 5

Components

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

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

SSIs • Top nav bar a separate file pulled in by: •  • Left nav bar pulled in by: •  • Footer pulled in by : •  • These are separate files, manipulated separately • Won’t be governed by CSS • Will look like a simple list

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

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

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 12

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 13

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 14

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 15

Left nav bar code • 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">Agriculture</a></li> <li><a href="http://www.coopext.colostate.edu/comptrain/fami/fami.shtml">Family, Home & 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> </ul> <div id="swoosh"></div> • Add your own links in between the <li> and </li> tags, using absolute links 16

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

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” 18

Main page content

Where it goes, 1 and 2 column format • In 1 column template, it goes between <div id="oneColContent“> and </div>  • In 2 column format, it goes between <div id="content-main“> and </div>

Where it goes, 3 column format • In three column format, the middle column content goes between <div id="centerCol"> and </div>  • The right column content goes between <div id="content-right"> and </div>  • Content goes after the storefront button (see next slide)

Storefront button • In the right column, add your content after the storefront button code to include the button <div id="content-right">   <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 & Publications</a></dt> </dl> <br /> 22

What goes on your pages? • Headers (headlines) • Text • Links • Images • Bullet points • Tables (for basic picture/caption formating, or tabular data) • Block quotes • Boxes

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

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

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

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

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 35

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 • 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’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’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.”

CSS

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

1 Column Template

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>

2 column template

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>

CSU Extension Webpage Template