1 / 43

Working with Text and Graphics

OVERVIEW. Working with Text and Graphics. Create Unordered and Ordered lists Create, apply, and edit Cascading Style Sheets Insert and align Graphics Image enhancements and alternate text Background images and perform site maintenance. INTRODUCTION. Text as Lists. Breaks up text

camdyn
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 • Create, apply, and edit Cascading Style Sheets • Insert and align Graphics • Image enhancements and alternate text • Background images and perform site maintenance Working with Text and Graphics

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

  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) Working with Text and Graphics

  4. INTRODUCTION Graphics • Use graphics sparingly • Store in Assets folder 3 Web graphic file formats: • GIF • JPEG • PNG Working with Text and Graphics

  5. LESSON 1 Lists • Unordered - bulleted or small raised dots • Ordered numbered - specific order of items • 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? Working with Text and Graphics

  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? Working with Text and Graphics

  7. LESSON 1 Property Inspector - unordered unordered Collapse Property Inspector ordered List Item properties Working with Text and Graphics

  8. LESSON 1 List Properties - unordered List Type Square Style Working with Text and Graphics

  9. LESSON 1 Property Inspector - ordered unordered Collapse Property Inspector ordered List Item properties Working with Text and Graphics

  10. LESSON 1 List Properties - ordered List Type Number List Styles Working with Text and Graphics

  11. LESSON 2 Cascading Style Sheets • A Cascading Style Sheet (CSS) is made up of sets of formatting attributes that are either saved with a descriptive name or that redefines the appearance of an HTML tag Working with Text and Graphics

  12. LESSON 2 Cascading Style Sheets selector declaration property value Working with Text and Graphics

  13. LESSON 2 Create a Style Selector List changes According to “Type” “class” properties can override any selector properties internal external Working with Text and Graphics

  14. LESSON 3 Declare a Style Type category selected Working with Text and Graphics

  15. LESSON 2 Apply a Style Select text then apply a style… …to apply HTML style Click to apply bullets Style to selected text Working with Text and Graphics

  16. LESSON 2 Apply an external style sheet Click to apply an external style sheet to this page Working with Text and Graphics

  17. LESSON 2 Edit a CSS CSS Properties Working with Text and Graphics

  18. LESSON 3 Understanding Graphic File Formats • The three primary graphic file formats are: • GIF (Graphic Interchange Format) • JPEG (Joint Photographic Experts Groups) • PNG (Portable Network Graphics) Working with Text and Graphics

  19. The Assets panel displays all the assets in a web site Assets panel contains nine categories Categories include: Images Colors URLs Flash Shockwave Movies Scripts Templates Library LESSON 3 Understanding the Assets Panel Working with Text and Graphics

  20. LESSON 3 The Assets Panel Working with Text and Graphics

  21. LESSON 3 Insert and Align Graphics • File formats • Assets panel • Image alignment Working with Text and Graphics

  22. LESSON 3 Graphic file formats • GIF “giff” (not “jiff”) • JPEG “jay-peg” • PNG “ping” Working with Text and Graphics

  23. LESSON 3 GIF • 256 solid colors • 1 transparent color per image • Animate gif files • Lossless Working with Text and Graphics

  24. 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 Working with Text and Graphics

  25. LESSON 3 PNG • 16.7 million colors gradients and shadows • 256 transparent colors per image • Lossless Working with Text and Graphics

  26. 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 Working with Text and Graphics

  27. LESSON 3 Assets Panel Site Option Button Drag Gripper to undock Favorites Option Button Images Button Thumbnail of selected Image Category Buttons List of graphics in web Site Refresh Site list Button Working with Text and Graphics

  28. LESSON 3 Adding a graphic from the Site or Assets panel Select and Drag from the Assets Panel to Web page Working with Text and Graphics

  29. LESSON 3 Insert Graphics Five Graphic Files contained in the TripSmart web Site Click to refresh File List Working with Text and Graphics

  30. LESSON 3 Aligning Images Text wrapped around left-aligned image Left-aligned Zebra image Left align Option set Working with Text and Graphics

  31. LESSON 4 Enhance Images • Borders • Brightness and Contrast • Alternate Text Modify the image and image sizeusing an image editing program Working with Text and Graphics

  32. LESSON 4 Borders Selected Image With 2-pixel border applied Border text box H Space text box Working with Text and Graphics

  33. LESSON 4 Apply Brightness and Contrast Brightness slider Brightness and Contrast button Working with Text and Graphics

  34. LESSON 4 Use Alternate text • Alternate text (alt text) is descriptive text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it • Alt text makes your web page viewer-friendly and handicapped accessible Working with Text and Graphics

  35. LESSON 4 Use Alternate text Alt text box Working with Text and Graphics

  36. LESSON 4 Alt Text in the Browser Alternate text Display on Top of image Working with Text and Graphics

  37. LESSON 4 Alt Text Preferences Accessibility category Image check Box Working with Text and Graphics

  38. 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 Working with Text and Graphics

  39. LESSON 5 Insert a Background Image Selected filename for background image Working with Text and Graphics

  40. LESSON 5 Delete files from Web site Select file to delete Working with Text and Graphics

  41. LESSON 5 Remove non-Web-safecolors from Web site Websafe color Non-Websafe color Working with Text and Graphics

  42. SUMMARY Chapter C Summary • Create lists • Create, apply and editCascading Style Sheets • Insert and Align Graphics • Add links • Enhance images • Add Border and Background Image • Remove unused images & non-Web colors Working with Text and Graphics

More Related