《电子商务网站建设与管理》课件-项目三

项目三

电子商务网站前台功能的设计与实现

任务一：电子商务网站的界面设计与制作任务二：动态网页制作技术任务三：Web数据库技术任务四：ASP.NET编程实现下一页任务一电子商务网站的界面设计与制作

知识点：1、学会电子商务网站的布局和色彩设计2、掌握基本的HTML标记和属性3、掌握DIV+CSS静态网页制作技术下一页任务描述网站是由网页组成的，网页中包含着各种各样的元素，如文字、图像、表格、超级链接等，它是用HTML等语言编写的，必须要合理布局，并设计显示样式，再经过浏览器的解释，才能在浏览器窗口中显示预想的网页。下一页一、电子商务网站设计的基本原则1．信息内容要新颖、准确、精练、专业、有特色2．快速安全的访问（1）提高流浏览者的访问速度（2）要安全、运转良好的硬件和软件环境（3）遵循“三次点击”原则：网站的任何信息都应该在最多三次点击之内得到。一般浏览者不会有足够的耐心去寻找被埋没在层层链接之后的信息。3．提供交互性，方便用户的访问和购买（1）提供交互性（2）完善的检索和信息交互能力（3）方便用户访问与购买任务知识

下一页任务知识

二、网页版面布局的设计设计版面布局就像编辑传统的报杂志一样，要将网页看作一张报纸、一本杂志来进行排版布局，版面指的是浏览器看到的完整的一个页面，包括可以看到的框架和层。布局就是以最合适浏览的方式将最合适浏览的方式将图片和文字排放在页面的的不同位置。1．页面设计的基本步骤下一页2．常见的版面布局形式（1）“T”结构布局（2）“口”型布局（3）“三”型布局（4）对称对比布局（5）POP布局下一页三、网页色彩的设计色彩是网页设计的灵魂之一，是最先也是最持久地印记在浏览者脑海中的网站印象。在网页设计中，根据和谐、均衡和重点突出的原则，将不同色彩进行组合、搭配来构成美丽的页面。1.色彩的相关知识（1）色相（2）明度（3）纯度2．非色彩与色彩的应用在非色彩的搭配中，黑色与白色是最简单、最基本的搭配，白字黑底、黑字白底都显得非常醒目。灰色是万能色，可以与任意色彩搭配，也可以帮助两种对立的色彩和谐过度。（1）红色：一种激奋的色彩，具有刺激效果，给人热烈、活力、危险、愤怒的感觉。（2）绿色：是植物的颜色，它象征着生命。与其他颜色搭配使用，会增添一丝活泼、一丝轻快。此种颜色给人自然、安静、健康、成长、新鲜的感觉。（3）蓝色：是最具凉爽清新的色彩。一般可联想到海阳、天空。在西方，蓝色是身份高贵的象征。能够营造淡雅、浪漫的气氛。（4）黄色：是具有快乐、智慧、轻快的个性色彩，给人光明、希望、富贵、朝气的感觉。（5）橙色：既有红色的热情又有黄色的光明以及活泼的特质。它虽没有红色那样激烈，但是可营造朝气蓬勃的气氛，受到人们的普遍喜爱。给人温暖、嫉妒、欢喜的感觉。在设计页面时，我们通常的做法是：主要内容文字用非色彩（黑色），边框、背景、图片用彩色，这样页面整体不单调，用户看主要内容也不会眼花。3．网页色彩搭配的原则（1）特色鲜明。一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。（2）搭配合理。要注意在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉。（3）色彩的合适性。色彩和网站要表达的内容气氛相适应。如用粉色体现女性站点的柔性。（4）色彩的联想性。色彩的心理作用使人看到某种色彩时产生联想，使浏览者产生更深层次的心灵感应，印象更加深刻。（5）讲究艺术性。网站设计也是一种艺术活动，因此它必须遵循艺术规律，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。四、网站页面元素设计1．Logo设计网页Logo是指网站的标志、标识。Logo是企业综合信息传递的媒介，是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准视觉符号。Logo设计将具体的事物、事件、场景和抽象的精神、理念、方向通过特殊的图形固定下来，使人们在看到Logo标志的同时，自然地产生联想，从而对企业产生认同。网页中的Logo可分为图案Logo、文字Logo、图文Logo。Logo设计原则主要有：（1）遵循人们的认识规律，突出主题、引人注目，能够在方寸之间概括出站点的理念，保持视觉平衡、讲究线条的流畅，使整体形状美观，用反差、对比或边框等强调主题。（2）外观尺寸要根据站点页面的整体版面设计来确定，选择恰当的字体，注意留白，给人想象空间。（3）在色彩运用上基色要相对稳定，强调色彩的形式感、记忆感和感情规律。合理使用色彩的对比关系，重视色彩的注目性。（4）在形式上重视简约、高度概括，以简洁的符号化的视觉艺术形象把网站的形象和理念长留于人们心中。2．Banner设计网页Banner是指网页中的广告。它可以分为横幅广告、通栏广告、弹出窗口广告、擎天柱广告、按钮广告、画中画广告、漂浮〔滑动〕广告、文字链接广告、隐藏页面广告、播放式广告等。Banner设计原则主要有：（1）文字的编排简洁、和谐。（2）内容醒目、美观，视觉效果好。（3）广告内容的方向正确。（4）激起点击欲望。（5）适当的留空，避开广告条的边缘。3．导航设计导航是网页的目录，网页之间的联系和分类通过它来实现。导航应放置在页面的醒目位置，让浏览者在第一时间看到。网页中的导航通常分为文字导航、图像导航、交替图像导航、下拉菜单导航、Flash导航。导航设计原则主要有：（1）导航设计合理、便捷。浏览者通过导航应该可以方便地到任何页面。（2）导航内文字组织清晰、明确、简洁，符合浏览者的认知心理。（3）导航条件不易过多。除门户网站外，商业网页的导航不易过多。（4）将导航的设计融入整个网站设计中，使浏览者通过导航加深对企业形象的认识。4、网页图片和文字的设计（1）网页中的图片为了使网页更加生动精彩，网页中常常放上一些图像来点缀页面。图像可以弥补文字的不足，图像并不能完全取代文字，图像文件的容量比文本文件要大许多，这样会给网页增重，就会影响网页的下载速度，在设计网页时，既要考虑到网页的精彩生动，还要注意内容简练。（2）文字的设计网站的内容是由文字、符号、动画等构成的，其中文字占很大的比重，原因是文字传达信息符合常人的接受习惯，而且文字所占的存储量极小（一个汉字只占两个字节的空间），有利于浏览及下载，可以节省浏览者的时间和费用。文字是网页中最基本的要素，具体选用哪种字体，应该根据站点的性质、内容和访问站点的用户群来确定。五、常用的HTML标记和格式1．设置正文标题2．段落标记3．强制换行4．粗体、斜体、下划线、上标和下标5．字体标记6．列表7．欲格式化文本8．图像9．超级链接10．表单11．表格12．框架13．移动的字体和图片14．网页多媒体六、DIV简介DIV是HTML中的标记，也称作层。DIV标记对是用来布局的，可以包含表格、表单、文本和图像等对象，还可以嵌套DIV标记，而且没有层数限制。1．DIV与TABLE的区别2．如何用DIV布局3．使用DIV注意事项七、CSS简介CSS是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS通常在网页制作中起重要作用，而且还可以减少网页代码量，更能提高网络访问网页的速度。CSS常常与HTML标记配合使用，通过链接方式对HTML标记控制，使网页达到更美观的效果。1．选择符2．字体设置3．文本设置（1）文本修饰（2）文本对齐（3）文本缩进4．设置背景5．设置尺寸6．设置对象边框7．定位8．列表9．CSS设置滚动条任务实施

博客网站个人主页都包含首页、相册、个人信息、日志、好友留言和评论等功能模块，即在主页中显示所有模块最新内容。当然，显示的内容也是有规律的，如好友访问该博客后，是按最近访问的顺序显示，同理，给博主留言的也是从时间上往后推的排列方式。博客网站个人主页都包含首页、相册、个人信息、日志、好友留言和评论等功能模块，即在主页中显示所有模块最新内容。当然，显示的内容也是有规律的，如好友访问该博客后，是按最近访问的顺序显示，同理，给博主留言的也是从时间上往后推的排列方式。步骤一、分析主页需求步骤二、确定内容模块步骤三、画出效果图步骤四、用DIV布局框图1．页眉2．实现内容模块3．页脚步骤五、CSS实现框图1．实现内容模块2．实现整页效果步骤六、添加图片文本文字在网页中很关键，也是博客中所表现出来的内容，在博客系统中，文本都是从步骤七、加入文字步骤八、调整全页面步骤九、其他页面的布局巩固与拓展[拓展任务]1、什么是HTML？它与Web页面有什么关系？2、什么是超链接？如何指定目标文件的地址？任务二动态网页制作技术

任务目标

掌握动态网站工作原理，了解动态页面和静态页面的区别学会配置Web服务器，安装并调试IIS掌握JavaScript脚本语言基本语法和结构掌握JavaScript自定义函数和内置对象任务描述在学习动态网页之前，必须先熟悉如何搭建动态网站环境，帮助用户在本地计算机上模拟远程服务器组建小型动态网站运行环境，以实现上机学习ASP.NET应用开发的目的。除了静态页面，浏览器还支持JavaScript语言技术，使得我们可以将HTML文档中的元素视为编程对象，通过JavaScript程序控制这些对象完成与用户的交互，还可以控制HTML元素及其样式，使网页成为动态网页。任务知识

一、认识动态网站WWW(WorldWideWeb，万维网)技术是构建在浏览器/服务器(B/S)架构和HTTP协议基础上的，其运行模式可以简要概括为：请求→处理→响应，B/S运行原理示意图如下所示。基于Internet的浏览器/服务器（B/S）架构系统目前已经成为行业标准，它具有如下有点。1.运行比较稳定由于服务程序一般都运行在服务器上，客户端不需要运行服务程序，因此只要服务器能正常运行，整个系统就会稳定运行。2.方便远程维护由于是基于Internet技术，通过上网便可对用户提供技术支持，而不需要上门服务。3.客户端要求比较低计算机的升级速度非常快，对于新的软件系统，往往因为难以及时升级硬件而不能使用。而基于Internet的系统，只要计算机可以上网，就可以使用系统。4.使用方便一般来说，只要用户能够上网，无论在世界什么地方、什么时间，都可以随时随地的使用系统，而不像局域网那样受地域限制。5.便于拓展服务基于Internet技术优势，更容易开展符合网络传播的各种信息服务，如电子商务、信息查询、信息搜索和各种个性化服务项目。二、WEB服务器设置动态网页程序基本上是在服务器端执行，需要搭建一个动态网页的运行环境，即配置一个能够执行动态网页程序的Web服务器。常用的Web服务器是微软公司的Internet信息服务(InternetInformationServer,IIS)。但是在WindowsXP系统安装盘中，默认情况下IIS是不会随系统一起安装，所以用户必须在单独安装IIS时需要Windows系统盘，或者从网上下载安装程序。三、JavaScript概述JavaScript是由Netscape公司开发的一种基于对象的网页脚本编程语言，它支持客户端和服务器端应用程序的开发。JavaScript解决了HTML和CSS样式只能做静态网页的缺陷，将静态网页变成了动态网页，使用户对网页的操作更加方便。网络资料中，常把JavaScript简称JS。1.JavaScript语言特点JavaScript脚本语言也是类C语言，与C#语法有很多相似之处。JavaScript脚本语言的主要语法特点如下。（1）变量不必申明类型，但赋值后类型自动确定，也需要转换。（2）基本数据类型、运算符、流程控制与C#语言类似。（3）字符串类型、布尔类型、对象的初始化、null值也与C#语言类似。（4）自定义函数无返回值类型声明。2.如何在网页中使用JavaScript脚本语言JavaScript是Script代码，即脚本代码。HTML规范为脚本代码定义了统一而灵活的插入方式，可以概括为以下4类。（1）在HTML页面的任意位置插入JavaScript代码四、JavaScript基本语法JavaScript只能由客户端浏览器来编译解析，且每次访问解析、执行一次。JavaScript的基本语法如下。1.语言规范JavaScript是一种严格区分大小写的语言，getdate()和getDate()有着本质的区别，完全是两种不同的方法。2.语句规范JavaScript语句全部要以分号“；”结束，一行中可以写多句代码，但是有些新型的浏览器支持每行一句代码且不必以分号结束的格式，但建议还是采用标准格式，以便代码能在更多的浏览器上运行。3.代码执行JavaScript代码是自上而下依次解析并执行的，因此如果一个文件中定义了两个名称相同的方法，后面的方法定义会覆盖前面的定义。4.注释JavaScript注释采用两种方法：//和/*…*/，其中前者用于单行注释，后者用于单行或多行注释，且前者可以嵌套在后者中，用法与C#一样。5.标识符JavaScript中的标识符可以由任意顺序的大小写字母、数字、下划线和美元符号等组成，但是标识符不能以数字开头，不能使用JavaScript中保留的关键字。五、JavaScript数据类型及运算JavaScript是弱类型语言，变量可不必提前声明类型，赋值后类型自动确定；变量如需提前声明统一用“var”关键字。1.JavaScript数据类型2.转向语句转向语句主要包括以下3种。（1）break语句break语句的作用除了跳出switch语句外，还可以无条件跳出包含它的最内层循环。（2）continue语句continue也是用于中止循环，它与break语句的区别在于它只是中止本次循环，接着执行下一次循环，而不是跳出整个循环体。（3）return语句return语句用于函数中，返回函数的值。七、JavaScript函数JavaScript中的函数，有的是内部函数，有的是用户自己定义函数。本部分主要介绍用户自定义函数的声明、调用等。1.函数的定义和调用八、JavaScript对象在JavaScript程序中除了可以操作DOM对象，JavaScript本身也是基于对象的编程语言，有很多有用的内置对象。每个对象有它自己的属性、方法和事件。1.字符串String对象String对象是字符串对象，用于处理已有的字符串，任何字符串变量或字符串常量都是String对象。（1）String对象的属性String对象的只有一个属性length，表示字符串的长度，即字符串中的字符个数，包括任何符号。九、正则表达式正则表达式用来进行模式匹配或者字符串处理。从直观上看，可以认为正则表达式是包含在两个斜杠之间的字符。在JavaScript中，正则表达式由RegExp对象表示。任务三Web数据库技术

任务目标

了解数据库DB和数据库管理系统DBMS的概念掌握三种基本数据模型：层次模型、网状模型和关系模型了解Web数据库的定义掌握Web数据库的连接及数据库内容的调用任务描述随着计算机技术的应用和普及，日常生活中的信息量急剧增加，人们开始普遍借助于数据库管理技术来科学的保存和管理大量复杂的数据，以便充分利用信息资源。数据库技术及应用是一门包含适量的数据库理论知识，并与实际结合紧密的课程，通过本节的学习，学生能够掌握数据库设计的原理和方法，以及如何进行Web数据库的简单连接、内容的调用等。任务知识一、数据管理技术的产生和发展对数据进行收集、保存、加工和传播等一系列活动的总和称为数据处理，数据处理的核心问题就是数据管理。数据管理技术是指对数据分类、编码、存储、检索和维护的技术。数据管理技术的发展经历了如下三个阶段：人工管理阶段、文件系统阶段及数据库系统阶段。1.人工管理阶段2.文件管理阶段3.数据库系统阶段二、数据库与数据库管理系统数据库是指存放数据的仓库，只不过这个仓库是在计算机存储设备上，而且数据是按一定的格式存放的。人们收集并抽取出一个应用所需要的大量数据之后，应将其保存起来以供进一步加工处理，进一步抽取有用信息。现在人们可以借助计算机和数据库技术科学的保存和管理复杂的大量的数据，以便能方便而充分的利用这些宝贵的信息资源。1.数据库（1）数据定义功能（2）数据操纵功能（3）数据库的建立和维护功能（4）数据库的运行管理（5）数据字典三、数据模型计算机不可能直接处理现实世界中的客观对象，必须由人们使用数据模型来抽象、表示和处理现实世界中的数据和信息，把具体事物转换成计算机能够处理的数据。具体步骤是，首先把现实世界中的客观对象抽象为某一种信息结构，这种信息结构并不依赖于具体的计算机系统，不是某一个DBMS支持的数据模型，而是概念级的模型，然后再把概念模型转换为计算机上某一DBMS支持的数据模型。1.组成要素（1）数据结构（2）数据操作（3）数据的约束条件2.概念模型概念模型用于信息世界的建模，是现实世界到信息世界的第一层抽象，是数据库设计人员进行数据库设计的有力工具，也是数据库设计人员和用户之间进行交流的语言，因此概念模型一方面应该具有较强的语义表达能力，能够方便、直接的表达应用中的各种语义知识，另一方面它还应该简单、清晰、易于用户理解。（1）基本概念（3）层次模型（4）网状模型（5）关系模型四、Web数据库Web数据库属于深度Web（DeepWeb）的一种资源形势，通常指在互联网中以Web查询接口方式访问的数据库资源，其结构是后台采用数据库管理系统存储数据信息，对外提供包含表单的Web页面作为访问接口，查询结果也以包含数据列表的Web页面形式返回给用户。当前比较流行的Web数据库主要有：SQLServer、MySQL和Oracle。这3种数据库适应性强，性能优异，容易使用，在国内得到了广泛的应用。五、ADO.NET简介对数据库操作是网站开发中的重中之重，ADO.NET则是（ASP.NET）网站通往数据库之间的桥梁。1.什么是ADO.NETADO.NET的名称起源于ADO（ActiveXDataObjects），这是一个广泛的类组，用于在以往的Microsoft技术中访问数据。ADO.NET是新一代数据存储技术，是在.NET开发环境中优先使用的数据访问接口。通俗的讲，ADO.NET就是设计了一系列对各种类型数据的访问形式，并提供了对应的类，在类中提供了与对应数据交互的属性和方法，编程者可以通过这些属性和方法很方便的对各种数据进行存取操纵，例如SQL数据库、Access数据库、Oracle数据库等。2.ADO.NET的结构下一页ADO.NET有5个主要的对象。

（1）Connection：和数据库交互，必须连接它。连接帮助指明数据库服务器、数据库名字、用户名、密码，和连接数据库所需要的其它参数。Connection对象会被Command对象使用，这样就能够知道是在哪个数据源上面执行命令。与数据库交互的过程意味着必须指明想要执行的操作。这是依靠Command对象执行的。开发人员使用Command对象来发送SQL语句给数据库。Command对象使用Connection对象来指出与哪个数据源进行连接。开发人员能够单独使用Command对象来直接执行命令，或者将一个Command对象的引用传递给DataAdapter，它保存了一组能够操作下面描述的一组数据的命令。（2）Command：成功与数据建立连接后,就可以用Command对象来执行查询、修改、插入、删除等命令；Command对象常用的方法有ExecuteReader（）方法、ExecuteScalar（）方法和ExecuteNonQuery（）方法；插入数据可用ExecuteNonQuery（）方法来执行插入命令。（3）DataReader：许多数据操作要求开发人员只是读取一串数据。DataReader对象允许开发人员获得从Command对象的SELECT语句得到的结果。考虑性能的因素，从DataReader返回的数据都是快速的且只是“向前”的数据流。这意味着开发人员只能按照一定的顺序从数据流中取出数据。这对于速度来说是有好处的，但是如果开发人员需要操作数据，更好的办法是使用DataSet。（4）DataAdapter：某些时候开发人员使用的数据主要是只读的，并且开发人员很少需要将其改变至底层的数据源。同样一些情况要求在内存中缓存数据，以此来减少并不改变的数据被数据库调用的次数。DataAdapter通过断开模型来帮助开发人员方便的完成对以上情况的处理。当在一单批次的对数据库的读写操作的持续的改变返回至数据库的时候，DataAdapter填充（fill）DataSet对象。DataAadapter包含对连接对象以及当对数据库进行读取或者写入的时候自动的打开或者关闭连接的引用。另外，DataAdapter包含对数据的SELECT、INSERT、UPDATE和DELETE操作的Command对象引用。开发人员将为DataSet中的每一个Table都定义DataAadapter，它将为开发人员照顾所有与数据库的连接。所以开发人员将做的工作是告诉DataAdapter什么时候装载或者写入到数据库。（5）DataSet：是数据在内存中的表示形式。它包括多个DataTable对象，而DataTable包含列和行，就象一个普通的数据库中的表。开发人员甚至能够定义表之间的关系来创建主从关系（parent-childrelationships）。DataSet是在特定的场景下使用――帮助管理内存中的数据并支持对数据的断开操作的。DataSet是被所有DataProviders使用的对象，因此它并不像DataProvider一样需要特别的前缀。3.ADO.NET与SQLServer数据库的连接SQLServer.NETFramework数据提供程序位于System.Data.SqlClient命名空间中，它使用SqlConnection对象与MicrosoftSQLServer数据库建立连接。通常有以下两种形式的连接字符串。①在连接字符串中指定服务器名、用户ID、用户密码、数据库名信息六、ADO.NET与SQLServer数据库的交互为了方便应用程序对SQLServer数据库的操作，ADO.NET提供了许多对象模型，比较常见的有SqlConnection对象、SqlCommand对象、SqlDataAdapter对象、SqlDataReader对象、SqlCommandBuilder对象、SqlParameter对象和SqlTransaction对象。这些对象提供了对SQLServer数据源的各种不同的访问功能，全部归类于System.Data.SqlClient命名空间下，使用时必须引用该命名空间。3.使用SqlDataAdapter对象在无连接状态下操作数据4.使用DataTable对象操作数据DataTable对象表示保存在本机内存中的表。创建DataTable对象；在DataTable对象中添加列；在DataTable对象中设置主键；在DataTable对象中添加行。5.使用DataSet对象操作数据DataSet是由表、关系和约束的集合组成。创建DataSet对象。填充DataSet