web网站设计课程设计报告.docx
《web网站设计课程设计报告.docx》由会员分享，可在线阅读，更多相关《web网站设计课程设计报告.docx（11页珍藏版）》请在冰点文库上搜索。
web网站设计课程设计报告
网站设计
课程设计报告
设计题目：
个人网站设计
专业数字媒体技术
班级媒体102
姓名张洁
学号媒体102
指导教师康晓兵
完成时间2013年1月
2012年秋季学期
个人网站设计
摘要
随着计算网络技术的发展不断提高，越来越多的人喜欢浏览网页、我们也可以在网上发现好多网站。
每个网站都有自己不同的风格和表现主题。
本次课程设计了一个个人网站。
详细讨论了DreamWeaver中网页的设计，实现了具有较完整功能的一个简单网站。
采用了表格和背景图片完成了整个网站的总体结构；同时，利用链接将各个页面连接起来，形成了很好的交互作用。
用的这种方法较为方便简答、制作出来的页面简洁大方，看起来一目了然，可以得到令人满意的效果。
关键词：
表格、链接、网页设计
目录
一、绪论3
1.网站设计概述3
2.网站设计的要求及意义3
二、背景资料3
1.设计目的3
2.设计思路4
三、网站的建立4
1.实现思路4
2.系统结构框图5
3.系统功能流程图5
4.页面的设计5
四、网站功能的实现7
1.设计要点7
2.实现过程7
3.运行效果8
五、设计中遇到的问题8
六、设计总结9
1.设计效果9
2.存在问题9
3.自我评价9
七、附录10
参考文献11
一、绪论
1.网站设计概述
网站设计是一种建立在新媒体之上的新型设计，是艺术设计类和计算机网络类的交叉学科。
随着网络的发展，网站设计也越来越受重视。
网站设计中涉及到的内容具有视觉性和互动性、受众面也比较广，是区别于报刊和影视的媒体。
网站既具有传统媒体的优点，又能使传播变得更为直接、便捷和有效。
2.网站设计的要求及意义
本课程设计要求使用DreamWeaver制作一个简单的网站。
主题为“个人网站”具体内容应该包括：
个人主页、校园生活、家乡风光、个人爱好相册等页面。
具体要求如下：
1.主题鲜明、设计新颖，页面美观、内容充实；
2.网页层次分明，页面之间的链接清晰正确；
3.不宜使用过多图片，系统移植性好准确可靠。
目前，网站设计非常常见。
只要在上网、就随处可见网站。
本课题用DreamWeaver设计了一个个人网站，是为了加深自己对相关知识的学习和融会贯通，重在实践操作。
二、背景资料
1.设计目的
此次课程设计是学完《Web开发技术》课程后的一次综合训练。
具体要求如下：
1.希望通过此次课程设计加深对所学课程中相关Web基本知识和开发技术的理解，并将这些环节的知识融会贯通，运用到实际中；
2.同时，了解网页设计、网站开发的基本方法；
3.掌握网页设计的技巧、Web开发的基本技能，提高实践动手能力。
为毕业设计和毕业后从事与网站设计相关的工作打下良好的综合技能和知识基础。
2.设计思路
利用Web开始发技术中所学习的相关知识，结合现实生活中的应用。
1.首先确定设计的主题为个人网站；
2.设计风格定为简约、大方；
3.页面样式版面简洁明了；
4.确定网站的具体网页数为6个。
分别是个人主页、校园生活、美丽家乡、美文欣赏、相册、喜欢；
三、网站的建立
1.实现思路
1.根据所确定的网站主题进行整体规划；
2.确定网站的配色方案、找出所要使用的颜色；
3.收集网站的素材和内容；
4.确定网站的栏目、将收集到的资料进行分组归纳，进行具有一定内在联系的组织排列；
5.确定网站的目录结构和连接结构。
6.根据上述所确定的内容，按照自己的创意绘制出网站首页与子页的草图，并在上面表明导航菜单和颜色符号；
7.在DreamWeaver中实现上述要求，将网站结构和绘制的创意设计结合起来。
2.系统结构框图
图3-1
3.系统功能流程图
图3-2
图3-1图3-2
4.页面的设计
在整个设计中的每个页面的具体实现过程，主要利用了表格进行整体页面的结构设置；结合插入图片；同时写入文字；最后加入相关链接，完成整个网站页面的制作。
使用图片和文字结合，使整个页面显得图文并茂。
具体使用到了标签、、
、![]()
、等标签；还包含Css层叠样式表的使用：
；同时还使用了JavaScript脚本语言：
等等。
1、个人主页
这个页面主要体现的内容是个人信息的简介。
风格是简洁、清新；主要利用的标签有：
背景图片的设置
导航菜单栏的设置：
我的主页
2、校园生活
这个页面主要体现的内容是我的校园生活。
风格也是简单大方。
主要利用的标签有：
利用Css样式表：
插入背景音乐：
3、美丽家乡
这个页面主要体现的内容是我的美丽的家乡。
在此页面中主要分为三个板块介绍，分别是：
家乡的特产、美食、以及旅游方面的相关内容。
主要利用的标签有：
分栏设置：
安康冬桃
使用标签设置样式：
4、美文欣赏
这个页面主要体现的内容是我的美文欣赏。
在此页面中主要介绍了一些优美的文章，主要利用的标签有：
利用脚本语言实现文字顶部的循环移动：
5、相册
这个页面主要内容是一些照片。
在此页面中主要分为四个模块，分别是：
我喜欢的一些东西、我的家乡风光、我的同学以及我的校园生活中相关的一些图片。
主要利用的标签有：
使用
标签打开需要显示的照片：
6、喜欢
这个页面主要介绍了我的爱好。
以简单、清晰为主要目标。
主要利用的标签有：
背景的设置：
单元格内容的设置：
四、网站功能的实现
1.设计要点
1.必须提前设定好主题、确定色彩搭配和整体框架效果；
2.根据以上所确定的主题和风格绘制出草图；
3.需要考虑到具体实现和理想效果所存在的差异，并能够做到及时的修改，使其达到需要的效果。
4.必须主题整个网站的层次结构要鲜明、页面间的链接要清晰准确。
2.实现过程
首先、通过合理的系统结构安排，结合DreamWeaver软件相关操作功能，将自己所绘制出的草图制作成页面的效果；
然后，对那些做好的页面进行修改，使其达到一定视觉效果；
最后，给每个页面加上合理的脚本语言和Css样式表、达到页面风格的统一。
并加上正确的链接。
通过这几步，一个简单的完整网站便做好了。
3.运行效果
见附录
五、设计中遇到的问题
1.在整个网站的最初风格确定上产生了一些问题，通过调整风格设置，达到统一的要求；
2.每个页面由于内容不太一样、在具体设计整个页面的时候，出现的效果反差太大，利用Css样式表将其统一；
3.具体页面内容实现的过程中发现有些相像的东西不能实现，通过不断地修改，使用软件中相的标签及功能完成页面的制作；
4.在页面的具体制作过程中，使用JS脚本语言时发现错误，不能很好地实现想要的效果，通过在添加语句，将语言类型设置为JS即可；
5.在页面的具体制作过程中，使用CSS样式表时发现错误，没有达到统一页面风格的效果，通过在添加语句即可；
6.加入链接不成功，标签写的不完整，将其改为文字或图片。
.
六、设计总结
1.设计效果
1.整个页面设计新颖、富有创造力
2.内容相对充实、看起来简洁大方
3.页面层次分明、页面链接正确
2.存在问题
1.网站设计的内容不太丰富；
2.由于时间有限、设计出的页面显得有点单调；
3.页面在色彩搭配上做的不太好；
4.对人眼视觉上的考虑不太全面。
3.自我评价
本次课程设计DreamWeaver及相关技术来设计个人网站。
通过事先绘制草图、掌握整体框架；然后在具体的实现过程当中主要涉及到较多的表格的运用、链接的使用，结合Javascript脚本语言以及Css层叠样式表。
完成了整个网站的设计。
整个课程设计当中、用的时间较短、设计的页面较为丰富，并通过实践，加深了自己对Web相关知识的理解、同时也提高了自己自主解决问题和实践动手能力。
总之，整个课程设计的过程和结果都较为令人满意。
对于那些缺陷，希望以后有机会深入网站设计，改进此网站的缺陷。
七、附录
我的主页校园生活
美丽家乡美文欣赏
相册喜欢
参考文献
[1] 刘增杰.精通HTML5 + CSS3+JavaScript网页设计.北京:
清华大学出版社，2012.
[2] 孙刚.Dreamweaver网页设计入门到精通.北京：
机械工业出版社，2012.
[3] 赵峰.网页设计与制造.北京：
清华大学出版社.2010.
[4] 周年国.网页设计.北京：
人民美术出版社.2010.
[5] 郭锂，柯铭健.网页设计与制作.北京：
高等教育出版社.2010.
[6] 刘强，张阿敏，翁艳彬.网页设计与制作.北京：
高等教育出版社.2010.
展开阅读全文
相关搜索
资源标签