1. CSU Extension Webpage Template Session 8 April 2010

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

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

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

5. Remote info: Access: FTP FTP host: in most cases, yuma.colostate.edu Host directory: in most cases, WWW/ Login and password: youll receive them via mail Click Test to see if the connection is made 5

6. 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 fine 6

7. Dreamweaver good at many things, but not Metatags Go directly into the code Title is between 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

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

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

10. Basic contact info Address Directions Link to Google map? Phone number Email Picture? Should rarely need updating 10

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

12. 4H, Agriculture, Family/Consumer, Horticulture, Master Gardeners You can add/delete/change these content areas Well 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

13. Top nav Left nav Footer 13

14. 8 - Top nav bar 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

15. Absolute vs. relative link paths 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

16. 9 - Left nav bar Your links to pages on your own site Swooshes Use to separate sets of links Extension links 16

17. Left nav bar links 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

18. 10 - Footer All stays linked to CSU but Webmaster link and Site Map Change Webmaster to your email address with email link icon 18

19. Footer (cont) 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

20. Use Expand icon to see local and remote simultaneously Always expand before uploading or downloading files 20

21. connectget filesput files Remote site Local site 21