Transcript Websites 101 - Colorado State University

WORKING WITH
WEBSITES
SESSION 1: DEFINING THE SITE; ADDING CONTENT
SEPT 2011
THE DREAMWEAVER WORKSPACE
Classic view!
Insert pane
File pane
Document
pane
Property inspector
THE DREAMWEAVER WORKSPACE 2
• Classic view puts Insert pane up top
• Insert pane: used to insert commonly used objects
• Images, Tables, Email links, etc.
• Document pane: shows the document you’re working
on
• Bring up a document by clicking it in the File pane
• Can choose from Code view, Split view, or Design view in
upper left of Document pane
• Property Inspector: allows you to manipulate whatever
you’ve chosen in the Document pane
• Images, tables, links
• File pane: All the files and folders in your website
• Double-click to bring page up in Document pane
• Expand to upload/download files
DEFINING THE SITE
• Always your first step when working with
Dreamweaver
• Tells Dreamweaver:
• Where the Root Folder is on your computer
• Root folder contains everything that will be on your website
• The home page (index.shtml) is just inside the root folder
• NOT inside a folder inside the root folder
• Where the Remote Server is
• Server: yuma.colostate.edu
• Unique username (cwis###) and password
• Directory: WWW/
DEFINING THE SITE 2
• Site>New Site
• Descriptive name (I use county name)
• Location of root folder
• We’ll create an empty one on the fly, download the
site into it
DEFINING THE SITE 3
• Choose “Servers” in left column
• Choose + at lower left
• Add server name, Connect
using SFTP
• Add FTP Address, Username,
Password, Root Directory
DOWNLOADING THE SITE
• Expand the file pane
• Click the Connect icon
• Remote files will show in the
left pane
• Select top folder from the
LEFT (remote) pane
• Edit>Select Recently
Modified to choose all files
changed in last day
• Click the Download
button (Down arrow)
EXPANDED FILE PANE
Connect
Download
FROM server
Upload TO
server
CHANGING THE HOME PAGE
• Double-click index.shtml in the file
pane
• It will show up in the document
pane
• Type in text, or copy and paste
• Font size and style will be
automatically formatted
• Choose Paragraph or Header style
from Property Inspector
CHANGING AN INTERIOR PAGE
• Find the filename for the page in the file pane
• Naming convention: first 4 letters, or keyword
• Might be in a folder (second-level)
• Double-click to bring it up in the document pane
ADDING IMAGES
• Need to crop, compress and size the photo
beforehand
• Pixlr is a great, free on-line tool to do this
• Place the cursor where you want the image to go
• Click the tree icon in Insert panel, browse to the
image
• Add alt text (descriptive text for text-to-speech
browsers or browsers with image loading turned off)
• Align left or right to wrap text around image
PUBLISHING THE CHANGE
• Expand the file pane
• Click the Connect icon
• Remote files will show in the
left pane
• Select what files you
want to publish in the
RIGHT (local) pane
• Edit>Select Recently
Modified to choose all files
changed in last day
• Click the Upload icon (Up
arrow)
EXPANDED FILE PANE
Connect
Download
FROM server
Upload TO
server
ONE MORE THING…
• Check Preview using temporary
file
• Brings in SSIs (header, footer, left
nav)
MORE RESOURCES
• All of this is available via video tutorials
•
•
•
•
Defining the Site for Dreamweaver 4 and 5
Downloading and uploading files
Adding content (text, headers, images)
Working with Pixlr
• Most tutorials are under 5 minutes
• All are under 10 minutes
• http://www.ext.colostate.edu/vid_tutorials/#drea