网站内容管理系统后台 设计(最常见的网站后台管理的主要工作区域底部布局)

　　网站内容管理系统后台 设计(最常见的网站后台管理的主要工作区域底部布局)

　　一、最常见的网站后台管理界面布局

　　1.水头

　　2.菜单

　　3.主要工作区

　　4.底部

　　二、workspace的交互设计

　　后台操作管理的主要工作区域如区域3所示。在古老的网站后台管理程序中，区域3设计为一次只显示一页。当前流行的做法是区域3有多个选项卡。实际上，每个选项卡都是一个iframe。与以前的做法相比，这具有多窗口切换的优势，并具有一些“协作”的味道。有时，当我们填写表单时，我们需要参考系统中其他表单的内容。此时，我们可以保留当前窗口并查看其他表单的内容

　　三、列表页面与新建（编辑）页面的交互设计

　　1.add page和list界面分为两个菜单

　　2.新界面以弹出窗口的形式显示在列表页面上

　　在旧的网站后台管理系统中，我们将看到第一种方法。但是，我个人更喜欢第二种方法，因为它操作简单，无需切换页面。这样做的代价是增加列表页面和编辑界面之间的交互，编程稍微复杂一些。但与给用户带来的操作方便相比，编程的成本实在是微不足道

　　四、关于弹出窗口选择

　　1.使用IE的本机window.open或唯一window.showmodeldialog模式

　　2.使用当前div模拟的主流对话模式

　　我选择的是div模拟对话框的第二种方法。原因是window.open无法锁定屏幕，但IE唯一可以锁定频率的window.showmodeldialog浏览器不兼容。div模拟的对话方法没有这样的问题。主流模拟窗口兼容各种浏览器，通过屏蔽层防止弹出窗口其他区域的操作

　　五、Dialog如何加载的内容

　　1.拼写一个HTML元素（dialog.Open（{content:“htmlstring”}））

　　2.加载新页面（dialog.Open（{URL:create.Cshtml}））

　　对话框内容的加载方式将影响整个操作区域的设计

　　第一种方法：将“新界面”的HTML内容与列表页面混合。这两页的职责完全不同。把它们放在一起很奇怪。它不能达到页面重用的目的。您还可以异步请求页面，以获取需要加载到弹出窗口中的内容。当然，在MVC框架中，您还可以以partialview的方式在列表页面中隐藏和显示新页面。这样，页面可以重用，但是没有父页面，该页面就无法工作

　　第二种方法：您不需要在界面中引入“新界面”的HTML内容，列表页面和新页面是分开放置的。一个单独的新界面也可以独立于列表页面工作

　　相比之下，我更喜欢显示弹出窗口的第二种方式，这便于编程。但这样也会有一些“坑”

　　1.成功保存后，关闭窗口

　　对话框的容器div和新页面位于不同的DOM文档中。在新界面中关闭对话框需要跨文档。也许有人说，很快将save和其他按钮放入对话框所在的DOM中可以吗？类似地，如果我们将其放入对话框所在的DOM中，我们也会遇到诸如跨文档提交和验证之类的问题。毕竟，每个表单的按钮可能根据不同的业务而有所不同。因此，按钮应放置在特定的新页面中

　　六、Dialog它在哪里弹出

　　对于这个问题，如果你只在工作区弹出，掩模层的频率锁定功能是无用的。此外，由于顶部和底部占据的高度，工作区域的可能高度可能太短。不够大气。因此，我们应该将对话框的弹出窗口放在顶部dom中。这也是我们选择第二种方法在（五））中弹出对话框的原因之一

　　结束