网站设计和网页制作课程设计.doc

课程设计报告 所 在 系： 电气工程系 专业班级： 计算机科学与技术2班 学 号： 姓 名： 指导老师： 2017年4月 目录 1.网站的概述---------------------------------4 2.网站的初期规划------------------------------4 2.1.网站风格-------------------------------4 2.2.网站框架和布局---------------------------4 2.3.网站总体内容模块--------------------------4 2.4.网站logo设计----------------------------5 3.工具和技术----------------------------------5 3.1.工具---------------------------------5 3.2.技术---------------------------------5 4.网站实现-----------------------------------5 4.1.导航模块------------------------------6 4.1.1.模块设计思路----------------------6 4.1.2.模块界面截图----------------------6 4.1.3.模块实现主要代码--------------------6 4.2.轮播器模块-----------------------------7 4.2.1.模块设计思路----------------------7 4.2.2.模块界面截图----------------------7 4.2.3.模块实现主要代码--------------------9 4.3.内容模块-----------------------------13 4.3.1.模块设计思路---------------------13 4.3.2.模块界面截图---------------------13 4.3.3.模块实现主要代码-------------------16 5.网站测试与发布------------------------------25 5.1.网站的测试--------------------------25 5.2.网站的发布--------------------------26 6.网站的不足及后续改进-------------------------26 7.心得体会----------------------------------26 8.参考文献----------------------------------28 网站的概述 本网站为游戏网站，主要以介绍游戏为主。本网站多介绍的游戏为日本型月公司发行的人气手游Fate/Grand Order，中文名为“命运冠位指定”，目前所拥有服务器日服，国服，台服及美服，国服由哔哩哔哩代理，本网站主要以国服为主。虽是日本开发的游戏，但国服玩家意外的所占比重最多。 而本网站主要是以介绍这个游戏为主，提供游戏的玩法、攻略以及游戏下载。网站的形式类似一些游戏的官网，全网页均使用css+div构成，一些特效也是利用css+div完成，并未使用javasprict，由于知识有限，网页制作偏于简便。 网站主要由六个html文件组成，这六个版面分别为首页、玩法介绍、fgo世界、英灵信息、迦勒底映像以及关注我们。 网站的初期规划 2.1网站风格 网站以介绍游戏的官网类型为主，通过图片，文字，视频以及一些特效体现网站内容。网站主要由三大部分构成，网页头部，网页主体以及网页尾部。网页头部主要是导航链接，网页尾部是一些网页制作信息和logo，网页主体则是网页的主要内容部分。 2.2.网站框架和布局 本网页的框架主要是网页首部，网页主体，网页尾部的三大块框架，分别存放导航栏，网页内容和制作信息。 网页的布局采用图片和文字并用的方式，基本只采用从上而下的一个个大板块，左右的这种布局本网页只在网页尾部使用了，其他部分基本未涉及。 2.3.网站总体内容模块 网站主要由六个内容模块组成，分别为Fate/Grand order、玩法介绍、fgo世界、英灵信息、迦勒底映像、关注我们。对应的主要内容分别为首页、游戏的玩法介绍、游戏的世界观、游戏人设、游戏影音以及我们制作组的信息。 2.4.网站logo设计 网