csu extension webpage template session 8 april 2010
TRANSCRIPT
![Page 1: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/1.jpg)
CSU Extension Webpage TemplateSession 8
April 2010
![Page 2: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/2.jpg)
Get organized Put all your web materials in one spot Text for pages
• Edit down - be concise!• People read books, they scan web pages
Images/Logos (1 per page a good rule)• Smallest reasonable size (250px-300px wide)
Lists of links• Good way to present a lot of information
quickly
![Page 3: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/3.jpg)
Go to: http://www.coopext.colostate.edu/comptrain/
Use either link• The first requires Winzip
Unzip it by clicking file The root folder will be:
• “2010-ExtensionWebTemplate”• Root folder is where everything in your site
goes (images, pages, documents) Remember where you put it!
3
![Page 4: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/4.jpg)
Open Dreamweaver• Sites>New Site>Advanced tab
Local info:• Site name: for your own use• Local root folder: browse to your 2010-
ExtensionWebTemplate folder• Default images folder: browse to “Images”
folder• All links should be document-relative
4
![Page 5: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/5.jpg)
Remote info:• Access: FTP• FTP host: in most cases, yuma.colostate.edu• Host directory: in most cases, WWW/• Login and password: you’ll receive them via
mail• Click Test to see if the connection is made
5
![Page 6: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/6.jpg)
Each page needs a title, keywords, description
Title: Shows up in title bar at very top of browser window• All pages can share same title• CHANGE it from generic CSU Extension
Keywords: particularly important• Accurate, succinct, specific; phrases are fine• Separate with commas, stay under 50 words • Reflect actual text/link text/heading text used on your
pages Description: returned to end-user during a
Google search• Existing one is fine6
![Page 7: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/7.jpg)
Dreamweaver good at many things, but not Metatags
Go directly into the code Title is between <title></title> Keywords are after:
• <meta name="keywords“ Description is after:
• <meta name="description“ Global search-and-replace a fast solution
• Edit>Find and replace• Search entire document, search source code
![Page 8: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/8.jpg)
Use middle column to jump to multiple content areas
Table format allows you to put up thumbnails, short description that link to factsheets, documents, other sites
Thumbnails: 75px x 75 px• Several included in template, or • Make your own
Update page AT LEAST quarterly, preferably monthly
8
![Page 9: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/9.jpg)
Use right column for links to sites, newsletters, fact sheets, upcoming events
Headings are h3• Use H3 heading in Format box in Property Inspector
Lists are preformatted• Use unordered list icon in Property Inspector
Create link in Link box of Property Inspector• Cut-and-paste URL• Browse or point to document/page
9
![Page 10: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/10.jpg)
Basic contact info• Address• Directions
Link to Google map?• Phone number• Email• Picture?
Should rarely need updating
10
![Page 11: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/11.jpg)
Already has generic info about CSU Extension
Probably want to replace it with info specific to your County Office
You can use it “as is”
11
![Page 12: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/12.jpg)
4H, Agriculture, Family/Consumer, Horticulture, Master Gardeners• You can add/delete/change these content
areas We’ll work with 2 column format
• Image• Text and links
If you have enough content, you can use the 3 column format• Also put up a side column with as table
12
![Page 13: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/13.jpg)
Top nav
Left nav
Footer13
![Page 14: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/14.jpg)
Home points 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 CSU Extension sites and need not be altered
Google Site Search searches CSU Extension site
14
![Page 15: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/15.jpg)
Since the SSI links will be clicked at all different levels of your directory structure, an absolute path will insure they get to the correct place• Home = actual website URL
E.g. - http://www.coopext.colostate.edu/comptrain/
• About us = URL + about.shtml E.g. -
http://www.coopext.colostate.edu/comptrain/about.shtml
• Contact Us = URL + contact.shtml E.g. -
http://www.coopext.colostate.edu/comptrain/contact.shtml
15
![Page 16: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/16.jpg)
Your links to pages on your own site
Swooshes• Use to separate sets of
links
Extension links
16
![Page 17: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/17.jpg)
Simple unordered lists, separated by “swoosh” divs
Only top section are your links• Below yours are CSU Extension links
Use absolute links!• E.g. -
http://www.coopext.colostate.edu/comptrain/4h/4h.shtml Use the link box to add the URLs of the
pages
17
![Page 18: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/18.jpg)
All stays linked to CSU but Webmaster link and Site Map
Change Webmaster to your email address with email link icon
18
![Page 19: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/19.jpg)
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 Increases Google Juice
Helps the end user see the entire site in one click
• Until you get it done, you may delete the Site Map link
• Remember to put it back on!
19
![Page 20: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/20.jpg)
Use “Expand” icon to see local and remote simultaneously•Always expand before
uploading or downloading files
20
![Page 21: CSU Extension Webpage Template Session 8 April 2010](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a3e04550346cb358b550b/html5/thumbnails/21.jpg)
connect get files put files
Remote site Local site21