Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links
Skill Level Intermediate
Now we're going to add a hyperlink down for the contact section. Let's get our cursor down in here. We had put that default text in the beginning inside of the div.gallery_contact. Let's come in here and type 'Contact Me'. Let's select that. Down in the Properties panel, under the Link field, we're going to make this a hyperlink that will initiate a mail to: address. So we're going to type mailto, colon. Then you can put in your email, address email@example.com, hit Return.
That will create a hyperlink. Over on the right-hand side, we had that default text in for where the caption goes. Let's just delete that text. So with a hyperlink created on the left, let's come over to our CSS Styles. Let's go to new hyperlink style, Compound path. We're going to say a.contactlink. This is going to be a brand-new class. We'll assign it into the anchor tag in a moment. Let's choose OK. The Properties, we're going to pick in here.
Color, we're going to set to white. Text-Transform, all uppercase. No Text-decoration. Under the Box model, let's come under Padding. Let's turn off Same for all. We're going to set 0 on the Top, 30 pixels on the Right. This is going to keep the type inside the anchor tag 30 pixels from the right-hand side where we're actually going to position that envelope. 0 on the Bottom, 0 on the left, 0 for Margin.
Lastly, let's come into Background. For Background image, we're going to choose Browse. Let's go into our template directory inside of images directory. We're going to grab the link_email. Click Choose. Background-repeat: we're going to say no-repeat. On the X, we're going to align it to the right, and we're going to set 0 on the Y axis. Click OK. Now in order to assign this here, I'm going to get a few characters inside of the link here. I'm going to come down to the document structure, click on the anchor tag to select the whole thing.
I'm going to come down to the Class declaration inside of the Properties panel and select contactlink. Now what's interesting here is Dreamweaver doesn't actually preview this properly, but if we come up here and hit Live view and scroll down, we'll see the envelope showing up on the right-hand side here. Let's come out of the Live view. Now, we're on the right-hand side where the caption is. We actually have those inside of a p tag. So let's come over here to New CSS Rule, and create a regular tag.
Let's come down to select the p tag. Click OK. Font color, let's pick a medium gray. Box property, Margins, 0 on the Top, 0 on the Right, 12 on the Bottom, 0 on the left. Click OK. Let's create one more rule, a compound rule. This is going to be the zoom link. Let's type a.zoom. Click OK.
Color is going to be white. Text-decoration is none. Box properties, Padding, 0 on the Top, 0 on the Right. We're going to put 5 on the Bottom because height of the zoom actually needs a little bit more room below for the handle of that graphic. 20 on the Left. Set 0s on the Margin. Next, let's go to Background. We'll click Browse. We'll choose link_zoom. Click Choose.
So let me select this and hit Copy. We're also going to add it to the link down here, the overalylink, the text-based one that is inside the initialization area as well. Let's click Save on the gallery. Let's go back to Dreamweaver. Let's choose Save All, Option+F12, load in a browser, hit Reload. Now, I can see my styles down here. CONTACT ME highlights links to firstname.lastname@example.org.
If I click this, it'll load this up in an email client. View larger has a little magnifying glass. We have our gray type down here. So as I click, we can see the type opening and closing. Well, this concludes all of the functionality for the interactive gallery. In the next movie, we'll talk about a few things you might want to consider for extending the capabilities of this particular project.