🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Questions
Student Gallery
Be the first to share something.
Course info
Overview
- 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?
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief 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
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.
How do I insert an image and add alt text in Dreamweaver?
Place your cursor where you want the image, then choose Insert > Image > Image, select your file and click Open. With the image selected, enter a clear description in the Alt field in the Properties panel. In the Dreamweaver CC interface used here, that field sits below the document.
How do I insert an image and add alt text in Dreamweaver?
Key Takeaways
Insert a logo, a main image and a footer graphic into a web page.
Find the alt text field in Dreamweaver CC and understand how it differs from older versions.
Write useful image descriptions that support accessibility and relevant search terms.
Update alt text on images already in an existing website.
Get your images ready
Adding an image in Dreamweaver is straightforward. The important habit is remembering that the job is not finished when the picture appears on the page. You also need to describe it clearly.
We will use a vintage camper rental page and add three images: a header logo, a VW Kombi van image and an association logo near the footer. This is a beginner exercise, so we are working with images that have already been created.
If you need to create your own graphics first, you can use a program such as Photoshop, Fireworks or GIMP. Here, we are concentrating on inserting the finished files into a web page rather than designing them.
To follow along with the same assets, the exercise files are listed under the Resources area at bringyourownlaptop.com.au, within the Dreamweaver tutorials. Download the exercise files and locate the Sample Images folder. In this example, the downloaded folder is on the desktop.
1. Insert the header logo
First, we want the logo above the page’s “Vintage Camper Rentals” heading.
Click at the beginning of the heading and press Return to create a space above it.
Place your cursor on that empty line.
Choose Insert > Image > Image.
Browse to Desktop > Dreamweaver exercise files > Sample Images.
Select the JPEG labelled Vintage One Logo and click Open.
Use Insert > Image > Image after placing your cursor where the graphic belongs.
The logo should now appear above the heading. Before moving on, keep it selected so you can add its alternative text.
2. Add alt text in the Properties panel
Alt text means alternative text. It gives an image a written description that screen-reading software can communicate verbally to people with visual impairments.
There is a small interface difference worth knowing about. In older Dreamweaver versions, such as CS5 and CS6, an image insertion dialogue prompted you to enter alt text. In the CC interface used for this exercise, the Alt field is in the Properties panel below the document.
That makes it easy to forget. Get into the habit of selecting each image and filling in its description as soon as you insert it.
For our header graphic, enter Vintage camper logo.
Describe the subject, not just its appearance
You could describe this graphic as a “blue gradient logo”. That tells us something about its appearance, but it misses the more useful information: it is a vintage camper logo.
Vintage camper logo is still a factual description. It also uses words that relate directly to the business and the subject of the page.
Google uses alt text to help understand what an image is about, so relevant wording can support your search engine optimisation. But the description must remain accurate. Start with what the image actually represents, then use natural, relevant language rather than trying to squeeze in unrelated keywords.
3. Insert the VW Kombi van image
Next, add the main image beneath the “Booking your camper today” heading.
Click after the heading and press Return to create a line beneath it.
With your cursor on that line, choose Insert > Image > Image again.
Return to the Sample Images folder.
Select the image labelled Vintage Two Image and click Open.
With the inserted image selected, enter VW Kombi van in the Alt field.
If you are using a PC, the file selection window will look slightly different from the Mac version, but the process is the same. Browse to the downloaded folder, find the image and open it.
The van image sits beneath the booking heading, with its image properties available below the page.
Notice how the description changes with the image. We are not reusing “Vintage camper logo” simply because we want the page to be associated with vintage campers. VW Kombi van identifies this particular picture and naturally introduces related terms.
4. Add the footer association logo
The final graphic belongs after the last paragraph and just above the copyright line.
Place your cursor after the final paragraph and press Return to make room above the copyright text.
Choose Insert > Image > Image.
Open the Sample Images folder and select Vintage Three Footer.png.
Click Open.
Enter Camper Van Association in the Alt field.
Again, the description identifies the graphic while using language relevant to the website. It tells us which organisation the logo represents rather than simply calling it “footer image”.
Keep your alt text specific and relevant
The three descriptions now serve different purposes:
Vintage camper logo: identifies the header branding.
VW Kombi van: describes the main vehicle image.
Camper Van Association: identifies the association graphic near the footer.
Avoid giving every image exactly the same description. Different images usually need different wording. Related terms, plurals and alternative ways of describing the subject are useful when they genuinely fit the image.
What you do not want is random text that has nothing to do with the picture. Alt text is not a spare space for a list of business keywords. Keep it factual, clear and relevant to the image first. Its contribution to search visibility is only one part of the wider work involved in helping a website rank.
Update alt text on an existing website
You do not have to reinsert an image to change its description. If you open an existing website in Dreamweaver, click an image and look for its Alt field in the Properties panel.
If the description is missing or contains an unhelpful label such as “image one”, replace it with wording that explains the image. Repeat that check for the other images on the page.
Once all three graphics are in place and their descriptions are complete, save the page. This exercise uses two JPEG images and one PNG image. The insertion workflow is the same for both formats; choosing between image file types is a separate topic.
Key terms
Alt text
Alternative text that describes an image. It helps screen-reading software communicate the image’s meaning and helps search engines understand its subject.
Properties panel
The area below the document in the Dreamweaver interface used here. Selecting an image makes its image settings, including the Alt field, available there.
Keywords
Words and phrases relevant to a page’s subject or business. In alt text, they should fit naturally into an accurate image description.
JPEG and PNG
The image file formats used in this exercise. Both can be inserted through the same Dreamweaver image menu.
FAQs
Why does Dreamweaver CC not prompt me for alt text?
In the CC interface used here, the Alt field is in the Properties panel rather than the insertion pop-up used in older versions such as CS5 and CS6. Select the image and enter its description below the document.
Can I change alt text after inserting an image?
Yes. Click the image in Dreamweaver, edit the Alt field in the Properties panel and save the page. There is no need to insert the file again.
Should every image use the same keywords?
No. Describe each image individually. Use relevant terms where they accurately describe the subject, but avoid repeating the same keyword phrase across unrelated images.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
