毕业论文静态网毕业设计说明书.doc

《毕业论文静态网毕业设计说明书.doc》由会员分享，可在线阅读，更多相关《毕业论文静态网毕业设计说明书.doc（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、_电影网站I网站的设计与实现系 （院）： 软件与服务外包学院 学生姓名： 专业班级： 学 号： 指导教师： 2017年3月声 明本人所呈交的 电影网站I网站的设计与实现 ，是我在指导教师的指导和查阅相关著作下独立进行分析研究所取得的成果。除了在文章中已经注明引用了的内容外，本论文不包含他人发表或已经撰写过的研究成果。对本文的研究做出重要贡献的集体和个人，本人均在文中已经作了明确说明并表示谢意。作者签名： 日 期： 2017.3 摘要本设计主要针对功能、板块等方面进行阐述一个网站的设计与实现。语言主要基于html和css语言的web前端设计开发，该项目开发的主要目的是为了满足日渐趋于专业化的网络

2、环境，让人群在电影文化中能够更加便捷精准的接触精彩的电影资讯，解决人们找好电影难的问题，提高人们的效率。此网站提供了明确的分类和解析，能够让用户满足其需求。这样一个网络平台能够让喜欢的人利用它找到兴趣相投的人和电影作品，同时也在制作过程中对页面布局、颜色、框架上进行进一步的学习了解并慢慢了解html语言。关键词：html ；css ；静态页面。 AbstractThis design mainly aims at the function, the plate and so on aspect to elaborate a website design and the realization.

3、Language is mainly based on html and css language web front-end design and development, the main purpose of the project development is to meet the increasingly professional network environment, so that the crowd in the film culture can be more convenient and accurate contact with the wonderful film

4、information,Find the film difficult problem, improve peoples efficiency.This site provides a clear classification and analysis, allowing users to meet their needs.Such a network platform to allow people like to use it to find interested people and film works, but also in the production process on th

5、e page layout, color, frame to learn further understanding and slowly understand the html languageKey Words: html;css；Static page目 录 16_一、引言随着网络的迅速发展，网络资讯成了一个重要的方向，而电影又是其中以一个重要的分支，网站将将资讯内容准确有序的提供给浏览者，这样让浏览者能够快速并且准确的找到自己想要的内容以及相关信息。还将电影的发张历史进行了简单的介绍，让想了解的人对其发展史有基本的了解。网站主要分为首页、电影文化内容能够很好的展示资讯内容，让用户体验更

6、好的资讯。本网站主要是对新上映的电影以及得到高评价的电影进行推荐与赏析，总体上是实现在线了解电影相关信息的网站。如何布局，设置板块，布置内容与提高体验感，将是要做的工作内容。本网站在建设中使用的主要是通过html、css布局和js特效来实现，这样实现效果简洁直接，易于维护，对网站的建设有很大的好处。二、需求分析通过对市场调查分析，现在文化领域发展迅速，生活水平显著提高，电影行业也是水涨船高，再加上网络的兴起，信息变得更加快捷，这一切都更是加速推动了文化事业的发展，但数量增多的同时也有不好的因素在里面，鱼龙混杂的市场急需快捷简单效率高的资讯信息，网络与影视的结合是必然的趋势。而市场上有的几家已经

7、形成品牌且有一定的实力，但是目标不够鲜明。所以I电影网站资讯就显得尤为重要。通过对网站的分析，我们需要做到的是利用网络的便捷与低成本。同时打造品牌，提高知名度。紧跟潮流，提高用户体验感以及网站，这样无疑能够最大程度的提高网站的竞争能力。三、开发工具与测试网站模块主要为首页简介以及内页详情介绍，以这些模块为基准对网站的详细内容进行深入的介绍，网络在线的形式能够让用户更加便捷更精准的得到想要的信息内容。开发网站主要分为设计与实现两个部分，与之对应的开放软件分别为photoshop和，sublime、text。photoshop是一款图片处理软件，他的功能主要是在本次设计中起到的作用主要有：在未开始

8、时ps设计首页效果图，在后期需要banner与各种图片时只需要从效果图中复制出即可，因为ps是有图层的，这样极大的提高了网站设计的工作效率。这样也能够让处理的图片与网站更好的联系起来，网站看起来更完善。Sublime是一款具有强大功能的跨平台编辑器，代码缩略图，代码段，python插件，并且拥有多个窗口的开发软件。使用方便，在本次设计中该开发软件很好的提高了工作效率，编写代码中多个窗口以及标签，和拼写检查功能让自己少走了不少弯路，也降低了编写的难度。在设计框架上也可以根据ps设计的框架很好的契合。主要用作html和css的编辑。运行测试软件为chrome和opera 。四、 主体设计（一）页面

9、设计1、头部设计为了使功能更加全面，板块主要分为：网站首页、影视文化、最新上映、电影分类、排行榜、热门电影、团队介绍、联系我们八个板块。结构图如图4-1 所示网站首页电影文化最新上映电影分类联系我们团队介绍热门电影排行榜科幻恐怖爱情悬疑喜剧剧情励志图4-1 结构图LOGO导航Banner走进I电影（电影文化、以及历史介绍）电影分类最新热门电影底部导航版权图4-2 首页布局框架Index页面也就是首页面，是最重要的，这个页面需要完整的展示出整个网站的大体框架，内容，风格以及网站的简单介绍，电影文化的页面是电影的产生、发展史等等信息。让用户对电影有个大概的了解，而不是简单的认为电影就是娱乐，其实电

10、影是一门艺术。最新上映模块是目前影院正在上映的电影，该模块有时效性，需要及时更新。为的是让用户在最短的时间得到最新的资讯。电影分类是一个类似于库的东西，对所有内容进行整合并分类，然后对相应的内容详细介绍以及评价。排行榜则是通过国际上有公信力的奥斯卡等组织对电影进行评论颁奖并进行整合的一个板块，主要是历年奥斯卡奖以及提名奖的作品；团队信息是针对参与此次该网站开发的人员的介绍；联系我们则是联系方式以及详细地址，是用以防止网站出现问题举报联系进行维护的渠道。2、界面设计整个网站的大框架都将照着首页的框架结构来布置。所以首页的框架是整个网站的最重要的地方，网站采用DIV+CSS进行布局，布局框架如图4

11、-2所示：LOGO导航Banner二级导航正文联系方法底部导航版权信息图4-3 首页布局框架子页面保留了首页的LOGO导航以及banner在下面重新布局，左边设二级导航以及联系方式两块，联系方式简单明了名称地址以及电话号码。这样能够突出右边两块模块整合到一起形成现在的正文部分。正文部分更加突出，让用户更简单明了的看清楚内容如图4-3所示：子页面采用普通的布局，由上而下依次是LOGO、导航、banner、二级导航、联系方式、正文部分、下部导航和版权信息。正文部分包括电影的历史，中国电影发展史，详细介绍，电影的详细介绍，以及联系地址百度地图名片等等信息。3、内部代码结构DIV.CSS首页用的是三字

12、型布局模式，如图4-4所示：HeaderBannerContentJianjiefenleizuixinfooter图4-4首页部分DIV为： CSS样式如下：header height:30px; line-height:30px;background-color:#ebebeb; border-bottom:1px solid #c5c2c2;.banner width:100%; height:344; margin:0px auto;position:relative;content margin:0 auto; padding-bottom:20px; width:1000px;te

13、xt-indent:35px;Jianjie liwidth:291px; height:310px; padding:16px 13px 0; background-color:#FFFFFF; overflow:hidden; border: 1px solid #beccc3;fenlei height:210px;background: url(./images/fl_bg.jpg) no-repeat 108px 76px #fff; zuixin li margin:0 2px; float:left; _display:inline; overflow:hidden; text-

14、align:center; .footer height:130px; background-color:#FFFFFF; padding-top:14px;4、子页面如图4-5：HeaderBannerContentleftbarrightbarfooter图4-5子页面布局子页部分DIV为： CSS样式如下：header height:30px; line-height:30px;background-color:#ebebeb; border-bottom:1px solid #c5c2c2;.banner width:100%; height:344; margin:0px auto;

15、position:relative;content margin:0 auto; padding-bottom:20px; width:1000px;text-indent:35px;leftbar float:left; width:270px;rightbarfloat:right;width:712px;background-color:#fff;border: 1px solid #cccccc;.footer height:130px; background-color:#FFFFFF; padding-top:14px;（二）网站的基本功能1、首页介绍网站刚打开便是首页，首页的基本

16、功能是对网站的内容有一个简单的介绍，看首页能够对整体的布局以及模块的位置大概的了解，能够在首页基本了解内容和网站的风格。网站需要让客户有好的体验，能够让用户最快的了解信息并获取信息。网站整体以墨绿色和白色为基本色调，这样的资讯网站给人的感觉是更加沉稳，更加可靠，在边框等装饰上均采用简洁的直线边，整个网站的风格给人的感觉就是干练，直接的风格，使得网站整体风格也是这样契合。网站首页主要分为头部、连接部分、底部三个部分在网站上的LOGO是有中国汉字“I电影”的宋体以及绿色设计而成的，简洁明了，突出主题。首页的banner部分主要是展现最新的电影，banner图片尺寸大，占屏幕比例大，主题明确，很容易

17、突出内容，头部导航与底部导航相互对应，保证用户不会因为找导航而失去耐心。主体部分也分为三块，一是对电影的简单介绍，二是电影分类，分别用大家耳熟能详的电影封面作为链接，上下波动的形式让人看起来更有感觉，根据调查，用户需要资讯网站很大一部分是需要这个功能，在这里可以选择想要的分类寻找不同的类型电影。另一部分是最新的热门电影，这里通过六张图片滚动显示的效果，展现的都是最新的在影院正上映的影片，能够让用户很好的避免不喜欢的电影类型。提高用户体验感。图4-6网站手页面效果展示图Banner图片采用的是一张大图轮播的形式，间隔时间为十秒，下面走进I电影部分则是电影文化的三个部分，分类则是波浪式上下，以图片

18、为链接分类页面，可以直接进入内页详情页面，在下面是滚动的六张图片，还有滚动按钮具体如图4-6：图4-7影视文化页面效果展示2、电影文化页面介绍正文电影文化主要分为电影的介绍，由来，发展历史等通过文字简单直接的描述，虽然看似枯燥，不过能够很大程度的写清楚相关信息，页面主体部分用无序列表实现文化栏的二级导航，点击导航在右侧显示纯文本的形式显示详细内容。如图4-7所示：3、新片上映页面介绍左侧部分同上，采用无序列表展示二级导航与联系方式，与其他页面不同的是右边正文部分变成图片形式展示，同时起到分类作用，最新上映影片数量不会很多，从图片封面上可以看出类型名称，可以准确的定位用户想要的影片，每个图片又是

19、一个链接，打开则是对应影片的详细介绍。如图4-8所示图4-8新片上映展示效果图4、电影分类页面子页面是以首页为模版部分地方进行重新设计，banner高度调低，给下面正文流出更多的余地，在左侧设置二级分类和联系方式，右边的正文高度不设限制，这样有利于内容展示的完整性，上面保留首页的导航功能，导航功能为了保证用户能够准确迅速的转换到想要的页面，左侧的二级分类能够让用户在浏览的同时能后选择其他分类的内容而不用重新回到首页。图4-9电影分类页面展示页面中的正文是图片与文字共存的形式，保证正文的可读性可完整性，用户可以在留言处留言意见和建议，可以提高与用户之间的互动与网站内容优化与提升，用户可以在左侧的

20、耳机导航中选择分类。如此一来，让用户也有参与度，提高对网站的关注度。如图4-9所示：5、热门佳片页面该页面展示历年奥斯卡榜单得奖影片，这样肯定了来源电影的质量，这样可以有效的避免质量稂莠不齐的现象，正文部分可以直接点击海报来选择影片，并在该区域做了较为详细的展示在内容中，文字有默认的黑色和绿色，绿色则是电影链接制作公司的链接。如图4-10所示：4-10热门电影页面6、联系我们页面页面正常的使用高度偏小于首页的banner图片，左侧的二级导航可以点击选择分类。下方左侧无序列表排序联系方式，正文部分用纯文本显示联系方式，和百度地图的地图名片功能，用户可以在地图中调整大小等，该功能需要联网才能够显示

21、效果。如图4-11所示：图4-11（三）JAVASCRIPT特效滚动轮播效果首页有两个轮播效果，一个是banner另一个是下方的最新热门图片，banner是单张大图，滚动时间为10s主要展现内容是最新电影以及网站风格，下方轮播则是六张小图，对应影院正上映的最新影片，显示四张图，滚动显示如图4-11、4-12图4-11首页banner轮播图图4-11首页最新热门轮播图2、百度地图名片可以更加直观的看到地理位置如图4-12：图4-12百度地图名片五、 总结在整个毕业设计作品的过程中，从动笔到结束一个多月结束了，在这一段时间里，遇到很多问题，同时也解决了很多问题。从刚开始无从下手到后来的修修改改，一

22、步一个脚印的走过来，从中不仅仅是学到了针对设计本身的技能，更多的是在此之外的学习能力与团队之间的协作学习能力的提升。在这次毕业设计之前完全靠实习工作是的一点经验来考虑网站的布局设计等等再等到真正自己动手的时候才发现自己当初的理解不够透彻，不够全面。再加上自己没有建设整个网站和开发流程的经验，所以在动手的时候难度很大，不得不利用很多书本以外的东西，在线课堂给我了很大帮助，在线视频能够很清楚的讲一些内容。在掌握了基本开发步骤和方法后还在设计网站风格规划等方面学习了很多，这些都使得网站的建设能够顺利完整的被完成。网站从无到有的规划开发过程过程能够感觉这不是简简单单的流水线式工作，需要一定的知识储备，

23、都需要专业知识，缜密的思维和分析问题的能力来支持。这一些都是在实战中学习，学习中进步。致谢在此次I电影网站毕业设计制作过程中，指导老师杨小英给予的理论以及实际操作中的指导，在111老师的帮助下，毕业设计和论文才得以顺利完整的完成，在他的耐心指导下，让我学到了很多新的知识。在此外，还有同学以及实习同事给予的帮助，感谢他们提供的资料以及论文相关文献，解答我的疑惑和问题，再次一并表示感谢。参考文献1任昱衡. HTML+CSS网页设计详解M.北京：清华大学出版社，20132陈会安. JavaScript 基础与实例教程M.北京：中国电力出版社，20093乘季.Flash 基础与实例教程M.北京：北京希望电子出版社，20104杨选辉. 网页设计与制作教程M.北京：清华大学出版社，20095温谦.HTML+CSS网页设计与布局从入门到精通M.北京人民邮电出版社，20086 朱莉梅.洛尼HTML、CSS和JavaScript入门经典M. 北京：人民邮电出版社，20087吴涛.网站全程设计技术M.北京：清华大学出版社，20098任学文，范严.网站设计与制作M.北京：中国科学技术出版社，20089武创，王慧.网页设计探索之旅M.北京：电子工业出版社，200710 刘西杰 张婷.HTML CSS JavaScript 网页制作从入门到精通 M.北京：人民邮电出版社，2016