网站开发课程设计.doc
潍坊科技学院网站开发课程设计报 告 书设计题目 网站开发 专业班级 11软1 学生姓名 步巧莲 学 号 0 指导教师 陈凤萍 日 期 2012.12.242012.1.11 成 绩 课程设计任务书院系：中印计算机软件学院 专业： 软件技术 班级：11软1 学号：0 一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css 完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1. 课程设计质量：² 贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。² 网页设计布局合理，色彩搭配合理，网页操作方便。² 设计过程中充分考虑浏览器兼容等问题，并做适当处理。² 代码应适当缩进，并给出必要的注释，以增强程序的可读性。2. 课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字指导教师： 陈凤萍 学生签名： 步巧莲 五、教师评语：基于javascript的电子商务网站开发摘要 随着网络信息化的飞速发展，人们的生活学习已经离不开网络。Javascript是web应用开发不可或缺的利器，作为开发人员，了解和熟悉Javascript是不可或缺的前提之一。Javascript作为一种具有正式规范的基于标准的语言，在为WEB页面增加交互性、创建整个应用程序方面都有重要地位。为了方便大家的购物，在网上买东西的越来越多。电子商务也随之发生。本为就是为了美观电子商务的美观，制作文字特效效果。关键字：文字特效、javascript、html、 目录一、前言11.1课程设计思路11.2课程设计目标1二、关键技术12.1HTML相关概念12.2css32.3javascript3三、总体设计43.1网站总体架构43.2网站软件结构43.3网站功能设计5四、详细设计54.1主要代码5五、 课设总结8六、参考文献8一、 前言1.1课程设计思路电子商务网站基本组成部分包括广告推荐、商品浏览、电子购物车、用户注册，采用JavaScript实现的大部分是客户端逻辑部分，与数据库打交道基本上是由服务器端脚本语言来进行的。JavaScript在创建电子商务网站的过程中如果运用得当将使网站的效率得到很大的提高，同时也将提高网站的人性化程度。1.2课程设计目标1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2熟练使用javascript和cookie实现电子购物车，从而提高网页访问速度。3熟练使用javascript中的内建对象最终实现一个电子商务网站的雏形。二、关键技术2.1HTML相关概念1.HTML语言HTML语言(Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。在WWW上，通常使用的发布语言是HTML，即超文本标识语言。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。如图：WWW三个组成部分图2-1WWW的组成2.HTML文件结构<HTML> <HEAD> <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 <title></title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。</HEAD><BODY> HTML 文件的正文/<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。</BODY> </HTML>元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。2.2css1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。2.3javascript 1javascript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。2.JavaScript嵌入HTML文件JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。1)、JavaScript 语句插入 HTML的方式：（1)使用 <SCRIPT> 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到 HTML 文档中2)、JavaScript 语句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、 总体设计3.1网站总体架构本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1：INTERNETIIS WEB SERVERSQL SERVER图3-1系统结构图3.2网站软件结构登录网站浏览网站会员登录会员注册购买商品浏览信息填写个人信息浏览商品提交个人信息图3-2软件结构图3.3网站功能设计在本网站中包括动态切换广告条、浮动广告、中文小日历、电子时钟、数学计算器、购物车、文字特效、用户注册等，并进行一定的美化和整理，基本完成商务网站的雏形结构。显示的样式要求如下：四、 详细设计在整个网站设计主要负责设计文字特效功能，文字特效的实现主要使用Java Script语言和Html语言来实现。4.1主要代码<script language="JavaScript"><!- Begintext = "电子商务" /显示的文字color1 = "blue" /文字的颜色color2 = "red" /转换的颜色fontsize = "8" /字体大小speed = 100; /转换速度 (1000 = 1 秒) i = 0;if (navigator.appName = "Netscape") document.write("<layer id=a visibility=show></layer><br><br><br>");else document.write("<div id=a></div>");function changeCharColor() if (navigator.appName = "Netscape") document.a.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 + ">");for (var j = 0; j < text.length; j+) if(j = i) document.a.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");else document.a.document.write(text.charAt(j);document.a.document.write('</font></font></center>');document.a.document.close();if (navigator.appName = "Microsoft Internet Explorer") str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">"for (var j = 0; j < text.length; j+) if( j = i) str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>"else str += text.charAt(j);str += "</font></font></center>"a.innerHTML = str;(i = text.length) ? i=0 : i+;setInterval("changeCharColor()", speed);/ End -></script> <script language="JavaScript"><!-done = 0;step = 4function anim(yp,yk)if(document.layers) document.layers"napis".top=yp;else document.all"napis".style.top=yp;if(yp>yk) step = -4if(yp<60) step = 4setTimeout('anim('+(yp+step)+','+yk+')', 35);function start()if(done) returndone = 1;if(navigator.appName="Netscape") document.napis.left=innerWidth/2 - 145;anim(60,innerHeight - 60)else napis.style.left=11;anim(60,document.body.offsetHeight - 60)/-></script><div id="napis" style="position: absolute;top: -50;color: blue;font-family:宋体;font-size:9pt;"><p>谢谢您的使用！</p></div><script language="JavaScript"><!-setTimeout('start()',10);/-></script> 效果图：五、 课设总结通过此次课程设计，使我更加扎实的掌握了有关电子商务方面的知识，在设计过程中虽然遇到了一些问题，但经过一次又一次的思考，一遍又一遍的检查终于找出了原因所在，也暴露出了前期我在这方面的知识欠缺和经验不足。实践出真知，通过亲自动手制作，使我们掌握的知识不再是纸上谈兵。过而能改，善莫大焉。在课程设计过程中，我们不断发现错误，不断改正，不断领悟，不断获取。最终的检测调试环节，本身就是在践行“过而能改，善莫大焉”的知行观。这次课程设计终于顺利完成了，在设计中遇到了很多问题，最后在老师的指导下，终于游逆而解。在今后社会的发展和学习实践过程中，一定要不懈努力，不能遇到问题就想到要退缩，一定要不厌其烦的发现问题所在，然后一一进行解决，只有这样，才能成功的做成想做的事，才能在今后的道路上劈荆斩棘，而不是知难而退，那样永远不可能收获成功，收获喜悦，也永远不可能得到社会及他人对你的认可！六、参考文献1 Nicholas C.ZakasJavaScript高级程序设计北京：人民邮电出版社出版社，2006年11月2 Java Script 从入门到精通（第二版）.清华大学出版社3 Javascript开发王/张亚飞编著北京电子工业出版社深入浅出4 周晓聪，等.面向对象程序设计与Java语言. 程序设计与北京：机械工业出版社，2004.35JavaScript Christian Heilmann 著 牛海彬 等译 人民邮电出版社
