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:
- select a root folder with a lot of subfolders (Folders/Files page - "Folder")
- use file table script elements for all tables (Miscellaneous page - "Use file table script elements for all tables")
- create a folder table (Miscellaneous page - "Create a folder table")
- turn recursive builds on (Recursive page - "Build files recursively")
- build one recursive file (Recursive page - "All links in one file")
- create an anchor table (Recursive page - "Create an anchor table")
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" |