1. Macromedia Dreamweaver CS4 Tutorial

2. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all of your web pages. Inside of the website1 folder create a folder called images to hold your graphics. All folders, web pages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.

3. Launch Dreamweaver Select HTML

4. Or, File>New to open a new page

5. Select Blank Page, HTML, Create

6. Window>Insert, Properties, Files, Workspace Layout>Classic

7. Tool Locations Window>Insert Window>Files Window>Properties

8. Sites>Manage Sites

9. Select The New Site Button

10. Set the New Site Definitions 1. Site name: website1 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 http://studentaccess.emporia. edu/~yourlastname/website1/ index.html 5. OK, Done Buttons 1 2 3 4

11. website1 selected & Done

12. Window>Files Site Structure

13. Begin Creating the index.html main webpage

14. Modify>Page Properties

15. Page Properties, Appearance (CSS), Font, Text, Background Color, OK

16. Page Properties, Appearance (HTML), Background, Text, OK

17. Insert>Tables or Table Icon to Hold Contents in the Desired Locations

18. Table Header Settings, Rows, Columns, Width, Border 0, OK

19. Header Table Example Click the cursor in the third cell and type in your page title, highlight it, and in the Window>Property set the desired Heading size.

20. Insert>Table, Horizontal Navigation Table Settings Click the cursor after the first table cell before adding the horizontal navigation table.

21. Insert>Table, Vertical Navigation if desired & Body Contents Click the cursor after the second table cell before adding the body contents table.

22. Insert>Table, to add a nested table to hold Vertical Navigation if desired Click the cursor inside of the left contents cell to add vertical navigation cells if desired.

23. Modify>Page Properties, Headings (CSS), Heading Font Selected, OK

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

25. Window>Properties, Vertical Alignment: Top Click the cursor in front of the text to move up, repeat for the photo

26. Drag Adjust Column Widths

27. Window>Properties, Column Split/Merge Icons Drag cursor over the desired cells to select

28. File>Save As, index.html, Where: website1, Save

29. Place the logo and other graphic images inside of the website1 folder, inside of the images folder logo.jpg (Photo type of images) logo.gif (Line art, or transparent areas)

30. Click inside of the top left cell, Insert>Image, or use the Image Icon to locate your.jpg or.gif image

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

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

33. Logo Graphic is added, type in the site title and adjust cells

34. Select the vertical nested navigation table and set Window>Properties to Align to Center

35. Add the page image like the logo, & begin adding your text Highlight subtitle, Window>Properties, Bold Icon

36. Select the header cells, Window>Properties set Bg Background Color The logo image had a transparent background and was saved as a.gif file format. I used the Eyedropper Tool to select colors in the graphic image.

37. Select navigation bar cells, Window>Properties, Bg Color

38. Select the header table, Window Properties, CellPad 0, Cellspace 0 Setting the border to 0 makes in invisible. Setting the cellpad and cellspace to 0 removes the color border.

39. Internal Links: Highlight Text, Type in Window>Properties link name & press Return Key to activate Homepage link is named index.html

40. External Links: Highlight Text, Window>Properties Type the full URL website address, Press Return http://www.atomiclearing.com

41. E-mail Link: Highlight Text, Window>Properties, Type in mailto:e-mailaddress & Return Key mailto:e-mailaddress mailto:jholland@emporia.edu

42. To Replace Navigation Links with Buttons Button Generator Websites http://www.buttongenerator.com/ http://www.aaa-buttons.com http://www.freebuttons.com/ Download the button image and place it inside of your website1 folder inside of the images folder. Then, link the button image to your page. Next, select the image and add a link from it to the desired page. Next, upload the webpage and your image to the server and test to be sure it is working correctly.

43. Button Generator Tutorial http://www.buttongenerator.com/ 1. Scroll down and select the “Only Free Buttons” from the pop up menu 2. Select the desired button design or the “Edit Button” text link 3. Scroll down and type in your desired Text Label 4. Select the Text, Font, Size, & Alignment etc. 5. Scroll down to the bottom of the page to select the “Click Here To Generate Your Button” 6. To save your button: PC users, right click on the button and choose 'Save Image As' or “Download Image to Disk” or similar menu item. Mac users Control click on the button and select Download Image to Disk. 7. Navigate to your website1 folder to save the button.

44. Insert Button on the Webpage 1. Go to Insert>Image and click on the Browse button to locate the new button you have created inside of your website1 folder inside of the images folder. 2. Example of Window>Properties Link: images/buttonintro.png 3. Add the name of your Alternative Text in the box provided and select the OK button. 4. Now that you have returned to your webpage select your new button with the curser and go to the top menu to select Insert>Link and type in the internal link; such as index.html or syllabus.html where you want the user to go when clicking on the link. 5. Be sure to provide credit at the bottom of your web page to ButtonGenerator.com 6. Next, go to the top menu and select File>Save As and save your web page again. 7. To test go to File>Browse Page, and click the button.

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

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

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

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

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

50. File>Save As, website1 folder

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

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

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

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

55. For Selecting Primary & Secondary Browser Choices

56. Viewing Options: HTML Code

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

58. Viewing Options: Design For Creating & Editing Web Pages

59. File>Save As, website1 folder Example index.html for the main webpage or instructor.html etc.

60. Upload All Files to your ESU Server Space called iDrive/MyFiles FTP File Transfer Protocal Software: CoreLite (PC) http://www.coreftp.co m/download.html FETCH (Mac) http://fetchsoftworks. com/ Username & Password same as BuzzIn

61. Folder Structure on the iDrive/MyFiles ESU Server website1 (folder) index.html instructor.html syllabus.html grading.html rules.html public_html (folder) images (folder) logo.gif globe.jpg buttonhome.swf

62. Website Uniform Resource Locator (URL) Address Type your URL address in a new Internet browser window to view your site and test it to be sure all links and images are working correctly. http://studentaccess.emporia.edu/~your username/website1/index.html

63. Additional Resources Adobe Dreamweaver Tutorials: http://www.adobe.com Internet Search: http://www.google.comhttp://www.google.com Great Resource Book: “Teach Yourself Visually The Fast and Easy Way to Learn Dreamweaver”