电影网站I网站的设计与实现-毕业设计

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.La

3、nguage 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 in

4、formation, 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 t

5、he page layout, color, frame to learn further understanding and slowly understand the html languageKey Words: html;css ; Static page TOC o 1-5 h z 一、引言 1二、需求分析 1三、开发工具与测试 1四、主体设计 1（一）页面设计 11、头部设计 22、界面设计 33、内部代码结构DIV.CSS 44、子页面如图4-5: 5（二）网站的基本功能 61、首页介绍 62、电影文化页面介绍 83、新片上映页面介绍 94、电影分类页面 105、热门佳片页面 1

6、06、联系我们页面 11（三）JAVASCRIPT1效 12滚动轮播效果 12五、总结 14一、引言随着网络的迅速发展，网络资讯成了一个重要的方向，而电影又是其中以一个重要 的分支，网站将将资讯内容准确有序的提供给浏览者，这样让浏览者能够快速并且准确 的找到自己想要的内容以及相关信息。还将电影的发张历史进行了简单的介绍，让想了 解的人对其发展史有基本的了解。网站主要分为首页、电影文化内容能够很好的展示资讯内容，让用户体验更好的资 讯。本网站主要是对新上映的电影以及得到高评价的电影进行推荐与赏析，总体上是实 现在线了解电影相关信息的网站。如何布局，设置板块，布置内容与提高体验感，将是 要做的工作

7、内容。本网站在建设中使用的主要是通过 html、css布局和js特效来实现，这样实现效 果简洁直接，易于维护，对网站的建设有很大的好处。二、需求分析通过对市场调查分析，现在文化领域发展迅速，生活水平显著提高，电影行业也是 水涨船高，再加上网络的兴起，信息变得更加快捷，这一切都更是加速推动了文化事业 的发展，但数量增多的同时也有不好的因素在里面，鱼龙混杂的市场急需快捷简单效率 高的资讯信息，网络与影视的结合是必然的趋势。而市场上有的几家已经形成品牌且有 一定的实力，但是目标不够鲜明。所以I电影网站资讯就显得尤为重要。通过对网站的分析，我们需要做到的是利用网络的便捷与低成本。同时打造品牌， 提高知

8、名度。紧跟潮流，提高用户体验感以及网站，这样无疑能够最大程度的提高网站 的竞争能力。三、开发工具与测试网站模块主要为首页简介以及内页详情介绍，以这些模块为基准对网站的详细内容 进行深入的介绍，网络在线的形式能够让用户更加便捷更精准的得到想要的信息内容。开发网站主要分为设计与实现两个部分，与之对应的开放软件分别为photoshop和, sublime、text。photoshop是一款图片处理软件，他的功能主要是在本次设计中起到的 作用主要有：在未开始时ps设计首页效果图，在后期需要banner与各种图片时只需要 从效果图中复制出即可，因为ps是有图层的，这样极大的提高了网站设计的工作效率。 这

9、样也能够让处理的图片与网站更好的联系起来，网站看起来更完善。Sublime是一款具有强大功能的跨平台编辑器，代码缩略图，代码段，python插件，并且拥有多个窗口的开发软件。使用方便，在本次设计中该开发软件很好的提高了工作效率，编写代码中 多个窗口以及标签，和拼写检查功能让自己少走了不少弯路，也降低了编写的难度。在 设计框架上也可以根据ps设计的框架很好的契合。主要用作 html和css的编辑。运行测试软件为 chrome和opera。四、主体设计 （一）页面设计11、头部设计为了使功能更加全面，板块主要分为：网站首页、影视文化、最新上映、电影分类、 排行榜、热门电影、团队介绍、联系我们八个板

10、块。结构图如图4-1所示图4-1结构图LOGO导航Banner走进I电影（电影文化、以及历史介绍）电影分类最新热门电影底部导航版权图4-2首页布局框架Index页面也就是首页面，是最重要的，这个页面需要完整的展示出整个网站的大体框架，内容，风格以及网站的简单介绍，电影文化的页面是电影的产生、发展史等等信息。让用户对电影有个大概的了解， 而不是简单的认为电影就是娱乐，其实电影是一门艺术。最新上映模块是目前影院正在上映的电影，该模块有时效性，需要及时更新。为的 是让用户在最短的时间得到最新的资讯。电影分类是一个类似于库的东西，对所有内容 进行整合并分类，然后对相应的内容详细介绍以及评价。排行榜则是

11、通过国际上有公信 力的奥斯卡等组织对电影进行评论颁奖并进行整合的一个板块，主要是历年奥斯卡奖以及提名奖的作品；团队信息是针对参与此次该网站开发的人员的介绍；联系我们则是联 系方式以及详细地址，是用以防止网站出现问题举报联系进行维护的渠道。2、界面设计整个网站的大框架都将照着首页的框架结构来布置。所以首页的框架是整个网站的最重要的地方，网站采用 DIV+CSS!行布局，布局框架如图4-2所示：子页面保留了首页的LOGB航以及banner在下面重新布局，左边设二级导航以及 联系方式两块，联系方式简单明了名称地址以及电话号码。这样能够突出右边两块模块 整合到一起形成现在的正文部分。正文部分更加突出，

12、让用户更简单明了的看清楚内容如图4-3所示：子页面采用普通的布局，由上而下依次是 LOGO导航、banner、二级导航、联系方 式、正文部分、下部导航和版权信息。正文部分包括电影的历史，中国电影发展史，详 细介绍，电影的详细介绍，以及联系地址百度地图名片等等信息。3、内部代码结构DIV.CSS首页用的是三字型布局模式，如图 4-4所示:HeaderBannerContentJianjiefenleizuixinfooter图4-4首页部分DIV为： csS羊式如下：header height:30px;line-height:30px;background-color:#ebebeb;bord

13、er-bottom:1px solid #c5c2c2; .banner width:100%;height:344;margin:0px auto;position:relative;content margin:0 auto;padding-bottom:20px;width:1000px;text-indent:35px;Jianjie liwidth:291px;height:310px;padding:16px 13px 0;background-color:#FFFFFF;overflow:hidden;border: 1px solid #beccc3;fenlei height

14、:210px;background: url(./images/fl_bg.jpg) no-repeat 108px 76px #fff;zuixin li margin:0 2px;float:left;_display:inline;overflow:hidden;text-align:center; .footer height:130px;background-color:#FFFFFF;padding-top:14px;4、子页面如图4-5:HeaderBannerContentleftbarrightbarfooter图4-5子页面布局子页部分DIV为： csS羊式如下：heade

15、r 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;text-indent:35px;leftbar float:left;width:270px;rightbarfloat:right;width:712px;background-co

16、lor:#fff;border: 1px solid #cccccc;.footer height:130px;background-color:#FFFFFF; padding-top:14px; （二）网站的基本功能 1、首页介绍网站刚打开便是首页，首页的基本功能是对网站的内容有一个简单的介绍，看首页 能够对整体的布局以及模块的位置大概的了解，能够在首页基本了解内容和网站的风 格。网站需要让客户有好的体验，能够让用户最快的了解信息并获取信息。网站整体以墨绿色和白色为基本色调，这样的资讯网站给人的感觉是更加沉稳，更 加可靠，在边框等装饰上均采用简洁的直线边，整个网站的风格给人的感觉就是干练，

17、 直接的风格，使得网站整体风格也是这样契合。网站首页主要分为头部、连接部分、底部三个部分在网站上的LOG更有中国汉字“I电影”的宋体以及绿色设计而成的，简洁明了，突出主题。首页的 banner部分主要 是展现最新的电影，banner图片尺寸大，占屏幕比例大，主题明确，很容易突出内容， 头部导航与底部导航相互对应，保证用户不会因为找导航而失去耐心。主体部分也分为三块，一是对电影的简单介绍，二是电影分类，分别用大家耳熟能详的电影封面作为链 接，上下波动的形式让人看起来更有感觉，根据调查，用户需要资讯网站很大一部分是 需要这个功能，在这里可以选择想要的分类寻找不同的类型电影。另一部分是最新的热 门电

18、影，这里通过六张图片滚动显示的效果，展现的都是最新的在影院正上映的影片，能够让用户很好的避免不喜欢的电影类型。提高用户体验感爱电影T电影越幅|出TH-lr如r品至/，隹怫融ErwjE-mw.日时 e 元.阚=!a13啊至泗B%当.EtttRj, 登将fErF,月&，丁口篇后把班I碇科|新理ftfri融修圈的仙对gH E 魂居加:& Al K抖专即 XAKkmkXHCiAXUIst -图4-6网站手页面效果展示图娅则上映分龚畀由精酷门殖团队介明Banner图片采用的是一张大图轮播的形式， 间隔时间为十秒，下面走进I电影部分 则是电影文化的三个部分，分类则是波浪式上下，以图片为链接分类页面，可以直

19、接进 入内页详情页面，在下面是滚动的六张图片，还有滚动按钮具体如图4-6 :爱电影-1电影支优，简介文化卜撞尾瞬防式3341： XXX 5?: noct卑芸;Q5-I2-raiowc联:SXXXS同社:wwwlIdhi客.：由闻0页*愚咽化掰败北的特在1EJ盯性际1口卧性 制J1茏丽口眸甄.阪原西蜘S5月.町京四的M在F状的慢临能少文坯千日内修上的的石. 1*能期* 争砌.球内1戏6砧*咐杜得据财.tmre 丽目.mwir s.五*巴 良惠于制图曲回断明三目 啮的同.瓦莅丘可的推出面:,堵端s座蚊相猊西做町心 里对乳 冷帕贮世痢至世异第EhM也不日七部LiELAd阳中英国演周,相国脾殿正在道窿

20、府:” 的韩叮与寻貌zsmt.物及性，明窿.期更曰叠电 田子能事的十睢.里曜观方目右表诬网客犯崇西腻上硝应亍 贬! .而费茸晒量的 罩建.雏 315窕接节日商颦叫般里0 K净品.丽丽禺理，甘和於M他文 说我蜘值的侬.打盘建立耨可立阳春工版的国口录.国二.诉辰金成岩健侬:磔J*fl特&L 啊.血_三一星期 壬加2刍叫!：帮lift不同暨iH%制6嘉1!电T麻 . !仔埴t证孑能政1处言及用稿E*Mil%税号毗黑图飒耳国.它逃过!(1%砒源喇力方法存1的帆耳看有聋性用于A的用门M百富.程克 40%宽.蜕*名磔朝HF现利的习电它配勒鬻.毗士文字, MSU豆 研窜.艮那!捌坳M.防 哥皿孙用人性.隹:

21、隹W7MEA.薛芟.生存的西曲脸知主话.记愿睨.啊爸I里.让融收，昵化理厮王藏平 胃和附的认领军SL宙就赎购国蝌,格I钿除了X丸It王.氮整.=.禽普N福巢性，并把后HUM瞪在目贬时。T隗贿道词快事钊I引了更亲三触之斌女出注JUI相当皿电 X史不审于思垢.工题史函变.的型A的里昧而微妊硒R ,整嘀的 lAXR.静史B骂隧去了展诰文字域面哨 f 复鼠 面吃延，3色鼻了直不晴无丽乐玉*L卓抵恒安累 他S冉侬晶借M *了爱乐融.五日握& .辱柝5号脸曲型盗画事来.塞妥交aura物市值性和导啦 同于匿:融本.呼.苔的导向性，物注片面1*既 7,胡亍人H毗上到飞双告.傅的盟尊苴百艮夫意墨上代.了照次北

22、塞视交史之例UW触 光日 常如志*1：持鲍w川两瞳视王目炯柿布甥了M芭稚豆咽助ttrW更名板 W .硒明,送 用顺世界JTT3匕T*虏！，七舐在一*三图黑天同嗨S.周彻艳叵下目的认田无溟广丽思虎融.制律:槌按 变了王加组E*具次,白亍总侬玷ME募性 之忱都E和砥南苜较.翎fW囱回那苣田* L而且量研已3二而醉羽瓶Q忒烟电L鳏伸M .叫t.的瞧舞阪日的，内木H逢帕轴.HKStt . 任而的d EM. UM，I翼坏 巾 痒行愣四 sv叵a介端的H弟aCopyright 2D15-2aifi M 用ght,盟xmd 运财，XXXX皿：KOCX图4-7影视文化页面效果展示2、电影文化页面介绍正文电影文

23、化主要分为电影的介绍，由来，发展历史等通过文字简单直接的描述， 虽然看似枯燥，不过能够很大程度的写清楚相关信息，页面主体部分用无序列表实现文化栏的二级导航，点击导航在右侧显示纯文本的形式显示详细内容如图4-7所示：3、新片上映页面介绍左侧部分同上，采用无序列表展示二级导航与联系方式，与其他页面不同的是右边 正文部分变成图片形式展示，同时起到分类作用，最新上映影片数量不会很多，从图片 封面上可以看出类型名称，可以准确的定位用户想要的影片，每个图片又是一个链接， 打开则是对应影片的详细介绍。新片上蒙胞5更姚即上勤彼新更】器殴理蔚期T 4圻片上亚西绛脂!:社蹶立新片上H生旺3如图4-8所示明朗五物:

24、XXfflHj强疑3mQlDCC M AZM JIAHg匿1:侬电营,馆DmccoaQQ典?丑电! ：时 M22E版I加I甘I的必到G节阐得的瞬Ceg-t&JDjS- 2Ck Al Riglw Rtwmw 弱为烟OOCOOOOOM烟00盘地：JtlQKCB维期他职网图4-8新片上映展示效果图4、电影分类页面子页面是以首页为模版部分地方进行重新设计，banner高度调低，给下面正文流出 更多的余地，在左侧设置二级分类和联系方式，右边的正文高度不设限制，这样有利于 内容展示的完整性，上面保留首页的导航功能，导航功能为了保证用户能够准确迅速的 转换到想要的页面，左侧的二级分类能够让用户在浏览的同时能

25、后选择其他分类的内容 而不用重新回到首页。瞬瓦SfCSM HWtS酹门 胃胃 同鸭 联JS我门如曼ns,肘心幻口里赛境之秒日黑幕制H河沪曲件号当报信吟：n 你WLWJT酬副修昵联的笆：mxxE乱.xxxX屋:E 12122-xmjax举同址.wwwLXXKccmE调：期侬用班【Ml丽1|和|01缁储倒转时1笈用河枕 C Z0L5- 2016 Al 眄电 口一出五百 WQfflXXXJMXXXXXXX图4-9电影分类页面展示页面中的正文是图片与文字共存的形式，保证正文的可读性可完整性，用户可以在 留言处留言意见和建议，可以提高与用户之间的互动与网站内容优化与提升，用户可以 在左侧的耳机导航中选择

26、分类。如此一来，让用户也有参与度，提高对网站的关注度。 如图4-9所示：5、热门佳片页面该页面展示历年奥斯卡榜单得奖影片，这样肯定了来源电影的质量，这样可以有效 的避免质量稹莠不齐的现象，正文部分可以直接点击海报来选择影片，并在该区域做了 较为详细的展示在内容中，文字有默认的黑色和绿色，绿色则是电影链接制作公司的链10如图4-10所示:铺 wiiiniirnir帽旗俎:90、xm3 ：C5U-bjohh赖剧网跟理:必如三苞要用百；I我 酬|脸幽 施 烹.”庭初困叫心c罚”-我汕 阿依RbohJ甑qKBflKHXnOSXBOOS唠 mmoKftXXffl4-10热门电影页面6、联系我们页面页面正

27、常的使用高度偏小于首页的 banner图片，左侧的二级导航可以点击选择分 类。下方左侧无序列表排序联系方式，正文部分用纯文本显示联系方式，和百度地图的 地图名片功能，用户可以在地图中调整大小等，该功能需要联网才能够显示效果。如图4-11所示：11爱电影-I电影向师变化 鞘_Lg婚花喟国:宅赛稔匕国XKXXXXXXxXXJOOOOCOf焙共印出PBA : XJWCXE&.nsaE值! -1WMW 砥篌耳5顺京独IUAA：ci:叮 M01an曜由fl E 国版巾包.,ArvaJmhtiM H用事崂部拜沪身 羹 曲直港好 出界制:*MLtUR0熊健婚FVK由哪牒&T JtML.我0二，5等4J *n

28、t0mxmii G.Jir*aVK-T | 葺砧 | I | 口 | 民MM 在工网Copprifr 堂 却,-劭中匕| Rqg Rn?d 屋附IT xxxxxxigwDnnxx：x01: JIXJiXKXKKKMOCCM翻图 4-11（三）JAVASCRIP特效滚动轮播效果首页有两个轮播效果，一个是 banner另一个是下方的最新热门图片，banner是单 张大图，滚动时间为10s主要展现内容是最新电影以及网站风格，下方轮播则是六张小 图，对应影院正上映的最新影片，显示四张图，滚动显示如图 4-11、4-12图4-11首页banner轮播图12图4-11首页最新热门轮播图2、百度地图名片可以

29、更加直观的看到地理位置如图 4-12 :地图名片学生广场IK（P）华国万家;1苏州旅希与财母 u高盟-教学带自站芮州旅第曷财捶高 田再2业技术学校0惠和档国际教音园体I * J肓中心肝激隹苏州博萨与财援-扁即买聆买洞楼戏清街八芥州工业职业技与术学院体宜馆“苏州工业职业技J术学院-教学CD幅面快递超市T 蕃州工业股业技术 学院信息工程系0梅家的文丰鬟厅彩虹寿野文正学院学生沿海4号楮卜方州*国动值二揖州大学 一文正学院小君板家0机电工粗学G芬州工业职业技术学曝电子棒+ 1赤州国际教育园南区&越圈大“2015 Baidu - Data Navfnfo ”迥户.& 道道查看大图ED，国苒州吴中英哲爵士牛排，.、女搬上*恬七电石湖美木直图4-12百度地图名片1