实验指导书电子商务应用开发技术

PAGEPAGE77《— 电子商务应用开发技术—》实验指导书尹隽编写适用专业：电子商务信息管理与信息系统 江苏科技大学经济管理学院2012年08月前言《电子商务应用开发技术》课程主要从构建一个功能比较齐全的电子商务系统的角度出发，首先讲授电子商务系统的基本架构；然后从电子商务系统三层体系结构分别讲述：电子商务系统表达层：网站的基本实现技术的原理特征以及具体实现技术和方法；电子商务系统逻辑层——包括电子商务系统的分析、设计与集成过程，以及具体的逻辑层实现技术；电子商务数据层——电子商务时代数据管理需求与技术特征，数据模型的概念与发展，数据库管理系统的功能、运行机理、发展动态，不同体系结构下数据访问接口技术的特征等；最后综合电子商务三层体系结构，以介绍完整的电子商务解决方案及相关的技术动态的形式进行总结。通过学习学生能对电子商务系统及其包含的技术有充分深入的理解，并通过对电子商务表达层、逻辑层、数据层三层体系结构分步骤的技术理解，掌握系统从规划、设计到实现的全过程，在此过程中逐渐具备各层次技术的实践操作能力，并通过实验巩固对技术的掌握；最终通过电子商务解决方案的形式对电子商务系统及其技术进行综合理解。作为技术先导课本课程需要起到承上启下的作用，因此本指导书将从基本应用入手，从分析、解决应用问题的目的出发，在问题求解过程中反映出应用技术的理论基础和发展演变规律，希望通过课程的学习以及实际操作，激发同学们学习技术的热情，从而进一步引导学生以后对电子商务系统各层次技术的进行深入学习和探索。一、实验开设目标、总体内容为了使学生更好地理解和深刻地把握这些知识，并在此基础上，训练和培养学生对电子商务表达层技术（包括静态与客户端动态网页技术）、逻辑层技术（包括一种服务端动态网页技术，包括对应的网络编程语言）、数据层技术（一种数据库管理系统数据库设计、开发相关技能）的理解和掌握，并针对这些技能的要求设置了包括电子商务系统体验、个人网页规划和设计等八个实验项目，其中个人主页全面开发并上传、电子商务系统规划报告、根据系统规划方案实现电子商务系统三个实验为综合性、设计性实验。二、各项实验主要了解、掌握的具体知识，训练及培养的技能实验一要求在理解第一章电子商务总体体系结构，电子商务系统模式、特点，通过对成功电子商务系统的体验实验进一步理解与传统管理信息系统的区别，初步建立对电子商务系统环境的感性认识。实验二、三、四是通过实验，对第二章电子商务表达层技术，包括网页规划设计、静态网页著作以及客户端动态网页技术实现逐步的深入理解掌握。实验五、六是在熟悉第三章电子商务逻辑层内容的基础上，掌握建立一个大型电子商务系统设计及实现的核心技术，能通过一种网络编程语言实现系统的核心逻辑。实验七是在理解电子商务系统分析设计过程以及第三章数据层的基础上，规划设计目标电子商务系统，包括分析、设计和集成过程以及目标系统的数据库架构，前者需要根据软件工程思想以及电子商务的特点进行系统规划、分析，后者需要结合《数据库原理与应用》课程中对数据库范式的知识以及电子商务系统数据库的特点进行设计。实验八是在实验七电子商务系统规划方案的指导下，结合实验七电子商务系统数据架构设计，采用一种网络编程语言进行电子商务系统的开发实现，需要实现其核心部分。三、本指导书的特点电子商务应用开发技术实验是该课程重要的实践性环节，是教学过程中必不可少的重要内容，通过对电子商务系统案例分析、技术体验，使学生逐步加深理解、验证和巩固课堂教学内容；增强对电子商务系统的感性认识；掌握电子商务系统分析、设计、实施的基本方法；培养学生理论与实践相结合的能力。本指导书基于电子商务系统完整的知识体系基础上构建完成，因此对技术的实验设置具备较强的连贯性。实验的完成需要紧密结合课程知识，并结合之前实验所掌握的技能。由于实验先后衔接的比较紧密，学生认真做好每个实验的同时，教师应随时与学生交流，掌握学生对实验的掌握程度并进行针对性讲解分析。四、对不同专业选修情况说明由于信息管理与信息系统专业不设置课程设计，实验八需要适当提高要求并加2个课时的实验，要求能完成电子商务系统的核心部分功能；对设置课程设计的专业，要求学生在课程设计中完整完成这个电子商务系统，并以此为起点，最后一次的实验要求适当降低，。五、实验设备配置每人配置1台电脑，可访问Internet网。六、考核与报告1、每次实验后，学生将实验结果等内容写出实验报告（例如系统可行性分析报告、系统分析报告，系统设计说明书、系统程序等），符合实验教学的要求，并得到指导教师的认可。2、指导教师对每份实验报告进行审阅、评分。3、该实验程依附于理论课，实验课的成绩记入课程平时成绩，占平时成绩的80%（平时成绩占总成绩的30%）。七、注意事项1、上机课时要求必须带本次实验课的指导书以及相关的教材资料；2、实验指导书每人一份，注意保管；3、实验指导书仅作为上机时候的步骤提要，不能作为唯一的依据，以教材和课堂讲授为准。

目录TOC\o"1-1"\h\z\u实验一：电子商务系统案例分析 5实验二：个人网站的规划与设计 9实验三：运用网页制作工具开发个人网站首页同时掌握HTML语言 14实验四：个人网站全面开发并上传 32实验五：ASP技术实现基本循环 51实验六：服务端动态技术实现用户登录验证（数据库验证） 59实验七：电子商务系统规划设计报告 70实验八：根据系统规划方案实现电子商务系统 81附件：学生实验报告基本内容要求 85

实验一：电子商务系统案例分析实验学时：2实验类型：（验证）实验要求：（必修）一、实验目的结合第一章的内容在掌握电子商务、电子商务系统相关内涵的基础上，能进一步理解电子商务与传统商务的区别、电子商务系统与传统信息系统的区别，并能电子商务系统框架结构与体系结构，从而为其后进行电子商务系统表达层、逻辑层和数据层的理解和技术学习奠定坚实基础。二、实验内容和步骤选择一个电子商务系统（或者团购、返利以及推荐等），学生应能正确判断其所采取的电子商务模式，并进行相应分析。主要比较模式、技术、管理、服务几个方面，对于比较新的模式，例如团购、返利和推荐可以采用对比的方式，对比配送、支付、售后、特色等等，其中团购是2010年引入，有一种叫做O2O，线上购线下消费。1、选择一个成功的电子商务系统，进入该系统；2、浏览系统整体，并确定其电子商务模式（B2C、B2B、C2C、G2B、B2C）；3、注册其会员，并模拟角色实现完整的商务过程（包括评价），分别截屏并对应说明过程（可忽略实际支付环节），并考察其物流配送过程。1）写出该系统的基本功能2）写出与传统购物过程的比较与分析。3）为了赢得潜在客户，该网站做了哪些努力？4）该网站采取了哪些相应的营销策略（产品策略、价格策略、销售渠道策略、促销策略等），分别是如何做的，效果如何？说出你的建议。5）总结该电子商务系统的优点，缺点（待改进的地方）；4、阐述电子商务系统网站和其他各类网站的区别。三、实验原理、方法和手段1、实验原理1）电子商务必须以商务为本：讲求效益、追求利润是电子商务的第一要旨；企业是电子商务的主角，企业是推动电子商务发展的重要动力；设计和建设电子商务时，要从商务需求出发，要根据商务需求和商务目标确定所选用的技术，而不是从技术或模式出发；2）传统商务与电子商务的区别：传统商务与电子商务最核心的区别，就是商务对象的变化。电子商务首先要将实实在在的商品虚拟化，形成信息化（数字化、多媒体化）的虚拟商品，进而对虚拟商品进行整理、储存和传输；3）电子商务与电子商务系统：电子商务与电子商务系统最核心的区分在于目标不同，电子商务的目标是完成商务，而电子商务系统的目标是提供商务活动所需要的信息沟通与交流的环境以及相关的信息流程，要实现电子商务，必须首先建立电子商务系统；4）电子商务系统与传统信息系统的区别与联系；5）电子商务大系统的核心意义，需要采用系统工程的思路去建设；6）电子商务各类应用对技术的挑战：消费主体、企业主体以及政府主体电子商务应用对技术提出了不同层次的挑战，根据所分析的电子商务系统站在其中一个角度去理解与体会；7）电子商务系统的体系结构：商务表达层、商务逻辑层、数据层。2、实验方法与手段选择具有代表性的电子商务系统，认真使用该系统，并模拟其中的角色实现部分或者全部的商务过程，从中体会其商务过程以及技术体系架构，并按照实验内容与实验步骤的要求进行分析。四、实验组织运行要求先由教师集中授课，讲解如何进行实验，然后是学生自主训练。五、实验条件1、每个学生一台电脑、要求能通过互联网访问电子商务系统；2、实验环境：Windows98/2000/XP系统且浏览器为IE。六、思考题1、搜集电子商务发展的数据和趋势，写出自己的体会分析。2、从消费者消费应用、消费者休闲娱乐、消费者金融服务、消费者教育培训、企业、政府等多角色多觉得说说其对电子商务的技术要求。（例如消费者休闲娱乐希望的有联机游戏、自选电视等等）。3、谈谈自己对“电子商务应以商务为本，电子商务是一个大系统”的核心含义。4、通过学习对电子商务的理解、对电子商务系统的理解与之前自己的理解有何不同。5、B2B2、团购、返利以及推荐模式，选择其中一个分析其盈利模式。八、实验要求1、实验预习在实验前需要对第一章内容进行深入的理解，特别对电子商务、电子商务系统、电子商务系统的体系结构等理论深入理解。2、实验记录无3、实验报告1）填写课程名称，实验日期。2）填写学生所在的班级、学号、姓名3）实验报告部分为主体部分，根据实验内容、实验步骤的要求编写电子商务系统案例分析报告，要求能够提出自己的看法。4）成绩一栏和最后的指导教师评语为教师填写。九、其它说明必要时对上述相关内容进行补充，或告知学生实验室管理的相关规定及安全事项等内容。

实验二：个人网站的规划与设计实验学时：2实验类型：（验证） 实验要求：（必修）一、实验目的结合第二章电子商务表达层的内容，而网站作为电子商务最主要的表达平台，要求在掌握其制作技术之前能够进行网站的规划与设计，应首先明确网站的性质、目的、针对不同的类型进行创意。首先确定最终用户是关键的一步，不同的用户有不同的设计要求，从规划、界面设计一致到颜色和文件格式的选择；另一个核心是站点内容的组织、页面/超链接、导航设计、站点风格等关键问题等进行有效决策。而作为站点设计人员不仅需要对技术进行了解，而且对艺术、形象设计、客户心理等需要有充分的理解，所以某些时候将站点的结构设计人员称为站点设计师或者信息构建师，由此规划的作用可想而知。通过对内容详实的规划与设计，为电子商务表达层的具体制作打下坚实的基础。二、实验内容个人网站的总体规划设计，主要包括1、个人网站的主题和名称；2、网站的CI形象；3、根据主题确定网站栏目；4、确定网站的目录结构与链接结构；5、确定网站的整体风格与创意设计；6、首页的具体设计；7、各页面版面布局；8、网站的色彩搭配设计。三、实验原理、方法和手段1、实验原理1）网站的主题与名称①主题要小而精定位要小，内容要精；②题材最好是自己擅长或者喜爱的内容；③题材不要太滥或者目标太高；④网站名称要正气、要易记、要有特色。2）网站的CI形象①设计网站的标志（Logo）；②设计网站的标准色彩；③设计网站的标准字体；④设计网站的宣传标语。3）根据主题确认网站的栏目①尽可能将网站最有价值的内容列在栏目上；②尽可能方便访问者的浏览和查询；③尽可能删除与主题无关的栏目。4）确定网站的目录结构与链接结构不要将所有文件都存放在根目录下；按栏目内容建立子目录；不要使用过长的目录名；尽量使用意义明确的目录名，尽量做到“见名知意”；目录的层次不要太多，建议不要超过3层。5）确定网站的整体风格与创意设计其形式法则主要包括：视觉流程；点、线、面；形状间的组合和构成关系；形状与空间关系；构架与空间；节奏与韵律；对比、调和与统一；装饰与趣味。6）网站首页设计确定首页的功能模块、设计首页的版面、处理技术上的细节。7）确定网页版面布局8）网站的色彩搭配主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体不单调，看主要内容也不会眼花。9）其他建议网页的创意设计包括文字排列方向、字群聚散组合，字体大小风格的选择，图片的分布及色彩与空白的经营，不仅追求网页形式的变化，更重视各视觉元素的不同形式和构成能给人在感情上造成不同的心理感受，并体现不同的主题。①内容与形式表现必须统一和有序，形式表现必须服从内容要求，在造型上各构成要素规格化的设计样式要统一；②必须考虑网页上各构成要素之间的视觉流程，能自然而有序地达到信息诉求重点的位置，突出主题；③由于大多数媒体是适用于纵向的，而屏幕是适用于横向的；屏幕是由后向前发光，改变了颜色的对比属性；④必须考虑超链接的非线形特点，使用户可以自主地访问网站，让他们知道在哪里，可以到哪个地方去，所以方便清晰的导航以及适当的返回按钮设计非常重要；⑤突出主题要素；⑥注意网页设计中的空白处理；⑦在视觉上着力强调网页的诉求重点。2、方法和手段根据自己选定的个人网站的主题，进行一系列的网站规划与设计，目的是在规划设计的基础上，利用一定的素材，采用即将学习到的网页开发相关技术实现规划设计的内容。四、实验组织运行要求先由教师集中授课，讲解如何进行实验，然后是学生自主训练。五、实验条件1、每个学生一台电脑、要求能通过互联网访问电子商务系统；2、实验环境：Windows98/2000/XP系统且浏览器为IE。六、实验步骤1、确定个人网站的主题和名称；2、设计网站的CI形象，包括其Logo、色彩、字体等；3、根据主题确定网站的栏目；4、确定网站的链接结构与目录结构；5、确定网站的整体风格与创意设计；6、网站首页设计，并适当收集首页所需要的素材；7、确定网页版面布局；8、确定网站的色彩搭配；9、根据网站规划设计的主体以及栏目适当收集素材。七、思考题1、网站规划设计的必要性。2、网站规划设计时的心得体会，在指导教师所列举的实际网站中挑选其中2-3个分析其整体风格、创意、版面布局、色彩搭配以及首页的设计，并提出自己的看法。八、实验要求1、实验预习1）在实验前需要对电子商务表达层——网站有一个初步的理解，包括其概念以及基本元素，包含的基本技术等，在此基础上进行具体的规划设计；2）预习网站规划设计需要针对网站的哪些方面进行，参见“实验内容”。2、实验记录无3、实验报告1）填写课程名称，实验日期。2）填写学生所在的班级、学号、姓名3）实验报告部分为主体部分，根据实验内容、实验步骤的要求编写个人网站的总体规划设计，要求个性鲜明，内容丰富，创意独特。4）成绩一栏和最后的指导教师评语为教师填写。九、其它说明必要时对上述相关内容进行补充，或告知学生实验室管理的相关规定及安全事项等内容。

实验三：运用网页制作工具开发个人网站首页同时掌握HTML语言实验学时：4实验类型：（验证）实验要求：（必修）一、实验目的结合第二章电子商务表达层中关于静态网页开发技术，能按照实验二中规划的内容，使用网页制作工具进行个人网站——首页的开发，与此同时，能掌握HTML标记的使用，为网络编程语言的运用奠定基础。二、实验内容1、根据个人网站的规划设计的内容（其中包括整个网站以及首页的规划），进行网站首页的开发，要求整体符合规划。1）利用网页编辑工具首先设置网页标题；2）然后进行整体布局，可利用框架、层或者表格对象进行；3）在此基础上在首页中放置网站的栏目，以图像或者文字的形式均可，并进行适当的修饰；4）补充网页具体内容元素，主要包括图像、文字等，并适当修饰；5）最后考虑采用Marquee、Javascript效果或者Flash动态等元素充实美化页面（Javascript技术将在实验四具体讲解），可适当考虑增加背景音乐等元素。2、在进行首页开发的同时，能掌握HTML标记的运用1）网页基本元素<Html>表示Html网页开始与结束；<Head>表示网页头开始与结束；<Body>表示网页主体内容的开始与结束。【例】：一个基本的空白网页HTML代码为<Html><Head></Head><Body></Body></Html>2）网页标题（Title）【例】：<Html><Title>我的网页</Title>Thisismyfirsthtmlfile.</Html>3）网页的背影和文本颜色窗口背景可以用下列方法指定<Bodybackground="image-url"><Bodybgcolor=#text=#link=#alink=#vlink=#>前者指定填充背景的图像，如果图像小于窗口的大小，则把背景图像重复，直到填满窗口区域。后者指定的是16进制的红、绿、蓝分量。属性：bgcolor背景颜色text文本颜色Link链接指针颜色alinik活动的链接指针颜色vlinik已访问过的链接指针颜色【例】：<Bodybgcolor=“FF00000”注意，此时网页主体元素必须写完整，即用<Body>结束4）文字（修饰）①字体大小Html有七种字号，1号最小，7号最大。缺省字号为3，可以用<basefontsize=字号>设置缺省字号。设置文本的字号有两种办法，一种是设置绝对字号，<fontsize=字号>；另一种是设置文本的相对字号；<fontsize=±n>。用第二种方法时“＋”号表示字体变大，“－”号表示字体变小。②字体风格字体风格分为物理风格和逻辑风格。物理风格直接指定字体。<b>黑体 <i>斜体<u>下划线 <tt>打字机体。逻辑风格指定文本的作用。<em>强调 <srrony>特别强调<code>源代码 <samp>例子<kbd>键盘输入 <var>变量<dfn>定义 <cite>引用<small>较小 <big>较大<sup>上标 <sup>下标③字体颜色字体的颜色用<fontcolor=#>指定，#可以是6位16进数，分别指定红、绿、蓝的值，也可以是指定的颜色名称，例如black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一。④闪烁<blink>文本</blink>使文本闪烁，闪烁频率为1秒钟一次。5）图像图像使你的页面更加漂亮，但是行向图像会导致网络通讯量急剧增大,使访问时间延长。所以在首页（homepage），不宜采用很大的图像。如果确实需要一些大图像，最好在主页中用一个缩小的图像指向原图，并标明该图的大小。这样读者可以快速地访问您的主页，自己选择看还是不看那些图像。①图像的基本格式为<Imgsrc="image-url">或<Imgsrc="image-url"alt="text">image-url是图像文件的url。目前，大部分浏览器支持.gif和.jpg文件，alt属性告诉不支持图像的浏览器用text代替该图。②图像与文本的对齐方式图像在窗口中会占据一块空间，在图像的左右可能会有空白，不加说明时，浏览器将随后的文本显示在这些空白中，显示的位置由align属性指定。用align=left，right时，图像是一个浮动图像。比如align=left，图像必须挨着左边框，它把原来占据该块空白的文本“挤走”，或挤到它右边，或挤到它上下。③文本与图像的间距用vspace=#，hspace=#指定，#是整数，单位是象素，前者指定纵向间距，后者指定横向间距。6）表格标签在网页中做一个3栏2列的表格：第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。下文将将该过程进行分解讲解，首先看一个最简单的表格：原始码呈现结果<TABLEBORDER=1>

<TR><TD>1</TD></TR>

</TABLE>1利用<TABLE>这个标签来告诉电脑，这是一个表格，至于Border=1这参数是设定此表格的框线粗细为1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。现在我们再来增加二个格子：原始码呈现结果<TABLEBorder=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

</TABLE>123<TR></TR>没有增加，<TD></TD>却增加了二组。那如果需要再加上一行呢？原始码呈现结果<TABLEBorder=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

</TABLE>123456合并表格栏位并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。左右栏位合并：如何将1、2、3格通通合并变成一大格：原始码呈现结果<TABLEBorder=1>

<TR><TDColspan=3>1</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

</TABLE>14562、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个Colspan="3"，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是：这个栏位左右横跨了3个栏位，也正因如此，本来的两个<TD>都可以省掉了。上下栏位合并：如何上下合并，将1、4格合并变成一大格：原始码呈现结果<TABLEBorder=1>

<TR><TDRowspan=2>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>5</TD><TD>6</TD></TR>

</TABLE>12356要合并栏位就一定有些栏位会被“牺牲”掉，这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的就是4栏位，而在1的<TD>标签中则多了个生面孔Rowspan，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是：这个栏位上下连跨了2个栏位。表格栏位对齐位置设定可以自由设定表格的“宽”及“高”，下面制作一个宽100、高60的表格：原始码呈现结果<TABLEWidth="100"Border="1"Height="60">

<TR><TD>1</TD></TR>

</TABLE>1文本“1”居中如何设置？加入Align=Center这参数即可：原始码呈现结果<TABLEWidth="100"Border="1"Height="60">

<TR><TDAlign=Center>1</TD></TR>

</TABLE>1同理利用Align=Right可以让表格中物件置右、利用Align=Left可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将Align加在<TD>中。既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用Valign=Top这种属性即可让表格内物件靠上方对齐。原始码呈现结果<TABLEWidth="100"Border="1"Height="60">

<TR><TDAlign=CenterValign=Top>1</TD></TR>

</TABLE>1同理利用Valign=Middle可以让表格中物件垂直置中（预设值），Valign=Bottom可以让表格中物件靠下方。表格背景、底色设定表格以及表格中的单元格都可以设置背景色，效果如下：原始码呈现结果<TABLEBorder="1"BgColor=#FFCC33>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>1234同样BgColor="颜色码"加在<TR>中，可以指定一行的背景色。加在<TD>中则可以指定一个栏位的背景色。表格除了可以设定底色之外，也可以用图片来作背景，只要将BackGround="图片名称"加到表格中即可。表格框线设定Border=“粗细值”原始码呈现结果<TABLEBorder=5>

<TR><TD>1</TD></TR>

</TABLE>1设定边框颜色，BorderColor=“颜色码”原始码呈现结果<TABLEBorder="5"BorderColor="#0080FF">

<TR><TD>1</TD></TR>

</TABLE>1表格栏距设定我们可以利用CellPadding属性自由设定表格内文字距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。原始码呈现结果<TABLEBorder="1"CellPadding="10">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>12我们可以利用CellSpacing属性设定表格栏位格线之间的距离。原始码呈现结果<TABLEBorder="1"CellSpacing="5">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>127）居中<Center>很多元素都有对齐方式属性，如hn、p等。也可以直接用居中链接签<Center>…</Center>。【例】：<H3align=center>Wonderful!!</H3><Center>Thismustbemydream.</Center>8）文字标题（hn）标题元素有6种，分别为H1，H2，…H6，用于表示文章中的各种题目。标题号越小，字体越大，一般情况下，浏览器对标题作如下解释：H1黑体，特大字体，居中，上下各有两行空行；H2黑体，大字体，上下各有一到两行空行；H3黑体（斜体），大字体，左端微缩进，上下空行；H4黑体，普通字体，比h3更多缩进，上边一空行；H5黑体（斜体），与h4相同缩进，上边一空行；H6黑体，与正文有相同缩进，上边一空行。【例】：<H2align=center>Chapter2</H2>9）分段<P>Html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以Html将多个空格以及回车等效为一个段落，这是和绝大多数字处理器不同的。常用属性：aligh＝#（#可以是left，center，right，其含义同上文）。【例】：<Palign=center>Thisisacenteredparagraph</P>10）分行<br>和禁止分行<nobr><br>表示在此处分行，<nobr></nobr>则通知浏览器，其中的内容在一行内显示，若一行内显示不了，则超出部分被裁剪掉。<brclear=#>clear属性标明下一行的情况，如clear=left，表示下一行从左边界处开始。#可以是left，right，all之一。11）预排版文本<pre>Html的输出是基于窗口的，因而Html文件在输出时都是要重新排版的，若确实不需要重新排版的内容，可以用<pre>…<／pre>通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出。【例】：<pre>pleaseuseyourcard.VISAMaster<b>Hereisanorderform.</b></pre>12）横线（hr）横线，一般用于分隔同一文体的不同部分。在窗口中划一条横线非常简单，只要写一个<hr>即可，横线的宽度用<hrsize=n>指定，width=#>指n是线宽，单位是象素。例：<hrsize=10>，<hr定横线长度，可以指定绝对线长，也可以指定横线长度占窗口宽度的百分比。【例】：<hrwidth=50><hrwidth=50%>横线的位置用<hralign=#>指定。#是left成right之一，left表示左端与左边界对齐，right是右端与右边界对齐，缺省状态下横线出现在窗口正中。三、实验原理、方法和手段1、实验原理1）利用网页设计工具进行个人网站首页开发①网页编辑工具的使用方法：略。②网页布局方法比较可以采用层、表格以及框架三种方法进行，目前使用比较多的是表格，利用Border=0的表格布局可控性比较强；而框架占用的资源比较多，例如一个上下结构的框架网页完整调用需要打开3个网页；层的使用是DHTML技术中的关键部分，但是存在如果利用层进行绝对定位，其主要属性是LeftMargin与TopMargin，对于不同的分辨率显示的在整个显示屏中的位置不尽相同的弊端，一般不建议使用。建议整体采用表格布局，如有必要可结合框架布局以及层布局的方式，以实现某些特殊作用。③框架网页布局下图可以看出，一共分为1、2、3三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个index.htm是做什么用的呢？左下角的这个档案index.htm，就是要告诉电脑，我们要将画面分割成这样，也就是说，所有Frame的标签，其实都只摆在index.htm这个档案里。（当然，不是档名一定要叫做index.htm取其他档名也是可以的。）总之，需要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了），另外，还会多一个档案是来告诉电脑要如何分割的（也就是例中的index.htm档）。【例】：框架网页实例<Head><Title>框窗实作</Title>

</Head>

<FrameSetCols="120,*">

<FrameSrc="a.htm"Name="1">

<FrameSetRows="100,*">

<FrameSrc="b.htm"Name="2">

<FrameSrc="c.htm"Name="3">

</FrameSet>

</FrameSet>

</Html>实际网页效果2）HTML语言标记的掌握见“实验内容2”3）网页设计注意事项①注意视觉效果一定要兼顾不同分辨率，可能采用1024*768开发的页面非常具备吸引力，但是在800*600模式下可能因为出现横向或者纵向滚动条而使其黯然失色，建议采用低分辨率开发，当然可以在进入页面时判断分辨率，根据不同的分辨率来适应，该技术需要使用Javascript技术，将在实验四进行。另外例如使用表格布局时可以将表格的Width与Height属性按照百分比设置，表格的宽度与高度就会根据网页的大小自动收缩，这样也会不同程度的解决分辨率不同带来的效果不一致问题。②表格布局的建议一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用<tBody>标记，以便能够使这个大表格分块显示。③其他建议一般情况下网站内的图片链接建议使用相对地址。每一个目录中应该包含一个缺省的html文件，文件名统一用index.htm2、方法和手段1）根据自己个人网站的规划与设计，在网页开发工具上进行首页的开发，建议采用Dreamweaver工具，目的是掌握网页开发的技能并为以此为基础进行整个网站的开发奠定基础；2）需要重点学习与掌握HTML语言，按照实验内容的要求学习HTML标记以及各自的效果，为网络编程语言的学习以及电子商务系统的开发奠定基础，此过程采用一般的文本编辑工具即可。四、实验组织运行要求先由教师集中授课，讲解如何进行实验，然后是学生自主训练。五、实验条件1、每个学生一台电脑、要求能通过互联网访问电子商务系统；2、实验环境：Windows98/2000/XP系统且浏览器为IE、具有Dreamweaver或FrontPage网页开发工具。六、实验步骤1、个人网站首页的开发（利用网页编辑工具）1）打开网页编辑工具；2）将首页文件命名为index.htm，设置个人网站首页标题；3）根据网页规划与设计方案中对布局的设计，利用表格、框架或者层进行网页布局设计。①表格布局：利用Border=0的表格进行布局，表格宽度尽量采用百分比形式设定，并避免整个页面使用一个大表格进行布局，也需避免嵌套超过4层的表格。②框架布局：需要设置好框架的整体网页属性，包括各框架的宽度、高度（建议使用百分比）、框架是否可改变大小（如果需要可以改变大小，布局采用框架是个很好的方案）③层布局：在没有系统学习CSS技术之前采用层需要熟悉掌握网页编辑工具中对层属性的设定方法，在Dreamweaver中可以方便的设置其位置（左边距、上边距）\层的大小以及背景色等外观属性等。4）设置网站的栏目并进行适当的修改根据网站规划设计中对栏目的设计编辑网站的栏目，可以以导航图形或者导航栏等形式出现，要突出主题，适当考虑要有新意。①图像的收集与修改图像可以从网上或者其他渠道收集，也可适当采用Photoshop或者Firework工具进行修改，本课程不单独设置实验进行学习，将在实验过程中适当讲解图像文字的插入；图像的简单编辑、截取；图像效果的设置等的简单方法。②图像的插入实现使用网页编辑工具插入图像，图像的连接地址（Src）建议采用相对地址；并设置图像的相关属性，例如宽度高度（建议如果没有特殊需要，以默认为准，不需单独设置）、提示、边框（建议设置为0）等。③栏目名称文字的输入与修饰实现使用网页编辑工具插入栏目文字（所见即所得，直接录入即可），需要设置文字相关属性，例如大小、颜色、字体以及行距等。5）补充网页内容元素，基本包括文字、图像等，并适当修饰根据收集来的网页首页的内容资料补充网页内容，基本元素包括文字、图像等，插入图像、文字的步骤见步骤4）中描述。6）采用Maquee、Javascript效果或者Flash动态等元素充实美化页面①Marquee是设置网页滚动文字（或者图像）的对象，可以设置其滚动速度、滚动方向以及是否循环滚动等，FrontPage工具中“插入字幕”即为该效果；②Javascript效果的使用有时会给网页起到画龙点睛的作用，但过量的使用会影响网页速度，有时类似于弹出窗口等会造成浏览者的厌烦情绪，所以需要合理使用该技术，在实验四中将对该技术具体讲解。③FlashMX可以用来开发丰富Internet内容和应用程序，可以采用嵌入的FlashPlayer播放，该技术难度较大，本课程不做过多的涉及，如果有兴趣可以参考相关资料自行学习。7）网页其他元素可适当考虑增加背景音乐等元素；在网页布局中可以添加水平线起到间隔的作用等等，可以根据实际需要使用网页编辑工具中的其他辅助项目为网页增添色彩。2、在进行首页开发的同时，能掌握HTML标记的运用利用网页编辑工具中提供的HTML视图，调试在“实验内容”中列出的HTML标记及对应标记的属性，并查看标记具体效果。七、思考题1、网页设计工具使用与HTML语言掌握的关系？2、网页表格与WORD中表格的区别？3、在实际网页开发过程中，是否有纳入规划设计方案但发现难以实现的内容？具体有哪些？4、网站首页为何必须设置为index.htm文件名，组织好的各文件夹中最好需要有一个index.htm，为什么？八、实验要求1、实验预习1）认真学习网页编辑工具的使用，主要是如何插入图形、文本等对象以及进行适当的修饰；表格对象的控制；以及动态相关效果的设置等；2）需要对HTML语言根据实验内容要求预习相关标记的使用。2、实验记录无3、实验报告1）填写课程名称，实验日期。2）填写学生所在的班级、学号、姓名3）实验报告部分为主体部分①主要填写根据网页规划与设计的内容进行网页开发过程的步骤和网页的执行效果；②根据实验内容学习HTML标记语言的步骤以及网页执行结果；③最后需要写的是自己的实验体会和收获。4）成绩一栏和最后的指导教师评语为教师填写。九、其它说明必要时对上述相关内容进行补充，或告知学生实验室管理的相关规定及安全事项等内容。

实验四：个人网站全面开发并上传实验学时：4实验类型：（设计） 实验要求：（必修）一、实验目的结合第二章电子商务表达层中关于静态网页、动态网页（客户端应用体系结构以及客户端脚本体系结构）开发技术的学习，能按照实验二中规划的内容，以实验三网站首页开发为起点全面完成个人网站的开发，并申请个人网站空间实现网站的上传，从而完整掌握一个网站从设计、开发实现到上传的完整过程，为以此为基础进行的电子商务系统逻辑层的设计开发做好铺垫。二、实验内容1、根据个人网站的规划设计的内容，以实验二中个人网站首页开发为起点完成整个网站的开发，要求整体符合规划。要求完整完成对Dreamweaver或Frontpage网页编辑工具的掌握以及对图形适当的处理技巧。2、HTML标记——在进行网站开发的同时，能完成对HTML超级链接等的标记的运用掌握1）超文本链接指针一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。①指向一个目标<a>在html文件中用链接指针指向一个目标。其基本格式为：<ahref="url">字符串</a>href属性中的统一资源定位器（url）是被指向的目标，随后的“字符串”在html文件中充当指针的角色，它一般显示为蓝色。当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。【例】：<ahref="">搜狐</a>用户用鼠标点取“搜狐”，即可看到搜狐网站主页。在这个例子中，充当指针的是搜狐，同样我们也可以用图像作为链接指针。在编写html文件时，需要知道目标的url。如何才能得到目标的url呢？对于自己主机内的文件，它的url可以根据该文件的实际情况决定。对于Internet上的资源，我们在用浏览器观看时，它的url会在浏览器的Location一栏中显示出来，把它抄下来写到你的html文件中即可。在编写html文件时，对有能确定关系的一组资源（比如在同一个目录中）应采用相对url，这不仅简化你的html文件，而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时，用相对url写的html文件用不看更新其中的url（只要它们的相对关系没有改变）。但如果你用绝对url编写html，你就不得不逐字修改每个链接指针中的url，这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系，比如你的html文件是介绍各大学情况的，它所指向的目标分布在全球的主机中，这时你就只能用绝对url了。图像链接指针图像也可以做为链接指针。格式为：<ahref="url"><Imgsrc="url"></a>可以看出，上例中用<Imgsrc="url">取代了链接指针中text的位置。<Imgsrc="url">是图像元素，它表明显示url代表的图像文件，参见图像一章。属性：目标窗口如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。<ahref="url"target="window-name">text</a>将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。2）转义字将与特殊字符html中<，>，&有特殊含义，（前两个字符用于链接签，&用于转义），不能直接使用。使用这三个字符时，应使用它们的转义序列。&的转义序列为&s或&<的转义序列为≪<>的转义序列为>>前者为字符转义序列，后者为数字转义序列。例如≪font>显示为<font>，若直接写为<font>则被认为是一个链接签。需要说明的是：--转义序列各字符间不能有空格；--转义序列必须以“;”结束；--单独的&不被认为是转义开始。如“≪”被解释为“≪”而不是<；另一个需要转义的字符是引号，它的转义序列为"""或"""，如：<Imgsrc="image.gif"alt="A"real"example">html使用的字符集是ISO&859Larin-1字符集，该字符集中有许多标准键盘上无法输入的字符。对这些特殊字符只能使用转义序列。3、DHTML——掌握网页开发中样式表技术的使用1）概念CSS是CascadingStyleSheet的缩写，译作“层叠样式表单”。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。2）样式表加入网页的方法①链入外部样式表文件(LinkingtoaStyleSheet)先建立外部样式表文件（.css），然后使用HTML的link对象。【例】：<Head>

<Title>titleofarticle</Title>

<linkrel=stylesheethref="/rainer.css"type="text/css">

</Head>②定义内部样式块对象(EmbeddingaStyleBlock)在HTML文档的<Html>和<Body>标记之间插入一个<STYLE>...</STYLE>块对象。【例】：<Html>

<styletype="text/css">

<!--

body{font:10pt"Arial"}

h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon}

h2{font:13pt/15pt"Arial";font-weight:bold;color:blue}

p{font:10pt/12pt"Arial";color:black}

-->

</style>

<Body>请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。③内联定义(InlineStyles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。【例】：<Pstyle="margin-left:0.5in;margin-right:0.5in">这一行被增加了左右的外补丁</P>3）样式表语法(CSSSyntax)Selector{property:value}参数说明：Selector

--

选择符property

:

value

--

样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开4）样式表实例【例】：样式表实例<Html><Head><STYLETYPE="text/css"><!--H3{text-decoration:underline;font-size:37px;font-family:impact}--></STYLE></Head><Body><H3>Stylesheets</H3></Body></Html>实现效果：Stylesheets通过实验掌握运用CSS样式表的方法，建议采用链入外部样式表文件的方式将样式表加入网页。4、客户端应用体系结构1）JavaApplet是Java语言编写的包含在网页里的“小应用程序”，必须嵌入HTML文件中，由浏览器解释之后作为网页的一部分来执行。实验指导教师演示JavaApplet实现烟花效果，主要突出其Class是脱离网页存在的方式，当客户浏览时，Applet随着网页一起下载到客户端浏览器中，并借助浏览器中的Java虚拟机运行工作，要求能按照相应步骤调用对应的Applet小程序执行并查看效果。2）ActiveX是下载到IE，并在客户端执行的功能完全的程序，只能在Windows环境下工作，演示插入Office图表控件并要求能运用1-2个网页编辑工具提供的ActiveX控件。5、客户端脚本体系结构（Javascript）——了解并部分掌握客户端体系结构Javascript脚本技术1）基本概念Javascript是一种可以嵌入HTML页面、基于对象的解释性语言。借助Javascript语言，可以在不需要网络传输资料的情况下，响应使用者的需求事件，所以当一位使用者输入一项资料时，它不用经过传给服务端处理，再传回来的过程，而直接可以被客户端的应用程序所处理。Javascript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样，具有自身的数据类型、表达式和算术运算符及程序的基本框架结构。2）简单实例【例】：Javascript简单实例<Html><Head><ScriptLanguage="Javascript">//JavascriptAppearshere.alert("这是第一个Javascript程序!");</Script></Head></Html>实现效果：说明：是HTML文档，其标识格式为标准的HTML格式；如同HTML标识语言一样，Javascript程序代码是一些可用字处理软件浏览的文本，它在描述页面的HTML相关区域出现，可将<Script>...</Script>标识放入Head>..</Head>或<Body>...</Body>之间。将Javascript标识放置<Head>...</Head>在头部之间，使之在主页和其余部分代码之前装载，从而可使代码的功能更强大；可以将Javascript标识放置在<Body>...</Body>主体之间以实现某些部分动态地创建文档；Javascript代码由<ScriptLanguage="Javascript">...</Script>说明。在标识<ScriptLanguage="Javascript">...</Script>之间就可加入Javascript脚本；alert()是Javascript的窗口对象方法，其功能是弹出一个具有“确定”对话框并显示（）中字符串的窗口；通过<!--...//-->标识说明：若不认识Javascript代码的浏览器，则所有在其中的标识均被忽略；若认识，则执行其结果。使用注释这是一个好的编程习惯，它使其他人可以读懂你的语言；Javascript以</Script>标签结束。3）学习JavaScirpt的基本知识并学习简单的运用能掌握Javascript语言的基本知识（数据类型、对象的概念、函数及事件驱动机制）等，并能运用浏览器对象以及窗口对象适当增加网站的互动性。能借鉴成熟的Javascript实例并经过适当修改后运用到个人网站中，以增加网页整体效果。6、申请免费网站空间，并通过Web或者FTP形式发布个人网站。三、实验原理、方法和手段1、实验原理1）HTML标记——超级链接技术（见“实验内容1”2）客户端应用体系结构①JavaApplet 见“实验内容4-1②ActiveX 见“实验内容4-23）客户端脚本体系结构Javascript见“实验内容5”。①Javascript的基本数据结构在Javascript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值。在Javascript的基本类型中的数据可以是常量，也可以变量。由于Javascript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。②Javascript的程序构成if条件语句、For循环语句、while循环③Javascript中的函数Function函数名（参数,变元）{函数体;Return表达式;}④Javascript的事件驱动和事件处理Javascript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（EventDriver）。而对事件进行处理程序或函数，我们称之为事件处理程序（EventHandler）。事件处理程序在Javascript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下：Function事件处理名（参数表）{事件处理语句集；……}事件驱动Javascript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：（1）单击事件onClick当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：button（按钮对象）checkbox（复选框）或（检查列表框）radio（单选钮）resetbuttons（取消按钮）submitbuttons（提交按钮）在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用Javascript中内部的函数。还可以直接使用Javascript的代码等。（2）onChange改变事件当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。（3）选中事件onSelect当Text或Textarea对象中的文字被加亮后，引发该事件。（4）获得焦点事件onFocus当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。（5）失去焦点onBlur当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocus事件是一个对应的关系。（6）载入文件onLoad当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。（7）卸载文件onUnload当Web页面退出时引发onUnload事件，并可更新Cookie的状态。⑤浏览器对象层次及其主要作用编程人员利用以下这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在Javascript中提供了非常丰富的内部方法和属性，从而减轻了编程人员的工作，提高编程效率，这正是基于对象与面向对象的根本区别所在。浏览器对象(Navigator)：提供有关浏览器的信息；窗口对象(Windows)：Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性；位置对象(Location)：Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象；历史对象(History)：History对象提供了与历史清单有关的信息；文档对象(Document)：document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。在这些对象系统中，文档对象属于非常重要的，它位于最低层，但对于我们实现Web页面信息交互起作关键作用，因而它是对象系统的核心部分。文档对象包含的内容：LinksAnchorFormMethodProp链接对象锚对象窗体对象方法对象Document对象的主要作用就是将以上的基本元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，Document对象又是由属性和方法组成。⑥窗口对象以及输入/输出应用Javascript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。请看下面例子：【例】：窗口输入输出实例<Html><Head><scriptlanguaga="Javascript">Vartest=mpt("请输入数据:");document.write(test+"Javascript输入输出的例子");</script></Head></Html>其中mpt()就是一个窗口对象的方法，其基本作用是，当装入Web页面时在屏幕上显示一个具有“确定”和“取消”的对话框，让你输出数据。document.writle是一个文档对象的方法，它的基本功能，是实现Web页面的输出显示。（1）窗口对象该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。在使用应注意以下几点：该对象对应于HTML文档中的<Body>和<FrameSet>两种标识；onload和onunload都是窗口对象属性；在Javascript脚本中可直接引用窗口对象。如：window.alert("窗口对象输入方法")可直接使用以下格式：alert("窗口对象输入方法")（2）窗口对象的事件驱动窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。（3）窗口对象的方法窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。创建一个新窗口open()使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名，具体参数参见“（5）输出流及文档对象”。具有OK按钮的对话框alert()方法能创建一个具有OK按钮的对话框。具有OK和Cancel按钮的对话框confirm()方法为编程人员提供一个具有两个按钮的对话框。具有输入信息的对话框prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下：prompt（“提示信息”，默认值）。（4）窗口对象中的属性窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个：frames确文档中帧的数目frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点：--frames属性是通过HTML标识<Frames>的顺序来引用的，它包含了一个窗口中的全部帧数。--帧本身已是一类窗口，继承了窗口对象所有的全部属性和方法。Parent指明当前窗口或帧的父窗口。defaultstatus:默认状态，它的值显示在窗口的状态栏中。status:包含文档窗口中帧中的当前信息。top:包括的是用以实现所有的下级窗口的窗口。window.指的是当前窗口self:引用当前窗口。（5）输出流及文档对象在Javascript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。创建新文档open()方法使用document.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window.Open()与Open()是一样的。

打开一个窗口的基本格式：Window.open("URL","窗口名字","窗口属性"]window属性参数是由一个字符串列表项它由逗号分隔，它指明了有关新创建窗口的属性。参数设定值含义toolbaryes/no建立或不建立标准工具条locationyes/no建立或不建立位置输入字段directionsyes/no建立或不建立标准目录按钮statusyes/no建立或不建立状态条menubaryes/no建立或不建立菜单条scrollbaryes/no建立或不建立滚动条revisableyes/no能否改变窗口大小widthyes/no确定窗口的宽度Heightyes/no确定窗口的高度。在使用Open()方法时，需要注意以下点：通常浏览器窗中，总有一个文档是打开的；在完成对Web文档的写操作后，要使用或调用close()方法来实现对输出流的关闭；在使用open()来打开一个新流时，可为文档指定一个有效的文档类型，有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。write()、writeln()输出显示该方法主要用来实现在Web页面上显示输出信息。在实际使用中，需注意以下几点：writeln()与write()唯一不同之处在于在未尾加了一个换符；为了正常显示其输出信息，必须指明<pre></Pre>标记，使之告诉编辑器；输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。关闭文档流close()在实现多个文档对象中，必须使用close()来关闭一个对象后，才能打开另一个文档对象。清除文档内容clear()使用该方法可清除已经打开文档的内容。4）客户端脚本体系结构——DHTML/CSS 见“实验内容2”。采用层叠式样式表的优点：可以只通过修改一个文件就改变页数不定的网页的外观和格式；可以保证在所有浏览器和平台之间的兼容性；更少的编码、更少的页数和更快的下载速度。5）网站发布目前常用协议是HTTP和FTP。其中HTTP主要用于下载数据，但是也可以使用HTTP来上载数据；FTP是传统传输协议，主要用于上传和从Internet上下载文件，与HTTP相比，它的传输速度明显要快得多，同时它可以向未安装服务器扩展的服务器上发布站点。使用FTP作为传输协议时，可以使用专门的FTP软件（例如Cuteftp）来传输，也可以采用网站提供的程序方式或者类似Frontpage中的站点发布功能来发布站点（实际也是使用FTP协议）。2、方法和手段根据个人网站的规划与设计，在网站首页开发的基础上建立栏目链接，并完成整个网站的开发，在此过程中完整掌握Dreamweaver或Frontpage网页开发工具；并要求通过CSS样式表控制网站的整体风格；要求适当采用客户端体系结构以及Javascript技术加强网站的动态效果，特别是后者需要重点加强运用。具体要求：网站开发过程中要求注意紧扣主题、界面美观、内容丰富；页面中的图片要使用合理，尽量不要使用太大的图片，也不要使用过多图片，图片显示要正确有效（建议使用相对地址）；文件夹的组织要求清晰有条理；各个页面之间的链接要合理有效；必要时用手工优化代码，不要产生过多的垃圾代码。四、实验组织运行要求学生自主训练为主。五、实验条件1、每个学生一台电脑、要求能通过互联网访问电子商务系统；2、实验环境：Windows98/2000/XP系统且浏览器为IE、具有Dreamweaver或FrontPage网页开发工具。六、实验步骤1、根据个人网站的规划设计的内容，以实验二中个人网站首页开发为起点完成整个网站的开发，要求整体符合规划。1）设置首页的栏目链接；2）设计整个网站的目录结构，建议设置Images文件夹放置图片文件，设置CSS以及JS文件夹放置CSS样式表文件以及Javascript脚本文件，文件夹组织要求层次不超过三层，逻辑清晰；3）收集、整理和编辑网站需要的图片素材以及内容资料，适当的时候对图片进行一定的处理；4）网站中的整体风格（BODY、TABLE等HTML标记的风格要求使用CSS样式表进行设置），此外可以使用CSS样式表实现其他相关样式以及动态效果；5）按照栏目顺序逐个进行网页编辑，要求风格统一、紧扣主题、特色鲜明，文件名尽量采用建议命名方式；6）针对网站的特点采用Javascript技术设置人性化的互动环节；例如显示问候、当前日期显示等等；7）根据网站需要加入动态效果，建议采用客户端脚本——Javascript实现，也可以采用客户端应用（JavaApplet、ActiveX）以及Flash等其他技术实现。2、申请网站空间并完成网站上传1）申请免费网站空间；2）将发布个人网站，通过FTP方式实现，可以采用空间提供的方式，也可以采用CuteFtp等工具实现上传，确保网站发布后图片以及链接访问正确。七、思考题1、CSS样式表与直接使用HTML标记设置属性区别在哪？2、请说明自己的网站文件夹组织方式以及这样设置的原因。3、请说明Javascript实现显示日期时间与服务端程序设置显示日期时间的异同？4、在网站开发过程中需要将超级链接的地址以及图片地址设置为相对地址，为什么？八、实验要求1、实验预习1）巩固网页编辑工具的学习；2）在实验三的基础上预习HTML语言超级链接的使用；3）根据实验内容预习CSS的基本概念以及样式表的使用；4）学习Javascript的基本知识以及语言相关内容；5）学习网站上传的相关知识。2、实验记录无3、实验报告1）填写课程名称，实验日期。2）填写学生所在的班级、学号、姓名3）实验报告部分为主体部分①根据网站规划的内容，给网站首页设置栏目超级链接，并完成整个网站的建设；②网站中需要使用CSS样式表为网站设置外观；③网站中适当使用Javascript体现网站的互动以及动态效果；④实现网站发布并确保能够通过互联网访问，图片与链接要求正确；⑤如果有相关实验体会可以通过实验报告的形式另行提交给实验教师。4）成绩一栏和最后的指导教师评语为教师填写。九、其它说明必要时对上述相关内容进行补充，或告知学生实验室管理的相关规定及安全事项等内容。

实验五：ASP技术实现基本循环实验学时：2实验类型：（验证） 实验要求：（必修）一、实验目的结合第三章电子商务逻辑层中对服务端应用程序的技术理论讲解，要求能够掌握ASP、ASP.NET或者JAVA三种网络编程技术的基本概念，在此基础上掌握一种语言环境以及运用方法，通过该语言从而完整体验系统设计开发实现的过程，实际也只能要求学生通过一门语言掌握在电子商务系统三个层次的开发特别，理解其核心的技术原理和背景，并以次来比照了解其他语言的技术特征，达到学习网络开发技术的目的，另一方面也为实现电子商务系统的核心逻辑做技术上的准备。本实验将以ASP作为基础进行讲解，根据学生的对技术的掌握程度，有条件的将换成ASP.NET开发技术实现同一实验效果。二、实验内容1、体验通过网页服务器运行网站实例实验教师演示将本机作为虚拟网站服务器，并通过HTTP形式访问运行服务端应用程序的过程。2、调试ASP循环程序并得到预期效果按照实验内容1的步骤调试ASP应用程序，将执行结果用“文件-另存为”的形式保存成HTM文件形式，并进一步理解“ASP在服务端运行，运行结果以HTML主页形式返回用户浏览器，用户在客户端浏览器看到的仅仅是ASP页的执行结果所生成的HTML网页，而ASP页本身的内容，用户在客户端浏览器是看不到的。”1）调试ASP应用程序实现基本循环（服务器端——ASP文件）2）采