Download Dreamweaver I

Dreamweaver I
Stanford
Workshop
Your Presenter: Dr. Laura
Silberstein
[email protected]
First Steps: The Pre-Lab
Get organized
Plan your site organization & navigation
structure
Gather or create media: pictures,
graphics, etc.
 Survey Websites in your field
 Decide on design features you like
Type up draft text (Word or WordPad)
 Short is sweet
First Steps: In the Lab
Create folder somewhere
My Documents is on your server
Anywhere on your Server
Desktop on home computer is ok
My Documents\webSites
Anywhere you like & can find
Thumb Drive is ok
Some computers “eat” Thumb drives
Open Dreamweaver
Define a Site
webSites Folder Created
(no site defined) yet
Click Define a site
Or
Site…new Site
Defining a Site
Site menu…New Site
Exercise 1: Defining a Site
Defining a
Site is the
mark of a
savvy
user
 Name it
Choose Your Folder
(webSites is mine)
Now see the correct pathname
Keep It Simple: Use Defaults
Edit Locally
Browse to find your folder
DW Changes Site Location
After you browse to find your
folder, the Site Definition
dialog box reflects the new
location
Keeping It Simple
No remote server yet
Site Is Defined
Look in Site window
If you don’t see it: Window
menu: Site
Exercise 2:
Make Your Home Page
 File…New…HTML
 OR
 Right-click on Site Folder…New File
 Name It
“index.htm”
Document Window
Mac Jellybuttons -Windows has upper right corner
Minimize, Maximize/Restore, Close
Code
View
Design
View
Modify…Page Properties
Give your Home Page a Title
• Choose different background colors
DW Look & Feel:
Toolbars & Windows
Make Toolbars Visible
View…Toolbars (just like MS
Office)
 Check Document
Check Standard
Window…Insert (unlike MS
Office)
Insert…Common
Mouse-over buttons to see
Tooltips
--> Make a Table
Table: Rows and Columns
Type: 5 Rows and 1 Column
Width: 640 Pixels
Border =0
Check Status Bar
Click on <table> to select
Table
Table Properties
Insert Artwork: Banner
 http://cooltext.com/
 Choose .jpg (NOT .png)
Create your own in Fireworks,
PhotoShop, Illustrator
Try samples from the images folder
 Drag images folder to your site folder (in My Documents)
Note the size of the image
 Click on image
 Look at Properties Box
Image Properties
How Big Is My Web Page?
Create Some More Web
Pages
Save your work
Right-click on index.htm in
Site window
Duplicate
Repeat two more times
Each page now has the
same structure
Table with 5 Rows, 1 Column
Same Banner
Duplicated Index.htm Files
Exercise 3:
Linking Up Your Site
Add some text to index.html in
second row
eg. “This is Laura’s Home Page”
Save
Rename your other pages in the
Site window
students.htm
homework.htm
calendar.htm
parents.htm
Renaming Duplicate Files
Can use .html or .htm
Mac convention is .html
Windows is .htm
Doesn’t matter -- just try to be consistent
Easier to remember file names
Use lowercase letters
Case matters on UNIX (not on Mac)
Easier to remember file names
Older servers don’t like capital letters
Renamed Files
Change Content on Each Page
Open students.htm (double-click
on file icon in Site window list)
Type “This is my students’ showcase”
Open homework.htm
Type “Homework Assignments”
Etc.
Save each page
Don’t worry about font size -we’ll fix that later
Hyperlinks
In 2nd row, type:
|| Home || Students || Parents ||
Calendar || Homework ||
(all on one line)
Select text (click and drag)
Format using Properties Box (see
next slide)
Format Text
Select text and make it “Heading
3” format, centered
Add the Hyperlink
Use Properties Box to “Point
and Shoot”
Click on Cross-hair icon
Drag to filename
Cross-hair icon
Another Way to Hyperlink
Click on folder to Browse for
file
Find file in your Site folder (eg., in My
Documents)
Select file name
More About Hyperlinks
Target can be
_blank
_parent
_self
_top
_blank loads the linked page in a new
browser window
Test Your Links
Save your file
Preview in Browser
Preview in
Browser
• Play with different link colors
(Modify…Page Properties)
Congratulations!
You’ve just built your first Web site!
Keep all files together in one folder
Keep all images in a sub-folder
Upload the site folder to a server
 Ask your tech support guy how
 Free Web space available at yahoo.com
 Pay for Web space (no ads, faster uploads, goodies)
Next time: bring photos & artwork