1. Dreamweaver I Stanford Workshop Your Presenter: Dr. Laura Silberstein lsilberstein@yahoo.com

2. 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

3. 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

4. webSites Folder Created

5. (no site defined) yet  Click Define a site  Or  Site…new Site

6. Defining a Site Site menu…New Site

7. Exercise 1: Defining a Site Defining a Site is the mark of a savvy user  Name it

8. Choose Your Folder (webSites is mine)

9. Now see the correct pathname

10. Keep It Simple: Use Defaults

11. Edit Locally  Browse to find your folder

12. DW Changes Site Location  After you browse to find your folder, the Site Definition dialog box reflects the new location

13. Keeping It Simple  No remote server yet

14. Site Is Defined  Look in Site window  If you don’t see it: Window menu: Site

15. Exercise 2: Make Your Home Page  File…New…HTML  OR  Right-click on Site Folder…New File  Name It “index.htm”

16. Document Window Mac Jellybuttons -- Windows has upper right corner Minimize, Maximize/Restore, Close Document is Untitled Code View Design View

17. Modify…Page Properties  Give your Home Page a Title Choose different background colors

18. DW Look & Feel : Toolbars & Windows  Make Toolbars Visible  View…Toolbars (just like MS Office)  Check Document  Check Standard  Window…Insert (unlike MS Office)

19. Insert…Common  Mouse-over buttons to see Tooltips --> Make a Table

20. Table: Rows and Columns Type: 5 Rows and 1 Column Width: 640 Pixels Border =0

21. Check Status Bar  Click on to select Table

22. Table Properties

23. Insert Artwork: Banner  http://cooltext.com/ 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

24. Image Properties

25. How Big Is My Web Page?

26. 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

27. Duplicated Index.htm Files

28. 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

29. 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

30. Renamed Files

31. 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

32. 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)

33. Format Text Select text and make it “Heading 3” format, centered

34. Add the Hyperlink  Use Properties Box to “Point and Shoot”  Click on Cross-hair icon  Drag to filename Cross-hair icon

35. Another Way to Hyperlink  Click on folder to Browse for file  Find file in your Site folder (eg., in My Documents)  Select file name

36. More About Hyperlinks Target can be  _blank  _parent  _self  _top _blank loads the linked page in a new browser window

37. Test Your Links  Save your file  Preview in Browser Preview in Browser Play with different link colors (Modify…Page Properties)

38. 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