Dreamweaver Ch03


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dreamweaver Ch03

  1. 1. Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES
  2. 2. Chapter 3 Lessons <ul><li>Create unordered and ordered lists </li></ul><ul><li>Create, apply, and edit Cascading Style Sheets </li></ul><ul><li>Add styles and attach Cascading Style Sheets </li></ul><ul><li>Insert and align images </li></ul><ul><li>Enhance an image and use alternate text </li></ul><ul><li>Insert a background image and perform site maintenance </li></ul>
  3. 3. <ul><li>Breaks up text </li></ul><ul><li>Increases readability </li></ul><ul><li>Three types of lists: </li></ul><ul><ul><li>Unordered </li></ul></ul><ul><ul><li>Ordered </li></ul></ul><ul><ul><li>Definitions </li></ul></ul>Text as Lists
  4. 4. Cascading Style Sheets <ul><li>Saves you time </li></ul><ul><li>Ensures consistency </li></ul><ul><li>Applies formatting attributes to an entire site </li></ul>
  5. 5. Using Images to Enhance Web Pages <ul><li>Use graphics sparingly </li></ul><ul><li>Can complement content of pages </li></ul><ul><li>Store in assets folder </li></ul><ul><li>Three Web graphic file formats: </li></ul><ul><ul><li>GIF </li></ul></ul><ul><ul><li>JPEG </li></ul></ul><ul><ul><li>PNG </li></ul></ul>
  6. 6. Creating Unordered Lists <ul><li>Unordered or bulleted </li></ul><ul><ul><li>This slide is an example of an unordered list </li></ul></ul><ul><li>Select paragraphs of text to be included in list </li></ul><ul><li>Click the Unordered List button in Property inspector </li></ul><ul><li>Default bullet style is a round dot </li></ul>
  7. 7. Creating Ordered Lists <ul><li>Called numbered lists </li></ul><ul><li>Preceded by numbers or letters in a sequence </li></ul>
  8. 8. Creating Definition Lists <ul><li>Definition lists do not have bullets </li></ul><ul><li>Select paragraphs of text to be included in list </li></ul><ul><li>Click Text  List  Definition List </li></ul>
  9. 9. Fig. 1: Expanded Property Inspector Unordered list button Ordered list button List item button Click to collapse Property inspector
  10. 10. Fig. 2: Choosing a Numbered List Style List type list arrow Numbered list styles
  11. 11. Fig. 4: List Properties Dialog Box Style list arrow List type list arrow
  12. 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. 13. Fig. 7: Spa Page with Ordered List Text color button Formatted heading Formatted body text Bold button
  14. 14. Cascading Style Sheets <ul><li>Sets of rules </li></ul><ul><ul><li>Style or rule: formatting attribute that can be applied to page elements </li></ul></ul><ul><li>Can be created, edited or applied </li></ul><ul><ul><li>New CSS Rule dialog box </li></ul></ul><ul><ul><li>CSS Rule definition dialog box </li></ul></ul><ul><ul><li>CSS Styles panel </li></ul></ul>
  15. 15. Types of CSS <ul><li>External CSS </li></ul><ul><ul><li>Saved as a separate file (.css) </li></ul></ul><ul><ul><li>Stored in the directory structure of a Web site </li></ul></ul><ul><li>Internal CSS </li></ul><ul><ul><li>Embedded in the code on an individual page </li></ul></ul>
  16. 16. CSS Style Sheet Codes <ul><li>The selector is the name of the tag to which the style declarations have been assigned </li></ul><ul><li>The declaration consists of the property and the value </li></ul>
  17. 17. Fig. 9: Cascading Style Sheet File selector declaration property value
  18. 18. Working with CSS <ul><li>Create a CSS and a style </li></ul><ul><li>Apply a CSS </li></ul><ul><li>Edit a CSS </li></ul>
  19. 19. Fig. 11: New CSS Rule Dialog Box New style name Class option for Selector Define in list arrow
  20. 20. Fig. 12: CSS Rule Definition for .bullets in su_styles.css Dialog Box Type category selected
  21. 21. Fig. 15: Applying a CSS Style Toggle Displaying of CSS Styles button Selected text Click to set font of selected text to Default Font Click to set size of selected text to None Click to apply bullets style to selected text
  22. 22. Fig. 17: Editing a CSS Style Properties of the bullets style Font size list arrow Properties pane
  23. 23. Add Styles and Attach CSS <ul><li>.css files created by Web designer </li></ul><ul><li>Embedded style sheets created automatically by Dreamweaver </li></ul><ul><ul><li>Set preference to Use CSS instead of HTML </li></ul></ul><ul><ul><li>Formatting in Property inspector </li></ul></ul><ul><ul><li>Code in Head content of file </li></ul></ul><ul><ul><li>Named style1, style2, etc. </li></ul></ul>
  24. 24. Fig. 19: Code for Embedded Styles
  25. 25. Fig. 20: Adding a Style to a CSS Style Sheet New style name
  26. 26. Fig. 21: Formatting Options for Heading Style
  27. 27. Fig. 24: Attaching a Style Sheet to a Page Link option button su_styles.css
  28. 28. Fig. 25: Viewing the Code to Link the CSS Style Sheet File Code linking external style sheet file to the index page Code that applies the body_text style to the paragraph
  29. 29. Understanding Graphic Formats <ul><li>Three primary graphic file formats: </li></ul><ul><ul><li>GIF </li></ul></ul><ul><ul><li>JPEG </li></ul></ul><ul><ul><li>PNG </li></ul></ul>
  30. 30. GIF <ul><li>Graphic Interchange Format </li></ul><ul><li>Downloads very quickly </li></ul><ul><li>Limited in color </li></ul><ul><li>Can show transparent areas </li></ul>
  31. 31. JPEG <ul><li>Joint Photographic Experts Groups </li></ul><ul><li>Can display many colors </li></ul><ul><li>Photographs are often saved in this format </li></ul>
  32. 32. PNG <ul><li>Portable Network Graphics </li></ul><ul><li>Shares advantages of GIFs and JPEGs </li></ul><ul><li>Not universally recognizable by older browsers </li></ul>
  33. 33. The Assets Panel <ul><li>Located in the Files panel group </li></ul><ul><li>Displays all the assets in a Web site </li></ul><ul><li>Has Favorites button </li></ul><ul><li>Contains nine categories </li></ul>
  34. 34. The Assets Panel <ul><li>Categories include: </li></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Colors </li></ul></ul><ul><ul><li>URLs </li></ul></ul><ul><ul><li>Flash </li></ul></ul>
  35. 35. The Assets Panel <ul><li>Categories include: </li></ul><ul><ul><li>Shockwave </li></ul></ul><ul><ul><li>Movies </li></ul></ul><ul><ul><li>Scripts </li></ul></ul><ul><ul><li>Templates </li></ul></ul><ul><ul><li>Library </li></ul></ul>
  36. 36. Inserting Files with Adobe Bridge <ul><li>Bridge is an easy way to view files outside the Web site before bringing them into the Web site </li></ul><ul><li>Integrated application </li></ul><ul><li>Works with other Adobe programs such as Photoshop and Illustrator </li></ul><ul><li>Use Bridge to add meta tags and search text to your files </li></ul>
  37. 37. Aligning Images <ul><li>Aligning images means to position them in relation to other elements </li></ul><ul><li>Default: </li></ul><ul><ul><li>bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph </li></ul></ul>
  38. 38. Fig. 26: The Assets Panel Drag gripper to undock Images button Category buttons List of images in Web site Site option button Favorites option button Thumbnail of selected image
  39. 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. 40. Fig. 29: Using Adobe Bridge boardwalk.jpeg image is selected
  41. 41. Fig. 31: Left-aligned Club House Image Left-aligned image Text wrapped around image Left-aligned option selected
  42. 42. Enhancing Images <ul><li>Borders </li></ul><ul><li>Add horizontal space </li></ul><ul><li>Brightness/Contrast </li></ul><ul><li>Modify the image and image size using an image editing program </li></ul>
  43. 43. Alternate Text <ul><li>Descriptive text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it </li></ul><ul><li>Makes your Web page viewer-friendly and handicapped accessible </li></ul><ul><li>Priority 1 Checkpoint </li></ul>
  44. 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. 45. Fig. 35: Comparing Images with Horizontal and Vertical Space Image with horizontal and vertical space Image without horizontal and vertical space
  46. 46. Fig. 36: Brightness and Contrast Settings Drag slider to adjust brightness
  47. 47. Fig. 37: Alternate Text Setting Alternate text box
  48. 48. Fig. 38: Alternate Text Displayed in Browser Alternate text displayed on top of image
  49. 49. Fig. 39: Preferences Dialog Box with Accessibility Category Selected Accessibility category Check boxes for Form objects, Frames, Media, and Images
  50. 50. Background Images <ul><li>Keep file size small </li></ul><ul><li>Use a tiled image </li></ul><ul><ul><li>Small graphic that repeats across or down a page </li></ul></ul><ul><li>Or a larger non-tiled image </li></ul><ul><li>Use either a background color or a background image, but not both </li></ul>
  51. 51. Managing Images <ul><li>Adding and removing background images </li></ul><ul><li>Delete files from Web site </li></ul><ul><li>Remove non-Websafe colors from Web site </li></ul>
  52. 52. Fig. 43: Removing a Background Image Selected filename
  53. 53. Fig. 45: Colors Listed in Assets Panel Drag the border to the left to expand panel width Both colors are websafe
  54. 54. Chapter 3 Tasks <ul><li>Create unordered and ordered lists </li></ul><ul><li>Create/apply/edit Cascading Style Sheets </li></ul><ul><li>Add styles and attach Cascading Style Sheets </li></ul><ul><li>Insert and align graphics </li></ul><ul><li>Enhance an image and use alternate text </li></ul><ul><li>Insert a background image and perform site maintenance </li></ul>