|
Intro & Account
Setup | Getting Started With Dreamweaver
MX | Program Layout | Making
a Page | Page Properties
Text and Text Properties | Cascading
Style Sheets | Tables | Images | Links
Publishing | Templates
| Collaborating | Outside
Resources
Images are an important part of the web. If you don't have images,
you tend to not "appeal" to the eye of the average visitor.
Then again, if you have too much to look at, you'll be on the verge
of distracting your visitors from the textual content of the site!
While you will learn how to incorporate images into your page, you
should stay realistic and keep the page organized with the text
and images (and of course, only include images that are relevant
to your site).
Where to Get Images
You can obtain images for your page from a wide variety of places.
Many computer labs have at least one scanner equipped to a computer.
You are encouraged to seek out your own real, physical images (such
as taking photographs) which you can scan into a digital file for
an image. This is preferred because it shows a serious effort has
been put into the site. However, it is also possible to scan images
from things such as magazines and books. If you need help using
the scanner, ask a computer lab assistant, who will be able to assist
you.
You can also obtain images from other sources on the Internet,
even other websites. Here are some useful starting points:
There are many, many other places to find images. Other search
engines may also have image searches. Other than search engines,
different sites relating to YOUR site's topic may include images.
Before using any images from other websites, be sure to take some
factors into consideration. Are the images copywritten? If so, you
may not be able to use them. Try to use images that you feel are
widely used, already, across the Internet. If you do use images
from other sites, it is generally proper "netiquette"
to include a small credit and link back to the site where the image
(or images) were obtained.
After you have collected your images, be sure to place them somewhere
close to your web page documents. This is generally in one of two
places:
1. The exact same directory (folder) where your web page documents
are stored
2. A folder within that directory entitled "images" that
you will save ALL images to for your site
This is necessary to keep your files organized.
Inserting an Image
Place the cursor where you would like to insert an image (it can
even be inside a table's cell). Go to the "Insert" menu
at the top of the screen, and click "Image.”
You can also select "Insert Image" in the “Common”
tab on the “Insert” panel on the top of the screen.
The "Select Image Source" box should then appear. Browse
to where your images are saved, and select the file you wish to
import into the web page.
On the far right, you will be able to see an Image Preview of the
image you selected. This is useful if you do not quite remember
the exact filename you have given to images. Below the image preview,
it will list the dimension (in pixels) of the image, the filesize,
and approximately how long it will take to load on a standard dial-up
Internet connection. Click “OK” to insert the image
into a page.
Dreamweaver MX supports three formats of images.
GIF (*.gif") is the format standardized by
CompuServe years ago. It's geared towards images that do not need
to be viewed with a large amount of colors. The standard GIF file
will be of 256 colors or less. This is perfect for the Internet,
and more specifically, images that will appear directly on a web
page.
JPG or JPEG (*.jpg, *.jpeg) is the format created
by the Joint Photographic Experts Group. It is geared towards images
of a "real world" or "natural" sense, such as
photographs. It generally is of thousands of colors or grayscale.
JPEG can hold up to 16 million colors. High quality, larger images
stored in a website's "Image Gallery" may be saved as
JPEGs.
PNG (*.png), or "Portable Network Graphics,"
is a lossless image compression (meaning that even when an image
is saved as a PNG file, it will look exactly the same as the original
file, unlike GIF and JPG). While it is not in extremely wide use,
it has its advantages over other formats in that it does not lose
any quality. This does mean, however, the filesize will generally
be larger.
Once you have selected the image you wish to import, click the
"Select" button.
Images Relative to a Location
When you insert an image into your page, the "Select Image
Source" window (see above) will ask you what you want your
image relative to. What this means is that when an image is inserted
to your web page, the web will try to find the image located relative
to the web page file itself, or in a folder in what is called the
"Site Root."
When your image has been inserted into your page, Dreamweaver MX
automatically creates a reference to that file in the HTML source
code. To make sure that this reference is correct, the image file
must be in the current site. If it is not in the current site, Dreamweaver
MX asks whether you want to copy the file to the root folder.
Aligning & Wrapping Text
Once you have imported an image, you are free to format and move
it in any way. To move an image, simply click and drag the image
to your desired location. When first imported, the image will most
likely push the text away from it and take up a large amount of
room, leaving a lot of white space. You can either keep it this
way, or it is also possible to wrap the text around your image.
If you want to keep the image in between lines of text, per say,
you can do this, and either align the image to the left, the center,
or the right. To do this, click and select the image.
The Properties palette will change so that you can now format your
image.
Directly below the "Reset Size" button on the lower right
are three buttons. The first is to align the image to the left,
the second to align to the center, and the third to align right.
To wrap the text around an image, use the "Align" drop-down
menu at the far bottom right of the Properties palette. The two
options you will probably want are "Left" and "Right."
If you select "Left," the image will be aligned to the
left-hand side of your document (or table cell), and the text will
wrap around the top, right hand side, and bottom of the image. If
you select "Right," the image will be aligned to the right,
and the text will wrap around the top, left hand side, and bottom
of the image.
Alt Tags
On many websites, you may notice that if you put your cursor over
an image, a tiny window of text will appear. These are controlled
through "Alt Tags." Specifying Alt Tags is good design
practice. If a visitor stops loading the page before the image is
fully loaded, the Alt Tag text will appear in the image space instead.
More importantly, Alt Tags are used to make your site more accessible
to visitors with disabilities.
After selecting in image, in the new Properties palette, you can
enter in this text in the "Alt" box on the far right.
Now, once your page is complete and on the web, if you place the
cursor over the image, that text will appear.
Borders
Images sometimes look better if they have a border around them.
You can do this by clicking your image, and entering in a number
next to the word "Border" (towards the right) in the Properties
menu. This is also measured in pixels.
Resizing Images
It is also possible to resize the image in the new Properties window.
"W" stands for the width of the image, and "H"
for the height of the image. These numbers are measured in pixels.
You can change them to whatever you wish in order to make the image
the size of your liking.
Another way to resize an image is by clicking and dragging the
tiny squares on the corners of the image.
If you make a mistake with the size of an image, you can click
the "Reset Size" button in the lower right of the image
Properties window to set the image back to its original imported
size.
Resizing an image in Dreamweaver MX does not physically change
the properties of the image. You are not really resizing the image,
but rather, telling Dreamweaver MX the size at which to display
an image on a web page. If you are familiar with Adobe Photoshop,
or another image editing program, it is recommended that you edit
images there.
>> next
|
