Transcript CSU Extension Webpage Template

CSU Extension Webpage
Template
Part 1: Template components / Using the Dreamweaver
workspace
Schedule










Jan 13 : Template components; Dreamweaver workspace
Jan 20 – Directory structure, defining the site; metatags
Feb 3 – Adding text, images, links
Feb 17 – Working with Server Side Includes (SSIs)
March 3 – Microcontent
March 17 – Working with tables
April 7 – 2nd level page content
April 21 – Named anchors
May 5 – Writing your own CSS
May 19 – Using Google Analytics
What is Dreamweaver?






3
WYSIWYG (What You See Is What You Get) Web
page editor
Writes code for web pages
You lay out images, text, lists, links, tables
Dreamweaver writes underlying code
Code is called HTML
 CSS is in the background
Dreamweaver is a good way to learn HTML (split
view between design view and code view)
What is HTML?



Hyper Text Markup Language
Common language understood by all browsers
Translated differently by different browsers


Test on multiple browsers!
View, Page source (Firefox) or Source (IE) to see HTML
code for any given page
4
HTML tags
•
Tags usually applied in pairs: opening tag and closing
tag. Everything between the opening and closing tag is
affected by the tag;
<h2>Everything between the opening and
closing tag is affected by the tag.</h2>
• Some tags can have attributes added to them. The <img> tag, for
instance, inserts an image, amnd attributes define image source,
image size, alt text for the image, etc.:
<img src="images/staff1.jpg" width="100px"
height="50px" border="1px" alt="Pueblo
County Extension staff“ />
 O’Reilly reference (Window, Reference) will tell you about any
tag you highlight
5
Browsers

Need to preview your site in several browsers
 IE 7, 8 (27% of market*)
 Firefox 1, 2, 3 (47%*)
 IE 6 (12%*) (tough browser!)
 Chrome (7%*)
 Others (under 4% each*): Safari, Opera, NN 4

Dreamweaver allows you to quickly preview
your page on the fly in 2 browsers – generally
Firefox and IE

6
F12, Ctrl + F12
*Numbers from W3 Schools – Sept. 09
What is a web site?




Collection of files and folders on a server computer
 Files are written in HTML
 Server computer is the one people visit when they go to your
site
Two sites involved in building site:
 Local site - on your computer
 Remote site - on a server
Your computer talks to Remote server using FTP (File Transfer
Protocol)
 Local site a mirror image of remote site
The root folder contains all the files and folders of the site
 Move the root folder, you move the site
7
SSIs


Each page pulls in three SSI (Server Side Include) files
automatically
Change the SSI, that change is reflected on every page

_ssi_topnav.html


_ssi_leftnav.html



The left navigation bar (mostly your own links)
We give you 5 suggested topic areas., but you can change them to
whatever you like
_ssi_footer.html

8
The top navigation bar (mostly links to the state Extension site)
The footer (mostly links to the state Extension site)
Components
Header
Top Navbar
(_ssi_topnav.html)
Left Navbar
(_ssi_leftnav.html)
Middle column
Right column
Footer
(_ssi_footer.html)
9
2nd level page

Not split into
middle and right
columns
10
Downloading the files

http://www.coopext.colostate.edu/comptrain/
11
Unzipping the files


The .zip file needs winzip to unzip
The .exe does not



Some IT Dept. won’t allow you to download an .exe
Click the .zip or .exe file you downloaded
Extract it to the proper folder


REMEMBER where you put it
Keep a pristine copy around
12
Files

Folders for 2nd level pages, CSS, Scripts and images

1, 2 and 3 column templates

Footer SSI
Left column navigation SSI
Top of page navigation SSI
About Us page
Contact Us page
Home page





13
Getting Dreamweaver

Ram Tech



http://ramtech.colostate.edu/
Adobe price list
Dreamweaver CS4


$125 for departments
$130 for personal use
14
Dreamweaver CS4 Workspace

4 basic parts

The insert pane


The document pane



The main window
Where you edit the web page
The Property Inspector


Above the document pane
Below the document pane
The File pane

15
To the right of the document pane
Dreamweaver CS4 Workspace

The insert panel



At right, but in “classic” view can be moved to top
Classic view gives you more room for the File pane
Icons for commonly used commands (links, email links, tables,
images, etc.)
16
Dreamweaver CS4 Workspace (con’t)

The document panel



Where the web page is
Suite of 3 “view” buttons at upper left: code, split, design
Download time at lower right: 25 second rule!
17
Dreamweaver CS4 Workspace (con’t)

The Property Inspector




Use to manipulate what is selected in the document panel
Click on a table, it can manipulate table
Click on an image, it can manipulate image
For text, two buttons toggle it between HTML and CSS
(NEW!)


18
For now, stick with HTML
CSS needs to be in one place, not spread out
Dreamweaver CS4 Workspace (con’t)

The File pane




Shows you all folders, files, directory
structure at a glance
Pull files into document pane by
double clicking them in File pane
Pull up multiple files at once, switch
between them with tabs
Icon at upper right topples you to
full-screen FTP view
19
The Dreamweaver FTP
Local Files on the right, remote files on the left
Connect
20
Download
Upload