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

网站策划与网站策划与WebWeb程序设计程序设计 实验指导书实验指导书 重庆大学软件学院重庆大学软件学院 2010 年 3 月 30 日 目录目录 实验一 IIS Web 服务器的配置 1 实验二 Visual Studio2005 开发环境及发布网站的方法7 实验三 HTML 基础与层叠样式单 CSS 21 实验四 JavaScript 语言上机练习 26 实验五 HTML DOM 程序设计及 综合编程 34 实验六 可扩展标记语言 XML 44 实验七 NET Web 开发技术 47 实验一 IIS Web 服务器的配置 实验内容实验内容 安装和启动 IIS Internet Information System 并配置 IIS WEB 站点 实验目的 实验目的 学会 IIS Web 服务器的安装 主目录和虚拟目录的建立 Web 站点安全性设置 Web 服 务器性能参数设置 实验步骤 实验步骤 1 1 配置 配置 IISIIS 服务器服务器 1 1 依次按照 开始 程序 管理工具 Internet 信息服务 的顺序启动 IIS 如果 IIS 没有添加到 开始 菜单中 则可采用 开始 设置 控制面板 管理工具 Internet 信息服务 的顺序启动 IIS 弹出 Internet 信息服务 窗口 如 1 1 图所示 图 1 1 IIS 启动界面 如果找不到 Internet 服务管理器 说明你的操作系统还没有安装 IIS 你可以进 入 控制面板 添加 删除程序 添加 删除 Windows 组件 后 勾选 Internet 信息服务 IIS 并进行安装定制后 Windows 将自动完成安装过程 1 2 右键单击 默认网站 选项 在弹出的快捷菜单中选择 属性 项 弹出 默认 网站 属性 对话框 如 1 2 图所示 图 1 2 默认网站 属性 对话框 1 3 选择如图 1 2 所示 网站 选项卡 在 IP 地址 下拉列表框中输入本服务器的 真实 IP 地址 若对本 Web 服务器的配置是作为测试用的 通常情况下可使用默认的设置 全部未 分配 或输入 127 0 0 1 如果服务器拥有多个 Web 站点但只有一个 IP 地址 用户单击 IP 地址 栏右侧的 高级 按钮 弹出如图 1 3 所示的对话框 图 1 3 多网站高级配置 对话框 图 1 4 高级网站标识 对话框 单击 添加 A 按钮 输入 IP 地址 TCP 端口号和主机头名 假设用户在多个网站中有一个网站的名称叫 CET 已经注册的域名是 www CET com 则应在主机头名中输入 www CET com 如图 1 4 所示 重复上述步骤 对每个网站指定主机头名 指定其 IP 地址相同 端口号都是 80 这台提供 Web 服务的计 算机就称为 虚拟主机 了 2 2 主目录和虚拟目录的建立主目录和虚拟目录的建立 2 12 1 主目录的建立 每个 Web 站点都必须有一个主目录 一个站点所包含的所有网页和相关文件都放在 主目录下 在 默认网站 属性 对话框中选择 主目录 选项卡 如图 1 7 所示 图 1 7 主目录 选项卡 系统默认网站的位置为 此计算机上的目录 如图 1 7 所示 如果网站不是在系统默 认的本地路径下 用户可以单击 浏览 按钮来更改主目录的路径 六个有关网站设置权限的勾选项 用户可以根据被管理网站的特点来选择配置 如图 1 7 所示 应用程序配置 选项卡中一般均采用默认值 2 2 虚拟目录的建立 建立虚拟目录的步骤如下 2 2 1 在 Internet 信息服务 窗口中右键单击 默认网站 选项 在弹出的快捷菜 单中选择 新建 虚拟目录 弹出 虚拟目录创建向导 对话框 如图 1 8 所示 图 1 8 虚拟目录创建向导 对话框 图 1 9 虚拟目录别名 对话框 2 2 2 单击 下一步 弹出 虚拟目录别名 对话框 在别名处输入相应的别名 如 图 1 9 所示 别名不要随意取定 因为访问虚拟目录中的网页时要通过别名来访问 2 2 3 继续单击 下一步 弹出 网站内容目录 对话框 输入网站内容所在的目录 路径 或单击 浏览 按钮来选择 如图 1 10 所示 图 1 10 网站内容目录 对话框 图 1 11 访问权限 对话框 4 单击 下一步 弹出 访问权限 窗口 如图 1 11 所示 这里所设置的 访问权限 与建立主目录中所说的 权限 相同 读者可根据前面的 介绍和将要管理的网站类型来选择设置 访问权限 以确保网站能够顺利 安全地运行 5 访问权限 设置完毕后 单击 下一步 弹出 完成 窗口 如图 1 12 所示 图 1 12 虚拟目录创建完成 对话框 图 1 13 创建虚拟目录选项卡 单击 完成 按钮 则整个创建虚拟目录的过程全部完成 3 Web 站点安全性设置站点安全性设置 在 默认网站 属性 对话框内选择 目录安全性 选项卡 出现如图 1 14 所示界面 图 1 14 目录安全性 选项卡 3 1 匿名访问和身份验证控制 用户在该安全性设置下单击 编辑 按钮 在如图 1 15 中所示的 身份验证方法 对 话框中将 匿名访问 选项框勾去即可 图 1 15 身份验证方法 对话框 图 1 16 IP 地址和域名限制 对话框 3 2 IP 地址和域名限制 在图 1 14 中的 IP 地址和域名限制 选项组中单击 编辑 按钮 弹出如图 1 16 所 示的对话框 在列表框中可以输入允许来访用户的 IP 地址或域名也可以输入被拒绝访问用 户的 IP 地址或域名 4Web 服务性能参数设置服务性能参数设置 用户可在如图 1 17 所示的 性能 选项卡上进行相关的设置 图 1 17 性能 选项卡 另外一种提高 Web 服务性能的方法就是使用 HTTP 压缩优化功能 在开启 IIS 管理器后 在服务器条目上右键单击并选择 属性 然后选择主属性为 WWW 服务 单击 编辑 E 切换到 服务 选项卡 如图 1 18 所示 图 1 18 HTTP 压缩 服务 选项卡 5 实验作业实验作业 安装配置 IIS Web 服务器 实验二实验二 Visual Studio2005 开发环境及发布开发环境及发布 网站的方法网站的方法 实验内容 实验内容 VS2005 操作界面 Visual SourceSafe 服务端及客户端的配置及 Web 应用系统 的三种发布方式 实验目的 实验目的 熟悉 VS2005 开发环境 熟悉和掌握 Visual SourceSafe 的常用功能 掌握发布 网站的三种主要方法 实验步骤 实验步骤 1 1 VSVS 20052005 开发环境主要操作界面开发环境主要操作界面 1 1 起始页 执行 VS 2005 时会显示起始页 如图 2 1 所示 此页左侧 最近的项目 显示了用户在最近时间内利用 VS 2005 创建和修改的项目 单击则打开该项目 打开 有 两个可选项 单击 打开 位置的 项目 可在出现的对话框中选择需要在 VS2005 中打 开的项目文件 单击 打开 位置的 网站 可在图 2 2 所示的 打开网站 对话框中 选择相应栏目即可打开一个已经存在的网站 在图 2 2 所示对话框的左侧显示的是欲打开网站的位置 其中 文件系统 表示该网 站在用户电脑上存放的目录路径 本地 IIS 表示该网站已经完成了 IIS 的相关配置 不 需要具体知道网站在用户电脑的存放位置 只需单击在 IIS 中配置的网站即可打开该网站 FTP 站点 则表示用户欲打开的网站是存放在某个 FTP 服务器上的 远程站点 则表 示用户欲打开的网站是已经发布在 Internet 上的网站 图 2 1 起始页界面 图 2 2 打开网站 对话框 1 2 创建一个新的网站开发环境创建一个新的网站开发环境 单击 创建 位置的 网站 然后选择 ASP NET 网站 选择一种开发语言如 C 输入网站存放的位置 即可网站的存放位置有三种选项 分别是 文件系统 HTTP 和 FTP 对于文件系统 新建的网站可以放在本地或共享文件夹下 对于 HTTP 选项 如图 2 3 所示 表示新建的网站将直接放在某个 Web 服务器上 此时需 要你先在 Web 服务器上新建一个空的网站 也即主目录下无任何文件 并配置服务器扩 展 此时再在 位置 处输入 http 网站 IP 地址 新建网站生成的文件就会直接放在服 务器上 对于 FTP 选项 用户新建的网站可以通过 FTP 协议放到 FTP 服务器上 图 2 3 新建网站 对话框 1 31 3 菜单栏和工具条菜单栏和工具条 Menu Menu BarBar andand ToolTool Strip Strip 图 2 4 所示是 VS 2005 在新建一个网站后显示的主菜单和工具条 主菜单由 文件 编辑 视图 等子菜单组成 工具条是菜单项的图标显示 方便用户的使用 用户可 根据需要来动态显示或隐藏工具条 在右键单击主菜单出现的右键菜单中 里面包括了所 有的工具条 可以选择其显示或隐藏 一般工具条会根据用户使用的场合动态显示或隐藏 如果用户不知道某个图标的具体含义 可将鼠标指针放在该图标上 以便动态显示图标的 用途 主菜单里包含了用于管理 IDE Integrated Development Environment 集成开发环境 编译和执行程序的所有命令 并随着项目的不同而有所区别 图 2 26 展示了 VS 2005 在新 建一个网站后所显示的主菜单 图 2 4 主菜单和工具条 1 41 4 解决方案资源管理器解决方案资源管理器 Solution Solution ExplorerExplorer 解决方案资源管理器窗口列出了解决方案中的所有项目及项目所包含的文件 如图 2 5 所示 图 2 5 解决方案资源管理器 1 51 5 工具箱工具箱 Tool Tool Box Box 要想展开一个组的成员 只需单击组名即可 如图 2 6 所示 图 2 6 工具箱 的组件构成 1 6 属性窗口属性窗口 Properties Windows 每个控件都有自己的一套属性 在属性窗口底部包含了对所选属性的说明 如图 2 7 所示 图 2 7 属性 窗口 2 2 源代码的版本控制源代码的版本控制 2 12 1 VSS 在服务端的安装和配置 2 1 12 1 1 创建共享文件夹创建共享文件夹 在服务端要先创建一个进行源代码管理的数据库 以便在服务器端存储开发团队中需 要进行控制的源代码 创建共享网络文件夹的过程为 1 在 VSS 服务器端 打开 Windows 资源管理器 在 D 盘新建一个名为 MyCode 的文件夹 2 右击 MyCode 然后单击 属性 3 在 MyCode 属性 对话框中 单击 共享 选项卡 共享名为 MyCode 保持不 变 然后单击 共享该文件夹 该共享的 D MyCode 文件夹就将用来存放开发团队中 需要进行控制的源代码了 也即源代码管理数据库了将放在此文件夹中 2 1 22 1 2 创建源代码管理数据库创建源代码管理数据库 1 在服务器端 打开 开始 菜单 指向 程序 Microsoft Visual SourceSafe Visual SourceSafe 6 0 Admin 出现 Visual SourceSafe Login 对话框 如图 2 8 所示 在安装 VSS 服务端后 VSS 自动建了 Admin 登录账号 无密码 和 Common 数据库 单击 OK 后 进入 VSS 数据库登录账号管理界面 如图 2 9 所示 图 2 8 VSS 登录对话框 图 2 9 VSS 数据库登录账号管理界面 2 在图 2 9 所示 Visual SourceSafe Administrator 对话框的 Tools 菜单中 选择 Create Database 3 在 Create new VSS Database in 框中 输入 WclNote MyCode 其中 WclNote 为 VSS 服务器名称 也可通过浏览找到共享文件夹 MyCode 单击 OK 后 将自动创建源代码管理数据库 MyCode 4 下面打开这个数据库 进行访问用户的账号设置 在图 2 9 中选择 User 菜单下 的 Open SourceSafe Database 出现 Open SourceSafe Database 对话框 单击 Browse 按钮 出现 Find Database 对话框 在文件名处直接输入 WclNote MyCode srcsafe ini 单击 打开 后 新建数据库的名称和路径就出现在 Open SourceSafe Database 对话框的列表框中 双击之 在随后的对话框中单击 OK 然后出现一个提示信息框 意思是给 MyCode 数据库建了一个 Admin 管理账号 密码为空 出于安全考虑 应更改管理账号 Admin 的登录密码 单击 OK 后 将出现和图 2 9 相似 的 MyCode 数据库登录账号管理界面 5 根据开发团队中成员分工情况 为开发团队中的每个人员都分配一个 VSS 服务器的 用户账号 以后要打开 Mycode 这个数据库时需要进行身份认证 图 2 10 MyCode 数据库登录账号管理界面 添加用户 选择图 2 10 中 Users Add User 菜单 输入用户名和密码 建立 Wcl 用户 密码也为 wcl 建立的账号对源代码数据库只有两种操作权限 要么只读 要么读写 设置 wcl 账号具有读写权限 为安全起见 需更改 Admin 的登录密码 先在 列表框中选中 Admin 账号 选择 Users Change Password 菜单后 可完成密码的修改操 作 至此 VSS 服务器端的 Mycode 数据库已设置完毕 3 VSS3 VSS 在客户端的安装和配置在客户端的安装和配置 3 1 将源程序添加到 VSS 中进行代码管理 1 进入 VS 2005 并打开项目文件 源程序 选择 工具 选项 菜单后 出现如 图 2 11 所示对话框 在 当前源代码管理插件 下拉列表框中选择源代码管理插件 Microsoft Visual SourceSafe 后 就可在图 2 12 中进行源代码管理环境设置了 图 2 11 选项 属性对话框 图 2 12 工具配置 对话框 签入及签出 将源代码放到 VSS 数据库中进行管理 我们称此过程为 签入 Check in 从 VSS 数据库中调出源代码进行修改 我们称此过程为 签出 Check out 2 当前述源代码管理插件 VSS 选定后 就会在 VS 2005 的 文件 菜单中出现 源代 码管理 子菜单 如图 2 13 所示 单击选择 将解决方案添加到源代码管理 出现 Visual SourceSafe Login 登录窗口 输入前面建立的用户名 wcl 和密码 wcl 数据 库输入或选择 wclnote mycode 单击 OK 后 出现图 2 14 所示的 将 VS 2005 解 决方案添加到 VSS 管理 对话框 单击 create 和 OK 后 则整个解决方案将由 VSS 管理 图 2 13 源代码管理 子菜单 图 2 14 将 VS 2005 解决方案添加到 VSS 管理 3 编辑 比较 获取文件 查看文件历史记录 鼠标右键单击此文件 出现图 2 15 所示编辑修改前后的右键菜单 图 2 15 加锁 状态 文件编辑修改前右键菜单 文件编辑修改后右键菜单 4 撤消 VSS 管理 首先打开 文件 菜单下的 源代码管理 中的 更改源代码管 理 子菜单 如图 2 16 所示 图 2 16 更改源代码管理 菜单 然后 在如图 2 17 对话框中单击 取消绑定 按钮即可 图 2 17 取消绑定 对话框 3 2 客户端获取服务器端的源代码客户端获取服务器端的源代码 3 2 1 在客户端直接用 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 数据库名称 wclnote mycode 后 也可单击 Browse 按钮选择 VSS 数据库 MyCode 单击 OK 后进入如图 2 19 所示的界面 图 2 19 VSS Explorer 3 在图 2 19 中 用鼠标右击 在出现的右键菜单中选择 Set Working Folder 即设置存放解决方案或项目源代码的本地工作文件夹 在出现的对话框中可直接输入本地 工作目录名称 设定工作目录为 D MyAppCode 单击 OK 退出工作目录设定对话框 然后再次用鼠标右击 在出现的右键菜单中选择 Get The Latest Version 出现图 2 20 Get Multiple 对话框 选择 Recursive 递归获取各文件夹中的文件 然后单击 OK 此时 VSS 服务端数据库中的所有源程序都放到文件夹 D MyAppCode 中 4 在 VS 2005 中打开项目对话框中 在文件名处输入 D MyAppCode 然后一直找 到 Projects 子文件夹 再在其下面找到扩展名为 sln 的文件 打开它即完成了成员 B 从 VSS 数据库获取源代码的过程 图 2 20 Get Multiple 对话框 3 2 2 直接在 VS 2005 中获取服务器端源代码 在需要获取源代码的机器上启动 VS 2005 在 起始页 中选择打开 网站 在弹出 的对话框中选择 源代码管理 后 出现如图 2 18 所示的 VSS Login 对话框 登录后 出现如图 2 21 所示对话框 在 Create New Project in 输入 D MyAppCode 作为存放 源代码的目录 单击 OK 则源代码自动从 VSS 服务器存放到本地 并在 VS 2005 中打 开了对应的 项目 图 2 21 获取源代码对话框 3 Web3 Web 应用系统的发布应用系统的发布 3 1 Web 应用系统的手工发布步骤如下 1 在 VS 2005 中打开开发的 Web 项目 2 单击 生成 菜单中的 发布网站 命令 弹出如图 2 22 所示的 发布网站 对话框 图 2 22 发布网站 对话框 在 目标位置 处输入站点编译后的存放位置 设为 c MyWebsite 选择 允许更 新此预编译站点 选项 指定将所有程序代码编译为程序集 htm aspx 等页面文件将按 原样复制到目标文件夹 如果不选择此项则在发布的网站中 apsx 文件也将编译 将无法 看到 aspx 源代码 单击 确定 按钮后 系统自动编译站点 3 将 c MyWebsite 中的内容拷贝到 IIS 服务器中的某个目录下 假设为 D 工 资管理系统 然后进入 控制面板 管理工具 运行 Internet 信息服务 进入 IIS 服务管理器 4 在打开的 IIS 管理器中选择 新建网站 菜单 如图 2 23 所示 图 2 23 新建网站 单击 网站 后进入网站创建向导 单击 下一步 按钮 进入 网站描述 窗口 网站描述实际上就是网站的名称 可以输入 工资管理系统 输入网站描述后 单击 下 一步 按钮 进入 IP 地址和端口设置 对话框 选择 IP 地址后 保持 TCP 端口不变 输入网站的主机头名即域名 如果没有 可以不输 完成后单击 下一步 按钮 进入 网站主目录 对话框进行主目录设置 输入 D 工资管理系统 设置完网站主目录后 单击 下一步 按钮 进入 网站访问权限 对话框 根据网站的性质设置网站的访问权 限后 单击 下一步 按钮 进入 完成 窗口 整个创建网站的过程就结束了 网站创 建后 用户就可以在浏览器 URL 地址栏输入 http IP 地址 或域名就可访问网站了 另 外也可将需手工发布的网站创建为虚拟目录来发布 具体过程参照教材本章第一节 主目 录和虚拟目录的建立 3 2 Web 应用系统的联机发布 Web 应用系统的联机发布过程如下 1 在图 2 22 发布网站 对话框中的 目标位置 输入项右侧单击小按钮 出 现如图 2 24 所示对话框 2 在图 2 24 中 单击 FTP 站点 可以按照 FTP 方式进行站点发布 单击 选 择站点 则按照 HTTP 方式进行站点发布 本地 IIS 实际上也是按照 HTTP 方式进行站点 发布 只不过无需远程连接 文件系统 即是前面介绍的手工发布方式 3 对于以 远程站点 方式发布网站的前提条件是在 IIS 服务器上安装 FrontPage 服务器扩展 单击 远程站点 后输入实际网站位置 对于 FTP 站点 发布方式 需要 输入 FTP 服务器的 IP 地址和网站存放路径 4 设置完成后 单击图 2 22 中 确定 按钮后 系统自动编译站点 并且将网 站发送到指定位置 图 2 24 发布网站 对话框 3 3 Web 应用系统的打包发布 在 VS 2005 中制作 Web 应用系统安装程序的步骤描述如下 1 首先在 VS 2005 中打开需要制作安装程序的 已经完成的 Web 项目 2 在 文件 菜单上选择 添加 新建项目 菜单 如图 2 25 所示 图 2 25 新建项目 3 在如图 2 26 所示的 添加新项目 对话框中选择 其它项目类型 中的 安装 和部署 在右边列表框中选择 Web 安装项目 输入安装项目名称和安装程序的存放地 址后单击 确定 按钮 不妨将项目名称输为 myWebSetup 图 2 26 新建项目 对话框 4 在 解决方案资源管理器 中选择 myWebSetup 项目 单击打开属性窗口 输入 输出文件名 如图 2 27 所示 单击 系统必备 按钮可选择系统运行所必备的组 件 包括 net framework 2 0 等 图 2 27 属性 窗口 5 在 解决方案资源管理器 中选择 myWebSetup 项目 单击右键 在弹出的快捷 菜单中选择 添加 然后选择 项目输出 出现 添加项目输出组 对话框 如图 2 28 所示 选择需要生成安装程序的项目后 单击 确定 图 2 28 项目输出 菜单和 添加项目输出组 对话框 6 在 解决方案资源管理器 中选择 myWebSetup 项目 单击右键 在弹出的 快捷菜单中选择 视图 然后选择 用户界面 后 就会出现 用户界面 树形菜单 如 图 2 29 所示 用鼠标单击树形菜单各项 进行属性设置 若没有出现属性窗口 则按下 F4 功能键 例如 欢迎使用 中可指定安装程序的背景图片 版权警告文本和欢迎文本 图 2 29 安装程序 用户界面 设置 7 设置 Web 安装项目的虚拟目录等重要属性 ASP NET 打包项目中可以设置虚拟 目录 默认首页等属性 方法是选择图 2 58 中的 视图 文件系统 菜单后 选择 Web 应 用程序文件夹 然后按下 F4 功能键在属性窗口中 设定相应的 VirtualDirecoty 和 DefaultDocument 属性 ASP NET 安装项目还提供 注册表 等设置 可以在安装过程中 自动添加注册表键名和键值 方法是选择图 2 58 中的 视图 注册表 菜单后 右键单击某 个注册表分支后选择 新建键 然后在属性窗口输入相关键值等 8 在 解决方案资源管理器 中选择 myWebSetup 项目 单击右键 在弹出的 快捷菜单中选择 生成 或者 重新生成 生成安装文件 生成完成后 在第 4 步所指定 的路径下 即可发现有一个 setup exe 和一个 myWebSetup msi 文件 9 将这两个安装文件拷贝至需要部署 Web 应用的服务器上 双击 setup exe 文件 即进行自动安装和配置 安装程序会将 Web 应用系统默认放在 C Inetpub wwwroot 文 件夹下 也可放在你指定的其它地方 可在 IIS 中进一步对之进行配置 4 实验作业实验作业 新建一个空网站 试着用三种方式发布网站 实验三实验三 HTML 基础与层叠样式单基础与层叠样式单 CSS 实验内容实验内容 HTML 文档的基本结构 HTML 文档的各种常用标记 HTML 控件标记以及帧标记 浮动 帧标记 CSS 中各种选择符的定义及其使用方法 常用的属性例如字体属性 颜色和背景 属性 文本属性 边框属性等 实验目的 实验目的 1 熟悉 HTML 文件的基本结构 掌握各种 HTML 常用标记的用法 熟练使用各种 HTML 控件标记以及帧标记 浮动帧标记 2 理解叠层样式单 CSS 的基本原理 掌握 CSS 中各种选择符的定义及其使用方法 掌 握层样式单 CSS 的基本用法 实验步骤 实验步骤 1 1 浏览器中显示下面的 HTML 文档 2 HTML 文档格式标记和 HTML 文档常用文本标记的应用 实现下面的例子 对照实现结果 体会 HTML 格式文档标记和文本标记的应用 1 HTML 文档格式标记 HTML文档格式标记的演示效果 组成一个计算机系统的各种设备称为硬件 可将一台计算机划分为六 个逻辑部件或部分 具体划分如下 输入部件 输出部件 存储器 算术逻辑部件 ALU 辅助存储器 中央处理器 CPU 辅助存储器 此处是文本块标记 该文本块起始和结束自动加了软回车功能 起始和结束都换行 此处也是文本块标记 该文本块起始和结束不换行 2 HTML 文档常用文本标记 HTML文档格式标记的演示效果 这是一本专业的Dreamweaver MX 2004的书籍 What we are doing is just what you need 3 利用表实现下面例子 4 按照下面的例子实现链接标记和帧标记的综合应用 主文件 framemain html HTML文档链接标记 帧标记的演示效果 Please use a Web browser such as IE3 0 orNetscape Navigator to view this page in frames 文件 frame1 html 实例 实例 该 HTML 文档的显示效果如图所示 5 CSS 的一个应用实例 通过设计个人主页来体会 CSS 的用法 该主页使用表格 作为主要结构 一个表的单元格中又嵌入另一个表 通过使用 CSS 在头部标记集 中定义了页面的显示样式 又通过内联样式定义了页面中按钮风格的栏目 团结 进 取 等单元格 使得页面显示风格灵活多样 注意块级元素 div 和 span 用于定义内容块或 区域 它们本身并不显示任何内容 但通过给 div 定义样式 则可以将样式应用到所有包 含在和之间的不同标记符上 而不需要为其中的每个元素指定样式规则 源代码如下 a link font size 9pt text decoration none a visited font size 9pt text decoration none a active font size 9pt text decoration none a hover font size 9pt text decoration none body font size 9pt line height 13pt table font size 9pt line height 13pt tr font size 9pt td font size 9pt text align center td border border right 1px ridge border top 1px ridge border left 1px ridge borer bottom 1px ridge e font size 9pt font family MS Sans Serif text decoration none div mycenter text align center body 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 团结 进取 友谊 开朗 奋斗 成功 主页 精彩人生 学生时代 多次被评为三好学生 工作历程 先进员工 在浏览器中显示结果如图所示 在 VS2005 中 通过添加新项 选择样式表 生成一个空的样式表 在 CSS 大纲中 通过鼠标右键菜单中的 添加样式规则 选择施加样式的元素或者指定类名和元素 ID 后 新建的元素或者输入的类名和元素 ID 就会出现在 CSS 大纲中 然后鼠标右键单击新建的 元素 类名或者元素 ID 单击 生成样式 就会出现如下图所示的样式生成器界面 通 过样式生成器就可自动生成你需要的样式 而不需要你死记硬背样式名称 然后将生成的 样式粘贴到上述源代码中 VS2005 中的样式生成器可生成大部分样式 仍有部分样式需要 参阅相关资料 手工处理 例如上例中的滚动条的样式设置 实验四实验四 JavaScript 语言上机练习语言上机练习 实验内容 实验内容 JavaScript 语言的语法结构和流程控制 JavaScript 语言的事件和对象编程方法 实验目的 实验目的 练习并掌握 JavaScript 编程基础 对象编程技术 JavaScript ActiveX 编程技术 实验步骤 实验步骤 上机运行以下代码 查看并保存运行结果 1 JavaScript 编程基础编程基础 1 1 将将 JavaScriptJavaScript 程序嵌入程序嵌入 HTMLHTML 文件的方法文件的方法 HTML 文件中使用脚本语言示例 1 HTML中如何使用script语言 设置收藏夹实例 收藏本站 查看运行结果 查看运行结果 HTML 文件中使用脚本语言示例 2 HTML中如何使用script语言 设置主页实例 设为主页 sethomepage js文件内容 function Set HomePage myAlink style behavior url default homepage myAlink setHomePage return false 直接在 HTML 标记内添加脚本 将上例改成 HTML中如何使用script语言 设置主页实例 设为主页 查看运行结果 查看运行结果 1 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 i num 1 i fact i fact return fact 调用factor函数 alert 5的阶乘 factor 5 显示 的阶乘 120 默认求 1 2 1000 否则按指定开始值 结束值求和 function sum StartVal EndVal var ArgNum sum arguments length var i s 0 if ArgNum 0 StartVal 1 EndVal 1000 else if ArgNum 1 EndVal 1000 for i StartVal i EndVal i s i return 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 test str 使用正则表达式测试字符串是否全由数字组成 alert TestResult 鼠标单击 处理语句 检查输入的字符串是否全由数字组成 鼠标单击 函数 检查输入的字符串是否全由数字组成 mybut onmousedown function mybut 为按钮的ID var TestResult D test mytext value 使用正则表达式测试字符串是否全是数字 alert TestResult Onchange onselect onfocus 事件例子 2 2 JavaScriptJavaScript 对象编程技术对象编程技术 2 1JavaScript2 1JavaScript 常用的内置对象常用的内置对象 使用 JavaScript 内建对象 Array 生成一个新的数组 var theMonths new Array 6 创建数组对象theMonths 具有6个数组元素 theMonths 0 Jan theMonths 1 Feb theMonths 2 Mar theMonths 3 Apr theMonths 4 May theMonths 5 Jun 下面的示例与上一个示例是等价的 var theMonths new Array Jan Feb Mar Apr May Jun 使用自定义对象的方式创建数组对象 function arrayName size this length size for var i 0 i size i this i 0 return this var MyArray new arrayName 10 MyArray 0 1 MyArray 1 2 MyArray 2 3 MyArray 3 4 MyArray 4 5 MyArray 5 6 MyArray 6 7 MyArray 7 8 MyArray 8 9 MyArray 9 10 alert MyArray 7 输出8 string 对象的建立和使用 设置变量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 hname 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 substring 0 3 和 strvar substring 3 0 中 返回的子字符串的长度为3 字符搜索 indexOf str fromIndex Str1 0123456789 创建一个string 对象Str1 Str2 2345 创建一个string 对象Str2 var aChunk Str1 substring 4 7 将aChunk 设为 456 document write aChunk aChunk found Str1 indexOf Str2 返回Str2在Str1中的起始位置 found值为 创建字符串对象的另外一种方法是用new var 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 也可用With保留字来简化程序的写法 with Math var circleArea PI radius radius 注意Math和PI需大写 本公式计算给定半径的球体的体积 volume 4 3 PI pow radius 3 alert volume 输出 5987 Date 对象的使用 本示例使用前面定义的月份名称数组 第一条语句以 Day Month Date 00 00 00 Year 格式对Today 变量赋值 var Today new Date 获取今天的日期 提取年 月 日 thisYear Today getFullYear thisMonth Today getMonth thisDay Today getDate 提取时 分 秒 thisHour Today getHours thisMinutes Today getMinutes thisSeconds Today getSeconds 提取星期几 thisWeek Today getDay var x new Array 日 一 二 x x concat 三 四 五 六 thisWeek x thisWeek nowDateTime 现在是 thisYear 年 thisMonth 月 thisDay 日 nowDateTime thisHour 时 thisMinutes 分 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 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 AM 2 2 用户自定义对象用户自定义对象 创建对象 pasta 定义pasta对象 function pasta grain width shape hasEgg this grain grain this width width this shape shape this hasEgg hasEgg 使用对象的时候 用new进行实例化 下面建立了两个对象实例 var spaghetti new pasta wheat 0 2 circle true var linguine new pasta wheat 0 3 oval true document write spaghetti shape 输出circle document 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 return Grain this grain n Width this width n Shape this shape n Egg Boolean this hasEgg 用new建立pasta对象的实例spaghetti var spaghetti new pasta wheat 0 2 circle true 可以给对象实例spaghetti添加属性 以改变该实例 spaghetti color pale straw spaghetti drycook 7 spaghetti freshcook 0 5 alert spaghetti 输出 Grain wheat Width 0 2 Shape circle Egg true alert spaghetti freshcook 输出 5 用new建立pasta对象的实例chowFun var chowFun new pasta rice 3 flat false chowFun实例中并不包括实例spaghetti添加的color属性 可以为pasta对象添加一个color属性 以后所有pasta的对象实例均可使用此属性 pasta prototype color yellow alert spaghetti color 输出 pale straw alert chowFun color 输出 yellow chowFun已经具有color属性了 3 JavaScript ActiveX 编程技术编程技术 文件系统操作 var fso new ActiveXObject Scripting FileSystemObject fso CreateFolder C Bonus 在C盘创建一个文件夹 fso DeleteFolder C Bonus 删除创建的文件夹 fso CopyFile c temp 11 bmp c Bonus 22 bmp 复制文件 创建新文件 var tf fso CreateText