lol手办网站设计与实现
目 录
一、引言 1
二、需求分析 1
三、开发工具与测试 1
四、网站设计 1
（一）网站开发流程 1
1.功能结构图绘制 1
2.界面设计 2
3.首页div结构和层样式 3
4.子页div结构和层样式 4
(二)主体功能 6
1.首页 6
2.游戏页面 7
3.手办页面 7
4.介绍页面 7
5.日志页面 9
6.联系页面 9
7.登陆页面 10
8.简介页面 11
（三）页面特效 11
1.图片轮播 11
2.图中字 11
3.页面优化 12
4.超链接 12
五、总结 13
致谢 14
参考文献 15
一、引言
要说现在最火的几款网络游戏，那一定有人会说英雄联盟。英雄联盟的火不只是在中国，而是全球，通过这款游戏，从而推出游戏附属品。此课题制作的网页，主打以LoL主题店来宣传产品，加宽其产品的销售量。此网页主要吸引热爱英雄联盟的玩家，来了解到产品的种类，对该产品有全面的了解。
因为现在网上购物已成为现代人的必要消费行为了，让人足不出户就买到自己想买的东西。所以各大公司纷纷创建自己的宣传网站与购物平台。英雄联盟做为最火的游戏之一，玩家又对产品有需求，所以设计此网页来让玩家通过互联网购买，增加其销售量，达到其互联网营销手段的目的。
*51今日免费论文网|www.jxszl.com +Q: ^351916072^
本网站使用了Dreamweaver、CSS布局和JS特效来完成的，这些都是做网站的基础，对实现网站的建设起到了至关重要的作用。
二、需求分析
在大量周密的市场调研的基础上，其中主要依据了手办相关行业协会、中商情报网的基础信息，对我国的手办行业的供给与需求状况、市场格局与分布等多方面进行了不同的分析，并紧密结合各项目情况对手LOL手办店网站建设的可行性和未来的发展前景进行了自我研判，最终得出LOL手办店网站的建设是可行的。
在这基础之上，网站对于实体店有着便利与成本低的优势。为了在这样激烈的手办竞争中脱颖而出，需要打造出一个具有个性化鲜明的网站，同时可以提升本网站的知名度。
三、开发工具与测试
LoL手办店网站的功能模块主要包括店面和产品介绍，以这些模块为基准，对网站做出了全方位的介绍。
本网站主要的设计和实现所需要的开发软件是Dreamweaver和Photoshop。Dreamweaver是著名的网站开发工具，利用简洁的代码和工具栏提高效率，直观地创建复杂网页设计和页面版面，让我少走了不少弯路。Dreamweaver不但能够让我完成一般的网页编辑工作，而且能够实现过去需要通过编程才能实现的一些特殊的效果。Photoshop是著名的图像处理软件，通过Photoshop软件，可以制作很多精美的图片，是网站美观程度大大提高。
四、网站设计
（一）网站开发流程
1.功能结构图绘制
在导航栏里有首页、游戏、新闻、文化、日志、联系和登陆等模块，网站详细功能结构如图41。
图41功能结构图
首页是一个网站的灵魂，浏览者对整个网站内容介绍的开始，在首页里展示出整个网站的大体框架，内容，风格以及网站的简单介绍。游戏页面，讲述游戏人物在游戏里所属阵容和简介。新闻页面，是最新的打折情况，让浏览者一览无余。文化页面，主要是手办的文化历程。日志页面，显示了购买者、购买商品及其购买时间。联系页面，联系我们的重要渠道，可以反应网站的问题并提出有用的意见。登陆页面，则是登陆用户的个人信息。
2.界面设计
整个网站的大体结构都是通过首页的的模板来布置的，所以首页对于整个网站是非常重要的。网站采用DIV+CSS进行布局，布局的框架如图42。
LOGO
导航栏
Banner
简介
发展
文化
底部导航栏
版权
图42首页布局框架
在子页面上，保存了首页的LOGO、导航栏、底部导航栏和版权，正文部分插入中间，更加突出内容，使浏览者更简单的看清楚内容，及页面主旨。如图43。
LOGO
导航栏
二级导航栏
内容
底部导航栏
版权
图43子页布局框架
二级导航栏是相关页面内容的分类，内容部分介绍了LOL手办店的商品，采用这样的页面布局让浏览者更加觉得简约。
3.首页的div结构和层样式
首页的div依次上到下的排列布局模式，如图44。
Header
Banner
Container
Footer
图44首页的div
首页的div结构如下：
CSS样式如下：
.header{
backgroundcolor: #434343;
padding: 1em 0;
}
.banner{
backgroundimage:url(/images/lianmeng5.jpg);
原文链接：http://www.jxszl.com/jsj/xxaq/50510.html
