Многостраничная веб-страница

Какова наилучшая практика для создания многостраничной веб-страницы?

Например, у меня есть веб-страница, разделенная следующим образом:

Эта страница предназначена для ОЧЕНЬ старого внутреннего приложения, которому я очень нуждаюсь. Это было сделано с фреймами, которые давно устарели. Мой вопрос: каков наилучший способ изменить дизайн с таким же чувством отделенности? Пожалуйста, имейте в виду, что левая "строка меню" в основном статична, в то время как в главном окне просмотра справа находится весь контент, в который загружается.

Варианты, которые я придумал:

  1. ASP.NET MultiView (x2, один для боковой панели, один для основного контента)
  2. iframes (x4, по одному на каждое представление)

Я уверен, что мне не хватает других вариантов. Какова наилучшая практика для этого типа макета с учетом функциональных требований?

1 ответ

Решение

Я бы использовал мастер-страницу и использовал отдельные веб-элементы управления для каждой из панелей.

Если ваш контент в самой левой панели (панелях) не изменяется, тогда мастер-страница должна быть в порядке и, вероятно, очень простой.

Ниже я приведу пример для вас, потому что я, вероятно, не лучший в объяснении только в тексте.

В примере я использовал 7 предметов, как указано ниже.

Основные части 1. MasterPage 2. QuickLinks (ваша верхняя панель слева с... b... c... и т. Д.) 3. LeftNavMain (ваша средняя панель слева также с... b... c... и т. д.) 4. SearchPanel (Ваша нижняя панель слева с возвратом к поиску / поиску)

Содержимое

  1. Домашняя страница по умолчанию)
  2. Page_A (страница общего содержания в данном случае для индекса 'A')
  3. Поиск (страница поиска)

Надеюсь, что реальные страницы объяснят лучше, когда вы нажмете на ссылки, вы увидите, что я имел в виду.

Masterpage

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

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>

Ну вот и все, надеюсь, это лучше объяснит то, что я не смог объяснить словами.

Другие вопросы по тегам