1 / 35

Working with Text and Graphics

OVERVIEW. Working with Text and Graphics. Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance. INTRODUCTION. Text as Lists. Breaks up text Increases readability 3 Types of Lists: Unordered

nitara
Download Presentation

Working with Text and Graphics

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. OVERVIEW Working with Textand Graphics • Create Unordered and Ordered lists • Cascading Style Sheets • Insert and align Graphics • Image enhancements • Background images and site maintenance

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

  3. INTRODUCTION 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. INTRODUCTION Graphics • Not too many! • Not too few! • Store in Assets folder 3 Web graphic file formats: • GIF • JPEG • PNG

  5. LESSON 1 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. LESSON 1 Create a List • Select paragraphs of text to be included in list • 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. LESSON 1 Property Inspector ordered unordered List Item properties

  8. LESSON 1 List HTML unordered list “square” bullets line items close line item </ul> close <ul> (not shown)

  9. LESSON 2 Cascading Style Sheets selector declaration property value

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

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

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

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

  14. LESSON 3 Declare a Style .bullets font properties

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

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

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

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

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

  20. LESSON 3 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. LESSON 3 PNG • 16.7 million colors gradients and shadows • 256 transparent colors per image • Lossless

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

  23. LESSON 3 Assets Panel favorites thumbnail categories

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

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

  26. LESSON 3 Aligning Images image alignment Text and image Alignment (<div>)

  27. LESSON 4 Enhance Images • Borders • Space • Alternate Text Modify the image and image sizeusing an image editing program

  28. LESSON 4 Borders Border thickness

  29. LESSON 4 Space horizontal and vertical Vertical space Horizontal spce

  30. LESSON 4 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. LESSON 5 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. LESSON 5 Insert a Background Image select an image

  33. LESSON 5 Background Imageusing Styles image tiling follow? positioning

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

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

More Related