60-71C应用程序统筹

ASP.NET应用程序统筹•1.页面布局•2.母版页•3.皮肤和主题•4.站点导航•5.资源与本地化ASP.NET应用程序统筹•网页的基本布局方式•页面元素定位•表格布局•DIV和CSS布局1.页面布局1.1网页的基本布局方式•常见的网页布局方式有左对齐、居中和满宽度显示•默认情况下，网页内容水平左对齐1.页面布局1.2页面元素定位•页面元素的定位分为流布局和坐标定位布局两种，其中，坐标定位布局又分为绝对定位和相对定位•1.流布局static如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠如果不设置元素的定位方式，则默认是流式布局•2.坐标绝对定位absolute在使用坐标绝对定位之前，必须先将style元素的position属性的值设置为absolute，然后就可以由style元素的left、top、right、bottom和z-index属性来决定元素在页面中的绝对显示位置1.页面布局•坐标绝对定位示例：1.页面布局1.3表格布局•利用表格可以将网页中的内容合理地放置在相应的区域，每个区域之间互不干扰•常见表格布局1.页面布局•实现方法新建一个.aspx页面，设置body元素的style属性为text-align:center，div元素的style属性为width:780px;text-align:center“切换到【设计】视图，将鼠标光标停在div标记内。选择菜单【表】中的【插入表】命令，打开【插入表】对话框，定义表格大小为4行3列，指定宽度为100%，边框值为1，边框颜色为红色1.页面布局1.页面布局•表格中部分常用的属性属性名含义Border表示边框宽度，如果设置为0，表示无边框，此时默认frame=void，rules=none；可以设置为大于0的值来显示边框，此时默认frame=border，rules=allCellspacing表示单元格间距（表格和tr之间的间隔）Cellpadding表示单元格衬距（td和单元格内容之间的间隔）Frame表示如何显示表格边框，void:无边框(默认)；above:仅有顶部边框；below:仅有底部边框；hsides:仅有顶部和底部边框；vsides:仅有左右边框；lhs:仅有左边框；rhs:仅有右边框；box和border:包含全部四个边框Rules表示如何显示表格内的分割线，all:显示所有分隔线；cols:仅显示列线；rows:仅显示行线；groups:仅显示组与组之间的分隔线1.页面布局1.4DIV和CSS布局•在XHTML中，每一个标签都可以称作是容器，能够放置内容•DIV是XHTML中专门用于布局设计的容器对象•以DIV对象为核心的页面布局中，通过层来定位，通过CSS定义外观，最大程度地实现了结构和外观彻底分离的布局效果1.页面布局•定义层通过【工具箱】面板中的【HTML】选项卡中托拽一个“Div”项到设计视图中一个简单的定义DIV的例子1.页面布局•盒子模型盒子模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)1.页面布局•层的定位float浮动属性是DIV和CSS布局中的一个非常重要的属性具体参数如下：•float:none用于设置是否浮动•float:left用于表示对象向左浮动•float:right用于表示对象向右浮动1.页面布局•利用DIV和CSS实现页面布局页面结构包含以下几块：•标题区（header），用来显示网站的标志和站点名称等。•导航区（navigation），用来表示网页的结构关系，如站点导航，通常放置主菜单。•主功能区（content），用来显示网站的主题内容，如商品展示、公司介绍等。•页脚（footer），用来显示网站的版权和有关法律声明等1.页面布局•利用DIV和CSS实现页面布局通常采用DIV元素来将这些结构先定义出来，类似这样：1.页面布局•利用DIV和CSS实现页面布局1.页面布局为了给访问者一致的感受，每个网站都需要具有统一的风格和布局。例如，整个网站具有相同的网页头尾、导航栏、功能条以及广告区。我们已学习了使用用户控件来实现网站的一致性。ASP.NET2.0为了提高工作效率，降低开发和维护强度，提供母版页功能。在母版页中，将Web应用程序的公用元素，例如：网站标志、广告条、导航条、版权声明等内容整合到母版页中，母版页可看作是一种页面模板，最根本的目的是为应用程序创建统一的用户界面和样式。2.母版页在实现一致性的过程中，必须包含两个文件：一种是母版页（.master)，另一种是内容页（.aspx)。母版页封装页面中的公共元素，内容页实际是普通的.aspx文件，包含除母版页之外的其他非公共内容。在运行过程中，ASP.NET引擎将两种页面内容文件合并执行，最后将结果发给客户端浏览器。2.母版页一、母版页的形式在项目中添加新项，选择“母版页”2.母版页母版页的特点：（1）后缀名：.master（2）代码头声明（在HTML源中）一般.aspx文件—%@Page%母版页.master文件—%@Master%（3）母版页中可以包含一个或多个ContentPlaceHolder控件（在工具箱中可以找到）2.母版页2.母版页假设一个网站如上显示，页头和页尾是所有页面的公共部分，二者之间的区域是非公共部分内容，若使用用户控件，则需将页头和页尾作为两个用户控件设计。建立好母版页后，新建内容页（即普通页面）时，要把选择母版页勾上。内容页结构如图：2.母版页ASP.NET提供的母版页功能，可以创建真正意义上的页面模板，整个应用过程，可归纳为“两个包含，一个结合”。两个包含：公共部分包含在母版页，非公共部分包含在内容页。对于页面中内容的非公共部分，只需在母版页中使用一个或多个ContentPlaceHolder控件来占位即可。一个结合：指通过控件应用以及属性设置等行为，将母版页和内容页结合，例如，母版页中ContentPlaceHolder控件的ID属性必须与内容页中Content控件中的ContentPlaceHolder属性绑定2.母版页二.母版页的运行机制单独的母版页是不能被用户所访问。下图是母版页和内容页的控件对应关系：asp：ContentPlaceHolderID=”cph1/asp：ContentPlaceHolderasp：ContentContentPlaceHolderID=”cph1/asp：ContentPlaceHolder……asp：ContentPlaceHolderID=”cph2/asp：ContentPlaceHolderasp：ContentContentPlaceHolderID=”cph2/asp：ContentPlaceHolder……母版页内容页2.母版页（1）用户访问内容页；（2）获取内容页后，读取@Page指令，若指令引用到一个母版页，则也读取该母版页，若为第一次请求，则两个页都要进行编译；（3）母版页合并到内容页的控件树中；（4）各个Content控件的内容合并到母版页中相对应的ContentPlaceHolder控件中；（5）呈现结果页；2.母版页在运行时，母版页成为了内容页的一部分，实际上，母版页的作用与用户控件作用方式大致相同，即作为内容页的一个子级，并作为内容页中的一个容器。三.母版页和内容页事件顺序1.初始化母版页控件树2.初始化内容页控件树3.初始化母版页4.初始化内容页5.加载内容页8.加载内容页控件树7.加载母版页控件树6.加载母版页2.母版页这8个过程显示初始化和加载母版页及内容页是一个相互交叠的过程。这8个过程对应着11个具体事件，如下所示：（1）母版页中控件Init事件；（2）内容页中Content控件Init事件；（3）母版页Init事件；（4）内容页Init事件；（5）内容页Load事件；（6）母版页Load事件；（7）内容页中Content控件Load事件；（8）内容页PreRender事件；（9）母版页中PreRender事件；2.母版页（10）母版页控件PreRender事件；（11）内容页中Content控件PreRender事件四.创建内容页从用户的角度来看，内容页与最终结果页的访问路径相同，好像表明二者是同一文件，实际不然，结果页是一个虚拟的页面，并无实际代码，它的代码内容是在运行时状态下母版页和内容页合并的结果。有两个地方要注意：一是内容页中所有内容必须包含在Content控件中；二是内容页必须绑定母版页。2.母版页例如前面看到的图片，其布局为：页头页尾内容1内容2其中页头和页尾是网站项目中所有页的公共部分，内容1和内容2是页面的非公共部分。在母版页中创建后，要用两个ContentPlaceHolder实现占位2.母版页在内容页中，母版页的内容是只读的，不可编辑，要修改必须打开母版页。五.母版页的嵌套内容页子母版页主母版页内容页子母版页主母版页正确的嵌套方式错误的嵌套方式2.母版页左边的图是正确的嵌套方式，右边是错误的，因为其内容页和子母版页处于同一级（不包含内容页的母版页是没有实际意义的）。从运行机制看，首先读取的是内容页，由内容页绑定主母版页，最终结果页显示的是主母版页和内容页的内容。asp:ContentPlaceHolderID=”ContentPlaceHolder1/asp:ContentPlaceHolderasp:ContentID=”Content1ContentPlaceHolderID=”ContentPlaceHolder1……/asp:ContentPlaceHolderasp:ContentPlaceHolderID=”ContentPlaceHolder2/asp:ContentPlaceHolderasp:ContentID=”Conten2ContentPlaceHolderID=”ContentPlaceHolder2/asp:ContentPlaceHolder……主母版页子母版页内容页2.母版页六.访问母版页控件和属性（1）使用FindControl方法在内容页中，核心对象Page具有一个公共属性Master，该属性能实现对相关母版页基类MasterPage的引用。示例代码：Buttonbtn=(Button)Master.FindControl(btnTest);2.母版页（2）使用自定义属性类似于用户控件，采用get与set方法访问示例代码，可在母版页中定义：在内容页中访问使用Master.ButtonText2.母版页七.母版页的动态加载实现动态加载母版页的核心是设置Page的MasterPageFile属性值,但是不能在Page_Load等事件处理程序中设置，而是应该在Page_PreInit事件处理程序中进行,否则会产生页面异常。2.母版页一、概论一个站点的美观与否直接影响着站点的美观程度。站点的外观主要与页面的控件的样式属性有关，同时控件还支持将样式设置与控件属性分离的级联样式表（CSS）。在实现站点的过程中，开发人员可能不得不为多数控件添加样式属性，做法繁琐，并且不易保持着站点外观的一致性和独立性。理想方法：只为控件定义一次样式属性，就能方便应用到站点的所有页面中。3.皮肤与主题二、主题主题由一个文件组构成，其中可能包括外观文件（.skin）、CSS（级联样式表）文件、图片和其他资源。主题文件必须存储在根目录的App_Themes文件夹下（除全局主题之外），使用IDE可自动创建，在这个目录下，建议只存储主题文件夹及与主题有关的文件。3.皮肤与主题•外观文件外观文件是主题的核心内容，用于定义页面中服务器的外观。在主题中可以包含一个或多个外观文件它们的扩展名为（.skin)例如下面的几个TextBox样式3.皮肤与主题操作：在应用程序根目录下用IDE创建一个名为App_Themes的文件夹用于存储主