零点起飞学HTML+CSS之整合我博客.pptxVIP

第21章 整合我的博客 本章将会把前两章所讲的示例整合在一起，形成一个完整的博客网站，作为读者的参考。在整合过程中，会先整合一个一个的页面，最后再使用导航条把每个网页整合在一起形成一个网站。本章将会使用两种方式来进行整合，分别是使用table整合网站和使用DIV+CSS整合网站。 21.1 使用table整合我的博客 使用table整合我的博客，就是使用前面所讲的所有table实例来进行我的博客的整合。在上一章的的导航条里可以看出，我的博客共分为四个页面：关于我们、鲜花展示、留言版、联系我们。本小节将会对这四个页面进行整合，再通过导航条把它们链接成一个网站。 21.1.1 整合关于我们页面 关于我们的页面和第19章所讲的我的日志页面差不多，只需要把内容和标题更换一下，再加上一个导航条就可以了。在第20章里有讲过导航条，这里将使用里面的可以显示阴影的横向导航条来对页面进行填充。 21.1.2 整合鲜花展示页面 鲜花展示页面是在关于我们页面上做修改，只要把下面的内容更换成产品相关的内容就可以了。在第20章里有讲过图片浏览器，这里将使用图片浏览器显示产品相关的内容对页面进行填充。 21.1.3 整合留言版页面 留言版页面只需要在鲜花展示页面上进行修改就可以了，只要把下面的内容更换成留言版相关的内容。在第19章里有讲过留言版，这里将使用留言版表单内容显示留言版相关的内容对页面进行填充。 21.1.4 整合联系我们页面 联系我们页面指需要在留言版页面上修改即可，只要把下面的内容更换成联系我们相关的内容。联系我们的内容会比较少，本示例将在后面增加第7章的滚动字幕，使页面更丰富。 21.2 使用div+CSS整合网站 使用DIV+CSS整合我的博客，就是使用前面所讲的所有DIV+CSS实例来进行我的博客的整合。这里讲述的网站整合页面效果会和前面的table页面整合的效果类似，在前面说的四个页面的基础上，这里会增加多一个新闻页面。 21.2.1 整合关于我们页面 关于我们页面，显示效果会和前面使用table的显示效果大致一样，这里的导航条会增加多一栏新闻动态的菜单项目。 21.2.2 整合鲜花展示页面 鲜花展示页面只需要在关于我们页面上做修改即可，只要把下面的内容更换成鲜花展示相关的内容。在前面的小节里有讲过图片的排列，这里将使用图片的排列显示产品相关的内容对页面进行填充。 21.2.3 整合必威体育精装版日志页面 必威体育精装版日志页面也是在关于我们页面上稍作修改即可，只要把下面的内容更换成日志相关的内容就可以了。在第19章里有讲过横向日志列表，这里将使用横向日志列表显示日志相关的内容对页面进行填充。 21.2.4 整合留言版页面 留言版页面也只需要在关于我们的页面上稍作修改，只要把下面的内容更换成留言版相关的内容就可以了。这里使用的留言版表单会和table里的一样。 21.2.5 整合联系我们页面 联系我们页面也是在关于我们页面上做修改，只要把下面的内容更换成联系我们相关的内容就可以了。这里使用的联系我们会在table里的联系我们的基础上再加上一个网站地图。 21.3 本章小结 本章通过制作一个完整的博客网站，来把前面所学的知识全部都复习了一遍，来让读者对前面所学的知识进一步的了解。本章是这本书的最后一章，通过综合的学习网站的制作，可以掌握到一个网站的制作过程。