Page History

<table class="relative-table" style="width: 95%; border: 1px solid #ccc; border-collapse: collapse;">
  <colgroup>
    <col style="width: 18%;" />
    <col style="width: 41%;" />
    <col style="width: 41%;" />
  </colgroup>
  <tbody>
    <tr>
      <!-- (1) Layout List -->
      <td rowspan="5" style="border:1px solid #ccc; vertical-align: top; padding:6px;">
        <p><strong>(1) Layout List</strong></p>
        <p>Search, +, ×, sort</p>
        <p>Startup<br/>Dashboard<br/>Layout1<br/>Layout2<br/>...</p>
      </td>

      <!-- (2) Panels -->
      <td colspan="2" style="border:1px solid #ccc; padding:6px;">
        <p><strong>(2) Panels</strong></p>
        <table style="width:100%; border:1px solid #ccc; border-collapse: collapse; text-align:center;">
          <tr>
            <td colspan="3" style="border:1px solid #ccc; background:#f4f5f7;">Header</td>
            <td style="border:1px solid #ccc;">Header Edit: <strong>Stretch</strong> / Left / Center / Right</td>
          </tr>
          <tr>
            <td rowspan="2" style="border:1px solid #ccc; background:#f4f5f7;">Menu</td>
            <td style="border:1px solid #ccc; background:#f4f5f7;">Content</td>
            <td style="border:1px solid #ccc; background:#f4f5f7;">Submenu</td>
            <td></td>
          </tr>
          <tr>
            <td colspan="2" style="border:1px solid #ccc; background:#f4f5f7;">Footer</td>
            <td>Footer Edit: Stretch / Left / Center / <strong>Right</strong></td>
          </tr>
        </table>
      </td>
    </tr>

    <!-- (3) Region Mapping Table -->
    <tr>
      <td colspan="2" style="border:1px solid #ccc; padding:6px;">
        <p><strong>(3) Region ? Page Mapping</strong></p>
        <table style="width:100%; border:1px solid #ccc; border-collapse: collapse;">
          <tr style="background:#f4f5f7;">
            <th style="border:1px solid #ccc;">Region</th>
            <th style="border:1px solid #ccc;">Page</th>
            <th style="border:1px solid #ccc;">Mobile</th>
            <th style="border:1px solid #ccc;">Tablet</th>
            <th style="border:1px solid #ccc;">Description</th>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Header</td>
            <td style="border:1px solid #ccc;">Header</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Header panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Footer</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Footer panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Menu</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Menu panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Submenu</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Submenu panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Content</td>
            <td style="border:1px solid #ccc;">MainPage</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Content panel</td>
          </tr>
        </table>
      </td>
    </tr>

    <!-- (4) Preview Header -->
    <tr>
      <td colspan="2" style="border:1px solid #ccc; padding:6px; text-align:center; background:#f4f5f7;">
        <strong>(4) Preview on Various Platforms</strong>
      </td>
    </tr>

    <!-- Preview Rows -->
    <tr>
      <td style="border:1px solid #ccc; padding:6px; text-align:center;">Desktop Web Preview</td>
      <td style="border:1px solid #ccc; padding:6px; text-align:center;">Desktop on Windows WPF Preview</td>
    </tr>
    <tr>
      <td style="border:1px solid #ccc; padding:6px; text-align:center;">Mobile Preview</td>
      <td style="border:1px solid #ccc; padding:6px; text-align:center;">Tablet Preview</td>
    </tr>
  </tbody>
</table>

<p><strong>Legend:</strong><br/>
(1) List of Layouts<br/>
(2) Organize Panel Regions<br/>
(3) Define Pages for the Regions<br/>
(4) Preview on different platforms</p>