Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT

Web Collection: Dreamweaver MX 2004 Chapter C 2Working 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 Working with Text and Graphics

Web Collection: Dreamweaver MX 2004 Chapter C 3Working with Text and Graphics Breaks up text Increases readability 3 Types of Lists: Unordered Ordered Definitions Text as Lists

Web Collection: Dreamweaver MX 2004 Chapter C 4Working with Text and Graphics Cascading Style Sheets Save you time Ensure consistency 2 Types of style sheets: Internal style sheets External style sheets (for applying to multiple pages)

Web Collection: Dreamweaver MX 2004 Chapter C 5Working with Text and Graphics Graphics Use graphics sparingly Store in Assets folder 3 Web graphic file formats: GIF JPEG PNG

Web Collection: Dreamweaver MX 2004 Chapter C 6Working with Text and Graphics 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?

Web Collection: Dreamweaver MX 2004 Chapter C 7Working with Text and Graphics Create a List 1. Select paragraphs of text to be included in list 2. Click List button in Property Inspector 3. This slide is an example of an ordered list. What characteristics of this list improve readability? What other formatting might improve its readability?

Web Collection: Dreamweaver MX 2004 Chapter C 8Working with Text and Graphics Property Inspector - unordered unordered ordered List Item properties Collapse Property Inspector

Web Collection: Dreamweaver MX 2004 Chapter C 9Working with Text and Graphics List Properties - unordered List Type Square Style

Web Collection: Dreamweaver MX 2004 Chapter C 10Working with Text and Graphics Property Inspector - ordered unordered ordered List Item properties Collapse Property Inspector

Web Collection: Dreamweaver MX 2004 Chapter C 11Working with Text and Graphics List Properties - ordered List Type Number List Styles

Web Collection: Dreamweaver MX 2004 Chapter C 12Working with Text and Graphics 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

Web Collection: Dreamweaver MX 2004 Chapter C 13Working with Text and Graphics Cascading Style Sheets selector declaration property value

Web Collection: Dreamweaver MX 2004 Chapter C 14Working with Text and Graphics Create a Style Selector external internal “class” properties can override any selector properties List changes According to “Type”

Web Collection: Dreamweaver MX 2004 Chapter C 15Working with Text and Graphics Declare a Style Type category selected

Web Collection: Dreamweaver MX 2004 Chapter C 16Working with Text and Graphics Apply a Style Select text then apply a style… Click to apply bullets Style to selected text …to apply HTML style

Web Collection: Dreamweaver MX 2004 Chapter C 17Working with Text and Graphics Apply an external style sheet Click to apply an external style sheet to this page

Web Collection: Dreamweaver MX 2004 Chapter C 18Working with Text and Graphics Edit a CSS CSS Properties

Web Collection: Dreamweaver MX 2004 Chapter C 19Working with Text and Graphics Understanding Graphic File Formats The three primary graphic file formats are: –GIF (Graphic Interchange Format) –JPEG (Joint Photographic Experts Groups) –PNG (Portable Network Graphics)

Web Collection: Dreamweaver MX 2004 Chapter C 20Working with Text and Graphics Understanding the Assets Panel 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

Web Collection: Dreamweaver MX 2004 Chapter C 21Working with Text and Graphics The Assets Panel

Web Collection: Dreamweaver MX 2004 Chapter C 22Working with Text and Graphics Insert and Align Graphics File formats Assets panel Image alignment

Web Collection: Dreamweaver MX 2004 Chapter C 23Working with Text and Graphics Graphic file formats GIF “giff” (not “jiff”) JPEG “jay-peg” PNG “ping”

Web Collection: Dreamweaver MX 2004 Chapter C 24Working with Text and Graphics GIF 256 solid colors 1 transparent color per image Animate gif files Lossless

Web Collection: Dreamweaver MX 2004 Chapter C 25Working with Text and Graphics 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

Web Collection: Dreamweaver MX 2004 Chapter C 26Working with Text and Graphics PNG 16.7 million colors gradients and shadows 256 transparent colors per image Lossless

Web Collection: Dreamweaver MX 2004 Chapter C 27Working with Text and Graphics Assets Panel Stores & categorizes items you may re-use in several HTML pages: Images Colors URLs links Flash Shockwave Movies Scripts Templates Library

Web Collection: Dreamweaver MX 2004 Chapter C 28Working with Text and Graphics Assets Panel Category Buttons Favorites Option Button Site Option Button Images Button Drag Gripper to undock List of graphics in web Site Thumbnail of selected Image Refresh Site list Button

Web Collection: Dreamweaver MX 2004 Chapter C 29Working with Text and Graphics Adding a graphic from the Site or Assets panel Select and Drag from the Assets Panel to Web page

Web Collection: Dreamweaver MX 2004 Chapter C 30Working with Text and Graphics Insert Graphics Five Graphic Files contained in the TripSmart web Site Click to refresh File List

Web Collection: Dreamweaver MX 2004 Chapter C 31Working with Text and Graphics Aligning Images Left align Option set Left-aligned Zebra image Text wrapped around left-aligned image

Web Collection: Dreamweaver MX 2004 Chapter C 32Working with Text and Graphics Enhance Images Borders Brightness and Contrast Alternate Text Modify the image and image size using an image editing program

Web Collection: Dreamweaver MX 2004 Chapter C 33Working with Text and Graphics Borders Selected Image With 2-pixel border applied Border text box H Space text box

Web Collection: Dreamweaver MX 2004 Chapter C 34Working with Text and Graphics Apply Brightness and Contrast Brightness slider Brightness and Contrast button

Web Collection: Dreamweaver MX 2004 Chapter C 35Working with Text and Graphics 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

Web Collection: Dreamweaver MX 2004 Chapter C 36Working with Text and Graphics Use Alternate text Alt text box

Web Collection: Dreamweaver MX 2004 Chapter C 37Working with Text and Graphics Alt Text in the Browser Alternate text Display on Top of image

Web Collection: Dreamweaver MX 2004 Chapter C 38Working with Text and Graphics Alt Text Preferences Accessibility category Image check Box

Web Collection: Dreamweaver MX 2004 Chapter C 39Working with Text and Graphics 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

Web Collection: Dreamweaver MX 2004 Chapter C 40Working with Text and Graphics Insert a Background Image Selected filename for background image

Web Collection: Dreamweaver MX 2004 Chapter C 41Working with Text and Graphics Delete files from Web site Select file to delete

Web Collection: Dreamweaver MX 2004 Chapter C 42Working with Text and Graphics Remove non-Web-safe colors from Web site Non-Websafe color Websafe color

Web Collection: Dreamweaver MX 2004 Chapter C 43Working with Text and Graphics Chapter C Summary Create lists Create, apply and edit Cascading Style Sheets Insert and Align Graphics Add links Enhance images Add Border and Background Image Remove unused images & non-Web colors