Title: Macromedia%20Dreamweaver%208
1Macromedia Dreamweaver 8
- Unit E
- Using and Managing Images
2U 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
3U 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
4Inserting 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
5Inserting 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
6Inserting an Image
7Aligning 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
8Aligning 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
9Aligning an Image
10Aligning an Image
11Enhancing 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
12Enhancing 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
13Enhancing an Image
14Clues 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
15Using 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
16Using 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
17Using Alternate Text and Setting Accessibility
Preferences
18Using Alternate Text and Setting Accessibility
Preferences
19Clues 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
20Viewing 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
21Viewing the Assets Panel
22Clues 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
23Using 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
24Using 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
25Using the Assets Panel to Insert Flash Text
26Clues 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
27Inserting 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
28Inserting 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
29Inserting a Background Image
30Deleting 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
31Deleting 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
32Deleting Image Files from a Web Site
33Creating and Finding Imagesfor a Web Site
- Original images
- Transparent backgrounds
- Original photography
- Clip art collections
- Royalty-free
- The Internet
- Public domain
34Creating and Finding Imagesfor a Web Site
35Creating and Finding Imagesfor a Web Site
36U 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
37U 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