Многостраничная веб-страница
Какова наилучшая практика для создания многостраничной веб-страницы?
Например, у меня есть веб-страница, разделенная следующим образом:
Эта страница предназначена для ОЧЕНЬ старого внутреннего приложения, которому я очень нуждаюсь. Это было сделано с фреймами, которые давно устарели. Мой вопрос: каков наилучший способ изменить дизайн с таким же чувством отделенности? Пожалуйста, имейте в виду, что левая "строка меню" в основном статична, в то время как в главном окне просмотра справа находится весь контент, в который загружается.
Варианты, которые я придумал:
- ASP.NET MultiView (x2, один для боковой панели, один для основного контента)
- iframes (x4, по одному на каждое представление)
Я уверен, что мне не хватает других вариантов. Какова наилучшая практика для этого типа макета с учетом функциональных требований?
1 ответ
Я бы использовал мастер-страницу и использовал отдельные веб-элементы управления для каждой из панелей.
Если ваш контент в самой левой панели (панелях) не изменяется, тогда мастер-страница должна быть в порядке и, вероятно, очень простой.
Ниже я приведу пример для вас, потому что я, вероятно, не лучший в объяснении только в тексте.
В примере я использовал 7 предметов, как указано ниже.
Основные части 1. MasterPage 2. QuickLinks (ваша верхняя панель слева с... b... c... и т. Д.) 3. LeftNavMain (ваша средняя панель слева также с... b... c... и т. д.) 4. SearchPanel (Ваша нижняя панель слева с возвратом к поиску / поиску)
Содержимое
- Домашняя страница по умолчанию)
- Page_A (страница общего содержания в данном случае для индекса 'A')
- Поиск (страница поиска)
Надеюсь, что реальные страницы объяснят лучше, когда вы нажмете на ссылки, вы увидите, что я имел в виду.
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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
Ну вот и все, надеюсь, это лучше объяснит то, что я не смог объяснить словами.