Dreamweaver Tutorial: Changing Image Size
Email to a Friend
When images are inserted into a web page, they take up a rectangular shaped space on the page measured in pixels. The Width and Height properties can be set in the Property Inspector when the image is selected on the page. The Width and Height properties do more than simply determine its screen size. They also help the web browser to load the page efficiently. Since the HTML of a web page downloads before any image does, if the width and height attributes of the image are missing, the browser won't know how much space to reserve for the graphic. |
Web pages will load faster and more effieciently if the Width and Height attributes are specified. Whenever you insert an image into your page, Dreamweaver automatically calculates the image width and height, and enters those values into the Width and Height fields in the Property Inspector.
To Change an Image Size.
NOTE: Note that it is recommended that you change the image size in an image editing program such as Fireworks or PhotoShop, if you have one available. It is a more effiecient method of editing images than doing it in Dreamweaver, and will result in getting the exact image size you want and will also result in a smaller file size that will load faster. You may, however, modify some properties of an imageg in the Dreamweaver Property Inspector.
Click on the image in the Document window to select it. Using the handles on the side, bottom, and lower right corner, you can click and drag a handle to change the size of the image.
 |
You can shrink a graphic by typing smaller values into the W and H fields, but doing so won't do anything to speed up the download time of the image file. Trying to make an image larger by typing a larger value in the W and H fields will result in a distorted and pixelated image that won't look very good on your page. It would be better to do this in an image editing program such as Fireworks or PhotoShop.
Another way to adjust an image's size on a web page is to grab the handles that appear when the image is selected. You can grap the handle on the right edge of the image and drag it left or right to change the width of the image. You can grab the handle at the bottom of the image and drag it up or down to change the height of the image. Or, you can drag the handle in the lower right corner to change both dimensions at the same time.
To keep the proportions the same while changing the image size, grab the handle in the lower right corner and while holding the Shif key down, change the image dimensions. Holding down the Shift key while dragging the handel will constrain the dimensions so they are in the same proportion as the original image size.
Full size version of the Dreamweaver Change Image Size Tutorial (1:34)
View a related Dreamweaver Tutorial:
All other Guides and Tutorials
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 and tricks submitted by users
An Introduction to Advance Organizers including presentations, examples, and downloadable handouts.
Digital Photography Guide
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
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.
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.
This PowerPoint tutorial is just what you need to learn how to use PowerPoint 2003 to create effective and engaging presentations.
Free PowerPoint templates that you can download and use today. This is a growing library of free resources for PowerPoint users.
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.
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.
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.
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.
Free guides and tutorials on podcasting, digital video and audio, Audacity, RSS, multimedia development, educational technology, technology integration, K12 Technology, PowerPoint.
This Word tutorial is just what you need to learn how to use Word 2003 to create professional looking documents.
Guides and Tutorials - Free Technology Guides and Tutorials
© 2006 GuidesandTutorials.com - All Rights Reserved
