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