Dreamweaver Tutorial: Setting Image Properties

email  Email to a Friend

This Dreamweaver Tutorial will show you how to change an image's properties by using the Property Inspector. You will learn to who use alternate text, adjust the image size, image alignment, add a border, and margins.

Unless you used Photoshop or Fireworks or another image editing program to change an images size, you might have to make some adjustments to it after inserting it on your web page. In addition to changing the size of an image, there are several other properties that can be changed using the Property Inspector.

Dreamweaver Tutorial: Giving an Image Alternate text

In the Document Window, select the image whose attributes you want to change.

Dreamwever image properties 1

In the Properties Inspector, type an alternative name for the image in the Alt box. This alternate name shows when a user holds the mouse pointer over the image and it's what the user sees if the user is viewing in a browser with images turned off. It is also the text that is read by screen readers for those who are sight disabled.

Dreamwever image alt text

 

Dreamweaver Tutorials: Adjust the Image's Size

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

You can more precisely adjust an image's size by changing the values in pixels in the width and height property in the Property Inspector.

Dreamweaver resize image

Dreamweaver Tutorial: Set the Image's Alignment

Open the Align list and select how to vertically or horizontally align the image with text, or within its layer, cell, or frame To align the image horizontally, click the Align Left, Align Center, or Align Right buttons.

Dreamweaver align image

Dreamweaver Tutorial: Add a Border to an Image

To surround an image with a border on all four sides, enter a Border width in pixels. The color of the border is determined by the color of ordinary text in the surrounding vicinity or by a CSS file.

Dreamweaver image border

Here is the resulting image with a 1 pixel thick border around it.

Dreamweaver image border

Dreamweaver Tutorial: Add Margins Around the Image

You usually don't want your text to be right up against the edge of an image, especially when wrapping text around an image. To add empty space along the left and right sides of the image enter a value in pixels under H Space (Horizontal Space). To add space along the top and bottom of an image, enter a value in pixels in the V Space (Vertical Space). Dreamweaver will create a margin with a width equal to the number of pixels you enter.

Dreamweaver image margins

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