Welcome to Dreamweaver for beginners. What we are going to discuss today is how to add an image to your site category and how to
insert the image into your web page in Dreamweaver.
I will keep using the site which we had created from last time. I'm going to
double-click on the index dot HTML to open it up. I'm in my split view. So my
code view is on the left-hand side, but the design view is on the right-hand side. Usually you don't insert an image
directly inside the body, you want to insert an image inside a div. Dreamweaver has already provided several html5 div for you to choose from. At the top of your
page, in the Insert panel you'll see div, images and all these icons. I have my
cursor inside the design view. I'm going to click the header. I'm not going to give
any name for a class or id. I'll just click OK. Right away you see I have my
header right inside my design view. I need to insert an image inside the
header but I don't have any images in my images folder, so I'll show you how
to copy and paste an image inside your images folder. I'm in my browser. I'm
going to type dummy logo. The first one. I'm going to click images.
I like this one, right-click, Save images as, it'll go straight to my root folder.
Then I'll select the images folder and click open. Click save.
So I'm going to close it now. In my File panel, you see the images folder has nothing yet. You have to go all the way down to
refresh it. Now you'll see my download PNG. I can click on it and
change the name to logo. So I want to put my image right inside my ahead. So I'm
going to delete the placeholder text. Go to the Insert panel, click on image, and it will
take me directly to my images folder. Select this one and click OK. So my image
is inside the header. Image is an independent tags so it does not have a
closing tag. s r c stands for source. It is telling the browser where
to find your image. The word images is your folder and this is your image. The
image right now has 299 pixels wide and 116 pixels tall, and this is all in pixels,
but you don't need to type the word px. Next to the height is the Alt key. The
a l t stands for alternate text. You want to put some kind of text inside. So I
put l o g o, logo. Two reasons why you need the alternate text. One is for
the visually impaired. Second is for the search engine.
Now you see the logo has a lot of white space. I want to trim it down. Of course, you can
go to Photoshop or go to any photo editor to open it up and
crop it. But you can also do this right inside Dreamweaver.
Go to Window, click Properties. I have my Properties panel opened. Select the image, click the crop icon and move the handles to wherever you want it to be. If this is
what you want, all you have to do is double-click inside and then your image
is cropped. As you can see from my properties panel when I select the image, I have a
Photoshop icon here. So if I click this icon it will take me directly to
Photoshop. But if you don't see your Photoshop icon, all you have to do is
go to Edit, Preferences. In the File types editor, select all the extensions you
want and make Photoshop the Primary. You can make your primary
right here. If you don't see a Photoshop in the editors column, all you have to do
is go to browse and go to your hard drive and select Photoshop. I'm going to
close this one right now. When you're designing a web page, a lot
of times you don't have the correct images you want. So you may want to use
some online image placeholder. I have my cursor at the end of the closing header
tag. Just click the Enter key, and in the
Insert panel, I'm going to use this one called Section. I'm going to click section. Once again, I'm going to disregard the class and id. just click OK. I don't want this here,
so delete it, and enter a couple of times. Now because I am going to get an image
online, so I cannot use my images folder. So I'm going to type it. Opening bracket,
img, closing bracket. s r c source. Because I'm going
to get an image placeholder online, so I have to type the whole URL. So this is
the domain name, unsplash dot it. Forward slash, 250. That means the width is 250.
Forward slash, 175. The height is 175. Refresh it and then you see my image
right over here. If you want to put some copy inside the section, I'm going to
show you how to use Emmet to get your text placeholder. Type p, which stands
for paragraph tag, >, lorem and then use the tab key. As soon as I
select the image, at the bottom of Dreamweaver you'll see there's an HTML selector. It
tells you the orders of all the HTML. Now see this image is inside the section
and the section is inside the body. So within the opening style tag and the
closing style tag, I'm going to type section, img, opening and closing curly brackets. In order for the text to wrap around the image I need to float the image to the
left. So I'm going to type float, left, semicolon. Right away, you see the
image is floated to the left and the copies were wrapped around the
image on the right. Every time when I refresh my Dreamweaver, unsplash will
give me a new image, but this is okay. What I need is I want to give some margin to the right-hand side of my image. So back to my internal CSS. Enter. Then use margin
right, 10 pixels. Now right away you see there's a 10px of space between the
image and the copy. So this is how you insert an image inside Dreamweaver.
