中南大学网页设计课程设计报告

中南大学

本科生课程设计(实践)任务书、设计报告

(大学计算机基础)

题目可爱的安庆，美丽的太湖

学生姓名戴恒洋

指导教师李小兰

学院公共管理学院

专业班级社会学1201班

学生学号4301120126

计算机基础教学实验中心

年月日

网页课程设计报告

网页制作—我的家乡

1.网站设计目的和任务

（1）目的：一学期的网页设计理论和实践课程都结束了，根据老师的要求及指导，我设计了此网站，本网站属于小型个人网站，目的在于简单的介绍一

下个人状况，可以使老师和同学们更进一步的了解我现在以及部分过去的情况，

加强老师和同学们对我的认识，深化我们大家的情谊，有利于以后在学习、工作

生活当中的团结协作。

此外，这不仅是为了肩负学生的责任而去完成老师交给我的任务，更是

对过去学习的知识的温习巩固，是一个把理论转化为实践的过程，是一个把自己

的设计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。

再者，这是对自己在一学期内该学习科目以来的成果的检查，这是一个

自我审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的

是扬长避短，发现自己的问题与缺点，使自己及时改正，发觉自身的优点和长处

并坚持发扬，有利于我以后的学习和发展。

（2）任务：本次大学生计算机实践课程以网页制作为核心，结合课堂知识和自主学习内容，集中学习Office Frontpage,并综合应用Office

Word,Excel,PPT,Flash动画等知识，独立完成3张以上网页制作。

网页主题：我的家乡——可爱的安庆，美丽的太湖

主要介绍家乡的美丽风景和乡土风俗，让家乡独特的风情为更多人所知，表达自

己对家乡的热爱。

2.设计的步骤

（1）首先，要确定网页的主题，考虑到以“我的故乡”为主题更好设计，可操作性强，能表达自己的真情实感，也希望更多的人能了解我的家乡。于是决定以“可爱的安庆，美丽的太湖”为主题。

（2）网页设计风格：本次网页制作，不需要像商业网站一样以信息化.便捷化为

主。因此突出人性化和观赏价值，具有可审美性。既然这样，那么网站的风格自

然是温和、高雅、柔美的，这样才能达到更高的审美效果。网页的画面因该是清丽，优美的。

（3）网页整体规划：可爱的安庆，美丽的太湖，要将安庆市和太湖县的各个元素都得到充分的表达，就必须合理安排这两大大板块的内容。既要展现自然美景，又要赋予人文内涵，既要表达明确，又要简洁大方。总体设计如下：

设计六个页面，一张首页，安庆市和太湖县各一张主页，以及对花亭湖，天柱山，黄梅戏集中介绍的三个页面。安庆和太湖各选一处自然风景和一处人文风景，安庆则是天柱山和黄梅戏，太湖是花亭湖和五千年文博园。其中，为了达到简洁布局，将文博园板块设在美丽的太湖主页下。网页的整体设计和布局及相应的链接如下图所示

（4）网页制作准备：第一步，建立文件夹，命名为“网页制作”，并建立“音乐”，“图片”，“视频”为名字的子文件夹。第二步，搜集素材，在网上查找有关安庆和太湖县，以及其他元素得图片。下载有关背景图片，动态图片和音乐并结合自己在家拍摄的照片。

（5）文博园和花亭湖的PPT的制作

3.采用的手段和方法

（1）PPT的制作：

PPT主要介绍花亭湖和五千年文博园，将搜集好的图片素材插入每张PPT中，并加上一些文字说明。

为了让图片有动作效果，右击图片，在自定义动画的添加效果中更改动作路径，让图片能够以不同效果进入或退出。接下来是插入声音，在插入中选择影片和声音，可以插入乳自己想要配的音乐，如，我在文博园的PPT中插入了《故宫之神思》，古典的音乐更能增强PPT的效果。

因为，PPT必须是自动播放的，所以要在幻灯片切换中自定义换片方式，主要为每张幻灯片间隔几秒播放。

（2）Flash的制作：

（3）网页制作：

用Frontgage制作网页在一开始可能会觉得无从下手，但网页的整体设计思想和风格确定后，要关注的就主要是每张网页的具体布局。首先，不应急于立刻制作，先拿一张纸，在纸上画出构思后的画面，如，图片应该在哪加，应该有哪些文字展示，标题如何处理，哪些地方应该用艺术字等等。

我制作网页主要依靠表格，利用表格来规范布局，再在格子里填充图片，文字。通过合并单元格以及绘制表格线来更改布局。制作的网页必须要有视觉效果，所以格子的背景不能是原始的白色，可以在表格属性中更改，使用背景图片，插入自己喜欢的背景，要更改某个单元格的背景，就选择单元格属性，插入背景图片。在表格中插入图片或艺术字只用单击“插入”，“图片”，或“艺术字”。

而要制作滚动的字条或插入Flash动画，就必须应用Web组件，单击“插入”，“Web 组件”，可选择字幕，选择动态效果，在高级控件中可插入Flash动画，同时在Web

组件中还可插入交互式按钮。

插入网页背景音乐，单击“格式”，“背景”，在常规中添加背景音乐

注重“层”的使用，在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便，而框架虽然也能达到这个效果，但是，它不够灵活，不利于我所需要表达的效果的呈现。而层能随意覆盖，可以在插入的图片上添加文字，和图片。

插入视频，嵌入视频的确有点困难，虽然在“插入”，“图片”中有插入视频的选项，但一般不会成功，而且插入后预览没有效果。首先要考虑视频的格式，经过多次实验，发现rmvb的视频格式能够播放。

设置超链接，网页之间靠超链接联系起来，超连接设置比较简单，选择链接的文字，再右击，选择“超链接”选项，再选择被链接的网页即可。

4.遇到的问题与解决方法

1．在设计中，图片与单元格边框完全吻合，但在用浏览器打开时发现图片与边框没有完全切合。为了减少这样的空白区，通过层的使用加以覆盖。

2.层的位置在设计和预览中不一样，有时在设计中层是在某一单元格内，但在设计中，层却突出了单元格，不在设计中的位置，只有不断移动，调整层的位置。

3.插入视频往往没有效果，因为在预览中，看不到插入的视频的效果，只有用浏览器打开，才能出现效果，并且对视频格式也是有要求的，在尝试了不同的格式后，发现rmvb的视频格式应用效果最好。但是，我自己准备的视频素材都不是这格式的，因此，下载了一个视频转换器，进行视频剪裁和格式的转换。

4.插入后的图片，再用浏览器打开时，不见了，后来发现必须保证插入图片的相对路径不变，对图片进行再一次保存过后，这一问题得到解决。

5．

5.总结

这次网页设计实战篇——个人网站设计完成后，我收获了很多，感触也很深。

我最大的感受就是理论不用于实践终究是理论，说得难听点那根本就是纸上谈兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更为之锦上添花的一笔。

当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但没