Dreamweaver: How To Link Thumbnail Images Pt.3

Posted on March 6th, 2008 in Tricks by admin

Table of contents for Dreamweaver: How To Link Thumbnail Images

  1. Dreamweaver: How To Link Thumbnail Images
  2. Dreamweaver: How To Link Thumbnail Images Pt.2
  3. Dreamweaver: How To Link Thumbnail Images Pt.3

Click to select the image come down to the ‘properties inspector’, to the browse button next to the link, click the browse button and now let’s find Bay Dock – okay, click ‘choose’.

So you’ve now set a link from this image to the page we created called Bay Dock that looks like this. So it has the words at the top and the bigger image in the middle. But we want to make sure that when you click on it here, it opens here. And that requires a target so notice on the ‘properties inspector’ that there is ‘target’ option and when you click the arrows there in the target window you’ll notice several options. The top 4 are always there.

I’ll cover those in the next lesson when I get into tips and tricks for setting links.But the 3 at the bottom of this list – main frame, left frame and top frame correspond completely to what you just saw and what’s still visible in that bottom right corner. So if you choose top frame, then that link would open in the top area where the banner is. That’s not where we want it, if you choose left then it’ll open in the same place as the original image and that’s not gonna work either.

So obviously we want it in the main frame. The goal is that when you click on the little thumbnail on the left, it opens the document in the area to the right. So I’m gonna choose ‘main frame’ as my target and let’s go on to the next one. We’ll set up few of these links and then I’ll show you in a browser how they work. So ‘Berkley sunset ‘, again we’re going to use the browse button to link, we’re gonna find our Berkley document.

You’ll start to appreciate why I was so careful with that naming convention, so that when I match these up it’s easy to set these links. I want to target this and then main frame, scroll down a little more and set these last three real quick. So ‘Death valley’, ‘choose’ and target ‘main frame’.

‘Star burst’ link, ’start burst’ – choose, and again we want to target ‘main frame’. And finally the last one our ‘Dancing Trees’ and even though it’s visible here, that really doesn’t matter what you have open on the sreen while you’re setting these links does not affect where the links will actually link to. So we click to ’select’ the ‘Dancing trees’ click the little browse button next to link, you look for ‘Tree dance’ – choose and again we set the target to main frame.

Now this time when I save I’m gonna choose ‘File’, ‘Save All’ ‘cos I wanna make sure that I’ve really saved everything that I have done to date. And I’m gonna choose ‘Preview in Safaris’ so I can see if it worked. Now notice here that the title Ken Milburn Photography that’s because I put that title on the frame set so even though it’s not visible on each of these pages, it is visible at the top.

So let’s test and see if those links worked if I clicked – look at that Bay Area Dock, Berkley Sunset, Death Valley, Star Burst and Dancing Trees.

In case you didn’t see the video in part 1 of this series… here it is again.

Tags: , , , , ,

Tags

Post a comment