This framework is used for sites with the ability to be managed through Adobe Contribute. Adobe Dreamweaver will be used as the primary HTML production/site management tool.

File Naming and Directory/File Structure

File Naming

It is imporant to have a consistent file naming convention. I have had too many hang-ups caused by capitalization, so I opt to use all lower case characters, with dashes as seperators. Keep the name from 1 to 5 reasonably sized words. We want them to be understandable, but not clunky.

Root Directories

Being familiar with a common structure in your sites can save alot of time when working with all of the files. First we need our core directories, whos files will be used throughout the site.

  • /common/All site-wide CSS, Javascript (JS), image, and include resources should be placed here, respectively.
    • /common/css/
    • /common/images/
    • /common/include/
    • /common/js/
  • /templates/Dreamweaver watches the .dwt files in this directory and updates the dependant pages as neccessary.

Contextual Directories

Each of our sections is placed in its own directory, including the Home Page. A consistent directory structure is most helpful to a tool like jQuery.navActives in finding direct, parental, and child matches. Descriptive folder/file names also help with a number of things, including search indexing. The following is a example directory structure with a given set of sections:

  • Home Page/home/
  • About Us/about/
  • Products and Services/products-resources/

Each section/sub section directory should have /images/ and /documents/ folders. This keeps the images and documents used by that section local to those pages, and more mobile. This is also an Adobe Contribute default location for images or docs placed in a page by a content editor.

Head Resources and Template Content

Head Resources

The head resources are anything that will go in the <head> tag of the page. It is a good practice to have at least one site-wide resource file that is included in your base template. In this framework, that file is at /common/include/resources.htm. It includes site-wide meta tags, CSS <link> tags, JS <script> tags, and javascript init code such as a jQuery document.ready function.

Template Structure

I usually start with a base template, located at /templates/base.dwt. This defines the header, footer, and main area of the page where the other templates will be nested.

Header and Footer

Reusability and efficiency are key to a proper framework, so I use Server Side Includes (SSI) wherever appropriate and possible. The header and footer are prime examples. Even with Dreamweaver Templates, updating static HTML in a .dwt file would require updating each individual dependant page. By using include files, I can edit one file and the change is reflected wherever that file is included. This saves alot of time when file transfer is involved, and leaves less room for error. The header and footer are located at /common/include/header.htm and /common/include/footer.htm.

CSS and Javascript

CSS Stylesheets

ID selectors should generally be [A-z][1-9] characters only, and class selectors should be seperated by dashes, with no caps (like our file naming convention). An example of a selector with an ID and class name is:

#siteContainer .container-inner{}

IE does not recognize @import media types, so stylesheets with a specific media type need to be defined in the <head>.

I need to do some testing on the @media CSS encapsulator. If that works, media type defnition can be handled from within relevant stylesheet and all CSS references can be made from within site.css, but until then…

  • site.cssContains @import references to all primary style sheets. By default, the following:
    • base.cssContains resets and other base CSS properties for default rendering.
    • structural.cssContains styles for things like header, footer, page layouts.
    • modules.cssContains styles for content modules like secondary nav, sidebars, content containers, or the child elements thereof.
    • contribute.cssFor sites managed with Contribute only, this file should only list selector names of styles you want made available to Contribute editors. Allow properties to inherit from the other stylesheets for maintainability.
  • axs.cssContains styles for accessibility. Minimal testing has been done with this stylesheet, but I make it available in case it’s needed.
  • print.cssContains styles for print media.
  • ie.cssThis is referenced via conditional comment tags recognized only by IE. (e.g. <!–[IF IE]> <![endif]–>).

Javascript

The file at /common/js/site.js holds common functions or variables used throughout the site. For instance, this is where the indexOf() function is defined for IE.

SWFObject

Ever since the “click to activate” Active X update was made to IE, I’ve used SWFObject. I still prefer it to the ActiveContent.js generated by Flash and Dreamweaver. An example is at /samples/flash.html.

jQuery

The jQuery library is an essential part of this toolkit. At first I was afraid these JS libraries would complicate markup and create even more cross-browser issues. Anyone who’s worked with JS knows the struggle. But Unobtrusive Javascript libraries like jQuery seem to have a good handle on those issues, and I’m becoming increasingly comfortable with this black magic. Errors are handled gracefully, browser issues are minimal, and with their selector syntax, it does not complicate the markup at all. That being said, here are several of the core plugins I use and why:

  • jquery.meshtml I created this to mesh a string of HTML and existing element(s) on the page. Primarily used for arbitrary elements needed for advanced styling, such as complex containers and rounded corner containers.
  • jquery.selectorInspectorI created this to quickly generate CSS selectors based on the hierarchy of any given HTML. The indentation of the selectors respects that hierarchy, and you can step through each selector to confirm its specificity.
  • jquery.navActivesI created this tool to examine a specified list of anchor tags and compare them to a given URL, and return a list of parent, child, and exact matches.
  • jquery.navigenI’ve not created this yet. It’s purpose will be to create single or multi-level navigation out of unordered lists. It will use meshtml for the required element structure and navActives to handle active, parent and child links.

  • jquery.selecteSizerThis fixes the problem with IE not expanding the dropdown list so that the entire option is visible.