DIV+CSS网站建设兴化旅游网毕业设计说明书
目录
This design manual mainly narrated throughout the construction of the website is to better conform to the trend of development, a brief description of the site to build the background, objective. To do this project to explain the use of the tools and layout, including the design of the personal ideas, some of the core code of the website, the website development process. Finally on the various problems encountered in building sites and solutions.
Keywords: DIV+CSS; layout; website development; tourism website; design
一、引言
（一）课题开发目的
随着计算机科技的发展，网络的规模越来越大。渐渐被人熟知，人们开始使用它来进行通信，购物，又或者作为商业用途来进行推销、宣传等用途，使得网络已经渗入到了商业，金融，政府，医疗，科研，教育，等各个社会部门。而使得网络已经成为人们生活中必不可少的一个部分。而网站就是网络的必不可缺的元素。所谓的网站呢就是说人们通过浏览器继而浏览到网站——获取自己需要的信息。为了使家乡能够进一步的发展，便想到了做一个具有商业性的旅游性网站，旅游性的网站不仅能告 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
诉用户当地的历史文化，还可以吸引顾客的来访。从而达到建设网站的目的。
（二）课题开发意义
此设计主要是为了宣扬我的家乡——兴化而制作的网站，为了让更多人能了解到兴化，于是将它设定为旅游性的网站，用户可以通过此网站了解到更详细的兴化，更可以吸引大批游客来游玩。游客们也可以通过网站的内容来制定自己的旅游方案，而一些风景名胜，酒店，交通，门票都可以在此查询到，用户还可以通过本网站的留言板来交流自己的心得体验。还可以提前预订用户想去的地点的门票。
（三）课题内容
本论文详细地阐述了兴化的整个水乡特色。主要有首页、酒店、门票、最新活动、首先介绍了网站开发的目的和开发的背景意义，然后说明了整个网站开发时所使用的主流布局DIV+CSS，不仅如此，还对比了DIV+CSS布局与TABLE布局的差异。再接着讲解了整个网站在搭建时所采用的工具。最后讲述了网站的内容，通过网页脚本的编写使得网站的建设更加美观。最后的最后总结了一下自己的心得和在此过程中遇到的一些难题，到最后网站的搭建就差不多了，不过还差最后一道工序，还要经过一些测试来验证网站的兼容性等问题，以便解决一些BUG。
（四）课题开发技术
DIV+CSS
CSS是Cascading style Sheets的简称，即“层叠样式表单”，而在制作网页时采用css技术，可以有效的对页面的布局，颜色，字体还有背景等实现更加精准的效果。无论你在使用什么网页，都离不开css的存在。 DIV+CSS它是一种网页的布局方法。经常被运用于各大网站中，由于它可以实现网页页面内容与表现相分离，更便于网站的修改。
2.DIV+CSS与TABLE布局比较
有利于搜索引擎优化
使用table布局去制作页面的时候，经常需要一个表格套用另一个表格，但是当蜘蛛搜索页面时，在碰到表格嵌套时，经常会直接掠过此页面，从而使得页面不能被记录，甚至会被误认为是相似的页面，从而影响seo。但是DIV+CSS布局就不会存在这样的问题，他可以走外部链接一个样式表，不会导致页面的相似。
代码精简，提高了加载速度
使用DIV+CSS布局，大大的减少了页面的代码，提高了页面的加载速度。对于开发者来说，代码精简，便于阅读和维护，而对于搜索引擎来说，蜘蛛在一个页面的爬行时间是有限制的，代码量少，不仅结构清晰，而且缩短了蜘蛛爬行的时间。实现网站的快速收录。
样式便于操作，网页便于维护
不仅如此，使用此布局在改版的时候，只要通过简单的修改css样式改就能重新设计一个有成百上千页面的站点。而table的布局灵活性不够，你只能遵循table tr td 的格式，而div你可以div ul li 也可以 ol li 还可以 ul li等等，灵活性远远大于table布局。
3.网页脚本
JQuery其实就是一个JS文件，是一个工具包，它经过一些有心人的封装，我们在使用时只要直接调用就可以了，JQuery最主要的是很便捷。我在使用的时候发现使用JQuery代码要更加简洁，并且由于它是一个已经封装好的库，内部已经完全处理好了，
当我们在调用它的时候，完全不用担心浏览器的兼容性问题。
（五）课题开发工具
1.Photoshop
Photoshop简称“PS”，是一款目前比较流行而且功能强大的图像处理软件，广泛地被应用于印刷、封面设计、网页图像制作和照片编辑等多个方面。它的出现，将图像处理和设计推向了更高的艺术标准，许多设计师将它作为自己制作网页设计，图像处理的法宝。在用ps设计网页的时候，首先是控制网页的分辨率，接着就是整个网页的布局，最后就是处理网站所需要的图片。
2.Editplus
Editplus是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示，通过定制语法文件，可以扩展到其他程序语言，EditPlus提供了与Internet的无缝连接，可以直接在ditPlus的工作区域中打开Intelnet浏览窗口。提供了多工作窗口。不需切换到桌面，便可在工作区域中打开多个文档。不带有提示代码功能，可增强使用者记忆代码。
二、网站内容规划
（一）网站主题
兴化是鱼米之乡，悠久的文化，美丽的千岛菜花，再加上宏伟壮观的古建筑，很值得人去一探。因此选择了将此网站作为旅游性的网站，为了方便用户的浏览，在导航上添加了酒店，门票等一些可搜寻度大的方面，从而吸引更多的浏览量。而网站的名字被命名为“兴化——旅游 ”顾名思义，就是旅游，让人一目了然，目标明确，用户们可以带着自己的想法在网站上搜寻自己想去的地方。
（二）网站内容
1.整体介绍
主要是由首页、景点门票、交通、酒店、自由行、游记攻略、最新活动这几个部分组成。其中掺杂了各种图片。
图2-1 网站逻辑结构图
从个人来说，我比较崇尚简洁，按此思想，导航的设计主要是用一个大的矩形在里面套上一个小的矩形，底色采用的网站的主体颜色——白色，为了使导航亮眼一点，加上了鼠标以上去，增加一个蓝色的底纹。这些便构成了导航。
This design manual mainly narrated throughout the construction of the website is to better conform to the trend of development, a brief description of the site to build the background, objective. To do this project to explain the use of the tools and layout, including the design of the personal ideas, some of the core code of the website, the website development process. Finally on the various problems encountered in building sites and solutions.
Keywords: DIV+CSS; layout; website development; tourism website; design
一、引言
（一）课题开发目的
随着计算机科技的发展，网络的规模越来越大。渐渐被人熟知，人们开始使用它来进行通信，购物，又或者作为商业用途来进行推销、宣传等用途，使得网络已经渗入到了商业，金融，政府，医疗，科研，教育，等各个社会部门。而使得网络已经成为人们生活中必不可少的一个部分。而网站就是网络的必不可缺的元素。所谓的网站呢就是说人们通过浏览器继而浏览到网站——获取自己需要的信息。为了使家乡能够进一步的发展，便想到了做一个具有商业性的旅游性网站，旅游性的网站不仅能告 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
诉用户当地的历史文化，还可以吸引顾客的来访。从而达到建设网站的目的。
（二）课题开发意义
此设计主要是为了宣扬我的家乡——兴化而制作的网站，为了让更多人能了解到兴化，于是将它设定为旅游性的网站，用户可以通过此网站了解到更详细的兴化，更可以吸引大批游客来游玩。游客们也可以通过网站的内容来制定自己的旅游方案，而一些风景名胜，酒店，交通，门票都可以在此查询到，用户还可以通过本网站的留言板来交流自己的心得体验。还可以提前预订用户想去的地点的门票。
（三）课题内容
本论文详细地阐述了兴化的整个水乡特色。主要有首页、酒店、门票、最新活动、首先介绍了网站开发的目的和开发的背景意义，然后说明了整个网站开发时所使用的主流布局DIV+CSS，不仅如此，还对比了DIV+CSS布局与TABLE布局的差异。再接着讲解了整个网站在搭建时所采用的工具。最后讲述了网站的内容，通过网页脚本的编写使得网站的建设更加美观。最后的最后总结了一下自己的心得和在此过程中遇到的一些难题，到最后网站的搭建就差不多了，不过还差最后一道工序，还要经过一些测试来验证网站的兼容性等问题，以便解决一些BUG。
（四）课题开发技术
DIV+CSS
CSS是Cascading style Sheets的简称，即“层叠样式表单”，而在制作网页时采用css技术，可以有效的对页面的布局，颜色，字体还有背景等实现更加精准的效果。无论你在使用什么网页，都离不开css的存在。 DIV+CSS它是一种网页的布局方法。经常被运用于各大网站中，由于它可以实现网页页面内容与表现相分离，更便于网站的修改。
2.DIV+CSS与TABLE布局比较
有利于搜索引擎优化
使用table布局去制作页面的时候，经常需要一个表格套用另一个表格，但是当蜘蛛搜索页面时，在碰到表格嵌套时，经常会直接掠过此页面，从而使得页面不能被记录，甚至会被误认为是相似的页面，从而影响seo。但是DIV+CSS布局就不会存在这样的问题，他可以走外部链接一个样式表，不会导致页面的相似。
代码精简，提高了加载速度
使用DIV+CSS布局，大大的减少了页面的代码，提高了页面的加载速度。对于开发者来说，代码精简，便于阅读和维护，而对于搜索引擎来说，蜘蛛在一个页面的爬行时间是有限制的，代码量少，不仅结构清晰，而且缩短了蜘蛛爬行的时间。实现网站的快速收录。
样式便于操作，网页便于维护
不仅如此，使用此布局在改版的时候，只要通过简单的修改css样式改就能重新设计一个有成百上千页面的站点。而table的布局灵活性不够，你只能遵循table tr td 的格式，而div你可以div ul li 也可以 ol li 还可以 ul li等等，灵活性远远大于table布局。
3.网页脚本
JQuery其实就是一个JS文件，是一个工具包，它经过一些有心人的封装，我们在使用时只要直接调用就可以了，JQuery最主要的是很便捷。我在使用的时候发现使用JQuery代码要更加简洁，并且由于它是一个已经封装好的库，内部已经完全处理好了，
当我们在调用它的时候，完全不用担心浏览器的兼容性问题。
（五）课题开发工具
1.Photoshop
Photoshop简称“PS”，是一款目前比较流行而且功能强大的图像处理软件，广泛地被应用于印刷、封面设计、网页图像制作和照片编辑等多个方面。它的出现，将图像处理和设计推向了更高的艺术标准，许多设计师将它作为自己制作网页设计，图像处理的法宝。在用ps设计网页的时候，首先是控制网页的分辨率，接着就是整个网页的布局，最后就是处理网站所需要的图片。
2.Editplus
Editplus是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示，通过定制语法文件，可以扩展到其他程序语言，EditPlus提供了与Internet的无缝连接，可以直接在ditPlus的工作区域中打开Intelnet浏览窗口。提供了多工作窗口。不需切换到桌面，便可在工作区域中打开多个文档。不带有提示代码功能，可增强使用者记忆代码。
二、网站内容规划
（一）网站主题
兴化是鱼米之乡，悠久的文化，美丽的千岛菜花，再加上宏伟壮观的古建筑，很值得人去一探。因此选择了将此网站作为旅游性的网站，为了方便用户的浏览，在导航上添加了酒店，门票等一些可搜寻度大的方面，从而吸引更多的浏览量。而网站的名字被命名为“兴化——旅游 ”顾名思义，就是旅游，让人一目了然，目标明确，用户们可以带着自己的想法在网站上搜寻自己想去的地方。
（二）网站内容
1.整体介绍
主要是由首页、景点门票、交通、酒店、自由行、游记攻略、最新活动这几个部分组成。其中掺杂了各种图片。
图2-1 网站逻辑结构图
从个人来说，我比较崇尚简洁，按此思想，导航的设计主要是用一个大的矩形在里面套上一个小的矩形，底色采用的网站的主体颜色——白色，为了使导航亮眼一点，加上了鼠标以上去，增加一个蓝色的底纹。这些便构成了导航。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1822.html
