HTMLCSS第18章典型实例(一).ppt

第19章 典型实例（一）,实例是用在网页中经常要用到的例子来说明之前讲过的所有知识。让知识实战化，让繁琐的知识点聚集在一起，做出有趣的页面效果。,19.1 制作文本内容效果,文本内容效果是指页面中文本内容的效果。这里将用不同的实例来编写网页中文本内容的效果。这里的实例分为两大部分，一种是用和标签属性来制作的文本内容效果，一种是用div+CSS来制作的文本内容效果。,19.2 制作列表效果,列表效果是通过列表来实现的。无论是使用有序列表还是无序列表都可以制作出整洁有序的新闻列表。本节将会通过有序列表和无序列表来做出整洁有序的新闻列表。还会通过使用自定义列表来做出网站地图功能。,制作有序新闻列表 制作无序新闻列表 制作自定义网站地图,19.3 制作留言版表单效果,制作留言版表单效果，必须通过表单+CSS才可以做出好看的表单效果。这里将会使用两者结合来制作一个表单，不过纯粹是一个留言版的表单效果，没有任何的数据提交。,19.4 制作图片展示效果,图片展示效果是在网站中经常被用来展示产品的。这里将通过两种方法来展示图片页面的效果。一种是用table制作图片展示效果，一种是用div+CSS制作图片展示效果。,19.5 制作图片滚动效果,图片滚动效果，是在网站应用中很常见的一种图片显示效果，可以让更多的图片展示在有限的空间里面。这里将展示图片滚动的两种方法，分别为：左右滚动和上下滚动。,19.6 制作文字滚动效果,文字滚动效果和图片滚动效果应用在结构上是基本一样的。这里将通过两种方法，分别介绍制作左右滚动的文字效果和上下滚动的文字效果。,18.7 使用div、id和其他帮手,div、id是制作网站的好帮手。正确地使用div、id，能编写出极其紧凑的XHTML。div可以是结构化标记的好帮手，而id则是一种令人惊讶的工具，再加上巧妙地利用CSS，便可以向网站添加复杂而又精巧的行为。 div是英文division的简写，有分割、区域、分组的意思。在制作网站时，使用div来对网站内容进行划分区域，是一个很好的做法。比如，当网页分割成几部分时，就变成了几个区域了，对这几个分割出来的区域用div进行控制，便可以达到很好的控制和布局。通常在使用中，设计师会用div来对页面中的内容进行样式的设置和布局。这是一个非常好用的标签。 有了div，当然就少不了id和class。这二者是用来和CSS样式绑定的。在前面，也对二者进行过解说，在id和class之间的使用，取决于id具有唯一性，使用id的样式，在页面里只可以出现一次，而class的样式，在页面里可以被反复使用。这二者在CSS中，有着标识的作用。但在使用中，必须考虑好要用哪种进行标识，不然就会变成之前所说的误用和滥用了。,18.8 语义标记和可用性,在前面的内容中，已经不断地提到标记文档的语义。在实例中也可以看到语义标签+CSS的强大，比起使用标签，这些语义标签使用起来更为整洁和方便。在示例18.3中，列表标签通过结构化，带来了比使用标签实现相同效果更整洁更实用的代码，这就是语义标记的好处。而这样整洁的代码，可以在别的页面被重复使用，只需要修改或添加其中的样式即可，这样就大大提高了代码的重复使用性。 在后面第19章的实例中，将会有很多使用标签制作的例子和语义标签+CSS的例子，通过比较，就可以明白语义标记的好处和可用性了。,18.9 小结,本章学习了XHTML模块，通过学习，可以了解到XHTML模块化的原因和大致上分成的模块。这对代码的管理、规范使用都是有很大的帮助的。 本章除了学习XHTML模块，还学习了XHTML结构化，通过对结构化的学习，可以了解到在网页制作中，应该重视标签的语义。又通过结构化标签来实现标签的样式，利用XHTML重构网站，使网站更加整洁，并且可用性高。 在本章可以看到，几乎没有了表格的踪影，因为使用XHTML重构网站，就是为了摆脱以前什么都依赖于表格的做法。在重构网站中，设计师们不再依赖表格来制作网站，这是一个好的现象。