《WEB程序设计》PPT课件.ppt

Web网页设计及编程语言,主讲 李雅红,2241,目 录,第1章 Web应用程序概述,第2章 HTML网页设计,第3章 VBScript脚本编程,第4章 ASP内建对象编程,第5章 Web与数据库集成,第6章 网上论坛设计,第7章 网上考试系统设计,3241,第1章 Web应用程序概述,1.1 理解Web应用程序,1.2 理解ASP工作原理,1.3 配置ASP开发环境,1.4 设置Dreamweaver站点,4241,1.1 理解Web应用程序,1.1.1 计算机网络定义 计算机网络(Computer Networks)是用通信线路将分散在不同地点的具有独立自主的计算机系统相互联接,并按网络协议进行数据通信和实现资源共享的计算机集合,称为计算机网络。其包含三层含义： 自主计算机；相互联接；信息交换、资源共享、协调工作。从概念上讲，计算机网络由通信子网和资源子网两部分组成，其功能是将数据划分成不同长度的分组进行传输和处理。 1.1.2 计算机网络发展过程 1.计算机网络的产生背景 美国国防部领导的远景研究规划局ARPA研究建立一种新型网络，要求必须具有以下几个基本特点。 （1）网络用于计算机之间的数据传送，而不是为了打电话。 （2）网络能够连接不同类型的计算机，不局限于单一类型的计算机。 （3）所有的网络结点都同等重要，因而大大提高网络的生存性。 （4）计算机在进行通信时，必须有冗余的路由。 （5）网络的结构应当尽可能地简单，同时还能够非常可靠地传送数据。 2.计算机网络的组成 1）计算机网络中的硬件 （1）计算机。 （2）光纤、同轴电缆和双绞线等传输媒体。 （3）通信网卡：用于收发数据。 （4）集线器(Hub)：用来把多台计算机连在一起。 （5）交换机(Switch)：用来扩展带宽及连接多台计算机。 （6）路由器(或ATM交换机)：负责路径管理和网络交通的控制。 2）计算机网络中的软件 计算机网络中的软件主要分为5类。 （1）操作系统 （2）通信协议 （3）管理软件 （4）交换与路由软件 （5）应用软件,5241,1.1 理解Web应用程序,1.1.3 基本概念 1. Web Web即WWW，是一种最方便和最受欢迎的信息服务。Web服务器是指安装了Web服务器软件并由系统管理员或Internet服务提供商（ISP）维护的计算机，它可以响应用户通过Web浏览器发送的请求，以提供Web信息服务。常见的Web服务器软件有：IIS、PWS；常用的Web浏览器：Netscape Navigator、IE。 2. IP地址和域名 IP地址是识别Internet网络中的主机及网络设备的唯一标识 表示：网络地址+主机地址，长度为4个字节，由3个用“.”分隔的十进制数组成，每个数不大于255，如22 DNS ：域名服务系统，允许为主机分配字符名称，即域名。并实现域名与IP地址的转换 例： 结构： 计算机名.三级域名.二级域名.一级域名.顶级域名 顶级域名采用两种划分模式 组织模式和地理模式 2. URL URL即统一资源定位符，是一种惟一地标识Internet上计算机、目录和文件的位置的命名规则，用于指定获得Internet上资源的方式和位置。一般形式为： scheme:/host:port/path 用关键词localhost表示程序在其上运行的计算机名称占位符。 3. HTTP HTTP即超文本传输协议，是用于访问WWW上信息的客户机/服务器协议，目前的版本是HTTP 1.1。 4. HTML HTML即超文本标记语言，是用于Web文档的格式化语言。HTML文件的内容通过一个页面展示出来，不同页面通过超链接关联起来。,第1章目录,6241,1.1 理解Web应用程序,1.1.4 Web应用开发技术 1. ASP ASP（Active Server Pages）是Microsoft公司开发的动态网页技术标准，主要与Microsoft的服务器产品IIS和PWS一起使用。ASP是一种Web服务器端的脚本环境，可以用来创建动态Web页或Web应用程序。ASP支持VBScript、JavaScript等多种脚本语言。本教材主要讲述如何使用ASP开发Web应用程序。 2. JSP JSP（JavaServer Pages）是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术是用Java语言作为脚本语言的。 3. PHP PHP（Personal Home Page）是由Rasmus Lerdorf及其支持者开发的一种跨平台的服务器端嵌入式脚本语言，通过其数据库集成层可以创建具有数据库访问功能的网页。 4. ASP.NET ASP.NET是建立在公共语言运行库上的编程框架，可以用于在服务器上生成功能强大的Web应用程序。ASP.NET完全基于模块与组件，具有更好的可扩展性与可定制性，数据处理方面更是引入了许多新技术。,第1章目录,7241,1.1 理解Web应用程序,1.1.5 Web应用开发工具 1. 记事本 如果用记事本作为网页编辑器，则应当确保文件有一个正确的扩展名。默认情况下记事本为文件设置的扩展名是.txt。因此，在记事本中保存文件时，必须为文件指定一个适当的扩展名。 2. FrontPage Microsoft FrontPage是一款支持所见即所得的网页编辑器，可以用于制作网页、创建和管理Web站点。使用FrontPage，不需要掌握很多的网页制作方面的知识，甚至不需要了解HTML基本语法，就可以很轻松地在网页中加入表格、图像、声音、动画和电影。 3. Dreamweaver Macromedia Dreamweaver是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论是习惯于手工编写代码还是喜欢在可视化编辑环境中工作，Dreamweaver都能提供方便快捷、功能强大的工具，使用它可以快速地创建基于专业标准的网站和Web应用程序。 4. Visual InterDev Microsoft Visual InterDev是微软可视化开发工具家族Visual Studio的一员，它是为开发部署于Internet和Intranet上的Web应用程序而设计的。,第1章目录,8241,1.2 理解ASP工作原理,1.2.1 静态网页与动态网页 静态网页与动态网页的区别在于服务器对它们的处理方式不同。 1. 静态网页 静态网页是标准的HTML文件，其文件扩展名是.htm或.html，它可以包含HTML标记、文本、Java小程序、客户端脚本以及客户端ActiveX控件，但这种网页不包含任何服务器端脚本，该页中的每一行HTML代码都是在放置到Web服务器前由网页设计人员编写的，在发送到浏览器时不再发生任何更改，所以称之为静态网页。 静态网页的处理流程 2. 动态网页 动态网页与静态网页之间的区别在于：动态网页中的某些脚本只能在服务器端运行，而静态网页则不能包含在服务器端运行的任何脚本；动态网页与静态网页文件扩展名不同，对于动态网页来说，其文件扩展名不再是.htm或.html，而是与所使用的Web应用开发技术有关，例如，使用ASP技术时文件扩展名是.asp。 动态网页的处理流程,第1章目录,9241,1.2 理解ASP工作原理,1.2.2 脚本语言 脚本是指嵌入到网页中的程序代码，所使用的编程语言称为脚本语言。脚本分为客户端脚本和服务器端脚本。客户端脚本在客户端计算机上被Web浏览器执行，服务器端脚本在服务器端计算机上被相应的脚本解释器执行。 常用的网页脚本语言： JavaScript VBScript JScript,第1章目录,10241,1.2 理解ASP工作原理,1.2.3 ASP的处理流程和特点 ASP的处理流程 在客户端计算机上，用户在Web浏览器上发出ASP文件请求。 Web服务器收到该请求后，根据扩展名.asp判断出这是一个ASP文件请求，并从硬盘或内存中获取所需的ASP文件。 Web服务器向应用程序服务器Asp.dll发送ASP文件。 Asp.dll自上而下查找、逐行解释并执行ASP页中包含的服务器端脚本命令，然后将处理结果写入HTML流，由此生成HTML文件。 Web服务器将HTML发送到客户端计算机上的Web浏览器。 Web浏览器负责对HTML文件进行解释，并在浏览器窗口中显示结果。 ASP的特点 在ASP页中可以包含服务器端脚本。 ASP代码由位于Web服务器上的ASP解释器Asp.dll解释执行。 用户只需使用操作系统自带的Web浏览器即可浏览ASP页的执行结果。 使用ASP内置对象可以使服务器端脚本功能更强。 ASP可以使用服务器端ActiveX组件来执行各种各样的任务。 ASP提高了程序的安全性。 ASP具有很强的扩展性。,第1章目录,11241,1.3 配置ASP开发环境,1.3.1 安装和配置服务器 在Windows平台上，可以安装PWS或IIS作为服务器软件，它们同时兼有Web服务器和ASP应用程序服务器的功能。在Windows 9x平台上可以安装PWS作为服务器软件；在Windows 2000平台上可以安装IIS 4.0作为服务器软件。 1. 安装PWS 3.0 在Windows 98安装光盘的Add-onsPWS文件夹中，可以找到PWS的安装文件Setup.exe，双击该文件图标，即可运行PWS安装程序。然后在安装向导提示下完成安装。 在IE浏览器中测试PWS http:/localhost 2. 安装IIS 4.0 在“添加/删除程序”窗口中，单击“添加/删除Windows组件”，在“Windows组件向导”对话框中选中“Internet信息服务（IIS）”组件，然后单击“下一步”按钮，并根据向导的提示进行操作，直至完成安装。,第1章目录,12241,1.3 配置ASP开发环境,1.3.2 创建Web站点 在“Internet信息服务”窗口中，启动Web站点创建向导页，然后在向导提示下完成操作。 要点： Web站点说明：在IIS中标识站点 IP地址和端口设置：为新Web站点指定指定IP地址、TCP端口和主机头 Web站点主目录：指定Web站点主目录的路径 Web站点访问权限：通常选取“读取”和“运行脚本”复选框以允许相应的权限 在IIS中创建的Web站点也称为虚拟主机或虚拟服务器，它是驻留在 Web服务器上的虚拟计算机。在运行Windows 2000 Server的计算机上，通 过IIS可以维护多个Web站点，从而可以在同一台服务器计算机上创建多个 虚拟主机。 Web站点用来接收和响应Web客户端的请求。每个Web站点都具有惟 一的标识，该标识由IP地址、TCP端口号和主机头名三个部分组成。通过 更改其中的一个标识，就可以在一台计算机上维护多个Web站点。,第1章目录,13241,1.3 配置ASP开发环境,1.3.3 创建虚拟目录 什么是虚拟目录？它是指在物理上未包含在站点主目录下的特定文件夹，但客户浏览器却将其视为包含在主目录下的目录。虚拟目录与一个实际物理目录相对应，这个实际物理目录既可以是本地计算机的某个目录，也可以是远程计算机上的某个共享目录。虚拟目录具有别名，这个别名映射到Web内容所在实际物理目录，Web浏览器通过别名来访问此目录。别名与实际文件夹名称可以相同，也可以不相同。别名通常要比目录的路径名短，更便于用户输入。使用别名更为安全，因为用户不知道文件是否真的存在于服务器上，所以无法使用这些信息来修改文件。 若要在Web站点中创建虚拟目录的，请在Internet信息服务管理单元中启动新建虚拟目录向导的欢迎页上，然后在向导提示下完成操作。 要点： 指定虚拟目录别名 指定虚拟目录相对应的物理目录的路径 设置虚拟目录的访问权限,第1章目录,14241,1.4 设置Dreamweaver站点,什么是Dreamweaver站点？ Dreamweaver站点提供一种组织所有与Web站点关联的文档的方法。通过在站点中组织文件，可以利用Dreamweaver将站点上传到Web服务器、自动跟踪和维护链接、管理文件以及共享文件。如果想充分利用Dreamweaver的功能，就必须定义一个站点。 Dreamweaver站点由哪些部分组成？ 本地文件夹 远程文件夹 测试文件夹,第1章目录,15241,1.4 设置Dreamweaver站点,1.3.1 设置本地文件夹 什么是本地文件夹？ 本地文件夹是设计时的工作目录。Dreamweaver将该文件夹作为本地站点，它可以放在本地计算机上，也可以放在网络服务器上。实际上，只需要建立本地文件夹便可以定义一个Dreamweaver站点。 如何设置本地文件夹？ 利用“站点定义”对话框中的“本地信息”选项卡 设置本地文件夹有哪些要点？ 指定站点名称 指定本地根文件夹 自动刷新本地文件列表 指定默认图像文件夹,第1章目录,16241,1.4 设置Dreamweaver站点,1.3.2 设置远程文件夹 远程文件夹有什么作用？ 若要向Web服务器传输文件，则需要添加远程站点信息。一般说来，远程文件夹位于运行Web服务器的计算机上。通过本地文件夹和远程文件夹可以在本地磁盘和Web服务器之间传输文件。如果指定的本地文件夹与运行Web服务器的系统上为站点文件创建的文件夹相同，则不需要指定远程文件夹。这意味着该Web服务器正在本地计算机上运行。 如何设置远程文件夹？ 利用“站点定义”对话框的“远程信息”选项卡。 设置远程文件夹有哪些要点？ 选择一种访问远程文件夹的方式，例如FTP、本地/网络 设置本地网络访问选项或者设置FTP访问的远程选项,第1章目录,17241,1.4 设置Dreamweaver站点,1.3.3 设置测试服务器文件夹 什么测试服务器文件夹？ 测试服务器文件夹是处理动态网页的文件夹，Dreamweaver使用此文件夹生成动态内容并在设计时连接到数据库。若要开发Web应用程序，就必须为站点添加测试服务器信息。由于在Web服务器上往往还运行着用于处理动态页的应用程序服务器，例如PWS和IIS可以作为ASP应用程序服务器，所以通常指定在Web服务器上的站点主目录或该站点内的虚拟目录作为测试文件夹。 如何设置测试文件夹？ 利用“站点定义”对话框的“测试服务器”选项卡。 设置测试服务器文件夹有哪些要点？ 选择所使用的服务器技术，例如ASP JavaScript、ASP VBScript 选择一种访问服务器的方式，例如FTP或本地/网络。 指定测试服务器文件夹，通常是指定Web站点的主目录、主目录下的子文件夹或某个虚拟目录,第1章目录,18241,1.4 设置Dreamweaver站点,1.3.4 创建ASP测试页 为了使用ASP开发Web应用程序，可以在Dreamweaver MX 2004中创建一个基于ASP VBScript服务器模型的站点。在正式开始开发工作之前，还应当通过创建一个ASP动态网页对该站点进行测试。 在Dreamweaver MX 2004中创建一个ASP动态网页，在在 与 标记之间输入以下内容： 现在是，欢迎您使用Dreamweaver MX 2004开发Web应用程序！ 查看动态网页的方法 在动态数据视图中：选择“查看”“动态数据”命令 在浏览器中：按F12键,第1章目录,19241,第2章 HTML网页设计,2.1 HTML语言基础,2.2 设置文本格式,2.3 使用表格,2.4 使用图像,2.5 添加动感效果,2.6 使用链接,2.7 使用框架,2.8 设计表单,2.9 创建和应用CSS样式,20241,2.1 HTML语言基础,2.1.1 HTML工作原理 一个HTML文档包含各种HTML标记，这些标记是一些嵌入式命令，用以提供网页的结构、外观和内容等信息。Web浏览器利用这些信息来决定如何显示网页。Web浏览器按照顺序读取HTML文件，然后根据内容附近的HTML标记来解释和显示各种内容，这个过程称为语法分析。 在HTML语言中，所有的标记都必须用一对尖括号（即小于号“”）括起来，这对尖括号就是HTML语言的定界符。大部分标记都是成对出现的，包括开始标记和结束标记，它们定义了标记所影响的范围；开始标记与结束标记名称相同，但结束标记总是以一个斜线符号开头的。也有一些标记只要求单一标记号。 HTML标记的一般格式 要控制的内容 例如： 心想事成。,第2章目录,21241,2.1 HTML语言基础,2.1.2 HTML网页基本结构 文档标题 这里是网页内容，包括文本、图像、动画等 和为文档标记 和为首部标记。在首部标记中，可以使用和 标记来指定网页的标题，使用和标记来定义 CSS样式表，使用和标记来插入脚本，等等。 和称为主体标记，用于定义HTML网页的主要部分， 给出要在网页上显示的内容和显示格式。,第2章目录,22241,2.1 HTML语言基础,2.1.3 创建HTML网页 在Dreamweaver MX 2004中，可以使用“新建文档”对话框创建空白的HTML网页，此时会自动生成网页的基本结构。 如何要打开现有的Dreamweaver站点？ 从“文件”面板左侧的列表（当前站点、服务器或驱动器显示在该列表中）中选择要打开的站点。 如何在Dreamweaver MX 2004中创建HTML网页？ 选择“文件”“新建”命令。 在“新建文档”对话框中，从“类别”列表中选择“基本页”，从中间的列表中选择“HTML”，然后单击“创建”按钮。,第2章目录,图2.1 打开站点,23241,2.1 HTML语言基础,2.1.4 设置使用HTML标记 在默认情况下，Dreamweaver MX 2004将在HTML文档中大量使用CSS样式来设置网页外观。为了说明HTML标记在网页设计中的应用，也可以对常规首选参数进行设置，以指定Dreamweaver使用HTML标记而不是CSS样式。 操作方法： 选择“编辑”“首选参数”命令。 从“首选参数”对话框左侧的列表中选择“常规”，然后清除对“使用CSS而不是HTML标签”复选框的选择。 单击“确定”按钮。,第2章目录,24241,2.1 HTML语言基础,2.1.5 设置页面属性 利用body标记的属性可以对网页的页面属性进行设置。 background：指定用作背景的图像的URL bgcolor：指定背景颜色 text：指定文本的颜色 link：指定超文本链接的颜色 alink：指定活动链接的颜色 vlink：指定已访问的超文本链接的颜色 leftmargin：指定页面的左边距 topmargin：指定页面的上边距 颜色属性用英文颜色名或16进制的RGB格式表示。 在Dreamweaver中，可以通过直接编辑源代码、使用“页面属性” 对话框或使用“标签检查器”来设置网页的页面属性。 2.1.6 添加注释 ,第2章目录,25241,2.1 HTML语言基础,2.1.7 在Dreamweaver中处理HTML代码 1. 使用代码提示功能 2. 使用属性检查器设置HTML属性 3. 使用标签检查器设置HTML属性,第2章目录,26241,2.2 设置文本格式,2.2.1 输入文本 如何插入特殊字符？ 从插入栏的“HTML”类别中单击“字符”按钮旁边的箭头，然后从弹出菜单中选择所需的字符。 如何插入“字符”弹出菜单中没有特殊字符？ 从该菜单中选择“其他字符”，然后在“插入其他字符”对话框中选择所需字符并单击“确定”按钮。,第2章目录,27241,2.2 设置文本格式,2.2.2 设置字体、大小和颜色 在HTML语言中，用font标记控制文本的字体、大小和颜色，语法格式如下： 文本内容 在Dreamweaver中，可以使用文本属性检查器来设置文本的字体、大小和颜色。 编辑字体列表 设置文本的字体、大小和颜色,第2章目录,28241,2.2 设置文本格式,2.2.3 设置字符样式 在Dreamweaver MX 2004中设置字符的样式： 在文档窗口中选择文本。若未选择文本，更改将应用于随后键入的文本。 执行下列操作之一： 若要将所选文本设置为粗体或斜体，请在文本属性检查器中单击“粗体”按钮 或“斜体”按钮 。 若要设置更多的文本样式，请在“文本”菜单中指向“样式”，然后从子菜单中选择所需的文本样式。,第2章目录,29241,2.2 设置文本格式,2.2.4 分段与换行 在HTML语言中，段落是用p标记来定义的。语法格式为： 段落内容 其中align属性指定段落的对齐方式，left、center、right和justify分别 表示左对齐、居中对齐、右对齐和两端对齐。默认的对齐方式为左对齐。 换行标记br标记的语法： 文本内容 在Dreamweaver中，每当在文档窗口的设计视图中按Enter键时，都将 在HTML源代码中添加一个p标记，从而产生一个新的段落。若只是换行， 请按Shift+Enter键，此时将在HTML源代码中添加一个br标记。 对所选文本应用段落标记： 选择要应用段落标记的文本。 在属性检查器中，从“格式”列表中选择“段落”。 若要设置段落的对齐方式，请单击“左对齐”按钮 、“居中对齐”按钮 、“右对齐”按钮 或“两端对齐”按钮 。,第2章目录,30241,2.2 设置文本格式,2.2.5 设置文本块 如果要将文档中的多个段落设置成相同的对齐方式，可以将 这些段落置于和标记之间组成一个文本块，并使用 align属性来设置该块的对齐方式。div标记也称为分区标记，其语 法格式如下： 要控制的内容 如果要将部分文档内容设置为居中对齐，也可以将这部分内 容置于和标记之间。 在Dreamweaver中，如果对位于段落之外的普通文本设置居中 对齐方式，则会生成div标记并将align属性设置为center。,第2章目录,31241,2.2 设置文本格式,2.2.6 设置标题 在HTML语言中，用hn标记在页面中设置标题，语法格式如下： 标题文本 其中n指定标题文本的字体大小，取值从1到6，值越大，字体 越大；align属性指定标题的对齐方式。标题总是用粗体字来显示。 在Dreamweaver中使用文本属性检查器设置标题： 选择要应用标题标记的文本。 从文本属性检查器的“格式”列表中选择所需的标题标记，例如“标题3”对应于.标记；若要清除先前应用的标题格式，请选择“无”。,第2章目录,32241,2.2 设置文本格式,2.2.7 设置预格式化文本 在某些情况下，可能需要使用包含空格、回车等字符的文本。 此时，可以使用将文本放置在和标记之间来获得这种 效果，称为预先格式化文本或预定义文本。浏览器要显示和 标记之间的内容时，将原样显示其中包含的空白字符，例如 空格、制表符等。例如，下面两行源代码在浏览器中的显示结果 是不一样的。 欲穷千里目 更上一层楼 欲穷千里目 更上一层楼,第2章目录,33241,2.2 设置文本格式,2.2.7 插入水平线 在HTML语言中，可以使用hr标记在网页中插入一条水平线， 并使后面的文本在此处换行，这样可以起到分隔不同内容的作用。 hr标记的语法格式如下： 在Dreamweaver中可以使用菜单命令来插入水平线： 将插入点放置在要插入水平线的位置。 选择“插入”“HTML”“水平线”命令。 选择该水平线，然后在属性检查器中设置水平线的属性。,第2章目录,34241,2.2 设置文本格式,2.2.8 设置列表格式 有序列表用ol和li标记定义，语法如下： 条目1 条目2 . 无序列表用ul和li标记定义，语法如下： 条目1 条目2 . ,第2章目录,35241,2.3 使用表格,2.3.1 创建基本表格 插入表格的语法格式： 表格标题 数据项数据项数据项 数据项数据项数据项 在Dreamweaver中插入一个表格： 将插入点放在要插入表格的位置。 选择“插入”“表格”命令。 设置“表格”对话框选项。,第2章目录,36241,2.3 使用表格,2.3.2 设置表格的属性,第2章目录,37241,2.3 使用表格,2.3.3 设置表格元素的属性,第2章目录,38241,2.4 使用图像,2.4.1 在网页中添加图像 使用img标记在网页中插入图像，语法如下： 在Dreamweaver中插入图像： 将插入点放置在要显示图像的位置。 选择“插入”“图像”命令。 设置“选择图像源文件”对话框选项。,第2章目录,39241,2.4 使用图像,2.4.2 设置图像的属性,第2章目录,40241,2.5 添加动感效果,2.5.1 创建滚动字幕 使用marquee标记在页面中插入滚动字幕： 要滚动显示的文本信息 ,第2章目录,41241,2.5 添加动感效果,2.5.2 添加音频 使用bgsound标记在网页中添加背景音乐： 使用embed标记在网页中嵌入声音文件： ,第2章目录,42241,2.5 添加动感效果,2.5.2 添加视频 使用embed标记不仅可以在网页中嵌入声音文件，也可以嵌入 视频文件，为此应将src属性设置为视频文件的URL，并通过height 和width属性设置视频播放器插件的高度和宽度。 2.5.3 添加Flash动画 使用object和embed标记可以向网页中添加Flash动画，但要用 手工方式编写所需代码往往是比较麻烦的，最好使用Dreamweaver 通过可视化操作来添加Flash动画。,第2章目录,43241,2.6 使用链接,2.6.1 理解链接路径 1. 绝对路径 绝对路径给出所链接文档的完整URL，而且包括访问该文档所使用的 协议，对于网页通常使用http:/。若要链接到其他服务器上的文档，就必 须使用绝对路径。 2. 文档相对路径 文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。使用文档相对路径时，通常有以下几种情况： 如果要链接的目标文件与当前文档位于同一文件夹中，请输入文件名。 如果要链接的目标文件位于子文件夹中，请提供子文件夹的名称，后跟正斜杠“/”，然后输入文件名。 如果要链接的目标文件位于父文件夹中，请在文件名前添加“/”，其中“”表示文件夹层次结构中向上提升一级。 3. 站点相对路径 站点相对路径提供从站点的根文件夹到文档的路径。站点根目录相对 路径以一个正斜线（/）开始，该正斜线表示站点根文件夹。,第2章目录,44241,2.6 使用链接,2.6.2 创建链接 使用a标记在网页中创建链接： 文本或图像等 在Dreamweaver MX 2004中创建链接：,第2章目录,45241,2.7 使用框架,2.7.1 创建框架网页 什么是框架网页？ 框架网页又称为框架集，它是一种特殊的HTML网页，可以用 来将浏览器视窗分割成不同的区域，这些区域称为框架，每一个 框架都可以独立地显示一个不同的HTML网页。框架集由frmaeset 标记定义，组成该框架集的各个框架用frame标记定义。在框架网 页中，将frmaeset标记置于head之后，以取代body的位置。 如何定义框架网页？ ,第2章目录,46241,2.7 使用框架,2.7.2 设置框架集的属性,第2章目录,47241,2.7 使用框架,2.7.3 设置框架的属性,第2章目录,48241,2.8 设计表单,2.8.1 创建表单 使用form标记在网页中定义表单： 在Dreamweaver MX 2004中创建表单： 在文档中将插入点放在希望表单出现的位置，然后选择“插入”“表单”“表单”命令。 单击该表单的轮廓，或者在文档窗口左下侧的标签选择器中单击标记，以选择该表单。 在属性检查器的“表单名称”文本框中，键入一个惟一的名称（name）以标识该表单。,第2章目录,49241,2.8 设计表单,2.8.2 添加表单控件 1. 添加文本框 文本框控件用于接收文本输入。在HTML语言中，通过input标 记来定义文本框控件，其语法格式如下： 在Dreamweaver MX 2004中文本框控件： 将插入点放在表单轮廓内。 选择“插入”“表单”“文本字段”命令，以插入文本框。 选择该文本框，然后在属性检查器中对其下列属性进行设置。,第2章目录,50241,2.8 设计表单,2.8.2 添加表单控件 2. 添加密码框 密码框也用input标记来定义： 3. 添加文本区域 文本区域用textarea标记来定义： 初始内容,第2章目录,51241,2.8 设计表单,2.8.2 添加表单控件 4. 添加按钮 其中value属性指定显示在按钮上的文本。type属性指定按钮的类 型，有以下三个取值。 Submit：创建一个提交按钮。 Reset：创建一个重置按钮。 Button：将创建一个自定义按钮。 在Dreamweaver MX 2004中添加按钮： 在文档中，将插入点放在表单轮廓内。 选择“插入”“表单”“按钮”命令。 选择该按钮，然后在属性检查器中设置按钮的属性。,第2章目录,52241,2.8 设计表单,2.8.2 添加表单控件 5. 添加单选按钮 选项提示文本 在Dreamweaver MX 2004中添加单选按钮： 将插入点放在表单轮廓内。 选择“插入”“表单”“单选按钮”命令来插入一个单选按钮，然后在其旁边输入提示文本。 重复步骤（2）中的操作，以插入更多的单选按钮。 选择一个单选按钮，然后在属性检查器中设置它的属性。,第2章目录,53241,2.8 设计表单,2.8.2 添加表单控件 6. 添加复选框 用input标记创建复选框： 选项提示文本 其中value属性指定提交时的值；checked属性是可选的，若使 用该属性，则当第一次打开表单时该复选框处于选中状态。当提 交表单时，假如复选框被选中，它的内部名称和值都会包含在表 单结果中；假如复选框未选中，则只有名称会被纳入表单结果中， 但值为空白。 在Dreamweaver MX 2004中插入复选框： 将插入点放在表单轮廓内。 选择“插入”“表单”“复选框”命令。 选择此复选框，然后在其旁边输入提示文本。 选择此复选框，然后在属性检查器中设置它的属性。,第2章目录,54241,2.8 设计表单,2.8.2 添加表单控件 7. 添加文件域 使用input标记创建文件域： 8. 添加隐藏域 使用input标记创建隐藏域： 在Dreamweaver MX 2004中添加隐藏域： 将插入点放在表单轮廓内。 选择“插入”“表单”“隐藏域”命令，以插入隐藏域。 选择该隐藏域标记，然后在属性检查器设置它的名称和值。,第2章目录,55241,2.8 设计表单,2.8.2 添加表单控件 9. 添加列表框 使用select和option标记来创建列表框： 选项1 选项2 在Dreamweaver MX 2004中添加列表框： 将插入点放在表单轮廓内。 选择“插入”“表单”“列表/菜单”命令。 选择该列表框，然后在属性检查器的设置它的属性。,第2章目录,56241,什么是CSS？ CSS是Cascading Style Sheet的缩写，通常译 为层叠样式表或级联样式表。使用层叠样式表 可以更有效地控制网页的外观，并扩充精确设 置网页元素位置和创建特殊效果的能力。,2.9 使用CSS设置网页外观,第2章目录,57241,2.9.1 创建和应用CSS样式 CSS用于重新设置浏览器解析HTML元素时的表现形式，CSS 是描述HTML元素的规则。一个CSS样式表由若干个规则组成，每 个规则由选择符和声明两部分组成。选择符是样式的名称（如 HTML标记body、p、tr、input或用户指定的类名称），声明用于 定义样式元素，声明由属性（如font-family）和值（如“宋体”）两 部分组成。 术语“层叠”是指对同一个网页应用多个样式表的特性。例如， 可以创建一个样式表来设置颜色，创建另一样式表来设置边距， 然后将两者应用于同一个网页。 CSS样式表的主要优点是提供便利的更新功能。当更新CSS样 式时，使用该样式的所有文档的格式都会自动更新为新样式。因 此，通过CSS很容易为Web站点内的所有网页提供一致的外观和风 格。 CSS样式可以分为类样式、HTML标记样式和CSS选择符样式 三种类型。,2.9 使用CSS设置网页外观,第2章目录,58241,使用类样式 类样式实现由class属性所标识的文本范围的格式设置，语法如下： .类选择符1 属性: 值; 属性: 值; . .类选择符2 属性: 值; 属性: 值; . 在Dreamweaver MX 2004中创建和应用CSS类样式： 在CSS样式面板中单击“新建CSS样式”按钮。 指定类样式的名称。 对于“选择器类型”选项，选择“类（可应用于任何标签）”。 指定样式的位置：若要创建外部样式表，请选择“新建样式表文件”；若要在当前文档中嵌入样式，请选择“仅对该文档”。设置“CSS样式定义”对话框选项。 若要应用类样式，请在文档窗口中选择要应用该样式的内容（例如文本、表格等），然后在属性检查器的“样式”列表中选择该样式。,2.9 使用CSS设置网页外观,第2章目录,59241,使用HTML标记样式 定义HTML标记样式的基本语法： 选择符1 属性: 值; 属性: 值; . 选择符2 属性: 值; 属性: 值; . 其中选择符可以是任何一个HTML标记，它指定要应用该样式的 HTML元素。 在Dreamweaver MX 2004中创建HTML标记样式： 在CSS样式面板中单击“新建CSS样式”按钮 。 在“新建CSS样式”对话框中，对“选择器类型”选项选择“标签（重定义特定标签的外观）”。 从“标签”列表中选择要进行重定义的HTML标记。 通过“定义在”选项指定样式的位置。 设置“CSS样式定义”对话框选项。,2.9 使用CSS设置网页外观,第2章目录,60241,使用高级样式 1. 组合选择符 选择符1, 选择符2, .属性: 值; 属性: 值; . 例如： body, td, th, input, textarea, select font-family: “宋体“; font-size: 9pt 2. 情景选择符 情景标记 选择符 属性: 值; 属性: 值; . 其中情景标记和选择符均为一个HTML标记。 3. id选择符 #类选择符1 属性: 值; 属性: 值; . #类选择符2 属性: 值; 属性: 值; . 其中类选择符是自己指定的CSS样式名称，该名称必须以数字符“#”开头。 4. 伪类选择符 选择符:伪类 属性: 值; 属性: 值 常用伪类样式来定义网页中的超链接。此时以a标签为选择符，伪类 名称包括link、visited、hover、active，分别表示未访问的超链接、已访问 的超链接、鼠标指针指向的超链接以及活动的超链接。,2.9 使用CSS设置网页外观,第2章目录,61241,在HTML标记中设置样式 在HTML标记中直接添加CSS样式规则： . 例如： 心想事成 使用外部样式表文件 通过在文件头部添加一个link标签链接到外部样式表文件（.css）： 其中href参数指定要链接的外部样式表文件的路径。 使用导入指令import导入外部样式表： 其中URL给出要导入的外部样式表文件的路径。 在Dreamweaver MX 2004中链接或导入外部样式表文件： 在CSS样式面板中，单击“附加样式表”按钮。,2.9 使用CSS设置网页外观,第2章目录,62241,第3章 VBScript脚本编程,3.1 VBScript语言概述,3.2 VBScript基本元素,3.3 条件语句,3.4 循环语句,3.5 过程,3.6 文档对象模型,63241,第3章 VBScript脚本编程,本章的主要内容是什么？ 介绍使用VBScript语言进行程序设计的基本内容，包括 VBScript概述、VBScript基本元素、基本语句、条件语句、循环语 句、数组、过程以及文档对象模型等。 3.1 VBScript语言概述 3.1.1 什么是VBScript VBScript实际上是程序开发语言Microsoft Visual Basic的一个子 集，是基于Visual Basic的脚本编写语言，可以用于编写网页中的 客户端脚本程序或服务器端脚本程序。,第3章目录,64241,3.1 VBScript语言概述,3.1.2 HTML面向对象编程 HTML网页中的每个元素都是一个拥有属性、方法和事件的对 象，称为文档对象。例如，正文标记body、段落标记p、单元格标 记td、表单标记form都对应于一个文档对象。通过在文档中添加 input、textarea和select等标记，可以创建单行文本框、复选框、按 钮、文本区域以及列表框等HTML内部控件，这些控件都属于文档 对象。 使用VBScript编写脚本代码体现了面向对象、事件驱动的编程 思想：首先通过添加文本、表格、表单、控件等文档对象来创建 页面布局，然后通过编写脚本代码来更改页面元素的属性，当发 生文档对象的某个事件时会自动执行这些脚本代码，从而实现与 用户的交互。 通过在表单中添加内部控件，可以让用户在网页上输入并提交 数据，提交前也可以通过客户端脚本进行必要的检查或预处理， 然后发送到服务器由动态网页进行处理。,第3章目录,65241,3.1 VBScript语言概述,3.1.3 内部控件的常用属性 属性决定对象的外观和特性。属性类似于变量，不同属性可能具有不 同的数据类型。既可以用赋值语句对对象的属性赋值，也可以将某一对象 的属性赋给变量。控件是通过HTML标记创建的，既可以在HTML标记中 设置控件的属性，也可以在脚本代码中更改控件的属性。在脚本代码中引 用控件的属性时，应遵循以下语法格式： 父对象名.控件名.属性 内部控件的常用属性见表3.1。 注意： name和id属性都用于标识一个对象。若一个文档中有多个对象具有相 同的name或id，则这些对象就构成一个集合，此时通过下标来引用各个对 象。name主要用于图像、框架、表单和控件，id则用于更多的网页元素。 例如，p标记就没有name，但是它有id。,第3章目录,66241,3.1 VBScript语言概述,3.1.4 基本的HTML事件 事件是能被控件识别的动作，事件可以由用户操作、程序代码 或系统行为来触发。当触发控件的某个事件时，该控件能够按照 某种方式做出响应，但具体的响应过程需要由程序员编写脚本代 码来实现，这种过程称为事件过程。每个文档对象都拥有一个预 定义的事件集。基本的HTML事件见表3.2。,第3章目录,67241,3.1 VBScript语言概述,3.1.5 在网页中添加VBScript代码 在HTML网页中添加脚本代码时，应将代码置于script块内，语法格式： 其中language属性指定脚本代码所使用的脚本语言，对于IE浏览器来 说，该属性的取值可以是“VBScript”或“JavaScript”，前者也可以简写为 “VBS”。 说明： 将脚本代码嵌入在注释标记之间，是为了避免不能识别标记的浏览器将代码显示在页面中。 script标记可以在HTML文档的head和body部分出现任意次。大部分脚本代码放在Sub或Function过程中，仅在其他代码要调用它时执行。然而，也可以将脚本代码放在过程之外、script块之中，这类代码仅在HTML页面加载时执行一次，可以在加载Web页面时初始化数据或动态地改变页面的外观。,第3章目录,68241,3.1 VBScript语言概述,3.1.6 事件过程的调用方式 1. 通过for/event属性调用事件过程 脚本代码 2. 通过名称调用事件过程 Sub 对象名称_事件名称( 参数列表 ) 脚本代码 End Sub 3. 通过控件的属性调用事件处理过程 在script块内定义一个通用Sub过程，并通过对象的相关属性来调用该过程。 4. 在HTML标记中直接编写脚本语句 如果事件过程比较简单，也可以在定义元素的标记中直接编写脚本语 句。如果要包含多条语句，则必须用冒号（:）分开各个语句。,第3章目录,69241,3.2 VBScript基本元素,3.2.1 数据类型 在VBScript语言中，只有一种数据类型，即Variant，称为变体 型。Variant是一种特殊的数据类型，根据使用的方式，它可以包 含不同类别的信息。Variant数据可以包含数字或字符串信息。如 果使用看起来像是数字的数据，则VBScript会假定其为数字并以适 用于数字的方式来处理；如果使用的数据只可能是字符串，则 VBScript将按字符串进行处理。当然，也可以将数字包含在引号 （ “ “ ）中使其成为字符串。 Variant包含的数据子类型见表3.1。,第3章目录,70241,3.2 VBScript基本元素,3.2.2 VBScript常量 常量是在程序执行期间其值从不发生变化的数据。在VBScript 中，常量分为即普通常量和符号常量，前者无须定义即可在程序 中使用，后者则要用Const语句加以声明才能使用。 1. 普通常量 按照数据类型不同，普通常量分为字符串常量和数值常量两种。 2. 符号常量 符号常量是用一个标识符表示的常量，用于代替数字或字符串， 其值从发生不改变。在VBScript中，符号常量分为预定义符号常量 和用户自定义常量。 VBScript提供了许多预定义符号常量，在编写脚本代码时无须 声明即可直接使用。例如，vbCrLf表示回车符和换行符的组合， vbGreen表示绿色的数值。 用户自定义常量通过Const语句来创建。,第3章目录,71241,3.2 VBScript基本元素,3.2.3 VBScript变量 1. 声明变量 在VBScript中，通常使用Dim语句显式声明变量并分配存储空 间，语法格式如下： Dim 变量名, 变量名 2. 命名规则 每一个变量都必须用一个标识符来作为其名称。变量命名必须 遵循VBScript的标准命名规则。变量的命名规则为：必须以字母开 头；不能包含嵌入的句点“.”；长度不能超过255个字符；在被声明 的作用域内必须惟一；不能与VBScript关键词相同。 3. 变量的作用域与存活期 4. 给变量赋值 5. 标量变量和数组变量 6. 动态数组,第3章目录,72241,3.2 VBScript基本元素,3.2.4 VBScript运算符,第3章目录,73241,3.2 VBScript基本元素,3.2.5 基本语句 赋值语句： variable=value Set语句： Set objectvar= objectexpressio