说明书-上海旅游网（网站设计）

计算机多媒体技术专业毕业论文设计说明书题目上海旅游网（网站设计）专业方向13计算机多媒体技术（游戏网页）目录目录一、毕业设计作品概述31网页主题32网页简介33网页编写方式和技术效果简介34网页内容模块3二、毕业设计思想41网页设计背景42网页设计思路43网页设计内容构想4三、作品准备工作51素材收集52素材处理5四、作品制作流程61网页排版62网站首页的制作73景点页面的制作114美食页面的制作165购物页面的制作196住宿页面的制作207游记页面的制作228最后网页的调试和修改23五、使用的软件23六、遇到的问题及解决方案241素材资源方面242网页排版布局方面243制作过程方面24一、毕业设计作品概述1网页主题上海旅游网（网站设计）2网页简介网页，是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。网页是一个文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页“，是超文本标记语言格式。通常我们看到的网页，都是以HTM或HTML后缀结尾的文件。俗称HTML文件。不同的后缀，分别代表不同类型的网页文件，例如以CGI、ASP、PHP、JSP甚至其他更多。网页说具体了是一个HTML文件，浏览器是是用来解读这份文件的。3网页编写方式和技术效果简介本次毕业设计，主要用HTMLCSS语言编写，在一定程度上使用了HTML5CSS3的方式，利用HBUILDER软件作为开发工具，采用IE,谷歌,火狐，OPERA和SAFARI等主流浏览器测试网页在各个浏览器中的兼容性，中间插入了一些JAVASCRIPT语言用以编制一些特效，如左右移动图片BANNER,一些LI项的显示和隐藏等，并且结合了CSS3的特性，实现了鼠标滑上去和划开的简单动画效果，以网站浏览的方式将网页展示给大家。4网页内容模块本次毕业设计主要分为首页、景点、美食、住宿、购物以及游记几个方面，以图片和文字介绍相结合的方式，叙述了有关于上海市的旅游文化，综合展现了上海市区的旅游面貌，着重给大家介绍了上海这个城市旅游文化。二、毕业设计思想1网页设计背景因为在上海这边实习，切身实地的体会到上海的气息。作为中国国家中心城市，上海是一座国家历史文化名城，拥有深厚的近代城市文化底蕴和众多历史古迹。再加上上海是一座国际化的大都市，身处上海可以体会到多元化的文化冲击和时尚气息，所以上海是在中国旅游必不可少的一站。因此，为了向大家介绍上海，让大家了解上海，我们小组选择了有关于上海旅游的网站设计。2网页设计思路城市的现代化越来越明显，人们的生活节奏变得越来越快，有些人在小城市里默默挣扎，有些人在大城市里艰苦奋斗，而不论是在大城市还是小城市，是富人还是平凡人，他们都需要发泄，都需要释放自己的情绪，而旅游，就是放松自己的最好方式。所以我选择了旅游这个题材。而我的网页，在首页上，只有人们旅游关心热度最高的去哪儿玩，吃什么，住什么，买什么，就比如人们必不可缺的衣食住行四大类。网站的整体风格，简单大当，没有采取严谨紧密的排版，让人在体验的同时不会感觉到如同生活中工作和家庭给它的压力一般让人踹不过气。旅行，不是说走就走，而是安排得当，行程合理，旅行，才会更加完美。3网页设计内容构想既然是旅游，那么就要让人们能够清晰的知道自己想要做什么，看什么，去哪里。而我们的整体网站排版轻松自如，分级明显，可以完全按照一个人的行程规划去看自己需要的内容，网站分为五大类，一为景点，二为美食，三为住宿，四为购物，五为游记，层层递进。在安排自己行程的同时，也可以去观看别人的游记在修改自己的行程。三、作品准备工作1素材收集根据网站设计内容构想，分为五个部分景点、美食、住宿、购物、游记。以这五点来分别寻找素材，在携程、途牛、蚂蜂窝以及百度上寻找图片和文字素材（如图1）图1图片收集2素材处理将收集到的素材稍微处理一下，利用PS将图片处理成想要的尺寸。因为还没有开始着手做毕业设计，所以可以大致的处理一下素材。另外，还有网站LOGO等一些可控素材也可以在PS中先行处理。（如图2）图2图片处理四、作品制作流程1网页排版一个网站最重要的是网页的排版，所以在开始制作时，我们在PS里将网页首页的排版先弄好，再切图以便做的时候方便网页排版。（如图3）如图3首页排版2网站首页的制作1切好首页的排版图后，用HBUILDER软件将首页排版转换成网页模式，（如图4）如图4部分首页截图2整个首页页面都可以显示后，就可以一步一步分开做。先来做首页的导航按钮因为分为五个子页面，再加上首页，所以共有6个导航按钮，默认选中“首页”按钮，其他按钮也都用CSS来设置鼠标移上和选中效果移上和选中状态都为一条深灰色的下划线。每个导航都可以链接到其相对应的子页面。（如图5是首页导航的鼠标效果和CSS代码）图5导航效果和CSS部分代码3首页BANNER的效果展示将处理好的几张图片放在首页的首页BANNER处，利用CSS和JAVASCRIPT语言插件将图片做成自动轮播的方式，在点击BANNER上的左右按钮时，图片会切换到上一或下一张。（如图6BANNER的CSS和JAVASCRIPT部分代码及显示效果）如图6BANNER的代码及显示4首页内容的表现首页的内容是根据导航来定的，在内容区域放上有关于导航的简介和几张图片，每个简介都很简短又突出中心，给人明显的印象，让人们觉得这些一目了然，很轻松就能知道到上海会有哪些安排。而图片则是选取了关于这个导航的几个代表排。每张图片都添加了超链接，链接到图片所对应内容的第三级页面，而且还给图片添加了CSS样式鼠标移上去图片会缩小，图片添加模糊度，鼠标移开图片恢复原样。（如图7是景点的网页效果和代码）图7景点网页效果和代码示例5最后是首页的尾部我们改变添加上海的消息，而是用了其他旅游地区的信息。而“准备出发”表现了只要我们想去，就可以出发。当然尾部内容只是一个展示，并不可点。做一个这样的效果，也加强了首页排版的可视度和美观度。（图8是尾部效果和代码布局及CSS样式）图8尾部效果及代码3景点页面的制作1首页整体布局完成之后，就可以开始导航页面的排版布局。我们在写的时候是按照每个导航来写的，先完成一个导航的，再弄下一个导航。这样会思路会清晰一些，不会造成混乱。2先是景点页面的导航部分景点导航和首页导航的内容一样，效果也一样（鼠标移上和移开），只是没有了LOGO标志。当然，每个导航都添加了相应的超链接，链接到其相对应的页面。（如图9效果）图92景点BANNER位置此处是上海景点概述，简要讲述了上海景点的魅力。在这里只显示一部分文字，点击“展开全部”会看到全部景点概述。（如图10）图103景点页面里内容部分分为两个方面一是必游景点之魅力上海，二是热门景点。这两部分我们选取了上海的一些代表性景点来分类。下面来分别介绍（1）上海必游景点有外滩、南京路步行街、东方明珠、豫园、城隍庙。每个景点中我们采用的是图文并排的方式，景点名称已特别的字体、字号和字号突出，一目了然，景点介绍则是简要概述了此景点的特点，而图片排列在右边。景点名称和图片都添加了超链接，链接到此景点的子页面，也就是整体的三级页面。（如图11是外滩的效果展示及代码）图11必游景点示例（2）热门景点是田子坊、外白渡桥、黄浦江、朱家角古镇、陆家嘴。此处直接采用图片排列的方式展现，景点图片的相对应名称和介绍直接放在图片上。这样既不会和上面的必游景点排版冲突，又会有焕然一新的感觉。每张图片上也都加了超链接，链接到图片景点所对应的下一级页面。（如图12所示）图124景点页面尾部此处子页面的尾部和首页页面的尾部是一样的，就不多说明了。5景点子页面的制作（1）点击景点页面的每个景点，都会链接到相对应景点的子页面，也就是整个网页的第三级页面。（2）三级页面的导航、尾部与二级导航、尾部是一样的，这点就可以不详细介绍了。BANNER部分是景点的图片，点击图片会链接到新的页面，这个页面时景点的相册页面，里面是景点的图片，点击图片会加载大图，大图上的左右按钮也可以切换图片，点击“X”号会关闭大图。此处用了JAVASCRIPT效果调用。在相册页面头部点击景点名称，会返回到三级页面内。BANNER内容也有一个鼠标移除效果。（如图13）（图13三级页面BANNER）（图13相册页面）（3）三级页面内容部分内容主要分为景点信息、景点攻略、特别提示三个方面，每一方面都有文字介绍。本来打算的是在这里有三个方面的小导航，点击每个导航，下面的文字介绍会自动靠前显示，但是因为技术问题所以没能得到解决，只能一个一个往下浏览。文字介绍内也分点介绍，每个导航的文字表现形式也不相同。具体页面布局和代码如下图所示（图14）图144美食页面的制作1先是美食页面的导航部分美食导航和首页导航的内容一样，效果也一样（鼠标移上和移开有下划线的变化），只是没有了LOGO标志。当然，每个导航都添加了相应的超链接，链接到其相对应的页面。（如图15）图152美食页面BANNER位置此处是上海美食概述，简要讲述了上海美食的多样化。在这里只显示一部分文字，点击“展开全部”会看到全部美食概述。3美食内容部分此处分为两方面“吃什么”和“去哪吃”。（1）每一方面的内容都采用列表的方式，将所要展示的内容显现出来。“吃什么”和“去哪吃”这两个小导航上也利用CSS样式做了鼠标移上移开和选中效果，另外还应用了JAVASCRIPT语言，在网上下载了插件参考后做出了想要的效果鼠标点击“吃什么”或者“去哪吃”，此导航下方所对应的列表会左右平移移动出来。下图是此处效果和部分代码展示（如图16）图16（2）“吃什么”下面的每个列表里都有一个上海的美食，每一个列表都用图文并排的方式介绍上海的美食。“去哪吃”下面的列表里则是介绍的上海的特色有名餐馆。而我们鼠标每次移到列表上，列表的背景就会改变。鼠标点击列表的话，会在此列表下方弹出关于此美食或者餐馆的详细介绍及图片。鼠标再次点击列表，下方的介绍就会收回隐藏。（如下图17所示）图17（3）内容列表采用了滑动的方式，不管列表多长，也不会影响整个美食页面的高度。而且在内容下方，我们还想用下一页的方式来解决每页列表过长的问题。但是因为时间问题，此处效果并没有得到实现。（如图18所示）图185购物页面的制作1购物页面的导航、BANNER、尾部和前面两个页面一样，只是文字叙述不一样。内容方面也分为两个一是特色商品，二是必去购物地。特色商品方面是向大家展示了上海的特产，这部分没有过多的叙述。重点描述了上海必去购物地因为上海购物的地方很多，我们在这里也只是选其中几个来简要介绍一下。（如图19是购物页面的部分效果和代码截图）图192必去购物地也采用了美食页面中列表的方式将每个购物地点分为一个列表，列表内容运用了图文并排的方式。当我们点击列表里购物地点时，会链接到一个新的页面，此页面是针对这个列表的详细介绍有地址、营业时间以及交通方式。（如图20页面的效果和代码）还有图片介绍当点击图片上的“查看全部照片”，也是链接到一个新页面，此页面都是这个购物地点的图片，点击图片会加载大图，大图上的左右按钮也可以切换图片，点击“X”号会关闭大图（如图21相册页面的效果和代码）图20图216住宿页面的制作1住宿页面主要想大家展示了一些有关于到上海旅游住宿方面的问题，其展现方式是和购物页面一致利用列表的方式，逐个展现，其中多了一个“查看地图”的按钮，本意是想点击这个按钮后出现此酒店的区域地图，可是时间紧，没来的及加。（如图22住宿页面的部分效果及代码）图222点击列表内酒店的名称会链接到新的页面，此页面详细介绍了该酒店的信息有酒店的图片，预订信息和设施介绍。在每一类型的房间列表内有一个“展开报价”的按钮，点击会展开各个网上预订的报价情况，点击“收起报价”按钮会将报价情况隐藏。此页面点击图片同样会链接到一个相册页面，相册页面能更好的查看该酒店房间的设施和配套。三级页面最主要是运用列表来达到想要的效果。（如图23三级页面的效果和部分代码）图237游记页面的制作1游记页面大部分都和前几个页面有重合的地方，像是内容部分也是用列表的形式展现一个游记一个列表。只是展现形式不同，每个列表内图片都加了CSS样式，点击图片，名称等超链接都会链接到一个新的子页面。这个三级页面主要是游记的展开有作者对上海的印象，图片，还有二维码。（如图24游记页面的部分效果及代码）图24（游记页面）图24（三级页面）2游记页面还有一个右边的模块热门景区。点击景区下橘黄色的按钮会链接到此景点的详细介绍。其他的按钮不可点，只是做了效果。（如图25）图258最后网页的调试和修改作品完成后，要进行调试浏览器的兼容性、屏幕的分辨率等，另外还有一些页面效果的修改和调试。五、使用的软件（1）ADOBEPHOTOSHOPCS6用于将找到的图片素材进行整理、页面的切图等；（2）HBUILDER作为毕业设计主要开发工具；（3）ADOBEDREAMWEAVERCS5作为毕业设计开发工具；（4）各个浏览器用于调试作品的兼容性六、遇到的问题及解决方案1素材资源方面因为在开始着手准备毕业设计之前，只是大概的有了方向就开始寻找素材，导致后面做的时候有好多素材都不可用，需要重新收集，浪费了时间和精力。2网页排版布局方面一个网页最重要的是页面的排版，好的排版才能让人眼前一亮，有欣赏的欲望。我们这次毕业作品光是排版方面就花了不少时间，想要一个简单大气的布局，但是又不能太空没有内容。最后在参考了不少旅游网站后，定下来这个页面排版。3制作过程方面在做这个作品的过程中遇到了不少问题1页面在各个浏览器上面的兼容问题页面制作的过程中，测试页面是在谷歌浏览器上进行测试的，谷歌浏览器的兼容性很强，属于主流浏览器的一种，而火狐，欧朋等主流浏览器的兼容器都相对来说属于比较上等的，而在IE浏览器上，IE9的兼容性和欧朋火狐谷歌大致不存在太大差距，而IE8及IE8以下，浏览器的兼容性就存在差异性。因为现在几乎IE6和IE7版本的浏览器几乎已经淘汰，所以做项目的时候并未去考虑，只考虑了IE8版本的兼容和其他浏览器的差距问题。具体解决办法为，排查网页页面上存在差异的部分，从大体上具