5 创建外观一致的Web站点.pptVIP

第五章 创建外观一致的Web站点 在构建Web站点时应该努力使同一站点的页面布局和行为保持一致。在VS2010中，常用母板、主题，外观等来创建外观一致的Web站点。 本章内容： 母板 主题 外观 5.1 母版、基页、页面模板 一、母版（master page） 为什么要用母版？ 同一网站的页面往往包含同样的页眉、菜单、页脚等公共区域。把这些内容放入母版页可以方便快捷地建立统一风格的ASP.NET网站，并且容易管理和维护，大大提高了设计效率 ASP.NET2.0开始出现母版，作为页面的模板解决方案。通过设计母版，可以在单个位置定义站点中所有页面的全局外观，如果需要换LOGO、调整菜单样式和网页布局，只在母版中修改即可。 2、母版是什么？ 2、母版是什么？ 母版页为具有扩展名 .master的 ASP.NET 文件 ，由特殊的 @ Master 指令识别，该指令替换了用于普通 .aspx 页的 @ Page 指令。 看起来象正常的ASPX页面，包含页的所有顶级 HTML 元素（如 html、head 和 form）、也可能包含其它HTML和服务器控件。例如，table或div用于布局、img 元素用于公司徽标、静态文本用于版权声明并使用服务器控件创建站点的标准导航、ContentPlaceHolder控件用做占位符。 可是它并非ASPX页面，不能直接在浏览器中请求，只是其它Web页面的模版。 母版页和内容页 当请求页面时，母版页和内容页的标记在运行时合并，经过处理后发送到浏览器显示。 3、创建母版 1) Add new itemmaster page 2) 用DIV控件设置页面布局 form id=form1 runat=server div id=PageWrapper div id=Headera href=~/Header Goes Here/a/div div id=MenuWrapperMenu Goes Here/div div id=MainContent asp:ContentPlaceHolder id=ContentPlaceHolder1 runat=server /asp:ContentPlaceHolder /div div id=SidebarSidebar Goes Here/div div id=FooterFooter Goes Here/div /div /form 创建母版 3) 为母版加入样式表文件. head runat=server title创建外观一致的Web站点/title asp:ContentPlaceHolder id=head runat=server /asp:ContentPlaceHolder link href=style1.css rel=stylesheet type=text/css / /head 4、创建使用母版的内容页 创建基于母版的页面通常有两种方法： 1）Add New Item时，选中Select master page复选框 %@ Page Title= Language=C# MasterPageFile=~/MasterPage. master AutoEventWireup=true CodeFile=Default.aspx.cs Inherits=_Default % asp:Content ID=Content1 ContentPlaceHolderID=head Runat=Server /asp:Content asp:Content ID=Content2 ContentPlaceHolderID=Content Runat=Server /asp:Content 2）为现有页面设置母版 A）在code视图中加入MasterPageFile属性，删除不需要的标记、添加ContentPlaceHolder控件 B）新建一个基于母版的Web Form，将原来页面中已有部分复制到新的页面，之后删除原来的页面。 ——推荐 （例：从Site4 中导入一个页面，为它设置母版） 说明 Head部分的ContentPlaceHolder/Content控件是干什么用的？ 用来添加CSS、Javascript等内容 母版也可以嵌套 使用母版页后，页面控件的ID、Name在HTML中会加上前缀 应用母版后控件ID的前缀 命令按钮在CODE视图中的定义： asp:Button ID=Button1 runat=s