Dreamweaver Training - Insert Image

Posted on July 31st, 2008 in Dreamweaver Training by admin

The following is an extremely helpful tutorial on Dreamweaver. It will help beginners who are working with Dreamweaver. It tells you how to add an image to a Dreamweaver page in two ways, either by using the insert option or drag and drop option.

It also tells you which option is better to use and how to add text in place of the image. With a simple and stepwise explanation, you can learn how to add images. This article also provides an example with the help of which it explains the entire procedure to you.

There are two main ways of adding an image to a Dreamweaver page. You can either use insert image or you can drag and drop. To insert an image you can either use the insert menu, insert image or in the insert panel go to the common section and here you will find the images icon and you can either click on the icon or click on the drop down menu to choose image. Here you navigate to the images folder, find the image that you want. A preview of the image is displayed for you and you can click ok. Whenever you insert an image, if Dreamweaver’s accessibility options are activated, which they should be, you will be asked to insert the alternate text.

This is a description of your image, which helps to increase the accessibility of your site. For e.g. here we are on Google and you can see we have the Google logo. If I switch off images by going into Firefox’s ToolsOptions, and in the content area, switch off the option to load images automatically, and someone might do this if they were using a very slow connection to the internet and were finding it difficult to get anywhere because of the time it takes to download images.

You will see now, that if I hit the refresh button, the Google logo disappears but there is still a piece of text that describes the logo. Alternate text is also essential to assist any one who is using a screen reader to navigate your web pages. The screen reader relies on the alternate text to give a description of the image to the person browsing your site. So it is very useful that Dreamweaver displays this window for you. And you could just type in a short description of that particular image. Okay, so that is the insert method. That’s undo and let’s look at drag and drop.

You can use the drag and drop technique from two places. The files panel and the assets panel. To make either of these visible go to the Window menu and choose files or assets. To drag and drop an image onto the page from the files menu, find the image and simply drag it into the appropriate section of your page. Enter your alternate text and click ok. Let’s undo and let’s look at the equivalent in the assets panel. The assets panel is basically a database in which Dreamweaver keeps a record of all the various types of assets that you have available within your current site. And this applies not just to images. As you can see, there are several categories of assets that Dreamweaver will keep track of. And if you want to reuse these assets on several different pages, the assets panel offers a very convenient way of doing this.

When adding an image by dragging and dropping it onto the page the assets panel offers two main advantages over the files panel. First of all, as you can see a preview is displayed as you click on each image and secondly it doesn’t matter where within your site the image is located. Dreamweaver will find all images in the current site and display them in the assets panel. As your site gets larger and you have more and more images, you should get into the habit of hitting the refresh button, which just enables Dreamweaver to update its list of images and make a note of any changes that have occurred such as deletion of images, replacement, or change in the name of an image.

When you hit the refresh button Dreamweaver tracks all those changes and updates the preview. Another thing about the preview is that as you increase the preview area, you get a larger preview. To add the image to the page, you either drag the preview or the file name and drop it into the appropriate area of your page.

Tags: , , , , ,

Tags

Post a comment