网页布局和设计.pptVIP

* 第2章 网页布局和设计 本章重点：运用DIV+CSS进行布局，学会母版页的运用，能灵活运用主题控制页面效果 本章难点：运用DIV+CSS进行布局，不像利用表格的设计布局那样简单，要掌握DIV的嵌套使用，主题也是本章的难点，容易和样式混淆。 网页设计中比较繁琐的工作之一就是样式控制和页面布局。样式是否美观，布局是否合理，会直接影响网站的质量。设计精美的网站，往往具有优秀的版式设计，所以学习如布局页面以及如何定位页面中的元素也是网页设计的基本功。CSS是为了简化Web页面的更新工作而诞生的。它的功能非常强大，而且让网页变得更加美观，维护更加方便。 2.1 项目1：CSS样式引用 2.1.1 项目目的与要求 了解CSS样式定义。 掌握选择符类型的样式设置 掌握样式的各种引用方式 2.1.2 项目预备知识 CSS是层叠样式表单 (Cascading Style Sheets)的简称。它是一种设计网页样式的工具。CSS样式表可以以多种方式灵活地应用到我们所设计的XHTML页面中，通过CSS可以很方便地完成页面风格的设置，还可以进一步地对页面进行美化，对文本格式进行精确定制。 1．CSS样式定义概念 CSS功能的强大，使用CSS可以实现网页元素，可以精确定位，CSS样式和以像素为单位设置字体，确保一致的方式在多个浏览器中处理布局与外观。控制边距、浮动文本等网页块元素的格式和定位；还可以实现网页内容结构与格式控制相分离，使网页可以只由内容构成，所有格式控制指向某个CSS样式表文件，使用CSS样式既简化了网页格式制作，又避免了重复劳动。 CSS样式的语法规则为： 选择符｛属性：属性值；属性：属性值；｝ 例如：要定义段落字体为华文行楷，则格式为：p {font-family: 华文行楷}；如果需要对一个标签指定多个属性时，使用分号将所有的属性和值分开。如要实现段落居中排列；并且段落中的文字为红色，则格式为：p {text-align: center; color: red}。 2．选择符类型 （1）HTML标签选择符 该类型样式可重新定义某些特殊标签的格式。如H1，在创建完成H1标签的样式后，所有H1标签的文本都将立即改变。注意，多个HTML标签可以组合使用。如h1, h2, h3, h4, h5, h6 {color：green}标志着每个标题的文字都为绿色。 （2）自定义类 这种类型的样式中，你可以先定义若干个类: 用户可以对任何文本块或文本区域应用自定义样式。如分别定义类a和类b，类a用于将区域文字大小设置为“12”，字体为“黑体”；类b用于将区域文字大小设置为“15”，字体为“楷体_GB2312”。 （3）类选择器： 类选择器用于为同一个标签指定不同的样式说明。如果在同一个文档中需要两种段落格式，可以分别命名。 （4）id选择器： ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。另外，从概念上说也是不一样的：id是先找到结构(或内容)，再给它定义样式；class是先定义好一种样式，再套给多个结构（或内容）。目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。 3． CSS引用方式 CSS样式表可以以多种方式灵活地应用到我们所设计的XHTML页面中，定义方式主要有内联样式表、内部样式表和外部链接样式表三种方式，三种方式产生了三种引用方式。实际应用中还会遇到多重样式的层叠的问题。 （1）内联样式表 内联样式表很简单，由XHTML文件中的元素的style属性所支持，只是在每个HTML标签后书写CSS属性就可以了。将CSS代码用“;”写在style=“”之中便可以完成对当前标签的样式定义，不能实现表现与内容的分离。 如 Table标志中的字为红色，字体大小为10pt Table style=“color:red;font-size:10pt” （2）内部样式表 在网页的head部分定义样式，也称为嵌入式内部样式引用，嵌入样式表适用于控制一个网页内具有相同样式的多个元素。采用这种方式的优点是修改某些元素的样式时，只需要修改head部分的样式即可，该网页内的所有具有相同样式的元素会自动应用新的样式。 其例如某网页文件采用嵌入式内部样式，其格式如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml h