Transcript Setting Up a Website, Start to Finish

CSU Extension Webpage Template
Session 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
3
where you put it!
 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

6
Description: returned to end-user during a
Google search
• Existing one is fine
 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?

10
Should rarely need updating
 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
 Footer
13
 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
16
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
17
the link box to add the URLs of the pages
 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
Remote site
get files
put files
Local site
21