leafning objectives project files required submission files

LEAFNING OBJECTIVES
I Modify images within Dreamweaver
U Add or edit alt text for images
INTRODUCTION
Although Dreamweaver is basically an HTML editor, it also provides some tools for editing
web images. You can resize, crop, resample, adjust brightness and contrast, and sharpen
images f-rom inside the program. You can also access Dreamweaver's lmage Optimization
dial6g box by simply right-clicking on any image and selecting that option from the context
ren,i. The lmage Optimization dialog box allows you to resize an image and convert it from
one file format to another. Changes made in this dialog box are permanent and saved to the
image file itself.
ln this exercise, you will perform some basic image-editing functions.
PROJECT FILES
I about-us.html
U
u
ll
eiffel-tower.jPg
pisa.jpg
san-francisco.tif
REQUIRED SUBMISSION FILES
I
n
I
I
about-us.html
eiffel-tower.jPg
pisa.jpg
san-francisco.jPg
GFIADING RUBFiIC
You will be graded according to the following criteria:
!
n
!
I
!
Did you insert eiffeUower.jpg into about-us.html?
Did you apply the class .fltrt to eiffel-tower.jpg?
Did you erop eiffel-tower.jpg to a width ol 215 pixels?
Did you insert Pisa.jPg?
Did you resize and resample pisa.jpg to 200 x 200 pixels?
kluts,
I
did
*t t''ol',^sl th, lnst vcll fir *ft)s k^so,r,
ons
Pt;"e ffiro, ,ovt 1ro, >d'pltc W lesTu-vi4 1il" t"t*"rdtus
gi,rrtn Yy fh" aytL,oc So'^" minor oh,Af*tttt adv neLese
INSTRUCTIONS
1. Open about_us.html and insert the cursor at the beginning of the second paragraph
starting Favorite City Tour.... lnsert the eiffel_tower.jpg image. Type "EiffelTower,
Paris" for the alt text, and apply the class .fltrt to eiffet_tower.jpg.
Note: lf necessary, first define a new site targeting the DW08-ProjectFiles folder.
2.
With the image selected, click the Crop tool in the Property inspector. Crop
eiffel_tower.jpg to 215 x 500 pixels.
Note: Remember to double-click on the image or press Return to complete the cropping.
3.
lnsert the cursor at the beginning of the eighth paragraph, starting with These three
ideas.... lnsert the pisa.jpg image. Type "Leaning Tower, Pisa" for the alt text, and
apply the class .fltlft to pisa.jpg. Resize the image to 200 x 200 pixels. With the image
selected, click the Resample tool in the Property inspector.
4. Launch Photoshop. Open and copy san_francisco.tif.
5. ln Dreamweaver, insert the cursor in the placeholder text in div.sidebarl. Using the
Tag selectors, move the cursor before the opening <p> tag. Paste the image. Use
the Property inspector to resize the image to 195 x 260 pixels. Save the image in
JPEG format at a quality setting of 80. Enter "San Francisco Cable Ca/'for the alt
text.
6.
With the image selected, click the Brightness and Contrast tool in the Property
inspector. Adjust the Brightness to a setting between 20-30, and the Contrast to a
setting between 25-35. Click OK to complete the adjustment.
7.
Replace the placeholder text with "What are you waiting for? Jump on board for the
next tour!"
B.
Save allfiles.