Since we're creating files that we plan to publish to the web, it's a good idea to follow some web-specific naming conventions.
Give your files and folders short descriptive names. A descriptive name lets you know what the file or folder contains and helps you keep everything organized. Don't go overboard. Keep those descriptions pretty short.
Don't type any spaces in your file or folder names. When you upload a file to your web server, each blank space in your file name is encoded as “%20.” This means a reference to a file inside an HTML page would need to include the “%20” formatting. And that's something we want to avoid.
Here's an example: if I create a link inside my HTML page to another HTML page that's called “unity and variety.html,” I would need to reference that page as “unity%20and%20variety.html” for the link to work on the web. To avoid awkward references like that, simply remove any spaces from your file and folder names. If your file name includes several words, separate those words with hyphens—“unity and variety.html” becomes “unity-and-variety.html.”
Some web servers are case sensitive. So a server might view “Portfolio.html” as different than “portfolio.html.” Keep all your file names lowercase and you won't need to worry about case sensitivity—you'll know that any file you reference will be all lowercase letters.
Avoid using special characters in your file names. Numbers are fine but avoid characters like: & , . ( ) % # $ ¢ / \ - { } [ ] < > : ; @
In summary, use short, descriptive, lower-case file names with multiple words separated by hyphens. Doing so helps you organize your files and helps visitors to your site grasp quickly the site's content. (If your HTML pages have clear descriptive names, they can function as another way to identify page content for visitors who look at the browser's address bar.)
If you need to change a file's name, I recommend doing that in Dreamweaver. Open Dreamweaver's File panel—right click on the file you want to change and select Edit>Rename from the drop-down menu or just slowly click twice on the file and type in a new name. Once you've changed a file's name, Dreamweaver searches through all your HTML files to look for references to the file. If it finds any references, Dreamweaver prompts you to update those references with the new file name. Select Update and Dreamweaver updates all references to the file. Let Dreamweaver search your files and make updates rather than searching yourself—for this kind of thing, Dreamweaver is faster and more precise.
You can also use Dreamweaver's Find and Replace capabilities if you need to change a phrase or piece of code in your current file, in a folder of files, or even in all the files on your site. When you're inside an HTML, javascript, or CSS file, open the Find and Replace window (top menu: Edit>Find and Replace or CMD/CTRL + F), enter the word/phrase you want to change in the Find field and add the word/phrase you want to replace in the Replace field. At the top of the Find and Replace window you'll see a drop-down menu next to Find in. Select Current Document to find and replace in just the current document. Select Folder and navigate to a specific folder on your site to find and replace the word/phrase in all files in that folder. Or select Entire Current Local Site to find and replace the word/phrase in all of your site's files. Press Replace All to update your file(s).
Find and Replace is a powerful tool that can save you a lot of time. Use it wisely—it's easy to mistype something and end up replacing the wrong word or phrase. Even if that happens, though, you can usually run another global Find and Replace to fix the problem.
The next section talks about file paths.