网站策划与Web程序的设计实验指导书

1、 . . . 1 / 60策划与策划与WebWeb程序设计程序设计实验指导书实验指导书大学软件学院大学软件学院2010 年 3 月 30 日 . . . 2 / 60目录目录实验一 IIS Web 服务器的配置。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。1实验二 Visual Studio2005 开发环境与发布的方法7实验三 HTML 基础与层叠样式单 CSS。 。 。 。 。 。 。 。 。 。 。 。 。 。 。21实验四 JavaScript 语言上机练习。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。26实验五 HTML DOM 程

2、序设计与综合编程。 。 。 。 。34实验六 可扩展标记语言 XML。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。44实验七 .NET Web 开发技术。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。47 . . . 3 / 60实验一 IIS Web 服务器的配置实验容实验容: : 安装和启动 IIS （Internet Information System) ,并配置 IIS WEB 站点 实验目的：实验目的：学会 IIS Web 服务器的安装，主目录和虚拟目录的建立，Web 站点安全性设置，Web 服务器性能参数设置。实验步骤

3、：实验步骤：1 1配置配置 IISIIS 服务器服务器1.1 依次按照开始|程序|管理工具|Internet 信息服务的顺序启动 IIS,如果IIS 没有添加到“开始”菜单中，则可采用开始|设置|控制面板|管理工具|Internet 信息服务的顺序启动 IIS，弹出“Internet 信息服务”窗口，如 1-1 图所示。图 1-1 “IIS”启动界面如果找不到“Internet 服务管理器” ，说明你的操作系统还没有安装 IIS，你可以进入控制面板|添加/删除程序|添加/删除 Windows 组件后，勾选“Internet 信息服务（IIS） ”并进行安装定制后，Windows 将自动完成安装

4、过程。1.2 右键单击“默认”选项，在弹出的快捷菜单中选择“属性”项，弹出“默认 属性”对话框，如 1-2 图所示。 . . . 4 / 60图 1-2 “默认 属性”对话框1.3 选择如图 1-2 所示“”选项卡，在“IP 地址”下拉列表框中输入本服务器的真实 IP 地址。若对本 Web 服务器的配置是作为测试用的，通常情况下可使用默认的设置“全部未分配”或输入“” 。如果服务器拥有多个 Web 站点但只有一个 IP 地址，用户单击“IP 地址”栏右侧的“高级”按钮，弹出如图 1-3 所示的对话框。图 1-3 “多高级配置”对话框 图 1-4 “高级标识”对话框单击“添加(

5、A)”按钮，输入 IP 地址、TCP、端口号和主机头名。假设用户在多个中有一个的名称叫 CET, 已经注册的域名是“.CET.” ，则应在主机头名中输入 CET.，如图 1-4 所示。重复上述步骤，对每个指定主机头名，指定其 IP 地址一样，端口号都是 80，这台提供 Web 服务的计算机就称为“虚拟主机”了。2.2. 主目录和虚拟目录的建立主目录和虚拟目录的建立2.12.1 主目录的建立每个 Web 站点都必须有一个主目录。一个站点所包含的所有网页和相关文件都放在主目录下。在“默认 属性”对话框中选择“主目录”选项卡，如图 1-7 所示 . . . 5 / 60图 1-7 “主目录”选项卡系

6、统默认的位置为“此计算机上的目录” ，如图 1-7 所示。如果不是在系统默认的本地路径下，用户可以单击“浏览”按钮来更改主目录的路径。六个有关设置权限的勾选项，用户可以根据被管理的特点来选择配置，如图 1-7 所示。“应用程序配置”选项卡中一般均采用默认值。2.2 虚拟目录的建立建立虚拟目录的步骤如下：2.2.1 在“Internet 信息服务”窗口中右键单击“默认”选项，在弹出的快捷菜单中选择“新建| 虚拟目录” ，弹出“虚拟目录创建向导”对话框，如图 1-8 所示：图 1-8 “虚拟目录创建向导”对话框 图 1-9 “虚拟目录别名”对话框2.2.2 单击“下一步” ，弹出“虚拟目录别名”对

7、话框，在别名处输入相应的别名，如图 1-9 所示。别名不要随意取定，因为访问虚拟目录中的网页时要通过别名来访问。2.2.3 继续单击“下一步” ，弹出“容目录”对话框，输入容所在的目录路径，或单击“浏览”按钮来选择，如图 1-10 所示。 . . . 6 / 60图 1-10 “容目录”对话框 图 1-11 “访问权限”对话框(4)单击“下一步” ，弹出“访问权限”窗口，如图 1-11 所示。这里所设置的“访问权限”与建立主目录中所说的“权限”一样，读者可根据前面的介绍和将要管理的类型来选择设置“访问权限” ，以确保能够顺利、安全地运行。(5)“访问权限”设置完毕后，单击“下一步” ，弹出“完

8、成”窗口，如图 1-12 所示。图 1-12 “虚拟目录创建完成”对话框 图 1-13 创建虚拟目录选项卡单击“完成”按钮，则整个创建虚拟目录的过程全部完成。3 3WebWeb 站点安全性设置站点安全性设置在“默认 属性”对话框选择“目录安全性”选项卡，出现如图 1-14 所示界面。图 1-14 “目录安全性”选项卡 . . . 7 / 603.1 匿名访问和身份验证控制用户在该安全性设置下单击“编辑”按钮，在如图 1-15 中所示的“身份验证方法”对话框中将“匿名访问”选项框勾去即可。图 1-15 “身份验证方法”对话框 图 1-16 “IP 地址和域名限制”对话框3.2 IP 地址和域名限

9、制在图 1-14 中的“IP 地址和域名限制”选项组中单击“编辑”按钮，弹出如图 1-16 所示的对话框。在列表框中可以输入允许来访用户的 IP 地址或域名也可以输入被拒绝访问用户的 IP 地址或域名。4 4WebWeb 服务性能参数设置服务性能参数设置用户可在如图 1-17 所示的“性能”选项卡上进行相关的设置。图 1-17 “性能”选项卡另外一种提高 Web 服务性能的方法就是使用 压缩优化功能。在开启 IIS 管理器后，在服务器条目上右键单击并选择“属性” ，然后选择主属性为“WWW 服务” ，单击“编辑(E)”,切换到“服务”选项卡，如图 1-18 所示。 . . . 8 / 60图

10、1-18 压缩“服务”选项卡5.5. 实验作业实验作业安装配置 IIS Web 服务器。 . . . 9 / 60实验二实验二 VisualVisual Studio2005Studio2005 开发环境与发开发环境与发布的方法布的方法实验容：实验容：VS2005 操作界面，Visual SourceSafe 服务端与客户端的配置与 Web 应用系统的三种发布方式。实验目的：实验目的：熟悉 VS2005 开发环境，熟悉和掌握 Visual SourceSafe 的常用功能，掌握发布的三种主要方法。实验步骤：实验步骤：1.1. VSVS 20052005 开发环境主要操作界面开发环境主要操作界面

11、1.1 起始页：执行 VS 2005 时会显示起始页，如图 2-1 所示。此页左侧“最近的项目”显示了用户在最近时间利用 VS 2005 创建和修改的项目，单击则打开该项目。 “打开”有两个可选项，单击“打开”位置的“项目”可在出现的对话框中选择需要在 VS2005 中打开的项目文件。单击“打开”位置的“”可在图 2-2 所示的“打开”对话框中，选择相应栏目即可打开一个已经存在的。在图 2-2 所示对话框的左侧显示的是欲打开的位置。其中， “文件系统”表示该在用户电脑上存放的目录路径；“本地 IIS”表示该已经完成了 IIS 的相关配置，不需要具体知道在用户电脑的存放位置，只需单击在 IIS

12、中配置的即可打开该；“FTP 站点”则表示用户欲打开的是存放在某个 FTP 服务器上的；“远程站点”则表示用户欲打开的是已经发布在 Internet 上的。图 2-1 起始页界面 图 2-2 “打开”对话框1.21.2 创建一个新的开发环境创建一个新的开发环境。单击 “创建”位置的“” ，然后选择“ASP.NET” ，选择一种开发语言如 C#，输入存放的位置，即可的存放位置有三种选项，分别是“文件系统” 、 “”和“FTP” 。对于文件系统，新建的可以放在本地或共享文件夹下；对于“”选项，如图 2-3 所示，表示新建的将直接放在某个 Web 服务器上，此时需要你先在 Web 服务器上新建一个空

13、的（也即主目录下无任何文件） ，并配置服务器扩展，此时再在“位置”处输入“IP 地址” ，新建生成的文件就会 . . . 10 / 60直接放在服务器上。对于“FTP”选项，用户新建的可以通过 FTP 协议放到 FTP 服务器上。图 2-3 “新建”对话框1.31.3 菜单栏和工具条菜单栏和工具条(Menu(Menu BarBar andand ToolTool Strip)Strip)图 2-4 所示是 VS 2005 在新建一个后显示的主菜单和工具条。主菜单由“文件” 、 “编辑” 、 “视图”等子菜单组成。工具条是菜单项的图标显示，方便用户的使用。用户可根据需要来动态显示或隐藏工具条。在

14、右键单击主菜单出现的右键菜单中，里面包括了所有的工具条，可以选择其显示或隐藏。一般工具条会根据用户使用的场合动态显示或隐藏。如果用户不知道某个图标的具体含义，可将鼠标指针放在该图标上，以便动态显示图标的用途。主菜单里包含了用于管理 IDE（Integrated Development Environment，集成开发环境） 、编译和执行程序的所有命令，并随着项目的不同而有所区别。图 2-26 展示了 VS 2005 在新建一个后所显示的主菜单。图 2-4 主菜单和工具条1.41.4 解决方案资源管理器解决方案资源管理器(Solution(Solution ExplorerExplorer)解决

15、方案资源管理器窗口列出了解决方案中的所有项目与项目所包含的文件，如图 2-5 所示。图 2-5 “解决方案资源管理器” . . . 11 / 601.51.5 工具箱工具箱(Tool(Tool Box)Box)要想展开一个组的成员，只需单击组名即可，如图 2-6 所示。图 2-6 “工具箱”的组件构成1.61.6 属性窗口属性窗口(Properties(Properties Windows)Windows)每个控件都有自己的一套属性。在属性窗口底部包含了对所选属性的说明，如图 2-7所示。图 2-7 “属性”窗口2.2.源代码的版本控制源代码的版本控制 2.12.1 VSS 在服务端的安装和配

16、置.1 创建共享文件夹创建共享文件夹在服务端要先创建一个进行源代码管理的数据库，以便在服务器端存储开发团队中需要进行控制的源代码。创建共享网络文件夹的过程为：1. 在 VSS 服务器端，打开 Windows 资源管理器，在 D 盘新建一个名为 “MyCode”的文件夹；2. 右击“MyCode” ，然后单击“属性” ；3. 在“MyCode 属性”对话框中，单击“共享”选项卡，共享名为“MyCode”保持不变，然后单击“共享该文件夹” 。该共享的“D:MyCode”文件夹就将用来存放开发团队中需要进行控制的源代码了，也即源代码管理数据库了将放在此文件夹中。.2

17、创建源代码管理数据库创建源代码管理数据库1. 在服务器端，打开“开始”菜单，指向程序|Microsoft Visual SourceSafe|Visual SourceSafe 6.0 Admin，出现“Visual SourceSafe Login”对话框。如图 2-8所示。在安装 VSS 服务端后，VSS 自动建了 Admin 登录账号（无密码）和 Common 数据库。单击“OK”后，进入 VSS 数据库登录账号管理界面，如图 2-9 所示。 . . . 12 / 60图 2-8 VSS 登录对话框 图 2-9 VSS 数据库登录账号管理界面2. 在图 2-9 所示“Visual Sou

18、rceSafe Administrator”对话框的“Tools”菜单中，选择“Create Database” ；3. 在“Create new VSS Database in”框中，输入“WclNoteMyCode” ，其中“WclNote”为 VSS 服务器名称，也可通过浏览找到共享文件夹“MyCode” 。单击“OK”后将自动创建源代码管理数据库“MyCode” 。 4. 下面打开这个数据库，进行访问用户的账号设置。在图 2-9 中选择“User”菜单下的“Open SourceSafe Database”,出现“Open SourceSafe Database”对话框，单击“Brow

19、se”按钮，出现“Find Database”对话框，在文件名处直接输入“WclNoteMyCodesrcsafe.ini” ，单击“打开”后，新建数据库的名称和路径就出现在“Open SourceSafe Database”对话框的列表框中，双击之，在随后的对话框中单击“OK” ，然后出现一个提示信息框，意思是给 MyCode 数据库建了一个 Admin 管理账号，密码为空，出于安全考虑，应更改管理账号 Admin 的登录密码。单击“OK”后，将出现和图 2-9 相似的 MyCode 数据库登录账号管理界面。5根据开发团队中成员分工情况，为开发团队中的每个人员都分配一个 VSS 服务器的用户

20、账号，以后要打开 Mycode 这个数据库时需要进行身份认证。图 2-10 MyCode 数据库登录账号管理界面添加用户：选择图 2-10 中Users|Add User菜单，输入用户名和密码，建立“Wcl”用户，密码也为“wcl” 。建立的账号对源代码数据库只有两种操作权限，要么只读要么读写。设置“wcl”账号具有读写权限。为安全起见，需更改 Admin 的登录密码。先在列表框中选中 Admin 账号，选择Users|Change Password菜单后，可完成密码的修改操作。至此 VSS 服务器端的 Mycode 数据库已设置完毕。3.VSS3.VSS 在客户端的安装和配置在客户端的安装和

21、配置3.1 将源程序添加到 VSS 中进行代码管理1进入 VS 2005 并打开项目文件（源程序） ，选择“工具|选项”菜单后，出现如图 2-11 所示对话框。在“当前源代码管理插件”下拉列表框中选择源代码管理插件“Microsoft Visual SourceSafe”后，就可在图 2-12 中进行源代码管理环境设置了。 . . . 13 / 60图 2-11 “选项”属性对话框图 2-12 “工具配置”对话框签入与签出：将源代码放到 VSS 数据库中进行管理，我们称此过程为“签入” （Check-in） ；从 VSS 数据库中调出源代码进行修改，我们称此过程为“签出” （Check-out

22、） 。2当前述源代码管理插件 VSS 选定后，就会在 VS 2005 的“文件”菜单中出现“源代码管理”子菜单，如图 2-13 所示。单击选择“将解决方案添加到源代码管理” ，出现“Visual SourceSafe Login”登录窗口，输入前面建立的用户名“wcl”和密码“wcl” ，数据库输入或选择“wclnotemycode” ，单击“OK”后，出现图 2-14 所示的 “将 VS 2005 解决方案添加到 VSS 管理”对话框，单击“create”和“OK”后，则整个解决方案将由 VSS 管理。 . . . 14 / 60图 2-13 “源代码管理”子菜单图 2-14 将 VS 20

23、05 解决方案添加到 VSS 管理3编辑、比较、获取文件，查看文件历史记录：鼠标右键单击此文件，出现图 2-15所示编辑修改前后的右键菜单。 . . . 15 / 60图 2-15 “加锁”状态、文件编辑修改前右键菜单、文件编辑修改后右键菜单4撤消 VSS 管理：首先打开“文件”菜单下的“源代码管理”中的“更改源代码管理”子菜单，如图 2-16 所示。图 2-16 “更改源代码管理”菜单然后，在如图 2-17 对话框中单击“取消绑定”按钮即可。 . . . 16 / 60图 2-17 “取消绑定”对话框3.23.2 客户端获取服务器端的源代码客户端获取服务器端的源代码3.2.1 在客户端直接用

24、 VSS 6.0 获取服务器端的源代码1在开始菜单中选择程序(P)|Microsoft Visual SourceSafe| Microsoft Visual SourceSafe 6.0出现如图 2-18 的界面。2-18“VSS Login”对话框2在图 2-18 中的对话框中输入 VSS 管理账号 Admin 和密码，在“Database”处输入VSS 数据库名称“wclnotemycode”后，也可单击“Browse”按钮选择 VSS 数据库“MyCode” ，单击“OK”后进入如图 2-19 所示的界面。图 2-19 VSS Explorer3在图 2-19 中，用鼠标右击“$/”

25、，在出现的右键菜单中选择“Set Working Folder” ，即设置存放解决方案或项目源代码的本地工作文件夹。在出现的对话框中可直接输入本地工作目录名称，设定工作目录为“D:MyAppCode” ，单击“OK”退出工作目录设定对话框，然后再次用鼠标右击“$/” ，在出现的右键菜单中选择“Get The Latest Version” ，出现图 2-20 “Get Multiple”对话框，选择“Recursive” ，递归获取各文件夹中的文件，然后单击“OK” ，此时 VSS 服务端数据库中的所有源程序都放到文件夹“D:MyAppCode”中。4在 VS 2005 中打开项目对话框中，在

26、文件名处输入“D:MyAppCode” ，然后一直找到“Projects”子文件夹，再在其下面找到扩展名为“sln”的文件，打开它即完成了成员B 从 VSS 数据库获取源代码的过程。 . . . 17 / 60图 2-20 “Get Multiple”对话框3.2.2 直接在 VS 2005 中获取服务器端源代码在需要获取源代码的机器上启动 VS 2005，在“起始页”中选择打开“” ，在弹出的对话框中选择“源代码管理”后，出现如图 2-18 所示的“VSS Login”对话框，登录后出现如图 2-21 所示对话框，在“Create New Project in”输入“D:MyAppCode”

27、 ，作为存放源代码的目录，单击“OK” ，则源代码自动从 VSS 服务器存放到本地，并在 VS 2005 中打开了对应的“项目” 。图 2-21 获取源代码对话框3.Web3.Web 应用系统的发布应用系统的发布3.1 Web 应用系统的手工发布步骤如下：（1）在 VS 2005 中打开开发的 Web 项目；（2）单击“生成”菜单中的“发布”命令，弹出如图 2-22 所示的“发布”对话框。 . . . 18 / 60图 2-22“发布”对话框在“目标位置”处输入站点编译后的存放位置，设为“c:MyWebsite” ，选择“允许更新此预编译站点”选项，指定将所有程序代码编译为程序集，htm、as

28、px 等页面文件将按原样复制到目标文件夹。如果不选择此项则在发布的中，apsx 文件也将编译，将无法看到 aspx 源代码。单击“确定”按钮后，系统自动编译站点。（3）将“c:MyWebsite”中的容拷贝到 IIS 服务器中的某个目录下，假设为“D:工资管理系统” 。然后进入控制面板|管理工具，运行“Internet 信息服务” ，进入 IIS服务管理器。（4）在打开的 IIS 管理器中选择“新建”菜单，如图 2-23 所示。图 2-23“新建”单击“”后进入创建向导，单击“下一步”按钮，进入 “描述”窗口。描述实际上就是的名称，可以输入“工资管理系统” 。输入描述后，单击“下一步”按钮，进

29、入“IP 地址和端口设置”对话框。选择 IP 地址后，保持 TCP 端口不变，输入的主机头名即域名（如果没有，可以不输） ，完成后单击“下一步”按钮，进入“主目录”对话框进行主目录设置，输入“D:工资管理系统” 。设置完主目录后，单击“下一步”按钮，进入“访问权限”对话框。根据的性质设置的访问权限后，单击“下一步”按钮，进入“完成”窗口。整个创建的过程就结束了。创建后，用户就可以在浏览器 URL 地址栏输入“IP 地址”或域名就可访问了。另外也可将需手工发布的创建为虚拟目录来发布，具体过程参照教材本章第一节 . . . 19 / 60“主目录和虚拟目录的建立” 。3.2 Web 应用系统的联机

30、发布Web 应用系统的联机发布过程如下：（1）在图 2-22“发布”对话框中的“目标位置”输入项右侧单击小按钮，出现如图 2-24 所示对话框。 。（2） 在图 2-24 中，单击“FTP 站点”可以按照 FTP 方式进行站点发布；单击“选择站点”则按照 方式进行站点发布。 “本地 IIS”实际上也是按照 方式进行站点发布，只不过无需远程连接。 “文件系统”即是前面介绍的手工发布方式。（3）对于以“远程站点”方式发布的前提条件是在 IIS 服务器上安装 FrontPage 服务器扩展。单击“远程站点”后输入实际位置。对于“FTP 站点”发布方式，需要输入 FTP服务器的 IP 地址和存放路径。

31、（4）设置完成后，单击图 2-22 中 “确定”按钮后，系统自动编译站点，并且将发送到指定位置。图 2-24 “发布”对话框3.3 Web 应用系统的打包发布在 VS 2005 中制作 Web 应用系统安装程序的步骤描述如下： （1）首先在 VS 2005 中打开需要制作安装程序的、已经完成的 Web 项目； （2）在“文件”菜单上选择添加|新建项目菜单，如图 2-25 所示。 . . . 20 / 60图 2-25 “新建项目”（3）在如图 2-26 所示的“添加新项目”对话框中选择“其它项目类型”中的“安装和部署” ，在右边列表框中选择“Web 安装项目” ，输入安装项目名称和安装程序的存

32、放地址后单击“确定”按钮。不妨将项目名称输为“myWebSetup” 。图 2-26 “新建项目”对话框（4）在“解决方案资源管理器”中选择“myWebSetup”项目，单击打开属性窗口，输入“输出文件名” ，如图 2-27 所示。单击“系统必备”按钮可选择系统运行所必备的组件，包括 .net framework 2.0 等。 . . . 21 / 60图 2-27 “属性”窗口（5）在“解决方案资源管理器”中选择“myWebSetup”项目，单击右键，在弹出的快捷菜单中选择“添加” ，然后选择“项目输出” ，出现“添加项目输出组”对话框，如图 2-28 所示。选择需要生成安装程序的项目后，单

33、击“确定” 。 图 2-28 “项目输出”菜单和“添加项目输出组”对话框（6）在“解决方案资源管理器”中选择“myWebSetup”项目，单击右键，在弹出的快捷菜单中选择“视图” ，然后选择“用户界面”后，就会出现“用户界面”树形菜单，如图 2-29 所示。用鼠标单击树形菜单各项，进行属性设置（若没有出现属性窗口，则按下F4 功能键） 。例如“欢迎使用” 中可指定安装程序的背景图片、警告文本和欢迎文本。 . . . 22 / 60图 2-29 安装程序“用户界面” 设置（7）设置 Web 安装项目的虚拟目录等重要属性。ASP.NET 打包项目中可以设置虚拟目录、默认首页等属性，方法是选择图 2

34、-58 中的视图|文件系统菜单后，选择“Web 应用程序文件夹” ，然后按下 F4 功能键在属性窗口中，设定相应的 VirtualDirecoty 和DefaultDocument 属性。ASP.NET 安装项目还提供“注册表”等设置，可以在安装过程中自动添加注册表键名和键值，方法是选择图 2-58 中的视图|注册表菜单后，右键单击某个注册表分支后选择“新建键” ，然后在属性窗口输入相关键值等。（8）在“解决方案资源管理器”中选择“myWebSetup”项目，单击右键，在弹出的快捷菜单中选择“生成”或者“重新生成” ，生成安装文件。生成完成后，在第 4 步所指定的路径下，即可发现有一个 set

35、up.exe 和一个 myWebSetup.msi 文件。（9）将这两个安装文件拷贝至需要部署 Web 应用的服务器上，双击 setup.exe 文件，即进行自动安装和配置。安装程序会将 Web 应用系统默认放在“C:Inetpubwwwroot”文件夹下，也可放在你指定的其它地方，可在 IIS 中进一步对之进行配置。4 4 实验作业实验作业新建一个空，试着用三种方式发布。 . . . 23 / 60实验三实验三 HTMLHTML 基础与层叠样式单基础与层叠样式单 CSSCSS实验容实验容: : HTML 文档的基本结构。HTML 文档的各种常用标记。HTML 控件标记以与帧标记、浮动帧标记。

36、CSS 中各种选择符的定义与其使用方法、常用的属性例如字体属性、颜色和背景属性、文本属性、边框属性等。实验目的：实验目的：1、熟悉 HTML 文件的基本结构，掌握各种 HTML 常用标记的用法，熟练使用各种 HTML控件标记以与帧标记、浮动帧标记。2、理解叠层样式单 CSS 的基本原理，掌握 CSS 中各种选择符的定义与其使用方法。掌握层样式单 CSS 的基本用法实验步骤：实验步骤：1 1浏览器中显示下面的 HTML 文档。2、HTML 文档格式标记和 HTML 文档常用文本标记的应用，实现下面的例子，对照实现结果，体会 HTML 格式文档标记和文本标记的应用：（1）HTML 文档格式标记HT

37、ML文档格式标记的演示效果组成一个计算机系统的各种设备称为硬件。可将一台计算机划分为六个逻辑部件或部分。具体划分如下：输入部件。输出部件。存储器。算术逻辑部件(ALU)。 . . . 24 / 60辅助存储器。中央处理器(CPU)。辅助存储器。此处是文本块标记,该文本块起始和结束自动加了软回车功能，起始和结束都换行此处也是文本块标记，该文本块起始和结束不换行（2）HTML 文档常用文本标记。HTML文档格式标记的演示效果这是一本专业的Dreamweaver MX 2004的书籍What we are doing is just what you need. 3、利用表实现下面例子4、按照下面的

38、例子实现标记和帧标记的综合应用。主文件 framemain.html：HTML文档标记、帧标记的演示效果 Please use a Web browser such as IE3.0 orNetscape Navigator to view this page in frames! . . . 25 / 60文件 frame1.html:实例实例该 HTML 文档的显示效果如图所示。5、CSS 的一个应用实例，通过设计个人主页来体会 CSS 的用法。该主页使用表格作为主要结构，一个表的单元格中又嵌入另一个表，通过使用 CSS，在头部标记集中定义了页面的显示样式，又通过联样式定义了页面中按钮风格

39、的栏目“团结”、“进取”等单元格，使得页面显示风格灵活多样。注意块级元素 div 和 span 用于定义容块或区域，它们本身并不显示任何容，但通过给 div 定义样式，则可以将样式应用到所有包含在和之间的不同标记符上，而不需要为其中的每个元素指定样式规则。源代码如下：a:linkfont-size:9pt;text-decoration:nonea:visitedfont-size:9pt;text-decoration:nonea:activefont-size:9pt;text-decoration:nonea:hoverfont-size:9pt;text-decoration:none

40、bodyfont-size:9pt;line-height:13pttablefont-size:9pt;line-height:13pttrfont-size:9pt;tdfont-size:9pt; text-align:center;td.border border-right:1pxridge;border-top:1pxridge;border-left:1pxridge;borer-bottom:1pxridge;.efont-size:9pt;font-family:MS Sans Serif;text-decoration:nonediv.mycenter text-align

41、:centerbody scrollbar-face-color:#3165B5;scrollbar-highlight-color:#93bc9c;/*设置滚动条的外观*/scrollbar-3dlight-color:#8AB8DC;scrollbar-darkshadow-color:#C0C0C0;scrollbar-shadow-color:#FFFFFF;scrollbar-arrow-color:#FFFFFF;scrollbar-track-color:#E5EEF7;backgroud-image:url(desert.jpg);background-position:0%0

42、% . . . 26 / 60团结进取友谊开朗奋斗成功主页精彩人生学生时代多次被评为三好学生工作历程先进员工在浏览器中显示结果如图所示。在 VS2005 中，通过添加新项，选择样式表，生成一个空的样式表，在 CSS 大纲中，通过鼠标右键菜单中的“添加样式规则”选择施加样式的元素或者指定类名和元素 ID 后，新建的元素或者输入的类名和元素 ID 就会出现在 CSS 大纲中，然后鼠标右键单击新建的元素、类名或者元素 ID，单击“生成样式” ，就会出现如下图所示的样式生成器界面。通过样式生成器就可自动生成你需要的样式，而不需要你死记硬背样式名称。然后将生成的样式粘 . . . 27 / 60贴到上述

43、源代码中。VS2005 中的样式生成器可生成大部分样式，仍有部分样式需要参阅相关资料，手工处理，例如上例中的滚动条的样式设置。实验四实验四 JavaScriptJavaScript 语言上机练习语言上机练习实验容：实验容：JavaScript 语言的语法结构和流程控制，JavaScript 语言的事件和对象编程方法。实验目的：实验目的：练习并掌握 JavaScript 编程基础，对象编程技术。JavaScript ActiveX 编程技术。实验步骤：实验步骤：上机运行以下代码，查看并保存运行结果。1 1 .JavaScript.JavaScript 编程基础编程基础1.11.1 将将 Java

44、ScriptJavaScript 程序嵌入程序嵌入 HTMLHTML 文件的方法文件的方法HTML 文件中使用脚本语言示例 1。HTML中如何使用script语言-设置收藏夹实例收藏本站 . . . 28 / 60查看运行结果。查看运行结果。HTML 文件中使用脚本语言示例 2。HTML中如何使用script语言-设置主页实例设为主页sethomepage.js文件容：function Set_HomePage() myAlink.style.behavior=url(#default#homepage); myAlink.setHomePage( return false; 直接在 HTML

45、 标记添加脚本。将上例改成：HTML中如何使用script语言-设置主页实例设为主页查看运行结果。查看运行结果。1.21.2 函数函数一个使用部函数 eval()的示例。var iNumber=100;var anExpression = (16 * 9 % 7);var total = eval(anExpression + / + iNumber); /等同于求(16 * 9 % 7)/100的值alert(total);/ 将变量total 赋值为0.04。设计一个显示指定数的阶乘值的程序。函数示例function factor(num) var i,fact=1;for (i=1;in

46、um+1;i+) fact=i*fact; return fact; /调用factor函数 alert(5的阶乘=+ factor(5); /显示“的阶乘=120” . . . 29 / 60默认求 1+2+1000，否则按指定开始值、结束值求和。function sum(StartVal,EndVal)var ArgNum=sum.arguments.length;var i,s=0;if (ArgNum=0) StartVal=1;EndVal=1000;elseif (ArgNum=1) EndVal=1000;for (i=StartVal;i=EndVal;i+) s+=i;ret

47、urn s;/ document.write 表示在浏览器中输出文本document.write(不给出参数调用函数sum:,sum(),);document.write(给出一个参数调用函数sum:,sum(500),);document.write(给出两个参数调用函数sum:,sum(1,50),);在浏览器中应该显示结果如图 3-1 所示。图 3-1 创建 JavaScript 函数1.31.3 事件驱动与事件处理事件驱动与事件处理鼠标单击事件鼠标单击(函数名)。检查输入的字符串是否全由数字组成function checkNum(str) var TestResult = !/D/.t

48、est(str); /使用正则表达式测试字符串是否全由数字组成alert(TestResult); . . . 30 / 60鼠标单击(处理语句)。检查输入的字符串是否全由数字组成鼠标单击(函数)。检查输入的字符串是否全由数字组成mybut.onmousedown=function() /* mybut 为按钮的ID */var TestResult = !/D/.test(mytext.value); /*使用正则表达式测试字符串是否全是数字*/ alert(TestResult);Onchange、onselect、onfocus 事件例子。2 2JavaScriptJavaScript

49、对象编程技术对象编程技术2.1JavaScript2.1JavaScript 常用的置对象常用的置对象使用 JavaScript 建对象 Array 生成一个新的数组。var theMonths = new Array(6); /创建数组对象theMonths，具有6个数组元素theMonths0 = Jan;theMonths1 = Feb;theMonths2 = Mar;theMonths3 = Apr;theMonths4 = May;theMonths5 = Jun;下面的示例与上一个示例是等价的。var theMonths = new Array(Jan, Feb, Mar, Ap

50、r, May, Jun);使用自定义对象的方式创建数组对象。 . . . 31 / 60function arrayName(size)this.length=size;for(var i=0; i=size;i+) thisi=0;returnthis;var MyArray = new arrayName(10);MyArray0=1; MyArray1=2;MyArray2=3;MyArray3=4;MyArray4=5;MyArray5=6;MyArray6=7;MyArray7=8;MyArray8=9;MyArray9=10;alert(MyArray7); /输出8string

51、对象的建立和使用/ 设置变量howLong 为11。var howLong = Hello World.length; /锚点方法anchor()。使用anchor作用与Html中(A Name=)一样。/格式为：string.anchor(anchorName)。/创建一个名为start的锚点，该处显示文字开始。var astr=开始;var aname=astr.anchor(start);document.write(aname);/超方法link()。用于创建一个超, 与Html中(A href=)作用一样。/格式为:string.link(URL)。var hstr=大学;var h

52、name=hstr.link();document.write(hname);/ substring()方法: substring(start,end)。它返回字符串的一部分，该字符串包含从start 直到/end（不包含end）的子字符串。/substring 方法使用start 和end 两者中的较小值作为子字符串的起始点。例如，/strvar.substring(0, 3) 和strvar.substring(3, 0) 将返回一样的子字符串。/如果start 或end 为NaN 或负数，那么它将被替换为0。/子字符串的长度等于start 和end 之差的绝对值。例如，在strvar.s

53、ubstring(0, 3) 和/strvar.substring(3, 0) 中，返回的子字符串的长度为3。/字符搜索：indexOfstr,fromIndex。Str1=0123456789;/创建一个string 对象Str1Str2=2345;/创建一个string 对象Str2var aChunk = Str1.substring(4, 7); /将aChunk 设为456。document.write(aChunk=+aChunk);found= Str1.indexOf(Str2);/返回Str2在Str1中的起始位置，found值为。/创建字符串对象的另外一种方法是用newva

54、r mystr= new String(大学);document.write(mystr.link();Math 对象的使用var radius = 5;/ 声明一个半径变量并赋数值。var circleArea = Math.PI * radius * radius; / 注意Math和PI需大写。/ 本公式计算给定半径的球体的体积。volume = (4/3)*(Math.PI*Math.pow(radius,3);alert(volume); /输出.5987 . . . 32 / 60/也可用With保留字来简化程序的写法with (Math)var circleArea = PI *

55、 radius * radius; / 注意Math和PI需大写。/ 本公式计算给定半径的球体的体积。volume = (4/3)*(PI* pow(radius,3);alert(volume); /输出.5987Date 对象的使用/*本示例使用前面定义的月份名称数组。第一条语句以“Day Month Date 00:00:00 Year”格式对Today 变量赋值。 */var Today = new Date(); /获取今天的日期。/ 提取年，月，日。thisYear = Today.getFullYear(); thisMonth = Today.getMonth(); thisD

56、ay = Today.getDate();/ 提取时，分，秒。thisHour=Today.getHours(); thisMinutes=Today.getMinutes();thisSeconds=Today.getSeconds(); /提取星期几thisWeek=Today.getDay();var x = new Array(日, 一, 二); x = x.concat(三,四, 五, 六);thisWeek=xthisWeek;nowDateTime=现在是+thisYear+年+thisMonth +月+thisDay+日;nowDateTime+=thisHour+时+this

57、Minutes+分+thisSeconds+秒;nowDateTime+=星期+thisWeek;document.write(nowDateTime+); /输出：现在是年月日时分秒/计算两个日期相差的天数var datestring1 = November 1, 1997 10:15 AM;var datestring2 = December 1, 2007 10:15 AM;var DayMilliseconds= 24*60*60*1000; /1天的毫秒数var t1 = Date.parse(datestring1) ; /换算成自年月日到年月日的毫秒数var t2 = Date.

58、parse(datestring2) ; /换算成自年月日到年月日的毫秒数 s = There are s += Math.round(Math.abs(t2-t1)/DayMilliseconds) + days s += between + datestring1 + and + datestring2 ;document.write(s); /输出：There are 3682 days between November 1, 1997 10:15 AM and December 1, 2007 10:15 AM2.22.2 用户自定义对象用户自定义对象创建对象 pasta/定义past

59、a对象function pasta(grain, width, shape, hasEgg) this.grain = grain; this.width = width; this.shape = shape; this.hasEgg = hasEgg; . . . 33 / 60/使用对象的时候，用new进行实例化，下面建立了两个对象实例。var spaghetti = new pasta(wheat, 0.2, circle, true);var linguine = new pasta(wheat, 0.3, oval, true);document.write(spaghetti.s

60、hape) /输出circledocument.write(linguine.shape) /输出oval扩充上例中定义的 pasta 构造函数以包含 toString 方法/定义pasta对象function pasta(grain, width, shape, hasEgg) this.grain = grain; this.width = width; this.shape = shape; this.hasEgg = hasEgg; this.toString = pastaToString;function pastaToString() returnGrain: + this.gr