1 / 63

Macromedia Dreamweaver CS4 Tutorial

Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside.

amber
Download Presentation

Macromedia Dreamweaver CS4 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 DreamweaverCS4 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 DreamweaverSelect 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 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: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

More Related