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

电影网站I网站的设计与实现系（院）：软件与服务外包学院学生姓名：专业班级：学号：指导教师：2017年3月声明本人所呈交的《电影网站I网站的设计与实现》，是我在指导教师的指导和查阅相关著作下独立进行分析研究所取得的成果。除了在文章中已经注明引用了的内容外，本论文不包含他人发表或已经撰写过的研究成果。对本文的研究做出重要贡献的集体和个人，本人均在文中已经作了明确说明并表示谢意。作者签名：日期：2017.3摘要本设计主要针对功能、板块等方面进行阐述一个网站的设计与实现。语言主要基于html和css语言的web前端设计开发，该项目开发的主要目的是为了满足日渐趋于专业化的网络环境，让人群在电影文化中能够更加便捷精准的接触精彩的电影资讯，解决人们找好电影难的问题，提高人们的效率。此网站提供了明确的分类和解析，能够让用户满足其需求。这样一个网络平台能够让喜欢的人利用它找到兴趣相投的人和电影作品，同时也在制作过程中对页面布局、颜色、框架上进行进一步的学习了解并慢慢了解html语言。关键词：html；css；静态页面。AbstractThisdesignmainlyaimsatthefunction,theplateandsoonaspecttoelaborateawebsitedesignandtherealization.Languageismainlybasedonhtmlandcsslanguagewebfront-enddesignanddevelopment,themainpurposeoftheprojectdevelopmentistomeettheincreasinglyprofessionalnetworkenvironment,sothatthecrowdinthefilmculturecanbemoreconvenientandaccuratecontactwiththewonderfulfilminformation,Findthefilmdifficultproblem,improvepeople'sefficiency.Thissiteprovidesaclearclassificationandanalysis,allowinguserstomeettheirneeds.Suchanetworkplatformtoallowpeopleliketouseittofindinterestedpeopleandfilmworks,butalsointheproductionprocessonthepagelayout,color,frametolearnfurtherunderstandingandslowlyunderstandthehtmllanguageKeyWords:html;css；Staticpage目录一、引言..................................................................1二、需求分析..............................................................1三、开发工具与测试........................................................1四、主体设计.............................................................1（一）页面设计........................................................11、头部设计........................................................22、界面设计........................................................33、内部代码结构DIV.CSS............................................44、子页面如图4-5：................................................5（二）网站的基本功能..................................................61、首页介绍........................................................62、电影文化页面介绍................................................83、新片上映页面介绍................................................94、电影分类页面...................................................105、热门佳片页面...................................................106、联系我们页面...................................................11（三）JAVASCRIPT特效.................................................12滚动轮播效果......................................................12五、总结................................................................141一、引言随着网络的迅速发展，网络资讯成了一个重要的方向，而电影又是其中以一个重要的分支，网站将将资讯内容准确有序的提供给浏览者，这样让浏览者能够快速并且准确的找到自己想要的内容以及相关信息。还将电影的发张历史进行了简单的介绍，让想了解的人对其发展史有基本的了解。网站主要分为首页、电影文化内容能够很好的展示资讯内容，让用户体验更好的资讯。本网站主要是对新上映的电影以及得到高评价的电影进行推荐与赏析，总体上是实现在线了解电影相关信息的网站。如何布局，设置板块，布置内容与提高体验感，将是要做的工作内容。本网站在建设中使用的主要是通过html、css布局和js特效来实现，这样实现效果简洁直接，易于维护，对网站的建设有很大的好处。二、需求分析通过对市场调查分析，现在文化领域发展迅速，生活水平显著提高，电影行业也是水涨船高，再加上网络的兴起，信息变得更加快捷，这一切都更是加速推动了文化事业的发展，但数量增多的同时也有不好的因素在里面，鱼龙混杂的市场急需快捷简单效率高的资讯信息，网络与影视的结合是必然的趋势。而市场上有的几家已经形成品牌且有一定的实力，但是目标不够鲜明。所以I电影网站资讯就显得尤为重要。通过对网站的分析，我们需要做到的是利用网络的便捷与低成本。同时打造品牌，提高知名度。紧跟潮流，提高用户体验感以及网站，这样无疑能够最大程度的提高网站的竞争能力。三、开发工具与测试网站模块主要为首页简介以及内页详情介绍，以这些模块为基准对网站的详细内容进行深入的介绍，网络在线的形式能够让用户更加便捷更精准的得到想要的信息内容。开发网站主要分为设计与实现两个部分，与之对应的开放软件分别为photoshop和，sublime、text。photoshop是一款图片处理软件，他的功能主要是在本次设计中起到的作用主要有：在未开始时ps设计首页效果图，在后期需要banner与各种图片时只需要从效果图中复制出即可，因为ps是有图层的，这样极大的提高了网站设计的工作效率。这样也能够让处理的图片与网站更好的联系起来，网站看起来更完善。Sublime是一款具有强大功能的跨平台编辑器，代码缩略图，代码段，python插件，并且拥有多个窗口的开发软件。使用方便，在本次设计中该开发软件很好的提高了工作效率，编写代码中多个窗口以及标签，和拼写检查功能让自己少走了不少弯路，也降低了编写的难度。在设计框架上也可以根据ps设计的框架很好的契合。主要用作html和css的编辑。运行测试软件为chrome和opera。四、主体设计（一）页面设计21、头部设计为了使功能更加全面，板块主要分为：网站首页、影视文化、最新上映、电影分类、排行榜、热门电影、团队介绍、联系我们八个板块。结构图如图4-1所示图4-1结构图LOGO导航Banner走进I电影（电影文化、以及历史介绍）电影分类最新热门电影底部导航版权图4-2首页布局框架网站首页电影文化最新上映电影分类联系我们团队介绍热门电影排行榜科幻恐怖爱情悬疑喜剧剧情励志3Index页面也就是首页面，是最重要的，这个页面需要完整的展示出整个网站的大体框架，内容，风格以及网站的简单介绍，电影文化的页面是电影的产生、发展史等等信息。让用户对电影有个大概的了解，而不是简单的认为电影就是娱乐，其实电影是一门艺术。最新上映模块是目前影院正在上映的电影，该模块有时效性，需要及时更新。为的是让用户在最短的时间得到最新的资讯。电影分类是一个类似于库的东西，对所有内容进行整合并分类，然后对相应的内容详细介绍以及评价。排行榜则是通过国际上有公信力的奥斯卡等组织对电影进行评论颁奖并进行整合的一个板块，主要是历年奥斯卡奖以及提名奖的作品；团队信息是针对参与此次该网站开发的人员的介绍；联系我们则是联系方式以及详细地址，是用以防止网站出现问题举报联系进行维护的渠道。2、界面设计整个网站的大框架都将照着首页的框架结构来布置。所以首页的框架是整个网站的最重要的地方，网站采用DIV+CSS进行布局，布局框架如图4-2所示：LOGO导航Banner二级导航正文联系方法底部导航版权信息图4-3首页布局框架子页面保留了首页的LOGO导航以及banner在下面重新布局，左边设二级导航以及联系方式两块，联系方式简单明了名称地址以及电话号码。这样能够突出右边两块模块整合到一起形成现在的正文部分。正文部分更加突出，让用户更简单明了的看清楚内容4如图4-3所示：子页面采用普通的布局，由上而下依次是LOGO、导航、banner、二级导航、联系方式、正文部分、下部导航和版权信息。正文部分包括电影的历史，中国电影发展史，详细介绍，电影的详细介绍，以及联系地址百度地图名片等等信息。3、内部代码结构DIV.CSS首页用的是三字型布局模式，如图4-4所示：HeaderBannerContentJianjiefenleizuixinfooter图4-4首页部分DIV为：htmlbodydivclass=header/divdivclass=banner/divdivclass=contentdivclass=jianjie/divdivclass=fenlei/divdivclass=zuixin/div/divdivclass=footer/div/body/htmlCSS样式如下：header{height:30px;line-height:30px;background-color:#ebebeb;border-bottom:1pxsolid#c5c2c2;}.banner{width:100%;height:344;5margin:0pxauto;position:relative;}content{margin:0auto;padding-bottom:20px;width:1000px;text-indent:35px;}Jianjieli{width:291px;height:310px;padding:16px13px0;background-color:#FFFFFF;overflow:hidden;border:1pxsolid#beccc3;fenlei{height:210px;background:u