Upload
kathlyn-ramsey
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
First Steps: The Pre-Lab
Get organizedPlan your site organization & navigation
structureGather 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 somewhereMy 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 DreamweaverDefine a Site
DW Changes Site Location
After you browse to find your folder, the Site Definition dialog box
reflects the new location
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 cornerMinimize, Maximize/Restore, Close
Document is UntitledCode View Design
View
DW Look & Feel: Toolbars & Windows
Make Toolbars VisibleView…Toolbars (just like MS
Office) Check Document Check Standard
Window…Insert (unlike MS Office)
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
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
Exercise 3:Linking Up Your Site
Add some text to index.html in second row
eg. “This is Laura’s Home Page”
SaveRename 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
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)
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 filePreview 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