Uploading and Linking to PDFs

Linking to a PDF from anchor text and a PDF icon image

To link anchor text to a PDF, follow the same procedure outlined in 12-uploading-linking-docs.doc

Let’s insert a PDF icon and link that to a new PDF file.

First let’s insert the cursor where we wan the icon to display. We’ll place it before the “Admin overview” text.

Click the Image button, which opens the Image Properties window as you see below.

Click the Browse Server button, which opens the File Browser window.

The File Browser window will open to the last directory we were using. In this case, the PDF icon we’re looking for is in a higher-level directory, so click the top-level directory labeled <root>. You may need to close the File directory to see the other folders listed below it in the Navigation column on the left.

Open the Image folder then click on the Icon folder, which will display a list of files:

The file named “pdficon_small.gif” is the one we want, so click on that file which hi-lights it in blue. Now click Insert file in the File Browser toolbar. This returns us to the Image Properties window where the path to pdficon_small.gif is shown in the URL field.

In the Alternative Text field, type a plain-language description of the image file. In this case we’ll type “PDF icon” as you see below:

*Important Note: For a great example of the importance of including Alternative Text, please read 5-importance-of-alt-text.doc

Click OK and you’ll see the PDF icon image in the Body of your webpage.

You’ll notice the icon is tight against the text where we inserted it. In this case, we can simply add a space between the image and adjacent text.

Image Aligning and Spacing

For greater control of the image alignment and space around the image, right-click the image and select Image Properties which returns us to the Image Properties window.

In the HSpace field enter a value of 10, which is 10 pixels. In the Alignment field select Left. You’ll notice the Preview displays how the image will appear relative to adjacent text (indicated with the “Lorem ipsum…” place-holder text). Click OK.

You can experiment with different HSpace (horizontal) and VSpace (vertical) values as well as different Alignment settings and see how they affect your results.

Linking the image to the PDF

To link the PDF icon to the PDF document, click on the icon image and then click the Link icon (the globe with the chain links below it) in the toolbar. This opens the Link window as you see below.

Click Browse Server and navigate to the folder you want and browse and upload your PDF file as described in 10-uploading-linking-docs.doc or, if the PDF is already on the server, navigate to its folder and click on the file which hi-lights it in blue as you see below.

Click Insert file in the top-right of the File Browser toolbar. This returns you to the Link window where you see the path to your PDF file in the URL field. Click OK.

The PDF icon image now shows a blue border, indicating it is an active link.

We should also link the text “Admin overview” to the same PDF, so you can hi-light that anchor text and repeat the same process as we did for the PDF icon image, or use the following short-cut.

Click on the PDF icon image and then click the Link icon which opens the Link window as you see below.

Copy the entire path from the URL field of the Link window and click OK.

Now hi-light the anchor text “Admin overview” and click the Link icon in the toolbar.

In the URL field of the Link window, paste the URL we copied from the PDF icon link as you see below.

Click OK and you’ll see that the anchor text “Admin overview” is now an active link.

Scroll to the bottom of the admin window and click Save.

*Important Note about PDF file sizes: While it’s technically possible to upload large files to the server and link to them, we need to remember that people accessing these files must download them through a web browser. If they are using a dial-up connection or visit your site from locations with poor bandwidth, downloading a large file can be prohibitively slow so it’s important to keep your files as small as possible. Optimize your images. Sample down the image resolution in PDF documents or split large, long files into several smaller documents.