Presentation is loading. Please wait.

Presentation is loading. Please wait.

© 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images.

Similar presentations


Presentation on theme: "© 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images."— Presentation transcript:

1 © 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images

2 © 2010 Delmar Cengage Learning Chapter 3 Lessons 1.Create unordered and ordered lists. 2.Create, apply, and edit Cascading Style Sheets. 3.Add rules and attach Cascading Style Sheets. 4.Insert and align graphics. 5.Enhance an image and use alternate text. 6.Insert a background image and perform site maintenance.

3 © 2010 Delmar Cengage Learning Breaks up text Increases readability Three types of lists: –Unordered –Ordered –Definitions Formatting Text as Lists

4 © 2010 Delmar Cengage Learning Cascading Style Sheets Saves you time Ensures consistency Applies formatting attributes to an entire site

5 © 2010 Delmar Cengage Learning Using Images to Enhance Web Pages Use graphics sparingly Can complement content of pages Store images in separate folder Three web graphic file formats: –GIF –JPEG –PNG

6 © 2010 Delmar Cengage Learning Creating and Formatting 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 © 2010 Delmar Cengage Learning Creating and Formatting Ordered Lists Called numbered lists Preceded by numbers or letters in a sequence You can apply numbers, Roman numerals, lowercase letters, or uppercase letters to an ordered list.

8 © 2010 Delmar Cengage Learning Creating Definition Lists Definition lists do not have bullets Select paragraphs of text to be included in list Click Text List Definition List

9 © 2010 Delmar Cengage Learning Fig. 1: Expanded Property Inspector Property Inspector expanded to full size Unordered list button Ordered list button List item button Click arrow to collapse Property inspector

10 © 2010 Delmar Cengage Learning Fig. 2: Choosing a Numbered List Style List type list box Numbered list styles

11 © 2010 Delmar Cengage Learning Fig. 4: List Properties Dialog Box Style list arrow

12 © 2010 Delmar Cengage Learning Fig. 5: HTML Tags in Code View for Unordered List 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 © 2010 Delmar Cengage Learning Fig. 7: Spa Page with Ordered List Formatted heading Indented text Bold button Text indent button Click to collapse Property Inspector

14 © 2010 Delmar Cengage Learning Cascading Style Sheets CSS made up of rules –Define the formatting attributes for individual styles CSS also classified by type –ID –Tag –Compound

15 © 2010 Delmar Cengage Learning Types of CSS Saved as a separate file (external style sheet) Head content (internal or embedded) Part of the body of HTML code (inline styles) External saved as.css

16 © 2010 Delmar Cengage Learning Using the CSS Styles Panel To create, edit, and apply Apply CSS styles to a single page or all pages in a website Used for managing your styles

17 © 2010 Delmar Cengage Learning Advantages of Style Sheets Save an enormous amount of time Uniform look Cleaner code Separates development of content from presentation Compliant with current accessibility standards

18 © 2010 Delmar Cengage Learning Understanding CSS Style Sheet Code 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.

19 © 2010 Delmar Cengage Learning Fig. 8: Cascading Style Sheet File New Cascading Style Sheet file

20 © 2010 Delmar Cengage Learning Fig. 11: New CSS Rule Dialog Box Class option for Selector Type New style name Rule Definition list arrow

21 © 2010 Delmar Cengage Learning Fig. 15: Applying a CSS Rule Rule applied Toggle Displaying of CSS Styles button Click to apply bold_blue rule to selected text

22 © 2010 Delmar Cengage Learning Fig. 17: Editing a Rule Font-size list arrow Properties of the bold_blue rule Click 14 on this menu

23 © 2010 Delmar Cengage Learning The Style Rendering Toolbar Render your page as different media type –Print –T.V. –Handheld

24 © 2010 Delmar Cengage Learning Fig. 23: Using Code and Design Views to Edit a Rule Replace color 006 with 306 You can also edit the color in the CSS Styles panel

25 © 2010 Delmar Cengage Learning Add Rules and Attach Style Sheets External.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.

26 © 2010 Delmar Cengage Learning Fig. 25: Adding a Rule to a CSS Style Sheet New rule name

27 © 2010 Delmar Cengage Learning Fig. 26: Formatting Options for Heading Style

28 © 2010 Delmar Cengage Learning Fig. 29: Attaching a Style Sheet to a Page su_styles.css style sheet selected Link option button

29 © 2010 Delmar Cengage Learning Understanding Graphic File Formats Three primary graphic file formats: –GIF –JPEG –PNG

30 © 2010 Delmar Cengage Learning GIF Graphic Interchange Format Downloads very quickly Limited in color Can show transparent areas

31 © 2010 Delmar Cengage Learning JPEG Joint Photographic Experts Groups Can display many colors Photographs are often saved in this format

32 © 2010 Delmar Cengage Learning PNG Portable Network Graphics Shares advantages of GIFs and JPEGs Not universally recognizable by older browsers

33 © 2010 Delmar Cengage Learning The Assets Panel Located in the Files panel group Displays all the assets in a website Has Favorites button Contains nine categories

34 © 2010 Delmar Cengage Learning The Assets Panel Images Colors URLs SWF Shockwave Movies Scripts Templates Library

35 © 2010 Delmar Cengage Learning Inserting Files with Adobe Bridge Bridge is an easy way to view files outside the website before bringing them into the website Integrated application Works with other Adobe programs such as Photoshop and Illustrator Use Bridge to add meta tags and search text to your files

36 © 2010 Delmar Cengage Learning 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

37 © 2010 Delmar Cengage Learning Fig. 31: The Assets Panel 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 © 2010 Delmar Cengage Learning Fig. 32: Striped Umbrella about_us Page with Inserted Image 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 © 2010 Delmar Cengage Learning Fig. 36: Left-aligned Club House Image Left-aligned club house image Text wrapped around club house image Left-aligned option selected

40 © 2010 Delmar Cengage Learning Enhancing Images Borders Add horizontal and vertical space Add alternate text

41 © 2010 Delmar Cengage Learning 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

42 © 2010 Delmar Cengage Learning Fig. 39: Using Property Inspector to Add a Border Selected image with 1-pixel border V Space text box H Space text boxBorder text box

43 © 2010 Delmar Cengage Learning Fig. 42: Alternate Text Setting Alt text box

44 © 2010 Delmar Cengage Learning 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

45 © 2010 Delmar Cengage Learning Managing Images Adding and removing background images Delete files from website

46 © 2010 Delmar Cengage Learning Removing Colors from a Website You can use the Assets panel to locate non- web-safe colors in a website. Non-web-safe colors are colors that may not be displayed uniformly across computer platforms.

47 © 2010 Delmar Cengage Learning Fig. 49: Images Listed in Assets Panel Images file list after removing umbrella_back.gif and stripes_back.gif

48 © 2010 Delmar Cengage Learning Fig. 50: Colors Listed in Assets Panel All colors are web-safe Drag the border to the left to expand panel width


Download ppt "© 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images."

Similar presentations


Ads by Google