1. Macromedia Dreamweaver MX2004 Tutorial

2. Launch Dreamweaver Select HTML

3. New Page Appears

4. Or Select File>New

5. Select HTML, Create

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

7. Modify>Page Properties

8. Appearance, Set Font, Text, Background Color

9. Links, Set Link, Visited Link Colors

10. Click the Curser on the Page, Select Alignment, Type in Text
Window> Properties
Center Alignment Button

11. Highlight Text, Select Ariel Font
Window> Properties
Font Pop-up Menu

12. Highlight Text, & Select the Title Format Size
Window> Properties
Pop-up Format for Title Heading Size: Example 2

13. Or to Create a Title With a Graphic: Insert>Table or Select Table Icon

14. Set Row, Column, Table Width, Border, OK
Title Example:
1 Row
2 Columns

15. Adjust Column Widths
Drag Table Column Line Left or Right to Adjust the Width

16. Before Adding Graphic Images go to File>Save As>name your file
Remember to use all lowercase letters, no spaces or special characters

17. Click in the Left Cell, Insert>Image, or use the Image Icon, Locate
Click in the Left Cell, Insert>Image, or use the Image Icon, Locate .gif or .jpg File
Window>Insert Menu
To Insert Logo or Graphic in a Header

18. Click in the Right Cell & Type to Add the Title

19. Select the Table, Select BG to Add a Background Color
Window> Properties Menu

20. To Make Border Invisible, Select Table, Set Border to 0
Select Edge of Table
Window> Properties Menu

21. To Add Navigation Table, Insert>Table or Table Icon
1 Row
7 Columns Maximum

22. Click Inside of the First Cell to Add a Flash Navigation Button

23. Insert>Media>Flash Button

24. Button Settings: Style, Text, Font, Link, Size, Apply, OK
Remember when uploading your website to the server to add your .swf Flash buttons you created

25. Repeat to Add All Buttons
If you need to edit the button after has been created or to check the links just double click on the button again, change the features, Apply, OK.

26. Example of Completed Title & Navigation Buttons
You May Have Different Titles For Your Navigation Buttons

27. External Links: Type Text & Highlight, Type in Link URL & Press Return Key

28. Internal Links: Type Text & Highlight, Type in Link URL & Press Return Key
index.html

29. E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key

30. To Add a Graphic, Add a Table, & Adjust the Column Width
Example:
1 Row
2 Columns

31. Click in the Left Cell, Select Insert>Image or Image Icon
Locate Graphic Image:
.gif
.jpg
Choose

32. Click in the Right Cell & Add Your Text
May Need to Adjust Column Width
Adjust Font to Ariel

33. Anchors Are Used to Jump Down on a Long Page of Text

34. Highlight Word, In the Link Box Type in #name
#august

35. Highlight Text to Link To, Insert>Named Anchor

36. Type in Exact Name Match, Example: august, OK

37. Notice the Yellow Anchor, This Will Not Show When Posted

38. File>Save As, Provide Name & Location
Example
index.html or
standards.htm

39. File>Preview in Browser>Edit Browser List

40. Select Internet Explorer Primary, Netscape Secondary

41. File>Preview in Browser>Internet Explorer

42. Notice How the Browser Opens in Front To Preview What it Will Look Like When Uploaded to the Server
When Finished Viewing Browser Red Button Close

43. Viewing Options: HTML Code

44. Viewing Options: Split Code & Design
You Can Highlight Areas in Design Mode & See It in Code

45. Viewing Options: Design For Creating & Editing Webpages

46. File>Save As, Provide Name & Location
Example
index.html or
standards.htm

47. New Folder: website1 (save webpage files inside of the folder)
Reminder: Lowercase No Spaces

48. Example of Files in Your website1 folder
Must Have a Main Page Named index.html
Your page names may be different from this example & will be an exact match to your navigation buttons

49. Upload All Files to iDrive Web Server Space
public_html
website1
index.html
goals.htm
instructor.htm
syllabus.htm
grading.htm
rules.htm
sitemap.htm
graphic1.jpg
graphic2.gif
website2
index.html
task.htm
process.htm
resources.htm
evaluation.htm
standards.htm
conclusion.htm
graphic1.jpg
graphic2.gif

50. File Naming Conventions Example
website1
index.html
goals.htm
instructor.htm
syllabus.htm
grading.htm
rules.htm
sitemap.htm
graphic1.jpg
graphic2.gif
All Lowercase Letters
Short Descriptive Names
No Spaces
No Special Characters
Names Exact Match to Navigation Buttons
Correct File Extensions
website1 (Folder Name)
index.html

51. Additional Resources Dreamweaver 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”