More to the point, the hard lesson I learned long ago is that the final document is the final vet. I can stare for hours at the physical directories & the files they contain & conclude: “Well, that about wraps this phase up.” Then, within minutes of beginning the document's final update, I discover an inadequacy.
This final document is the final vet. If this document writes itself, then 2.0's directory structure is a wrap.
Introduction
A font-formatting note. HTML or XHTML markup is displayed using the Courier New font. Windows file names, Word menu item names, Word or Web style names, Cascading Style Sheets property names or values, & other items of technical argot are displayed using the Georgia font.
Goals
The goals for a workable directory structure are:
1) The structure should be rigorously defined; &
2) The rules for the location of files & their movement among directories should be simple & intuitive.
Modest goals. Immodest effort.
Cross-referencing
This document cross-references itself to a significant extent. As examples, general comments early in the section may reference more detailed comments later on (ie, a forward reference), or detailed comments may reference a previously-displayed image (ie, a backward reference).
These references are bookmarked at both the ‘to’ & ‘from’ locations. Associated with each bookmark is a URL or link. Clicking the ‘to’ link transfers you to either the forwards-referenced text, or the backwards-referenced image. Clicking the associated ‘from’ link transfers you back to where you started. In effect, you can toggle back & forth between the references.
Different conventions are used to differentiate the type of reference:
Forward references are identified by the “Note n” convention; eg, “Note 3”. Clicking its associated link transfers you to the forwards-referenced text. The corresponding backward reference is identified by the “(Note n)” convention; eg, “(Note 3)”. Clicking its associated link transfers you back.
Backward references are identified by the unnumbered “Note” convention. Clicking its associated link transfers you to the backwards-referenced image. The corresponding forward reference is identified by the button convention. Clicking the button transfers you back.
If you haven't yet made any backward references, clicking the button has no effect.
Menus
The Home Page menu looks like this:
This menu system is described in more detail on the Home Page.
There are 6 menu items: The Home page plus 5 subject areas. The 1st 3 menu items are classified as General topics, while the last 3 are Specific.
The Home Page is a single XHTML page (the sub-menu item is my resume); so is Science. The middle 4 menu items have sub-menus of their own; ie, in this menu system, either a right pointer or a downwards pointer indicates that the menu item expands. These 4 expanded menus are:
For these 4 menus, upper-case menu items link to an XHTML document while lower-case menu items do not. Lower-case menu items basically play the role of null placeholders in the multi-level menu hierarchy, indicating a subject area on the same level as the other menu items but with no associated XHTML document; ie, null menu items are akin to zero in our number system.
Collectively, all upper-case menu items on the Home Page menu plus the 4 expanded menus are considered Applications. Further detail on Applications will be provided in Note 2.
Directory Structure
Generally:
The directory structure hierarchy mirrors the menu system hierarchy.
Files associated with each individual Application are stored in discrete subdirectories
In the directory structure described herein, there are 3 general categories of files:
1) Image files
2) Production Web files
3) Development Web files
Each category has its own set of directories.
In all 3 hierarchies, the highest-level directory is named Web These 3 directories fit naturally within the pre-existing Windows directory structure:
1) My Documents/My Pictures/Web: Images
2) My Documents/My Webs/Web: Production Web
3) My Documents/Web: Development Web
My Documents, My Documents/My Pictures, & My Documents/My Webs are the pre-existing Windows directories.
There are 3 subdirectories below the Images & Development Web directories:
Genific, containing files that aren't quite General, but not quite Specific, either. More later in Note 1.
Time for a picture. The graphic below details the complete directory structure for images, & a partially expanded directory structure for both the Production & Development Webs. In all 3 cases, My Documents is the parent directory.
Image files
Parent directory: My Documents/My Pictures/Web
Note the 3 child subdirectories of General, Genific, & Specific.
(Note 1). The 3 subdirectories under Genific are Global, Obsolete, & Work. Global contains images common to all 6 subject areas. Obsolete is akin to a recycle bin. Work contains various files & tools used to manipulate images, & make them pixel-sharp & uniform across the entire published Web. Genific is a useful category.
Subdirectory names are identical to menu item descriptions.
Note the menu item descriptions; Note the subdirectory names.
Production Web files
Parent directory: My Documents/My Webs/Web/Version 2.0
Note that most subdirectories for this published Web have no child subdirectories.
The exception (ie, subdirectories with a -dwp suffix) will be discussed in Note 4.
Note also the short subdirectory names. Short names make for short external references in XHTML. For example, the XHTML code for this text:
either a right pointer or a downwards pointer
is:
either a <img alt="" src="gen/Right_Pointer.png" width="5" height="10" /> right pointer or a <img alt="" src="gen/Downwards_Pointer.png" width="10" height="5" /> downwards pointer
The external reference took only 4 characters.
With the exception of the non-Application-specific directories discussed in Note 3 & Note 5, subdirectory names are acronyms for Applications.
(Note 2). If an Application uses image files, these files reside in their own, discrete My Webs/Web/Version 2.0 subdirectory. As an example, the Economics menu has 6 such Applications. These Applications are detailed above in the expanded Economics menu. The 6 Applications are the 6 upper-case menu items.
You can view (ie, Note) the Economics menu if you so desire.
Below is a list of subdirectory names acronyms to Applications:
When Internet Explorer (IE) saves a Web page, it creates a subdirectory in which it stores all external files referenced by the saved Web Page. Thus, IE creates the child subdirectories beneath the -dwp parent directories.
When I cite an article from the Web, I realize that these articles may be transient in nature (eg, AP news dispatches), may be transferred into a pay-per-view archive (eg, the New York Times), or may simply disappear from the Web. For cited articles that I consider important, I save them to my local disk as a “Web page, complete”. Yes, New York Times, your advertising is saved, too. Then, I test the saved page to make sure it displays the same as the original article displays. If it doesn't, I diddle with the XHTML to make it display the same.
Therefore, what may look like a typical Web article may actually be a local Web page. How to distinguish between an article displayed directly from the Web versus an article displayed from the local copy of the article? Since the 2 displays are transparently the same, the only way to distinguish them is to examine the article's URL; ie, saved copies include my ISP's Web address.
One final point. IE saves the URL of the original article in the saved Web page itself, normally in the 1st few lines. Thus, you can view the original article that I cited if you feel the need & have the technical wherewithal to do so.
3) Images.
Pictures are cool.
(Note 5). One final point: The gen subdirectory contains image files referenced by all Applications; eg, the bullet icon.
The subdirectory that IE creates when it saves a Web page can contain files of multiple types. However, all other production or Published Web directories contain files only of a single type. This includes the parent My Webs/Web/Version 2.0 directory itself; ie, it contains only XHTML files.
This is a key point: Except where impossible to achieve, all Production Web directories contain files of a single type.
Segregating discrete file types into separate directories works. Having fewer but larger directories would confuse.
Development Web files
Parent directory: My Documents/Web
Note the Master Web Code subdirectory beneath the Web/Genific directory. This directory contains the master copies of all production CSS & JavaScript files. It also contains Web-downloaded JavaScript code acquired from kind JavaScript developers who make their code freely available. These 4 developers are given their just due on the Home Page.
Note the expansion of the Web/Specific/Politics/My Webs directory. This directory is the development analog of the production My Webs/Web/Version 2.0 directory. There is no functional difference between the 2 except that the development My Webs directory contains only those subdirectories needed for the Politics Application.
Economics & Politics each have their own unique development directory. However, the Home Page, Web Publishing, Writing, & Science share a common development directory. Currently, these 4 aps have 51 XHTML documents associated with them, while Economics has 38, & Politics 57. Using a common directory for these 4 subject areas simplifies.
Note the 5 subdirectories beneath Web/Specific/Economics:
1) HTML
Files here are snippets of HTML code.
Code snippets are pieces of complete HTML pages. These snippets are of 2 types:
HTML tables
All HTML tables are hand-coded. This code is usually created, edited, & tested in the HTML directory before being pasted into the production HTML page. The reason tables are hand-coded is to give them a common, uniform appearance: Alignment of text; background colors; border colors, style, & width; & font faces, colors, sizes, & weights. To enable all permutations, about 170 different CSS styles are defined. Below is one example table. You can peruse other examples by clicking on each of the 4 links in the 2004 Presidential Election Polls - Tables Only Web page.
Zogby
Polls
Bias
Errors
Bad
State
EV
Act
Est
Raw
Fat
Raw
Fat
Pick
Colorado
9
5.2
2.0
-3.2
-28.8
3.2
28.8
Florida
27
5.0
0.0
-5.0
-135.0
5.0
135.0
Iowa
7
0.9
5.0
-5.9
-41.3
5.9
41.3
X
Maine
4
8.8
11.0
-2.2
-8.8
2.2
8.8
Michigan
17
3.4
6.0
-2.6
-44.2
2.6
44.2
Minnesota
10
3.5
6.0
-2.5
25.0
2.5
25.0
Nevada
5
2.6
5.0
2.4
12.0
2.4
12.0
New Mexico
5
0.8
3.0
-3.8
-19.0
3.8
19.0
X
Ohio
20
2.1
6.0
3.9
78.0
3.9
78.0
Pennsylvania
21
2.3
4.0
-1.7
-35.7
1.7
35.7
Wisconsin
10
0.4
6.0
-5.6
-56.0
5.6
56.0
Georgia
15
16.7
10.0
-6.7
-100.5
6.7
100.5
Totals
-32.9
-404.3
45.5
584.3
2
Average
-2.7%
-2.7%
3.8%
3.9%
17%
Graphs or charts
For example, the HTML code for all graphs or charts used in Economics exists both in the Web pages themselves, & in separate code snippet files. Why? This scheme helps documents both the number & locations of graphs. Since the sources for the data in the Economics essays are many & complex, this scheme superimposes rigor on this chaos.
All references to external files (eg, Cascading Style Sheets, JavaScript, & images) within the code snippet files are relative, & link to production versions of these files; eg, <src="../../My Webs/css/Web.css">. Since both code snippet files & production Web pages share the same Cascading Style Sheets, JavaScript code, & image files, any snippet code pasted into production Web pages will work identically the same as it did in the HTML directory.
2) My Webs
As before, this directory is the development analog of the My Webs/Web/Version 2.0 directory.
3) Test
This directory is the test environment. For example, all JavaScript code is developed in this directory before it becomes production. Files in this directory reference only themselves; ie, there are no external references as with the HTML directory.
4) Web Pages
This directory contains saved but unpublished Web pages (As before, published Web pages reside in the appropriate -dwp directory). These unpublished Web pages may be reborn on my published Web. Good Web pages get an entry in my Favorites list; really good Web pages are saved.
5) Word Documents
Note the Published & Other directories beneath the Web/Specific/Politics/Word Documents directory. Their names describe what they contain. For every Word document in the Published directory, there is one & only one corresponding HTML file in the development or production My Webs directory.
Not all published Web pages require a corresponding Word document. Sometimes, it's easier to code HTML directly than it is to write the original document using Word.
That's the overview. Those are the concepts.
Graphics
All image files resident in the My Pictures/Web/General and My Pictures/Web/Specific directories are Windows-bitmapped or bmp files. Since bmp is the native Windows image format, it is the obvious choice. The My Pictures/Web/Genific directories are more of a dog's breakfast, & can contain image files of other formats. You can view (ie, Note) the graphic above for more detail.
The Web can't handle bmp files. All bmp files are converted to png format before they are copied to the Development or Production Webs. No bmp files exist in any of the Development or Production My Webs directories.
I have superimposed a standard: For every bmp file in the My Pictures/Web/General and My Pictures/Web/Specific directories, there is 1 & only 1 png file with the same name in the Development or Production My Webs directories. Thus, comparing the My Pictures directory to the corresponding My Webs directory helps verify that both directories contain all the image files they should contain, & only the image files they should contain.
Png is the image format of choice. However, both gif & jpg format images are resident in the My Webs directories. These gif & jpg format files were saved from the Web & retain whatever image format they had when copied. For example, Cornell University's Legal Information Institute's gif logo is one such file.
File Transfer Among Directories
Transfer of files between directories is one-way: From development to production.
The master copies of all files specifically created for the Web exist in 4 directories:
1) Word documents exist in the Word Documents/Published directories.
2) XHTML documents, both hand-coded & produced originally by Word but edited up the yin-yang (See the next-in-this-Web-Publishing-series Word-to-Web Styles document for more detail), exist in the My Webs directories.
3) Image files exist in the My Pictures directories.
4) CSS & JavaScript files exist in the Master Source Code directory.
A place for everything; everything in its place.
When upgrading a published Web to a newer version, the older production version can be saved very easily: Just leave it be. Automatically, all prior versions of HTML, CSS, JavaScript, & the production version of image files are saved. Note that the My Webs/Web directory contains 2 earlier versions (ie, Version 0.0 and Version 1.0) of my published Webs.
If desired, older versions of files can be saved in the 2 Obsolete directories: My Documents/My Pictures/Genific/Obsolete and My Documents/Web/Genific/Obsolete. You can view (ie, Note) the graphic above for more detail.
Current Directories
Below are all current directories except:
Subdirectories below the My Webs/Web/Version 0.0 and .../Version 1.0 directories.
Subdirectories below any Downloaded Web Pages directories (ie, those with a suffix of -dwp).
Forward references are identified by the “Note n” convention; eg, “Note 3”. Clicking its associated link transfers you to the forwards-referenced text. The corresponding backward reference is identified by the “(Note n)” convention; eg, “(Note 3)”. Clicking its associated link transfers you back.
button convention. Clicking the button transfers you back.
right pointer or a 
downwards pointer indicates that the menu item expands. These 4 expanded menus are:
