毕业论文静态网毕业设计说明书
毕业论文静态网毕业设
计说明书精选文档 TTMS system office room 【TTMS16H-TTMS2A-TTMS8Q8-
电影网站I网站的设计与实现
系（院）：软件与服务外包学院
学生姓名：
专业班级：
学号：
指导教师：
2017年3月
声明
本人所呈交的《电影网站I网站的设计与实现》，是我在指导教师的指导和查阅相关着作下独立进行分析研究所取得的成果。除了在文章中已经注明引用了的内容外，本论文不包含他人发表或已经撰写过的研究成果。对本文的研究做出重要贡献的集体和个人，本人均在文中已经作了明确说明并表示谢意。
作者签名：
日期：
摘要
本设计主要针对功能、板块等方面进行阐述一个网站的设计与实现。
语言主要基于html和css语言的web前端设计开发，该项目开发的主要目的是为了满足日渐趋于专业化的网络环境，让人群在电影文化中能够更加便捷精准的接触精彩的电影资讯，解决人们找好电影难的问题，提高人们的效率。此网站提供了明确的分类和解析，能够让用户满足其需求。这样一个网络平台能够让喜欢的人利用它找到兴趣相投的人和电影作品，同时也在制作过程中对页面布局、颜色、框架上进行进一步的学习了解并慢慢了解html语言。
关键词：html；css ；静态页面。
Abstract
This design mainly aims at the function, the plate and so on aspect to elaborate a website design and the 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 wonderful film information,Find the film difficult problem, improve people's 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 the page layout, color, frame to learn further understanding and slowly understand the html language
Key Words: html;css；Static page
目录
一、引言
随着网络的迅速发展，网络资讯成了一个重要的方向，而电影又是其中以一个重要的分支，网站将将资讯内容准确有序的提供给浏览者，这样让浏览者能够快速并且准确的找到自己想要的内容以及相关信息。还将电影的发张历史进行了简单的介绍，让想了解的人对其发展史有基本的了解。
网站主要分为首页、电影文化内容能够很好的展示资讯内容，让用户体验更好的资讯。本网站主要是对新上映的电影以及得到高评价的电影进行推荐与赏析，总体上是实现在线了解电影相关信息的网站。如何布局，设置板块，布置内容与提高体验感，将是要做的工作内容。
本网站在建设中使用的主要是通过html、css布局和js特效来实现，这样实现效果简洁直接，易于维护，对网站的建设有很大的好处。
二、需求分析
通过对市场调查分析，现在文化领域发展迅速，生活水平显着提高，电影行业也是水涨船高，再加上网络的兴起，信息变得更加快捷，这一切都更是加速推动了文化事业的发展，但数量增多的同时也有不好的因素在里面，鱼龙混杂的市场急需快捷简单效率高的资讯信息，网络与影视的结合是必然的趋势。而市场上有的几家已经形成品牌且有一定的实力，但是目标不够鲜明。所以I电影网站资讯就显得尤为重要。
通过对网站的分析，我们需要做到的是利用网络的便捷与低成本。同时打造品牌，提高知名度。紧跟潮流，提高用户体验感以及网站，这样无疑能够最大程度的提高网站的竞争能力。
三、开发工具与测试
网站模块主要为首页简介以及内页详情介绍，以这些模块为基准对网站的详细内容进行深入的介绍，网络在线的形式能够让用户更加便捷更精准的得到想要的信息内容。
开发网站主要分为设计与实现两个部分，与之对应的开放软件分别为photoshop 和，sublime、text。photoshop是一款图片处理软件，他的功能主要是在本次设计中起到的作用主要有：在未开始时ps设计首页效果图，在后期需要banner与各种图片时只需要从效果图中复制出即可，因为ps是有图层的，这样极大的提高了网站设计的工作效率。这样也能够让处理的图片与网站更好的联系起来，网站看起来更完善。Sublime是一款具有强大功能的跨平台编辑器，代码缩略图，代码段，python插件，并且拥有多个窗口的开发软件。使用方便，在本次设计中该开发软件很好的提高了工作效率，编写代码中多个窗口以及标签，和拼写检查功能让自己少走了不少弯路，也降低了编写的难度。在设计框架上也可以根据ps设计的框架很好的契合。主要用作html和css的编辑。
运行测试软件为chrome和opera 。
四、主体设计
（一）页面设计
1、头部设计
为了使功能更加全面，板块主要分为：网站首页、影视文化、最新上映、电影分类、排行榜、热门电影、团队介绍、联系我们八个板块。
图4-1 结构图
图4-2 首页布局框架
Index页面也就是首页面，是最重要的，这个页面需要完整的展示出整个网站的大体框架，内容，风格以及网站的简单介绍，
电影文化的页面是电影的产生、发展史等等信息。让用户对电影有个大概的了解，而不是简单的认为电影就是娱乐，其实电影是一门艺术。
最新上映模块是目前影院正在上映的电影，该模块有时效性，需要及时更新。为的是让用户在最短的时间得到最新的资讯。电影分类是一个类似于库的东西，对所有内容进行整合并分类，然后对相应的内容详细介绍以及评价。排行榜则是通过国际上有公信力的奥斯卡等组织对电影进行评论颁奖并进行整合的一个板块，主要是历年奥斯卡奖以及提名奖的作品；团队信息是针对参与此次该网站开发的人员的介绍；联系我们则是联系方式以及详细地址，是用以防止网站出现问题举报联系进行维护的渠道。
2、界面设计
整个网站的大框架都将照着首页的框架结构来布置。所以首页的框架是整个网站的最重要的地方，网站采用DIV+CSS进行布局，布局框架
如图4-2所示：
图4-3 首页布局框架
子页面保留了首页的LOGO导航以及banner在下面重新布局，左边设二级导航以及联系方式两块，联系方式简单明了名称地址以及电话号码。这样能够突出右边两块模块整合到一起形成现在的正文部分。正文部分更加突出，让用户更简单明了的看清楚内容
如图4-3所示：
子页面采用普通的布局，由上而下依次是LOGO、导航、banner、二级导航、联系方式、正文部分、下部导航和版权信息。正文部分包括电影的历史，中国电影发展史，详细介绍，电影的详细介绍，以及联系地址百度地图名片等等信息。
3、内部代码结构
图4-4
首页部分DIV为：
CSS样式如下：
图4-5子页面布局子页部分DIV为：
（二）网站的基本功能
1、首页介绍
网站刚打开便是首页，首页的基本功能是对网站的内容有一个简单的介绍，看首页能够对整体的布局以及模块的位置大概的了解，能够在首页基本了解内容和网站的风格。网站需要让客户有好的体验，能够让用户最快的了解信息并获取信息。
网站整体以墨绿色和白色为基本色调，这样的资讯网站给人的感觉是更加沉稳，更加可靠，在边框等装饰上均采用简洁的直线边，整个网站的风格给人的感觉就是干练，直接的风格，使得网站整体风格也是这样契合。
网站首页主要分为头部、连接部分、底部三个部分在网站上的LOGO是有中国汉字“I电影”的宋体以及绿色设计而成的，简洁明了，突出主题。首页的banner部分主要是展现最新的电影，banner图片尺寸大，占屏幕比例大，主题明确，很容易突出内容，头部导航与底部导航相互对应，保证用户不会因为找导航而失去耐心。主体部分也分为三块，一是对电影的简单介绍，二是电影分类，分别用大家耳熟能详的电影封面作为链接，上下波动的形式让人看起来更有感觉，根据调查，用户需要资讯网站很大一部分是需要这个功能，在这里可以选择想要的分类寻找不同的类型电影。另一部分是最新的热门电影，这里通过六张图片滚动显示的效果，展现的都是最新的在影院正上映的影片，能够让用户很好的避免不喜欢的电影类型。提高用户体验感。
图4-6网站手页面效果展示图
Banner图片采用的是一张大图轮播的形式，间隔时间为十秒，下面走进I电影部分则是电影文化的三个部分，分类则是波浪式上下，以图片为链接分类页面，可以直接进入内页详情页面，在下面是滚动的六张图片，还有滚动按钮
具体如图4-6：
图4-7影视文化页面效果展示
2、电影文化页面介绍
正文电影文化主要分为电影的介绍，由来，发展历史等通过文字简单直接的描述，虽然看似枯燥，不过能够很大程度的写清楚相关信息，页面主体部分用无序列表实现文化栏的二级导航，点击导航在右侧显示纯文本的形式显示详细内容。
如图4-7所示：
3、新片上映页面介绍
左侧部分同上，采用无序列表展示二级导航与联系方式，与其他页面不同的是右边正文部分变成图片形式展示，同时起到分类作用，最新上映影片数量不会很多，从图片封面上可以看出类型名称，可以准确的定位用户想要的影片，每个图片又是一个链接，打开则是对应影片的详细介绍。
图4-8新片上映展示效果图
4、电影分类页面
子页面是以首页为模版部分地方进行重新设计，banner高度调低，给下面正文流出更多的余地，在左侧设置二级分类和联系方式，右边的正文高度不设限制，这样有利于内容展示的完整性，上面保留首页的导航功能，导航功能为了保证用户能够准确迅速的转换到想要的页面，左侧的二级分类能够让用户在浏览的同时能后选择其他分
图4-9电影分类页面展示
页面中的正文是图片与文字共存的形式，保证正文的可读性可完整性，用户可以在留言处留言意见和建议，可以提高与用户之间的互动与网站内容优化与提升，用户可以在左侧的耳机导航中选择分类。如此一来，让用户也有参与度，提高对网站的关注度。如图4-9所示：
5、热门佳片页面
该页面展示历年奥斯卡榜单得奖影片，这样肯定了来源电影的质量，这样可以有效的避免质量稂莠不齐的现象，正文部分可以直接点击海报来选择影片，并在该区域
做了较为详细的展示在内容中，文字有默认的黑色和绿色，绿色则是电影链接制作公司的链接。
如图4-10所示：
4-10热门电影页面
6、联系我们页面
页面正常的使用高度偏小于首页的banner图片，左侧的二级导航可以点击选择分类。下方左侧无序列表排序联系方式，正文部分用纯文本显示联系方式，和百度地图的地图名片功能，用户可以在地图中调整大小等，该功能需要联网才能够显示效果。