Build a Website - Inserting Images and Changing Colors

Kevin Frey: Hi! I'm Kevin Frey from TransEffect LLC, and today we're talking about how to create a website. In this segment, we are going to discuss finding and inserting images into our layout and changing some of the basic colors of our layout.

Let's get to Dreamweaver here. First, we are going to discuss looking for images. And there are some people are going to be tempted to go to Google Image Search and search images there. I recommend not using Google Image Search because what's going to happen is Google Image Search is going to return plenty of great images, however, most of those are going to be copyrighted and to use those images without permission is technically copyright infringement and stealing.

But luckily there are other ways to get good images for your website. For instance, we can go to www.

wikipedia.

com which is where I got my information for I Heart Planes. I search for, I think Airplane and here we go Fixed-wing aircraft. You can see is, where I got my plane image from and the images used on Wikipedia are typically in the public domain.

The one that are not in the public domain, they will have Licensing Info here, and they will tell you, whether or not, you can use the images and where and under what conditions you can use the images. Ones that are under public domain are basically free for any type of use, commercial, personal or educational.

What I like to do, is go to flickr.

com, which is very popular photo sharing site. You don't even have to sign in, you can just do an image search here for Airplanes. It's worth to know that you can't just go to any of these pictures and use them, what we have to do is go to the Advance Search and we can pick our Content type and Media type, I'm only looking for photos so, so Photos Only. I'm not worried about the date the photos were taken, however, I'm worried about Creative Commons-licensed content.

If we search only the Creative Commons-licensed content and Find content used commercially and Find content that can be modified, adapted or built upon, then flickr is going to return images that you can use for anything you want and not only that but you can edit them and use the edited versions for whatever you want. You don't need any special permission and you won't be breaking any copyright laws.

The other option is to go to Search Engine and type Stock Photos in and you can find lots of stock photo websites that have have professional stock photos. It's difficult finding a good free stock photo website but you got it once, let's click on the first was out here, it's called iStockphoto and you can search for a photo, Airplane and it's going to come up with some really nice pictures, professional quality, but they are not free. You will have to pay a small fee to use each picture.

However, once you find your pictures, you are going to save them to your computer, that's what we are going to do now. I want this picture, I'm going to right-click on it and I'm going to save the image and it's good to create a folder for your website if you look on my Desktop, I have a Website folder and then in my Website folder I have placed an Images folder and that's where I save my images.

I have actually already got this plane saved as airplane1_sm for small and I have got another copy of it that's medium. When I go back to our What You See Is What You Get Editor and all we are going to do is figure out where we want to put the picture. I would like to put it at the beginning of the this paragraph and then we'll go to Insert, Image and we will find the image we want to insert and we'll double click on it and it asks us to put the Alternate Text.

What that is, is say somebody has images, set not to display on their browser, well in place of the image the alternate text will display and for people who are unable to see well, they have browsers that will read them and because they can't see the images it will read the alternate text. So we'll have Small Airplane as the alternate text. We'll hit OK. It shows the airplane.

Now, this isn't exactly visually appealing, having the text like this. We want the text to wrap around the whole photo. So a way to do is change the alignment down here. We're just going to align it left and the text will wrap around the photo. Now the image, it might be worth showing you here. If we go to our Source code, the HTML Source Code, here's the image, the Image Tag, it's img and instead of using href to show you where the file is, it uses src for source. I mean it points out where the image file is located. It has some other attributes, such as the Alternate Text that we filled in and it also gives us the width and the height of the image automatically and how it's aligned.

That covers inserting the images there, inserting any image works the same way. So, we are going to want to change the background colors of some of the other items here. For instance, we are going to select this main div and on the right, we have a list of the CSS styles for the main div and you can see that there is no -- there is no background color set, there is only Color and color designates the text color.

So for the background color, we are going to go down here to Add Property and we can use a drop-down list to find Background Color and add that. And it let us select the color. Let's select this one here, and you can see that changes the background color there.

Now, as a reminder, you may not be familiar enough with a Graphics Editing program to just start it up and design a website and design is way too extensive to cover in this video. So I just want to say that, I did use Photoshop to create this layout and then I use Dreamweaver to basically emulate it, but for the Header what I did was I just made that an image. So I deleted the Header text and I made the background of the header div white. So we are going to add background color here and I'm going to make it white and then I just want to Insert an Image like we did with the Airplane and I inserted my logo. The alternate text is going to be, I Heart Planes and there you have that. That covers inserting images and changing your background colors. Next, we are going to discuss blogs.