1. To insert an image, place the cursor where you’d like the image to appear on your page (in Design view) or in your code (in Code view) and go to Insert > Image.
2. In the dialog box that appears, locate and select the image that you’d like to add.
3. Once you’ve selected an image, the Image Tag Accessibility Attributes dialog box will open, prompting you to enter alternate text sometimes called alt text. This text will appear if a user viewing your page is using a non visual browser or if your image can’t load for some reason. Adding alt text is also helpful for search engine optimization (SEO) because alt text can help search engines find and categorize your page.
4. It’s important to use the correct file format and resolution when formatting images for Dreamweaver and the web. A resolution size of 72dpi is easily viewable on a PC. JPEG, PNG, or GIF files are the most popular file formats. PNG files are new to web page development and may not be recognized on all browsers. JPEG and GIF files are the most common. JPEG files are best for photos while GIF files formats are best for logos or basic solid color graphics.
5. To ensure that Dreamweaver will recognize your images and add them to your Files panel, save all your images in your site’s local root folder. You can create, edit, and save image files in other folders, but always be sure to save a final version in your local root folder. The file must be located in the local root directory in a folder called Images that is within the Assets folder.
6. You can use the Properties inspector to set or update various attributes of each image in the current document. To edit an image’s properties, click on the image (in Design view). The Properties inspector will then show all of the image’s modifiable properties, including border, padding, alt text, source (the path to the image in HTML), alignment, and more.
7. The Properties inspector also includes a few editing options such as Crop, Brightness/Contrast, and Sharpen, as well as a feature called Roundtrip Editing that works with graphics programs such as Photoshop and Fireworks. Any of the built-in editing commands will first warn you that Dreamweaver will permanently alter the image on your hard drive. You can undo these edits only while your file is still open.

Rollover Images

Simple rollovers consist of two graphics. The original state graphic (out graphic) appears on the screen initially while the over state graphic appears when the user moves the mouse over the graphic. The second graphic is linked to the image of the original graphic.

Disjointed rollovers happen when you move the cursor over an image and it changes another image (disjointing). You aren't actually changing the original image, you are disjointing it when you interact with it. It is bascially swapping the original image for another image through the Behaviors panel by linking the images.

Navigation bars with multiple rollover states consits of 4 "states". The states include Up, Over, Down and Over while down. The Up state is basically when your page loads and comes "up". The Over state is when you roll "over" the navigation button. The "Down" state is when the graphic appears after you click the "over" state. The final state is the Over while down. This happens when you move the cursor over the down state. This is similar to the "Over" state, except it works on the "Down" state only. Each navigation button is linked to a .gif file that displays each "state", provides alternate text, and is programmed to link to its original page.

Flash buttons have similar characteristics to the other rollovers (i.e. they have an up state and an over state). They can also link to other pages, which make that an effective tool in navigation. They do not have to be created in programs such as Fireworks or Photoshop to use them like you do other buttons. A flash button is a .swf file instead of a JPEG or GIF file. The button is actually created in Dreamweaver in only a few short steps and can easily be edited.

Editing Images

I found these 3 sites to be the most helpful in describing image file size:

1. File Size vs. Image Size


2. Wikipedia: File Size


3. Digital File Types Explained

Image size must be considered when placing it on a web page because it affects the download time of the page. If it takes too long for a page to load due to large image sizes, a user will frequently navigate away from a site. Images must be optimized for proper display on the Web. Optimizing an image by correcting the size and format will ensure that a page will load quickly.

Dimensional size is the physical size of your image in terms of width and height. The dimension can be controlled by changing the file resolution, cropping out unnecessary image elements, or by resizing the file in a graphics-editing program.

File size is the amount of memory needed to store an image document. File format also affects the image size. Examples of file formats are: JPG, TIF, GIF, PNG, etc. File size must also be considered when designing web pages. File size will also affect download time. The more time a user waits on downloading, the more likely they will stray to another site. This could possibly mean a lost sale to your business. Smaller is better when it comes to image size and file size.