Insert an Image in Dreamweaver
Email to a Friend
Ever since the appearance of the graphical Web browser, Web designers have been enhancing their pages with graphics and images. Dreamweaver provides more than one way to insert an image on your Web page.
Images may also be used as hyperlinks, opening other pages when the user clicks the image. Images can also have alternate text to help users who cannot view the image identify what the image is about. The alternate text is displayed by text-only browsers and it's what screen readers read with assistive devices.
Web page images must be in one of three formats that browsers recognize and can display. The three main format are the GIF, JPEG, and PNG. While it is much more efficient to edit images in a full blown image editing program such as Adobe Photoshop or Fireworks, Dreamweaver does provide some tools for resizing and performing simple edits on images that have been inserted into web pages. Note that changing an images size in Dreamweaver does not change the file size of the 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.
You can also resize images more precisely and perform other edits in images from the Property Inspector.
Dreamweaver Tutorial: Insert Images Into Your Web Page
Click on the Web page where you want to insert an image. One way to insert an image is to click on Insert on the menu bar and then Image from the drop-down menu.
Another way to insert an image is to choose the Image icon from the Insert Common Elements toolbar.
From the Select Image Source dialog box, navigate to find the image file that you want to insert and click on the filename. Then click OK.
After you select the image, you can enter alternate text for the image.
Click OK and Dreamweaver inserts the image. You can perform additional edits and adjustments by using the Property Inspector.
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.
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
