Organizing your site's files and folders

by James Cook on August 8, 2010

@DWcourse What about how you organize your website folders/files?
@skb875
skb875

skb875 of PixelForLife Video Tuts recently suggested on Twitter that I write an article about how to organize website files and folders. I suspect he asked not because he doesn’t know how to organize a site (after all the basics are pretty simple – arrange things so you can find them later) but because – like most of us – he just doesn’t always take the time to do it.

The logical first step in building a website is to create a flow chart of navigation through the site. This is critical not only because navigation is one of the most important features of your site but also because it will help you organize the site’s content and create a logical file/folder structure that will make your site easy to manage as the number of pages begins to grow.

Consider the example of a simple portfolio site for a designer that contains:

  • A home page
  • Biography
  • Awards section
  • Print Design Portfolio
  • Web Design Portfolio
  • 3D Design Portfolio
  • Contact information and form

Of course this list will probably grow as content for the site is developed (and certainly as the designer’s career prospers) but this is a good start. The navigation flow chart for the site appears in figure 1.

Figure 1: Flow chart of navigation for a designer’s portfolio site.

The flow chart offers a logical navigation scheme for the site that can easily be translated into an unordered list and styled into a menu using CSS as shown in figure 2.

Figure 2: The navigation menu as an unordered list and a CSS menu.

The flowchart can also be used as an outline for the file/directory structure of the site.  The concept is simple. Each layer of the navigation represents a folder and each navigation item with a submenu becomes a folder as shown in figure 3.

Figure 3: The site’s file/folder structure.

Establishing this structure at the beginning of the site design/development process will prove helpful as the site evolves and grows. It’s a relatively simple process to determine where a new page fits in the existing structure, how it should be linked into the navigation and where the file should be saved. Of course, if our designer branches out into Fine Art, we may find ourselves adding a new folder in the portfolio folder or possibly even in the root folder.

So far, so good, but the current site structure leaves out some important files that can contribute to website clutter: image, JavaScript, CSS and other support files. In other words, all the files that Dreamweaver labels “dependent files” when you upload a page.

The simple answer is to add “images” and “support” folders to your root folder as in figure 4.

Figure 4: The site’s file/folder structure with images and support folders added.

Dreamweaver Tip: You can set the location of your images folder in the Local info category when you define/set up your site in Dreamweaver. Then, if you insert an image from outside your site, Dreamweaver will offer to save it to your images folder.

You can also set the location where Dreamweaver saves your Spry-related files in the Spry category of the Site Defintion/Setup dialog. The default is a SpryAssets folder that will be created the first time you add a Spry feature to a page. But you can change that (to say the support folder) if you prefer.

For sites containing lots of images (as our portfolio site undoubtedly will) the images folder can quickly become overwhelming. For those sites I recommend multiple images folders. Figure 5 offers a couple of possible solutions.

Figure 5: The site with supplemental images folders added.

  • An images folder inside the portfolio folder to be used only for portfolio images. The design graphics and other images from the site would still be saved in the images folder in the root folder.
  • If further structure is needed or preferred, an images folder for each section of the portfolio (shown as semitransparent folders in figure 5) an be created.

You might also want to consider some other organizational scheme such as adding images to folders named according to the month or year they are added to the site. Whatever your system, the goal is to create a file/folder that is as easy to navigate as your website.

Dreamweaver Tip: Dreamweaver reserves the folder name “Templates” for (obviously enough) templates. So Dreamweaver users should avoid naming a folder Templates and avoid saving any other files in the Templates folder.

That takes care of the site structure but one important issue remains. I strongly recommend you avoid saving files that are not a part of your site within your root folder. The most common culprits here are Photoshop and text files. You should save these files in a resources folder outside your root folder. I generally just add “-resources” to the site name when creating my resources folder. So, for example, for DWcourse.com, my root folder is DWcourse and my resources folder DWcourse-resources.

Final Tip: Once you’ve uploaded your site you automatically have a backup of your root folder (one copy on your local computer and one on the server). Since you won’t be uploading your resources folder, you’ll want to make sure you create a backup of those files somewhere else.

That’s the scheme I use (when I take the time to do it right). If you have your own system or have comments or suggestions about mine, I’d love to hear them. And if you have a Dreamweaver related topic you’d like me to cover in a future post, you can drop me a comment here or on Twitter:

I'm looking for Dreamweaver questions for a blog post. If I use your question I'll give you a link. Any ideas?
@DWcourse
Jim Cook
Charlie July 14, 2012 at 10:04 pm

If I make a subdirectory called “portfolio” then put a file called portfolio.html inside of it instead of index.html what will happen?

If someone types domain.com/portfolio they will not go to my portfolio.html page because I did not use index.html ??? Please clarify. I want to make sure I do this right

dwcourse July 15, 2012 at 1:00 pm

Correct if you put a file called portfolio.html in the portfolio directory, you need to use the full url http://domain.com/portfolio/portfolio.html to access it and the url http://domain.com/portfolio will display either a listing of files in the directory or a listing not allowed message unless you create an index.html page within the directory. If you do that then:

http://domain.com/portfolio and http://domain.com/portfolio/index.html will be the same page.

Caroline Campbell-McCarthy January 20, 2011 at 10:40 am

All of the examples in this blog post have nested folders with index.html in them.
They are different looking files when opened right? Doesn’t the computer get confused when looking for the file? Do you use a naming convention when naming your files?

jcook January 20, 2011 at 11:04 am

Yes, there is a default file that will display when you type just the name of the folder in the url. It is usually index.html, index.htm, index.php or some other file name depending upon the server setup. So the link http://domain-name.com opens the file http://domain-name.com/index.html and the link http://domain-name.com/folder opens the file http://domain-name.com/folder/index.html. If no index.html page (or equivalent) exists for that folder the browser will display, depending upon the server configuration, a list of files in the folder or a 404 File Not Found error message.

Folder names and file names (other than the index file) are mostly for your convenience so choose names that are logical and descriptive of the content. Also consider that the text of folder and file names does have some impact on search engine results as well.

Fot the most part I don’t have a specific naming convention but adapt to the site. However I do recommend using only alpha-numeric characters and hyphens (-) and underscores (_). Never use punctuation marks for file or folder names.

jcook January 20, 2011 at 11:15 am

OOPS! I should also mention that this site is for the most part built using WordPress and vBulletin Content Management Systems (CMS). So the “folder” names actually are physical folders but have to do with the organization of the CMS than an actual file/folder structure.

Marcia January 4, 2011 at 12:53 pm

Hi Jim,

I was just thinking that I needed to organize my files better when I read this. It couldn’t have been more timely.

I have a million questions about DW. I’m still in the newbie (not totally newbie) experimental stage and I keep trying new things as time allots. My first BIG question: What are the stats and logs that appear on my local and why do they appear? They certainly add clutter. Do I need to save them in my files in order to put the page on the remote in order for the page to work on the internet? Probably have something to do with me checking my work in the browser.

next question: I do not understand some of the icons in my local is think are pages with extensions, the then icon, and why are my psd and ai file icons highlighted in blue? there’s probably others that I haven’t discovered.

I will now go thru the files and remove the extraneous files you mention above.

I also do things because I don’t want to take the time to do things right. Bingo – you hit the nail on the head!

And, I make mistakes when I get tired (just a personal thing). I need to stop but I am driven and keep on going and then…POW! Gotta fix the stuff the next day.

Anyway, I look forward to your e-mails. You have been a big help to me.

Will probably submit more questions later.

Marcia

jcook February 4, 2011 at 8:37 am

Sorry I’ve been so slow to respons.

The stats and log files should be on your server (not on you local hard disk). They are just what the names apply, the files that record visits and other info to your server.

If they are on your local site, it’s probably because you inadvertently downloaded them from the server. It should be safe to delete them from your computer but NOT from the server. In fact, your hosting company may have locked those files on the server.

And, I don’t understand your question about the icons (even after your clarification). Feel free to try again.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact