1 / 58

Macromedia Dreamweaver CS3 Tutorial

Macromedia Dreamweaver CS3 Tutorial.

teranika-fullerton
Download Presentation

Macromedia Dreamweaver CS3 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 DreamweaverCS3 Tutorial

  2. Create a folder on your computer called website1 to hold all of your web pages. Example of the webpage Link: syllabus.htmlInside of the website1 folder create a folder called images to hold your graphics.Example of the Image Link: images/logo.jpgNotice how the forward slash in the link represents the location of a new folder. images website1 All folders, web pages, 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. Page Size Settings

  8. Check Mark When Active Window>Insert Window>Properties Window>Files

  9. Window>Insert Palette

  10. Window>Properties Palette

  11. Window>Files Palette

  12. From the Files Palette Link: Select Manage Sites

  13. Select The New Site Button

  14. 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 5. OK, Done Buttons 1 2 3 4

  15. The File Structure You Created

  16. Begin Creating the index.html main webpage

  17. Modify>Page Properties

  18. Appearance, SetFont, Text, Background Color

  19. Links, Set Link, Visited Link Colors

  20. Insert Tables to Hold Content in the Desired Locations

  21. Insert>Table: Set Rows, Columns, Width, Border, OK

  22. Select Font Properties, click the curser on the page, type in text

  23. Font Hierarchy Setting Example Title = Heading 1 size, Ariel font, left align, bold style. Subtitles = Paragraph size, Ariel font, left align, bold style. Body = Paragraph size, Ariel font, left align, normal style.

  24. Drag Adjust Column Widths, or Select Cells & Merge or Split

  25. Before Adding Images go to File>Save As & name your page (main page is named index.html) Remember to use all lowercase letters, no spaces or special characters

  26. Place your logo graphic image inside of the website1, images folder • logo.jpg (Photo type of images) • logo.gif (Line art, or transparent areas)

  27. Click inside of the top Left Cell, Insert>Image, or use the Image Icon to locate your .jpg or .gif image

  28. Navigate to the website1 images folder, select the file, & Choose button

  29. Provide an Alternate Text name for viewers using auditory readers, OK

  30. Select the Table/Cell, set the Bg Background, Brdr Border Color

  31. For an Invisible Border, select the table edge, Set Border to 0, or match the border & fill colors

  32. Click Inside of the First Cell to add a Flash Navigation Button, select Insert>Media>Flash Button

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

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

  35. Horizontal & Vertical Cell Alignment

  36. External Links: Type Text & Highlight, Type the Link URL website address, Press Return Key

  37. Internal Links: Type Text & Highlight, Type in the webpage name & Press Return Key

  38. E-mail Link: Type Text & Highlight, Type in mailto:e-mailaddressPress Return Key index.html

  39. Optional: Anchors Are Used to Jump Down on a Long Page of Text

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

  41. Highlight Text to link to, Insert>Named Anchor

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

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

  44. File>Save As, Provide Name & Location Example index.html for the main webpage or standards.html

  45. 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 other new pages. • Just be sure to save each new page with new name.

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

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

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

  49. For Selecting Primary & Secondary Browser Choices

  50. Viewing Options: HTML Code

More Related