🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

Adding Images

Questions

0
0
0

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025