Images Inserting into Dreamweaver and Resizing

Transcription

1 Outline Photos must be resized prior to being posted on a website!... 1 Insert Images into a Dreamweaver Page... 1 View Properties Window after inserting images... 2 Link image to a website or document... 3 Resize images directly in Dreamweaver... 3 Changing Image Properties... 4 Resample Tool... 4 Crop Tool... 5 Brightness/Contrast tool... 5 Sharpen tool... 6 Other Options for Resizing Photos... 6 Photoshop Photo Editing Software... 6 Simple resizing using Microsoft Powertool Image Resizer for Windows XP (Free Program)... 6 Photos must be resized prior to being posted on a website! Photos must be resized prior to posting otherwise, it can negatively impact download time and viewing of your web pages. This can be very frustrating for web visitors. As a rule, images should never be larger than 800 x 600 pixels so web visitors do not have to use scroll bars to view the entire image. Always resize a copy of an image, not the original! Editing photos takes the pixels away always keep your original intact in case you need to go back to it! Insert Images into a Dreamweaver Page You may use the Common toolbar to insert images into a page be at the insertion point and click icon OR click Insert-Image from the Dreamweaver menu bar. 7/21/2010 Page 1

2 A new window appears, alerting you to navigate to the image you wish to insert. Click okay when you find the image and are ready to insert it. When you click OK, the accessibility screen appears. Enter text to describe the picture in the Alternate Text field. This text will display in browser window when someone rolls their mouse cursor over the picture. It will also be read to those using screen readers as they will not be seeing the picture you inserted. Try to add text that is short and to the point. View Properties Window after inserting images After inserting an image on your page, click on the photo. The following should be viewable in the Properties window: Size of photo Width & height attributes for photo Alt text (for screen readers) Photo editing tools (to be explained later in this document. 7/21/2010 Page 2

3 Link image to a website or document After inserting an image on your page, if you wish to have people click on the image to be directed to another webpage or document, follow these steps. Click on the photo. In the properties window Link to a webpage enter link here Link to a document Click on the folder to browse to the document you wish to link to. Resize images directly in Dreamweaver Make sure you are using a copy of an image not the original! Any edits you do to an image in Dreamweaver will be permanent and you will not be able to get the original photo back once it s been edited! When you insert an image, it will display at its full size. This may be entirely too large for your web page if it had not been resized prior to inserting into the page! To quickly change the size of an image, click on the photo and view the Properties window. Type in a new value for the W(idth) and H(eight) of the image. 7/21/2010 Page 3

4 You can also select the black corner handle on the image, hold down the shift key, and drag the handle to resize the image on your page. (You may have to drag a lot if the image is large; the shift key will maintain the image proportions.) This alone does not change the overall size of the photo! Using this method appears to have resized your photo, but the actual physical size is still the same. If you use this method, you will want to also use the Resample Tool. See below! Changing Image Properties Click on the image, and then look at the Properties window for the image. There are several great tools that will let you change how the image looks.again, make sure you are editing a copy of an image, not the original! These tools (shown in the red box) are: Crop tool Resample tool Brightness/Contrast tool Sharpen tool Resample Tool The resample tool allows you to permanently change the size of the inserted image, making it a much smaller size. Insert a large image into Dreamweaver you will see the size of the file viewable in the Properties window. Even if you used the handles to resize your image, the file size remains large. Highlight the image and then click on the Resample tool the end result will be that the image size is much smaller, which means it will be easier to download load on your webpage. It also takes the resolution down to 72 which is another good thing for image use. 7/21/2010 Page 4

5 Crop Tool If you would like to remove any edges of your image, select the Crop tool and move the edges in until you see just the portion of your image you would like to keep. Press the Enter key to make the changes. Brightness/Contrast tool You can change the brightness and contrast of your image using the Brightness/Contrast tool. When you select this tool you will see a dialog box with sliders for the brightness and contrast of your image. Just move the sliders to adjust your image. 7/21/2010 Page 5

6 Sharpen tool You can change the sharpness of your image using the Sharpen tool. When you select this tool you will see a dialog box with a slider. Just move the slider to adjust your image. (Good rule of thumb is to sharpen at around 2; if you go too large the effect will not look nice.) Other Options for Resizing Photos Photoshop Photo Editing Software A detailed Photoshop tutorial for preparing photos for the web is available at Simple resizing using Microsoft Powertool Image Resizer for Windows XP (Free Program) A free download is available for for anyone who uses Windows XP. Find the file called ImageResizer.exe and click on it to install. Once it s installed, edit a picture as follows: Right click on a photo and you will see an option called resize pictures in the menu that appears. Choose that and a new window will appear with predefined sized choices: Click the Advanced button to customize a specific width and height. 7/21/2010 Page 6