Tutorial 4. Adding a Download Link

Often on a portfolio site, it is desirable to allow for a download. The most obvious case is to offer a PDF version of your resume along with your online version, but you may also want to provide samples of your work in a variety of formats. This tutorial covers how to do this, but also it teaches you how to alter a slice you've already made to accomodate a download link.

1. Starting: Choose a slice to modify. Let's say I have a site that looks like the one above … (pretty convenient) that I want to add a download link to. I don't want to re-output the page and slices over again — though for the perfectionist, this is a real option. No, I'm lazy and I just want to get my site finished and turned in.

2. View the page in a browser, check out the slices. Open the page you'd like to add the download link to in the browser of your choice. With the mouse, "pull" at various slices (click and drag), looking for one big enough to carry text for the link, but small enough that the new linked image won't be huge and in the way. Above, I've found a slice down at the bottom of the sample page that fills the bill; it highlighted blue when I pulled it, as you can see in the above example.

3. Open the Photoshop source file for the page. Find the source file for the sliced page in Photoshop.

4. Write link text on slice. In Photoshop, select Text Tool from toolbar. Click where you want the text for the download link to be; PS will automatically create a new layer for the text.

If your download file is large consider giving its size. Your text might read: "Download PDF (12.8 MB)". Anything over 1.5 MB is worth offering this warning on. Another idea is to have a low-resolution and a high resolution file, and have two download links, giving the user and option.

5. Select and rename the slice. Using the Slice Select tool, double-click on the slice to bring up the Slice Options dialogue box. In the box, name the slice "download_link" so that after after output, you'll be able to find among the gazillion images in your folder.

5. Save the selected slice. Now go File > Save for the Web … and save the slice choosing "Images Only" and "Selected Slices", as shown above, into your site folder. You should be able to open your site folder's Images folder and find a file called download_link.jpg inside.

PART II: Provide PDF or Other Download file.

If you're going to make a dowload link, guess you have to have something to download. Duh. Some files are made specifically to download, such as PDFs and DOCs (.pdf and .doc files), and some must be prepared for download by "zipping up" the file. In Mac OS, right click (Cntrl+click) the file and choose "Create Archive of …" The .zip file will be treated as a download, and not as a file to open in the browser.

6. Make a download folder in your site folder. In your site folder, create a new folder called "download", as in the example above.

7. Put your download file where you can find it. … such as in the new dowload folder. Above, the file is "myRez.pdf".

PART III: Finish Link in Dreamweaver.

Now you're ready to finish the page with its download link in Dreamweaver. Open the page that will have the download link.

6. In Dreamweaver, find and select the slice to be replaced. In the example above, the slice that will be replaced with the new image link has been selected.

7. Replace the old slice with the new one. Double-click the slice to open the "Select Image Source" dialogue box. Find the download_link.jpg file, as above, and click "Choose". The new image with the link text on it should now be showing.

8. Link to the download file. With the new slice with the download text on it selected, look at the Properties Panel (Window > Properties) — find the "Link" field and click the folder icon at its end (flag 1). When the dialogue box pops up, find the download file (flag 2) and select it. The link is now made.

9. Set border to zero in image tag. With the download image still selected, place a "0" (zero) in the "Border" attribute box; in the code view a border="0" should appear in the image tag. Above, the Border attribute is set at the lower right.

10. Finish and test. Save your page and test the link.