1. Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with Text and Graphics

2. Breaks up text Increases readability 3 Types of Lists: Unordered Ordered Definitions Text as Lists

3. Cascading Style Sheets Save you time Ensure consistency 2 Types of style sheets: Internal style sheets External style sheets (for applying to multiple pages)

4. Graphics Not too many! Not too few! Store in Assets folder 3 Web graphic file formats: GIF JPEG PNG

5. Lists Unordered bulleted Ordered numbered Definition term + indented paragraph This slide is an example of an unordered list. What characteristics of this list improve readability? What other formatting might improve its readability?

6. Create a List 1. Select paragraphs of text to be included in list 2. Click List button in Property Inspector This slide is an example of an ordered list. What characteristics of this list improve readability? What other formatting might improve its readability?

7. Property Inspector unordered ordered List Item properties

8. List HTML unordered list “square” bullets line items close line item close (not shown)

9. Cascading Style Sheets selector declaration property value

10. Internal style sheet Change a property here… text Internal CSSs save you some time… text …all text using that selector is updated

11. External CSSs save you time… external (.css).html Change a property here… …every page using the style sheet is automatically updated

12. Cascading… Affected Text external internal 3. inline 1. external style sheet 2. internal style sheet All styles are applied, but the property closest to the text wins! (These property values override style sheets)

13. Create a Style Selector external internal “class” properties can override any selector properties Standard HTML tags get a new look 4 link states: link visited hover active List changes According to “Type”

14. Declare a Style font properties.bullets

15. Apply a Style select text then apply a style… …to apply class style or CSS selector …to apply HTML style

16. Apply an external style sheet Click to apply an external style sheet to this page

17. Insert and Align Graphics File formats Assets panel Image alignment

18. Graphic file formats GIF “giff” (not “jiff”) JPEG “jay-peg” PNG “ping”

19. GIF 256 solid colors 1 transparent color per image Animate gif files

20. JPEG 16.7 million colors gradients and shadows No transparency No animation Lossy everytime you save a jpeg, the file becomes smaller and loses quality

21. PNG 16.7 million colors gradients and shadows 256 transparent colors per image Lossless

22. Assets Panel Stores & categorizes items you may re-use in several HTML pages: Images Colors URLs links Flash Shockwave Movies Scripts Templates Library

23. Assets Panel categories thumbnail favorites

24. Adding a graphic from the Site or Assets panel drag it!

25. Adding a graphic to the Assets panel Proofreading Window size Links

26. Aligning Images image alignment Text and image Alignment ( )

27. Enhance Images Borders Space Alternate Text Modify the image and image size using an image editing program

28. Borders Border thickness

29. Space horizontal and vertical Vertical space Horizontal spce

30. Resizing Graphics Don’t resize graphics within a page –Smaller: file size unnecessarily large –Larger: image loses quality Reset Size matches height and width to source

31. Background Images File size: small Image size: small for tiling Image size: large use style for white space, no tile and move with scroll Affects Readability

32. Insert a Background Image select an image

33. Background Image using Styles image tiling follow? positioning

34. Remove non-Web-safe colors from Web site Web-safe color values include 3 pairs… …not safe!

35. Unit Summary Create lists Create, apply and edit Cascading Style Sheets Insert and Align Graphics Add links Enhance images Add Background Image Remove unused images & non-Web colors