母版

Question

制作多层网页的最佳做法是什么？

例如，我有一个像这样划分的网页：

enter image description here

这个页面是一个非常古老的内部应用程序，我正在进行一个非常需要的改造。它是用框架集完成的，这些框架集早已被弃用。我的问题是，用类似的分离感觉重新设计它的最佳方法是什么？请记住，左侧“菜单栏”基本上是静态的，而右侧的主视口是加载所有内容的位置。

我提出的选项是：

ASP.NET MultiView（x2，一个用于侧边栏，一个用于主要内容）
iframes（x4，每个视图一个）

我确定我错过了其他选择。考虑到功能要求，这种布局的最佳实践是什么？

Answer 1

我会使用母版页并为每个面板使用单独的webcontrol。

如果您最左侧面板中的内容没有更改，那么母版页应该没问题，也可能非常简单。

我在下面为你准备了一个样本，因为我可能不是最好用文本解释一些东西。

在样本中我使用了下面列出的7个项目。

核心部分 1. MasterPage 2.快速链接（左侧最上面的面板带有... b ... c ..等） 3. LeftNavMain（左边的中间面板也有... b ... c ...等） 4. SearchPanel（左侧底部面板返回搜索/搜索）

内容

默认（主页）
Page_A（在这种情况下为'A'索引
搜索（搜索页面）

希望当您单击链接时，实际页面应该更好地解释，您将看到我的意思。

母版

<%@ Master Language="VB" %>
<%@ Register src="QuickLinksPanel.ascx" tagname="QuickLinksPanel" tagprefix="uc1" %>
<%@ Register src="LeftNavMain.ascx" tagname="LeftNavMain" tagprefix="uc2" %>
<%@ Register src="SearchPanel.ascx" tagname="SearchPanel" tagprefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  'Server side code here
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder id="head" runat="server">
  </asp:ContentPlaceHolder>
    <style type="text/css">
      .QuickLinks
      {
        font-family: Tahoma,;
        font-size: 12pt;
        text-align: center;
        vertical-align: middle;
      }
    .MainItemsOrLinks
    {
        font-family: Tahoma,;
        font-size: 14pt;
        text-align: left;
        vertical-align: middle;
        padding-left: 8px;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <div style="text-align: center; vertical-align: middle; height: 100%; width: 100%;">
      <table style="width: 100%; height: 100%; border-collapse: collapse; border-style: none;">
        <tr>
          <td style="width: 30%; text-align: left; vertical-align: top; height: 15%;">
            <uc1:QuickLinksPanel ID="QuickLinksPanel1" runat="server" />
          </td>
          <td style="width: 70%; padding: 24px; height: 80%; text-align: left; vertical-align: top; border-left-style: solid; border-left-width: 8px; border-left-color: #CCCCCC;" rowspan="3">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
          </td>
        </tr><tr>
          <td style="width: 30%; text-align: left; vertical-align: top; margin-left: 40px; border-top-style: solid; border-bottom-style: solid; border-top-width: 8px; border-bottom-width: 8px; border-top-color: #CCCCCC; border-bottom-color: #CCCCCC;">
            <uc2:LeftNavMain ID="LeftNavMain1" runat="server" />
          </td>
        </tr><tr>
          <td style="width: 30%; text-align: left; vertical-align: top; height: 5%;">
            <uc3:SearchPanel ID="SearchPanel1" runat="server" />
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>
</html>

QUICKLINKS（左上角

<%@ Control Language="VB" ClassName="QuickLinksPanel" %>
<script runat="server">
'Server side code here
</script>
<table style="width: 100%;">
  <tr>
    <td class="QuickLinks"><a href="Page_A.aspx">A</a></td>
    <td class="QuickLinks">B</td>
<td class="QuickLinks">C</td>
<td class="QuickLinks">D</td>
<td class="QuickLinks">E</td>
<td class="QuickLinks">F</td>
<td class="QuickLinks">G</td>
<td class="QuickLinks">H</td>
<td class="QuickLinks">I</td>
<td class="QuickLinks">J</td>
<td class="QuickLinks">K</td>
  </tr><tr>
    <td class="QuickLinks">L</td>
    <td class="QuickLinks">M</td>
    <td class="QuickLinks">N</td>
    <td class="QuickLinks">O</td>
    <td class="QuickLinks">P</td>
    <td class="QuickLinks">Q</td>
    <td class="QuickLinks">R</td>
    <td class="QuickLinks">S</td>
    <td class="QuickLinks">T</td>
    <td class="QuickLinks">U</td>
    <td class="QuickLinks">V</td>
  </tr><tr>
    <td class="QuickLinks">W</td>
    <td class="QuickLinks">X</td>
    <td class="QuickLinks">Y</td>
    <td class="QuickLinks">Z</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

搜索面板（左下角）

<%@ Control Language="VB" ClassName="SearchPanel" %>
<script runat="server">
'Server side code here
</script>
<p><a href="search.aspx">Return To Search Page</a></p>

LEFTNAV（左中）

<%@ Control Language="VB" ClassName="LeftNavMain" %>
<script runat="server">
'Server side code here
</script>
<table style="width: 100%;">
  <tr>
    <td class="MainItemsOrLinks"><a href="page_a.aspx">A Something</a></td>
  </tr><tr>
    <td class="MainItemsOrLinks">B Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">C Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">D Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">E Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">F Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">G Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">H Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">I Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">J Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">K Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">L Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">M Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">N Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">O Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">P Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">Q Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">R Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">S Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">T Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">U Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">V Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">W Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">X Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">Y Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">Z Something</td>
  </tr>
</table>

DEFAULT PAGE（主页内容）

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
'Server side code here
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <h1>Home</h1>
</asp:Content>

搜索页面（搜索页面内容）

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
'Server side code here
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <h1>Search</h1>
</asp:Content>

PAGE_A PAGE（通用页面内容）

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
'Server side code here
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <h1>Page_A</h1>
</asp:Content>

好吧，希望这能更好地解释我无法用语言解释的内容。

多层网页

1 个答案:

母版