1 Reply Latest reply on Nov 5, 2015 10:40 PM by BenPleysier

    Dreamweaver CS4 - How to display a website directory/folder as an webpage


      Dreamweaver CS4 - How to "display a website directory/folder as an webpage"?

        • 1. Re: Dreamweaver CS4 - How to display a website directory/folder as an webpage
          BenPleysier Adobe Community Professional & MVP

          You will need a server side script to do that. The following is a complete example using PHP. Just copy into a new DW document and view.


          <!doctype html>
              <meta charset="UTF-8">
              <title>Directory Contents</title>
                  * {
                      padding: 0;
                      margin: 0;
                  body {
                      color: #333;
                      font: 14px Sans-Serif;
                      padding: 50px;
                      background: #eee;
                  h1 {
                      text-align: center;
                      padding: 20px 0 12px 0;
                      margin: 0;
                  h2 {
                      font-size: 16px;
                      text-align: center;
                      padding: 0 0 12px 0;
                  #container {
                      box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5);
                      position: relative;
                      background: white;
                  table {
                      background-color: #F3F3F3;
                      border-collapse: collapse;
                      width: 100%;
                      margin: 15px 0;
                  th {
                      background-color: #FE4902;
                      color: #FFF;
                      cursor: pointer;
                      padding: 5px 10px;
                  th small {
                      font-size: 9px;
                  th {
                      text-align: left;
                  a {
                      text-decoration: none;
                  td a {
                      color: #663300;
                      display: block;
                      padding: 5px 10px;
                  th a {
                      padding-left: 0
                  td:first-of-type a {
                      background: url(./.images/file.png) no-repeat 10px 50%;
                      padding-left: 35px;
                  th:first-of-type {
                      padding-left: 35px;
                  td:not(:first-of-type) a {
                      background-image: none !important;
                  tr:nth-of-type(odd) {
                      background-color: #E6E6E6;
                  tr:hover td {
                      background-color: #CACACA;
                  tr:hover td a {
                      color: #000;
                  /* icons for file types (icons by famfamfam) */
                  /* images */
                  table tr td:first-of-type a[href$=".jpg"],
                  table tr td:first-of-type a[href$=".png"],
                  table tr td:first-of-type a[href$=".gif"],
                  table tr td:first-of-type a[href$=".svg"],
                  table tr td:first-of-type a[href$=".jpeg"] {
                      background-image: url(./.images/image.png);
                  /* zips */
                  table tr td:first-of-type a[href$=".zip"] {
                      background-image: url(./.images/zip.png);
                  /* css */
                  table tr td:first-of-type a[href$=".css"] {
                      background-image: url(./.images/css.png);
                  /* docs */
                  table tr td:first-of-type a[href$=".doc"],
                  table tr td:first-of-type a[href$=".docx"],
                  table tr td:first-of-type a[href$=".ppt"],
                  table tr td:first-of-type a[href$=".pptx"],
                  table tr td:first-of-type a[href$=".pps"],
                  table tr td:first-of-type a[href$=".ppsx"],
                  table tr td:first-of-type a[href$=".xls"],
                  table tr td:first-of-type a[href$=".xlsx"] {
                      background-image: url(./.images/office.png)
                  /* videos */
                  table tr td:first-of-type a[href$=".avi"],
                  table tr td:first-of-type a[href$=".wmv"],
                  table tr td:first-of-type a[href$=".mp4"],
                  table tr td:first-of-type a[href$=".mov"],
                  table tr td:first-of-type a[href$=".m4a"] {
                      background-image: url(./.images/video.png);
                  /* audio */
                  table tr td:first-of-type a[href$=".mp3"],
                  table tr td:first-of-type a[href$=".ogg"],
                  table tr td:first-of-type a[href$=".aac"],
                  table tr td:first-of-type a[href$=".wma"] {
                      background-image: url(./.images/audio.png);
                  /* web pages */
                  table tr td:first-of-type a[href$=".html"],
                  table tr td:first-of-type a[href$=".htm"],
                  table tr td:first-of-type a[href$=".xml"] {
                      background-image: url(./.images/xml.png);
                  table tr td:first-of-type a[href$=".php"] {
                      background-image: url(./.images/php.png);
                  table tr td:first-of-type a[href$=".js"] {
                      background-image: url(./.images/script.png);
                  /* directories */
                  table tr.dir td:first-of-type a {
                      background-image: url(./.images/folder.png);
              <div id="container">
                  <h1>Directory Contents</h1>
                  <table class="sortable">
                              <th>Size <small>(bytes)</small></th>
                              <th>Date Modified</th>
                  // Opens directory
                  // Gets each entry
                  while($entryName=readdir($myDirectory)) {
                  // Finds extensions of files
                  function findexts ($filename) {
                    $exts = explode("[/\\.]", $filename);
                    return $exts;
                  // Closes directory
                  // Counts elements in array
                  // Sorts files
                  // Loops through the array of files
                  for($index=0; $index < $indexCount; $index++) {
                    // Allows ./?hidden to show hidden files
                    if(substr("$dirArray[$index]", 0, 1) != $hide) {
                    // Gets File Names
                    // Gets Extensions 
                    // Gets file size 
                    // Gets Date Modified Data
                    $modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
                    $timekey=date("YmdHis", filemtime($dirArray[$index]));
                    // Prettifies File Types, add more to suit your needs.
                    switch ($extn){
                      case "png": $extn="PNG Image"; break;
                      case "jpg": $extn="JPEG Image"; break;
                      case "svg": $extn="SVG Image"; break;
                      case "gif": $extn="GIF Image"; break;
                      case "ico": $extn="Windows Icon"; break;
                      case "txt": $extn="Text File"; break;
                      case "log": $extn="Log File"; break;
                      case "htm": $extn="HTML File"; break;
                      case "php": $extn="PHP Script"; break;
                      case "js": $extn="Javascript"; break;
                      case "css": $extn="Stylesheet"; break;
                      case "pdf": $extn="PDF Document"; break;
                      case "zip": $extn="ZIP Archive"; break;
                      case "bak": $extn="Backup File"; break;
                      default: $extn=strtoupper($extn)." File"; break;
                    // Separates directories
                    if(is_dir($dirArray[$index])) {
                    } else {
                    // Cleans up . and .. directories 
                    if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;";}
                    if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
                    // Print 'em
                    <tr class='$class'>
                      <td><a href='./$namehref'>$name</a></td>
                      <td><a href='./$namehref'>$extn</a></td>
                      <td><a href='./$namehref'>$size</a></td>
                      <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
                  <h2><?php print("<a href='$ahref'>$atext hidden files</a>"); ?></h2>
          1 person found this helpful