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

装订线位装订线位本科生课程设计(实践)任务书、设计报告(大学计算机基础)题目可爱的安庆，美丽的太湖学生姓名戴恒洋指导教师李小兰学院公共管理学院专业班级社会学1201班学生学号4301120126计算机基础教学实验中心年月日网页课程设计报告网页制作—我的家乡1.网站设计目的和任务（1）目的：一学期的网页设计理论和实践课程都结束了，根据老师的要求及指导，我设计了此网站，本网站属于小型个人网站，目的在于简单的介绍一下个人状况，可以使老师和同学们更进一步的了解我现在以及部分过去的情况，加强老师和同学们对我的认识，深化我们大家的情谊，有利于以后在学习、工作生活当中的团结协作。此外，这不仅是为了肩负学生的责任而去完成老师交给我的任务，更是对过去学习的知识的温习巩固，是一个把理论转化为实践的过程，是一个把自己的设计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。再者，这是对自己在一学期内该学习科目以来的成果的检查，这是一个自我审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的是扬长避短，发现自己的问题与缺点，使自己及时改正，发觉自身的优点和长处并坚持发扬，有利于我以后的学习和发展。（2）任务：本次大学生计算机实践课程以网页制作为核心，结合课堂知识和自主学习内容，集中学习OfficeFrontpage,并综合应用OfficeWord,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.总结这次网页设计实战篇——个人网站设计完成后，我收获了很多，感触也很深。我最大的感受就是理论不用于实践终究是理论，说得难听点那根本就是纸上谈兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更为之锦上添花的一笔。当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。通过这次设计，我发现一个很普遍的问题：我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两个字概括——认真，只有认真对待才会从骨子里学到东西，才学到心里去了。我觉得这次确实是很有意义的一次检测，本来自我感觉良好的，结果实战时还是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知识，但现在都忘记很多细节是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度，也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因此得到一个非常重要的结论——只要自己想学只要自己有那份执着与毅力，虚心的请教，勤于查阅相关资料就一定会有收获的，真的当今没有什么知识是用不着的，在哪，哪里都是知识，只要自己持有高度的学习热忱。不过最终，经过长久的坚持与不断的琢磨，看到了自己辛苦后的成果，尽管这还有很多不足，但看着它我心里充满着喜悦，一分耕耘一分收获，这永远是真理。5，总结这次网页设计实战篇——个人网站设计完成后，我收获了很多，感触也很深。我最大的感受就是理论不用于实践终究是理论，说得难听点那根本就是纸上谈兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更为之锦上添花的一笔。当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。通过这次设计，我发现一个很普遍的问题：我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难”这句话，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两个字概括——认真，只有认真对待才会从骨子里学到东西，才学到心里去了。我觉得这次确实是很有意义的一次检测，本来自我感觉良好的，结果实战时还是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知识，但现在都忘记很多细节是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度，也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因此得到一个非常重要的结论——只要自己想学只要自己有那份执着与毅力，虚心的请教，勤于查阅