《ASP.NET 4.0网站开发实例教程 教学课件 ppt 作者 978-7-302-30496-8ch04》由会员分享，可在线阅读，更多相关《ASP.NET 4.0网站开发实例教程 教学课件 ppt 作者 978-7-302-30496-8ch04（64页珍藏版）》请在金锄头文库上搜索。
1、2019年8月6日,第1页,第4章 页面设计与布局,教学目标 本章内容,2019年8月6日,第2页,教学目标,编写和应用CSS样式 VWD提供的大量快速编写CSS的工具 创建和应用主题 在主题中定义外观 skinID属性的使用 创建母版页和内容页,2019年8月6日,第3页,本章内容,4.1 CSS样式 4.2 在VWD中使用CSS 4.3 页面布局 4.4 主题 4.5 母版页 4.6 本章小结 4.7 思考和练习,2019年8月6日,第4页,本章内容,4.1 CSS样式 4.2 在VWD中使用CSS 4.3 页面布局 4.4 主题 4.5 母版页 4.6 本章小结 4.7 思考和练习,20
2、19年8月6日,第5页,4.1 CSS样式,HTML格式的不足 CSS简介 CSS属性,2019年8月6日,第6页,HTML格式的不足,使用HTML格式化存在如下一些问题： 它的有限功能集远远满足不了页面的格式化需求。 数据与表现混合在相同的文件中。 HTML无法在浏览器中于运行时轻松地切换格式。 必需的格式化标记与属性使页面更大，因此加载和显示更慢。,2019年8月6日,第7页,CSS简介,CSS(Cascading Style Sheet)，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。就语法而言，CSS是一种容易学习的语言。它的“语法”仅由几个概念
3、组成，使得它相当容易入门。CSS的难点在于所有主流浏览器呈现页面的方式。尽管实际上每种浏览器都能够理解CSS，但当根据CSS标准显示页面时，它们都有各自的“怪癖”。 CSS规定了两种定义样式的方法，分别是内联式和级联式。,2019年8月6日,第8页,内联式样式,直接将样式控制放在单个HTML元素内，称为内联式或行内样式。该样式通过style属性来控制每个元素的外观，直观但是很繁琐。除非具有相同样式的元素较少，否则很少采用。,2019年8月6日,第9页,级联式样式,在网页的head部分定义或导入的样式，称为级联式样式。该样式可以实现将网页结构和表现分离，这样，当修改某些元素的样式时，只需要修改h
4、ead部分定义或引入的样式，该网页内所有具有相同样式的元素都会自动应用新的样式。 级联式样式又可以分为两种方式：内嵌式和链接式。,2019年8月6日,第10页,内嵌式,在head部分直接实现的CSS样式，称为内嵌式。这种CSS一般位于HTML文件的头部，即在与标签内，并且以开始，以结束。 采用内嵌式比内联式方便了很多，body内的代码也相对简洁，修改某个元素的样式时只需修改head内的代码即可。,2019年8月6日,第11页,链接式,在head部分通过导入以扩展名为.css的文件来实现CSS样式，称为链接式。利用这种方法在网页中可以调用已经定义好的样式表来实现样式表的应用，定义好的样式表通常单
5、独以文件的形式存放在站点目录中。这种方法实现了将网页结构和表现的彻底分离，最适合大型网站的CSS样式定义。,2019年8月6日,第12页,样式嵌套,如果某个元素既引用了链接样式文件中定义的样式，又在head部分定义了新的样式，或者在元素内部通过style属性定义了新的样式，那么该标记元素最终呈现的效果会是什么样呢？这就是样式嵌套中的冲突问题，浏览器解决这种问题的方法就是一旦发现样式冲突，则通过“就近使用”原则，而不冲突的样式则通过顺序组合后形成最终样式进行显示。 一般情况下，在样式表(.css)文件中定义适合大多数网页公用的样式，在网页内部采用内嵌式定义该页面特有的样式。,2019年8月6日,
6、第13页,CSS属性,属性是元素的一部分，可通过样式表修改。CSS规范定义了一个长属性列表，但在大多数Web站点中不会用到所有项。 VWD会通过它的许多CSS工具帮助找到恰当的属性，因此不必全部记住它们。,2019年8月6日,第14页,本章内容,4.1 CSS样式 4.2 在VWD中使用CSS 4.3 页面布局 4.4 主题 4.5 母版页 4.6 本章小结 4.7 思考和练习,2019年8月6日,第15页,4.2 在VWD中使用CSS,VWD中有几个使用CSS的便利工具： “样式表”工具栏：用来快速访问并创建新规则与样式。 “CSS 属性”面板：用来修改属性值。 “管理样式”窗口：用来组织站
7、点的样式，将它们从内嵌样式表改为外部样式表，反之亦然；对它们重新排序；将现有样式表链接到一个文档；创建新的内联、内嵌或外部样式表。 “应用样式”窗口：用来从站点中选择所有可用样式，并将它们快速地应用到页面中的不同元素上。 “添加样式规则”对话框：用于构建较复杂的选择器。,2019年8月6日,第16页,新建样式,在源视图下设置样式 在可视化窗口中设置样式 使用“CSS属性”面板 新建样式表文件,2019年8月6日,第17页,在源视图下设置样式,在“源”视图下，利用系统提供的智能提示功能，可以方便地设置各种元素的样式内联式样式，具体步骤如下： (1) 在想要设置格式的HTML标记内，输入style
8、=“，并按空格键，将弹出VWD 2010提供的“智能提示”工具，如图4-1所示。 (2) 定义任意数量的属性(“属性:值”对)，属性之间用分号分隔。,2019年8月6日,第18页,在可视化窗口中设置样式,利用可视化窗口设置样式的方法有很多，可以在“源”视图或者“设计”视图下选中某个标记元素，然后单击“属性”面板中style属性后面的省略号按钮()，将打开“修改样式”对话框。 该对话框分为两个窗格，左窗格列出了9个类别，当选择某个类别时，右窗格中将显示所选类别下的选项。设置了样式选项并单击“确定”按钮后，新的样式定义将自动在“源”视图中生成，也可以在“设计”视图下查看最新的效果。,2019年8月
9、6日,第19页,使用CSS属性面板,可以使用“CSS属性”面板对正在定义的内嵌式样式规则进行修改，具体步骤如下。 (1) 单击要修改样式的元素，选中部分以蓝色框包围并有一个标签指示h3元素已选中。 (2) 选择“视图”|“CSS属性”命令，打开“CSS属性”面板，可以看到h3元素的CSS属性列表。 (3) 通过该面板可以根据需要设置CSS属性。 在CSS属性列表中所做的修改可以立即通过“设计”视图显示出来，如果要观察样式代码，可以切换到“源”视图并滚动到style元素处进行查看。,2019年8月6日,第20页,新建样式表文件,通过“添加新项”对话框，在“模板”列表中选择“样式表”选项，新建样式
10、表StyleSheet.css。 选择“视图”|“管理样式”命令，打开“管理样式”窗口，此时该窗口中列出了样式文件中的样式和当前网页中的内嵌样式。,2019年8月6日,第21页,样式规则,一个样式表由若干个样式规则组成。样式规则是指网页元素的样式定义，包括元素的显示方式以及元素在页中的位置等。打开前面添加的样式表文件StyleSheet.css，在其中单击鼠标右键，从弹出的快捷菜单中选择“添加样式规则”命令，将打开 “添加样式规则”对话框。 在该对话框中选择某个元素，或者定义一个类，或者定义一个元素ID，单击“确定”按钮即可添加一个新的样式规则。,2019年8月6日,第22页,标记选择符,任何
11、HTML元素都可以是一个CSS的标记选择符。标记选择符仅仅是指向特别样式的元素。“添加样式规则”对话框中的“元素”下拉列表中提供了所有可供使用的标记选择符。,2019年8月6日,第23页,类选择符,每个标记选择符都能自定义不同的类，从而允许同一元素具有不同的样式。指定某个标记选择符内的自定义类的一般形式为： 标记选择符.类名样式属性1:值1; 样式属性2:值2; 在“添加样式规则”对话框中先选择“类名”单选按钮，在中输入one，然后选中“可选元素”复选框，在其下拉列表中选择p元素，即可自动生成p.one样式规则。,2019年8月6日,第24页,ID选择符,ID选择符用于分别定义每个具体元素的样
12、式。一个ID选择符的指定要有指示符#在名字前面。使用时通过指定元素的id属性来关联。例如： #index color:blue 引用时，使用id属性声明即可。 本段落的颜色为蓝色,2019年8月6日,第25页,关联选择符,关联选择符是一个用空格隔开的两个或更多的单一标记选择符组成的字符串。一般格式如下： 选择符1 选择符2 属性:值; 这些选择符具有层次关系，并且它们的优先级比单一的标记选择符大。例如： p h2 color:red 这种定义方式只对p元素所包含的h2元素起作用，单独的p或者单独的h2元素均无法应用该样式。,2019年8月6日,第26页,并列选择符,如果有多个不同的元素定义的样
13、式相同，则可以使用并列选择符简化定义。例如： h1,h2,h3 color:blue 每个元素之间用逗号隔开，表示所有的h1、h2、h3标记中的内容都将以蓝色样式显示。,2019年8月6日,第27页,伪类,伪类是CSS中非常特殊的类，它能自动地被支持CSS的浏览器所识别。伪类可以指定XHTML中的元素以不同的方式显示链接(links)、已访问链接(visited links)和可激活链接(active links)。甚至不同字体大小和风格。 CSS中用4个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a:active，例如： a:linkfont-weight
14、 : bold ;text-decoration : none ;color : #C00000 ; a:visited font-weight : bold ;text-decoration : none ;color : #C30000 ;,2019年8月6日,第28页,应用样式,在VWD中，通过“应用样式”对话框可以快速地为页面中的元素应用已经定义好的CSS样式。选择“视图”|“应用样式”命令即可打开“应用样式”窗口。 如果要应用多个类，则在单击列表中其他类时，按住Ctrl键，这样就会应用一个类列表，元素的class属性之间由一个空格隔开。 单击“应用样式”窗口中的“清除样式”选项，可以
15、快速地从标记中删除现有类和内联样式。,2019年8月6日,第29页,本章内容,4.1 CSS样式 4.2 在VWD中使用CSS 4.3 页面布局 4.4 主题 4.5 母版页 4.6 本章小结 4.7 思考和练习,2019年8月6日,第30页,4.3 页面布局,除了为页面的内容设置样式，页面元素的布局和定位是否合理也是衡量网页设计是否美观的重要指标。本节将介绍网页的基本布局方式，页面元素的定位，以及表格布局和层布局。 网页的基本布局方式 页面元素定位 表格布局 DIV和CSS布局,2019年8月6日,第31页,页面水平居中,设置页面水平居中的方法是在body的style样式中设置text-al
16、ign属性的值为center。如果还希望页面的宽度固定，则可以通过设置div的width属性来实现。例如下面的代码：,2019年8月6日,第32页,页面满宽度显示,设置页面满宽显示的方法是将div的固定宽度设置为百分比即可。例如下面的代码： ,2019年8月6日,第33页,页面元素定位,页面元素的定位分为流布局和坐标定位布局两种，其中，坐标定位布局又分为绝对定位和相对定位，这里仅介绍流布局和坐标绝对定位。 如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠。如果不设置元素的定位方式，则默认就是流式布局。 在使用坐标绝对定位之前，必须先将style元素的position属性设置为absolute，然后就可以由style元素的left、top、right、bottom和z-index属性来决定元素在页面中的绝对位置。left属性表示元素的x坐标，top属性表示元素的y坐标，坐标的位置是以它最近的具有position属性的父容器为参照物的。,2019年8月6日,第34页,表格布局,坐标定位布局又分为绝对
