章页面设计与布局电子ch04.pptx

2024年6月19日第1页第4章页面设计与布局教学目标本章内容

2024年6月19日第2页教学目标编写和应用CSS样式VWD提供的大量快速编写CSS的工具创建和应用主题在主题中定义外观skinID属性的使用创建母版页和内容页

2024年6月19日第3页本章内容4.1CSS样式4.2在VWD中使用CSS4.3页面布局4.4主题4.5母版页4.6本章小结4.7思考和练习

2024年6月19日第4页本章内容4.1CSS样式4.2在VWD中使用CSS4.3页面布局4.4主题4.5母版页4.6本章小结4.7思考和练习

2024年6月19日第5页4.1CSS样式HTML格式的不足CSS简介CSS属性

2024年6月19日第6页HTML格式的不足使用HTML格式化存在如下一些问题：它的有限功能集远远满足不了页面的格式化需求。数据与表现混合在相同的文件中。HTML无法在浏览器中于运行时轻松地切换格式。必需的格式化标记与属性使页面更大，因此加载和显示更慢。

2024年6月19日第7页CSS简介CSS(CascadingStyleSheet)，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。就语法而言，CSS是一种容易学习的语言。它的“语法”仅由几个概念组成，使得它相当容易入门。CSS的难点在于所有主流浏览器呈现页面的方式。尽管实际上每种浏览器都能够理解CSS，但当根据CSS标准显示页面时，它们都有各自的“怪癖”。CSS规定了两种定义样式的方法，分别是内联式和级联式。

2024年6月19日第8页内联式样式直接将样式控制放在单个HTML元素内，称为内联式或行内样式。该样式通过style属性来控制每个元素的外观，直观但是很繁琐。除非具有相同样式的元素较少，否则很少采用。

2024年6月19日第9页级联式样式在网页的head部分定义或导入的样式，称为级联式样式。该样式可以实现将网页结构和表现分离，这样，当修改某些元素的样式时，只需要修改head部分定义或引入的样式，该网页内所有具有相同样式的元素都会自动应用新的样式。级联式样式又可以分为两种方式：内嵌式和链接式。

2024年6月19日第10页内嵌式在head部分直接实现的CSS样式，称为内嵌式。这种CSS一般位于HTML文件的头部，即在head与/head标签内，并且以style开始，以/style结束。采用内嵌式比内联式方便了很多，body内的代码也相对简洁，修改某个元素的样式时只需修改head内的代码即可。

2024年6月19日第11页链接式在head部分通过导入以扩展名为.css的文件来实现CSS样式，称为链接式。利用这种方法在网页中可以调用已经定义好的样式表来实现样式表的应用，定义好的样式表通常单独以文件的形式存放在站点目录中。这种方法实现了将网页结构和表现的彻底分离，最适合大型网站的CSS样式定义。

2024年6月19日第12页样式嵌套如果某个元素既引用了链接样式文件中定义的样式，又在head部分定义了新的样式，或者在元素内部通过style属性定义了新的样式，那么该标记元素最终呈现的效果会是什么样呢？这就是样式嵌套中的冲突问题，浏览器解决这种问题的方法就是一旦发现样式冲突，则通过“就近使用”原则，而不冲突的样式则通过顺序组合后形成最终样式进行显示。一般情况下，在样式表(.css)文件中定义适合大多数网页公用的样式，在网页内部采用内嵌式定义该页面特有的样式。

2024年6月19日第13页CSS属性属性是元素的一部分，可通过样式表修改。CSS规范定义了一个长属性列表，但在大多数Web站点中不会用到所有项。VWD会通过它的许多CSS工具帮助找到恰当的属性，因此不必全部记住它们。

2024年6月19日第14页本章内容4.1CSS样式4.2在VWD中使用CSS4.3页面布局4.4主题4.5母版页4.6本章小结4.7思考和练习

2024年6月19日第15页4.2在VWD中使用CSSVWD中有几个使用CSS的便利工具：“样式表”工具栏：用来快速访问并创建新规则与样式。“CSS属性”面板：用来修改属性值。“管理样式”窗口：用来组织站点的样式，将它们从内嵌样式表改为外部样式表，反之亦然；对它们重新排序；将现有样式表链接到一个文档；创建新的内联、内嵌或外部样式表。“应用样式”窗口：用来从站点中选择所有可用样式，并将它们快速地应用到页面中的不同元素上。“添加样式规则”对话框：用于构建较复杂的选择器。

2024年6月19日第16页新建样式在源视图下设置样式在可视化窗口中设置样式使用“CSS属性”面板新建样式表文件

2024年6月19日第17页在源视图下设置样式在“源”视图下，