Welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott, and I'm a trainer here at Bring Your Own Laptop. This training course is for people who are new to web design and new to Dreamweaver. In this topic, we're gonna look at inserting images into a file. Now, um, when you create your images, you need a software package like Photoshop or Fireworks or gim or any program to create the images. We're gonna look in this instance, how to insert them once you have created them.
Alright? So, um, we're gonna use files that are already created for this tutorial. Now what you should do if you haven't already, is go through and download the exercise files. The exercise files can be found on our website at bring your own laptop.com au. And if you look at the resources tab along the top, you'll find the dream Move tutorials. Now, on any of those pages in there you will find the exercise files you can download.
So what you've downloaded them. All right? You'll be able to insert some of the images and play. Um, come along with the tutorial here. So what I would like to do is put an image just above the word vintage campers here. So I'm gonna put a return in, okay.
And have my cursor flashing just above vintage campers. Then I'm gonna go to insert Image. Image, okay, so insert image. Image. Alright, so I've got my images that I've downloaded on my desktop under Dreamweaver exercise files. So this is the files you should have downloaded from our website.
Inside here there's an option called sample images. Open that up and right down the bottom we're looking for one called vintage one. Okay? Logo jpeg. So we're gonna bring in this jpeg. Alright, let's go to open.
Alright, and it's brought it straight in. Now the thing to note about this is that newly versions of Dreamweaver, you using CS six or CS five is that it used to have a little pop-up window that had insert alt text. Okay? They've moved it in cc, it's down here. Okay? You've gotta remember every time you bring an image to put this alt text in here, okay?
What alt text is, is alternative text. Now it's for, it's used for people that are visually impaired, okay? And you help describe what the image is 'cause they can't see that. And they have programs that run online, okay? And through their computer that helps describe websites to them visually. Uh, sorry, verbally.
Now you've gotta make sure it's good, clear keywords and describes what it is. So we're gonna type in uh, vintage. This is our vintage camper logo. So you need to do a couple of things. You need, make sure you describe it right? You need to make sure also that you use good keywords.
'cause Google uses Alts text to help it decide what this image is about as well. So you wanna make sure that our website that you could put things in like uh, what does it look like? We could put in blue Gradient Gradient logo. Okay? Now the problem with that is that it really doesn't help our strategy for our website. We want to rank really well for vintage campus, not blue gradient logo, even though this is very descriptive, okay?
We want to use this, um, descriptive words that really help ask get good keywords into our website. So we're gonna use vintage camper logo, okay? It's still matter of fact exactly what it is, but it helps us with better keywords. So make sure you have alt text on all your logos. Okay? Sorry, all your images.
Now if you've got a website that is existing and you open Dreamweaver, you can just click on these images and you can see down here the alt text you can type in afterwards. So say you've got images and you've called it image one, image two, image three, come back into Dreamweaver, click on the image and download it in alt text. Adjust it to be a bit more keyword rich. Now we're gonna put in another image just under this booking camper today. So I'm putting a return in just afterwards I'm gonna go to insert again and go to image, go to image and go to my desktop, which has my dream live exercise files. Now if you're on a pc, it looks slightly different, but works the same way it to your desktop.
Find dream, live exercise files and sample images. Now in here there's one called Vintage two image. So vintage two image. You can see I've got my image in here. Now I need to make sure as I put my alt text in here. So I'm gonna describe, it's gonna be a VW combi van, okay?
Good keywords, okay? Describes what it is, but also helps me with my vintage campus, okay? Using the word combis and vans and vw. Alright, let's put our last, um, logo in. Okay? Last image.
And it's just above the word copyright we put in before. So put a return in after that last paragraph and let's go to insert Image. Image. And then the last image I want you to find on your desktop Dreamweaver exercise files, sample images. There's one they're called vintage three footer P and G. Alright, so the last one, don't forget to put the old text in.
This is the Camper Van Association. Spelling's terrible. Okay? So I've got a nice, it describes what it is, but it's also got the word camper van in there as well. Okay? What you want don't wanna do is label your alt text all the same, okay?
Using the exact same keywords. You wanna try and mix it up using different plurals and different ways of saying the same thing. It needs to be, um, you know, your alt text can't be random text that doesn't relate to the image, okay? You want to not get caught out by Google, by you know, uh, putting in the wrong keywords. But you do wanna put, um, relative to your business, okay? So that you rank well for those terms.
It's one of the many things Google uses to rank. It's, um, For you to, uh, for it to rank your website. Alright? So let's hit save. Alright? And that'll be the end of this tutorial.
In the next tutorial we'll look at the different images. We've got a p and g here, we've got a JP and a jpeg. We'll look at doing the file types in the next tutorial. Alright, thanks for that. See you in the next one.