1. Macromedia Dreamweaver MX2004 Tutorial

2. Create a Folder Called: website1 Save All webpages & graphics inside of your website1 folder index.html math.html logo.gif graphic1.jpg

3. Launch Dreamweaver Select HTML

4. New Page Appears

5. Or Select File>New

6. Select HTML, Create

7. File>Save As Before adding any graphics or links Your main homepage must be named index.html All lowercase letters, no spaces, and no special characters. Place all webpages and graphic images inside of your website1 folder (.jpg,.gif,.html)

8. Window>Insert & Properties, Files Have a Check Mark When Active

9. Modify>Page Properties

10. Appearance, Set Font, Text, Background Color

11. Links, Set Link, Visited Link Colors

12. Insert>Table or Select Table Icon

13. Set Row, Column, Table Width, Border, OK

14. Click Drag Select Table Contents, Align Center, Add Table Color

15. Highlight Heading, Change Font & Size

16. Highlight Word to add Anchor Link to, & add #introduction in Link box #introduction Anchors allow links to jump down to lower sections on the same page

17. Place Curser in front of the Word then go to, Insert>Named Anchor

18. Type in the Anchor Name Example: introduction, OK

19. Highlight New Anchor to see the Name in Properties Below

20. Add Anchors in Front of Each Section

21. For Links to Separate Web Pages (example of files in website folder) introduction.htm Is named index.html

22. Highlight the Word to Link to & Type the Link Properties Name task.htm

23. To Link to Separate Pages Highlight Word & Type Link Name conclusion.htm

24. External Links: Highlight Word & Type the full URL Link Properties http://www.google.com

25. E-Mail Links: Highlight Word & Type mailto:hollandj@emporia.edu mailto:hollandj@emporia.edu

26. File>Save As

27. New Folder: website1 (save webpage files inside of the folder)

28. File>Preview in Browser>Edit Browser List

29. Select Internet Explorer for the Web Browser

30. File>Preview in Browser>Internet Explorer

31. See How the Anchors Do Not Show in Preview Mode

32. View>Design or Design Icon

33. View>Code (HTML) or Code Icon

34. View>Code & Design or Split Icon

35. Insert>Image or Image Icon

36. Locate the.gif or.jpg File You Placed Into Your website Folder

37. Image Appears on Your Webpage

38. Images Can Be Placed Into Tables to Control Spacing

39. Upload All Files to Web Server Space Website Folder: index.html conclusions.htm credits.htm evaluation.htm introduction.htm process.htm resources.htm task.htm graphic1.jpg graphic2.gif

40. Additional Resources Dreamweaver Tutorials: http://www.macromedia.com/support/dreamweaver/tutor ial_index.html http://www.macromedia.com/support/documentation/en/ dreamweaver/index.html#tutorials or you may be able to find other free online tutorials Great Resource Book: “Teach Yourself Visually The Fast and Easy Way to Learn Dreamweaver MX2004”