Dreamweaver chapter 03

3,486 views

Published on

Published in: Education, Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
3,486
On SlideShare
0
From Embeds
0
Number of Embeds
1,806
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Dreamweaver chapter 03

  1. 1. Chapter 3 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 rules 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>© 2010 Delmar Cengage Learning
  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>Formatting Text as Lists © 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  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 images in separate 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>© 2010 Delmar Cengage Learning
  6. 6. Creating and Formatting 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>© 2010 Delmar Cengage Learning
  7. 7. Creating and Formatting Ordered Lists <ul><li>Called numbered lists </li></ul><ul><li>Preceded by numbers or letters in a sequence </li></ul><ul><li>You can apply numbers, Roman numerals, lowercase letters, or uppercase letters to an ordered list. </li></ul>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  9. 9. Fig. 1: Expanded Property Inspector © 2010 Delmar Cengage Learning <ul><ul><li>Property Inspector expanded to full size </li></ul></ul><ul><ul><li>Unordered list button </li></ul></ul><ul><ul><li>Ordered list button </li></ul></ul><ul><ul><li>List item button </li></ul></ul><ul><ul><li>Click arrow to collapse Property inspector </li></ul></ul>
  10. 10. Fig. 2: Choosing a Numbered List Style © 2010 Delmar Cengage Learning List type list box Numbered list styles
  11. 11. Fig. 4: List Properties Dialog Box © 2010 Delmar Cengage Learning Style list arrow
  12. 12. Fig. 5: HTML Tags in Code View for Unordered List © 2010 Delmar Cengage Learning Beginning and ending tags for unordered list First pair of tags for the first list item in the list In Step 2, click to open the List Properties dialog box
  13. 13. Fig. 7: Spa Page with Ordered List © 2010 Delmar Cengage Learning Formatted heading Indented text Bold button Text indent button Click to collapse Property Inspector
  14. 14. Cascading Style Sheets <ul><li>CSS made up of rules </li></ul><ul><ul><li>Define the formatting attributes for individual styles </li></ul></ul><ul><li>CSS also classified by type </li></ul><ul><ul><li>ID </li></ul></ul><ul><ul><li>Tag </li></ul></ul><ul><ul><li>Compound </li></ul></ul>© 2010 Delmar Cengage Learning
  15. 15. Types of CSS <ul><li>Saved as a separate file (external style sheet) </li></ul><ul><li>Head content (internal or embedded) </li></ul><ul><li>Part of the body of HTML code (inline styles) </li></ul><ul><li>External saved as .css </li></ul>© 2010 Delmar Cengage Learning
  16. 16. Using the CSS Styles Panel <ul><li>To create, edit, and apply </li></ul><ul><li>Apply CSS styles to a single page or all pages in a website </li></ul><ul><li>Used for managing your styles </li></ul>© 2010 Delmar Cengage Learning
  17. 17. Advantages of Style Sheets <ul><li>Save an enormous amount of time </li></ul><ul><li>Uniform look </li></ul><ul><li>Cleaner code </li></ul><ul><li>Separates development of content from presentation </li></ul><ul><li>Compliant with current accessibility standards </li></ul>© 2010 Delmar Cengage Learning
  18. 18. Understanding CSS Style Sheet Code <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>© 2010 Delmar Cengage Learning
  19. 19. Fig. 8: Cascading Style Sheet File © 2010 Delmar Cengage Learning New Cascading Style Sheet file
  20. 20. Fig. 11: New CSS Rule Dialog Box © 2010 Delmar Cengage Learning Class option for Selector Type New style name Rule Definition list arrow
  21. 21. Fig. 15: Applying a CSS Rule © 2010 Delmar Cengage Learning Rule applied Toggle Displaying of CSS Styles button Click to apply bold_blue rule to selected text
  22. 22. Fig. 17: Editing a Rule © 2010 Delmar Cengage Learning Font-size list arrow Properties of the bold_blue rule Click 14 on this menu
  23. 23. The Style Rendering Toolbar <ul><li>Render your page as different media type </li></ul><ul><ul><li>Print </li></ul></ul><ul><ul><li>T.V. </li></ul></ul><ul><ul><li>Handheld </li></ul></ul>© 2010 Delmar Cengage Learning
  24. 24. Fig. 23: Using Code and Design Views to Edit a Rule © 2010 Delmar Cengage Learning Replace color “006” with “306” You can also edit the color in the CSS Styles panel
  25. 25. Add Rules and Attach Style Sheets <ul><li>External .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>© 2010 Delmar Cengage Learning
  26. 26. Fig. 25: Adding a Rule to a CSS Style Sheet © 2010 Delmar Cengage Learning New rule name
  27. 27. Fig. 26: Formatting Options for Heading Style © 2010 Delmar Cengage Learning
  28. 28. Fig. 29: Attaching a Style Sheet to a Page © 2010 Delmar Cengage Learning su_styles.css style sheet selected Link option button
  29. 29. Understanding Graphic File 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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  33. 33. The Assets Panel <ul><li>Located in the Files panel group </li></ul><ul><li>Displays all the assets in a website </li></ul><ul><li>Has Favorites button </li></ul><ul><li>Contains nine categories </li></ul>© 2010 Delmar Cengage Learning
  34. 34. The Assets Panel <ul><li>Images </li></ul><ul><li>Colors </li></ul><ul><li>URLs </li></ul><ul><li>SWF </li></ul><ul><li>Shockwave </li></ul><ul><li>Movies </li></ul><ul><li>Scripts </li></ul><ul><li>Templates </li></ul><ul><li>Library </li></ul>© 2010 Delmar Cengage Learning
  35. 35. Inserting Files with Adobe Bridge <ul><li>Bridge is an easy way to view files outside the website before bringing them into the website </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>© 2010 Delmar Cengage Learning
  36. 36. 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>© 2010 Delmar Cengage Learning
  37. 37. Fig. 31: The Assets Panel © 2010 Delmar Cengage Learning Drag title bar to undock tab group Images button Category buttons Drag any panel border or corner to resize Site option button Favorites option button Thumbnail of selected image List of images in website
  38. 38. Fig. 32: Striped Umbrella about_us Page with Inserted Image © 2010 Delmar Cengage Learning club_house jpg file inserted Path should begin with the word “assets” Click Image to insert an image Style sheet is attached Inserted file listed in the assets folder
  39. 39. Fig. 36: Left-aligned Club House Image © 2010 Delmar Cengage Learning Left-aligned club house image Text wrapped around club house image Left-aligned option selected
  40. 40. Enhancing Images <ul><li>Borders </li></ul><ul><li>Add horizontal and vertical space </li></ul><ul><li>Add alternate text </li></ul>© 2010 Delmar Cengage Learning
  41. 41. 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>© 2010 Delmar Cengage Learning
  42. 42. Fig. 39: Using Property Inspector to Add a Border © 2010 Delmar Cengage Learning Selected image with 1-pixel border V Space text box H Space text box Border text box
  43. 43. Fig. 42: Alternate Text Setting © 2010 Delmar Cengage Learning Alt text box
  44. 44. 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>© 2010 Delmar Cengage Learning
  45. 45. Managing Images <ul><li>Adding and removing background images </li></ul><ul><li>Delete files from website </li></ul>© 2010 Delmar Cengage Learning
  46. 46. Removing Colors from a Website <ul><li>You can use the Assets panel to locate non-web-safe colors in a website. </li></ul><ul><li>Non-web-safe colors are colors that may not be displayed uniformly across computer platforms. </li></ul>© 2010 Delmar Cengage Learning
  47. 47. Fig. 49: Images Listed in Assets Panel © 2010 Delmar Cengage Learning Images file list after removing umbrella_back.gif and stripes_back.gif
  48. 48. Fig. 50: Colors Listed in Assets Panel © 2010 Delmar Cengage Learning All colors are web-safe Drag the border to the left to expand panel width

×