Learn Dreamweaver CS5 in a Day Topic File Used Page Number Instructions...1 Chapter 1 Tutorial 1. Introduction... 3 2. Previewing finished site in your web browser...als_portfolio... 7 3. Starting Up Dreamweaver... 8 4. Defining your site... 10 5. Exploring the Dreamweaver interface... 11 6. Getting help... 15 7. Loading a page... 16 8. Creating a new page... cover_letter... 19 9. Working with text... 21 10. Cascading Style Sheets... cover_letter... 22 11. Formatting the background... cover_letter... 29 Importing text... cover_letter... 30 Inserting special characters... résumé... 32 Switching pages... 33 Checking spelling... cover_letter... 34 Changing colors, styles, and fonts... résumé... 35 12. Formatting lists... résumé... 36 Inserting horizontal lines... résumé... 36 13. Creating internal links...portfolio_index... 37 14. Adding external links... links... 39 15. Setting anchors... resume... 40 16. Working with images... images... 42 Formatting the image... images... 42 Image maps... about_me... 44 17. Working in HTML...video... 46 18. Inserting an audio or video clip... about_me... 47 19. Building tables...index... 48 20. Page properties...index... 52 21. Posting your site... 53 22. Finishing up... 53 23. Advanced features... 54 24. Independent Web site project... 55
Chapter 2 - Dreamweaver Tips and Tricks 1. Use keyboard shortcuts... 57 2. Create your own templates... 57 3. Use assets and snippets... 58 4. Do file management within Dreamweaver... 58 5. Check page size and download time... 59 6. How to copy graphics from the Web onto your pages... 59 7. Tips for pasting text... 59 8. How to indent text... 59 9. Setting two words not to break... 60 10. Entering keywords for search engines... 60 11. How to open a link in a new window... 61 12. How to select a table... 61 13. Using notes... 62 14. Testing links... 62 15. Adding a counter... 63 16. Adding a search box... 63 17. Clean up your workspace... 64 18. For more information... 64 Chapter 3 - Advanced Dreamweaver Features 1. Create your artwork outside of Dreamweaver... 65 2. Change the default graphic editor... 65 3. Trace a design... 66 4. Create rollovers for buttons... 66 5. Creating an animated GIF... 67 6. Use forms to have users input information... 67 7. Integrate databases with ColdFusion... 68 8. Include scripts for interactivity... 68 9. Choose a host for your site... 69 10. Sometimes, you will want to download files... 70 11. Specify fonts using cascading style sheets... 70 12. Importing data into a table... 71 13. Take a closer look with the zoom tool... 71 14. Add a left-hand border... 71 15. Using layers (AP Divs)... 72 16. Keeping track of assets... 72 17. Making global changes using library assets... 73 18. Using macros... 73 19. Sorting tables... 74 20. Adding Flash to your pages... 74 21. Use Browserlab to see how your pages will look... 75 22. Using extensions... 75
Chapter 4 - General Web Design Tips and Tricks 1. Tips for preparing your graphics... 77 2. Consider posting to an Intranet, not the Internet... 77 3. Keep all files for your site in one folder... 77 4. Three ways to organize your files... 78 5. Use common fonts... 78 6. Make your text a graphic... 78 7. Use a table to line up columns... 79 8. Use GIFs for graphics with limited colors Use JPEGs for photographs... 79 9. Tip: Keep it real... 80 10. Use a Web-safe color palette... 80 11. Save all graphics at 72 ppi... 80 12. Keep the background light and simple (or very dark)... 81 13. Use clip art and animated GIFs sparingly... 81 14. Consider copyright issues... 82 15. What about printouts?... 82 16. Resize images in Photoshop... 83 17. Pre-load a graphic for quick viewing... 83 18. Use thumbnails to point to fill-size pictures... 83 19. Tips for using sound and music... 84 20. Video, the final frontier... 85 21. Remember, it s the WORLD Wide Web... 86 22. Make your site accessible to people with disabilities... 86 23. Field-test your site... 87 24. Three technical tips for preparing to build your site... 87 25. Keep the user interface consistent and logical... 88 26. Give your site stickyness... 88 27. Write for the Web... 89 28. How to post your web pages... 89 29. How to register your site s name... 90 30. Don t use under construction messages... 91 31. Get help... 91 32. Have some fun designing... 91
The following pages contain a sample chapter section from the book.
22 Dreamweaver CS5 Tutorial Cascading Style Sheets 10) Cascading Style Sheets So far, we have formatted text using the HTML options in the Properties Inspector. But there is a more powerful way to format text and other items on a web page. This involves using Cascading Style Sheets, also known simply as CSS. Using the Properties Inspector, you can only make one style change at a time. You would need to separately change the size, font, and color of some selected text. In addition, if you wanted to change multiple occurrences of text, you would need to select and change each text passage. With CSS, you define a style sheet and then can apply all occurrences of different styles, even on different pages and even in different web sites! CSS allows the Web author to create a template of styles that can be incorporated into one paragraph, one page, or a whole Web site. Creating a Style: Dreamweaver will automatically create Styles for you as you format text. You can try it. 1) Move to the images.html page by double-clicking on it in the Files panel. 2) Triple-click inside the line of text that says My Images to select it. Triple-clicking is a quick way to select a paragraph. 3) Switch the Properties Inspector to CSS mode by clicking the CSS button at the left. You will use options in the inspector to change its font, size, and color. 4) Click on the Text Color icon in the Properties Inspector. 5) Drag the mouse to choose a dark green color for your text color. The New CSS Rule window will appear. 6) In the Selector Name box, type.dark_green and click the OK button. Style selectors must always begin with a period. 7) Continue to experiment and format the text as you wish. All of your choices become part of the.dark_green style rule you created. 8) Notice that in the Targeted Rule box of the Properties Inspector, Dreamweaver has now made that a style, called dark_green.
Dreamweaver CS5 Tutorial Cascading Style Sheets 23 9) Select the line of text that says: Picture-imported from image file. 10) In the Properties Inspector, hold down on the Style box and select dark_green (or whatever the new style is called). Now your settings are applied to that line of text. If you want to use that style on other pages or in other sites, you will need to save it as an External Style Sheet and attach it to another page. We will show you how to that a bit later. Creating an Internal CSS Rule There is a way to make a series of formatting changes (called a style sheet) and save it as a file. First, we ll create the style and then we ll show you how to save it. 1. Move to the portfolio_index.html page by double-clicking on it in the Files panel. 2. Click inside the line of text that says My Images. Notice that in the Format box in the Properties Inspector this text is identified as being in the Heading 2 format. Now, we will change the characteristics of Heading 2 text. 3. Select Format>CSS Styles>New. 4. In the New CSS Rule dialog box, choose the Tag option under Selector Type. 5. Pull down under the list of tags and select h2. This will change the settings for the Heading 2 style tag. Tags are imbedded into the HTML code of a web page. 6. Choose the This Document only option to create an internal style. 7. Click OK.
24 Dreamweaver CS5 Tutorial Cascading Style Sheets 8. In the CSS Rule definition dialog box, be sure Type is selected under Category. Change the text size to a larger size and choose a new font and color for the text. 9. Click Apply to preview your changes. Click OK to finish the formatting. Notice that this new style has been automatically applied to all text formatted as h2 on this page. In a moment we ll show you how to apply a CSS style to other pages in your web site. Reality Check Don t Use Dark Blue Text Dark blue usually means text is a hyperlink. Users may expect to be able to click on blue text for a link. Reality Check Text Styles vs. Text Size Styles include specifications for font, size, and even text color. Size only refers to the relative size of the selected text in relation to normal paragraph text. Dreamweaver comes with some predefined styles. Exploring the CSS Panel Take note of the CSS panel on the right of your screen (if the CSS panel is not visible, choose Window>CSS Styles). 1. Double-click the Top bar in the CSS panel to expand it. 2. Double-click the Top bar on the Files panel to shrink that panel and to let you see more of the CSS panel. 3. In the CSS panel, click the CSS Styles tab. 4. Click the All tab at the top of the CSS panel. The top area of the CSS panel displays a structured list of all of the CSS rules currently applied to a page. 5. Select the line that says h2.