1. Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT

2. Chapter 32Macromedia Dreamweaver 8 Revealed Create unordered and ordered lists Create, apply, and edit Cascading Style Sheets Add styles and attach Cascading Style Sheets Chapter Lessons

3. Chapter 33Macromedia Dreamweaver 8 Revealed Chapter Lessons Insert and align graphics Enhance an image and use alternate text Insert a background image and perform site maintenance

4. Chapter 34Macromedia Dreamweaver 8 Revealed Breaks up text Increases readability Three types of lists: –Unordered –Ordered –Definitions Text as Lists

5. Chapter 35Macromedia Dreamweaver 8 Revealed Cascading Style Sheets Save you time Ensure consistency Apply formatting attributes to an entire site

6. Chapter 36Macromedia Dreamweaver 8 Revealed Graphics Use graphics sparingly Can complement content of pages Store in assets folder Three Web graphic file formats: –GIF –JPEG –PNG

7. Chapter 37Macromedia Dreamweaver 8 Revealed Creating Unordered and Ordered Lists Unordered or bulleted –This slide is an example of an unordered list Ordered or numbered Select paragraphs of text to be included in list Click the (Un)Ordered List button in Property inspector

8. Chapter 38Macromedia Dreamweaver 8 Revealed Creating Definition Lists Definition lists do not have bullets Select paragraphs of text to be included in list Click Text  List  Definition List

9. Chapter 39Macromedia Dreamweaver 8 Revealed FIGURE 1 Expanded Property inspector Unordered list button Ordered list button Click to open List properties dialog box Click to collapse Property inspector

10. Chapter 310Macromedia Dreamweaver 8 Revealed FIGURE 2 Choosing a numbered list style in the List Properties dialog box List type list arrow Numbered list styles

11. Chapter 311Macromedia Dreamweaver 8 Revealed FIGURE 4 List Properties dialog box Style list arrow List type list arrow

12. Chapter 312Macromedia Dreamweaver 8 Revealed HTML Tags FIGURE 5 HTML tags in Code view for unordered list

13. Chapter 313Macromedia Dreamweaver 8 Revealed Cascading Style Sheets Sets of rules –Style or rule: formatting attribute that can be applied to page elements Can be created, edited or applied –New CSS Rule dialog box –CSS Rule definition dialog box –CSS Styles panel

14. Chapter 314Macromedia Dreamweaver 8 Revealed Types of CSS External CSS –Saved as a separate file (.css) –Stored in the directory structure of a Web site Internal CSS –Embedded in the code on an individual page

15. Chapter 315Macromedia Dreamweaver 8 Revealed FIGURE 9 su_style.css style sheet file selector declaration property value

16. Chapter 316Macromedia Dreamweaver 8 Revealed Working with CSS Create a CSS and a style Apply a CSS Edit a CSS

17. Chapter 317Macromedia Dreamweaver 8 Revealed FIGURE 11 New CSS Rule dialog box New style name Class option button External Internal

18. Chapter 318Macromedia Dreamweaver 8 Revealed FIGURE 12 CSS Rule Definition for.bullets in su_styles.css dialog box Type category selected

19. Chapter 319Macromedia Dreamweaver 8 Revealed FIGURE 15 Applying a CSS style to selected text Toggle Displaying of CSS Styles button Selected text Click to set font of selected text to Default Font Click to set size of selected text to None Click to apply bullets style to selected text

20. Chapter 320Macromedia Dreamweaver 8 Revealed FIGURE 17 Editing a CSS style Properties of the bullets style

21. Chapter 321Macromedia Dreamweaver 8 Revealed Add Styles and Attach CSS.css files created by Web designer Embedded style sheets created automatically by Dreamweaver –Set preference to Use CSS instead of HTML –Formatting in Property inspector –Code in Head content of file –Named style1, style2, etc.

22. Chapter 322Macromedia Dreamweaver 8 Revealed FIGURE 19 Code for embedded styles shown in Code view

23. Chapter 323Macromedia Dreamweaver 8 Revealed FIGURE 20 Adding a style to a CSS style sheet New style name

24. Chapter 324Macromedia Dreamweaver 8 Revealed FIGURE 23 Attaching a style sheet to a page Link option button su_styles.css

25. Chapter 325Macromedia Dreamweaver 8 Revealed FIGURE 24 Viewing the code to link the CSS style sheet file Code linking external style sheet file to the index page Code that applies the body_text style to the paragraph

26. Chapter 326Macromedia Dreamweaver 8 Revealed Insert and Align Graphics File formats Assets panel Image alignment

27. Chapter 327Macromedia Dreamweaver 8 Revealed Understanding Graphic Formats The three primary graphic file formats are: –GIF –JPEG –PNG

28. Chapter 328Macromedia Dreamweaver 8 Revealed GIF Graphic Interchange Format Downloads very quickly Limited in color Can show transparent areas

29. Chapter 329Macromedia Dreamweaver 8 Revealed JPEG Joint Photographic Experts Groups Can display many colors Photographs are often saved in this format

30. Chapter 330Macromedia Dreamweaver 8 Revealed PNG Portable Network Graphics Shares advantages of GIFs and JPEGs Not universally recognizable by older browsers

31. Chapter 331Macromedia Dreamweaver 8 Revealed The Assets Panel Located in the Files panel group Displays all the assets in a Web site Has Favorites button Contains nine categories

32. Chapter 332Macromedia Dreamweaver 8 Revealed The Assets Panel Categories include: –Images –Colors –URLs –Flash

33. Chapter 333Macromedia Dreamweaver 8 Revealed The Assets Panel Categories include: –Shockwave –Movies –Scripts –Templates –Library

34. Chapter 334Macromedia Dreamweaver 8 Revealed FIGURE 25 The Assets panel Drag gripper to undock Images button Category buttons Drag panel border to resize List of graphics in Web site Site option button Favorites option button Thumbnail of selected image Click to refresh file list

35. Chapter 335Macromedia Dreamweaver 8 Revealed FIGURE 26 The Striped Umbrella about us page with inserted image Inserted image Image path Inserted file listed in assets folder

36. Chapter 336Macromedia Dreamweaver 8 Revealed FIGURE 29 Left-aligned club house image Left-aligned image Text wrapped- around image Left-aligned option set

37. Chapter 337Macromedia Dreamweaver 8 Revealed Enhancing Images Borders Add horizontal space Brightness/Contrast Alternate text Modify the image and image size using an image editing program

38. Chapter 338Macromedia Dreamweaver 8 Revealed FIGURE 32 Using the Property inspector to add a border Selected image with 1-pixel border V Space text box H Space text box Border text box

39. Chapter 339Macromedia Dreamweaver 8 Revealed FIGURE 33 Comparing images with and without horizontal and vertical space Image with horizontal and vertical space Image without horizontal and vertical space

40. Chapter 340Macromedia Dreamweaver 8 Revealed FIGURE 34 Brightness and contrast settings for the boardwalk image Drag slider to adjust brightness

41. Chapter 341Macromedia Dreamweaver 8 Revealed Alternate Text Descriptive text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it Makes your Web page viewer- friendly and handicapped accessible

42. Chapter 342Macromedia Dreamweaver 8 Revealed Alt text box FIGURE 35 Alternate text setting in the Property inspector

43. Chapter 343Macromedia Dreamweaver 8 Revealed FIGURE 36 Alternate text displayed in browser Alternate text displayed on top of image

44. Chapter 344Macromedia Dreamweaver 8 Revealed FIGURE 37 Preferences dialog box with Accessibility category selected Accessibility category Check boxes for Form objects, Frames, Media, and Images

45. Chapter 345Macromedia Dreamweaver 8 Revealed Background Images Keep file size small Use a tiled image –Small graphic that repeats across or down a page Or a larger non-tiled image Use either a background color or a background image, but not both

46. Chapter 346Macromedia Dreamweaver 8 Revealed Working with Background Images Adding and removing background images Delete files from Web site Remove non-Websafe colors from Web site

47. Chapter 347Macromedia Dreamweaver 8 Revealed FIGURE 41 Removing a background image Selected filename

48. Chapter 348Macromedia Dreamweaver 8 Revealed FIGURE 42 Images listed in Assets panel Images file list after removing umbrella_back.gif and stripes_back.gif

49. Chapter 349Macromedia Dreamweaver 8 Revealed FIGURE 43 Colors listed in Assets panel Drag the border to the left to expand panel width Non-Websafe color

50. Chapter 350Macromedia Dreamweaver 8 Revealed Chapter 3 Tasks Create unordered and ordered lists Create/apply/edit Cascading Style Sheets Add styles and attach Cascading Style Sheets

51. Chapter 351Macromedia Dreamweaver 8 Revealed Chapter 3 Tasks Insert and align graphics Enhance an image and use alternate text Insert a background image and perform site maintenance