电子购物web设计基础论.doc

WEB开发技术课程答 辩 项 目 文 档题 目 电子购物 学 院 专 业 学生姓名 学 号 班 级 指导教师 2015年1月 3 日目录摘要3第一章 绪论41.1 网页设计概述41.2 网页设计的要素4第二章 网页设计语言概述62.1 HTML语言介绍 62.1.1 HTML语言的特点 62.1.2 HTML语言的编辑软件 62.2 常用的HTML语言编辑软件72.2.1 Dreamweaver72.2.2 Myeclipse72.2.3 UltraEdit82.2.4 JavaScript82.3 本章小结10第三章 网页功能设计概述113.1 需求分析113.1.1 网站建设经济可行性分析113.1.2 网站建设技术可行性分析113.1.3 网站建设操作可行性分析123.2 网站页面的整体布局123.3.1 页面功能调用关系133.3.2 各页面模块功能详介图13第四章关键代码技术184.1 各页面模块关键代码18第四章 总结23参考文献24摘要本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互窗口和框架进行详细描述，并利用具体的实例进行验证。 本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEB页面信息的交互窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。 关键词： 网页制作 网页设计 HTML JavaScript第一章 绪论随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。 1.1 网页设计概述网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。 1.2 网页设计的要素 网页设计的两大要素是：整体风格和色彩搭配。1、 确定网站的整体风格在这里，网上查阅一些参考经验：1 将标志logo，尽可能的放在每个页面上最突出的位置。2 突出标准色彩。3 总结一句能反映贵站精髓的宣传标语4 相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的2、 网页色彩的搭配1 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。2 用两种色彩。先选定一种色彩，然后选择它的对比色。3 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。在网页配色中，还要切记一些误区：1 不要将所有颜色都用到，尽量控制在三至五种色彩以内。2 背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 第二章 网页设计语言概述2.1 HTML语言介绍 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 2.1.1 HTML语言的特点 HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下： 1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。 2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。 3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。2.1.2 HTML语言的编辑软件 HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。 2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。 3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。 一个HTML文件由一个HTML元素组成，即文件以开始。以结束，文档中其他元素及其属性的声明都是HTML的元素体。 HTML元素的元素体和元素体由两大部分组成，即头元素和体元素。头元素和体元素的元素体又由其他元素、文本和注释等组成。 2.2 常用的HTML语言编辑软件2.2.1 Dreamweaver Dreamweaver是美国Adobe(原Macromedia，2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。最新版本为CS4，发布于2008年9月。Dreamweaver是所见即所得的编辑器，可以直接在里面插入图片、输入文字，Dreamweaver会自动生成HTML代码。对于初学者来说，Dreamweaver是比较好的入门工具，设计操作页方便快捷。2.2.2 MyeclipseMyEclipse企业级工作平台（MyEclipse Enterprise Workbench ，简称MyEclipse）是对Eclipse IDE的扩展，利用它我们可以在数据库和J2EE的开发、发布，以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的J2EE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML, Struts, JSF, CSS, Javascript, SQL, Hibernate。在结构上，MyEclipse的特征可以被分为7类： 1.J2EE模型 2.WEB开发工具 3.EJB开发工具 4.应用程序服务器的连接器 5.J2EE项目部署服务 6.数据库服务 7.MyEclipse整合帮助对于以上每一种功能上的类别，在Eclipse中都有相应的功能部件，并通过一系列的插件来实现它们。MyEclipse结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的J2EE集成开发环境，支持代码编写、配置、测试以及除错。2.2.3 UltraEdit UltraEdit 是一套功能强大的文本编辑器，可以编辑文本、十六进制、ASCII 码，完全可以取代记事本（如果电脑配置足够强大），内建英文单字检查、C+ 及 VB 指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。UltraEdit 是 Windows 旗下一款流行的老牌文本/HEX 编辑器（非开源）UltraEdit 正被移植到 Linux 平台。该移植名为 UEX，意即 UltraEdit forLinux。UEX具有原生的 Linux 外观，其界面、配置、热键等与 Windows 版并无二致。UltraEdit是一个49.95美元的共享软件，提供了友好界面的编程编辑器，支持语法高亮，代码折叠和宏，以及一大堆其他的功能，内置了对于HTML、PHP和JavaScript等语法的支持。在熟悉HTML代码之后，使用UltraEdit是比较好的工具，因其可以给源代码着色，会将HTML标签使用不同的颜色显示出来，若输入错误，则不会着色，在很大程序上减少输入的错误。此外，UltraEdit打开文件的速度快，且在一个UltraEdit窗口中可以编辑多个文件、多次返回。但用UltraEdit需熟悉并掌握网页编辑的知识。对初学者而言使用Dreamweaver更加方便合理。2.2.4 JavaScript 一、JavaScript概述 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：1、是一种脚本编写语言 JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。 它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 2、基于对象的语言。 JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 3、简单性 JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。4、安全性 JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 5、动态性的 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 6、跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。 总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如：form的输入) ，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。 JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。二、JavaScript和Java的区别 虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是Live Script；而Java的前身是Oak语言。下面对两种语言间的异同作如下比较： 1、基于对象和面向对象 Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。 JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。 2、解释和编译 两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。 JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。2.3 本章小结本章介绍了网页设计语言HTML和JavaScript。并对开发软件进行介绍.第三章 网页功能设计概述3.1 需求分析3.1.1 网站建设经济可行性分析传统的销售方式商品放在店铺里供顾客挑选的销售方式，商店的客流量受店铺的规模、位置等客观因素影响，且商品的存放与销售需要人力进行管理，雇员的工资、店面的租金等又增加了成本，顾客也不能迅速找到所需要的商品，而网上商店只需要一个可以存放商品的仓库，相比传统销售方式在店面规模、位置、人力资源登多方面限制少，可带来可观的经济利益，对客户而言买到所需要的商品更为方便、快捷。3.1.2 网站建设技术可行性分析 1，网络应用基础设施完善，由于信息技术的发展，我国的计算机网络飞速发展，先后建成了中国公众多媒体通信网、China Net、中国教育与科研计算机网络等组成了中国Internet主体，网络应用进入了企业与普通家庭，这为发展电子商务提供了基础设施。 2，网络安全技术应用，包括加密算法、CA数字认证、数字签名等，为电子商务应用提供安全保证，它实现了网络传输数据的安全性、完整性以及交易双方的不可抵赖性，身份认证等。 3，电子支付技术应用，通过电子支付网关实现交易双方电子货币结算，解决电子商务的支付问题，可加速交易过程的实现。 4，法律保障，交易活动如果没有得到法律保障就等于它的合法性得不到承认，其生存空间就会受到挤压，随着我国电子商务法律法规的颁发，将解决电子商务活动的法律技术问题，网上商店经营活动将得到法律的保护。 5，最后，就是网络技术的普及与掌握，如网络互联、网络安全技术、Web技术（如Html,XML,CGI等）、各种安全协议（Https,SET,SSL等）、网络数据库技术等，使我们有能力开发实现适合自己的电子商务系统。成为我们构建网站的直接技术支持。因此，公司构建网上购物电子商务网站系统的技术瓶颈问题（网络应用基础设施、安全、支付、法律保障、网站开发技术）得到了有效解决，公司构建网上购物电子商务网站技术上可行。 3.1.3 网站建设操作可行性分析 网站的操作基于B/S浏览器的页面操作，用户无需学习，操作简单明了。管理员无需具备专业知识，只需要对一些日常数据信息输入并管理。3.2 网站页面的整体布局1，网站共有7项功能页面，各页面简介如下 （1）frame.html :整体框架 (2) banner.html :网页标题栏 （3）product.html:产品页面，功能有，可查看大图、点击查看产品详细信息、点击购买及相关的所购商品信息。 （4）main.html :订单页面，显示所购商品信息及所需物流信息。 （5）screen.htm :商品显示器的详细信息 （6）laptop.htm :商品笔记本电脑的详细信息 （7）cpu.htm :商品台式电脑的详细信息 2，网站相关的信息显示在浏览器的同一页面中，其布局如下3.3 各页面功能简介3.3.1 页面功能调用关系各页面功能上述已简介，这里不再赘述，各页面功能调用关系如下所示传入数据 (注：frame.html,banner.html页面无实用功能，故不在此图中)3.3.2 各页面模块功能详介图1，产品栏（product.html）（1）点击后，提示框提示输入选购产品数量信息:（2）若选购数量信息输入为非数字或未输入则提示框提示错误输入非数字：未输入数据：2，台式电脑产品信息（cpu.html）(1) 介绍产品详细信息产品售服、参数介绍，点击“在线购物”框可转入订单页面:视频介绍：3，笔记本电脑产品信息（laptop.html）（1） 介绍产品详细信息 产品售服、参数介绍，点击“在线购物”框可转入订单页面:视频介绍：4，显示器产品信息（screen.html）（1）介绍产品详细信息 产品售服、参数介绍，点击“在线购物”框可转入订单页面:视频介绍：5，订单（main.html）（1） 显示所购产品信息（2） 若顾客输入信息错误则提示 (注：frame.html,banner.html页面无实用功能，故不详述)第四章关键代码技术本章为在网站编写过程中各页面功能所用到的关键技术在本章详细介绍，说明所遇到的技术问题以及解决方法。4.1 各页面模块关键代码1，产品栏（product.html）关键代码共两处：（1） 选购产品代码，三个产品此部分代码类似，这里以产品台式电脑的代码为例，这个函数功能为判断输入的所购商品信息是否正确（调用isnumber()函数判断是否为数字）及向订单(main.html)传送所购产品信息并计量产品价格与邮递费用：function computer()if(menu.cpu.checked=true)var input=prompt(请输入选购数量);if(input=|input=undefined|input=null)menu.cpu.checked=false;alert(请输入数据);return false; else if(isnumber(input)=true)postage+=eval(2000*eval(input)*0.01;goods+=eval(2000*eval(input);parent.main.document.order.S1.value+=n 台式电脑：+input+n;parent.main.document.order.fei.value=postage;parent.main.document.order.trade.value=goods;parent.main.document.order.total.value=eval(parent.main.document.order.trade.value)+eval(parent.main.document.order.fei.value);return true;所遇困难及解决办法：此部分难点在于如何向订单(main.html)传送所购产品信息并计量产品价格与邮递费用，开始觉得很是麻烦，在网上查阅多次试验也未成功，最后在从图书馆所借阅的资料中找到相似案例，终于解决此问题。（2） 产品图片放大与回原功能代码，两部分代码类似，这里以放大功能代码为例。此函数功能为鼠标进入图片区域时图片放大通过获得id属性修改css文件实现。function bigger()/鼠标在图像上时图像变大var cpu= document.getElementById(cpu);/判断鼠标是否在控件var lap= document.getElementById(lap);var sc= document.getElementById(sc);if(cpu.contains(window.event.srcElement)cpu.style.width = 252px; cpu.style.height = 200px;if(lap.contains(window.event.srcElement)lap.style.width = 252px; lap.style.height = 200px;if(sc.contains(window.event.srcElement)sc.style.width = 252px; sc.style.height = 200px;所遇困难及解决办法：这部分代码通过网上查阅而得，最初计划每个产品的放大与回原功能各写一个函数，但此种方法使代码出现过多冗余，故放弃最初计划，再次网上查阅找到定义var数据类型，获得每个产品id，使相同功能在同一函数中实现。在随后（4.1 2（1）处）产品信息页面中的鼠标进入图片区域时其他图片发生响应的功能所需代码与此类似，但用这种方法就不行了，只能各写一个函数。2，台式电脑(cpu.html),笔记本电脑（laptop.html），显示器（screen.html）三种页面功能多为相似，故一并处理，以台式电脑(cpu.html)为例关键代码为一处：（1） 鼠标进入图片时其他图片发生响应的代码，共三处响应事件，功能类似，只以一处为例：function overParameter() document.getElementById(parameter).src=laptopzcg.jpg;document.getElementById(parts).src=laptopb.jpg;document.getElementById(service).src=laptops.jpg;document.getElementById(info).src=cpuzc.jpg; 所遇困难及解决办法：这里最大的问题是繁琐的图片截图以及图片顺序处理，最初网站页面设计过于简单，因此浏览其他相似网站，模仿其功能，而后是繁琐的截图与处理，耗时耗力。3，订单（main.html）关键代码为一处：（1） 对物流所需信息的验证，多用正则表达式：function getCheck()var name = document.getElementById(name).value; /姓名var phone = document.getElementById(phone).value; /电话var address = document.getElementById(address).value; /地址var zip= document.getElementById(zip).value;/邮编var cardnum= document.getElementById(cardnum).value; /银行账号var regPhone=/(d2,3)|(d3-)?13d9$/g;/电话正则验证var regZip=/1-910-95$/;/邮编正则验证var regBank=/(d4s-?)4,5d3$/;/19或23位的银行账号验证if(name=|name=null)document.getElementById(name).value=用户名不能为空！; if(!regPhone.exec(phone)document.getElementById(phone).value=号码错误！; if(address=|address=null)document.getElementById(address).value=地址不能为空！;if(!regZip.exec(zip)document.getElementById(zip).value=邮编错误！;if(!regBank.exec(cardnum)document.getElementById(cardnum).value=账号错误！;所遇困难及解决办法：最初对正则表达式知识不了解，查阅图书资料也不甚了了，最后从网上挨个搜索各信息的正则表达式验证，解决问题。但在点击提交按钮时页面出现信息闪灭问题，网上查阅后在点击事件中添加return false;时方解决问题。 onclick=getCheck();return false;(注：frame.html,banner.html页面无实用功能，故不详述) 第四章 总结通过本次开发，对JavaScript的相关知识有了更详细的认知，但更明白仍有许多知识未涉足、了解，同时体会到网页设计看似简单实际做时的困难与繁复。此项目的优点和不足在于网页设计的美观性、用户体验性、后台、安全的处理多有待解决。代码编写时没有良好的编程习惯，使他人看来代码层次不清晰，难于理解与阅读。今后的改进方向对网页后台进行处理以及学习动态网页的处理与实现。 参考文献1张立峰编著：JavaScript动态网页技术详解，北京:电子工业出版社,2009年版1王润森, 王俊杰编著：精通JavaScript动态网页编程(实例版)，北京:人民邮电出版社,2007.10