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 th
3、e realization.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 w
4、onderful film 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 product
5、ion process on the page layout, color, frame to learn further understanding and slowly understand the html languageKey Words: html;css；Static page目 录一、引言 .1二、需求分析 .1三、开发工具与测试 .1四、 主体设计 .1（一）页面设计.21、头部设计 .22、界面设计 .23、内部代码结构 DIV.CSS.44、子页面如图 4-5：.5（二）网站的基本功能.61、首页介绍 .62、电影文化页面介绍 .73、新片上映页面介绍 .84、电影分类页
6、面 .95、热门佳片页面 .96、联系我们页面 .11（三）JAVASCRIPT 特效 .11滚动轮播效果 .11五、 总结 .131一、引言随着网络的迅速发展，网络资讯成了一个重要的方向，而电影又是其中以一个重要的分支，网站将将资讯内容准确有序的提供给浏览者，这样让浏览者能够快速并且准确的找到自己想要的内容以及相关信息。还将电影的发张历史进行了简单的介绍，让想了解的人对其发展史有基本的了解。网站主要分为首页、电影文化内容能够很好的展示资讯内容，让用户体验更好的资讯。本网站主要是对新上映的电影以及得到高评价的电影进行推荐与赏析，总体上是实现在线了解电影相关信息的网站。如何布局，设置板块，布置内
7、容与提高体验感，将是要做的工作内容。本网站在建设中使用的主要是通过 html、css 布局和 js 特效来实现，这样实现效果简洁直接，易于维护，对网站的建设有很大的好处。二、需求分析通过对市场调查分析，现在文化领域发展迅速，生活水平显著提高，电影行业也是水涨船高，再加上网络的兴起，信息变得更加快捷，这一切都更是加速推动了文化事业的发展，但数量增多的同时也有不好的因素在里面，鱼龙混杂的市场急需快捷简单效率高的资讯信息，网络与影视的结合是必然的趋势。而市场上有的几家已经形成品牌且有一定的实力，但是目标不够鲜明。所以 I 电影网站资讯就显得尤为重要。通过对网站的分析，我们需要做到的是利用网络的便捷与
8、低成本。同时打造品牌，提高知名度。紧跟潮流，提高用户体验感以及网站，这样无疑能够最大程度的提高网站的竞争能力。三、开发工具与测试网站模块主要为首页简介以及内页详情介绍，以这些模块为基准对网站的详细内容进行深入的介绍，网络在线的形式能够让用户更加便捷更精准的得到想要的信息内容。开发网站主要分为设计与实现两个部分，与之对应的开放软件分别为 photoshop和，sublime、text。photoshop 是一款图片处理软件，他的功能主要是在本次设计中起到的作用主要有：在未开始时 ps 设计首页效果图，在后期需要 banner 与各种图片时只需要从效果图中复制出即可，因为 ps 是有图层的，这样极
9、大的提高了网站设计的工作效率。这样也能够让处理的图片与网站更好的联系起来，网站看起来更完善。Sublime 是一款具有强大功能的跨平台编辑器，代码缩略图，代码段，python 插件，并且拥有多个窗口的开发软件。使用方便，在本次设计中该开发软件很好的提高了工作效率，编写代码中多个窗口以及标签，和拼写检查功能让自己少走了不少弯路，也降低了编写的难度。在设计框架上也可以根据 ps 设计的框架很好的契合。主要用作html 和 css 的编辑。运行测试软件为 chrome 和 opera 。24、主体设计（一）页面设计1、头部设计为了使功能更加全面，板块主要分为：网站首页、影视文化、最新上映、电影分类、
10、排行榜、热门电影、团队介绍、联系我们八个板块。结构图如图 4-1 所示网站首页电影文化 最新上映 电影分类 联系我们团队介绍热门电影排行榜科幻 恐怖爱情悬疑喜剧 剧情 励志图 4-1 结构图LOGO 导航Banner走进 I 电影（电影文化、以及历史介绍）电影分类最新热门电影底部导航3版权图 4-2 首页布局框架Index页面也就是首页面，是最重要的，这个页面需要完整的展示出整个网站的大体框架，内容，风格以及网站的简单介绍，电影文化的页面是电影的产生、发展史等等信息。让用户对电影有个大概的了解，而不是简单的认为电影就是娱乐，其实电影是一门艺术。最新上映模块是目前影院正在上映的电影，该模块有时效
11、性，需要及时更新。为的是让用户在最短的时间得到最新的资讯。电影分类是一个类似于库的东西，对所有内容进行整合并分类，然后对相应的内容详细介绍以及评价。排行榜则是通过国际上有公信力的奥斯卡等组织对电影进行评论颁奖并进行整合的一个板块，主要是历年奥斯卡奖以及提名奖的作品；团队信息是针对参与此次该网站开发的人员的介绍；联系我们则是联系方式以及详细地址，是用以防止网站出现问题举报联系进行维护的渠道。2、界面设计整个网站的大框架都将照着首页的框架结构来布置。所以首页的框架是整个网站的最重要的地方，网站采用 DIV+CSS 进行布局，布局框架如图 4-2 所示：LOGO 导航Banner二级导航联系方法正文
12、底部导航版权信息4图 4-3 首页布局框架子页面保留了首页的 LOGO 导航以及 banner 在下面重新布局，左边设二级导航以及联系方式两块，联系方式简单明了名称地址以及电话号码。这样能够突出右边两块模块整合到一起形成现在的正文部分。正文部分更加突出，让用户更简单明了的看清楚内容如图 4-3 所示：子页面采用普通的布局，由上而下依次是 LOGO、导航、banner、二级导航、联系方式、正文部分、下部导航和版权信息。正文部分包括电影的历史，中国电影发展史，详细介绍，电影的详细介绍，以及联系地址百度地图名片等等信息。3、内部代码结构 DIV.CSS首页用的是三字型布局模式，如图 4-4 所示：H
13、eaderBannerContentJianjiefenleizuixinfooter图 4-4首页部分 DIV 为：CSS 样式如下：5header 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:3
14、5px;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-align:center; .footer height:130px; background-color:#FFFFFF; padding-top:14px;4、子页面如图 4-5：HeaderBannerContentleftbar rightbarfooter
