《网站设计与网页制》课程设计MG体育

发布时间：2023-05-25 丨 浏览次数：

　　MG体育任何一个网站都有一个叫导航栏的功能模块，我们设计的导航栏也不例外。导航栏的主要作用是让浏览网站者能够方便掌握网站的主要内容，以及快速找到自己需要的内容。我所设计的导航栏点开后就可以转到另一个html文件，并且顶替掉之前的html文件，因为转换速度快，这就给人一种导航栏并未变化的错觉，让人感觉只有网页主体部分的内容变化了，这也是所有导航栏的特点。此导航栏并不是用文字构成的，而是使用了六个小图片构成，这样会使得整个导航栏更加美观。

　　网站logo主要在网页底部体现，主要利用ps软件设计而成，然后插入到网页代码中。

　　图片中间的文字代表我们所在的河海大学文天学院，环形边框内的文字为“604制作单位”代表我们小组成员。

　　主要工具为Deamweaver，photoshop，爱剪辑，美图秀秀，狸窝视频转换器，web服务器，游览器。

　　主要作用分别是代码编译，图片设计，视频处理，视频格式转换，网页发布及网页测试。

　　主要技术为cssdiv布局方式，html网页代码编写，图片处理技术，视频处理技术。

　　我在我们小组中有明确的分工，主要是网页风格设计和网页布局，除此之外，基于效率和质量的提升MG体育，我还被分配要求制作导航栏和轮播器以及部分网页内容，下面主要介绍一下设计思路、过程及结果。

　　网页的布局采用图片和文字并用的方式，基本只采用从上而下的一个个大板块，左右的这种布局本网页只在网页尾部使用了，其他部分基本未涉及。

　　网站主要由六个内容模块组成，分别为Fate/Grand order、玩法介绍、fgo世界、英灵信息、迦勒底映像、关注我们MG体育。对应的主要内容分别为首页MG体育、游戏的玩法介绍、游戏的世界观、游戏人设、游戏影音以及我们制作组的信息。

　　此为开始的样子，它每隔一段时间便会切换到下一张，右上的九个数字对应九个图片，点击可以直接跳到对应图片。将鼠标放于数字上不动，数字会呈现红色，此时图片不再轮播，将会静止在此页，这是为了方便浏览者阅读观看。

　　轮播器的主要功能是让多张图片能够按照一定的时间间隔进行轮播展示，此功能可以使网页空间得以节省，并且使网页看起来更加美观MG体育。轮播器主要运用css代码来实现的，大致思路是让想要轮播的几张图片排成一列，创建一个图框，只有这个图框中可以显示图片，其他区域图片将会隐藏，之后只要将图片设计成自动左右移动便能达到想要的效果MG体育。

　　本网站为游戏网站，主要以介绍游戏为主。本网站多介绍的游戏为日本型月公司发行的人气手游Fate/Grand Order，中文名为“命运冠位指定”，目前所拥有服务器日服，国服，台服及美服，国服由哔哩哔哩代理，本网站主要以国服为主。虽是日本开发的游戏，但国服玩家意外的所占比重最多。

　　网站以介绍游戏的官网类型为主，通过图片，文字，视频以及一些特效体现网站内容。网站主要由三大部分构成，网页头部，网页主体以及网页尾部。网页头部主要是导航链接，网页尾部是一些网页制作信息和logo，网页主体则是网页的主要内容部分。

　　本网页的框架主要是网页首部，网页主体，网页尾部的三大块框架，分别存放导航栏，网页内容和制作信息。

　　而本网站主要是以介绍这个游戏为主，提供游戏的玩法、攻略以及游戏下载。网站的形式类似一些游戏的官网，全网页均使用cssdiv构成，一些特效也是利用cssdiv完成，并未使用javasprict，由于知识有限，网页制作偏于简便。

　　网站主要由六个html文件组成，这六个版面分别为首页、玩法介绍、fgo世界、英灵信息、迦勒底映像以及关注我们。