1 / 59

Macromedia Dreamweaver 8 Tutorial

Macromedia Dreamweaver 8 Tutorial.

guy
Download Presentation

Macromedia Dreamweaver 8 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 Dreamweaver8 Tutorial

  2. Create a folder on your computer called website1 to hold all web pages and graphics. (example of what your link will look like when you set it up later: map.jpg)Optional: inside of the website1 folder create a folder called images to hold your graphics.(example of what your link will look like when you set it up later: images/map.jpg)Notice how the forward slash in the link represents the location of a file in a new folder. images website1 All folders, webpages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.

  3. Launch DreamweaverSelect HTML

  4. New Page Appears

  5. Or Select File>New

  6. Select HTML, Create

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

  8. Setting Up a New Website Window>Files Checked You Will See The Files Palette on the Right

  9. From the Pop Up Files Palette Window: Select Manage Sites

  10. Select The New Button>Site

  11. Set the New Site Definitions 1. Name Your Webpage 2. Click on the Folder Icon & Locate the website1 folder 3. Click on the Folder Icon & Locate the images folder inside of the website1 folder 4. Add HTTP URL Address: http://studentaccess.emporia.edu/~yourlastname/website1/index.html 1 2 3 4

  12. The File Structure You Created

  13. Begin Creating the index.html main webpage

  14. Modify>Page Properties

  15. Appearance, SetFont, Text, Background Color

  16. Links, Set Link, Visited Link Colors

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

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

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

  20. Or to Create a Title With a Graphic: Insert>Table or Select Table Icon Tables control object placement

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

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

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

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

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

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

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

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

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

  30. Insert>Media>Flash Button

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

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

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

  34. External Links: Type Text & Highlight, Type in Link URL & Press Return Key http://www.google.com

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

  36. E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key mailto:hollandj@emporia.edu mailto:hollandj@emporia.edu

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

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

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

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

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

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

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

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

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

  46. Can Duplicate Pages • Once the index.html page is set up as desired with the logo, header, and navigation buttons it can serve as a template for creating new pages. • Just be sure to save each new page with new name.

  47. File>Preview in Browser>Select the desired browser

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

  49. Optional: File>Preview in Browser>Edit Browser List

  50. For Selecting Primary & Secondary Browser Choices

More Related