0

マルチペインのWebページを作成するためのベストプラクティスは何ですか？

たとえば、次のように分割されたWebページがあります。

ここに画像の説明を入力してください

このページは、私が非常に必要な改造を行っている非常に古い内部アプリケーション用です。これは、長い間非推奨となったフレームセットを使用して行われました。私の質問は、これを同様の分離された感触で再設計するための最良の方法は何ですか？左側の「メニューバー」はほとんど静的ですが、右側のメインビューポートはすべてのコンテンツが読み込まれる場所であることに注意してください。

私が思いついたオプションは次のとおりです。

  1. ASP.NET MultiView（x2、サイドバー用に1つ、メインコンテンツ用に1つ）
  2. iframe（x4、ビューごとに1つ）

私は他のオプションが欠けていると確信しています。機能要件を考慮したこのタイプのレイアウトのベストプラクティスは何ですか？

4

1 に答える 1

0

マスターページを使用し、パネルごとに個別のWebコントロールを使用します。

左端のパネルのコンテンツが変更されない場合、マスターページは問題なく、おそらく非常に簡単なはずです。

私はおそらくテキストだけで物事を説明するのが得意ではないので、以下にサンプルを大まかに示しました。

サンプルでは、​​以下の7つのアイテムを使用しました。

コアパーツ1.MasterPage2. QuickLinks（左側の一番上のパネルには... b ... cなどがあります）3。LeftNavMain（左側の中央のパネルにも... 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>

検索ページ（検索ページの内容）

<%@ 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 に答える