1 / 34

Dreamweaver Directions

Dreamweaver Directions. Getting Started Tables Adding Images and Color Adding Text Adding Links Creating a Rollover. DW. Open Dreamweaver Select HTML. DW. Select HTML Layout none Click Create. File Organization. A home page is always called index.html

alvaro
Download Presentation

Dreamweaver Directions

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. Dreamweaver Directions Getting Started Tables Adding Images and Color Adding Text Adding LinksCreating a Rollover DW

  2. Open Dreamweaver Select HTML DW

  3. Select HTML • Layout none • Click Create

  4. File Organization • A home page is always called index.html • images folder inside Project files folder • index.html page file inside Project files folder DW

  5. Creating Tables DW

  6. Tables • Find tabs at the top of your window • Common tab • Select the table icon: it looks like a little grid DW

  7. Select the number of: • Rows • Columns • Table width 700-1000 pixels • Boarder 0 • Cell pad 0 • Cell space 0 • Header none • Click ok DW

  8. In PROPERTIES INSPECTOR- at bottom of windowYou can enter a number for the width & height for each table cell DW

  9. Adding Images and Color DW

  10. Add color to a whole cell Click inside cell Clk <td> tag (cell tag) in the Properties Inspector Enter either 6-digit color code -Or clk on Bg to get color menu . DW

  11. Adding Background Color • Page Properties in properties inspector • Go to Bg-type 6-digit color code or click in little box next to Bg for color menu DW

  12. Background Color - more • Click Page Properties in the Properties Inspector < APPEARANCE • Click Background Color box • Either insert a 6-digit color code • Or click Background color box and select from swatches DW8

  13. Adding Images DW

  14. Common tabTree iconImage

  15. Select Image Source • Open your images folder • Select the image you want DW

  16. Adding Text DW

  17. Click inside table cell • Type some words • Select the <td> tag DW

  18. Choose Font • In properties inspector (window < properties) • Font: choose font style • Arial, Times, Courier, Georgia, Veranda, etc. DW

  19. Choose Font Format • In properties inspector • Format: choose either paragraph, heading 1, heading 2, etc. DW

  20. Choose Font Size In properties inspector (window < properties) Size: choose font size DW

  21. Choose Font Color • Select grey unmarked box to change font color DW

  22. Bold, Italic & Align Font • Bold, Italic • Left, Center, Right, All Justify • Bullets and Numbering DW

  23. Align Font (will also align images) • Horizontal alignment • Vertical alignment DW

  24. Creating Links DW

  25. Click link icon • Select a word or words • Click on the link icon in the common insert bar DW

  26. Fill in Hyperlink information • Text: selected text • Link: this is where you will type the page URL • Target: _blank opens the linked page in a new window DW

  27. Check your link • Click once away from the selected text to deselect it • The link text should be blue • And underlined in blue DW

  28. Change Link Color In properties inspector Go to page properties Category: Click links Link color: select from swatches Rollover links: choose color Underline Style: choose Click ok DW

  29. Creating a Rollover DW

  30. Inserting a Rollover Image • In the common insert bar at the top of the window • Go to image (tree icon) • Rollover image DW

  31. Inserting a Rollover Image • In the insert rollover image dialogue box • Click browse • Go to your images folder DW

  32. Select your image • Original Image: browse and choose • Rollover image: browse and choose • Alternate text: what the image is • Ok DW

  33. Preview your rollover Click on the Preview in Browser icon (little world) Click preview in browser DW

  34. Check your rollover In your browser windowrollover image should change as cursor hoversover image DW

More Related