Some time ago, one of my visitors asked me how he could put a footnote or endnote onto a web page using Dreamweaver. He probably wanted to put an academic essay on the web and use such notes to cite his sources. This article describes how you can go about doing this.
This article assumes that you already know how to use Dreamweaver to create a website. It only deals with the specific task of adding a footnote or endnote. If you need a complete tutorial on how to create a web page, please start at the beginning by reading the chapter 1 of the Dreamweaver tutorial. In fact, you may wish to also read How to Create / Set Up Your Own Website: The Beginner's A-Z Guide, since making a website is more than just using a web editor to design your web pages.
There is no automatic facility for creating footnotes or endnotes in Dreamweaver the way you can in a traditional wordprocessor. As such, to actually place such notes on your web page, you have to do it the old fashioned manual way. That is, you will need to manually create the footnote/endnote reference (be it a superscript number, an asterisk or some other character), then go to the part of your page that holds the actual notes and manually create them. If you're using endnotes in a multi-page article, where your citations and other notes for the different pages are collected together on a single standalone page, you will have to manually create that special endnotes page yourself.
In other words, it's all manual. You cannot rely on things like automatic renumbering of footnote/endnote numbers. If you change the numbering, you'll have to look for all the references to that number and modify them yourself.
In view of this, if you have a choice in the matter, I recommend that you try to avoid using footnotes/endnotes on web pages. For references to other websites, simply put an ordinary web link the usual way every web page does.
Having said that, I realize of course that there are situations where links are not sufficient, or where you are not given a choice in the matter. In which case, read on.
Start up Dreamweaver and open the web page where you need to put the reference to the footnote, and move your cursor to the exact spot where you need to insert the footnote number or symbol.
There are many different footnote symbols used in literature. For example, many books use a superscript number to denote a footnote. The first footnote uses a superscript "1" like this1, and subsequent footnotes have an increasingly larger number. Other types of footnote symbols include the asterisk ("*"), the hash ("#"), the dagger ("†"), the double dagger ("‡"), the section sign ("§"), the paragraph sign ("¶"), the double vertical line ("‖") and probably others as well.
Note that one or more of the above symbols may not show up correctly in your web browser. If you see a question mark or a square box for any of the above symbols, it means that the correct symbol could not be displayed. This is the problem of using unusual characters that not all fonts have. For this reason, if you can help it, I suggest that you stick to using numbers, the asterisk or the hash for your footnote character.
If you want to use numbers for your footnote symbols, and you want to make those numbers appear slightly higher on the line than the rest of your sentence, that is, make it superscript, click "Insert | Tag" from the Dreamweaver menu. That is, first click the "Insert" menu, then, in the menu that appears, click the "Tag" item. A dialog box, entitled "Tag Chooser", will appear.
In the left box, click the "+" sign besides the "HTML tags" line to expand that item. Click "Formatting and Layout". In the right box, scroll down till you see "sup", which stands for "superscript". Click it once to select it. Be careful to click the "sup" line and not the "sub" (for "subscript") line — they look almost alike so it's easy to click the wrong one by mistake.
Click the "Insert" button. A new dialog box, called "Tag Editor - sup" appears. Click the blank box beside "Content" on the right side to put your cursor inside the box (if it's not already there), then type "1" (without the quotes) or whatever number or character you want to use for that footnote. Click the "OK" button. You will be returned to the "Tag Chooser" dialog box again. Click "Close" to dismiss it.
If Dreamweaver has switched its view mode to "Code and Design" behind your back, and you don't want it that way, just click "View | Design" to restore your window to the WYSIWYG ("what you see is what you get") mode. Once you do that, you should be able to see your superscript "1" (or whatever number/character you entered) in your document.
If you prefer to use one of the non-numeric footnote symbols other than the asterisk ("*") and the hash ("#"), both of which you can easily locate on your keyboard, click the "Insert | HTML | Special Characters | Other..." menu. That is, click the "Insert" menu, followed by the "HTML" item on the menu that appears, then the "Special Characters" item on the submenu that is displayed, and finally the "Other..." line.
A dialog box labelled "Insert Other Character" will appear. You should be able to find things like the dagger ("†"), the double dagger ("‡"),
the section ("§") and the paragraph ("¶") signs there. Click the appropriate symbol followed by the "OK" button.
If you want to use the double vertical line ("‖"), type "‖" (without the quotes) into the
"Insert" box of the dialog box.
Note, however, if you want to put those characters in superscript, do not click the "OK" button. Instead click the symbol once to put the HTML code for that symbol into the "Insert" field. Select all the characters in the "Insert" field (for example, by dragging your mouse over them). Click your right mouse button and click the "Copy" item on the menu that appears. This copies the HTML code for that symbol into the clipboard. Click the "Cancel" button to dismiss the "Insert Other Character" dialog box without doing anything. Now follow my instructions in the section above on how to insert a superscript character or number. When you reach the part where you are supposed to enter the footnote number or character, instead of entering "1", click your right mouse button, followed by the "Paste" item in the menu that appears. The code you copied earlier will be inserted into the "Content" box. When you click the "OK" button and "Close" button, you will find that the symbol appears in superscript in your web page.
Once again, be warned that when you use these symbols, some of your visitors may not see the same thing as you do in their web browser. That is, your web page may look fine to you in Dreamweaver and your own web browser, but if you go to a different computer, those symbols may appear as a question mark ("?"), a square box, or some other browser-dependent symbol.
Now that you have inserted the footnote symbol or number, you will need to insert your actual footnote itself. Go to the portion of your web page where you want to insert the footnote, and enter it in the usual way you created the rest of your page (that is, just type it). The procedure for creating superscript characters is the same as above.
If you are using endnotes on a separate web page, open that page (or create it), and enter your endnote there.
(I know the above sounds terribly obvious, but I'm putting it here for completeness sake. It's also to remind you that you haven't finished what you set out to do until you enter the actual footnote or endnote itself.)
While the above answers the question my visitor asked me about placing footnotes and endnotes, it doesn't address how you can optimize your footnotes/endnotes for use on a medium like a web page.
Web pages aren't like printed books. In printed books, you can glance at the bottom of the page to refer to the footnote and easily return to your original place in the text. Since the words on the page have not moved in the interim, and the whole page is spread out before you, your mind is able to easily locate approximately where you were previously. It's then a simple matter of looking for the superscript number to find the exact spot. Endnotes are, of course, a bit more troublesome, but in a pinch, the reader can use one finger to "bookmark" the referring page while flipping to the end of the chapter or book to read the note.
On web pages, readers wishing to look at the footnote or endnote will have to scroll down the page. In other words, they cannot rely on their visual memory to quickly return to their original place in the text. It will no longer be in the same spot in their browser window, since they would have scrolled the page to look for your note.
However, don't despair. We can compensate for this usability hiccup. To do this, we will take advantage of the special facilities web pages have which printed books do not, namely, hyperlinks. On web pages, it is possible to design your page so that your readers don't have to even scroll up or down to refer to your footnotes or endnotes. All they need to do is to click a link on your page, and they will be brought to the footnote/endnote. When they have finished reading that note, they can click another link, and be returned to their original place in the text.
The way to do this is to create two links for each footnote: one that takes the reader directly to the footnote, and the other that brings him/her back from the footnote to the original location on the page. You may already be accustomed to links that take your visitors to a different page on your site or to some other site. However, it's possible to do more than that with links. You can actually link to specific locations within a web page. A step by step guide on how to acomplish this can be found in the article How to Link Directly to a Line or Section on a Web Page with Dreamweaver. Simply apply the method given in that article to create links to/from your footnotes.
If you're not sure what I'm talking about, try clicking this footnote number here[1]. You will be brought to a footnote at the end of this article. In that footnote, there is a link that you can click to return to this paragraph. (Do it now. Don't worry, you won't lose your place in this article. That's the whole point of what I'm saying here.)
Notice that instead of simply using a digit, such as "1", for the footnote number, I enclosed it in square brackets, that is "[1]". I did this because the superscript "1" is extremely small and may be difficult to click. Putting the "1" in square brackets, and making the entire sequence of those three characters into a clickable link, makes it an easier target. It's basically just an attempt at improving usability and accessibility.
With the information provided in this article on how you can add footnotes or endnotes to your website with Dreamweaver, as well as the tips on improving their usability, you are well on your way to putting your academic treatise on the web.
1. This is an example footnote that serves no purpose other than to illustrate the use of links to help users navigate between the footnote and the main article. It allows you to quickly go to the footnote in question, and then, when you're through, return to the article without wasting time. When you've finished reading this note, please click here to return to the original place in the article that referred to this note.
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 Insert a Footnote or Endnote on a Web Page with Dreamweaver
