电子商务网站开发与管理

电子商务网站开发与管理第1章电子商务网站概述目录1.1对电子商务网站的认识 1.2电子商务网站的分类与发展1.3电子商务网站的功能和实现要素1.4电子商务网站的内容和功能电子商务网站的定义电子商务网站是企业、机构或政府在互联网上建立的门户，通过网站可以宣传企业形象，发布、展示商品信息，实现电子交易，并通过网络开展与商务活动有关的各种售前和售后服务，全面实现电子商务功能①企业在Internet上的门户；②企业电子商务系统的重要组成部分；③企业开展电子商务活动的基本手段；④企业与市场进行信息交换的平台；⑤企业与外界进行资源交换的平台。企业实施电子商务网站的意义有利于大幅提升企业知名度及影响力，促进销售额的提升。有利于企业拓宽发展空间。减少了各种中间环节，交易成本显著降低。加强了与客户的沟通和联系，提供更优质的服务。有利于快速掌握市场反馈信息，对产品进行相应调整。有利于兼并上下游企业，形成产业链延伸。电子商务网站的类型1.按照交易对象的不同分类B2B、B2C、C2C、B2G2.按经营商品种类的宽度分类综合型网站、垂直型网站3.按业务范畴和运作方式分类非交易型、半交易型、交易型按网站运作广度和深度分类专门型公司型垂直型水平型中国兰花交易网/阿里巴巴/诺基亚/A4583016

戴尔公司按业务范畴和运作方式分类东软集团网站

非交易型协程网

/半交易型亚马逊网上商店

全交易型电子商务网站概述商务教研室课程组2008年3月1.2.2电子商务网站的常见形式门户网站商城网站中介网站行业网站电子商务网站的类型电子商务网站的发展交易型网站营销型网站展示型网站

中国移动网站建设变迁：2000年中国移动通信网站的变迁

2002年中国移动

2003年中国移动/web/20060101040308//

2008年中国移动电子商务网站的作用是企业开展网络营销的工具是体现电子商务个性化服务的平台是企业商家的门户是进行电子商务活动信息交流的枢纽电子商务网站概述商务教研室课程组2008年3月电子商务网站的开发技术客户端开发技术有：（1）HTML；（2）CSS；（3）JavaScript服务器端的开发技术（1）ASP（2）PHP（3）JSP（4）ASP.NET客户端技术与服务器端技术的结合Ajax电子商务网站的特点（1）商务性（2）服务性（3）安全性（4）可扩展性电子商务网站的主要评价指标PR值（PageRank）PV值（PageView）提袋率流量转化率网站粘度电子商务网站内容的整体策划网站的目标定位网站信息内容的确定网站客户定位网站盈利模式的设定网上购物流程的设定客户付款方式的设定物流配送作业处理的设定网络广告促销计划网站结构：网站布局、栏目设置、信息的表现形式等网站内容：通过网站向用户传递的所有信息网站功能：必要的技术支持系统网站服务：网站可以提供给用户的价值企业网站四项基本要素网站功能网站服务网站内容网站结构网站4大要素基于用户体验的商务流程设计找到商品商品结算完成购物寻找商品站内搜索、分类目录加入购物车支付与配送注册登录网上购物流程信息易查找：首页呈现业务菜单、重要深层次链接（快速通道）流程可预知：全景流程预览、对下一步结果的文案提示、“下一步”按钮醒目随时易返回：明确当前位置、上一步、后退键、logo链接、首页、退出方便表单填写高效：实时纠错判断和提示流程遇挫有帮助：客服、帮助无处不在简化操作步骤：减少不必要的点击（joyo案例、gmail案例）合理增加点击：分步式表单设计；导致重要后果前增加确认环节杜绝流程错误：无效链接、程序出错、死循环、逻辑错误成功后引导明确：接下来如何？返回到哪里？链接到更多……符合用户体验友好的商务流程流程可预知江苏移动动感地带注册与登录：/mzone/Reg.jsp

符合用户体验友好的流程设计规范随时易返回：用户管理中心在哪里?符合用户体验友好的流程设计规范目标信息不易查找（点击多次）无法顺利返回下一步行为指示不明确复杂啰嗦的引导文案必填项过多网页布局杂乱，重点进程不醒目不明白当前所在位置流程结束后无下一步交待说明系统繁忙、程序出错、无效链接……用户常常遭遇的流程问题丰富的信息促成用户购买决策，提升用户粘性。高质量内容的特征：产品分类科学：满足多元购买诉求：/select.php商品描述：详尽、购买激励：/ves/portal/html/ware_1361.html商品图片：清晰、多角度购买引导信息丰富：热销榜、排行榜、新上架实用指南：引流、促销、粘性：/mobile_zx/mobile_news.asp?newid=588互动内容：用户评论：好评、推荐内容的时效性：及时更新原创为王：差异化内容分析：江苏移动网站的内容优势高质量网站内容建设面向顾客的商务网站功能

商品分类和搜索功能面向顾客的商务网站功能（2）分页导航功能路径导航功能相关商品推荐功能商品的评论功能商品的购买功能购物导引和提示功能用户自助管理功能相关商品推荐功能

图1-22相关商品推荐导航商品的评论功能购物导引和提示功能1.4.4商务网站的后台功能后台功能主要包括商品管理订单管理用户权限管理销售统计积分管理商品评论管理等电子商务网站开发与管理唐四薪主编人民邮电出版社

ISBN:97871152824912012年8月第2章网站的用户体验与界面设计目录2.1用户体验设计 2.2网页的界面设计2.3遵循Web标准的网页设计原理2.4HTML与XHTML2.5CSS基础 2.1用户体验设计用户体验（UserExperience，简称UE或UX）是一种纯主观的，在用户使用一个产品（或服务）的过程中建立起来的心理感受。用户分析设计用户测试专家评测目标用户定位分析用户需求分析用户任务设计概念明确细节构架原型真实用户测试设计专家再评……界面设计到用户体验设计的发展界面设计（UI）界面设计（UI）+交互设计（ID）用户体验设计（UED）视觉+艺术设计的对象是产品本身视觉+交互设计的对象是产品本身视觉+交互+用户的感受设计的对象是整个用户体验的过程用户体验要素表现层视觉设计框架层结构层交互设计信息架构范围层功能规格内容需要战略层用户需求网站目标界面设计导航设计信息设计具体抽象完成概念2.1.3“以用户为中心”的用户体验设计（1）感官体验：呈现给用户视听上的体验，强调舒适性。（2）交互体验：呈现给用户操作上的体验，强调易用/可用性。（3）情感体验：呈现给用户心理上的体验，强调友好性。（4）浏览体验：呈现给用户浏览上的体验，强调吸引性。（5）信任体验：呈现给用户的信任体验，强调可靠性。网页的界面设计网页版式布局T型布局“口”型布局分栏布局“POP”布局

网页版式设计的基本原则①网页中的文字应采用合理的字体大小和字形。②确保在所有的页面中导航条位于相同的位置。③确保页头和页尾部分在所有的页面中都相同。④不要使网页太长，特别是首页。⑤确保浏览器在满屏显示时网页不出现水平滚动条。⑥要在网页中适当留出空白网页版面布局的方法框架布局将浏览器窗口分割成几部分，每部分放一个不同的网页（示例）表格布局将网页元素装填入表格内实现布局，表格相当于网页的骨架，因此表格布局的步骤是先画表格，再往表格里填内容。DIV＋CSS布局用盒子布局，利用网页元素本身的盒子模型，通过盒子在页面上的排列和嵌套进行布局。布局的含义网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种：常见网页的版式1－3－1式1－2－1式艺术版式1-3-1式示例Logobanner导航条（Navigator)Bottom(版权信息）栏目1栏目2栏目3用表格实现用CSS布局实现表格布局的原则各栏目之间必须相对独立，方法是把每个栏目装在一个单独的表格中，这样修改一个栏目时不会对其他栏目产生影响各栏目之间必须用占位表格(或CSS边界）留出一定的空隙栏目采取纵列的形式排列网页的配色网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接的效果。色彩的4种角色■主色调

页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉影响■辅色调

仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。■点睛色

在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。■背景色

衬托环抱整体的色调，协调、支配整体的作用。

Web标准Web标准是由W3C（WorldWideWebConsortium）建立的一组标准网页由结构，表现和行为组成基于Web标准的网页制作就是说要将网页的这三个组成部分严格分离内容、结构和表现的含义1．内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。如：忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846，字乐天，太原人。唐德宗朝进士2．结构：可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。

Web标准－结构标题忆江南(1)

作者唐.白居易

正文

江南好，风景旧曾谙。(2)

日出江花红胜火，春来江水绿如蓝，(3)

能不忆江南。

节1作者介绍

772－846，字乐天，太原人。唐德宗朝进士

Web标准－表现表现（Presentation）：虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”

行为行为：就是对内容的交互及操作效果。例如，使用JavaScript可以响应鼠标的点击和移动，可以判断一些表单提交，使我们的操作能和网页进行交互。网页的组成行为层内容如何对事件做出响应表现层内容如何显示结构层内容的语义内容层内容网页是由四层信息构成的一个共同体：Web标准的实现结构标准语言（1）XML（2）XHTML表现标准语言CSS（CascadingStyle

Sheets，层叠样式表）行为标准语言JavaScriptWeb标准网页示例结构表现行为XHTMLCSSJavaScript(X)HTML文档的基本结构<html>…</html>：告诉浏览器HTML文档开始和结束的位置，其中包括head部分和body部分。HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以<html>开始，以</html>结束。<head>…</head>：HTML文件的头部标记，头部主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容<body>…</body>：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>指明主体区域的结束HTML标记的分类头部标记：title,meta,link,style文本标记：font,b,i,u,strong,段落标记：p,hn,pre,marquee,br,hr列表标记：ul,ol,li,dl,dt,dd5) 超链接标记：a,map,area6) 图像及媒体元素标记：img,embed,object7) 表格标记：table,tr,td,th,tbody8) 表单标记：form,input,textarea,select,option,fieldset,legend9) 框架标记：frameset,frame,iframe10) 容器标记：div,span表格布局综合案例——制作太阳能网站把网页分为上下两部分装在表格中LogoBannerCopyRightxxxxxxxxBanner图片制作网页的头部插入一个一行两列的表格，将表格的宽设为852，高设为104将第一个单元格宽设为161，背景色设为#99cc00在第二个单元格插入一张图片images/logo.jpg制作网页的主体部分设置第一个单元格高为41，背景图像为images/bj.jpg，再在该单元格中插入一幅图像images/ggd.jpg，可看到背景图像和图像很好的融合在了一起。设置第二个单元格高为21，起占位的作用。在第三个单元格中插入公司简介的文本。在文本中间插入一副图像，设置该图像对齐方式为右对齐。现在网页主体已基本呈献，下面进行一些微调。可看到此时栏目文本与banner图像紧挨在一起，不美观，在两者之间插入一个占位表格，设置该表格宽位100％，高为16。在文本表格下插入一条水平线，设置其宽为90％，高为1，居中对齐，无阴影。再在下面插入一段版权文本。在网页banner上插入一副flash。用CSS设置网页主体的右边框线用CSS设置文本样式在该表格下再插入一个一行两列的表格，将宽设为852，将第一个单元格宽设为161，高设为817，背景色设为#99cc00在该表格中插入一个一行一列的表格，作为导航栏的背景，宽设置为100％，高设置为181，将其单元格的背景色设为#00801b在该表格中插入一个一行六列的表格，将宽设为143，和导航图片等宽，将表格设为居中对齐。在该表格的每个单元格中分别插入一个导航图片，并分别将这些图片先链接到＃。在右边的单元格中插入一个一行一列的表格，设置该表格宽为688，高为181。将背景图像设置为images/ba1.jpg插入一个一行3列的表格，将宽设置为90％2.5CSS基础CSS（CascadingStylesSheets，层叠样式表），是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言一条CSS样式规则由选择器（selector）和声明（declarations）组成h1color:red;font-size:25px;{}选择器属性值属性值声明声明

最常用的CSS属性CSS属性含义举例font-size字体大小font-size:14px;color字体颜色color:red;line-height行高line-height:160%;text-decoration文本修饰（如增删下划线）text-decoration:none;text-indent文本缩进text-indent:2em;background-color背景颜色background-color:#ffeeaa;CSS布局的案例——重构太阳能网站用DIV+CSS重构该网站h1#header h1#container#nav#banner#copyright#title#intr#intro#content总结CSS网页布局的步骤用CSS对网页进行布局的基本步骤如下：（1）将页面用div分块（页面标题和栏目标题可用h1或h2元素）；（2）通过CSS设置各块的大小（利用width和height属性）和位置（利用padding和margin属性），以及相互关系（是否浮动或定位）；表格布局和DIV+CSS布局的比较表格布局CSS+DIV布局布局方式将页面用表格或单元格分区将页面用div等元素分块控制元素占据的空间大小通过<td>标记的width和height属性确定通过CSS属性width和height确定控制元素的位置在单元格前插入指定宽度的单元格使元素位置向右移动，或插入行或占位表格使元素向下移动设置元素的margin属性或设置其父元素的padding属性使元素移到到指定位置图片的位置只能通过图片所在单元格的位置控制图片的位置既可以通过图片所在元素的位置确定，又可以使用背景的定位属性确定图片的位置使用DIV+CSS布局制作网站实例制作一个网站主要应制作三个页面，即首页、分栏目首页和内页，这三种页面的制作所花费的工作量大概是70%、20%和10%的比例。（1）首页：首页是网站中最重要的页面，也是所有页面中最复杂的，需要耗时最多的页面。（2）分栏目首页（也称为框架页（3）内页：内页就是网站中最多的显示新闻详细内容或其他文字内容的页面。主页的效果各模块的制作习题1.进行网站设计的第一件事是（）。

A.进行网站的需求分析 B.网站的外观设计

C.网站内容设计 D.网站功能设计2.在建立网站的目录结构时，最好的做法是（）。A.将所有的文件都放在根目录下 B.目录层次选在3—4层C.按栏目内容建立子目录 D.网站目录最好以中文命名3.某小型企业建设公司网站，考虑到经济性及稳定性，应该选择哪种接入方式：（）A．专线接入 B．ADSL接入 C．主机托管 D．虚拟主机4.在网站内容的结构安排上，第一步需要确定的是： （）A．设计思想B．设计手段C．设计目的D．设计形式电子商务网站开发与管理唐四薪主编人民邮电出版社

ISBN:97871152824912012年8月第3章网站交互效果的实现伪类选择器所谓伪类就是指元素在某个时候的状态。网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，伪类选择器的标记和伪类之间用“:”隔开。a:hovercolor:green;font-size:20px;{}标记名属性值属性值声明声明伪类名通过伪类选择器制作动态超链接伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记可以定义<a>标记在四种不同的状态下具有不同的颜色，是否有下划线。

一、伪类选择器的书写应遵循LVHA的顺序，即出现的顺序应为a:link→a:visited→a:hover→a:active。

二、各种伪类选择器将继承a标记选择器定义的样式。3.1.2伪类选择器的应用

1制作缺角的导航条缺角的导航条，是一个利用定位基准和绝对定位技术结合的典型例子首先，如果这个导航条没有缺角，那么这个水平导航条完全可以通过盒子在标准流及浮动方式下的排列来实现，不需要使用定位属性。其次，缺的这个角是通过一个元素的盒子叠放在导航选项盒子上实现的

首页中心简介常用下载

政策法规导航项盒子和左上角盒子的关系导航项左上角的盒子必须以导航项为基准进行定位，因此必须设置导航项的盒子为相对定位，让它成为一个包含框，使左上角的盒子以它为基准进行定位，这还需要将左上角的盒子也设置为绝对定位，这样还能使它不占据标准流的空间。同时由于导航条不需要改变在标准流中的位置，所以应该设置为相对定位无偏移首页中心简介常用下载

政策法规第一步：写结构代码我们直接用a元素的盒子做导航条，因为a元素中还要包含一个盒子，所以要在a元素中添加任意一个行内元素，这里我们选b标记，它的内容应为空，这样才能利用它的边框做三角形。<divid="nav4"> <ahref="#"><b></b>首页</a><ahref="#"><b></b>中心简介</a><ahref="#"><b></b>政策法规</a><ahref="#"><b></b>常用下载</a><ahref="#"><b></b>为您服务</a><ahref="#"><b></b>技术支持</a></div>作为钩子（hook），起到挂CSS效果的作用第二步设置a元素的CSS因为要设置a元素的边框填充等值，所以要设置a元素为块级元素显示，而要让块级元素水平排列，必须设置这些元素为浮动。当然，设置为浮动后元素将自动以块级元素显示，因此也可以将a元素的display:block;去掉。同时，要让a元素成为其子元素的包含框，必须设置a元素的定位属性，而a元素应保持它在标准流中的位置不发生移动，所以a元素的定位属性值应设为相对relative。

a元素的CSS代码#nav4a{ background-color:#79bcff; font-size:14px; color:#333333; text-decoration:none;

border-bottom:8pxsolid#99CC00; /*以上5条为普通CSS样式设置*/ display:block; float:left; padding:6px10px4px10px; margin:02px;

position:relative;}第三步设置b元素的CSS样式设置b元素为绝对定位，让它以a元素为包含框进行定位，由于b要位于a的左上角，必须设置偏移属性left:0;和top:0;。再设置b元素的左边框为白色，下边框为a元素的背景色。这样在Firefox中就可以看见缺角的导航条效果了。为了在IE中也有此效果，需要设置overflow:hidden;和height:0px;，（因为IE默认设置了盒子属性的空元素默认有12px的height）。b元素的CSS代码#nav4ab{ border-bottom:8pxsolid#79bcff; border-left:8pxsolid#ffffff; /*左边框和下边框交汇形成三角形效果*/ overflow:hidden; height:0; /*以上2条为兼容IE*/

position:absolute; left:0;/*相对于a元素边框内侧的左上角定位*/ top:0; }

第四步添加交互效果接下来添加交互效果，只需设置鼠标经过时a元素的字体、背景色改变，b元素下边框颜色改变就可以了#nav4a:hover{ color:#C00; background-color:#CCC; border-bottom-color:#CF3;}#nav4a:hoverb{ border-bottom-color:#CCC;}2制作中英文双语导航条它是把导航项的中文写在<b>标记中，通过在默认状态下隐藏b元素，就只能看到英文的文字了。当鼠标滑过时，为了让中文遮盖住英文，必须设置b元素为绝对定位，这样b元素的盒子就会浮在a元素上，挡住了a元素且不占据a元素的空间<divid="nav4"> <ahref="#"><b>首页</b>Home</a><ahref="#"><b>关于我们</b>AboutUs</a><ahref="#"><b>产品展示</b>Products</a><ahref="#"><b>售后服务</b>Services</a><ahref="#"><b>联系我们</b>Contact</a></div>3制作小提示窗口我们知道，几乎所有的html标记都有一个title属性，添加该属性后，当鼠标停留在元素上时，会显示title属性里设置的文字，如图1所示。但用title属性设置的提示框不太美观，而且鼠标要停留一秒钟以后才会显示，实际上，我们可以用绝对定位元素来模拟小提示框，由于这个小提示框必须在其解释的文字盘边出现，所以要把待解释的文字设置为相对定位，作为小提示框的定位基准

小提示窗口与title属性对比<p>Web前台技术：<ahref="#"class="tip">Ajax<span>Ajax是一种浏览器无刷新就能和web服务器交换数据的技术</span></a>技术和<ahref="#"class="tip">CSS<span>CascadingStyleSheets层叠样式表</span></a>的关系</p>关键代码a.tip{ color:red; text-decoration:none;

position:relative;}a.tip:hoverspan{ display:block; position:absolute;

top:15px; left:-30px; width:100px;background-color:#424242; color:#fff; padding:10px;z-index:9999;}a.tipspan{display:none;}a.tip:hover{cursor:hand;z-index:999;}制作纯CSS的下拉菜单由于下拉菜单在弹出时是浮在网页上的，所以放置下拉菜单的元素必须设置为绝对定位元素，而且下拉菜单位置是依据它的导航项来定位的，所以导航项应该设置为相对定位，作为下拉菜单的定位基准，当鼠标滑到导航项时，显示下拉菜单，当鼠标离开时，设置下拉菜单元素的display属性为none，则下拉菜单就被隐藏起来

第一步写结构代码下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单项。首先写出它的结构代码<ulid="nav">

<li><ahref="">文章</a>

<ul><li><ahref="">Ajax教程</a></li> <li><ahref="">SAML教程</a></li><li><ahref="">RIA教程</a></li><li><ahref="">Flex教程</a></li>

</ul> </li>……第二步使导航项水平排列设置第一层li为左浮动，这样导航项就会水平排列，同时去除列表的小黑点、填充和边界，再设置导航项li为相对定位，让下拉菜单以它为基准定位。

ul#nav{ padding:0; margin:0; list-style:none;}li{ float:left; width:160px;

position:relative;}

第三步设置下拉菜单liul设置下拉菜单为绝对定位，往导航项下偏移21像素。平时导航项未被访问时应隐藏下拉菜单ul，所以ul默认值是不显示。liul{ display:none; position:absolute; top:21px; }再添加交互，当鼠标滑过时显示下拉菜单ul。li:hoverul{ display:block;}第四步用CSS样式美化下拉菜单ullia{ display:block; font-size:12px;

border:1pxsolid#ccc; padding:3px;

text-decoration:none; color:#777;}ullia:hover{ background-color:#f4f4f4;}下拉菜单制作完成这样，一个下拉菜单就做好了，由于IE6不支持li:hover伪类，所以在IE6下不能看到弹出菜单。想一想：如果把上述选择器中的position:relative;和position:absolute;都去掉还会有上面的下拉菜单效果吗？会出现什么问题呢？第五步兼容IE6浏览器IE6由于不支持li:hover所以没有下拉菜单，我们可以把下拉菜单ul放在a标记中，利用a:hoverul来控制下拉菜单的显示和隐藏。尽管把块级元素ul放在a中在html语法中是错误的，但也能实现效果<ulid="nav">

<li><ahref="">文章

<ul><li><ahref="">Ajax教程</a></li> <li><ahref="">SAML教程</a></li><li><ahref="">RIA教程</a></li><li><ahref="">Flex教程</a></li>

</ul></a> </li>添加的样式代码ula:hoverul{visibility:visible;}5.制作图像放大效果在电子商务购物网站中，常常会以缩略图的方式展示商品。当浏览者将鼠标滑动到商品缩略图上时，会把缩略图放大显示成商品的大图，通常还会在大图下显示商品的描述信息。分析：商品的缩略图的排列可以使用标准流方式排列，但商品的大图要以缩略图为中心进行放大，所以得以缩略图为定位基准，因此商品的缩略图应设置为相对定位。而商品的大图是浮在网页上，所以是绝对定位元素。在默认情况下，商品的大图是不显示的，当鼠标滑到缩略图上时，就显示商品的大图第一步写结构代码由于有许多张图片，因此采用列表结构存放这些图片，每个列表项放一张图片。因为图片要响应鼠标滑过，所以外面要套一个a标记<ulid="lib"><li><ahref="#"><imgsrc="pic1.jpg"/></a></li><li><ahref="#"><imgsrc="pic2.jpg"/></a></li><li><ahref="#"><imgsrc="pic3.jpg"/></a></li><li><ahref="#"><imgsrc="pic4.jpg"/></a></li></ul>第二步写CSS代码#libimg{ border:1pxsolid#333333; padding:6px; margin:4px; }#liba:hover{border:1pxsolid#CCCCCC;/*此处主要为兼容IE6*/}#liba:hoverimg{ width:300px;/*重新定义图片的宽和高实现放大*/

height:280px; }第三步设置绝对定位和定位基准#liba{

position:relative;}#liba:hover{ border:1pxsolid#CCCCCC; z-index:1000; /*防止放大后图片被小图覆盖*/}#liba:hoverimg{ position:absolute; left:-50px;top:-50px; /*放大图的位置*/ width:300px; height:280px; z-index:1000;}第四步给a的父元素li设置宽和高给li元素设置宽度和高度，这样即算a元素绝对定位不占据空间后，其父元素li由于定义了宽和高，就不会自动收缩，仍然会占据原来的位置。这样后面的图片就不会挤占放大后图片的位置#libli{ float:left;

width:164px;

height:154px;/*防止a元素绝对定位不占据空间后父元素自动收缩*/ margin:4px;}5.最终图片放大效果3.2JavScript事件驱动机制事件处理事件是JavaScript和DOM之间进行交互的桥梁，当某个事件发生时，通过它的处理函数执行相应的JavaScript代码。编写JavaScript程序的步骤：找到对象为其添加事件编写事件处理函数例如：网页载入时弹出对话框对象：窗体（或body元素）事件：onload事件处理函数：functionalm(){alert(“已载入”)}网页载入时执行函数的两种写法：<bodyonload="alm()">window.onload=alm例如：单击某个p元素时弹出对话框对象：某个p元素事件：onclick事件处理函数：functionalm(){alertthis.innerHTML)}3.6.2处理事件的两种方法1.事件处理函数

（1）HTML标记事件处理程序

<ponclick=“alert(‘我的内容是’+this.innerHTML);”>ClickMe</p>（2）以对象属性形式出现的事件处理程序

window.onload=dosome2.通用事件监听程序

oP=document.getElementById("myP"); oP.attachEvent("onclick",fnClick1); //添加监听函数3.6.3浏览器中的常用事件鼠标事件事件名描述onClick单击鼠标左键时触发onDbclick双击鼠标左键时触发onmousedown鼠标任意一个按键按下时触发onmouseup松开鼠标任意一个按键时触发onmouseover鼠标指针移动到元素上时触发onmouseout鼠标指针移出该元素边界时触发onmousemove鼠标指针在某个元素上移动时持续触发3.6.3浏览器中的常用事件HTML事件事件名描述onload页面完全加载后在window对象上触发onunload页面完全卸载后在window对象上触发onerror脚本出错时在window对象上触发onSelect选择了文本框的某些字符或列表框的某项后触发onChange文本框或下拉框内容改变时触发onSubmit单击提交按钮时在表单form上触发onBlur任何元素或窗口失去焦点时触发onFocus任何元素或窗口获得焦点时触发事件的应用举例设置鼠标经过时自动选择表单中文本

<inputname="user"type="text"onmouseover="this.focus()"/>

onfocus="this.select()"利用onBlur事件自动校验表单3.6.4事件对象当在浏览器中发生一个事件时，浏览器会自动创建一个名为“event”的事件对象，在事件处理函数中可以通过访问该对象来获取所发生事件时的各种信息，包括触发事件的HTML元素、鼠标指针位置及鼠标按钮状态等让事件对象兼容IE和Firefox

oP.onclick=function(oEvent){ oEvent=oEvent||window.event; }事件对象的属性。对于鼠标事件来说，其常用的属性是它的位置信息属性。（1）screenX/screenY：事件发生时，鼠标在计算机屏幕中的坐标；（2）clientX/cilentY：事件发生时，鼠标在浏览器窗口中的坐标。事件对象的应用举例验证用户输入的是否为数字

functionIsDigit(){

return((event.keyCode>=48)&&(event.keyCode<=57)); }制作跟随鼠标移动的图片放大效果3.6.5DOM和事件编程实例1.制作Lightbox效果

3-60简单lightbox效果.html2.制作Tab面板（选项卡面板）

3-59Tab选项卡面板.html3.制作具有隔行变色和动态变色效果的表格

3-61隔行动态变色表格.html3.3JavaScriptDOM编程JavaScriptDOM编程如何让用户与网页进行交互找到交互的元素（DOM模型）添加事件处理代码DOM（DocumentObjectModule）文档对象模型DOM（DocumentObjectModule）定义了用户操纵文档对象的接口，它使得用户对HTML文档有了空前的访问能力。DOM编程在HTML页面中的应用（1）访问指定节点；（2）访问相关节点；（3）访问节点属性；（4）检查节点类型；（5）创建节点；（6）操作节点。1.访问指定节点getElementById()如getElementById(“one”)getElementsByName()一般用于访问表单元素getElementsByTagName()

document.getElementsByTagName("p")[3]2.访问元素属性获取元素属性getAttribute(name)推荐直接用DOM对象.属性名获取设置元素属性setAttribute(name,value)推荐用DOM对象.属性名=“属性值”删除元素属性removeAttribute(name)访问相关节点“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。（1）访问html节点和body节点（2）访问子节点①childNodes：子节点的列表；②firstChild：第一个子节点；③lastChild：最后一个子节点。访问元素子节点的两种方法varnav=document.getElementById("nav");①第一种方法是在DOM对象nav中再次使用getElementsByTagName搜寻它的子节点。varnavli=nav.getElementsByTagName("li");②第二种方法是使用childNodes集合获取navRoot对象的子节点。

varnavli=navRoot.childNodes;两种方法在Firefox中的区别，最好用第①种方法检查节点类型DOM中的节点主要有三种类型，分别是元素节点、属性节点和文本节点（1）元素节点的nodeType值为1；（2）属性节点的nodeType值为2；（3）文本节点的nodeType值为3。访问和设置元素的内容一般使用innerHTML属性innerHTML可以将元素的内容（起始标记和结束标记之间）改变成其他任何内容（如文本或HTML元素）vara=document.getElementById("a");alert(a.innerHTML) //读取元素中的HTML内容，输出“<B>把鼠标…</B>”a.innerHTML="看见变化了吗？"; //设置元素中的HTML内容访问和设置元素的CSS属性访问CSS样式1.访问元素的CSS样式：style对象oP=document.getElementById("test");alert(oP.style.fontSize);修改元素的CSS样式：如oP.style.color="#f00";

注意：利用style对象访问到的CSS样式都是元素CSS的行内样式，利用style对象设置的样式也是对元素设置了行内样式style对象使用时需注意的问题如果CSS样式属性名称中不带“-”号，例如color，则直接使用style.color就可获得该属性值如果样式属性名称中带有“-”号，例如font-size，对应的style对象属性名称为fontSize。对于CSS样式中的float属性，不能使用style.float访问，应该使用cssFloat（Firefox）或styleFloat（IE）访问访问CSS样式（续）2.使用className属性更改元素的类名

varmyImg=document.getElementById(“picbox”);

myImg.className=“pic”+str; } 3.使用className属性追加元素的类名

className+=“over“ //追加类名“over”，over前必须有一空格访问CSS样式（续）4.使用replace方法去掉元素的某一个类名this.className=this.className.replace(/over/,""); //用两斜杠“/”将over括起来3.5.6创建和替换元素节点DOM节点的类型

<ahref="iframe.html"target="myTarget">在指定窗口打开</a>ahref="iframe.html"target="myTarget"在指定窗口打开属性节点属性节点文本节点元素节点创建节点createElement方法：创建元素节点createTextNode方法：创建文本节点；

varoP=document.createElement("p");varoCont=document.createTextNode("这是一条感人的新闻");oP.appendChild(oCont);document.body.appendChild(oP);操作节点①appendChild()：为当前节点新增一个子节点，并且将其作为最后一个子节点；②insertBefore()：为当前节点新增一个子节点，将其插入到指定的子节点之前；③replaceChild()：将当前节点的某个子节点替换为其他节点；④removeChild()：删除当前节点的某个子节点3.5.7用DOM控制表单访问表单中的元素

varoForm=document.forms["user"];

varoTextName=oForm.elements[0];

varpasswd=oForm.elements["passwd"];表单中元素的共同属性和方法varoComments=oFments;alert(oComments.type);

varoTextPasswd=oForm.elements["passwd"];oTextPasswd.focus(); 3.4使用jQuery实现高级交互jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性

jQuery理念:写得少,做得多jQuery的使用下载：提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.3.2.min.js文件只有55.9KB引用：<scriptsrc="jquery.min.js"></script>将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。第一个jQuery程序<scriptsrc="jquery.min.js"></script><script>$(document).ready(function(){ alert("HelloWorld!");});</script>引入jQuery等待DOM文档载入后执行类似于window.onload弹出一个对话框jQuery对象与DOM对象jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#tab”).html();jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法建议约定：如果获取的是jQuery对象,那么要在变量前面加上$. var$variable=jQuery对象varvariable=DOM对象jQuery对象转成DOM对象jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM方法的时候,有如下两种处理方法:(1)jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象.$("#msg")[0](2)使用jQuery中的get(index)方法得到相应的DOM对象$("#msg").get(0)DOM对象转成jQuery对象对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.

例如：$(document.getElementById(“msg”))转换后就可以使用jQuery中的方法了jQuery对象与dom对象的转换举例以下几种写法都是正确的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法jQuery的选择器jQuery选择器选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器jQuery选择器的优点:简洁的写法完善的事件处理机制基本选择器基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标记名来查找DOM元素基本选择器示例改变id为one的元素的背景色为红色$("#one").css("backgroundColor","red");改变元素名为<p>的所有元素的背景色为#bbffaa，字体颜色为红色$("p").css({color:"red",backgroundColor:"#bbffaa"});改变第一个<p>元素的背景色为红色$("p").eq(0).css("backgroundColor","red");改变所有<h1>元素和id为one的元素的背景色为#bbffaa$("h1,#one").css("backgroundColor","#bbffaa");层次选择器如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器注意:(“prev~div”)选择器只能选择“#prev”元素后面的同辈元素;而jQuery中的方法siblings()

与前后位置无关,只要是同辈节点就可以选取层次选择器示例改变<body>内所有

<div>的背景色为#bbffaa$(“bodydiv")改变<body>内子

<div>的背景色为#bbffaa$(“body>div")改变id为one的下一个

<div>的背景色为#bbffaa$("#one+div")改变id为two的元素后面的所有兄弟<div>的元素的背景色为#bbffaa$("#two~div")改变id为two的元素所有<p>兄弟元素的背景色为#bbffaa$("#two").siblings("p")

过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以“:”开头按照不同的过滤规则,过滤选择器又可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.基本过滤选择器基本过滤选择器示例改变第一个div元素的背景色为#bbffaa$("div:first")改变id不为one的所有p元素的背景色为#bbffaa$("p:not('#one')")改变索引值为偶数的tr元素的背景色为#bbffaa$(“tr:even")改变索引值为大于3且为奇数的p元素的背景色为#bbffaa$(“p:gt(3):odd")改变所有的标题元素的背景色为#bbffaa$(":header")改变当前正在执行动画的所有元素的背景色为#bbffaa内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上内容过滤选择器示例改变含有文本‘di’的p元素的背景色为#bbffaa$("p:cotains(di)")改变不包含子元素(或者文本元素)的div空元素的背景色为#bbffaa改变含有class为mini元素的p元素的背景色为#bbffaa$("p:has(.mini)")改变含有子元素(或者文本元素)的div元素的背景色为#bbffaa可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(<inputtype=“hidden”>)和visible:hidden之类的元素可见性过滤选择器示例改变所有可见的div元素的背景色为#bbffaa选取所有不可见的元素,利用jQuery中的show()方法将它们显示出来,并设置其背景色为#bbffaa选取所有的文本隐藏域,并打印它们的值属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素属性过滤选择器示例选取下列元素,改变其背景色为#bbffaa含有属性title的div元素.属性title值等于"test"的div元素.属性title值不等于"test"的div元素(没有属性title的也将被选中).属性title值以"te"开始的div元素.属性title值以"est"结束的div元素.属性title值含有"es"的div元素.选取有属性id的div元素，然后在结果中选取属性title值含有“es”的div元素.子元素过滤选择器nth-child()选择器详解如下：(1):nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素(2):nth-child(2):能选取每个父元素下的索引值为2的元素(3):nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素(3):nth-child(3n+1):能选取每个父元素下的索引值是3n+1的元素子元素过滤选择器示例选取下列元素,改变其背景色为#bbffaa每个class为one的div父元素下的第2个子元素.每个class为one的div父元素下的第一个子元素每个class为one的div父元素下的最后一个子元素如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤表单对象属性过滤选择器示例利用jQuery对象的val()方法改变表单内可用<input>元素的值利用jQuery对象的val()方法改变表单内不可用<input>元素的值利用jQuery对象的length属性获取多选框选中的个数利用jQuery对象的text()方法获取下拉框选中的内容表单选择器练习1.给网页中所有的<p>元素添加onclick事件2.是一个特定的表格隔行变色3.对多选框进行操作,输出选中的多选框的个数jQuery中的DOM操作jQuery中的DOM操作DOM(DocumentObjectModel—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类:DOMCore:DOMCore并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它.它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档,例如:XMLHTMLDOM:

使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM主要用于获取和设置style对象的各种属性查找节点查找节点:

查找元素节点:通过jQuery选择器完成.查找属性节点:查找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值创建节点创建节点:使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM对象,并把这个DOM对象包装成一个jQuery对象返回.注意:动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个<p>元素,可以使用$(“<p/>”)或$(“<p></p>”),但不能使用$(“<p>”)或$(“<P>”)创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建插入节点(1)动态创建了HTML元素之后,还需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点插入节点(2)以上方法不但能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动.创建节点和插入节点示例varnewP=$("<p>武广高速铁路即将通车！</p>");newP.insertAfter(“#chapter”);//将创建的newP元素插入到ID为#chapter的元素之后或者newP.appendTo(“body”);

//插入到body元素里删除节点remove():

从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.empty():

清空节点–清空元素中的所有后代节点(不包含属性节点).复制节点clone():克隆匹配的DOM元素,返回值为克隆后的副本.但此时复制的新节点不具有任何行为.clone(true):复制元素的同时也复制元素中的的事件

替换节点replaceWith():将所有匹配的元素都替换为指定的HTML或DOM元素replaceAll():颠倒了的replaceWith()方法.注意:

若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失包裹节点wrap():将指定节点用其他标记包裹起来.该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义.wrapAll():将所有匹配的元素用一个元素来包裹.而wrap()方法是将所有的元素进行单独包裹.wrapInner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来属性操作attr():获取html属性和设置属性当为该方法传递一个参数时,即为某元素的获取指定属性当为该方法传递两个参数时,即为某元素设置指定属性的值提示：jQuery中有很多方法都是一个函数实现获取和设置.

如:attr(),html(),text(),val(),height(),width(),css()等.removeAttr():删除指定元素的指定属性样式操作获取class和设置class:class是元素的一个属性,所以获取class和设置class都可以使用attr()方法来完成.追加样式:addClass()移除样式:removeClass()从匹配的元素中删除全部或指定的class切换样式:toggleClass()控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.判断是否含有某个样式:hasClass()判断元素中是否含有某个class,如果有,则返回true;否则返回false设置和获取HTML,文本和值读取和设置某个元素中的HTML内容:html().该方法可以用于XHTML,但不能用于XML文档读取和设置某个元素中的文本内容:text().该方法既可以用于XHTML也可以用于XML文档.读取和设置某个元素中的值:val()该方法类似JavaScript中的value属性.对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组val()方法的两个练习获得焦点没输入值输入值提示：可以借助表单元素的defaultValue属性提示：js中数组的表示方法[“1”,“2”]常用的遍历节点方法取得匹配元素的所有子元素组成的集合:children().该方法只考虑子元素而不考虑任何后代元素.取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素):next()取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素):prev()取得匹配元素前后所有的同辈元素:siblin