重庆科技学院web企业网站课程设计

1、重庆科技学院web程序设计基础重庆科技学院web程序设计基础 课程实践报告 学 院:_电气与信息工程学院_专业班级: 学生姓名: 学 号: 设计地点（单位）_ _ _ _设计题目:_天匠装饰公司（企业）网站设计与制作_ _ 完成日期： 2015 年 1 月 4 日 指导教师评语: _ _ _ _ 成绩（五级记分制）:_ _ 指导教师（签字）:_ _重庆科技学院课程设计任务书设计题目：xx公司（企业）网站设计与制作学生姓名课程名称Web程序设计基础课程实践专业班级计科2013地 点I304/I306起止时间2014.12.29-2015.1. 4设计内容及要求XX公司(企业)网站向社会提供一个产

2、品展示和公司（企业）宣传的综合信息服务平台，该网站建设旨在向社会展示公司（企业）的简介，公司（企业）业务范围，公司（企业）服务等。现要求根据你了解的公司（企业），建设该公司（企业）网站，要求：1、网站至少要有5个页面以上，页面内容应包括公司（企业）简介、公司（企业）风采、公司（企业）新闻、通知公告、公司（企业）产品或服务等；2、网站页面和超链接应形成清晰合理的框架；3、首页上加入日期时间显示；4、页面要求有客户注册登录功能，并进行客户端数据校验。5、正确规划网站的栏目结构，合理建立站点目录，见设计指导书设计参数1、 整个网站页面个数不少于5个；2、 采用CSS+DIV进行页面布局，整个网站采用

3、统一的CSS；3、 站点目录规划合理，比如，图片放在images下，CSS文件放在css目录下，各栏目放在对应的栏目文件下；4、 至少一段JavaScript代码；5、 建议色彩搭配不多余5种。 进度要求12月29日：了解设计任务、收集资料、考虑网站栏目设计12月30日：素材设计与制作或收集；12月31日-1月3日：页面设计与制作；1月4日：撰写课程实践总结，作品检查、提交、答辩参考资料1 房爱莲网页设计与制作案例教程M北京：清华大学出版社，2009年2文谦、赵位等网页制作综合技术教程M北京：人民邮电出版社，2010年3 4 98/xz/xyh/其它说明.

4、本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负责教师留用。.若填写内容较多可另纸附后。3.一题多名学生共用的，在设计内容、参数、要求等方面应有所区别。教研室主任： 指导教师： 年 月 日摘要本报告主要阐述一个装饰公司网站的界面设计及实现过程。该系统主要是为了让社会各界能更好的了解本公司，有利于提升企业形象，使公司具有网络沟通能力。通过该网站，可以全面详细地了解公司及公司产品信息，并使得公司与客户保持密切联系。该网站的主要页面包括:首页、公司简介、新闻动态、服务与产品、登录与注册、联系我们。网站系统前台页面应用Dreamweaver 软件进行开发，使用css+div和

5、javascript技术实现了网站的各种功能。关键词：天匠装饰公司网站，div+css，JavaScript 目录摘要31.课程设计目的52.课程设计任务与要求52.1设计任务52.2设计要求53.课程设计说明书63.1网站需求分析63.2网站内容规划63.3网站结构规划63.4网站素材准备73.5站点建立93.6主页面的制作103.6.1主页面结构图如下：103.6.2主页面主要div如下：113.7二级页面的制作153.7.1模板使用153.7.2框架使用153.8 JavaScript功能代码的编写173.8.1树形目录代码173.8.2时间代码183.8.3注册校验代码204.课程设计

6、成果244.1主页面效果图244.2树形目录测试效果图244.3注册页面及时间设置的测试255.总 结266.参考文献281.课程设计目的本课程设计的主要目的是：通过本课程的设计，全面帮助学生加强对网站的认知；学会设计和制作网站（全部工作的流程），包括完成设计报告，了解网站的软，硬件平台，熟练网页制作及相关工具的使用，掌握软件的使用技巧，掌握相关行业的相关标准。从而运用网站界面的设计与可用性分析制作专业的站点，这次设计是对过去学习的知识的温习巩固，是一个把理论转化为实践的过程，也是对自己在一学期内该学习科目以来的成果的检查。是一个自我审视的过程。同时现在网络的发展已呈现商业化、全民化、全球化的

7、趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业文件乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径。公司可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客

8、的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售渠道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。随着全球信息网络的发展，Internet在世界上已不仅仅是一种技术，更重要的是它已成为一种新的经营模式。从4C（ Connection.，Communication ，Commerce , Co-operation ）层次上彻底改变了人类工作，学习，生活，娱乐的方式，已成为国家经济和区域经济增长的主要动力。Internet正成为世界最大的公共资料信息库，它包含无数的信息资源，所有最新的信息都可以通过网络搜索获得。更重要的是，大部分信息都是免费的，应用电

9、子商务可使企业获得在传统模式下所无法获得的巨量商业信息，在激烈的市场竞争中领先对手。2.课程设计任务与要求2.1设计任务为了满足一个公司企业网站的需要，把该公司能更快的让人了解，该公司（企业）网站向社会提供一个产品展示和公司（企业）宣传的综合信息服务平台，该网站建设指向社会展示公司的简介，产品与服务，该公司相关的业务范围，新闻等。(部分功能只做页面)。2.2设计要求1、网站至少要有五个页面以上；2、采用CSS+DIV进行页面布局，整个网站采用统一的CSS；3、站点目录规划合理，比如，图片放在images下，CSS文件放在css目录下，各栏目放在对应的栏目文件下；4、至少一段JavaScrip代

10、码；5、建议色彩搭配不多于五种。3.课程设计说明书3.1网站需求分析 在21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。信息产业部综合规划司副司长钱庭硕日前表示，按照“十一五”规划，到2010年，我国互联网网民数有望达到2亿人，年均增长8%，普及率为15%1。许多人在需要查询信息时，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑， 网站已成为最吸引人的也最有效的信息传递手段和方式。在全球经济形势不景气的情况

11、下，受到的冲击力最大的是全球中小企业和中国的大多数中小企业，传统的营销方法已经不合适当今这个互联网的时代，因此，企业需要有自己的网站，可以给你增加业务，带来更多的顾客，网络无地域之分，只要你有网站就可以让全世界的人都搜索你的信息，服务与更多的客户。而且有利于企业的推广，不但降低了推广费用，还给企业树立了更好的形象。3.2网站内容规划1、主题定位“装饰”，本网站是一个装饰公司网站，装饰公司首先要让顾客了解的是该装饰公司所装饰的产品，为了让顾客一进入网站就知道是装饰的在首页上我设置了装饰公司的精品案例，让顾客很清楚的知道我们公司是什么的和本公司最新动态，便于顾客了解。2、网站风格 为了体现主题，本

12、网站色调以红灰为主，红色给人一目了然，灰色又不会让人觉得眨眼，颜色就只有两个简单，不会让顾客有头昏看不下去的，网站主要走简洁风。3.3网站结构规划装饰公司网站，主要分为公司简介，新闻动态，产品与服务，登录，注册，联系我们六个部分。规划详图如下。网站：天匠装饰公司网站首页：首页1.html产品服务无新闻动态登录公司简介联系我们热门效果各种经典推荐设计师公司简介企业文化图一3.4网站素材准备根据规划图，依次准备了如下素材：图二 图三图四图五图六图七图八图九3.5站点建立先建一个项目文件夹“天匠装饰公司”，然后在里面建一个站点mysite。打开该站点文件夹，在里面建各种文件的文件夹如下：htmlim

13、gjscss。最后在html文件中夹放各种网页包括框架页，在img文件夹中存放各种图片素材，在js文件夹中存放java脚本文件，而在css中存放使用的css央视文件。以下为站点文件夹详图。图十一3.6主页面的制作3.6.1主页面结构图如下：图十二3.6.2主页面主要div如下：如下：body/div设定总体框架background:#930;/*背景颜色font-family:sans-serif;/*背景图片padding:0;/边距font-size:12px;/文本大小margin:0px auto auto auto;/指定一个元素的边框与另一个元素之间的边距color:#000000

14、;背景颜色#wrapwidth:900px;/css的边框，设置边框的粗细height: auto;/设置边框的长度margin:auto;background-color:#FFFFFF;#menuwidth:628px; /css的边框，设置边框的粗细height:30px;padding:55px 0 0 10px;#menu uldisplay:block;/指定是否以及如何显示元素list-style:none;/表格类型padding:9px 0 0 10px;margin:0px;#menu ul lidisplay:inline;padding:0px;margin:0px;h

15、eight:20px;#menu ul li aheight:27px;display:block;padding:0px 10px 0 10px;margin:0 4px 0 4px;float:left;text-decoration:none;text-align:center;color:#fff;font-size:13px;line-height:25px;#center_contentwidth:900px;padding:0px 0 0 0;background:url(images/center.jpg) repeat-y center;.left_contentwidth:

16、490px;float:left;padding:20px 0 20px 20px;.right_contentwidth:370px;float:left;padding:20px 0 20px 20px;.titlecolor:#734633;padding:0px;float:left;Font-size:19px;margin:10px 0 10px 0;.footerheight:100px;border-top:1px #b2b2b2 dashed;background:url(images/footer_bg.gif) no-repeat bottom;3.7二级页面的制作3.7

17、.1模板使用公司简介部分同主页面运用同一模板，主要代码如下。此模板中left和right两部分是可编辑区域，其余区域不可编辑。3.7.2框架使用图书介绍、书店介绍、产品推广分别使用框架设计。以图书介绍为例，主要div设置如下：.center_contentwidth:900px;padding:0px 0 0 0;background:url(images/center.jpg) repeat-y center;.left_contentwidth:490px;float:left;padding:20px 0 20px 20px;.right_contentwidth:370px;float

18、:left;padding:20px 0 20px 20px;.titlecolor:#734633;padding:0px;float:left;font-size:19px;margin:10px 0 10px 0;img.rightfloat:right;padding:0 0 0 10px;.right_boxwidth:170px;float:left;padding:10px 0 0 0;5.3注册页面设计主要div如下：.contact_formwidth:355px;float:left;padding:25px;margin:20px 0 0 15px;_margin:20p

19、x 0 0 5px;border:1px #DFD1D2 dashed;position:relative;.form_rowwidth:335px;_width:355px;clear:both;padding:10px 0 10px 0;_padding:5px 0 5px 0;color:#a53d17;.form_subtitleposition:absolute;top:-11px;left:7px;width:auto;height:20px;background-color:#795636;text-align:center;padding:0 7px 0 7px;color:#

20、FFFFFF;font-size:11px;line-height:20px;6.JavaScript功能代码的编写6.1注册、登录校验代码function error1()var val=form.xm;var val2=form.sectit;if(val.value.length = 0 | val2.value.length=0)if (val.value.length = 0)alert("Name ERROR!");elseif (val2.value.length=0)alert("Secrit ERROR!");elsealert(&qu

21、ot;Login successful!")window.location.href='index.htm'function error2()var one=form.yhm;var two=form.mm;var three=form.yx;var four=form.dh;var five=form.gzdw;var six=form.dz;if (one.value.length = 0 |two.value.length = 0 |three.value.length = 0 |four.value.length = 0 |five.value.length

22、= 0 |six.value.length = 0 )if (one.value.length = 0)alert("Name ERROR!");elseif (two.value.length = 0)alert("Secrit ERROR!");elseif (three.value.length = 0)alert("Email ERROR!");elseif (four.value.length = 0)alert("Telephone ERROR!");elseif (five.value.length

23、= 0)alert("Work ERROR!");elseif (six.value.length = 0)alert("Site ERROR!");elsealert("Register successful!")window.location.href='index.htm'function error3()var one=form.xm;var two=form.yx;var three=form.dh;var four=form.gzdw;var five=form.yj;if (one.value.lengt

24、h = 0 |two.value.length = 0 |three.value.length = 0 |four.value.length = 0 | five.value.length = 0)if (one.value.length = 0)alert("Name ERROR!");elseif (two.value.length = 0)alert("Email ERROR!");elseif (three.value.length = 0)alert("Telephone ERROR!");elseif (four.value.length = 0)alert("Work Site ERROR!");elseif (five.value.length = 0)alert("Suggestion can't be EMPTY!");elsealert("Tha