UNM



Ensuring Your SeaMonkey Composer Webpage Links Work

Setting up and naming the folders for your webpage files correctly, naming and saving the files you wish to display on the webpage correctly, and creating the HTML links correctly are all critical to ensuring your webpage links work. Here are the steps to follow:

1. Create a folder to hold all the subfolders and files associated with your webpage. Name the folder using a single word such as Webpage or ePortfolio. Names such as Web Page or Fred' s ePortfolio will not work as the computer HTML language, and / or the computer servers on which websites are stored, do not work well with folder or file names containing spaces or punctuation marks.

2. You could place all the webpage files inside the single webpage folder. However, this can quickly become unwieldy for a teacher. For example, suppose you were posting students’ animal reports on your website as well as a webpage sharing pictures of your class’s trip to the zoo. If you had 25 student s, there would be 25 animal report Word files along with a field trip HTML file and a JPEG file for each image of the field trip. This would be in addition to any other HTML page files and associated image, document, PowerPoint or Excel files on the website. It wouldn't take long before your webpage folder had many dozens of files making it difficult to find any single file you might have an interest in.

To avoid such a mess, it's much better to create subfolders inside the webpage folder to keep all the webpage files organized. For this assignment, I suggest that at a minimum you create a subfolder named Resources to hold your Word, PowerPoint, video,

podcast and any other files you want to link to from your website. If you are including images on your website, it might also be a good idea to have a subfolder named Images as well (Figure 1). If you were the teacher in the example above, you would also want a subfolder named Field_Trip or FieldTrip as well is one named Animal_Reports or AnimalReports. Note that the names for all these subfolders contain no blank spaces!

Now, BEFORE YOU CREATE LINKS TO YOUR FILES OR IMAGES, place a copy of the files you will link to on your website into the appropriate subfolders. So, if you will have images on your website, place a copy of the image files into the Images subfolder. Place all Word, PowerPoint, Excel or other files in the Resources subfolder. Be sure none of these files include any spaces in their names. For example, use Webpage_Links.doc rather than Webpage Links.doc.

3. The next critical step in ensuring your webpage links work focuses on correctly saving your SeaMonkey Composer HTML file. Remember that Composer does not work the same way as Microsoft Word. When you insert an image into Word, the image becomes part of the Word file. Once the image is inserted, you can transport the Word file to any computer, open it, and the image will be there within the document.

But that is not how HTML works. The HTML file that creates a webpage does not have the image file embedded within it. Instead, it only forms a link to the image file. When a web browser reads the HTML file to display it on a computer, it follows the link to find the appropriate image file to display. That means any images you want to show on the webpage must have the appropriate image files stored inside the Webpage folder. If the image files are not in the Webpage folder, or if the link path from the HTML file to the image file is incorrect, the browser will display an empty box where the image should have been (Figure 2).

In the same way, if you have not placed a copy of all Word, PowerPoint or other files you wish to display on your website in the Resources folder and created the link correctly, the web browser will show a “File Not Found” error message when you click on the webpage link to that file.

To avoid seeing an empty box or a File Not Found error message, you MUST save your website HTML file BEFORE creating any links to images or other files. So, from your Seamonkey Composer page, go to Save As and save the HTML file as index in the Website folder.

4. Now you’re ready to create links from your website HTML file to your image and resource files. The trick here is to be sure the path from the index file to the image or resources files is a relative link rather than an absolute link. The process is almost the same for images or resource files. First, I’ll describe linking to an image.

Go to Insert-Image or click on the Image button and the Image Properties dialog box will appear (Figure 3). Click Choose File, browse to the desired file, click on the file to highlight it, then click the Open button (Figure 4). Once you click Open, the Image Properties dialog box will

appear (Figure 5). Note the path shown in the Image Location window is to the Images subfolder within the Website folder. This is a relative link which will work even if the Webpage folder is moved. The relative link is created by the checkmark in the URL is relative to page location checkbox.

This is in contrast to Figure 6. Note the URL is relative to page location checkbox is not checked, and the path shown in the Image Location window shows an absolute link, meaning it specifies a specific drive, the C drive, and path to the webpage folder, and within it, to the Images folder. This link will only work as long as the Webpage folder stays in this location. Move it and the link will no longer work.

NOTE: Occasionally, the image won’t appear despite following these instructions correctly. If that occurs, save the file and close Composer. Then, reopen Composer and the webpage file and the image should appear.

Creating links to your resources works the same way. Start by highlighting the text you wish to turn into a link, the go to Insert-Link or click on the Link button and the Link Properties dialog box will appear (Figure 7). Click the Choose File… button, navigate to the Resources folder and click on the file you wish to link to, then click the Open button (Figure 8).

The Link properties box will reappear and the path will show in the Link Location window (Figure 9). Note the URL is relative to page location checkbox is checked and the path shows a relative link – this link will work if the Webpage folder is moved.

This is in contrast to the absolute link shown in Figure 10 which would not work if the Webpage folder were to be moved.

NOTE: If you place your Website folder on the desktop of the TEC computers, some links, particularly to video files, may not work. If you place the Website folder in your personal folder and open it from there, the link should work properly.

-----------------------

Figure 2: Empty box due to a missing file or incorrect path.

Figure 1: Folder and subfolders

Figure 3: Image Properties dialog box

Figure 4: Choose Image File dialog box

Figure 5: Relative link – will work

Figure 6: Absolute link – won’t work

Figure 7: Link Properties dialog box

Figure 8: Open File dialog box

Figure 9: Relative link

Figure 10: Absolute link

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download