0

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

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

在此处输入图像描述

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

我想出的选项是：

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

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

4

1 回答 1

0

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

如果您在最左侧面板中的内容没有改变，那么母版页应该没问题，而且可能也很容易。

我在下面为您粗略地制作了一个示例，因为我可能不是最擅长仅用文字解释事物的人。

在示例中，我使用了 7 个项目，如下所示。

核心部分 1. MasterPage 2. QuickLinks（您最上面的面板在左侧，带有 a...b...c.. 等） 3. LeftNavMain（您在左侧的中间面板也带有 a...b... c...等） 4. SearchPanel（您的底部面板在左侧返回搜索/搜索）

内容

  1. 默认主页）
  2. Page_A（在这种情况下为“A”索引的通用内容页面
  3. 搜索（搜索页面）

希望当您单击链接时，实际页面应该能更好地解释您会明白我的意思。

母版

<%@ 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>

快速链接（左上角

<%@ 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>

默认页面（主页内容）

<%@ 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>

SEARCH 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>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>

嗯，就是这样，希望这能更好地解释我无法用语言解释的东西。

于 2013-01-24T23:47:02.043 回答