1 / 39

Macromedia Dreamweaver MX2004 Tutorial

Macromedia Dreamweaver MX2004 Tutorial. Launch Dreamweaver Select HTML. New Page Appears. Or Select File>New. Select HTML, Create. Window>Insert & Properties, Files Have a Check Mark When Active. Modify>Page Properties. Appearance, Set Font, Text, Background Color.

timothy-hayden
Download Presentation

Macromedia Dreamweaver MX2004 Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Macromedia DreamweaverMX2004 Tutorial

  2. Launch DreamweaverSelect 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, SetFont, Text, Background Color

  9. Links, SetLink, Visited Link Colors

  10. Insert>Table or Select Table Icon

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

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

  13. Highlight Heading, Change Font & Size

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

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

  16. Type in the Anchor NameExample: introduction, OK

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

  18. Add Anchors in Front of Each Section

  19. For Links to Separate Web Pages(example of files in website folder) Introduction file is named index.html

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

  21. To Link to Separate PagesHighlight Word & Type Link Name conclusion.htm

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

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

  24. File>Save As

  25. New Folder: website (save webpage files inside of the folder)

  26. File>Preview in Browser>Edit Browser List

  27. Select Internet Explorer for the Web Browser

  28. File>Preview in Browser>Internet Explorer

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

  30. View>Design or Design Icon

  31. View>Code (HTML) or Code Icon

  32. View>Code & Design or Split Icon

  33. Insert>Image or Image Icon

  34. Locate the .gif or .jpg File on the Desktop to Place in your Website Be sure you do not pick up the desktop or folder path, or when uploaded to the server your graphics will not be found Correct link: disk.jpg

  35. Image Appears on Your Webpage

  36. Images Can Be Placed Into Tables to Control Spacing

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

  38. File Naming Conventions 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 Correct File Extensions website1 (Folder Name) index.html (Intro Page)

  39. Additional Resources Dreamweaver Tutorials: http://www.macromedia.com/support/dreamweaver/tutorial_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”

More Related