可视化程序设计实践报告

东北石油大学

可视化程序设计实践

2013 年7月26日

目录

1 设计目的 (1)

2 需求分析 (1)

2.1 用户 (1)

2.2 主要功能 (1)

2.3 基本流程 (1)

3 网站开发过程 (2)

3.1 主页面的设计 (2)

3.2 子页面设计 (2)

4 心得体会 (4)

5 参考文献 (4)

1 设计目的

这次网页课程设计，我们学计算机的首先应该对基本的网络信息有着更深入的了解，并且要懂得利用网络资源，而不是成天的上网，并且有助于我们了解一些知识文化。对于所搜集的资料我们要懂得如何的去筛选有价值的东西，并且怎样去整理所有的信息。并且，作为一款实用软件，我们要学会网页制作中颜色的搭配，主题的确立，独出心裁的设计和审美观点。学会图片和文字的组织方式等等，要通过课程设计，能够领会做出比较新颖的文件，并增强动手实践能力，进一步加强自身综合素质。在这里我设计的是一个“精品动漫集结”的网页，以便读者能够了解几部优秀的动漫作品。

2 需求分析

2.1 用户

网站的主要浏览者是主要空闲娱乐者，美术爱好者，动漫迷，社团社员，以及一些学生等等。

2.2 主要功能

建立经典动漫集结网站可以用经典的宣传海报向网友观众们展示几部动漫的主线剧情，由动漫之间的对比，可以让大家对不同风格的动漫有不同的选择。

以图文的方式向读者展示每部作品的故事背景、主人公的经历、情节发展、精彩片段，使读者对此产生兴趣，让更多的人了解动漫文化，认识动漫，能够学习其中的长处，将来发展我们自己国家的动漫事业。里面诸多的元素——友情、亲情、青春、热血、坚忍、努力、和平、希望、梦想，这些也是鼓励我们的重要因素。

2.3 基本流程

确定主题为动漫网站，为了使系统更明确，我建立了如jpg、flv、mp3等文件夹用于分别管理需要的资源。对于主页，为了使其不只单单是引导的作用，我插入了动漫歌曲作为背景音乐，加入了超链接以丰富其功能。子页方面，按内容分类格局大体相同，用数个超链接进行相互连接，并在每一个子页插入该动漫的片段方便读者感受其中风采。

图1 网站具体结构图

3 网站开发过程

3.1 主页面的设计

首页（html）主要是提供导航功能，页面内容是对动漫的大概介绍。主页中的图像将各个动漫的主角巧妙地融合在了一起，在这里他们的神态、特征、衣着、装饰、宠物等都聚集在了一起，生动的反映出了每部作品的画风，人物的性格也是栩栩如生；页面上方是左右移动的“动漫之星图标”，为体现网页的动感。左侧和图片下方各位五个子页面的链接，点击即可进入其他页面。图片上方的中心区域用文本介绍了日本动漫的特点。并用插入音频的方式，插入了三首日文动漫歌曲，设置参数false使歌曲并不全部自动播放而是而是只播放一首供用户选择，感兴趣的用户可以单击播放器下的超链接以获取更多信息。

图2 主页面设计图

3.2 子页面设计

1）龙珠（html1）

流传在从小学生到大学之间的一部优秀作品，本网页用几幅不同时期的图

片介绍主人公不同时期的面貌。图片的下方用文字把该作品的故事背景、人物发展历程、性格特点描述出来。上方用了五个链接，可以跳转到主页和其他四部作品的网页，最下方也同主页一样。这是精品动漫集结网中非常受欢迎的一部分，如有兴趣的读者可以感受一下。

图3 龙珠页面

2）海贼王

本网页用分段式文字将不同时期的故事叙述一番，左侧和主页一样设有五个链接，可以跳转到其他子页面或首页。链接下是漫画海报，经典的镜头介绍了海上一部热血和梦想的故事。另外在网页文字下方插入了一个超链接，连接到该动漫的官方网站，在上面可以欣赏到精彩的动漫视频，供有兴趣的读者观看。

图4 海贼王页面

3）银魂

该子页内容大致如上，并且其中上方插入了音频《白夜叉降临》达到其独特效果。

图5 银魂页面

4 心得体会

在设计过程中还出现了很多的问题，但通过看书，上网查询，请教同学等方式，便可以得到改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。就我而言，也在学习网页中总结了如下经验。关于网页设计的书太多了，林林总总的，而且有些乱。书看多了，花的时间比较多。我觉得想学基本技巧的该不用太多地看书。初学者要清楚地了解网页制作的基本流程。就是第一步做什么下一步又该怎样。从绘画网页框架图到最后发布网站，大概是怎样的一个过程，怎样实现的，应该要心里有数。按流程的顺序学习，不要试着先把所有做网页用到的软件都吃透了再开始做网页，应该边学边尝试，这样才能得到提升。

5 参考文献

[1] 李松峰．数据可视化实战[M]．人民邮电，2012,07．

[2]肖春宝．可视化程序设计[M]．清华大学，2011,12．

[3] 刘培林．可视化程序设计案例教程[M]．机械工业，2009,06．

[4] 何明昌．可视化程序设计与NET语言[M]．上海交通，2012,12．

[5] 黄维通．面向对象与可视化程序设计习题解析与编程实例[M]．清华大学，2003,12．