...
| HTML |
|---|
<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="45" 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) Desktop 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;">(4) Desktop>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> |
...