"My links or images don't work!!"
Or "Where did my pictures go?"
Broken links and missing images often have the same causes, often as simple as a capitalization error in a file name.
See below for instructions on how to make basic links to sub-folders, how to link back from a sub-folder page to your main page, and how to link between pages in different folders.
A missing image is similar to a broken link: It doesn't appear because the image name, folder name or relative location ("the path") is wrong. Most often, the problem is incorrect spelling or capitalization in a file name or Web address. On a case-sensitive server, "MyPic.jpg" and "MyPic.JPG" and "mypic.jpg" could be three different files. Use lower-case for everything. It's simpler.
Most of this page was written in spring 2011 for COMS226 students having difficulty cross-linking a bunch of Web pages with Dreamweaver for their final projects. While it refers to coms226 folder and page names, and specific problems those students were having, it may help anyone identify and fix page linkage issues.
Most problems with links between Web pages occur because of a typographical error in a link code or a misunderstanding of the server's file structure and the location of the file you meant to link to.
Common cases of "page not found" errors or missing images:
- the page or image is not in the folder you are linking to (put it there, or point the link to the right place)
- the spelling and capitalization in the file name on the server doesn't match the link code in your page
- a temporary "file:///" or "H:\" address has been saved in your page (if "public_html" is visible as part of the address, it's wrong; see details below)
A "404" error message means "page not found" (and Radford will redirect your browser to a new "Page not found" page). That usually means the link points to a missing, misspelled or incorrectly capitalized folder or document name. The spelling and capitalization problems are easy to fix.
While you are fixing things, students working in a Windows lab must reset your permissions every time you edit a page. In the Porterfield Macintosh lab, reset page permissions only when you rename a file or add an image. In either case, a "403" error message means the page or folder IS where you said it was, but page permissions need to be updated.
You may make your links to the sub-pages using Image Mapping techniques you used earlier in the semester, or by making a simple text menu. In both cases the HTML link codes are the same: The Image Map link codes are inserted with Photoshop or Dreamweaver, depending on the method used to create the map.
The "file:///" and "H:\" address problems can be repaired easily, whether they are in an image map or a plain text menu. First READ these instructions on how links should be made to be sure you understand the concepts. The REPAIR instructions come at the end.
Basic Links
How to make links to your pages:
In Dreamweaver,
1. SAVE the page you are working on in its official location -- for example, "temporaryhome.html" goes in your coms226 folder. If you do NOT save a page before inserting images or link addresses, Dreamweaver will insert temporary code that will not work for visitors to your page.
2. Type a name or description of a page you want to link to. For example:
Image-cropping and straightening
3. Highlight that text
Use step 4a to insert the link address manually; use step 4b to have Dreamweaver insert it for you.
4a. Click in the Link field of the Properties inspector panel at the bottom of the screen, then type the "path" and page name you want to link to.
The "path" is the relative location of the page, plus its name. Example: Your "temporaryhome.html" page is in your coms226 folder and so is your "crop" folder. If you are linking to the crop folder's page named "cropped.html", the path is the name of the folder plus the name of the page: "crop/cropped.html"
In Web addresses, the slash mark "/" is the separator between a folder name and a document name. If you end an address with a folder name or a slash mark, the visitor's browser will look for a document named "index.html" in that folder.
4b. ALTERNATIVE: Rather use the mouse instead of typing the path yourself? Highlight the text you want to use as a link, as you did in step 3 above, click in the Properties panel's Link field, then click the small folder icon to the right of the field. (The "Browse for File" icon indicated below.) In the standard file-browser screens, navigate to the page you want to link to. Make sure you are using the folders on the server (public_html/coms226), not folders on the Macintosh!
Notice that when you have clicked the page, the URL field of the Select File window gives just the folder name and the html page name. The words "public_html" should never be part of this address; neither should the name of the "coms226" folder, since that is the folder you are working in.
IF you have not saved the page (step 1 above), Dreamweaver will put this warning on screen:
DO NOT CLICK OK. Press the "esc" key to cancel and go back to step 1 above, save the page, then insert your links using steps 2 and 3
5. When done inserting links, save the page, and test your links in a browser using your full "http://www.radford.edu/yourname/coms226" address to get there.
Linking Back
What if you want to put a link on that cropped.html page going back to your main page? That's more complicated, if you have been using a temporary name for your final page so that we could preview the contents of your coms226 folder online. To "close up" the folder when your work is done, you have to change the name of "temporary.html" to "index.html" -- but that means any pages linking TO that page must use the "index.html" name.
1. When all your pages are done and you are ready to link them together, rename the "temporary.html" page "index.html" -- the "home page" name for the main page in any folder. That will make the full Web address of your page
http://www.radford.edu/yourname/coms226/index.html
while the full Web address of your "cropped" page is
http://www.radford.edu/yourname/coms226/crop/cropped.html
2. Background: To link from "coms226/crop/cropped.html" back to coms226/index.html you need a new kind of a "relative" address. Picture the two pages as being part of a "tree" or "stack" like this, all inside your public_html folder:
coms226
coms226/index.html
coms226/about.html
coms226/crop/cropped.html
coms226/banners/bannerset1.html
The index.html file, about.html, crop folder and banners folder are on the same level. The cropped.html and bannerset1.html pages are each one folder deeper into the site than the pages named "about.html" and "index.html"
To go "up" a layer and link from cropped.html to index.html, the path address needs a new symbol: two periods followed by a slash, then the file name.
The "Browse for File" icon in Dreamweaver should insert the correct address for you. But you can type it yourself
3. Open cropped.html in Dreamweaver
4. Type the text you want to use as a link, probably something like "My COMS226 Digital Imaging Home Page"
5. Highlight that text as in step 3 of the previous example.
6a. In the Link field, type "../index.html"
OR
6b. Click on the the Link field's "Browse for File" icon and navigate to the correct file and folder. You should see something like this:
(my demo page is named "links.html" -- yours is named "cropped.html")
7. Save your page, go to http://www.radford.edu/yourname/coms226, and test all your links!
Note: Some spring 2011 coms226 students were confused when I had them start out writing a page named about.html, then asked them to rename it index.html at the end of the semester. There is no reason you can't have pages by both names. Many sites do. The point we were demonstrating in that class is that index.html is the default name for the main page in a folder -- the one a visitor's browser will open if they go to an address ending in the folder name alone.
Notice that http://www.radford.edu/rstepno/326/index.html and http://www.radford.edu/rstepno/326 both open that folder's main page.
Naming one page in a folder index.html blocks the visitor's view of the other items in the folder. If you are developing a multi-folder site "live" on a server, it may be handy to keep some folders contents visible temporarily. For example, this "maps" folder does not have an index.html file, so all of its contents are visible: http://www.radford.edu/~rstepno/226/maps
Linking Within a Folder
What if you put your cropping examples on two pages and want to link from one to the other -- both in the "crop" folder? Easy! The "path" from one page to another within the same folder is simply the name of the page, such as "cropped1.html" or "cropped2.html"
The "Browse for File" tool can accomplish that for you, but you also could type the file name in the Link field yourself.
Linking Between Folders
What if you want to link between two of your pages in different folders? The "Browse for File" tool can accomplish that for you, but you also could type the relative file paths yourself.
For example, in the stack of folders listed above, a link on the cropped.html page to the banner example page would use the two dots to go "up" to the "coms226" folder, then the "banners" folder name and file name, like this
<a href="../banners/bannerset1.html">My Ad Banners</a>
To go the other way, a link on the banner page going to the cropping page would be
<a href="../crop/cropped.html">My Image Cropping Examples</a>
Repairing Pages with Bad Links
IF one or more of your links to pages or images don't work, open the page in Dreamweaver, click on a bad link or missing picture, then click the "Split" view button at the top of the screen. You will see the HTML code for the link or image. If the problem is not a spelling or capitalization error, nine times out of 10 the code will show an address something like "file:///users/yourname/public_html/coms226/crop/cropped.html" or "file:///users/yourname/public_html/coms226/crop/face.jpg"
The fact that "public_html" is part of the address is a dead giveaway that the address is wrong. That folder name is not visible to Web browsers, so it should never appear in a URL. Neither should a "file:///:" or "H:\\" link
If you worked on the page using a Windows PC, it may have a bad address starting with "H:\..yourname\public_html..." and some or all of the separators till be backslashes \ instead of slashes /
Solution: Edit the code to replace the bad address with the correct path. See step 4a in the Basic Links section above, or the "Linking Back,", "Linking Within..." and "Linking Between Folders" sections.