1 / 54

Adobe Dreamweaver CS3 Revealed

Adobe Dreamweaver CS3 Revealed. CHAPTER THREE: WORKING WITH TEXT AND IMAGES. Chapter 3 Lessons. Create unordered and ordered lists Create, apply, and edit Cascading Style Sheets Add styles and attach Cascading Style Sheets Insert and align images Enhance an image and use alternate text

ursala
Download Presentation

Adobe Dreamweaver CS3 Revealed

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. Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES

  2. Chapter 3 Lessons Create unordered and ordered lists Create, apply, and edit Cascading Style Sheets Add styles and attach Cascading Style Sheets Insert and align images Enhance an image and use alternate text Insert a background image and perform site maintenance

  3. Breaks up text Increases readability Three types of lists: Unordered Ordered Definitions Text as Lists

  4. Cascading Style Sheets Saves you time Ensures consistency Applies formatting attributes to an entire site

  5. Using Images to Enhance Web Pages Use graphics sparingly Can complement content of pages Store in assets folder Three Web graphic file formats: GIF JPEG PNG

  6. Creating Unordered Lists Unordered or bulleted This slide is an example of an unordered list Select paragraphs of text to be included in list Click the Unordered List button in Property inspector Default bullet style is a round dot

  7. Creating Ordered Lists Called numbered lists Preceded by numbers or letters in a sequence

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

  9. Fig. 1: Expanded Property Inspector Click to collapse Property inspector Unordered list button Ordered list button List item button

  10. Fig. 2: Choosing a Numbered List Style List type list arrow Numbered list styles

  11. Fig. 4: List Properties Dialog Box List type list arrow Style list arrow

  12. Fig. 5: HTML Tags in Code View for Unordered List Beginning tag for unordered list First pair of tags for first list item

  13. Fig. 7: Spa Page with Ordered List Formatted heading Formatted body text Text color button Bold button

  14. 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

  15. 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

  16. CSS Style Sheet Codes The selector is the name of the tag to which the style declarations have been assigned The declaration consists of the property and the value

  17. Fig. 9: Cascading Style Sheet File selector declaration value property

  18. Working with CSS Create a CSS and a style Apply a CSS Edit a CSS

  19. Fig. 11: New CSS Rule Dialog Box Class option for Selector New style name Define in list arrow

  20. Fig. 12: CSS Rule Definition for .bullets in su_styles.css Dialog Box Type category selected

  21. Fig. 15: Applying a CSS Style Toggle Displaying of CSS Styles button Selected text Click to set size of selected text to None Click to apply bullets style to selected text Click to set font of selected text to Default Font

  22. Fig. 17: Editing a CSS Style Properties pane Properties of the bullets style Font size list arrow

  23. 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.

  24. Fig. 19: Code for Embedded Styles

  25. Fig. 20: Adding a Style to a CSS Style Sheet New style name

  26. Fig. 21: Formatting Options for Heading Style

  27. Fig. 24: Attaching a Style Sheet to a Page su_styles.css Link option button

  28. Fig. 25: Viewing the Code to Link the CSS Style Sheet File Code that applies the body_text style to the paragraph Code linking external style sheet file to the index page

  29. Understanding Graphic Formats Three primary graphic file formats: GIF JPEG PNG

  30. GIF Graphic Interchange Format Downloads very quickly Limited in color Can show transparent areas

  31. JPEG Joint Photographic Experts Groups Can display many colors Photographs are often saved in this format

  32. PNG Portable Network Graphics Shares advantages of GIFs and JPEGs Not universally recognizable by older browsers

  33. The Assets Panel Located in the Files panel group Displays all the assets in a Web site Has Favorites button Contains nine categories

  34. The Assets Panel Categories include: Images Colors URLs Flash

  35. The Assets Panel Categories include: Shockwave Movies Scripts Templates Library

  36. Inserting Files with Adobe Bridge Bridge is an easy way to view files outside the Web site before bringing them into the Web site Integrated application Works with other Adobe programs such as Photoshop and Illustrator Use Bridge to add meta tags and search text to your files

  37. Aligning Images Aligning images means to position them in relation to other elements Default: bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph

  38. Fig. 26: The Assets Panel Site option button Drag gripper to undock Favorites option button Images button Thumbnail of selected image Category buttons List of images in Web site

  39. Fig. 26: The Striped Umbrella About Us Page with Inserted Image club_house.jpeg inserted Image path(should begin with assets) Inserted file listed in assets folder

  40. Fig. 29: Using Adobe Bridge boardwalk.jpeg image is selected

  41. Fig. 31: Left-aligned Club House Image Left-aligned image Text wrapped around image Left-aligned option selected

  42. Enhancing Images Borders Add horizontal space Brightness/Contrast Modify the image and image size using an image editing program

  43. 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 Priority 1 Checkpoint

  44. Fig. 34: Using Property Inspector to Add a Border Selected image with 1-pixel border V Space text box H Space text box Border text box

  45. Fig. 35: Comparing Images with Horizontal and Vertical Space Image with horizontal and vertical space Image without horizontal and vertical space

  46. Fig. 36: Brightness and Contrast Settings Drag slider to adjust brightness

  47. Fig. 37: Alternate Text Setting Alternate text box

  48. Fig. 38: Alternate Text Displayed in Browser Alternate text displayed on top of image

  49. Fig. 39: Preferences Dialog Box with Accessibility Category Selected Accessibility category Check boxes for Form objects, Frames, Media, and Images

  50. 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

More Related