1、5.1 引言 5.2 编辑器MSE操作 5.3 加入控制标记,第5章 脚本编辑器MSE的使用,返回主目录,第5章 编辑器MSE的使用,5.1 引言在第3章和第4章中，我们介绍了HTML与VBScript基础，它们都是用编辑软件（如Word、写字板、WPS等）一句一句编写的，用编辑软件编写HTML与VB Script代码时，需要记忆大量的HTML与VBScript命令以及其语法。如果用FrontPage2000自动生成HTML与VBScript代码，则可省去记忆大量的命令和语法，但耗费的内存太大，而MSE则既可以自动生成很多HTML与VBScript代码，且所耗费的内存却比FrontPage20
2、00小得多。因此，本章我们将介绍编辑器MSE的使用。,编辑器MSE存放在Office 2000办公软件中，当我们安装完编辑器MSE之后，将出现在如图5-1所示的界面。,图5-1 安装后的编辑器MSE,5.2 编辑器MSE操作,MSE的操作步骤如下：（1）在图5-1中选择MSE图标,双击该图标，出现如图5-2所示的界面。（2）选取菜单中的“文件”“新建文件”，如图5-3所示。（3）当按下“新建文件”的菜单后，系统将出现一个如图5-4所示的对话框。（4）选取“HTML 页”图标，按下“打开（O）”的按钮之后，接着出现如图5-5所示的画面。,图5-2 第一次打开MSE的界面,图5-3 选择新建文件,
3、图5-4 选取“新HTML”页面的图标,图5-5 打开HTML后的新画面,从图5-5中可见，新HTML页面中有“设计”、“源代码”、“快速视图”三个窗口，其中“设计”表示可以用鼠标的拖曳功能在工作窗口中自行加上各种HTML的标记；“源代码”表示读者可以在此自行加入相关的控制标记或者脚本语言（VB Script）；“快速视图” 表示可以在工作窗口直接看到相关的设计结果。,5.3 加入控制标记,5.3.1加入文字打开一个“新的HTML页面”之后，在“设计”的工作窗口中加入一段“电子商务系统”文字，并可对该段文字的字号、字体及对齐方式作适当修改，这时便可在“设计”工作窗口看到变更后的结果，如图5-6
4、所示。注意，当“设计”工作窗口中相关对象的属性改变之后，图5-6中“属性”窗口的相关信息也会相应地变更。,图5-6 加入一段文字并且变更相关的属性,5.3.2加入窗体控制标记下面的这几项操作必须使用鼠标的拖曳功能才能完成。1.加入文本框用户可加入一个文本框，并在其中输入一个文字段（例如输入姓名）。其步骤如下：（1）用鼠标选取“工具栏”中的“Textbox”，如图5-7所示。（2）使用鼠标的拖曳功能，按下鼠标的左键不放，并将鼠标移动到设计的工作窗口，然后放开鼠标的左键，即可见到如图5-8所示的画面。,图5-7 选取“文本框（Textbox）”,图5-8选取后的Textbox,(3)接着，在Tex
5、tbox前加入“请输入姓名：”，并且变更Textbox的字段名称为“UserName”，结果如图5-9所示。2.加入一个“确定”按钮设计“确定”按钮（即“送出数据按钮”）的方式与增加文本框的方式相同，即：首先，将鼠标移到窗口左方的“工具栏”中选取“Submit Button”，接着按下鼠标左键不放，将鼠标移到“设计”工作窗口，然后放开鼠标左键，即可在工作窗口中看到如图5-10所示的结果。如果需要修改文字，有以下两种方式可选用： 用鼠标点取该按钮即可输入文字。 直接修改属性窗口中的Value。,图5-9 加入文字以及变更字段名称的结果,图5-10 加入“Submit Button”的结果,3.加
6、入“Reset Button”按钮加入“Reset Button”按钮的方式与加入加入“确定”按钮的方式相同。将“Reset Button”按钮的值（value）变更为“取消”后如图5-11所示。“Reset Button”按钮可将所有字段的内容恢复到内定值。如果字段的值（Value）未经设置，其默认值为“空白”。因此，在按下“Reset Button”时，不论使用者输入任何文字，其结果一律变成默认值（即空白）。此时，如果按下“快速视图”，将会看到真实执行时的仿真画面。并且，这时的工具栏内所有的控制标记全部取消作用，如图5-12所示。,图5-11 修改完成的结果,图5-12 快速查看的结果,5
7、.3.3加入VB Script脚本语言与ASP控制命令若要加入VB Script脚本语言与ASP控制命令，只要按下“源代码”即可看到图5-13所示的画面，此时便可输入任何VB Script脚本语言与ASP控制命令（由HTML标记语言和VB Script脚本组成）。,图5-13 “源代码”的内容,5.3.4存储设计成果“存储文件”的步骤如下：（1）选取“文件”，并且选取下拉式菜单中的“另存New HTML Page1”功能，如图5-14所示。（2）如果网页中含有ASP的控制命令，则要将另存新文件的对话框中的“保存类型”变更为“ASP文件”，如图5-15所示。（3）将文件名变更为“5-1.asp”，并且按下右方的“保存（S）”按钮，即可将设计成果存储起来。,图5-14 另存文件,图5-15 变更存盘文件类型,5.3.5加入Form标记，并指定数据的传送方式为Post加入Form标记前的代码如图5-16所示。在图5-16中加入和后，如图5-17所示。 以快速视图的方式由“源文件”切换到“设计”时，就自动加入Form的标记了，结果如图5-18所示。到这里为止，我们依照上述步骤完成了5-1.asp的设计，虽然在完成的过程中有许多步骤。笔者的目的是刻意将所有步骤全部分解，以求读者可以清楚的了解一个新网页的建立过程以及结果。,图5-17加入Form标记后代码,图5-18 自动加入Form标记,
