Dreamweaver Tutorial: Cropping Images

email  Email to a Friend

This Dreamweaver tutorial will show you how to crop an image in Dreamweaver.

Cropping an Image - Often an image is too large to fit where you want it on your Web page. Dreamweaver lets you crop or trim an image that has already been inserted into a web page. This also helps to reduce the file size of the image and helps you Web page to download faster for your users.

cropping imagesNOTE: When you crop an image using Dreamweaver, the source file image is changed on the disk. This permanently alters your original image. You might want to create a copy of the image before changing it.

A cropped image is just like any other image on a web page. You can turn it into a link, resize it, align it with text, and perform any other Dreamweaver action that you would perform with any other image.

You can resize an image by clicking on the image and then dragging one of the handles (the square black boxes that appear around the edges and one corner of the image). The side handles make the image narrower or wider. The bottom handle drags the image taller or shorter. The corner handles change both the height and width of the image at the same time. You can maintain the height-to-width ratio by holding the shift key down on your keyboard while dragging the corner handle. This will force the image to keep the same proportion as the handle is being dragged.

Dreamweaver Tutorial: Cropping an image

Click the image to select it on you page.

Dreamweaver croping images 1

Click the Crop button in the Property Inspector. If a notification box pops up notifying you that you are about to permanently alter the image, click OK.

Dreamweaver cropping an image

A frame appears around the image to be cropped with black handles around the edges.

Dreamweaver cropping images

Drag the handles to frame the desired area of the image. The side handles move the frame on the left and right of the image. The top and bottom handles adjust the frame above and below the image. The handles in the corners adjust both.

Dreamweaver cropping images

After you've adjusted the frame as desired, click on the Crop button again in the Property Inspector. This will discard the area outside of the frame and leave the cropped image.

The Difference Between Resizing and Cropping - Resizing changes the dimensions of the image. It does not change the file size and it doesn't alter the original image.

Cropping changes what part of the image is actually visible. It removed the unwanted portions of the image and in so doing, reduces the file size. Cropping permanently alters the original image.

Dreamweaver Tutorial: Resize an Image

Resize an image by selecting it and then dragging one of the resizing handles. Drag the side handle to resize the width, the bottom handle to resize the height, and the corner handle to resize both.

Dreamweaver resize image

View a related Dreamweaver Tutorial:

All other Guides and Tutorials

GuidesandTutorials: Audacity Tutorial - Record and Edit Audio
This Audacity tutorial will show you how to use the basic tools and procedures in the open source audio editing program, Audacity. Not just screen shots, but free narrated multimedia tutorials - You'll learn to use Audacity for recording and editing audio files that can be used for podcasting, mixing music and vocals, creating sound tracks, and other audio projects.

Audacity Tips & Tricks
Audacity tips and tricks submitted by users

GuidesandTutorials: Advance Organizers Tutorial
An Introduction to Advance Organizers including presentations, examples, and downloadable handouts.

GuidesandTutorials: Digital Photography
Digital Photography Guide

GuidesandTutorials: Dreamweaver Tutorial
Dreamweaver Tutorial - this series of free Dreamweaver tutorials is just what you need to get up and running with Dreamweaver to create interesting and compelling web sites

GuidesandTutorials: Microsoft Excel 2003 Tutorial
This Excel 2003 Tutorial will introduce you to the basics of using the Excel 2003 spreadsheet program. You'll learn to create a spreadsheet, basic Excel workbook skills, work with cells, enter and manipulate data, apply formulas, format data, create and work with charts, and manage Excel workbooks.

GuidesandTutorials: Podcasting Tutorial
This Podcasting tutorial includes a step by step guide that will show you how to record, publish and promote your podcast. Using inexpensive equipment and free software, you'll be publishing podcasts in no time.

GuidesandTutorials: PowerPoint Tutorial - Microsoft PowerPoint 2003
This PowerPoint tutorial is just what you need to learn how to use PowerPoint 2003 to create effective and engaging presentations.

GuidesandTutorials: Free PowerPoint Templates
Free PowerPoint templates that you can download and use today. This is a growing library of free resources for PowerPoint users.

GuidesandTutorials: Non-Linear PowerPoint Presentations - A How-to Tutorial
Non-linear Powerpoint tutorial will show you how to use advanced drawing tools and linking features in PowerPoint to create non-linear powerpoint presentations. Includes narrated presentations, and Flash tutorials on planning, user interface, design, and presentation development.

LCD Projector Guide and Tutorial
This LCD Projector Guide will assist you in the use and purchase of a digital LCD projector or DLP projector. It will discuss the differences between LCD and DLP projectors, size and portability considerations, lamp types and brightness, resolution, image quality and other considerations in the use and purchase of a digital projector.

RSS Tutorial
This Introduction to RSS Tutorial will help you to understand how RSS feeds work to distribute web content, pages, blogs, podcasts. It will show you how to create and validate your RSS feed. It includes sample XML code that you can modify for your own feed.

Suggest a New Technology Tutorial
Free Technology Tutorials on software and technology applications including PowerPoint tutorials, Podcasting tutorials, Dreamweaver tutorials, Audacity, Non-Linear PowerPoint, Digital Photography, RSS tutorial, and everything educational technology.

Guides and Tutorials: Free Guides and Tutoials Site Map
Free guides and tutorials on podcasting, digital video and audio, Audacity, RSS, multimedia development, educational technology, technology integration, K12 Technology, PowerPoint.

Word Tutorial: Microsoft Word 2003
This Word tutorial is just what you need to learn how to use Word 2003 to create professional looking documents.

 

Guides and Tutorials Logo
Guides and Tutorials - Free Technology Guides and Tutorials
© 2006 GuidesandTutorials.com - All Rights Reserved