北京气象网站界面设计毕业设计.doc

《北京气象网站界面设计毕业设计.doc》由会员分享，可在线阅读，更多相关《北京气象网站界面设计毕业设计.doc（35页珍藏版）》请在三一办公上搜索。

1、xx科学技术职业学院计算机工程技术学院(软件学院)毕 业 设 计题目： 专业： 软件技术 班级： 13软件UI2 学生姓名： x 学号：01041x 学生姓名： x 学号：0104x 学生姓名： x 学号：01041x 学生姓名： x 学号：0104x 指导教师姓名： x 职称： 讲师 2014年 10月xxx科学技术职业学院计算机工程技术学院（ 软件技术 ）专业毕业设计任务书填表日期： 2014 年 10 月 15 日 填表人：覃燕玲项目名北京气象网站界面设计指导教师xxx职称讲师人数2班别12网编3班项目简介这是一个比较小型的网站，其功能主要显示北京市里各个地区的天气预报、实况、旅游天气、

2、生活指数、气象百科，还有可以通过问卷调查，了解人们对天气预报关注的程度.设计任务、目标与计划阐述毕业设计具体要完成的任务及达到的目标北京气象网站首先是用Photoshop画出各个板块的网页界面，然后再根据Photoshop画出的网页效果做出一个静态网站。目标：实现图片自动切换功能、鼠标经过某个地区，显示其地区的天气情况、下拉框选择地区，显示其地区的天气情况。阐述毕业设计完成的具体计划计划1：10月15号11月2号这段时间用来画北京气象网站的图。北京气象网站分为七大块：首页、天气预报、天气实况、生活指数、气象百科、旅游、问卷调查，其中还不包括其子页。计划2：11月3号11月27号这段时间用来做北

3、京气象网站的静态网页。其中天气预报页面需实现图片自动切换功能，下拉框拉下来可以选择显示某某地区的天气情况。计划3:11月28号11月29号，两天时间用来最终修订。整理好Photoshop文件，及其素材。查看静态网页效果，确定最终排版。计划4：11月30号提交静态网站,Photoshop文件和素材计划5:12月1号12月29号论文编写，资料整理，论文排版，网站介绍计划6：12月30号12月31号最终修订和正式提交毕业项目。审核意见指导教师（签章）： 年 月 日专业负责人（签章）： 年 月 日指导教师评语：指导教师评分：指导教师签名： 年 月 日答辩专家组对毕业设计答辩评议及成绩评定： 答辩组长：

4、 （签章） 年 月 日毕业设计综合评分：学院毕业审核意见： 院长： （签章）年 月 日北京气象网站界面设计 目录摘 要6一、引言61.1选题背景61.2项目的目的和意义71.3开发工具的概述71.4项目的开发目标71.5项目的工作安排7二、项目需求分析82.1.可行性分析82.2.项目需求简介82.3.功能需求82.3.1.首页需求92.3.2第一个分栏目需求92.3.3第二个分栏目需求102.3.4第三个分栏目需求112.3.5第四个分栏目需求122.3.6第五个分栏目需求132.3.7第六个分栏目需求14三、项目设计153.1界面设计153.1.1开发工具概述153.1.2首页界面设计16

5、3.1.3第一个分栏目界面设计163.1.4第二个分栏目界面设计173.1.5第三个分栏目界面设计183.1.6第四个分栏目界面设计193.1.7第五个分栏目界面设计203.1.8第六个分栏目界面设计213.2项目设计小结22四、项目实现224.1页面制作234.1.1开发工具概述234.1.2首页制作234.1.3第一个分栏目界面设计244.1.4第二个分栏目界面设计254.1.5第三个分栏目界面设计264.1.6第四个分栏目界面设计284.1.7第五个分栏目界面设计304.1.8第六个分栏目界面设计314.2项目测试324.2.1页面链接测试334.2.2浏览器兼容性测试334.3项目实现

6、小结33五、总结335.1.研究过程中发现的问题335.2.项目存在的问题335.3.收获和体验34六、致谢34参考文献34北京气象网站界面设计摘 要北京气象网站界面设计主要分了7大块，也就是七个界面设计-首页界面、天气预报界面、天气实况界面、生活指数界面、气象百科界面、旅游界面、问卷调查界面等。从而介绍了北京气象网站界面设计的建设及其主要结构和静态网页内容。项目主要是用Photoshop设计其网页界面，其次，用Dreamweaver实现该界面设计的某些网页效果。我们计划把北京气象网站做成10月15号11月2号这段时间用来画北京气象网站的图。北京气象网站分为七大块：首页、天气预报、天气实况、生

7、活指数、气象百科、旅游、问卷调查，其中还不包括其子页。11月3号11月27号这段时间用来做北京气象网站的静态网页。其中天气预报页面需实现图片自动切换功能，下拉框拉下来一颗选择显示某某地区的天气情况。11月28号11月29号，两天时间用来最终修订。整理好Photoshop文件，及其素材。查看静态网页效果，确定最终排版。11月30号提交静态网站, Photoshop和素材12月1号12月29号论文编写，资料整理，论文排版，网站介绍12月30号12月31号最终修订和正式提交毕业项目。本项目将会偏向蓝色、紫色，因为着重于设计网页（画网页），所以静态网页只会做出某些效果。例如：图片自动切换或图片手动切换

8、；字体颜色变换；下拉选框，选择某地区；切换选项卡而画网页，布局明了易懂，功能齐全。关键词：界面设计 Photoshop Dreamweaver 静态网页一、引言1.1选题背景近年来，经济社会的发展，促进气象科技的进一步提高，气象对国民经济来讲，影响越来越重要，人们对气象的需求也越来越明显。中国气象局在气象事业发展计划的指导方针中就曾明确提出,气象事业未来发展的一个宗旨就是气象服务,而决策气象服务是气象服务的核心内容。 决策气象服务是具有中国特色的特殊气象服务。1.2项目的目的和意义本网站界面设计的实施将我局各项气象业务有机的联为一体,实现气象数据和气象服务产品的有机结合,为地方政府及各个部门提

9、供了一个现代化的决策气象服务平台。也使地方政府能较直观的看到各类气象服务产品,从而一定程度上提高了工作效率,提升了气象服务能力。1.3开发工具的概述 在本项目里运用了Photoshop画网页，先各部分布局，然后根据内容设计画布。在Photoshop画完网页后切片而得出的素材，Dreamweaver就根据其设计页面和素材而做出的网页，还有用js和jq达到图片自动切换等效果。AxureRP效果和Dreamweaver差不多，都是利用其做出网页和一些效果。1.4项目的开发目标 通过分析和设计北京气象网站界面设计，实现以下目标：（1）能够实现图片自动切换和手动切换（2）下拉框拉下选择（3）选项卡（4）

10、鼠标移入显示其地区天气1.5项目的工作安排我们组有一个组长，一个组员，一共有7个界面。所以组长做天气预报界面、天气实况界面、气象百科界面三个界面，并做其静态网页。组员做首页界面、生活指数界面、旅游界面、问卷调查界面四个界面和其静态网页。论文方面：相对应组员要写其项目设计、项目实现的部分，剩下的全部由组长写。10月15号11月2号这段时间用来画北京气象网站的图。北京气象网站分为七大块：首页、天气预报、天气实况、生活指数、气象百科、旅游、问卷调查，其中还不包括其子页。11月3号11月27号这段时间用来做北京气象网站的静态网页。其中天气预报页面需实现图片自动切换功能，下拉框拉下来一颗选择显示某某地区

11、的天气情况。11月28号11月29号，两天时间用来最终修订。整理好Photoshop文件，及其素材。查看静态网页效果，确定最终排版。11月30号提交静态网站, Photoshop和素材12月1号12月29号论文编写，资料整理，论文排版，网站介绍12月30号12月31号最终修订和正式提交毕业项目。二、项目需求分析2.1.可行性分析 可行性分析也称可行性研究，是网站踢倒查的基础上，针对此网页设计是否具备必要性和可能性，对其从技术、社会和经济等方面进行分析和研究，以避免投资失误。该网站的可行性分析包括以下内容。（1） 经济可行性：主要是对项目经济效益进行评价，本网站作为一个毕业项目，不需要任何经费。

12、（2） 技术可行性：主要分析技术条件是否完成设计和实现工作，是否满足开发者的需求。2.2.项目需求简介 项目是否符合实际，设计出来是否能做出其相关网页效果。2.3.功能需求 导航栏包括首页、天气预报、天气实况、生活指数、气象百科、旅游、问卷调查。2.3.1.首页需求首页主要以一个背景图为主，然后有一张北京地图，鼠标移入某地区就显示该地区的天气情况，还有一个导航栏。导航栏包括首页、天气预报、天气实况、生活指数、气象百科、旅游、问卷调查。导航栏字体鼠标移入时，颜色改变2.3.2第一个分栏目需求天气预报主要有一个图片自动切换和手动切换，下拉框拉下可以选择某地区，并显示其地区天气情况。天气预报包括北京

13、未来三天天气，北京旅游天气，北京六小时精细化预报，当前实况，预警与灾害，场馆预报等。2.3.3第二个分栏目需求天气实况主要包括北京现时天气，北京今天生活指数，北京实时空气质量，整点天气实况，周边地区天气。2.3.4第三个分栏目需求生活指数主要包括现在北京天气，美图抢先看，今日生活提示，热门景点。有一个图片自动切换，一些字体颜色变换效果。2.3.5第四个分栏目需求气象百科主要有搜索，图片百科，百科分类，百科视频，旅游百科，解答百科。其中搜索用了选项卡。2.3.6第五个分栏目需求旅游主要包括说走就走，旅游新闻，旅游景点推介，我和北京有个约会，旅游小百科。2.3.7第六个分栏目需求问卷调查主要包括投

14、票结果，调查分析，新闻调查，旅游调查，气候调查，天气调查，气象百科，服务评价。三、项目设计3.1界面设计3.1.1开发工具概述在本项目里运用了Photoshop画网页，先各部分布局，然后根据内容设计画布。其中运用了路径，剪切蒙版，图层样式，高斯模糊，羽化，不透明图。3.1.2首页界面设计首页界面首先是搜索一些相关材料，大概构思一个布局。其中导航栏的文字，用了投影。首页界面最终的效果图如下： 3.1.3第一个分栏目界面设计天气预报界面首先是搜索一些相关材料，大概构思一个布局。其中导航栏的文字，用了投影。未来三天预报中，用了内阴影和外阴影。天气预报界面最终的效果图如下： 3.1.4第二个分栏目界面

15、设计天气实况界面首先是搜索一些相关材料，大概构思一个布局。此界面用了内阴影和外阴影，渐变，透明度，内发光，羽化，高斯模糊等效果。天气实况界面最终的效果图如下： 3.1.5第三个分栏目界面设计生活指数界面首先是搜索一些相关材料，大概构思一个布局。此界面用了内阴影和外阴影，渐变，透明度，内发光，羽化，高斯模糊等效果。生活指数界面最终的效果图如下： 3.1.6第四个分栏目界面设计气象百科界面首先是搜索一些相关材料，大概构思一个布局。此界面用了内阴影和外阴影，渐变，透明度，内发光，羽化，高斯模糊等效果。气象百科最终的效果图如下：3.1.7第五个分栏目界面设计旅游界面首先是搜索一些相关材料，大概构思一个

16、布局。此界面用了内阴影和外阴影，渐变，透明度，内发光，羽化，高斯模糊等效果。旅游界面最终的效果图如下：3.1.8第六个分栏目界面设计问卷调查界面首先是搜索一些相关材料，大概构思一个布局。此界面用了内阴影和外阴影，渐变，透明度，内发光，羽化，高斯模糊等效果。问卷调查界面最终的效果图如下：3.2项目设计小结 北京气象网站界面设计总的来说，运用PS里羽化，高斯模糊，图层样式，滤镜，内阴影和外阴影，渐变，透明度，内发光等效果。四、项目实现4.1页面制作4.1.1开发工具概述 在本项目里运用了Photoshop画网页，先各部分布局，然后根据内容设计画布。在Photoshop画完网页后切片而得出的素材，D

17、reamweaver就根据其设计页面和素材而做出的网页，还有用js和jq达到图片自动切换等效果。AxureRP效果和Dreamweaver差不多，都是利用其做出网页和一些效果。4.1.2首页制作北京气象首页主要功能：1.显示北京地图，当鼠标移到地图上的某个地区时，显示该地区的天气情况。2.地图下面是各个功能模块的链接。首页页面的制作不是采用长篇幅的方式，而是采用比较简短的方式，可以一目了然，这样可以让人们更好的了解网站的主题。首页的特效是用AxureRP软件制作的，当预览首页时，页面中的“北京气象在线”主题在等待了1秒钟之后会以淡入淡出的方式出现，这种特效是用动态面板方式实现的；地图板块上显示

18、的是北京一部分地区，当鼠标经过地图上的某个地区时，会显示该地区一天的天气情况，当鼠标移出时则隐藏该地区的天气情况（以昌平为例），这种特效是用交互中的显示和隐藏的方式实现的；再者就是各个功能模块的链接，当鼠标经过各个功能模块的时候，字体会有颜色的变化，这种特效是用文字的元件属性做的。4.1.3第一个分栏目界面设计21天气预报主要功能：1.旅游天气运用图片自动切换和手动切换。2.下拉选框选择某地区，显示某地区天气，查看当前实况。3.精准6小时的天气情况4.1.4第二个分栏目界面设计54321天气实况主要功能：1. 时间，气压，风向。2. 各种生活指数。3. 空气质量情况。4. 24小时天气实时变化

19、。5. 周边地区的天气4.1.5第三个分栏目界面设计21生活指数主要功能：1.旅游天气运用图片自动切换。2.下拉选框选择某地区，显示某地区天气。生活指数页面的制作主要有某一地区（以昌平为例）未来几天的天气情况板块、今日生活提示板块（包括穿衣指数、感冒指数、路况指数、紫外线强度、洗车指数等）、美图抢先看板块和热门景点板块。生活指数页面的特效是用AxureRP软件制作的。昌平天气板块中，鼠标经过“今天”时，会有蓝色框显示；今日生活提示板块中的各项指数是根据当天的天气情况自动生成的，其中当鼠标经过“较冷”、“易发”、“良好”时，会有绿色框显示。昌平天气板块和今日生活提示板块中的特效是用交互中的显示和

20、隐藏的方式实现的；美图抢先看板块中的特效是用动态面板循环的方式来实现图片的自动切换；图片下方的文字则是用文字的元件属性来做特效，当鼠标经过文字时文字会变色，大小也会改变；热门景点板块中景区的名称的特效也是用文字的元件属性做的，当鼠标经过文字时文字会变色、变斜体、变粗体。4.1.6第四个分栏目界面设计654321气象百科主要功能：1. 运用选项卡。2. 各种百科分类。3. 图片查看天气情况。4. 天气视频。5. 旅游景点的天气。6. 提问气象问题，解答气象问题。4.1.7第五个分栏目界面设计旅游主要功能：1.旅游运用图片手动切换。2.下拉选框选择某地区，显示某地区天气。旅游页面的制作有图片板块、

21、旅游新闻板块、旅游景点推荐板块、我和北京有个约会板块和旅行小百科板块。图片板块的特效是鼠标经过右边的小图片时，在左边会显示相应的大图片，这种特效是用交互中的隐藏和显示实现的；旅游新闻板块中新闻的特效是用文字的元件属性实现的，当鼠标经过文字时，文字会变色、字体会变大；旅游景点推荐板块和我和北京有个约会板块中的特效是用交互中的隐藏和出现、文字的元件属性实现的，当鼠标经过图片时，图片四周会有边框出现，移出则隐藏；点击文字时文字会变色；旅行小百科板块中文字的特效是用文字的元件属性实现的。当鼠标经过文字时，文字会变色，字体会变大。4.1.8第六个分栏目界面设计问卷调查问卷调查分为好几种类型，当点击某问卷

22、调查的标题时，则进入投票选择页面进行投票，页面左上角是人们对各种类型问卷的关注的排行。问卷调查页面的制作有投票结果板块、调查分析板块、新闻调查板块、旅游调查板块、气候调查板块、天气调查板块、气象百科板块、服务评价板块。这个页面的特效都是用文字的元件属性完成的，鼠标经过时，文字会变色、字体变大等特效。4.2项目测试4.2.1页面链接测试 北京气象网站每个页面都有链接上，都逐一打开看过是否链接上。4.2.2浏览器兼容性测试 我们的静态网页用过IE浏览器，火狐浏览器，谷歌浏览器，360浏览器运行过，大致上效果都一样。4.3项目实现小结 在此项目构思时候的某些效果没有做出来，可能因为技术问题，想做出的

23、效果，却没做出来，所以我们忽略掉。就用了图片自动切换，手动切换，文字效果，下拉选项，鼠标移入显示地区天气。五、总结5.1.研究过程中发现的问题 在这次设计和实现中，设计的搭配颜色，预计效果，到了实现的时候有一些是做不出来的。所以说理想很骨感，现实很丰满。有一些在Dreamweaver里实现不了的，我们都用AxureRP的交互去实现，虽然有点粗糙，但好在还能实现其效果。5.2.项目存在的问题 北京气象网站界面设计是一个界面设计的网站，没有后台，而且我们也只是做出其静态网站。我们的技术有点不到家，所以项目存在的问题也挺大的。并且有一些效果做不出来，也存在参照别的网站的可能。因为设计知识点太多，我们

24、本来还打算做出更多的效果，可是能力问题，代码问题，所以有一些效果我们放弃了。5.3.收获和体验在此项目开始时，真的感觉没有什么想法和头绪。后来看多几个在网上找的天气网站，和组员讨论下，大概就有了一些念头。我们就开始收集材料，确定项目方向，你画几个页面，我画几个页面，你做几个网页，我做几个网页。有时候看看对方的网页画得怎样，颜色搭配好不，排版好不，还欠缺什么。通过本次毕业设计中，我们都掌握了，Photoshop软件的应用；Dreamweaver的应用：Div+css，js，jq；AxureRP软件的交互体验。也是因为这次毕业设计，令我感到，团队精神是多么重要，沟通是必须的。在这过程中有过吵闹，争

25、执，到了最后的最后还是慢慢磨合。我们的友情也越来越好。六、致谢感谢一直以来都在支持我的父母，如果没有你们，就没有现在的我。谢谢您们把我生下来 ，养育成人。朋友们的支持也是让我努力向前的动力，勇往直前。即系遇到再多的困难，再多的磨难，转身看背后，你们还是在那里。默默支持我、鼓励我。朋友，一声感谢都不能表达我对你们的感谢。还有就是谢谢我们的老师，老师总是在我们有困难的时候出现，雪中送炭的现象是经常有的。感谢和我同居三年的舍友们，好舍友一起走哦参考文献1九州书源.Dreamweaver CS5 网页制作.北京：清华大学出版社，2012.2陈承欢.JavaScript+jQuery 网页特效设计实例教程.人民邮电出版社，2013.3珠海市气象局4中国天气网 5马淑俊.拉萨市决策气象服务系统设计与服务.