html5的漫吧网站设计与实现
随着网络的开发，大部分人已经不再满足于观摩其他人网页，而是希望自己能够加入网络中去，因特尔的开放性使建立自己建立网站成为现实，拥有自己的个人网站是大部分上网人的心愿，同时个人网站也是向他人展示自己的个性一种很好的方法。基于上述背景，根据自己在大学所学的知识，将在接下来的几个月开始搭建自己的个人网站。从建站的实际情况出发，经过对相关网站的一番考察和分析，本网站将以Dreamweaver作为开发环境，通过div设计主体框架和加入CSS样式来完善网站，再加入其它的软件辅助设计，将完成独立的个人兴趣网站。通过建设个人网站，作为和他人进行交流的综合网络地点，也为个人将来的发展提供了助力。个人网站的主要发展方向是单区域，他并不像门户网站那样拥有许多的不同领域的动能，个人网站是为了在某一方面需要更深度的了解而被建立的。
目录
一、引言 1
（一）课题背景 1
二、需求分析 1
三、开发工具介绍 1
四、网站结构设计 2
（一）功能结构设计 2
（二）模块界面设计图 2
1.首页 2
2.资讯 3
3.图片 4
4.漫画 4
5.动画 5
6.游戏 5
7.轻小说 6
五、网站效果实现 6
（一）首页 6
（二）资讯 8
（三）图片 8
（四）漫画 9
（五）动画 轻小说 游戏 10
六、系统测试 12
七、总结 12
致谢 13
参考文献 14
一、引言
（一）课题背景
现如今随着中国改革开放网络的发展越来越快，人们已经不像从前那样需要负担高额的网费和计算机购买费用。这给网络的发展提供了绝佳的助力。现在人们对于网络已经越来越离不开了，网络提供给人们很多的即时资讯和交流平台。个人网站作为网络的主载体，在网络中发挥了十分重要的作用，无论在国内外个人网站都是被人们重视的存在。网站吸引人的地方在于使用视频文字图片就能组成一个十分吸引人的页面，具有很好的交互性。可以肯定的是个人网站已成为许多人交友的一种方
*好棒文|www.hbsrm.com +Q: ￥351916072￥
式。个人网站的流行是时代必然的趋势，一个完整的个人网站拥有许多令人满意的功能，在网站中人们能够自己找寻自己喜欢的东西进入深度交流并且拥有相同兴趣的人进行分享和交流；个人网站的丰富多彩使得个人网站将会成为我们在网络中和他人良好平台使得人们可以通过虚拟的网络交到自己志同道合的朋友。也为将来大学生走出社会奠定下坚实的基础。
二、需求分析
现如今大部分人都渴望在网络中展示自己，能够在不同的平台更方便地与人互动交流，在过去不久的传统的WEB1.0时代，社区、论坛，个人网站，他们都尝试着在这些方面进行努力。比如博客就是个人网站的一个前身，只不过博客的内容较少，所以随着互网络时代的飞速发展，个人网站已成为一种向他人展示自己爱好的很好的方式，也是一种简单快捷地提供网络用户之间进行在线交流的平台，通过个人网站可以结交许多志同道合的朋友，表达相互之间更多的想法，它随时随地只要有网络就可以发布想要的东西，十分方便快捷。
个人网站实现了文字，图片，音乐。资讯等内容的展示，通过响应式框架的排版布局，使得个人网站不仅能够使用在电脑这样的大屏幕设备上，还能够使用在例如手机，平板这样小屏幕设备上进行资源的传递和资讯的传播。
三、开发工具介绍
Dreamweaver开发软件是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。这款软件主要通过代码编写来完成网站的制作，也可通过div设计整体框架和设置div的属性来调节CSS样式来完成网站。而且软件还可以进行站点管理十分方便用户的使用。在完成一个页面的时候课通过在线查看来观察自己做的页面是否符合自己的预期设想，如果不符合还可以继续修改。如果不小心做错了一步，不用担心你可以通过软件的撤销功能返回到上一步，是一个十分贴心的功能。这个软件还拥有许多好的功能，是新手不可多得的好软件。
Firefox是一个拥有很强大功能的浏览器，并且是一款主流浏览器。它拥有一组自我开发使用工具。在漫吧个人网站的制作过程中，我利用Firefox浏览器对HTML编写的文档进行预览的，除此之外，我常常通过它的查看器来查看元素，让我很快就能发现问题并解决它。并且浏览器自带的截屏功能十分方便，它能够把网页整体截图下来。
四、网站结构设计
（一）功能结构设计
个人网站共分为首页、资讯、图片、漫画、动画、游戏、小说七个模块，其中资讯板块展示即时资讯和图片样本。图片模块使用精心挑选的图集采用长列表展示。漫画板块主要是展示一些人气比较高的漫画采用左图右字的方式展示。动画板块，分享人气和制作精良的动画。游戏板块主要是向游戏迷推荐的超人气大作和一些游戏更新消息。轻小说板块主要是推送一些连载漫画的更新和新漫画的介绍。详情见图41 结构设计图。
图41 结构设计图
（二）模块界面设计图
1.首页
网站的首页相当于一个第一印象，一个好的首页基本奠定了网站整体的质量，所以在个人网站首页的设计中也考虑了诸多因素，最后采用了较为简洁的设计排版，加上一些JS特效，使得页面简单而不单调。通过PS软件和网站的主体定位我设计了一个十分符合网站Logo。Logo的左侧采用文字表现把个人网站的名字展示出来右侧采用一个卡通人物作为网站的形象代言人，是的Logo整体看来比较丰满富有表现力。Logo效果图见表42。主页的左侧详细简绍了网站的开发目的，左侧右下方是网站的联系方式。方便网站出问题进行及时的反馈。网站的主体部分采用SWF文件播放最新的消息。下部分是一些分支内容提供超链接进行详细的信息获取。首页效果图见图43。
图42 Logo图
Logo1（主logo）
首页、资讯、图片、漫画、动画、游戏、轻小说
Mainbody（主体部分）
网站简介
联系方式
Swf转换特效
底部文章链接（一共16个超链接）
Footer(版权区)
图43 首页结构
2.资讯
资讯板块主要是为了浏览者提供了及时资讯，一级子页是主要介绍资讯的来源同时页面也做了响应式处理，图片会根据屏幕的大小进行缩放，而且不变形保持美观。图片板块的二级子页里面是具体的内容，采用列表展示精美图片效果图见图44。
Logo1（主logo）
首页、资讯、图片、漫画、动画、游戏、轻小说
Mainbody（主体部分）
图44资讯板块结构
3.图片
图片板块主要是为了浏览者提供了精美的动漫图片，一级子页是主要介绍图片的来源是分享一些文章，在图片板块是以图片为主。同时页面也做了响应式处理，图片会根据屏幕的大小进行缩放，而且不变形保持美观。图片板块的二级子页里面是具体的图片，采用列表展示精美图片。结构图见图45。
目录
一、引言 1
（一）课题背景 1
二、需求分析 1
三、开发工具介绍 1
四、网站结构设计 2
（一）功能结构设计 2
（二）模块界面设计图 2
1.首页 2
2.资讯 3
3.图片 4
4.漫画 4
5.动画 5
6.游戏 5
7.轻小说 6
五、网站效果实现 6
（一）首页 6
（二）资讯 8
（三）图片 8
（四）漫画 9
（五）动画 轻小说 游戏 10
六、系统测试 12
七、总结 12
致谢 13
参考文献 14
一、引言
（一）课题背景
现如今随着中国改革开放网络的发展越来越快，人们已经不像从前那样需要负担高额的网费和计算机购买费用。这给网络的发展提供了绝佳的助力。现在人们对于网络已经越来越离不开了，网络提供给人们很多的即时资讯和交流平台。个人网站作为网络的主载体，在网络中发挥了十分重要的作用，无论在国内外个人网站都是被人们重视的存在。网站吸引人的地方在于使用视频文字图片就能组成一个十分吸引人的页面，具有很好的交互性。可以肯定的是个人网站已成为许多人交友的一种方
*好棒文|www.hbsrm.com +Q: ￥351916072￥
式。个人网站的流行是时代必然的趋势，一个完整的个人网站拥有许多令人满意的功能，在网站中人们能够自己找寻自己喜欢的东西进入深度交流并且拥有相同兴趣的人进行分享和交流；个人网站的丰富多彩使得个人网站将会成为我们在网络中和他人良好平台使得人们可以通过虚拟的网络交到自己志同道合的朋友。也为将来大学生走出社会奠定下坚实的基础。
二、需求分析
现如今大部分人都渴望在网络中展示自己，能够在不同的平台更方便地与人互动交流，在过去不久的传统的WEB1.0时代，社区、论坛，个人网站，他们都尝试着在这些方面进行努力。比如博客就是个人网站的一个前身，只不过博客的内容较少，所以随着互网络时代的飞速发展，个人网站已成为一种向他人展示自己爱好的很好的方式，也是一种简单快捷地提供网络用户之间进行在线交流的平台，通过个人网站可以结交许多志同道合的朋友，表达相互之间更多的想法，它随时随地只要有网络就可以发布想要的东西，十分方便快捷。
个人网站实现了文字，图片，音乐。资讯等内容的展示，通过响应式框架的排版布局，使得个人网站不仅能够使用在电脑这样的大屏幕设备上，还能够使用在例如手机，平板这样小屏幕设备上进行资源的传递和资讯的传播。
三、开发工具介绍
Dreamweaver开发软件是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。这款软件主要通过代码编写来完成网站的制作，也可通过div设计整体框架和设置div的属性来调节CSS样式来完成网站。而且软件还可以进行站点管理十分方便用户的使用。在完成一个页面的时候课通过在线查看来观察自己做的页面是否符合自己的预期设想，如果不符合还可以继续修改。如果不小心做错了一步，不用担心你可以通过软件的撤销功能返回到上一步，是一个十分贴心的功能。这个软件还拥有许多好的功能，是新手不可多得的好软件。
Firefox是一个拥有很强大功能的浏览器，并且是一款主流浏览器。它拥有一组自我开发使用工具。在漫吧个人网站的制作过程中，我利用Firefox浏览器对HTML编写的文档进行预览的，除此之外，我常常通过它的查看器来查看元素，让我很快就能发现问题并解决它。并且浏览器自带的截屏功能十分方便，它能够把网页整体截图下来。
四、网站结构设计
（一）功能结构设计
个人网站共分为首页、资讯、图片、漫画、动画、游戏、小说七个模块，其中资讯板块展示即时资讯和图片样本。图片模块使用精心挑选的图集采用长列表展示。漫画板块主要是展示一些人气比较高的漫画采用左图右字的方式展示。动画板块，分享人气和制作精良的动画。游戏板块主要是向游戏迷推荐的超人气大作和一些游戏更新消息。轻小说板块主要是推送一些连载漫画的更新和新漫画的介绍。详情见图41 结构设计图。
图41 结构设计图
（二）模块界面设计图
1.首页
网站的首页相当于一个第一印象，一个好的首页基本奠定了网站整体的质量，所以在个人网站首页的设计中也考虑了诸多因素，最后采用了较为简洁的设计排版，加上一些JS特效，使得页面简单而不单调。通过PS软件和网站的主体定位我设计了一个十分符合网站Logo。Logo的左侧采用文字表现把个人网站的名字展示出来右侧采用一个卡通人物作为网站的形象代言人，是的Logo整体看来比较丰满富有表现力。Logo效果图见表42。主页的左侧详细简绍了网站的开发目的，左侧右下方是网站的联系方式。方便网站出问题进行及时的反馈。网站的主体部分采用SWF文件播放最新的消息。下部分是一些分支内容提供超链接进行详细的信息获取。首页效果图见图43。
图42 Logo图
Logo1（主logo）
首页、资讯、图片、漫画、动画、游戏、轻小说
Mainbody（主体部分）
网站简介
联系方式
Swf转换特效
底部文章链接（一共16个超链接）
Footer(版权区)
图43 首页结构
2.资讯
资讯板块主要是为了浏览者提供了及时资讯，一级子页是主要介绍资讯的来源同时页面也做了响应式处理，图片会根据屏幕的大小进行缩放，而且不变形保持美观。图片板块的二级子页里面是具体的内容，采用列表展示精美图片效果图见图44。
Logo1（主logo）
首页、资讯、图片、漫画、动画、游戏、轻小说
Mainbody（主体部分）
图44资讯板块结构
3.图片
图片板块主要是为了浏览者提供了精美的动漫图片，一级子页是主要介绍图片的来源是分享一些文章，在图片板块是以图片为主。同时页面也做了响应式处理，图片会根据屏幕的大小进行缩放，而且不变形保持美观。图片板块的二级子页里面是具体的图片，采用列表展示精美图片。结构图见图45。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/706.html
