When you select an image, you can use the Optimize In Fireworks button in the Properties panel or the Fireworks command on the Image submenu on the Modify menu.. Optimizing Images Using
Trang 1If you have Adobe Fireworks installed on your computer, you can use the program to optimize an image in a Web page from within Dreamweaver When you select an image, you can use the Optimize In Fireworks button in the Properties panel or the Fireworks command on the Image submenu on the Modify menu
Optimizing Images
Using Fireworks
Optimize an Image Using
Fireworks
Open a Web page with the image
you want to optimize
Select the image you want
Click the Window menu, and then
click Properties to display the
Properties panel
Click the Optimize In Fireworks
button in the Properties panel, or
click the Modify menu, point to
Image, point to Edit With, and then
click Fireworks.
Confirm whether to optimize as a
PNG file or use the open image
file
Edit the image file
Click Done.
Click Update.
Click the File menu, and then click
Save.
9
8
7
6
5
4
3
2
1
4
Trang 2Loading graphics onto a Web page has a good and a bad side The good side is that images spice up an otherwise dull and drab Web site
The bad side is that images take up file space and increase download times It's a catch-22 situation; your visitors expect lots of graphics and cool stuff and, at the same time, expect the page to load fast The cur-rent rule on the Internet is called the 8-second rule (it used to be the 10-second rule) In other words if your page doesn't load within 8 sec-onds, many of your visitors will go elsewhere One way to make a page load quicker is to specify low source images for your graphics Low source images are copies of the original image, but severely com-pressed For example, you have an image on your Web site of the Colorado Rocky Mountains and it's 150 k You really want to use the image; however, you know on the average browser it takes 20 seconds
to download the image So, you open a copy of the photograph in an image-editing application like Adobe Photoshop or Fireworks, and you compress the copy to the max, and you save it In Dreamweaver, you use the image for the low-source When the page opens in the visitor's browser, the low source image quickly loads first, and then after the page opens, the higher-quality image loads over the other image
Using Low Source
Images
Use a Low Source Image
Open the Web page that contains
the image you want to apply the
low source
Select the image
Click the Window menu, and then
click Properties to display the
Properties panel
Click in the Src box, and use one
of the following options:
◆ Enter the name and path of the
low source image
◆ Click the Browse For File
button, and locate the file in the
Select Image Source dialog
box
◆ Click the Point To File button,
and drag over to the Assets
panel Release the mouse when
you're hovering over the low
source image file name
4
3
2
Trang 3Once an image is placed into a Web page, Dreamweaver gives you the ability to modify the document in two ways: temporary and permanent
For example, you can adjust the size of the image temporarily by adjust-ing the width and height statements in the Properties panel or by directly accessing the <img> tab You can even select the image, and click and drag the image at a selection handle to change its relative size Unfortunately, while the size of the file on the page might change,
an image saved on the hard drive does not This causes problems with the download of the image to the visitor's site, as well as displaying the image within the visitor's browser The best way to modify an image is
to plan out what you need ahead of time, and then place the image into the Web page That's a nice plan; however, many times, designs change during the course of the creation process, and what worked for
an image yesterday might not work today With that in mind, Dream-weaver gives you the ability to modify the image whenever necessary
After you resize an image, you can reset the size or resample it to add and subtract pixels to match the appearance of the resized image
Modifying Images
Resize an Image
Open a Web page, and then select
the image you want to modify
Click the Window menu, and then
click Properties to display the
Properties panel
Use any of the following resize
methods:
◆ Width or Height Drag a
selection handle
◆ Proportions Shift-drag a corner
selection handle
◆ Specific Size Click in the W
and H boxes to change the size
of the image width and height
(in pixels)
To resample a resized image, click
the Resample button in the
Properties panel
To return a resize image to its
original size, click the Reset Size
button in the Properties panel or
delete the values in the W and H
boxes in the Properties panel
5
4
3
2
Drag to resize
Trang 4Modify an Image Using the
Properties panel
Open a Web page, and then select
the image you want to modify
Click the Window menu, and then
click Properties to display the
Properties panel
Click in the Border box to add a
border to the active image, as
measured in pixels
Click in the V Space, and H Space
boxes to offset your images by
adding vertical or horizontal white
space (in pixels)
Click in the Image Name box to
give the image a specific name
This is useful when calling the
image using JavaScript
Click in the Alt box to give the
image the alternate text used by
reader applications for the visually
impaired
NOTE In some browsers the Alt
text is displayed in the empty box
defined by the browser as the
image loads
6
5
4
3
2
1
Did You Know?
You can edit image accessibility
options Edit the appropriate image
attributes in Code view, edit the Alt box
in the Properties panel, or right-click
(Win) or control-click (Mac) the image,
and then click Edit Tag
Trang 5When you place an image into a Dreamweaver document, the default placement of the image is to the left and middle of the container area, which is a blank Web page, a table cell, or layer Not only is alignment performed on images isolated within a container; they're also aligned according to adjacent images, or text
Aligning Images
Align an Image Using the
Properties panel
Open a Web page, and then select
the image you want to modify
Click the Window menu, and then
click Properties to display the
Properties panel
Click the Align list arrow, and then
select one of the following align
options:
◆ Browser Default No alignment
attribute is included in the
<img> tag Most browsers use
the baseline as the alignment
default
◆ Baseline The bottom of the
image is aligned with the
baseline of the surrounding text
◆ Top The top of the image is
aligned with the top of the
tallest object in the current line
◆ Middle The middle of the
image is aligned with the
baseline of the current line
◆ Bottom The bottom of the
image is aligned with the
baseline of the surrounding text
◆ Text Top The top of the image
is aligned with the tallest letter
or object in the current line
◆ Absolute Middle The middle of
the image is aligned with the
middle of the tallest text or
object in the current line
3
2
1
3
Trang 6◆ Absolute Bottom The bottom of
the image is aligned with the
descenders (as in y, g, p, and so
forth) that fall below the current
baseline
◆ Left The image is aligned to the
left edge of the browser or table
cell, and all text in the current
line flows around the right side
of the image
◆ Right The image is aligned to
the right edge of the browser or
table cell, and all text in the
current line flows around the
left side of the image
Image aligned