Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Inserting an Image & Alternate Text

  • Dreamweaver offers a few different ways to accomplish most tasks
  • There are about 6 different ways to insert an image
  • You can:
    • Drag an image out from the preview area within the Assets panel
    • Drag an image onto the page by dragging on the icon in front of the image name within the Assets panel
    • Drag an image from within the Files panel
    • Place your cursor on the page, select the image within the Assets panel and click the Insert button in the bottom left of the Assets panel
    • Choose Insert->Image from the Insert menu
    • Click the Image icon in the Common Tab of the Insert Bar
  • The alternate text dialog box pops up to prompt you to add alternate text for each image for screen readers

Inserting an Image & Alternate Text

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Inserting an Image 0:40
    • Insert Image using Image Name
    • Inserting Alternate Text
    • Insert Image using Image Icon
    • Insert Image using Insert Button
  • Preview in Browser 7:11
  • Summary 8:31

Transcription: Inserting an Image & Alternate Text

We're now going to take a look at how to insert an image into your web pages.0000

And I have the Specials page open, specials.html, and this is a page that had some styles attached to it, which is what is causing the different coloring schemes on our page.0006

I also have the Assets panel showing, and I have selected the Images category up in the upper left.0022

Any time you see a little tree icon in Dreamweaver, that always means it's representing images.0029

So, if you click on the tree, you'll get to the Images area.0036

How do I go about inserting an image onto a web page using Dreamweaver?0040

Well, there are certainly multiple methods for doing this--there are actually six of them, six different ones.0046

I'll start with the Assets panel itself first.0053

What I can do is: I'm going to choose charles-river-boat, this image from the Images folder; but I don't really even have to worry about what folder it's located in when I use the Assets panel.0057

I can also view the image before I insert it into the page, to make sure I have the correct one.0071

So, to insert an image using the Assets panel, you can simply click on the picture of the image and drag it onto your page.0077

When you do that, you are going to get this alternate text message, or dialog box, popping up.0087

This is what a screen reader would read as a description of the image, if we had a user who could not view the image--specifically, they had some kind of a handicap where they can't use their eyes and see the image.0094

I'm going to say this is the Charles River Bridge in Prague.0110

There we go--or not: my image didn't quite end up in the right spot.0119

But I don't have to be concerned: I want to show you, you can click and drag in Dreamweaver Design View; you can also click and drag in Code View.0125

What I am going to do is...this image didn't end up in the right spot: let me close up the Properties area, so you can see; it ended up down below too far.0136

What I can do is just click on the image and drag it up where I want it--very simple.0146

That is a really nice feature of the Dreamweaver Design View, and also Code View.0153

Now, I may want this to be up at the top of the page and have travel specials listed below it; if so, I just put my cursor in front of Travel Specials and hit Enter or Return, and it drops my code down.0159

If I wanted to move it a little bit differently and put it alongside my image, what I would want to do is create some CSS styles to do that.0175

And I am not going to address that quite yet.0186

Now, the other thing I want to do is add another image down in this area of the page; and what we are going to do is use a slightly different method for the Assets panel.0189

What I am going to do is: this "Visit the Down Under with us"--I actually have a picture of a boat, basically--it's actually an outrigger, and it is not exactly from Sydney, but I can use it for now, and always replace it later.0202

Otherwise, I do have Prague listed here; so I have a Prague clock I can put in there.0223

So, you may not have the exact images you need when you go to create your web pages; and if that is the case, you have a couple of things you can do.0231

You can use what is known as an image placeholder, or just pop another image in there for now; and when you get the correct one, you can just replace it.0241

So, what I am going to do is use another method of the Assets panel, and that is: I can click on the icon in front of the image name--so click on it and drag it out, and I'll put that right here, next to "Visit Prague."0250

This is going to be the Prague clock in old town.0268

Now, this image is quite a bit bigger; so I have to decide what I want to do with this one.0276

And I am going to do the same thing: I am going to put my cursor in front of this text, hit Enter or Return...and yes, I have some white space here, but there is my "Visit Prague," and this is one of the clocks in the Old Town area that Prague is known for.0282

So, I'll put it right above where I discuss Prague.0301

I can always come in here and modify my text later to align right alongside this image.0306

But I'll save that for later; that is the second method for inserting an image within my web page.0314

Now, down at the bottom of this page, it might be nice to add an image.0323

And this is a good example of trying to figure out what image I might want to place in there right now.0328

And so, I can look at the width of my images, and let's see: I'm kind of in the same situation here--oh, I have this Vegas panorama image, and it is fairly wide--why don't I put that at the bottom of this page?0335

So, what I can do is: so far, we have clicked on the image and dragged it out; we have clicked on the icon and dragged it out; what I am going to do now is make a space at the bottom of the page by hitting Return or Enter.0351

My cursor is exactly where I want the image; I can simply select the image and click Insert.0366

This is a nice method if it is difficult to get your cursor into the location where you want to insert an image.0375

That isn't exactly my problem here, but there are many times where it's hard to get your cursor where you need it, and by the time you do, you don't want to click off of it and then try and drag and get that same location again.0382

What I tend to do is use this method at those times.0398

I select the name of the image I want; I click Insert; and notice, it is going to be another Alt. text.0403

You should always add Alt. text to images that are important on your website.0412

This is going to say Las Vegas panorama.0417

And there is my image.0425

Let's take a look at our page.0428

I'll go out and take a look at it in the browser; I'll do a Save, and I will pop this into Internet Explorer and take a look.0431

There is my page; now, my page is very wide at the moment, as you can see; we don't have anything containing any content, but there is my page with my images showing up.0441

Now, it is possible to upload your files to the Web server at the very end, and all of a sudden, your images are not showing; and the reason for that could be a couple of things.0453

First of all, you may have some characters that shouldn't be in there, such as a space in the names of your images; that can sometimes prevent the images from being uploaded to the Web server.0466

Notice: all of mine do not have spaces in them.0480

The other issue you can have is if the path to the image isn't quite correct; you upload it, and it may not show up on your page.0484

So, it's important to make sure that, even though it's working here on my local machine...once I get these pages up on the Web server, I want to make sure the images are showing once I get them there, and correct any issues that could occur at that point.0494

But those are three methods for inserting an image using the Assets panel.0511

The first one is the picture of the image, or the preview of it, in the Assets panel (and drag it out).0517

The other is to click on the icon in front of the name of the image and drag it out.0524

Or, you can always select the image, place your cursor, and click the Insert button to insert an image onto the page.0531

Those are three ways to add an image using the Assets panel.0541