Csu extension webpage template
Download
1 / 61

- PowerPoint PPT Presentation


  • 267 Views
  • Updated 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>

Related searches for

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

PowerPoint Slideshow about '' - 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 l.jpg
CSU Extension Webpage Template

Working with the new Extension CSS-based template



Html and css l.jpg
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 l.jpg
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 l.jpg
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



Components7 l.jpg
Components

  • Header

  • Top nav bar

  • Left nav bar

  • Main page content

  • Footer

7


Header l.jpg
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


Slide9 l.jpg
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


Top nav bar l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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


Footer l.jpg
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:[email protected]">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 l.jpg
Adding CC and Subject line to email link

18



Where it goes 1 and 2 column format l.jpg
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 l.jpg
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 l.jpg
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


What goes on your pages l.jpg
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 l.jpg
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


Slide25 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 3 rd column options l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Sample Site Structure

Home page (index.html)

About Us

Contact Us

2nd level pages with little upkeep

4H

Agriculture

Family/Consumer

Horticulture

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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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


Slide61 l.jpg

get files

put files

connect

refresh

Local site

Remote site

62


ad