CSU Extension Webpage TemplateSession 8

April 2010

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

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

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

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

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

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

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

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

Basic contact info• Address• Directions

Link to Google map?• Phone number• Email• Picture?

Should rarely need updating

10

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

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

Top nav

Left nav

Footer13

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

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

Your links to pages on your own site

Swooshes• Use to separate sets of

links

Extension links

16

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

All stays linked to CSU but Webmaster link and Site Map

Change Webmaster to your email address with email link icon

18

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

Use “Expand” icon to see local and remote simultaneously•Always expand before

uploading or downloading files

20

connect get files put files

Remote site Local site21