General Rules for Building Web Site Links to 
pages or graphics with NVU or Kompozer

  1. Determine how your site will be organized before you start.  Mirror the server site structure on your computer in a dedicated folder with as many sub-folders as necessary to make the site easy to understand when you look at the files and folders.  

    Before you can make any link (to a graphics, web or any other type) file, you must save the web page.  Do NOT link to files on your computer that are not within the main folder!  It will confuse Kompozer.  There's no way to properly make the link "relative" when the file is external.  See below for some further hints.
  2. Pictures or other imbedded objects are linked to a web page, not imbedded.  That means that they are separate files that must be dealt with separately from the web page files.  See below for how they should be organized.  Don't "drag" a picture onto your web page from somewhere other than within your site folder!  The most reliable way to have valid links are to save the page first. then use the browse function to locate the graphics file.  Kompozer will correctly add whatever path to the file that is necessary, assuming that the graphic is within your site folder.

    On the same note, external pages that are linked within a page must follow the same strict guidelines listed below.  If your source code contains "file:///..." anywhere, you have created links that reference your home computer.  They must be re-done.
  3. Avoid spaces in file or folder names.  (By the way - folders are called directories in most other operating systems, so I might refer to a directory or sub-directory at some point below.)  Unix and Linux servers only read what's before the first space that occurs.  NVU and Komposer  triy to compensate for the Windows incompatibility by putting in a special space character %20 in place of the space, but in the long term, you're better off not using any spaces at all.

  4. Unlike Windows©, Unix/Linux operating system regards a lower case letter as different from an uppercase one - so be careful that your file names in links match the case of the file.  In order to avoid  mistakes, most web authors name all of their files and folders in lower case.  You can use some common keyboard symbols but it's best to stay only with letters, numbers, the dash and the underscore.  For common symbols within your page, use Kompozer's Insert>Characters or Symbols function.

  5. Your entry file (what opens when a browser connects to yoursite.com) must be named index.htm or index.html.  INDEX.HTM and INDEX.HTML works with some servers, but don't take the chance.

  6. The NVU/Kompozer Publishing function only supports html and certain graphics files.  You must use an FTP program to upload any other file format such as PDF and MP3s..  The same FTP program makes it convenient to download multiple files from the web server to your hard drive.  
    When NVU/Kompozer uploads files (Publishes) to the server, it opens a new connection for each file.  Some web servers limit the number of simultaneous connections so a complex upload may fail.  This limitation can be avoided by the use of an FTP program.

  7. Don't forget to refresh (also known as Reload) your browser after uploading new files.  Because your browser caches pages on your computer (for quicker rendering), it may decide to read the older (local) file rather than the new one on the web server.

  8. Use the Format>Page Title and Properties function to briefly describe the content of the page, not its file name.  The page title is important for search engines and will show up in a search engine's site description.
A tutorial on how to use NVU to set up a web site

Arranging Your Web Site Files

In order to use the "Link is relative" checkbox, the directory structure of your hard drive and the web server should look the same.  Please follow the directions below to create a folder (directory) for your local files.
Files stored on
your hard drive

Make a primary folder on your computer's hard drive to contain all of your web site files.  Don't use your Windows desktop!  I prefer to make a folder in the root of the drive.  i.e. c:\my_site, then create sub-folders for better organization.

Local files

You may set up your web site with sub-directories (folders) as necessary to keep your site organized.  A simple site may be put into a single folder, but complicated sites might separate locations for different subjects, graphics or CSS files.  The organization  of my site is illustrated here.

Files stored on the web server,
including some external support files

The map below shows a typical tree of a web server's files.  Some servers will not show the server support files, but many do.  Leave them alone unless you have permission from the ISP.

File tree

When you publish (with NVU or an FTP program), make sure that the folder structure is duplicated on the web server.  Note that when you connect, you may see some support files outside the structure.  

Make sure that you're working with the correct primary folder.  Usually there will already be a index.html file placed in the folder that's meant for all your files before you start.  That way you can tell where you are.  Consider renaming it before you replace it with your own when you publish to the site.

Extra Credit: If you put an index.htm(l) file into a subdirectory, the file will display if you give someone the URL www.yoursite.com/sub-dirname/.

Problems

My pictures don't show up after I publish.
  • Check (with an FTP program, see link below) that the picture was uploaded (published) correctly.  (Also see #6 for limitations of Kompozer's Publish) Don't forget that the case of the name must match exactly what was entered in the link box.  You can check by hovering your mouse cursor over the link.Make sure that you check the "URL is relative..." box whenever you create a link to a site or a picture.  You can check whether there's a problem by searching the source code for "//file/".  If it's there, you've got a link that points to your computer, not the web server.  Fix it by re-linking the picture or editing the source code.

  • Many times this problem comes from linking a picture that is not in or under the folder in which the html file resides.  (There can be an exception to this rule, but only when the html file is in a sub-folder and you are still pointing to a file that exists within the main folder.) This page has hints for organizing your files.
  • Slow loading because the file format is wrong and/or size is too large.  Look here for instructions to resize and compress files for optimimum web-site viewing.  If you don't have your own graphics editor, Irfanview (Windows only) and Gimp (most OS's) will do it for free.


The page (especially pictures)
loads slowly

Use a file manager (like Windows Explorer) to check the size of all your graphics files.  (You may  have to change to Detail view to see the values.)  People with dial-up connections will get very frustrated when you make them load more than 200Kb or 300Kb (total) for each page.  

Stick to the rules below to optimize page loading.

  • Resize each picture to the size that it will be displayed on the web page - usually at 72 dots-per-inch.  DO NOT force a display size by specifying it when you embed it into the page with NVU.  You will either be wasting bandwidth or loosing picture clarity: Browsers do a mediocre job of resizing, especially with GIF and PNGs.

  • Use JPEG format for pictures with color gradients and complex backgrounds.  Most graphics editors will allow you to adjust the quality (compression) of the image.  Experiment a little.  Generally, a compression of 20-30 will still have adequate quality.  A 300px x 300px picture can be shrunk to as small as 6Kb and still look good.

  • Use GIF or PNG format for line art or simple block graphics.  Note that both formats allow "clear" backgrounds that let the page's background to show through.

FTP Programs for Windows, Mac and Linux