CSU Extension Webpage Template, part 2
Download
Report
Transcript CSU Extension Webpage Template, part 2
CSU EXTENSION WEBPAGE
TEMPLATE, PART 2
Defining the site, Directory Structure, Meta-tags
Defining the site
Always your first step when working with
Dreamweaver
Telling DW where the Root folder is
EVERYTHING on your site must be inside this
folder – images, documents, pages
Your home page - index.shtml - is a file in this
folder (NOT in a folder inside this folder)
Setting local information
3
Site menu> New Site> Advanced tab
Category>Local info
Site name (for your use only)
Select root folder
Select Default images folder
All
.jpegs, .gifs, .pngs are copied into this folder
Link checker – actual URL
Useful
for absolute links that refer to pages/docs within
your site
Enable cache – “yes”
Setting local information (con’t)
4
Select Default images folder
All
.jpegs, .gifs, .pngs are copied into this folder
Link checker – actual URL – useful for absolute links
to refer to pages/objects within your site
Enable cache – “yes”
Setting remote information
5
Remote info you will need:
Ftp host – (e.g. – yuma. colostate.edu)
Host directory (blank, or “WWW/”)
Login – your unique login
Password – your unique login
If you choose “Save” you will forget your password, so…
When you get email from ACNS – save a paper copy,
not just the email!
Test button will test connection
Use “Firewall Settings” to work way around a firewall
Directory Structure
6
We’ve given you 1 home page and 7 second level pages
Home page: index.shtml
Second level pages NOT within folders:
About
Us (about.shtml)
Contact Us (contact.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)
The home page
7
The main page of your website
Don’t
assume folks will always enter site from here
Slightly more likely to enter from an interior page after
a search
Show site structure in Navigation bar
Index.shtml
shtml
means interaction w/server needed
.shtm works as well
Site structure and Directory structure
8
Figure out where to put your files
Logical
They
flow to pages, logical flow to files and folders
will be similar to each other
Each
second level page (topic area) has own folder
All pictures in one place (images folder)
All documents in one place (docs folder)
Each
topic area has its own doc folder
You might break it down further – e.g. by year
4h_docs09, 4h_docs10, etc.
Sample Site Structure
9
Home page (index.shtml)
About Us
Contact Us
2nd level pages with little upkeep
4H
Agriculture
Family/Consumer
Horticulture
Master Gardener
2nd level pages requiring own folders
From here, pages link to documents, calendars, other pages (remember the 3 click
rule!)
10
Changing names of files and folders
11
•
•
•
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
Metatags
Metatags contain information about the webpage
Title, descriptions, keywords that tell end-users and
search engines about the site
In Dreamweaver, the icon is in Insert Panel
Dreamweaver CS4 is good at many things, but not
Metatags, so we’ll do descriptions, keywords in the code
Title
ALL pages need a title
Shows up in title bar at very top of browser window
Stay under 64 characters or it may be truncated
They can all share one title (Wapello County
Extension) or have a specific one for each page
(Wapello County Extension Horticulture page)
Between <head> and </head> tags
<title>Colorado State University Extension</title>
Description
14
Often returned to someone using a search engine
A concise, accurate and inclusive description of your site
Under 50 words. Multiple sentences fine.
Feel free to steal from existing CSU Extension pages
Bring up page in browser, View menu, Source, then cut-andpaste into your own code
Between <head> and </head> tags
<meta name="description" CONTENT="Colorado State
University Extension is your connection to the
research, information and expertise of your landgrant university. We offer hundreds of
publications, and much much more.">
Keywords
15
Used to help search engine “spiders”define and
categorize your site
Under 50 words, phrases are fine
Needs to be specific to your page – fine tune these to
accurately describe your site
Use words already plentiful in the text
Separate words and phrases with commas
Between <head> and </head> tags
<meta name="keywords" content="Extension, Outreach,
Colorado State University, CSU, Fort Collins, CO,
environment, lawn and garden, water issues, water
conservation, soil and crop sciences" />
More about keywords
Keywords frequently used in text, headers and links
increases Google Juice
Phrases
Long tailed keywords
“printing excel 07 spreadsheets”
Misspellings
“pruning fruit trees”
“Exention” and “Extension”
Colloquial terms is addition to academic terms
“Laminitis” and “lameness”
Google Adwords
https://adwords.google.com/
Put in either keywords or actual URL
URL
is more encompassing
Allows you to look at actual data from Google
searches
Get keyword ideas
Sort by Advertiser Competition column
Find “long tailed” keywords that have low
competition on the web
Google Adsense (con’t)
“Batch resize images” is a good keyword phrase for
my site – describes content, less competition
Registering Your Site
19
Search engines will eventually find your site on their
own
To speed the process, register your site with Google
and Yahoo (biggest 2)
Google: Homepage>About Google (at
bottom)>Submit your content to Google> Add your
URL to Google
Yahoo: Homepage>Suggest a Site(at
bottom)>Submit Your Site for Free