模块5 网站主题.doc

模块5 网站主题5.1 教学目标 1掌握网站主题的制作方法；2掌握CSS样式的设计方法。3 掌握JavaScript脚本的使用方法5.2 工作任务 1 建立网站分类文件2 使用CSS+DIV设计母版页的布局3 设计网站主题与外观5.3 操作步骤 1 添加主题文件夹（1）右键网站根文件夹，在弹出的快捷菜单中选择“添加ASP.NET文件夹”|“主题”,在网站中产生文件夹App_Themes。并在其内默认生成主题子文件夹“主题1”，将其重命名为“BlueTheme”。（2）右击文件夹BlueTheme，依次选择“添加新项”|“外观文件”，输入文件名default.skin，单击“添加”按钮，如图13-1所示。（3）右击文件夹BlueTheme，依次选择“添加新项”|“样式表”，输入文件名default.css，单击“添加”按钮，如图13-2所示。2 设置母版页的布局方式2 设置CSS样式表文件default.css（1）使用对HTML元素定义的方式设置HTML标签（2）使用类名定义的方式设置HTML标签（3）使用元素ID的定义方式设置HTML标签3 设置皮肤文件default.skin4 应用主题（1）对单个页面应用主题(一个页面只能应用一个主题)将page指令的Theme或StyleSheetTheme属性值设置为要使用主题的名称，如：(2)对整个网站应用主题在网站的web.config文件中，将元素设置为页面主题或全局主题的主题名称，如：5.4 参考代码 1 设置母版页布局 .left width: 165px; .right width: 534px; #left width: 175px; #pagebody width: 995px; #main width: 562px; 欢迎您： 2 设置CSS样式表文件default.css/*页面基本信息*/body font-family: 宋体 Arial; font-size: 12px; margin-top: 0px; margin: 0; padding: 0; text-align: left; background-color: #EEFFFF; cursor: auto;/*页面层容器*/#container width:100%; #Header margin-top:0px; margin-left:0px; margin-right:0px; width:100%; height:100px; #Header margin-top:100px; margin-left:0px; margin-right:0px; width:100%; height:50px; #pagebody width:1280px; #left float:left; width: 200px; clear:left; overflow:hidden;#main width: 1080px; text-align:left; vertical-align:top; float:right; clear:right; overflow:hidden; .ptitle line-height:30px; font-size:x-large; font-weight:bold; color:Window hr border:0; border-top:2px solid #41519A; height:2px; #red line-height:30px; font-size:x-large; font-weight:bold; color:Window 3 设置皮肤文件default.skin13.5 相关理论知识1 主题：主题是定义网站中页面和控件的外观的属性的集合，通过应用主题，可以为网站中的页面提供一致的外观。主题是一个目录，ASP.NET对应的目录名称为APP_Themes，这个目录只允许存放三种类型的文件：皮肤文件（扩展名为.skin的文件，用于定义ASP.NET web服务器控件的属性设置），样式文件（扩展名为.css的文件）和一些图像文件。（1）外观文件：包含各类控件的属性设置。2 CSS（Cascading Style Sheet）常称为级联样式表，用来定义HTML的标签，控制网页元素的外观属性。CSS定义有三种类型，分别是：对“元素”定义，对“类名”定义以及对“元素ID”定义。（1）对HTML“元素”进行定义，格式如下：HTML元素名/*显示风格的描述语句*/属性名：值；属性名：值；（2）对“类名”定义，格式如下：.类名/*显示风格的描述语句*/属性名：值；属性名：值；“类名”定义可以应用于任意HTML标签中，只要在该标签的属性中注明类名（class）即可，例如：(3)对“元素ID”定义，格式如下：#ID名/*显示风格的描述语句*/属性名：值；属性名：值；“元素ID”定义可以应用于任意HTML标签中，只要在该标签的属性中注明id取值，例如：三种CSS的类型的优先级别顺序依次为：元素名、元素ID、类名。3. CSS加入HTML的方式l 行内直接加入样式可以直接在HTML代码行中加入样式规则，这种方法适合于指定网页内的某一小段文字的显示风格。基本格式为：例如：CSS实例。表示用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。l 嵌入一个样式表可以在HTML的标记中使用STYLE嵌入一个样式表。基本格式为： 其中，type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器上直接以源代码的方式显示设置的样式表。但为了保证上述情况一定不要发生，还是在样式表里加上注释标识符“”。l 链接样式表可以将多个HTML文件都连接到一个样式表文件上，该文件设定所有网页的规则。若改变样式表中的某个细节，所有页面也都随之改变。一个外部的样式表可以通过HTML的标识的link元素链接到HTML文档中。基本格式为：其中，*.css是单独保存的样式表文件，文件中不能包含标识符，并且只能以css为后缀。l 输入一个样式表可以使用CSS的import声明一个样式表。这个声明用于一个CSS文件或内部的STYLE标记。基本格式为： 4 皮肤文件皮肤文件又称外观文件 ，用来定义一批服务器控件的外观，扩展名为.skin。皮肤中包含的属性是那些想要被设定值的外观属性，皮肤中不能包含ID属性，必须包括runat=”server”属性，皮肤中只能设置外观属性。（1）默认皮肤：未设置SkinID属性的是默认皮肤，默认皮肤只能有一个。（2）命名皮肤：命名皮肤必须设置SkinID属性，不能包含同名的命名皮肤。4 全局主题：服务器上任何网站以及任何网站中的任何页面都可以引用的主题称为全局主题。全局主题必须保存在服务器默认网站中。例如，默认网站根文件夹是C:Inetpubwwwroot，想要创建名为BlueTheme的全局主题，则执行如下两步：（1）创建文件夹：C:Inetpubwwwrootaspnet_clientsystem_webversionThemesBlueTheme.(2)将皮肤文件、CSS文件、图片文件等主题资源保存在文件夹BlueTheme中，全局主题创建完毕。5 应用主题：（1）对单个页面应用主题(一个页面只能应用一个主题)将page指令的Theme或StyleSheetTheme属性值设置为要使用主题的名称，如：主题中定义的默认皮肤等样式就应用到网页各类控件的所有实例中，如果希望对单个控件应用一组特定属性，可以引用命名皮肤，及该控件的起始标记中添加SkinID属性。(2)对整个网站应用主题在网站的web.config文件中，将元素设置为页面主题或全局主题的主题名称，如：主题中定义的默认皮肤等样式就应用到网站所有网页各类控件的所有实例中，如果希望对单个控件应用一组特定属性，可以引用命名皮肤，及该控件的起始标记中添加SkinID属性。（3）主题应用的优先级别 Page指令中Theme属性的优先级别最高。 然后是web.config中的Pages.theme属性； Page指令中的StyleSheetTheme属性的优先级别最低。 Page指令中的StyleSheetTheme属性的优先级别低于网页控件自身标记中直接设置的属性，其他主题高于网页空间自身标记中直接设置的属性。（4）以编程方式应用主题。在程序中应用主题Theme，要在Page_PreInit事件过程中设置，代码如下：protected void Page_PreInit(object sender, EventArgs e) Page.Theme = BlueTheme; 在程序中设置空间SkinID，要在Page_PreInit事件过程中设置，代码如下：protected void Page_PreInit(object sender, EventArgs e) Button3.SkinID = pinkbutton; （5）禁止应用主题将Page指令的EnableTheming参数的值指定为false。为控件禁止应用主题，设置控件EnableTheming属性值为false。6 控件最终外观各项加载的顺序为：CSS文件、StyleSheetTheme、控件标记内嵌样式、web.config的Pages.theme、theme,若控件的某些属性在以上多项中都有设置，则后面加载的覆盖前面加载的。应用StyleSheetTheme属性在设计阶段就可以看到样式，应用Theme属性只能在运行阶段看到结果。1.6 拓展知识 1 CSS的属性含义（1）字体l text-decoration 属性规定添加到文本的修饰。（2）块l line-height 属性设置行间的距离（行高）。注释：不允许使用负值。l vertical-align 属性设置元素的垂直对齐方式。说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。l text-align 属性设置水平对齐方式l text-indent 属性规定文本块中首行文本的缩进。注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。l white-space 属性设置如何处理元素内的空白l word-spacing 属性增加或减少单词间的空白（即字间隔）。l letter-spacing 属性增加或减少字符间的空白（字符间距）。（3）背景l background-color 属性设置元素的背景颜色。l background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。l background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。l background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。l background-position 属性设置背景图像的起始位置（4）边框l border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。l border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。l border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。（5）方框l padding 简写属性在一个声明中设置所有内边距属性。l margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。注释：允许使用负值。（6）定位和布局l z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！l position 属性规定元素的定位类型。l visibility 属性规定元素是否可见。提示：即使不可见的元素也会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。l display 属性规定元素应该生成的框的类型l float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。l clear 属性规定元素的哪一侧不允许其他浮动元素。l cursor 属性规定要显示的光标的类型（形状）。l overflow 属性规定当内容溢出元素框时发生的事情。l clip 属性剪裁绝对定位元素。（7）列表l list-style-type 属性设置列表项标记的类型。l list-style-image 属性使用图像来替换列表项的标记。说明：这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。l list-style-position 属性设置在何处放置列表项标记。说明：该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。（8）表格l tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局：固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单