Dirhtml Help - Script Lessons

This page attempts to demystify dirhtml scripts by starting with no script and ending with reasonably nice looking generated html files, showing all steps in between.

Predefined CSS attributes are capitalized to make it clear what CAN'T being redefined

To test a script shown below, copy it from the browser, paste into a .txt file, select the file as the active script.  Configure dirhtml as follows:

When generating html files with dirhtml, it's best to use Firefox as the default (or selected) browser, with the html validator addon installed.

Lesson 0: Do Nothing
Summary:Script-less file build
Script:None
Note:Delete the script selected on the "Folders/Files" page
Lesson 1:Very basic CSS
Summary:Uses CSS to define two html-wide properties
Note:Select the script that scripts below are being pasted into
Script: /HEAD
<style type="text/css">
HTML {font-family: sans-serif}
BODY {background: #F8F8FA}
</style>
Lesson 2:Create a css table definition
Summary:Defines a table style
Script: /HEAD
<style type="text/css">
HTML {font-family: sans-serif}
BODY {background: #F8F8FA}
TABLE.fancy {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px; solid; border-color: #000}
</style>
/TABLEHEADER
<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy">
Lesson 3:First step toward looking good
Summary:Centers the tables, reduces font size
Script: /HEAD
<style type="text/css">
HTML {font-size: small; font-family: sans-serif}
BODY {background: #F8F8FA}
TABLE.fancy {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-color: #000}
.centered {margin: auto}
</style>
/TABLEHEADER
<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy centered">
Lesson 4:Formatting anchors
Summary:Formats anchors inside the file table
Script: /HEAD
<style type="text/css"<
HTML {font-size: small; font-family: sans-serif}
BODY {background: #F8F8FA}
TABLE.fancy {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-color: #000}
.centered {margin: auto}
.anchor {font-weight: bold; border-top: 0px solid; text-align: center; border-bottom: 1px solid; background: #006699; color: #FFF}
</style>
/TABLEHEADER
<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy centered">
/ANCHOR_TD
class="anchor" style="text-align: center"
Lesson 5:Alternating row colors
Summary:Uses different colors for even/odd numbered rows
Script: /HEAD
<style type="text/css">
HTML {font-size: small; font-family: sans-serif}
BODY {background: #F8F8FA}
TABLE.fancy {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-color: #000}
.centered {margin: auto}
.anchor {font-weight: bold; border-top: 0px solid; text-align: center; border-bottom: 1px solid; background: #006699; color: #FFF}
.row2 {background: #D3D3E1}
</style>
/TABLEHEADER
<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy centered">
/ANCHOR_TD
class="anchor" style="text-align: center"
/FILE_TABLE_ROW2
class="row2"
Lesson 6:Make it look good
Summary:Fine-tune sizes/dates, table headers
Note:<th>'s are used for size/date table cells as well as the anchor & folder table header lines
Script: /HEAD
<style type="text/css">
HTML {font-size: small; font-family: sans-serif}
BODY {background: #F8F8FA}
TABLE.fancy {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-color: #000}
TABLE.fancy TH {border-right: 1px solid; border-bottom: 1px solid; text-align: center; background: #14719F; color: #FFF; border-color: #FFF; font-weight: bold}
.centered {margin: auto}
.anchor {font-weight: bold; border-top: 0px solid; text-align: center; border-bottom: 1px solid; background: #006699; color: #FFF}
.row2 {background: #D3D3E1}
.dark-blue {font-weight: bold; border-top: 0px solid; text-align: center; border-bottom: 1px solid; background:#00537D; color: #FFF}
</style>
/TABLEHEADER
<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy centered">
/ANCHOR_TD
class="anchor" style="text-align: center"
/FILE_TABLE_ROW2
class="row2"
/HEADER_STYLE
class="dark-blue" style="text-align: center"
Lesson 7:Finalize it
Summary:Center folder/anchor links, add code to start & end of generated files
Notes: Defines a second table with css, uses it for the folder and anchor tables
Un-select "Use file table script elements for all tables"
Script: /START
<p>...here is some start text...</p>
/END
<p>...here is some end text...</p>
/HEAD
<style type="text/css">
HTML {font-size: small; font-family: sans-serif}
BODY {background: #F8F8FA}
TABLE.fancy {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-color: #000}
TABLE.fancy TH {border-right: 1px solid; border-bottom: 1px solid; text-align: center; background: #14719F; color: #FFF; border-color: #FFF; font-weight: bold}
TABLE.fancy2 {background: #DFDFDF; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; border-color: #000}
TABLE.fancy2 TH {border-right: 1px solid; border-bottom: 1px solid; text-align: center; background: #14719F; color: #FFF; border-color: #FFF; font-weight: bold}
TABLE.fancy2 TD {text-align: center}
.centered {margin: auto}
.anchor {font-weight: bold; border-top: 0px solid; text-align: center; border-bottom: 1px solid; background: #006699; color: #FFF; text-align: center;}
.row2 {background: #D3D3E1}
.dark-blue {font-weight: bold; border-top: 0px solid; text-align: center; border-bottom: 1px solid; background:#00537D; color: #FFF}
</style>
/TABLEHEADER
<table border="0" cellspacing="0" cellpadding="3" summary="file table" class="fancy centered">
/FILE_TABLE_ROW2
class="row2"
/ANCHOR_TD
class="anchor"
/HEADER_STYLE
class="dark-blue" style="text-align: center"
/FOLDER_TABLE_HEADER
<table border="0" cellspacing="0" cellpadding="3" summary="folder table" class="fancy2 centered">
/FOLDER_TABLE_ROW2
class="row2"
/FOLDER_TD
style="text-align: center"
/ANCHOR_TD
style="text-align: center"
/ANCHOR_TABLE_HEADER
<table border="0" cellspacing="0" cellpadding="3" summary="anchor table" class="fancy2 centered">
/ANCHOR_TABLE_ROW2
class="row2"