点兔咖啡厅网站设计与制作
点兔咖啡厅网站设计与制作的建设是基于日本动漫“请问您今天要来点兔子吗”的宣传需要而开展的。本次网站的制作将会把该部动漫的相关新闻、电视台放送时间、蓝光碟及音乐唱片的发售信息、制作人员等一些情报经过汉化整理后呈现在页面上。整个网站的建设和开发是基于HTML和CSS等技术开发的，并且运用jQuery对页面的初始加载实现一些小动画，提升动感和美观。该网站的实现能够使用户在第一时间内了解到该部动漫的相关信息，在很大程度上起到了宣传的作用。
目 录
一、引言 1
二、需求分析 1
三、开发技术分析 1
四、网站设计分析 2
（一）开发流程 2
1.功能结构图 2
2.界面设计布局 2
3.首页DIV结构和层样式 4
4.子页DIV结构和层样式 9
（二）网站基本功能 11
1.首页（HOME） 11
2.放送情报（ON AIR） 13
3.制作人员（STAFF&CAST） 13
4.蓝光碟&DVD（Bluray&DVD） 13
5.详细页面（Bluray&DVD） 14
6.音乐CD（MUSIC） 15
7.周边商品（GOODS） 15
（三）jQuery特效实现 15
1. 页面呈现动画 15
2. 二级导航跳转 17
六、总结 18
致谢 19
参考文献 20
一、引言
随着经济和社会的飞速发展，互联网技术取得了突飞猛进的发展。它在丰富人民生活和娱乐的同时，也在不断发展壮大。如今网站技术成熟，许多企业都纷纷拥有自己的宣传网站，这样不仅能够宣传企业文化，树立形象，还能够方便人们实时了解该企业的动向！这一点同样适用于动漫产业。在日本，许多优秀的动漫作品几乎都没有属于自己的宣传网站，如果要想找到该动漫的相关信息，只能够自己去制作该动漫的动画公司的网站去找。一般来说，这一过程十分繁琐，并且这些网站肯定是日文官方的，对于中国大陆的我们来说绝对是一大难题。为此制作一个属于该作品的网站不仅能够方便用户的查找和访问，还能够起到宣
*好棒文|www.hbsrm.com +Q: ￥351916072￥
传和传播的作用！
二、需求分析
通过对动漫市场环境进行分析，中国的动漫市场一直在逐步上升，从中可以看出动漫文化的本质逐渐被中国人理解。在这一趋势下，伴随媒体炒作及人们对动漫态度的看法转变，会产生更快的提升。因此，为了能够更好地抓住这些在中国大陆内的客户，一个属于该动漫的宣传网站是必不可少的！
TV动漫“ 请问您今天要来点兔子吗”在中国上映后，取得了极大的关注。许多动漫视频网站纷纷出现了许多“难民”和“萌豚”，甚至还出现了“点兔大法好”等新兴教团，由此可以看出该部动漫的影响力！对于喜爱这部动漫的粉丝来说，一定会对它的资讯实时关注。虽然它在日本有官网，但是需要翻墙访问，并且网站内容均为日语，即使登上页面，一些内容你也读不懂，因此制作一个在中国内访问的网站，这不仅能够方便国人浏览，还能够起到宣传作用！
通过网站希望达到以下目的：（1）利用网站，宣传和推广动漫（2）提供最新的产品信息，方便粉丝提前购买（3）提供动漫观看渠道，增加观众基数（4）官方新闻及活动报道，增加用户互动。
三、开发技术分析
动漫点兔网站的功能模块主要包括对于动漫点兔的新闻资讯、放送情报、制作成员信息、蓝光碟发售详情、音乐CD及其它一些产品的介绍，经由分析这些功能模块 ，特此将其设计成为静态网站来起到宣传作用。
动漫点兔静态网站的建设中主要使用到的工具有Dreamwear和Photoshop这两大软件。其中Dreamwear是家喻户晓的网站开发工具，在本次的制作中扮演了主要角色。它将页面开发中主要的HTML代码完美干净的呈现出来，并且能够清楚准确的显示每一个框架和位置。同时在代码的编写过程中还会通过首字母来自动弹出你所需的内容，这大大提升了代码编写的速度，使得代码的查看和编写的难度有了极大的降低！
Photoshop是另一款不可缺少的网站建设软件。在本次开发中主要扮演了页面的整体设计，和内容图片的处理。前者是通过软件中的参考线来准确设计页面中各个模块的大小和位置，为了将来在代码的编写中提供准确的数值，避免出错！后者是处理一些页面内容图片的大小及美化，为了在浏览器中能够完美的呈现。
网站建设中还将使用到Javascript及jQuery库。页面中运用Javascript脚本语言能够使得内容有更多的变化及选择，同时还能够编写出许多交互动画效果，让用户的操作体验更丰富！而jQuery通俗的讲就是封装起来的Javascript库，它比Javascript更为简单方便，大大提升了编写的效率！
四、网站设计分析
（一）开发流程
1.功能结构图
本次课题的网站将划分为HOME、NEWS、ON AIR、STAFF&CAST、Bluray&DVD、MUSIC、GOODS这七个功能模块，网站的结构详细图如41所示：
图41 网站结构详细图
首页是整个网站中不可缺少的存在，它将带给浏览者对该网站的第一印象！NEWS模块能够向用户显示动漫点兔的相关新闻。ON AIR模块展示了该动漫在电视台播放的时间信息，对于想要观看的用户是十分有用的。STAFF&CAST模块主要罗列了制作该动漫的人员及动漫人物配音的声优，使浏览者对其有一定的了解。Bluray&DVD、MUSIC和GOODS这三个模块主要介绍了该动漫的蓝光碟和DVD、音乐CD及其它一些周边商品的发售信息，这些信息都能够提前使有意购买的浏览者做好准备。
2.界面设计布局
首页采用了最原始的DIV+CSS的布局方式，整体划分为6大块，其中动漫的海报和新闻显示在内容的最顶端，这样不仅能够吸引用户的眼球，最新的新闻资讯还能够使老顾客第一时间了解官方的动态。在海报和新闻以下展示的是有关该动漫的各种商品的信息，同时不同分类前都加以标签区分，易于浏览者准确查找。首页具体框架如图42所示：
图42 首页框架图
首页分类标签栏中展示的内容为最新的当前标签的内容，在该页面中只显示3项内容，如果用户还需要要了解到更多内容只需点击More即可。首页分类标签栏具体框架如图43所示：
图43 分类标签栏框架图
网站的子页布局继承了首页的顶部导航栏和底部版权栏，主体中一部分仿照了搜索网站的搜索结果页面，将当前版块所有不同的内容分别概括后制作成为二级导航，方便用户区分。子页的具体框架如图44所示：
图44 子页框架图
3.首页DIV结构和层样式
根据界面设计，首页在body中主要划分为三个DIV大块，分别为Header，Container和Footer。其中Container这一DIV中主要存放了首页的主体内容，而Header和Foote这两块DIV中则存放了顶部导航和底部版权，具体DIV结构如图45所示：
目 录
一、引言 1
二、需求分析 1
三、开发技术分析 1
四、网站设计分析 2
（一）开发流程 2
1.功能结构图 2
2.界面设计布局 2
3.首页DIV结构和层样式 4
4.子页DIV结构和层样式 9
（二）网站基本功能 11
1.首页（HOME） 11
2.放送情报（ON AIR） 13
3.制作人员（STAFF&CAST） 13
4.蓝光碟&DVD（Bluray&DVD） 13
5.详细页面（Bluray&DVD） 14
6.音乐CD（MUSIC） 15
7.周边商品（GOODS） 15
（三）jQuery特效实现 15
1. 页面呈现动画 15
2. 二级导航跳转 17
六、总结 18
致谢 19
参考文献 20
一、引言
随着经济和社会的飞速发展，互联网技术取得了突飞猛进的发展。它在丰富人民生活和娱乐的同时，也在不断发展壮大。如今网站技术成熟，许多企业都纷纷拥有自己的宣传网站，这样不仅能够宣传企业文化，树立形象，还能够方便人们实时了解该企业的动向！这一点同样适用于动漫产业。在日本，许多优秀的动漫作品几乎都没有属于自己的宣传网站，如果要想找到该动漫的相关信息，只能够自己去制作该动漫的动画公司的网站去找。一般来说，这一过程十分繁琐，并且这些网站肯定是日文官方的，对于中国大陆的我们来说绝对是一大难题。为此制作一个属于该作品的网站不仅能够方便用户的查找和访问，还能够起到宣
*好棒文|www.hbsrm.com +Q: ￥351916072￥
传和传播的作用！
二、需求分析
通过对动漫市场环境进行分析，中国的动漫市场一直在逐步上升，从中可以看出动漫文化的本质逐渐被中国人理解。在这一趋势下，伴随媒体炒作及人们对动漫态度的看法转变，会产生更快的提升。因此，为了能够更好地抓住这些在中国大陆内的客户，一个属于该动漫的宣传网站是必不可少的！
TV动漫“ 请问您今天要来点兔子吗”在中国上映后，取得了极大的关注。许多动漫视频网站纷纷出现了许多“难民”和“萌豚”，甚至还出现了“点兔大法好”等新兴教团，由此可以看出该部动漫的影响力！对于喜爱这部动漫的粉丝来说，一定会对它的资讯实时关注。虽然它在日本有官网，但是需要翻墙访问，并且网站内容均为日语，即使登上页面，一些内容你也读不懂，因此制作一个在中国内访问的网站，这不仅能够方便国人浏览，还能够起到宣传作用！
通过网站希望达到以下目的：（1）利用网站，宣传和推广动漫（2）提供最新的产品信息，方便粉丝提前购买（3）提供动漫观看渠道，增加观众基数（4）官方新闻及活动报道，增加用户互动。
三、开发技术分析
动漫点兔网站的功能模块主要包括对于动漫点兔的新闻资讯、放送情报、制作成员信息、蓝光碟发售详情、音乐CD及其它一些产品的介绍，经由分析这些功能模块 ，特此将其设计成为静态网站来起到宣传作用。
动漫点兔静态网站的建设中主要使用到的工具有Dreamwear和Photoshop这两大软件。其中Dreamwear是家喻户晓的网站开发工具，在本次的制作中扮演了主要角色。它将页面开发中主要的HTML代码完美干净的呈现出来，并且能够清楚准确的显示每一个框架和位置。同时在代码的编写过程中还会通过首字母来自动弹出你所需的内容，这大大提升了代码编写的速度，使得代码的查看和编写的难度有了极大的降低！
Photoshop是另一款不可缺少的网站建设软件。在本次开发中主要扮演了页面的整体设计，和内容图片的处理。前者是通过软件中的参考线来准确设计页面中各个模块的大小和位置，为了将来在代码的编写中提供准确的数值，避免出错！后者是处理一些页面内容图片的大小及美化，为了在浏览器中能够完美的呈现。
网站建设中还将使用到Javascript及jQuery库。页面中运用Javascript脚本语言能够使得内容有更多的变化及选择，同时还能够编写出许多交互动画效果，让用户的操作体验更丰富！而jQuery通俗的讲就是封装起来的Javascript库，它比Javascript更为简单方便，大大提升了编写的效率！
四、网站设计分析
（一）开发流程
1.功能结构图
本次课题的网站将划分为HOME、NEWS、ON AIR、STAFF&CAST、Bluray&DVD、MUSIC、GOODS这七个功能模块，网站的结构详细图如41所示：
图41 网站结构详细图
首页是整个网站中不可缺少的存在，它将带给浏览者对该网站的第一印象！NEWS模块能够向用户显示动漫点兔的相关新闻。ON AIR模块展示了该动漫在电视台播放的时间信息，对于想要观看的用户是十分有用的。STAFF&CAST模块主要罗列了制作该动漫的人员及动漫人物配音的声优，使浏览者对其有一定的了解。Bluray&DVD、MUSIC和GOODS这三个模块主要介绍了该动漫的蓝光碟和DVD、音乐CD及其它一些周边商品的发售信息，这些信息都能够提前使有意购买的浏览者做好准备。
2.界面设计布局
首页采用了最原始的DIV+CSS的布局方式，整体划分为6大块，其中动漫的海报和新闻显示在内容的最顶端，这样不仅能够吸引用户的眼球，最新的新闻资讯还能够使老顾客第一时间了解官方的动态。在海报和新闻以下展示的是有关该动漫的各种商品的信息，同时不同分类前都加以标签区分，易于浏览者准确查找。首页具体框架如图42所示：
图42 首页框架图
首页分类标签栏中展示的内容为最新的当前标签的内容，在该页面中只显示3项内容，如果用户还需要要了解到更多内容只需点击More即可。首页分类标签栏具体框架如图43所示：
图43 分类标签栏框架图
网站的子页布局继承了首页的顶部导航栏和底部版权栏，主体中一部分仿照了搜索网站的搜索结果页面，将当前版块所有不同的内容分别概括后制作成为二级导航，方便用户区分。子页的具体框架如图44所示：
图44 子页框架图
3.首页DIV结构和层样式
根据界面设计，首页在body中主要划分为三个DIV大块，分别为Header，Container和Footer。其中Container这一DIV中主要存放了首页的主体内容，而Header和Foote这两块DIV中则存放了顶部导航和底部版权，具体DIV结构如图45所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/659.html
