I recently received a message from one of my visitors asking how she could put a PDF file (such as an ebook in PDF format) on her website and link to it. Since she is using Dreamweaver, this tutorial deals with how you can do this using that web editor.
This tutorial only tells you how to put the PDF file onto your website (ie, upload it) and then how to link to it from the other pages on your site. It does not tell you how to create a PDF file.
If you don't know how to create a PDF file, you may want to check the Free PDF Converters, Editors and Printer Drivers page to get the necessary software and tools to let you do this. Another way is to use one of the wordprocessing software listed on the Free Word Processors and Office Suites page that allow you to directly save your document as a PDF file.
In addition, this tutorial assumes that you already know how to use Dreamweaver, and so I'll gloss over things that I assume you already know. If you are not familiar with Dreamweaver, please see my Dreamweaver Tutorial for a step-by-step guide. If you don't even have a website, and are just exploring the possibility of one, you may want to read the How to Make / Create a Website: The Beginner's A-Z Guide to start with.
PDF files can be useful if you want to publish an electronic book (or ebook) on your website. I notice that some authors who have published (paper) books provide an electronic version of those books on their site (whether the whole book or parts of it). These are legitimate uses of the PDF format for your site.
Do not, however, publish your website as a series of PDF files. For example, don't create a website that is basically a main (normal) web page that links to subpages that are PDF files. (Don't laugh. I've seen such sites.) PDF files create a sub-par user experience on your website, so they should not be used as substitutes for normal web pages. Using them to contain your ebook is fine. But don't use them to replace your normal web pages.
The first thing you need to do is to put a copy of the PDF file under Dreamweaver's Site Manager control. This means that the PDF file has to be copied into the folder on your computer that contains your website files. When you created your site definition in Dreamweaver, you specified a folder on your own computer where your website files are to be saved. This folder probably contains your "index.html" and the other files that belong to your website. Copy your PDF file into that folder (or a subfolder within that directory).
For those who use Windows Vista, and don't know how to copy a file, click the Start menu (the Windows icon at the bottom left corner of your monitor), and then the "Computer" item in the menu that appears. Navigate to the place where you saved your PDF file. (It's not possible for me to tell you where you saved it, since I cannot read your mind. Chances are that it's somewhere in your "Documents" folder or your Desktop. Just click around till you find it, but start with the "Documents" and "Desktop" folders first since it's more likely to be there.)
Once you've located the file, right-click on the filename (that is, click the right mouse button instead of the left while your mouse cursor is over the filename), and in the menu that appears, click the "Copy" item.
Now using the same "Computer" window, navigate to the folder where you keep your website's files. By default, Dreamweaver CS4 saves the files in a folder named after your website's name in your Documents directory. Once you locate the folder, you should be able to see the existing files (like "index.html") that you have created for your site there. (You may not be able to see the ".html" extension though, if you did not configure Windows to show you the full filename.)
Right click a blank space in the folder window, and in the menu that appears, click the "Paste" item. Your PDF file should now appear in the window.
Start up Dreamweaver and open up the web page where you want to place the link to the PDF file.
Look in the FILES panel on the right hand side of the Dreamweaver window. You should be able to see your PDF file listed among your other files. This is important. If it's not there, it means that you've copied the file to the wrong location. If so, go back to the first step and fix it.
Now select the text on your web page that you want to make into a link. (If this is all unfamiliar to you, you may want to revisit chapter 5 of the Dreamweaver tutorial on how to make a link to refresh your memory. That same chapter also tells you how to make an image into a link, if that's what you want.)
Click "Insert | Hyperlink" from the menu. That is, click the "Insert" menu, followed by the "Hyperlink" item in the menu that appears.
In the "Hyperlink" dialog box that appears, click the folder icon beside the "Link" field. A "Select File" dialog box will be displayed. You should be able to immediately see your PDF file. Click it. This should place the name of the PDF file into the "File name" field. Then click the "OK" button. You should be returned to the "Hyperlink" dialog box. Click the "OK" button to dismiss this box as well.
The text you selected should now appear as a link pointing to your PDF file.
Finally, publish your web page using "Site | Synchronize Sitewide". Do not use "Site | Put" because Dreamweaver will not upload the PDF file if you do. (Or at least, it doesn't in the version I'm using.) When you click the "Preview" button while synchronizing, you should be able to see your PDF file in the list of files that Dreamweaver thinks it needs to upload. (If you don't know what I'm talking about here, it means you really need to read the main Dreamweaver tutorial series.)
You should now test the modified web page in your browser. Load the web page that you modified earlier in your web browser. Click the link to the PDF file. If you have installed a PDF plugin in your browser (often the default if you have installed a PDF reader), the browser will open the file within its window. If not, or if you've disabled the plugin (or set your browser to prompt), your web browser will offer to save the PDF file. If any of these cases occurs, it means your web page and PDF file were correctly published.
Congratulations! You have now successfully published and linked to a PDF file using Dreamweaver.
Copyright © 2009-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Upload and Link to a PDF File (or PDF ebook) with Dreamweaver
