Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99253 Viewers
56 Video lessons · 112527 Viewers
71 Video lessons · 81335 Viewers
131 Video lessons · 39048 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.