Macromedia%20Dreamweaver%208 - PowerPoint PPT Presentation

About This Presentation
Title:

Macromedia%20Dreamweaver%208

Description:

Macromedia Dreamweaver 8 Unit E Using and Managing Images – PowerPoint PPT presentation

Number of Views:173
Avg rating:3.0/5.0
Slides: 38
Provided by: Micros416
Learn more at: http://sbuweb.tcu.edu
Category:

less

Transcript and Presenter's Notes

Title: Macromedia%20Dreamweaver%208


1
Macromedia Dreamweaver 8
  • Unit E
  • Using and Managing Images

2
U n i t O b j e c t i v e s
  • Insert an image
  • Align an image
  • Enhance an image
  • Use alternate text and set Accessibility
    preferences
  • View the Assets panel

3
U n i t O b j e c t i v e s
  • Use the Assets panel to insert Flash text
  • Insert a background image
  • Delete image files from a Web site
  • Create and find images for a Web site

4
Inserting an Image
  • Open The Striped Umbrella Web site, open
    dwe_1.html from the drive and folder where your
    Unit E Data Files are stored, then save it as
    about_us.html in the striped_umbrella root
    folder, overwriting the existing file, and not
    updating the links
  • Click the Attach Style Sheet button in the CSS
    Styles panel, attach the su_styles.css style
    sheet, then apply the body_text style to all of
    the paragraph text on the page
  • Click to place the insertion point in front of
    When in the first paragraph, click the Insert bar
    list arrow, click Common, click the Images list
    arrow in the Insert bar, then click Image to open
    the Select Image Source dialog box, navigate to
    the Unit E Data Files assets folder, double-click
    club_house.jpg, open the Files panel if
    necessary, then click the Refresh button on the
    Files panel toolbar

5
Inserting an Image
  • Save the file, click the Assets panel tab, click
    the Images button on the Assets panel if
    necessary, then click the Refresh Site List
    button at the bottom of the Assets panel
  • Repeat the third and fourth steps to insert the
    boardwalk.jpg image at the beginning of the
    second paragraph
  • Repeat the third and fourth steps to add the
    pool.jpg, sago_palm.jpg, and sports_club.jpg
    files at the beginning of each of the next
    paragraphs

6
Inserting an Image
7
Aligning an Image
  • Scroll to the top of the page, click the club
    house image to select it, click the Property
    inspector expander arrow to expand it if
    necessary, then click the Align list arrow on the
    Property inspector
  • Click Left
  • Scroll down the page, click the boardwalk image
    to select it, click the Align list arrow on the
    Property inspector, then click Right
  • Repeat the previous three steps to align the next
    three images, alternating the alignment between
    left and right

8
Aligning an Image
  • Save your work
  • Click the Preview/Debug in Browser button on the
    Document toolbar, then click Preview in your
    browser name
  • Close the browser

9
Aligning an Image
10
Aligning an Image
11
Enhancing an Image
  • Click the club house image to select it
  • Type 1 in the Border text box, then press Tab
    to apply the border size
  • Repeat the first two steps for the other four
    images
  • Click the club house image to select it, type 10
    in the V Space text box on the Property
    inspector, press Tab, type 10 in the H Space
    text box, press Tab, then deselect the image

12
Enhancing an Image
  • Repeat the previous step for the rest of the
    images
  • Click the sago palm image to select it, click the
    Crop button on the Property inspector, then click
    OK to close the warning message that you are
    about to permanently alter the image
  • Position the pointer over the bottom-center
    resizing handle, slowly move the handle up toward
    the center of the image to remove part of the
    lower leaves, then double-click the image to crop
    it
  • Click Edit on the menu bar, click Undo Crop to
    restore the image to the original size, then save
    the file

13
Enhancing an Image
14
Clues to Use
  • Resizing an image using the Property inspector
  • Drag the images selection handle to resize the
    image
  • Dragging a selection handle distorts the image
  • Hold to Shift key to avoid distortion

15
Using Alternate Text and Setting Accessibility
Preferences
  • Click the club house image to select it, type The
    Striped Umbrella Club House in the Alt text box
    on the Property inspector, press Tab, then save
    the file
  • Preview the page in your browser, then place your
    pointer over the club house image When the
    pointer is over the image, a small text box
    containing the alternate text appears on the
    screen
  • Close your browser window
  • Click the boardwalk image to select it, type
    Boardwalk to the beach in the Alt text box on the
    Property inspector, then press Tab
  • Click the pool image to select it, type The pool
    area in the Alt text box on the Property
    inspector, then press Tab

16
Using Alternate Text and Setting Accessibility
Preferences
  • Click the palm image to select it, enter Sago
    palm in the Alt text box on the Property
    inspector, then press Tab
  • Click the sports club image to select it, enter
    The Sports Club in the Alt text box on the
    Property inspector, then press Tab
  • Click Edit (Win) or Dreamweaver (Mac) on the menu
    bar, click Preferences, click Accessibility in
    the Category list, if necessary, click the the
    four options shown to select them if necessary,
    then click OK
  • Save your work, preview the page in your browser,
    then place your pointer over each image on the
    page
  • Close your browser to return to the Dreamweaver
    window

17
Using Alternate Text and Setting Accessibility
Preferences
18
Using Alternate Text and Setting Accessibility
Preferences
19
Clues to Use
  • Alternate text limits
  • Alternate text stays on the screen for a limited
    time
  • Avoid using over 50 characters
  • Create a separate file for alternate text over 50
    characters
  • Enter the location of the file in the Long
    Description text box

20
Viewing the Assets Panel
  • Click the Assets tab in the Files panel group, if
    necessary
  • Click each category button on the Assets panel
  • Click the Colors button to display the Colors
    category
  • Click the Flash button on the Assets panel, then
    click the Play button to see the Flash text
    preview
  • Click the Stop button

21
Viewing the Assets Panel
22
Clues to Use
  • Using Favorites in the Assets panel
  • You can place assets you use repeatedly in the
    Favorites list in the Assets panel
  • You can right-click (Win) or ctrl-click (Mac)
    an image on a Web page, then click Add to Image
    Favorites. When you click the Favorites option in
    the Assets panel, you will see the image in the
    list

23
Using the Assets Panel to Insert Flash Text
  • With the about us page open in Design View, place
    the insertion point at the bottom of the page,
    then press Enter (Win) or return (Mac)
  • Click the Assets tab, if necessary, then click
    the Flash button to view the Flash category in
    the Assets panel
  • Click the Play button in the upper-right corner
    of the Assets preview window, then move the
    pointer over the word Home
  • Click the Stop button to stop the movie
  • Click home.swf in the Assets panel to select it
    if necessary, click Insert at the bottom of the
    Assets panel, then type Flash text link to home
    page in the Object Tag Accessibility Attributes
    dialog box, then click OK

24
Using the Assets Panel to Insert Flash Text
  • Save your work, then preview the page in your
    browser
  • Scroll to the bottom of the page, then click Home
  • Close your browser window
  • Click the Show Code View button , scroll to view
    the Flash text code, click on the page to
    deselect the code, then examine the code
  • Click the Show Design View button

25
Using the Assets Panel to Insert Flash Text
26
Clues to Use
  • Deleting images from the Assets panel
  • Right-click (Win) or ctrl-click (Mac) the image
    in the Assets panel
  • Click Locate in Site
  • Select and delete the filename, responding
    appropriately to any warning messages
  • You cannot delete files directly from the Assets
    panel

27
Inserting a Background Image
  • Click Modify on the menu bar, then click Page
    Properties
  • Click Browse next to the Background image text
    box, click the drive and folder where your Unit E
    Data Files are stored, double-click the assets
    folder if necessary, double-click
    umbrella_back.gif, then click OK
  • Click Modify on the menu bar, click Page
    Properties, click Browse next to the Background
    image text box, click the drive and folder where
    your Unit E Data Files are stored, doubleclick
    the assets folder, double-click stripes_back.gif,
    then click OK

28
Inserting a Background Image
  • Click Modify on the Document window menu bar,
    then click Page Properties
  • Highlight the information in the Background image
    text box, press Delete, then click OK to close
    the Page Properties dialog box
  • Save your work

29
Inserting a Background Image
30
Deleting Image Files from a Web Site
  • Display the Assets panel, if necessary click the
    Images button on the Assets panel, verify that
    the Site option is selected, then click the
    Refresh Site List button to refresh the list of
    images
  • Right-click (Win) or ctrl-click (Mac)
    stripes_back.gif in the Assets panel, then click
    Locate in Site
  • Press Delete to delete the file, click Yes in
    the dialog box asking if you really want to
    delete the file, display the Assets panel, then
    click on the Assets panel to refresh the list of
    images

31
Deleting Image Files from a Web Site
  • Right-click (Win) or ctrl-click (Mac)
    umbrella_back.gif in the Assets panel, then click
    Locate in Site
  • Press Delete to delete the file, click Yes in
    the dialog box asking if you really want to
    delete the file, display the Assets panel, then
    click to refresh the list of images
  • Save your work, then preview your file in your
    browser
  • Close the page, then Exit (Win) or Quit (Mac)
    Dreamweaver

32
Deleting Image Files from a Web Site
33
Creating and Finding Imagesfor a Web Site
  • Original images
  • Transparent backgrounds
  • Original photography
  • Clip art collections
  • Royalty-free
  • The Internet
  • Public domain

34
Creating and Finding Imagesfor a Web Site
35
Creating and Finding Imagesfor a Web Site
36
U n i t S u m m a r y
  • Insert an image
  • Align an image
  • Enhance an image
  • Use alternate text and set Accessibility
    preferences
  • View the Assets panel

37
U n i t S u m m a r y
  • Use the Assets panel to insert Flash text
  • Insert a background image
  • Delete image files from a Web site
  • Create and find images for a Web site
Write a Comment
User Comments (0)
About PowerShow.com