Adobe Dreamweaver CS3 Tutorials
Inserting Media / Inserting Images
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Dreamweaver CS3 / Inserting Media / Inserting Images)
When you insert an image into a Dreamweaver document a reference to the image file is generated in the HTML source code. Here in split view I have my image selected. Notice that there's the source code here, and it's pointing to the image in an images subfolder. And the image is called autumn leaves. Now to avoid missing images in later web authoring sessions or when you upload your files and images to the host server, it's important that both the Dreamweaver HTML document and your image files are saved in the current site folder. The only way the Dreamweaver can maintain this relative link here is if it knows where both the source file and the image files are located. In this case they're both located in your site folder. If your HTML document is saved in your current site folder but not the image file that you're inserting, Dreamweaver will ask you whether you want to copy the file to the site. Let's demonstrate this by deleting that image, and let's insert another image that's not currently in my site root. Here's a file here. It's not in my site root. And notice that Dreamweaver warns me this file is outside of the root folder of site Dreamweaver CS3 and may not be accessible when you publish the site. Tells me where my folder is. Would you like to copy the file there now. I say Yes, and now Dreamweaver will keep me out of trouble. I can go ahead and give it a new name. Let's get rid of the capital C there. And let's also put it in my images subfolder and save it there. And it's already selected a file there, it already exists. I'll go ahead and override it. And now I can add an image tag accessibility attributes here, which I'll cover in a second. And now there is the file. Notice that the source here is correct. Now of all the mistakes my students make in working with their images, this is the most common one and can easily be avoided by getting in the habit of saving your images to the images subfolder inside your site folder before inserting it into Dreamweaver, and also make sure that you save the Dreamweaver document as well to your site folder. You can also insert images dynamically. Dynamic images are those that change often. For example, advertising banner rotation systems need randomly selected single banners from a list of potential banners. And then they dynamically display the selected banners image when a page is requested. Let me now go through the details of the process that you'll go through when you're inserting an image. Let me delete this image and do it from the beginning. Start by setting your insertion point at the location of the table cell or the layer where you want to insert your image. And there's a variety of ways of actually inserting the images. The easiest is perhaps from the main menu choosing insert image. You can also use the insert bar here or insert menu at the top of the interface. Select the common tab of the insert bar, and then right there is an icon for an image. In fact there's a drop down that let's you choose different types of images. Image placeholders, rollover images, Fireworks images based from HTML or navigation bars. Can also even use the assets window, here's my assets window. And I can simply drag and drop an image here. Here's my autumn leaves image right onto my desktop. Now whichever way you use, you'll get this image tag accessibility attributes dialog where you can enter alternative text. Here you can enter a name or brief description for the image, as well as leave it empty. This is helpful for screen readers for people with disabilities that cannot see your images or see your website. The reader will read the text and the screen reader will also read the information that you enter here. However, you should limit your entry to around 50 characters. For longer descriptions consider providing a link in the long description text box right here. That will give your reader more information about the image. So here in the long description box you'll enter the location of a file. That displays when the use clicks the image or clicks the folder icon to browse to the file. This text box provides a link to the file that it's related to, or gives more information about the image. You can enter information in either one or both of these text boxes, depending on your needs. The screen reader reads the alt attribute for the image. Once you're done setting up your alternate text, click OK. And go ahead and close the assets dialog there. And there's your image. Now you're ready to modify the properties of the image using the properties inspector, which will be the topic of the next movie.
Tutorial Information
| Course: | Adobe Dreamweaver CS3 |
| Author: | James Gonzalez |
| SKU: | 33789 |
| ISBN: | 1-934743-04-6 |
| Release Date: | 2007-09-06 |
| Duration: | 10 hrs / 125 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
