Untitled Document

Adding Images

Home | Resume | Philosophy | Dreamweaver

Step 1 - Create an images folder within "My Test Site".
Click on the file index.htm, to ensure that you are in the "Site" file manager.

Step 2 - Click "File", then "New Folder"

Step 3 - Change name of the folder to "images"

Step 4 - Locate and click the "Insert Image" button.

Step 5 - Locate an image to be inserted on your computer.
Use the "Look in" to find the folder with the image you want.
Then click on the image file name to select.

Note - If you want to use an image that is online, specify the location in the "URL" section,
instead of the "File name" section.

Tip - The image preview can be useful if u have multiple images to choose from.

Image Preview breakdown

400 x 300 - size of image
JPEG, - file type

79K - File size
/22 - seconds to download on a telephone connection.

Click "OK" after image is selected.

Note:
If the file is outside the "My Test Site" folder, then you will be prompted to choose to save the image file to this folder. Choose "yes" to let Dreamweaver save to your folder, otherwise you could have an image that does not display properly when published.

Step 6 - If this message pops up click "Yes".
This will save a copy of the image to your web site.
This is good because it will prevent broken links and keep the web site files organized.

Step 7 - Save copy of image.
You may choose to change the file name prior to saving.

Step 8 - Click the Refresh button.

Note: Clicking the refresh button allows you to view the new image file saved to the web site.

Tip: You can drag the image files to the images folder for organization purposes. The folders function the same way Windows Explorer folders do:

"-" - Collapses the contents of a folder.
"+" - Displays the contents of the folder.

Well done!

Tip: Below are some additional methods to save images into your web site.

Right click on the flower image above and choose "Save Picture as" from the menu.
Save the image to the "My Test Site" folder.
You can also search for an image by using the goggle link created previously.
Then use the right click method to save the image.
(Caution: Do Not publish or use copyrighted material as your own.)

You have inserted your image onto the page.
Now lets locate the image properties.

Step 8 - Locate the Image properties at the bottom of the screen

Note: The image properties appear when the image is selected.

Tip: Look for the highlighted squares illustrated in Figure.

Step 9 - : Click the page and notice the properties change to "text" mode.
Click the image and notice the properties change to "image" mode.

Step 10 - Learn the basic options for the image properties.

- The file size of the image.

- The width of the image.

- The height of the image.

- The image source.

- The image hyperlink.

Note: The image size is not constrained when resized.
Recommendation is to change the size in an image program like Fireworks MX and save to replace.

- Shortcut to edit image in Fireworks MX.

- The width of the border around the image.

- Justification of the image.

- Alignment the image on text line.

Try: - Modify and play with the properties to notice the changes to the image and to its location.
If you can not get the image back to the origional size then reinsert it.

Adding Images Home \| Resume \| Philosophy \| Dreamweaver Welcome setup text images table cells Back Next
Step 1 - Create an images folder within "My Test Site". Click on the file index.htm, to ensure that you are in the "Site" file manager.
Step 2 - Click "File", then "New Folder" Step 3 - Change name of the folder to "images"

Step 4 - Locate and click the "Insert Image" button. Step 5 - Locate an image to be inserted on your computer. Use the "Look in" to find the folder with the image you want. Then click on the image file name to select.
Note - If you want to use an image that is online, specify the location in the "URL" section, instead of the "File name" section.

Tip - The image preview can be useful if u have multiple images to choose from. Image Preview breakdown
400 x 300 - size of image JPEG, - file type	79K - File size /22 - seconds to download on a telephone connection.
Click "OK" after image is selected. Note: If the file is outside the "My Test Site" folder, then you will be prompted to choose to save the image file to this folder. Choose "yes" to let Dreamweaver save to your folder, otherwise you could have an image that does not display properly when published. Step 6 - If this message pops up click "Yes". This will save a copy of the image to your web site. This is good because it will prevent broken links and keep the web site files organized.
Step 7 - Save copy of image. You may choose to change the file name prior to saving.
Step 8 - Click the Refresh button.
Note: Clicking the refresh button allows you to view the new image file saved to the web site. Tip: You can drag the image files to the images folder for organization purposes. The folders function the same way Windows Explorer folders do: "-" - Collapses the contents of a folder. "+" - Displays the contents of the folder.
Well done! Tip: Below are some additional methods to save images into your web site. Right click on the flower image above and choose "Save Picture as" from the menu. Save the image to the "My Test Site" folder. You can also search for an image by using the goggle link created previously. Then use the right click method to save the image. (Caution: Do Not publish or use copyrighted material as your own.) You have inserted your image onto the page. Now lets locate the image properties. Step 8 - Locate the Image properties at the bottom of the screen
Note: The image properties appear when the image is selected. Tip: Look for the highlighted squares illustrated in Figure.
Step 9 - : Click the page and notice the properties change to "text" mode. Click the image and notice the properties change to "image" mode. Step 10 - Learn the basic options for the image properties.

- The file size of the image. - The width of the image. - The height of the image.	- The image source. - The image hyperlink.
Note: The image size is not constrained when resized. Recommendation is to change the size in an image program like Fireworks MX and save to replace.
- Shortcut to edit image in Fireworks MX. - The width of the border around the image.	- Justification of the image. - Alignment the image on text line.
Try: - Modify and play with the properties to notice the changes to the image and to its location. If you can not get the image back to the origional size then reinsert it.