在这个部分,读者可以由图2-17中清楚看到相关内容。因此,如果使用这个功能时,它就如同“文件”菜单中的“打开”命令,与之具有相同的功能以及效果。
· “最近”
至于“最近”部分,由于MSE会协助我们记录文件曾经被打开过的相关信息,并且这些信息将会显示在“工程资源管理器”的窗口中,以便设计人员可以快速地打开这些程序或是文件等。下图是打开的文件并且显示在“工程资源管理器”中的结果。
而这些保存在“工程资源管理器”中的记录信息将会一直保留着。如果读者将整个MSE关闭再重新打开之后,将会发现MSE会自动将这些文件一并打开。
在编辑及预览窗口中的“设计”、“源代码”以及“快速视图”三项功能分别代表着:
· 设计:表示读者可以在工作窗口中用鼠标的拖动功能自行加上各种HTML的标记。
· 源代码:表示读者可以在此自行加入相关的控制标记或是ASP的控制命令、手稿语言等。
· 快速视图:代表可以直接在工作窗口中看到相关的设计结果。
在经过简单的介绍之后,接下来笔者将实际地建立一个基本的HTML文件,以及示范如何加入相关的HTML标记以及ASP程序代码。
2-3 加入控制标记
在上一节中,介绍了如何使用MSE建立基本的HTML文件以及各项的功能,在本节中将示范如何加入HTML控制标记以及ASP程序代码。
2-3-1 加入文字
首先请读者打开一个“HTML页”,并且在打开之后在“设计”的工作窗口中加入一段“新的HTML文件”文字,接着再修改该段文字的字号、字体以及对齐的方式。
接下来读者可以立即在“设计”的工作窗口中看到改变后的结果,如图2-20所示。
图2-20 加入一段文字并且改变其相关属性
在这里有一点需要注意的是,当“设计”工作窗口中相关对象的属性被改变以后,画面右下方“属性”窗口中的相关信息也会作相应改变.
2-3-2 加入窗体控制标记
接着的这几项操作必须使用鼠标的拖动功能才能够完成。
1. 增加输入的字段
首先,笔者希望用户可以在一个地方输入自己的姓名,这时,就必须要加入一个“文本框(Textbox)”。在加入了这个文本框后,即可让用户在这个文本框中填入自己的姓名了。
(1)用鼠标选取工具箱中的“Textbox”,如图2-22所示。
(2)使用鼠标的拖动功能,按下鼠标的左键不放,再将光标移动到设计工作窗口中。
(3)放开鼠标。
接着在文本框前加入“请输入姓名:”,并且改变Textbox 的字段名称为“UserName”。
在万事俱备之后,接下来当然是必须设计一个可以让用户送出自己姓名的按钮,以及输入错误时,可以重新输入的按钮。
2. 增加确认按钮
例如,希望在网页中加入一个可以让用户选择的“确定”按钮。首先,必须在窗口的左方工具箱中单击
因此,在放开鼠标之后。
然而,这个是什么呢?事实上它就是在许多问卷调查的网页中出现的“确认”或是“送出数据”按钮,只不过在此显示的是英文的“Submit”而已。
如果希望修改文字,有以下两种方法:
· 用鼠标在该按钮上方单击,即可输入文字。
· 直接修改属性窗口中的值(Value)。
接着再按照同样的方式加入
图2-28 修改完成的结果
此时,如果读者按下“快速视图”时,将会见到仿真执行时的画面。并且,这时的工具箱内所有的控制标记会全部被取消作用。
2-3-3 加入ASP控制命令
接下来,笔者将结合“Sample02-1.asp”的Requst对象范例直接将用户输入的姓名显示出来。那么现在就产生了一个问题,“如何输入ASP控制命令”呢?别急,只要按下中间的“源代码”即可看到下面的画面,并且可以在这里输入任何的ASP控制命令、VBScript/javascript语言以及CSS(Cascading Style Sheets 简称为CSS)控制命令等各种命令。
接下来笔者将要把上述代码存储到“/pws”的虚拟目录中,并且将它命名为“Sample02-1.asp”。
2-3-4 存储设计的成果
接下来将要进行的最重要的工作是“存储文件”。以下是存储HTML页的步骤。
(1)请读者选择“文件”菜单中的“另存New HTML Page1”命令。
由于网页中含有ASP的控制命令,因此,必须在“另存文件为”对话框中的“保存类型”下拉列表中选择“ASP文件(*.asp。
(2)接着,再将文件名改为“Sample02-1.asp”,并且单击右方的“保存(S)”按钮,即可将刚才设计的成果保存起来。
(3)当读者执行Sample02-1.asp时,将会发现按下“确定”以及“清除”按钮完全没有任何反应。
难道是程序设计错误吗?事实上它是完全正确的。那这又是什么问题呢?其实这是非常简单并且显而易见的错误,那就是缺少名为Form的HTML标记,并且未指定Form的数据传输方式为“post”。这可以由“Sample02-1.asp”与“Sample02-1.asp”的源代码中比较得知。
文件名称:”Sample02-1.asp”
<html>
<body>
<form method=post>
请输入姓名:<input type=text name="username" value="">
<input type=submit value="开始测试">
<