Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, we're going to add some thumbnail images. Let's get your cursor inside of the gallery_thumbnails div, after the k, in that default text we put in there. Come up to the Insert panel > Insert Image > acrobats_thumbnail.jpg. Click Choose. Enter some Alternate text. Click OK. I am going to click on this and select it. Down on the Properties panel, I am going to come down to the Link area here and I am going to create a hyperlink around this image. So let's click on the little folder, and we want to link it to the acrobats_fullsize.jpg. Then click Choose.
And when I click away, I can see this blue highlight around the outside, letting me know that this image actually contains a link to the high-resolution file. Let's test this. Choose File > Save All, and then Option+F12 or Alt+F12, Command+R or Ctrl+R to reload, and I can see my gallery here. Let's roll over the thumbnail. I get a little pointer. I click it, and it links me over to the full-sized JPEG. Then I can use the browser's Back button to go back. Now, in the introduction video, we talked about the fact we were going to progressively enhance this user experience.
So in here, let's close the browser. Let's come back to Dreamweaver. Let's switch over to Code view. Inside of Code view, we have, inside of gallery_thumbnails, we have our first anchor tag with the image inside of it. Let's delete that link text, and we want to add one more piece of code in here. We want to add a title attribute to the anchor tag. Titles are what actually show up on a hyperlink if you roll over it, so we're going to use this to create our captions. And I am just going to type 'Caption goes here for Acrobats'.
So at this point, we need to add the remaining 19 thumbnail images and link each corresponding thumbnail to its high-resolution file. I'll do that before the next movie, and then we'll continue on.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101260 Viewers
61 Video lessons · 88019 Viewers
71 Video lessons · 71883 Viewers
56 Video lessons · 103720 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.