实验六页面布局及应用范本.docVIP

实验六 页面布局 预备知识： Web应该程序通常需要考虑两个方面：功能和外观。外观可以使Web站点更美观，包括控件的颜色、图像的使用、页面的布局。ASP.NET提供了皮肤、主题和模板页的功能，增加了页面布局和外观的优化功能，也增加了系统的重用性。 1、CSS（Cascading Stytle Sheet层叠样式表）是用于控制网页样式，并允许将样式信息与网页内容分离的标记性语言，也是一种非常重要的页面布局方法。 样式是指XHTML标记元素在浏览器中呈现的形式，如字体的大小、颜色等。 样式的一般形式为： 元素名称 style=“属性名1:属性值1; 属性名2:属性值2; ……”显示内容/元素名称 样式表由若干个样式规则组成。样式规则是对网页元素样式的定义，包括了元素的显示方式以及元素在页中的位置等。 CSS样式表能够通过编写样式控制代码来进行页面的布局，在编写相应的HTML标签时，可以通过Style属性进行CSS样式的控制。 CSS样式语法的定义格式 样式定义选择符{ 属性1:值1；属性2:值2；…… }，即：selector{property:value} 选择符可以是：HTML元素选择符、类选择符、ID选择符等。 CSS样式表的种类，按其在HTML文档中的位置可以分为三种： 内嵌样式表：直接将样式控制混合于HTML标记中，定义样式 body style=text-align:center form id=form1 runat=server div style=text-align:center; width:400px; border:solid 1px blue h1 style=font-size:x-large; color:red 欢迎光临/h1 h2 style=font-size:large; color:blue 这是一个被style修饰的页面/h2 /div /form /body 内部样式表：在网页的head区内定义样式 head title内嵌式样式/title style type=text/css body{ text-align:center } div{ text-align:center; width:400px; border:solid 1px blue } h1{ font-size:x-large;color:red} h2{ font-size:large; color:blue } /style /head 外部样式表：以扩展名.css文件保存样式，并在head区内用Link链入引用；还可在head区内用@Import导入外部样式表文件 head title外部链接样式/title link href=Style.css rel=stylesheet type=text/css / /head 2、主题是指页面和控件外观属性设置的集合，其工作原理类似于CSS，为网站提供统一的风格。它由文件组构成，至少包含一个皮肤文件，扩展名为.skin。还可能包括CSS样式表文件、图片和其他资源等。 主题通常存放于Web服务器上的特殊文件目录App_Themes中，App_Themes文件夹下存放外观文件等资源，还可以包含多个主题目录，名称自定。放在主题下的CSS样式表文件，随着主题应用而被引用，无需在页面中指定CSS文件链接。 皮肤文件专门用于定义服务器控件的外观，也称为外观文件，其后缀名称为.skin。它是主题的核心文件，在主题中可包含一个或多个皮肤文件。 网页中使用某个主题只须在网页定义中加上“theme=[主题目录]”的属性，代码如下： %@ Page Theme=Theme1 … % 整个网站的主题应用，可在根目录的Web.config文件里进行配置，代码如下： configuration system.web pages theme=Theme1/pages /system.web /configuration 主题中可以包含一个或多个CSS样式表文件，只要CSS文件被放在主题中，应用时则无需在页面中指定CSS文件链接，通过设置页面或网站所使用的主题就可以了。 网站外观主要涉及页面和控件的样式属性，虽然通过CSS可控制页面上各元素的样式和部分外观，但仍有一些控件无法通过CSS控制。这样就需要利用主题技术来控制，以保持网站外观的一致性和独立性。 禁用主题的方式： 单个网页禁用主题，在网页的页指令中通过设置EnableTheming属性为false来实现。 网页中单个控件禁用主题，只需把这个控件的EnableTheming属性设置为false即可。 禁用主题只影响外观皮肤文件，不影响主题CCS样式表文件的作用。 3、页面布局，常见