《ASP.NET动态网页设计案例教程 教学课件 ppt 作者 郭建东 教程PPT及教案 chap02》由会员分享，可在线阅读，更多相关《ASP.NET动态网页设计案例教程 教学课件 ppt 作者 郭建东 教程PPT及教案 chap02（31页珍藏版）》请在金锄头文库上搜索。
1、第2章 CSS样式与母版页,学习要点 掌握简单CSS样式设计 掌握母版页的创建、应用及在母版页中使用样式 掌握主题的应用,使用CSS布局页面,使用CSS布局网页是Web标准的基础，使用CSS，可对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。使用CSSDiv布局页面主要优点如下： 结构清晰，容易被搜索引擎搜索到。 缩短改版时间，只要修改CSS文件就可以重新设计页面。 表现与内容相分离，将设计部分分离出来放在一个独立的样式文件中。 可方便将网页的风格格式同时更新。,CSS概述,CSS是Cascading Style Sheets的简称，通过CSS可将所有有关文档的样式指定内容全部脱离
2、出来，通过外部样式文件供HTML调用。CSS样式表的主要目的是将网页上的元素进行精确定位，把网页上的内容结构和格式控制相分离。 把一个网页页面当作是一个盒子，用CSS来定义盒子的位置、大小、边框、内外边距、内容排列方式等。CSS方框模型参考如图2-1所示。,图2-1 CSS方框模型参考,CSS盒子模型示例,图2-2 盒子模型示例,ASP.NET中应用CSS样式,建立CSS样式文件 添加样式规则 设置样式属性 样式引用,CSS样式属性,ASP.NET中的CSS样式属性设置包括对字体、块、背景、边框、方框、定位、布局、列表、表格共9大类进行设置 。 字体属性 块属性 背景属性 边框属性 方框属性
3、定位属性 布局属性 列表属性 表格属性,字体属性,设置网页中的文字的字体、颜色、风格等 。 font-family：指定文本的字体。 font-size：对文字的大小进行设置。 font-weight：设置字体的粗细。 font-style：设置字体的风格。 font-varian：设置文本的大小写字母。 text-transform：控制字母的大小写转换。 color：设置文本的颜色。 text-decoration：控件链接文本的显示状态。,块属性,CSS中的区块指的是网页中的文本、图像和层等替代元素，主要控制块中内容的间隔、对齐等。 line-height：行高设置。 vertical-
4、align：块的垂直对齐方式。 text-align：块的水平对齐方式。 text-indent：设置块的缩进程度。 white-space：设置空白格式，在HTML里，空格（空白）默认是被忽略的。 word-spacing：字之间的空白。 letter-spacing：字符之间的空白。,背景属性,用于在网页元素后面加固定的背景色或图像 background-color：设置背景颜色。 background-image：设置背景图片。 background-repeat：当显示图片的位置与图片大小不同时，确定背景图片是否重复显示及如何重复显示。 background-attachment：确定
5、背景图片是固定在原始位置还是随内容一起滚动。 background-position（x）或（y）：指定图片相对元素的初始位置（对齐方式）。,边框属性,边框是位于外边距和内边距间的线。使用CSS的边框属性，可以创建出如同表格一样效果的边框样式，可应用于任何元素上，每个边框分为上、右、下、左四个边。 border-style：设置边框的样式。 border-width：设置边框的粗细。 border-color：设置边框的颜色。,方框属性,CSS把所有块元素都当作一个由一个方框包围，可对每个块元素设置外边距和填充空间大小。可分别设置上、右、下、左四个方向的边距 。 padding：块元素内边距。
6、 margin：块元素外边距。,定位属性,利用定位属性，可以建立列式布局，即布局的一部分与另一部分重叠。 position：确定定位类型。 z-index：设置块元素的叠放顺序。 width、height：确定元素的宽度和高度。 top、right、bottom、left：设置元素上、右、下、左的位置。,布局属性,用于设置块元素在网页中的显示方式。 visibility、display：控制元素的隐藏、显示。 float：设置块元素的浮动效果。 clear：清除块元素的浮动效果。 cursor：某个元素使用光标的形状。 overflow：当元素高度或宽度超出时溢出处理方式。 clip：元素被定
7、为绝对定位类型后，对块元素的剪切。,列表属性,控制列表内各项元素。 list-style-type：列表内每一项前使用的符号。 list-style-image：用于代替每一列表项前符号的图片。 list-style-position：列表位置。,表格属性,设置表格外观相关属性。 table-layout：完成表布局的方式。 border-collapse：设置表格的边框是否被合并为一个单一的边框。 border-spacing：设置相邻单元格的边框与边框间的距离（空白）。 empty-cells：设置是否显示表格中的空单元格（仅用于“分离边框”模式）。 caption-side：设置表格标题
8、的位置。,常见的布局类型样式,一列固定宽度、居中 一列自适应 二列固定宽度、居中 三列固定宽度、居中,母版页基础,母版页实际上就是一个网页模版，可以应用到多个网页中。在Web应用程序中使用母版页技术，必须创建母版页（Master），再创建内容页面（应用母版的页面）。运行时，ASP.NET会自动地将两个页面进行整合，显示给用户。,图2-14 母版页工作过程,创建母版页,在Visual Studio 2010中，新建网站时，已经自动新建了一个母版页Site.Master，可以在该母版页的基础上进行修改，也可以自己新建母版页。 在ASP.NET中创建母版页的方式与创建Web窗体的方式类似。在工具栏中
9、单击按钮，弹出“添加新项”对话框，选择“母版页”。 母版页中除ContentPlaceHolder控件之外的内容都是固定内容，可以在其中添加HTML标记，也可以添加Web控件，定义页面的公共内容。,案例2-1 创建母版页（一）,图2-15 案例2-1母版页布局,案例2-1 创建母版页（二）,图2-16 案例2-1母版页布局,创建内容页面,创建完母版页之后，需要创建内容页面。 在内容页面的Page指令中，通过MasterPageFile指定母版页。 因为在母版页中，已经使用了html、head、body、form等标记，在ForumPage.aspx文件中，不需要再重复使用这些标记。 在Web窗
10、体设计视图中，内容页面只有Content控件所在区域是可编辑的，从母版页中继承来的内容不可编辑 。,案例2-2,创建内容页面，应用案例2-1中的母版页。 案例分析 创建内容页面，套用案例2-1中的母版页，根据用户在母版页中的导航区域所选择的论坛栏目，在内容区域显示相应栏目的信息。,图2-18 案例2-2首次访问页面执行效果,在母版页中设置默认内容,在母版页中的ContentPlaceHolder控件中，也可以放置静态文本和Web控件，这些称为母版页的默认内容。如果内容页面中有与ContentPlaceHolder相对应的Content控件，将显示内容页面Content中的内容；否则，将显示Co
11、ntentPlaceHolder控件中的默认内容。 案例2-3 母版页默认内容的应用。,访问母版页中的控件和属性,内容页面可以访问母版页中的控件和公共属性。 ASP.NET为内容页面提供了Master对象，通过Master对象可以访问母版页中的控件和公共属性。 使用Master对象的FindControl方法可以访问母版页中的控件。 案例2-4 访问母版页的控件和属性,指定母版页,在内容页面的Page指令中，使用MasterPageFile属性指定母版页。 指定Web站点中所有内容页面的母版页。 为Web站点中某一文件夹中的所有内容页面指定母版页。 通过代码动态指定母版页。,嵌套母版页,创建父
12、级母版页 创建子级母版页,主题和外观,ASP.NET提供了主题功能，集中设置页面的外观样式，并可将该样式应用到站点中的多个页面。将页面的布局信息和控件的样式放到一个文件夹中，该文件夹称为一个主题。应用于服务器控件的样式称为皮肤。,创建主题,创建主题目录 创建外观文件（.skin） 创建CSS文件 使用图片文件,应用主题,在页面中应用主题 在Web站点中应用主题 通过代码动态应用主题,删除主题,删除页面上的主题 删除控件上的主题,案例2-5 主题应用,案例分析 在Web站点中定义一个主题MyTheme，定义外观，将页面中的所有标签控件的前景色设为红色，背景色设为银灰色；定义CSS文件，将页面中的body标记中的字体设为Larger、字体颜色设为蓝色。,图2-22 案例2-5运行效果,
