(完整版)《网站规划与网页设计》毕业课程设计

武汉学
院
学生课程设计
课程名称：《网站规划与网页设计》题目：“家居网”网站设计
学生姓名：李述强学号：
专业班级：软件工程1301 年级： 13
级
指导教师：熊杰成绩：
2014年12月8日
1．课程设计目的
经过一个学期网页设计理论课程和设计实践课的学习，我更深一步的了解了网站的建设的基本流程和一些简单代码的使用，特别是本学期的数据库相关课程的开设，给予我对于网络数据库的更好地理解。

这次的课程设计内容涉及整个站点的发布和管理，之前我们只是使用到老师统一管理的一个服务器，我们只参与到网页的设计和站点与服务器的互联内容，但是当中也存在着许多问题有待解决。

课程设计让我们自己来管理自己的站点，一方面，增加了我们对于整个站点发布的流程的认识；另一方面，也提高我们对于网站建设过程中常见问题的解决途径的积累和对于发现问题的敏感度。

这次的课程作业量比较大让我们压力很大，也正是因为这样我们被迫提高了时间的使用效率，当然也有利于知识的消化和吸收。

课程设计的目的不仅仅在于学习到相关网页的制作和站点的发布，更重要的是提高我们在网站建设上整体的把握，以及给予我们对于网络资源合理使用和对相关信息进行有效地搜索提供了一些方法和途径，让我们对于网络的认识发生了一定的改观，同时，一些新颖和有创意的开发和制作的工具和技术也会激发我们网页设计的兴趣和进一步地学习动力。

2．课程设计题目和要求
2.1课程设计题目
当今世界，从我们的日常生活到整个社会的进步，都离不开创意设计。

设计不应该是简单的模仿，而应该是一个创新的过程，是一种创造性活动，
创造前所未有的、新颖有益的东西。

随着时代的发展，消费者对于居家装修的看法也发生了很大的变化。

十年前，人们还是粗略的知道装潢就是铺地板、包门面。

今天，越来越多的消费者已认识到室内设计的重要性。

设计对于装修至关重要，设计是居家装修的灵魂！现在我做的这个网站就是有关家居设计的，名字为“家居网”，主要是通过这个网站，让更多的人了解家居设计这一行业，在自己以后拥有了自己的房子的时候，能根据自己的意愿装修出漂亮又实用的家。

2.2课程设计要求
⑴实验环境的搭建。

每人一台虚拟服务器，重新分配IP，实现网络连通；
⑵添加IIS服务器组件并测试；
⑶网站主题的选择、规划、设计（要求用Project软件编制项目进程图，用Visio绘制网站结构图）；
⑷利用DW或其他工具，利用HTML和CSS、div等技术实现主题网站的基本架构；
⑸利用HTML5、CSS3、JavaScript、Photoshop、Flash、Firework 等工具进行站点优化（包括站点访问人数统计、来源统计、站点外观优化、内容形式优化等）；
⑹利用ASP技术实现动态交互；
3．课程设计报告内容
3.1网站规划的思想
随着网络技术的发展和网络使用普及率的进一步提高，人们的生活越
来越离不开网络，可以说只要是懂得如何操作和使用计算机的人都对网络有着深深地依赖，不仅是我们个人，企业对于信息化管理的需求也不断地提高，特别是对顾客的资料和动态进行信息化的管理和动态发布显得尤为重要。

经济学里说到的资源的有限性对于信息化特征越来越明显的今天显得尤为突出，只有那些真正抓住了顾客潜在和未满足的需求的企业才能真正长期实现顾客的高满意度、利益最大化和资源的有效利用。

同时，企业实现外部资源内部化的，减少供应链的成本也是通过有效地客户管理来实现。

因此，客户关系管理网站的设计的思路就是实现企业内部人员对于客户群基本信息的了解和掌握，提高企业对于客户需求的动态分析和掌握的程度，实现企业和顾客信息的交互性，让顾客的需求变化和反馈信息及时反馈到企业的决策部门和相关职能部门，及时更改和优化相应的策略，进一步促进企业的业务流程重组的完善。

另外，在信息迅速膨胀的知识爆炸的今天，对于有效和有价值信息的了解和掌握对于我们有着越来越深刻的影响。

这一现象反映了人们对于网络数据挖掘能力掌握和提高的需要。

经过思考和联系所学相关的知识，我认为对于企业来说，无论是虚拟企业还是实体企业，客户都是企业不可不重视的一种资源，对于这种资源，它是特殊的，因为人具有主观和客观的两面性，人的特征和需求是动态的，那么对于这种资源的管理和维护要实现低成本运作才有可能使企业实现较为高效的运转。

那么，客户信息的及时更新和掌控对于企业短期和长期的战略规划具有重要的参考价值。

但是，对于顾客的实时动态和需求的掌握，通过人员调查是不切实可行的，只有通过相关网络技术和软件来实施自动化的搜索和管理，才能更加实时和及时地对客户的相关活动进行追踪。

综上所述，我认为网站的风格和设计应该简洁、有条理，同时内容更加丰富和具有客户亲和力，让客户对其产生好感和自然而然的信任。

3.2网站的建设计划
首先需要制定网页的框架结构，得出要做什么网页，由此而开始设计各网页的页面，画出草稿，然后再根据已设计出的网页页面，搜集资料（包括文字和图片），并对资料进行整理及再次编辑，还要开始绘制logo，代码编辑和文字编辑要同时开始，在这个过程中会多次检查，以避免代码和文字、图片的不相符，同时还要根据做的网页，不时地添加或删减原设计，尽量达到完美。

还要将全部的网页进行链接，然后要对网页进行测试，使其能通过web标准测试，并尽可能在多个操作系统下能够正常访问。

并能在多个浏览器下能够正常表现。

3.3网站结构图
针对网站的发展方向及战略部署计划对网站进行规划，以实现良好的运行，实现网站架设目标。

3.4网站中各网页的功能
首页功能：
通过首页，可以大致的了解网站的结构及内容。

首页是整个网站的核心，在首页不论你想访问哪个网页，或者是哪部分内容，这里基本都有，任意访问。

首页分为几个部分：案例展示---在首页可以看到设计比较成功的室内设计图案；服务以及设计理念---简述了家居网的口碑以及家居设计的重要性；公司简介---简述公司的历程；时间及访问量---可以在访问网站的时候看到系统时间以及网页的访问量。

设计团队网页
这个网页的主要功能是介绍家居网的设计团队，这个网页说明一个好的设计师可以让你达到很满意的效果。

好的设计师是一个设计公司所不能缺的必备力量。

案例参考网页
这个网页介绍了以往成功的案例。

从这些案例中我们得知一个小房子也可以被设计得有艺术感。

或许没有那么大的房子，但是我们依然可以住的舒心，那大房子必然更应该有它的价值，而设计正是体现它价值的必不可少的手段。

产品保证网页
这个网页主要说明了我们使用的材料和产品是值得信任的，在如今社会产品质量的重要性是毋庸置疑的。

这里面不仅讲述了我们产品的值得信
赖，还介绍了我们有很好的一只售后服务的团队。

爱的链接网页
这个网页简单的介绍了一下公司的基本信息，并且插入了《让爱住我
家》的一段视频，在客户遇到什么问题的时候可以随时跟我们联系。

4．综合知识的运用情况
4.1层的使用
在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便，而框架虽然也能达到这个效果，但是，它不够灵活，不利于我所需要表达的效果的呈现，也许是不习惯的原因吧，觉得太死板了，当然一些地方仍然要用到它，体现清晰的结构。

4.2运用Photoshop工具
图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化页面反而带来了负面影响，此时最好借助Photoshop工具来编辑图片。

文本的插入在层内或框架内完成较好，但不能设置为艺术字体，因此需要运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现自己独特的思想和设计画面。

4.3 HTML基础及高级应用
文字与段落排版、超链接、图像、表格、使用结构元素构建网页布局、音频和视频、表单等。

4.4 网页样式表CSS
CSS与HTML文档的结合方法、样式表语法、多重样式表的层叠、CSS的属性单位等。

4.5 JavaScript脚本语言
JavaScript的程序结构、基于对象的JavaScript语言DOM对象及编程、JavaScript的对象事件处理程序。

4.6其他工具的应用
使用Flash工具；只要是动态效果都可以用Flash工具，音乐、闪动图片等；使用链接：为方便读者的查阅，在各页面底部都设置了页面链接；插入跳转菜单；为了使读者能快捷的回到自己感兴趣的页面，于是在各个页面都插入了跳转菜单；插入滚动文字；设置交替图像，鼠标放置停止图片切换；制作在整个页面浮动的图片；设置垂直循环滚动的图片；使用弹出信息行为；框架的使用；背景图像的固定，让文本在图像上滚动；插入音乐文件；插入Flash按钮。

5 网站测试报告
5.1 测试环境
IE7浏览器、IE8浏览器、IE9浏览器、Opera浏览器、360浏览器、QQ浏览器
测试结果：均可以在以上浏览器打开。

5.2添加IIS服务器组件并测试.
WI7安装IIS 64位WI7安装IIS，步骤说明，
图解步骤如下：
“程序”中“打开或关闭Windows功能”的位置
如图，安装IIS7时需要选择要使用的功能模块
也可以都勾选上
IIS7安装完成之后可以在开始菜单右侧->管理工具-> Internet信息服务管理器”，如果没有可以按以下步骤添加：开始》右击属性》“开始”菜单选项卡》自定义》把“系统管理工具”设置为“在所有程序菜单显示”或者“在所有程序菜单和开始菜单上显示”。

打开后就会看到默认的DEFAULT Web site网站了点击右侧的浏览*80可以查看是否安装成功。

出现下图表示安装成功
5.3维护管理
除了对活的系统进行必须的监视、维护来保证其正常运作外，管理维护阶段更重要的任务是从正处于实际运营的系统上测试实际的系统性能；在运营中发现系统需要完善和升级的部分；衡量并比对系统较商业目的和需求的成功与否。

将所有这些信息整理成一份计划以便于将来对网站系统的增强和升级。

我们将项目的时间周期分为5个阶段（Phase），在不同阶段内用相应
的步骤(Process)来达到不同阶段的目标。

而任务（Task ）被包含在不同步骤之内，以完成该步骤的工作内容。

由浅至深，由总到细，三个元素之间相互联系，相互作用，有机的构成了整个方法的蓝本。

在实际操作中，根据不同时期的不同任务，动态地分配资源予以实施，再与专业人员的专业知识相结合，使得项目得以妥善完成。

6设计总结与心得体会
这次网页设计实战篇——网站设计完成后，我收获了很多，感触也很深。

由实验可得出一点对代码的认识，但是，依旧不能熟练的运用，其中包括对代码的一些不是太清楚的认识，再加上记忆的不是十分的准确，所以在实验中对实验的书写不是那么的准确，但通过网页的这次设计过程，加深了对网页的代码的书写，也加深了对代码的记忆。

当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。

通过这次设计，我发现一个很普遍的问题：我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难”这句话，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两个字概括——认真，只有认真对待才会从骨子里学到东西，才学到心里去了。

我觉得这次确实是很有意义的一次检测，本来自我感觉良好的，结果实战时还是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知
识，但现在都忘记很多细节是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度，也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因此得到一个非常重要的结论——只要自己想学只要自己有那份执着与毅力，虚心的请教，勤于查阅相关资料就一定会有收获的，真的当今没有什么知识是用不着的，在哪，哪里都是知识，只要自己持有高度的学习热忱。

当然，我们在学习过程中一定要及时巩固、练习，掌握了也不一定熟悉，熟能生巧啊！我们应该吸取这个教训，否则即使我们最终达到了目的，但我们走了很多弯路，而不是事半功倍的结果了。

不过最终，经过长久的坚持与不断的琢磨，看到了自己辛苦后的成果，尽管这还有很多不足，但看着它我心里充满着喜悦，一分耕耘一分收获，这永远是真理。

完成自己的作品后我也观赏了其他同学的作品，对比起来，各有千秋，当然能从其中发现很多值得我去学习的地方，比如说有的页面布局很好，有的页面内容很充实，看起来很有感觉，也可以称之为网站了，而我的有些页面看上去，可能使别人不会产生网站这一个概念，反而会觉得像是PPT演示文稿，这也反映了我的一个问题：心中还没很清楚领悟建立网站的基本要点，还应该加强这方面的知识储备。

另外我也发现有的同学的页面设计插入了太多图片或者太多浮动的东西，弄得网页太杂，没有一定的风格，更谈不上凸显主题了······从对比中，我学到了很多，能让我扬长避短，吸取他人之精华，去除他人之糟粕。

这次作业对于我来说不是一项任务而是一种享受，因为我发现我越来越喜欢它，不管别人说做这件事做到多晚做得有多累，我都没觉得，甚至还越做越兴奋。

对于一个女生来说，特别是对于一个对电脑不感兴趣的女生来说，我觉得这是我最大的收获，我找到了我的兴趣、我的老师，我在
计算机专业中找到了方向。

真的很感谢老师能给我们这次机会，当然也发现有很多同学跟我一样喜欢上了它，在这方面也做得比较好，于是我也有一种紧迫感，毕竟现在竞争压力很大，“适者生存，弱者淘汰”是亘古不变的自然法则，我想我应该更加努力，抓住机会把它学通学精。

本次网页设计，让我在遇到问题的时候，能够更加耐心、仔细的对出现的问题进行分析，从而解决问题。

同时让我的心态也更加的积极，在碰到一些问题时，能够快速的找到自己的问题所在。

当然我还是会继续加强学习，只有通过不断的摸索和发现，才能完成更好的网站。

我相信这对我们以后的学习和生活都能有一个很好的帮助，这才是学习这门课程的意义所在。

张云云
2014年12月
04日
指导教师评语：
在检查网站时，该生能很好的完成一个完整的网站，网站的布局合理、完整，内容充实有意义，能很好的体现该生的学习能力以及动手能力；在这次的网站规划与网页设计中，内容广泛，涉及到美术设计基础、图片处理技术、网站需求策划书撰写、程序设计基础、二维动画设计、网页制作技术等。

考核内容包括：网站规划设计、HTML的应用、网页样式表CSS、JavaScript脚本语言、多媒体对象与网页特效等。

该同学都完成的很好，整个网站设计的也很出色。

成绩评定：90
指导教师（签名）：熊杰2015年5月28日。