1 / 61

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>

Download Presentation

CSU Extension Webpage Template

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. CSU Extension Webpage Template Working with the new Extension CSS-based template

  2. Basics

  3. 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; }

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

  5. 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

  6. Components

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

  8. 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

  9. SSIs • 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

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

  11. 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

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

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

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

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

  16. 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 &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> </ul> <div id="swoosh"></div> • Add your own links in between the <li> and </li> tags, using absolute links 16

  17. 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

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

  19. Main page content

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

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

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

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

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

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

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

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

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

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

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

  31. 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

  32. 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

  33. 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

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

  35. 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

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

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

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

  39. 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.”

  40. CSS

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

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

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

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

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

  46. 1 Column formats

  47. 1 Column Template

  48. 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 -->

  49. 2 column template

  50. 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 -->

More Related