1、实验报告四模板实验报告四（标准）课程电子商务应用开发技术开课实验室影子工厂日期 年 月 日学号实验项目名 称个人网站全面开发并上传学院经济管理学院指导教师成绩教师评语教师签名：年 月 日一、实验目的 结合第二章电子商务表达层中关于静态网页、动态网页（客户端应用体系结构以及客户端脚本体系结构）开发技术的学习，能按照实验二中规划的内容，以实验三网站首页开发为起点全面完成个人网站的开发，并申请个人网站空间实现网站的上传，从而完整掌握一个网站从设计、开发实现到上传的完整过程，为以此为基础进行的电子商务系统逻辑层的设计开发做好铺垫。二、实验内容1、根据个人网站的规划设计的内容，以实验二中个人网站首页开发
2、为起点完成整个网站的开发，要求整体符合规划。要求完整完成对Dreamweaver或Frontpage网页编辑工具的掌握以及对图形适当的处理技巧。2、继续掌握HTML标记在进行网站开发的同时，能完成对HTML超级链接等的标记的运用掌握1）超文本链接指针一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。 指向一个目标在html文件中用链接指针指向一个目标。其基本格式为：字符串href属性中的统一资源定位器（url）是被指向的目标，随后的“字符串”在html文件中充当指针的角色， 它一般显示为
3、蓝色。当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。 图像链接指针图像也可以做为链接指针。格式为：可以看出，上例中用取代了链接指针中text的位置。是图像元素，它表明显示url代表的图像文件，参见图像一章。 属性：目标窗口如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。text 将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。2）转义字将与特殊字符html中，&有特殊含义，（前两个字符用于链接签，&用于转义），不能直接使用。使用这三个字符时，应使用它们的转义序列。& 的转义序列为 &s 或 &
4、; 的转义序列为 > >前者为字符转义序列，后者为数字转义序列。例如≪font>显示为，若直接写为则被认为是一个链接签。3、DHTML掌握网页开发中样式表技术的使用1）概念CSS是Cascading Style Sheet 的缩写，译作“层叠样式表单”。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。2）样式表加入网页的方法 链入外部样式表文件 (Linking to a Style Sheet)先建立外部样式表文件（.css），然后使用HTML的link对象。【例】：title of article 定义内部样式块对象 (Embedding a
5、 Style Block)在HTML文档的和标记之间插入一个.块对象。请注意，这里将style对象的type属性设置为text/css，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。3）样式表语法 (CSS Syntax)Selector property: value 参数说明： Selector-选择符 property:value-样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开 4）样式表实例通过实验掌握运用CSS样式表的方法，建议采用链入外部样式表文件的
6、方式将样式表加入网页。4、客户端应用体系结构1）JavaApplet是Java语言编写的包含在网页里的“小应用程序”，必须嵌入HTML文件中，由浏览器解释之后作为网页的一部分来执行。2）ActiveX是下载到IE，并在客户端执行的功能完全的程序，只能在Windows环境下工作，演示插入Office图表控件并要求能运用1-2个网页编辑工具提供的ActiveX控件。5、客户端脚本体系结构（Javascript）了解并部分掌握客户端体系结构Javascript脚本技术 1）基本概念Javascript是一种可以嵌入HTML页面、基于对象的解释性语言。借助Javascript语言，可以在不需要网络传输
7、资料的情况下，响应使用者的需求事件，所以当一位使用者输入一项资料时，它不用经过传给服务端处理，再传回来的过程，而直接可以被客户端的应用程序所处理。Javascript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样，具有自身的数据类型、表达式和算术运算符及程序的基本框架结构。2）掌握与理解简单实例3）学习JavaScirpt的基本知识并学习简单的运用能掌握Javascript语言的基本知识（数据类型、对象的概念、函数及事件驱动机制）等，并能运用浏览器对象以及窗口对象适当增加网站的互动性。能借鉴成熟的Javascript实例并经过适当修改后运用到个人网站中，以增加网页整体效果。6
8、、申请免费网站空间，并通过Web或者FTP形式发布个人网站。三、实验原理、方法和手段1、实验原理1）HTML标记超级链接技术（见“实验内容1”）2）客户端应用体系结构 JavaApplet 见“实验内容4-1” ActiveX 见“实验内容4-2”3）客户端脚本体系结构Javascript见“实验内容5”。 Javascript的基本数据结构在Javascript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（使True或False表示）和空值。在Javascript的基本类型中的数据可以是常量，也可以变量。由于Javascript采用弱类型的形式，
9、因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。 Javascript的程序构成if条件语句、For循环语句、while循环 Javascript中的函数 Javascript的事件驱动和事件处理Javascript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序
10、的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。 事件处理程序在Javascript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下： 事件驱动Javascript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件： 浏览器对象层次及其主要作用编程人员利用以下这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在Javascript中提供了非常丰富的内部方法和属性，从而减轻了编程人员的工作，提高编程效率，
11、这正是基于对象与面向对象的根本区别所在。 浏览器对象(Navigator)：提供有关浏览器的信息； 窗口对象(Windows)：Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性； 位置对象(Location)：Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象； 历史对象(History)：History对象提供了与历史清单有关的信息； 文档对象(Document)：document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。 窗口对象以及输入/输出应用Javascript是基
12、于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。（1）窗口对象该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。在使用应注意以下几点： 该对象对应于HTML文档中的和两种标识； onload和onunload都是窗口对象属性； 在Javascript脚本中可直接引用窗口对象。如：window.alert(窗口对象输入方法) 可直接使用以下格式：alert(窗口对象输入方法)（2）窗口对象的事件驱动窗口对象主要有装
13、入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。（3）窗口对象的方法窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。 创建一个新窗口open() 具有OK按钮的对话框 具有OK和Cancel按钮的对话框confirm()方法为编程人员提供一个具有两个按钮的对话框。 具有输入信息的对话框prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下：（4）窗口对象中的属性窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用。（5）输出流及文档对象在Javascript文档对象中，提供了用于显示关闭、消除、
14、打开HTML页面的输出流。 创建新文档open()方法使用document.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window. Open()与Open()是一样的。打开一个窗口的基本格式：Window .open(URL,窗口名字,窗口属性4）客户端脚本体系结构 DHTML/CSS 见“实验内容2”。采用层叠式样式表的优点： 可以只通过修改一个文件就改变页数不定的网页的外观和格式； 可以保证在所有浏览器和平台之间的兼容性； 更少的编码、更少的页数和更快的下载速度。5）网站发布目前
15、常用协议是HTTP和FTP。其中HTTP主要用于下载数据，但是也可以使用HTTP来上载数据；FTP是传统传输协议，主要用于上传和从Internet上下载文件，与HTTP相比，它的传输速度明显要快得多，同时它可以向未安装服务器扩展的服务器上发布站点。使用FTP作为传输协议时，可以使用专门的FTP软件（例如Cuteftp）来传输，也可以采用网站提供的程序方式或者类似Frontpage中的站点发布功能来发布站点（实际也是使用FTP协议）。2、方法和手段根据个人网站的规划与设计，在网站首页开发的基础上建立栏目链接，并完成整个网站的开发，在此过程中完整掌握Dreamweaver或Frontpage网页开
16、发工具；并要求通过CSS样式表控制网站的整体风格；要求适当采用客户端体系结构以及Javascript技术加强网站的动态效果，特别是后者需要重点加强运用。具体要求：1） 网站开发过程中要求注意紧扣主题、界面美观、内容丰富；2） 页面中的图片要使用合理，尽量不要使用太大的图片，也不要使用过多图片，图片显示要正确有效（建议使用相对地址）；3） 文件夹的组织要求清晰有条理；4） 各个页面之间的链接要合理有效；5） 必要时用手工优化代码，不要产生过多的垃圾代码。四、实验步骤1、根据个人网站的规划设计的内容，以实验二中个人网站首页开发为起点完成整个网站的开发，要求整体符合规划。1）设置首页的栏目链接；2）
17、设计整个网站的目录结构，建议设置Images文件夹放置图片文件，设置CSS以及JS文件夹放置CSS样式表文件以及Javascript脚本文件，文件夹组织要求层次不超过三层，逻辑清晰；3）收集、整理和编辑网站需要的图片素材以及内容资料，适当的时候对图片进行一定的处理；4）网站中的整体风格（BODY、TABLE等HTML标记的风格要求使用CSS样式表进行设置），此外可以使用CSS样式表实现其他相关样式以及动态效果；5）按照栏目顺序逐个进行网页编辑，要求风格统一、紧扣主题、特色鲜明，文件名尽量采用建议命名方式；6）针对网站的特点采用Javascript技术设置人性化的互动环节；例如显示问候、当前日期
18、显示等等；7）根据网站需要加入动态效果，建议采用客户端脚本Javascript实现，也可以采用客户端应用（JavaApplet、ActiveX）以及Flash等其他技术实现。2、申请网站空间并完成网站上传1） 申请免费网站空间； 2）将发布个人网站，通过FTP方式实现，可以采用空间提供的方式，也可以采用CuteFtp等工具实现上传，确保网站发布后图片以及链接访问正确。五、实验报告 见学生具体案例。六、实验思考题1、 CSS样式表与直接使用HTML标记设置属性区别在哪？ 答：CSS样式表可以只通过修改一个文件就改变页数不定的网页的外观和格式； 可以保证在所有浏览器和平台之间的兼容性； 而且使用样
19、式表可以用更少的编码实现目标效果，而甚至于某些效果在HTML标记中是无法实现的。2、 请说明自己的网站文件夹组织方式以及这样设置的原因。答：主目录存放主要的网页文件，首页文件名为index.htm，目录分为:images：存放图象文件；css：存放CSS样式表文件；js：存放Js文件Flash：存放Flash文件。3、请说明Javascript实现显示日期时间与服务端程序设置显示日期时间的异同？答：这个实际也是客户端动态与服务端动态的区别，Javascript实现显示日期是从客户端获取时间，需要使用客户端资源，而后者使用的是服务端资源；从服务端显示日期能保证所有客户端查看的日期是一致的（都是从
20、服务端中获取当前日期），而客户端js不是；并且客户端显示日期需要考虑客户端是否支持js，也就是说存在浏览器兼容问题，而服务端显示日期不存在浏览器兼容问题。 4、在网站开发过程中需要将超级链接的地址以及图片地址设置为相对地址，为什么？ 答：绝对地址需要写明目标图象或者超级链接的完整位置，而相对地址只是写名其相对于本页面的相对位置。我们需要写相对地址的原因在于不能保证网站拷贝或者上传后图象和超级链接还能够在原先的绝对位置，如果更换了位置，图象和超级链接就完全可能无法查看和链接，但是如果使用相对地址，只要文件相对于网页的位置不变更换地址或者位置都不会影响到图象浏览和超级链接。七、实验结果分析与建议实验报告格式说明1标题：二号宋体；2表中内容：1）标题：五号黑体；2）正文：五号宋体，单倍行距；3）图片：无缩进，居中显示；4）图片编号：项目号序号，即如果在实验步骤栏目中的图片，采用类似“2-1”的形式，格式为小五黑体，无缩进居中显示；3纸张：16开(18.4cm26cm)4版面格式：上下边距：2cm；左右边距：2.5/2cm5文档编号：JS-班级学号姓名报告序号
