HTML网页编程基础讲义6319.ppt

《HTML网页编程基础讲义6319.ppt》由会员分享，可在线阅读，更多相关《HTML网页编程基础讲义6319.ppt（65页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目二项目二HTML网页编程基础网页编程基础 任务一使用任务一使用HTML语言来制作网页语言来制作网页 任务二在网页中应用任务二在网页中应用JavaScript 任务三使用样式表（任务三使用样式表（CSS）来美化网页）来美化网页任务一使用任务一使用HTML语言来制作网页语言来制作网页【任务要点】【任务要点】1.使用记事本来制作使用记事本来制作HTML网页网页2.使用使用DreamWeaver来制作来制作HTML网页网页【案例【案例1】使用记事本来制作】使用记事本来制作HTML网页网页【具体步骤】（在【具体步骤】（在Windows XP中完成）中完成）（1）双击【我的电脑】图标，选择【工具】）双

2、击【我的电脑】图标，选择【工具】【文件夹选项】命令，【文件夹选项】命令，从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文件的扩展名显示出来。件的扩展名显示出来。下一页返回任务一使用任务一使用HTML语言来制作网页语言来制作网页（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】）在【桌面】上右击，在弹出的快捷菜单中选择【新建】【文本【文本文档】命令，此时会在桌面上出现文档】命令，此时会在桌面上出现“新建文本文档新建文本

3、文档.txt”文件，如文件，如图图2-2所示，将文件名改为所示，将文件名改为“index.htm”。图标会马上改为。图标会马上改为图图2-3所示所示的样式。的样式。（3）在）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】上右击，在弹出的快捷菜单中选择【打开方式】【记事本】命令，使用记事本来编缉代码文本，如【记事本】命令，使用记事本来编缉代码文本，如图图2-4所示。所示。（4）在打开的记事本中，输入以下代码：）在打开的记事本中，输入以下代码：网页标题网页标题这是我的第一个主页这是我的第一个主页下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页 要浏览这个

4、要浏览这个index.htm文件，只需在桌面上双击它，或者打开文件，只需在桌面上双击它，或者打开浏览器，选择【浏览器，选择【File】【Open】命令，然后选择这个文件就行了】命令，然后选择这个文件就行了。效果如。效果如图图2-5所示。所示。【案例【案例2】使用】使用DreamWeaver来制作来制作HTML网页网页【具体步骤】（在【具体步骤】（在DreamWeaver 8中完成）中完成）（1）在）在D盘根目录下建立文件夹并命名为盘根目录下建立文件夹并命名为website（网站）。（网站）。（2）打开）打开DreamWeaver，选择【文件】，选择【文件】【新建】【新建】【基本页】【基本页】【

5、HTML】【创建】命令，将出现【创建】命令，将出现Unitiled-1（未命名（未命名1）的页面，）的页面，如如图图2-6所示。所示。下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页（3）选择【文件】）选择【文件】【保存】命令，在弹出的【另存为】对话框的【保存】命令，在弹出的【另存为】对话框的【保存在】下拉列表框中，选择第一步建立的文件夹保存在】下拉列表框中，选择第一步建立的文件夹website，在【，在【文件名】下拉列表框中输入文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。，然后单击【确定】按钮。（4）在上半部分的代码区的）在上半部分的代码区的内，

6、输入内，输入“我的第一个首页我的第一个首页”，在，在内，输入内，输入“此处显示网页的主体内容此处显示网页的主体内容”。（5）按）按F12键运行网页，得到键运行网页，得到图图2-7所示的网页。所示的网页。下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页【案例【案例3】在】在DreamWeaver中进行站点发布中进行站点发布【具体步骤】【具体步骤】（1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹出【计算机管理】对话框，选择【出【计算机管理】对话框，选择【Internet信息服务】信息服务】【网站】【网站

7、】【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】【虚拟目录】【虚拟目录】【下一步】命令，如【下一步】命令，如图图2-8图图2-10所示。所示。（2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】）在【别名】文本框中填入要给网站起的别名后，单击【下一步】按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮，按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮，选择选择D:website【下一步】【下一步】【下一步】【下一步】【完成】命令，如【完成】命令，如图图2-11和图和图2-12所示。所示。下一页返回上一页任务一使用

8、任务一使用HTML语言来制作网页语言来制作网页（3）打开）打开IE浏览器，在【地址】栏中输入浏览器，在【地址】栏中输入http:/localhost/webtest/index.htm即可，出现如即可，出现如图图2-13所示的页面。所示的页面。（4）打开）打开DreamWeaver，选择【站点】，选择【站点】【新建站点】命令，在弹出【新建站点】命令，在弹出的对话框中打开【高级】选项卡，按照步骤（的对话框中打开【高级】选项卡，按照步骤（5）、（）、（6）、（）、（7）分别完成【本地信息】、【远程信息】、【测试服务器】的配置分别完成【本地信息】、【远程信息】、【测试服务器】的配置就可以了，如就可以

9、了，如图图2-14所示。所示。（5）在【本地信息】中，在【站点名称】文本框中给站点起名为）在【本地信息】中，在【站点名称】文本框中给站点起名为myWebsite，将【本地文件夹】设置为，将【本地文件夹】设置为D:website，如，如图图2-15所示。所示。（6）在【远程信息】中，将【访问】下拉列表框中的值设置为）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地本地/网络网络”，将【远程文件夹】设置为，将【远程文件夹】设置为“D:website”，并对应图将复选，并对应图将复选框进行勾选，如框进行勾选，如图图2-16所示。所示。下一页返回上一页任务一使用任务一使用HTML语言来制作网页

10、语言来制作网页（7）在【测试服务器】中，将【服务器模型】设置为）在【测试服务器】中，将【服务器模型】设置为“ASP JavaScript”，将【访问】设置为，将【访问】设置为“本地本地/网络网络”，在【，在【URL前缀】中前缀】中的的http:/localhost/后加上后加上“webtest”，结果如，结果如图图2-17所示。所示。下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页【背景知识】【背景知识】一、一、HTML概述概述 HTML是是Hypertext Marked Language的简写，即超文本标的简写，即超文本标记语言，是一种用来制作超文本文档的简单标记语

11、言。超文本传记语言，是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的文档时所遵循的规则和进行的操作。操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则协议的制定使浏览器在运行超文本时有了统一的规则和标准，用和标准，用HTML编写的超文本文档称为编写的超文本文档称为HTML文档，它能独立文档，它能独立于各种操作系统平台，自于各种操作系统平台，自1990年以来年以来HTML就一直被用作就一直被用作（World Wide Web，也可称为，也可称为Web，中文叫做万维网）的信息表，中文叫做万维网）的信息表示语

12、言，使用示语言，使用HTML语言描述的文件，需要通过语言描述的文件，需要通过Web浏览器显示浏览器显示出效果。出效果。下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页 所谓超文本，是因为它可以加入图片、声音、动画、影视等所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个内容，事实上每一个HTML文档都是一种静态的网页文件，这个文档都是一种静态的网页文件，这个文件里面包含了文件里面包含了HTML指令代码，这些指令代码并不是程序语言，指令代码，这些指令代码并不是程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，它只是一种排版网页中资料显

13、示位置的标记结构语言，易学易懂，非常简单。非常简单。HTML的普遍应用就是带来了超文本的技术，即通过的普遍应用就是带来了超文本的技术，即通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接，直接获取相关的主题。个页面，与世界各地主机的文件链接，直接获取相关的主题。HTML只是一个纯文本文件。创建一个只是一个纯文本文件。创建一个HTML文档只需要两文档只需要两个工具，一个是个工具，一个是HTML编辑器，另一个是编辑器，另一个是Web浏览器。浏览器。HTML编编辑器是用于生成和保存辑器是用于生成和保存H

14、TML文档的应用程序。文档的应用程序。Web浏览器是用浏览器是用来打开来打开Web网页文件，提供给用户查看网页文件，提供给用户查看Web资源的客户端程序。资源的客户端程序。下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页二、二、HTML的基本结构的基本结构 一个一个HTML文档是由一系列的元素和标签组成的，元素名不文档是由一系列的元素和标签组成的，元素名不区分大小写。区分大小写。HTML用标签来规定元素的属性和它在文件中的位用标签来规定元素的属性和它在文件中的位置，置，HTML超文本文档分文档头和文档体两部分，在文档头里，超文本文档分文档头和文档体两部分，在文档头里，对

15、这个文档进行了一些必要的定义，文档体中才是要显示的各种对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。文档信息。下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页下面是一个最基本的下面是一个最基本的HTML文档的代码：文档的代码：-|开始标签开始标签 -|头部标签开始头部标签开始 一个简单的一个简单的HTML示例示例 -|Title标签对用来在标题栏内显示网页主题标签对用来在标题栏内显示网页主题 -|头部标签结果头部标签结果 -|主体开始主体开始 这是网页的文档的显示部分（大部分代码是在这个标签对里面的）这是网页的文档的显示部分（大部分代码是在这个标签对

16、里面的）-|主体结束主体结束-|结尾标签结尾标签下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页三、三、HTML的标签与属性的标签与属性 对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用“”括起来的句子，称之为标签，它是用来控制文本的布局、括起来的句子，称之为标签，它是用来控制文本的布局、文字的格式以及五彩缤纷的页面。标签通过指定某块信息为段落文字的格式以及五彩缤纷的页面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项，或标题等来标识文档某个部件。属性是标志里的参数的选项，HTML的

17、标签分单标签和成对标签两种。成对标签是由首标签（的标签分单标签和成对标签两种。成对标签是由首标签（）和尾标签（）和尾标签（）组成的，成对标签的作用域只）组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式的（作用于这对标签中的文档。单独标签的格式的（），单），单独标签在相应的位置插入元素就可以了，大多数标签都有自己的独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性一些属性,属性要写在首标签内，属性用于进一步改变显示的效果属性要写在首标签内，属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用各属性之间无先后次序，属性是可选的，属性也

18、可以省略而采用默认值；其格式如下：默认值；其格式如下：内容内容下一页返回上一页任务一使用任务一使用HTML语言来制作网页语言来制作网页 作为一般的原则，大多数属性值不用加双引号。但是包括空作为一般的原则，大多数属性值不用加双引号。但是包括空格、等特殊字符的属性值必须加双引号。为了培养良好的格、等特殊字符的属性值必须加双引号。为了培养良好的习惯，提倡对属性值全部加双引号。如：习惯，提倡对属性值全部加双引号。如：字体设置字体设置四、常用标记（四、常用标记（tag）及属性的英文识记）及属性的英文识记常用标记及属性的英文识记见常用标记及属性的英文识记见表表2-1。返回上一页任务二在网页中应用任务二在网

19、页中应用JavaScript【任务要点】【任务要点】1.学会事件驱动（处理）的编程思想学会事件驱动（处理）的编程思想2.掌握对象及对象的事件、方法、属性掌握对象及对象的事件、方法、属性3.掌握基于对象化的编程掌握基于对象化的编程【案例【案例1】应用】应用JavaScript事件、属性、方法来制事件、属性、方法来制作网页作网页【具体步骤】【具体步骤】（1）在）在DreamWeaver中新建一个网页，命名为中新建一个网页，命名为index.htm，并保存在，并保存在D:website中。中。（2）打开）打开index.htm，并在其代码框的，并在其代码框的标签对中输入以标签对中输入以下代码，如下代

20、码，如图图2-21所示。所示。下一页返回任务二在网页中应用任务二在网页中应用JavaScript【案例【案例2】应用】应用JavaScript内置对象来制作网页内置对象来制作网页【具体步骤】【具体步骤】（1）如前所述，在）如前所述，在D:website中使用中使用DreamWeaver建立一个页面，并建立一个页面，并命名为命名为default.htm。（2）在）在DreamWeaver中，选择【文件】中，选择【文件】【新建】命令，在弹出的对【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，单击【创建话框中的【常规】选项卡中，选择【基本页】选项，单击【创建】按钮，并命名为】按

21、钮，并命名为default.html。（3）在）在标签对中输入以下代码，如标签对中输入以下代码，如图图2-22所示。所示。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript（4）继续在）继续在DreamWeaver中进行操作，选择【文件】中进行操作，选择【文件】【新建】命令，【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，单击【创建】按钮，并命名为单击【创建】按钮，并命名为default1.html。（5）在）在内输入文字内输入文字“这是弹出的一个通知窗口这是弹出的一个通知窗口”，如，如图图2-

22、23所示。所示。（6）在）在DreamWeaver中，选择【文件】中，选择【文件】【新建】命令，在弹出的对【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，单击【创建话框中的【常规】选项卡中，选择【基本页】选项，单击【创建】按钮，并命名为】按钮，并命名为default2.html。（7）在）在内输入代码，如内输入代码，如图图2-24所示。所示。（8）按照前面所学的知识，在）按照前面所学的知识，在DreamWeaver中设置站点，并在中设置站点，并在IIS中中设置设置Web站点发布。站点发布。（9）运行结果如）运行结果如图图2-25所示。所示。下一页返回上一页任务二在网页中应

23、用任务二在网页中应用JavaScript（10）单击【单击我，仔细查看标题样和窗口内容】按钮，可得到如）单击【单击我，仔细查看标题样和窗口内容】按钮，可得到如图图2-26所示的页面。所示的页面。（11）在如）在如图图2-25所示的页面中点击所示的页面中点击“跳转到跳转到default2.html”超链接，得超链接，得到如到如图图2-27所示的页面。所示的页面。（12）在）在图图2-27中，点击中，点击“返回到返回到default.html”超链接，就回到超链接，就回到图图2-26所示的页面。所示的页面。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript【背景知识】【背景知

24、识】JavaScript是一种新的描述性语言，可以被嵌入到是一种新的描述性语言，可以被嵌入到HTML文件文件之中。这是一种基于对象和事件驱动并具有安全性能的脚本语言。之中。这是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是使使用它的目的是使HTML与与JavaScript语言一样实现与语言一样实现与Web客户进客户进行交互，从而可以开发客户端的应用程序等。行交互，从而可以开发客户端的应用程序等。JavaScript的出现使的出现使得信息和用户之间不仅只是一种显示和浏览的关系，而且实现了得信息和用户之间不仅只是一种显示和浏览的关系，而且实现了一种实时的、动态的、可交互式的表达能力

25、。一种实时的、动态的、可交互式的表达能力。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript一、事件一、事件 事件定义了用户与事件定义了用户与Web页面交互时产生的各种操作。简单地说，页面交互时产生的各种操作。简单地说，点击一个超链接或按钮，就会产生一个事件，告诉浏览器发生了点击一个超链接或按钮，就会产生一个事件，告诉浏览器发生了需要进行处理的单击操作。事件不仅可以在用户交互过程中产生，需要进行处理的单击操作。事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可能产生事件。比如说，浏览器载而且浏览器自己的一些动作也可能产生事件。比如说，浏览器载入一个网页时，就会

26、产生一个入一个网页时，就会产生一个Load事件。事件。在在JavaScript中对象事件的处理通常由函数中对象事件的处理通常由函数Function来担任，来担任，其基本格式与函数完全一样，格式如下：其基本格式与函数完全一样，格式如下：Function事件处理名（参数表）事件处理名（参数表）事件处理语句集事件处理语句集下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript下面介绍常用事件及处理。下面介绍常用事件及处理。1.浏览器事件浏览器事件（1）Load事件事件 当文档载入时，产生该事件。当文档载入时，产生该事件。onLoad的一个作用就是在首次的一个作用就是在首次载入一个文

27、档时检测载入一个文档时检测Cookie的值，并用一个变量为其赋值，使它的值，并用一个变量为其赋值，使它可以被源代码使用。可以被源代码使用。（2）unLoad事件事件 当当Web页面退出（关闭或转向另一个页面）时会引发页面退出（关闭或转向另一个页面）时会引发onUnload事件，并可更新事件，并可更新Cookie的状态。的状态。（3）Submit事件事件 Submit事件在完成信息的输入，准备将信息提交给服务器处事件在完成信息的输入，准备将信息提交给服务器处理时发生，理时发生，onSumbit句柄在句柄在Submit事件发生时由事件发生时由JavaScript自动调自动调用执行。用执行。onSu

28、bmit句柄通常在标记中声明。句柄通常在标记中声明。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript2.鼠标事件鼠标事件 鼠标事件是常见的事件，经常用到有鼠标事件是常见的事件，经常用到有onClick、onMouseDown、onMouseOver、onMouseOut等。等。3.文本框事件文本框事件 在文本框事件中有很多事件，下面主要介绍在文本框事件中有很多事件，下面主要介绍onChange、onSelect、onFocus、onBlue四种事件。四种事件。onChange事件，当利用事件，当利用Text或或TextArea元素输入字符值改变元素输入字符值改变时会引发

29、该事件，同时，当在时会引发该事件，同时，当在Select表格项中的一个选项状态改变表格项中的一个选项状态改变后也会引发该事件。后也会引发该事件。OnSelect事件，当事件，当Text或或Textarea对象中的文对象中的文字被加亮（选中）后，引发该事件。获得焦点事件字被加亮（选中）后，引发该事件。获得焦点事件onFocus，当用，当用户单击户单击Text或或TextArea以及以及Select对象时，产生该事件。此时该对对象时，产生该事件。此时该对象成为前台对象。失去焦点事件象成为前台对象。失去焦点事件onBlur，当，当Text对象或对象或TextArea对对象以及象以及Select对象不

30、再拥有焦点、而退到后台时，引发该文件，它对象不再拥有焦点、而退到后台时，引发该文件，它与与onFocas事件是一个对应的关系。事件是一个对应的关系。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript二、内置对象二、内置对象 JavaScript的一个重要功能是基于对象功能。的一个重要功能是基于对象功能。JavaScript的内的内置对象极大地简化了置对象极大地简化了JavaScript程序设计，使其可以用更直观、模程序设计，使其可以用更直观、模块化和可重用的方式进行程序开发。它支持开发对象模型并可将块化和可重用的方式进行程序开发。它支持开发对象模型并可将这些类型实例化，创

31、建对象实例。这些类型实例化，创建对象实例。JavaScript中的对象由属性和方中的对象由属性和方法两个基本元素构成。属性是对象在实施其行为的过程中，实现法两个基本元素构成。属性是对象在实施其行为的过程中，实现信息的装载单位，从而与变量相关联。方法是指对象能够按照设信息的装载单位，从而与变量相关联。方法是指对象能够按照设计者的意图而被执行，从而与特定的函数关联。计者的意图而被执行，从而与特定的函数关联。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript 一般来说，一般来说，JavaScript对象具有以下对象：对象具有以下对象：Windows、Document、Histo

32、ry、Navigator、Location、Date、Math、Array、Boolean、Number、String等。等。Windows对象包括许多属性、方法和事件，可以利用这些对对象包括许多属性、方法和事件，可以利用这些对象控制浏览器窗口显示的各个方面。象控制浏览器窗口显示的各个方面。Document可用于输出，主要有可用于输出，主要有write()和和writeln()，主要用来，主要用来实现在实现在Web页面上显示输出信息。页面上显示输出信息。History对象是指浏览器的浏览地址，对象是指浏览器的浏览地址，History对象中常用的方对象中常用的方法包括法包括back()、forw

33、ard()和和go()。back()和和forward()主要实现页面主要实现页面的后退和前进，的后退和前进，go()用来进入指定的界面。用来进入指定的界面。Navigator对象可用来存取浏览器的相关信息，浏览器对象对象可用来存取浏览器的相关信息，浏览器对象Navigator中包括的常用属性有浏览器的名称、版本、代码名称、中包括的常用属性有浏览器的名称、版本、代码名称、Cookie功能是否打开等。功能是否打开等。下一页返回上一页任务二在网页中应用任务二在网页中应用JavaScript Location对象是当前网页的对象是当前网页的URL地址，可以使用地址，可以使用Location对对象来打

34、开网页，象来打开网页，Location对象中常用的方法包括对象中常用的方法包括reload()，replace。Reload()相当于相当于IE浏览器上的浏览器上的“刷新刷新”功能。功能。Replace()打开一个打开一个URL，并取，并取代历史对象中当前位置的地址。代历史对象中当前位置的地址。JavaScript没有时间类型，但可以用没有时间类型，但可以用Date对象及其方法来取得对象及其方法来取得日期和时间。日期和时间。Date对象有许多方法来设置、提取和操作时间，它对象有许多方法来设置、提取和操作时间，它没有任何属性。没有任何属性。预定义的预定义的Math对象具有数学常量和函数的属性和方

35、法。同样对象具有数学常量和函数的属性和方法。同样地，标准的数学函数也是地，标准的数学函数也是Math对象的方法。与别的对象不同，不对象的方法。与别的对象不同，不能自己创建一个能自己创建一个Math对象，所有的对象，所有的Math对象都是预定义的。对象都是预定义的。JavaScript可以使用预定义的可以使用预定义的Array对象及其方法提供对创建对象及其方法提供对创建任何数据类型的支持。数组是一套数值的序列，它由一个名字和任何数据类型的支持。数组是一套数值的序列，它由一个名字和索引所组成。创建数组有两种方法来定义一个数组。索引所组成。创建数组有两种方法来定义一个数组。下一页返回上一页任务二在网

36、页中应用任务二在网页中应用JavaScript Boolean对象是数据类型的包装器。每当对象是数据类型的包装器。每当Boolean数据类型转数据类型转换为换为Boolean对象时，对象时，JavaScript都隐含地使用都隐含地使用Boolean对象。对象。Number对象代表数值数据类型和提供数值常数的对象。对象代表数值数据类型和提供数值常数的对象。Number对象最主要的用途是将其属性集中到一个对象中，以及使对象最主要的用途是将其属性集中到一个对象中，以及使数字能够通过数字能够通过toString方法转换为字符串。方法转换为字符串。String对象可用于处理或格式化文本字符串，以及确定和

37、定对象可用于处理或格式化文本字符串，以及确定和定位字符串中的子字符串。不要将它同字符串常量相混淆。用户可位字符串中的子字符串。不要将它同字符串常量相混淆。用户可以在一个字符串常量中调用任何以在一个字符串常量中调用任何String对象方法，对象方法，JavaScript自动自动将字符串常量转换为一个临时的将字符串常量转换为一个临时的String对象并调用其方法，然后丢对象并调用其方法，然后丢弃该临时的弃该临时的String对象。用户也可以在一个字符串常量中使用对象。用户也可以在一个字符串常量中使用String.length等属性。等属性。预定义的预定义的function对象指定一个对象指定一个J

38、avaScript字符串码，它可以字符串码，它可以像函数一样进行编译。像函数一样进行编译。返回上一页任务三使用样式表（任务三使用样式表（CSS）来美化网页）来美化网页【任务要点】【任务要点】1.使用内部样式表美化网页使用内部样式表美化网页2.使用外部样式表美化网页使用外部样式表美化网页【案例【案例1】使用内部样式表对网页的字体、字号、字色、字样进行美化设置使用内部样式表对网页的字体、字号、字色、字样进行美化设置【具体步骤】【具体步骤】（1）如前所述，在）如前所述，在D:website中使用中使用DreamWeaver建立一个页面，并建立一个页面，并命名为命名为cssTest1.htm。（2）打

39、开）打开cssTest1.htm页面，并将方框内的页面，并将方框内的CSS代码（代码（标记内的代码）加入到代码编辑区，如标记内的代码）加入到代码编辑区，如图图2-28所示。所示。下一页返回任务三使用样式表（任务三使用样式表（CSS）来美化网页）来美化网页（3）继续将方框内的代码放入）继续将方框内的代码放入标记内，如标记内，如图图2-29所示。所示。（4）在）在DreamWeaver中按中按F12键，即可得到键，即可得到图图2-30所示的结果。所示的结果。【案例【案例2】使用外部样式表对网页的字体、字号、字色、字样进行美化设置使用外部样式表对网页的字体、字号、字色、字样进行美化设置【具体步骤】【

40、具体步骤】（1）如前所述，在）如前所述，在D:website中使用中使用DreamWeaver建立一个页面，并建立一个页面，并命名为命名为cssTest2.htm。下一页返回上一页任务三使用样式表（任务三使用样式表（CSS）来美化网页）来美化网页（2）在）在DreamWeaver中，选择【文件】中，选择【文件】【新建】命令，在弹出的对【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】话框中的【常规】选项卡中，选择【基本页】【CSS】选项，单】选项，单击【创建】按钮，得到如击【创建】按钮，得到如图图2-31所示。所示。（3）选择【文件】）选择【文件】【保存】命令，在弹出的【另存为】

41、对话框的【保存】命令，在弹出的【另存为】对话框的【文件名】下拉列表框中输入文件名】下拉列表框中输入cssTest2.css，然后单击【保存】按钮。，然后单击【保存】按钮。（4）在）在cssTest2.css文件中，并将文件中，并将CSS代码加入到编辑区中去，如代码加入到编辑区中去，如图图2-32所示。所示。（5）切换到）切换到cssTest2.htm页面，将方框内的代码，加入到网页中，如页面，将方框内的代码，加入到网页中，如图图2-33所示。所示。（6）仍然在）仍然在cssTest.htm页面，在页面，在DreamWeaver的右侧窗口中（如的右侧窗口中（如图图2-34所示），单击链接按钮，弹

42、出【链接外部样式表】对话框，如所示），单击链接按钮，弹出【链接外部样式表】对话框，如图图2-35所示。所示。下一页返回上一页任务三使用样式表（任务三使用样式表（CSS）来美化网页）来美化网页（7）单击【浏览】按钮，在）单击【浏览】按钮，在D:website目录中选择目录中选择cssTest.css即可，出即可，出现现图图2-36所示椭圆内的代码。所示椭圆内的代码。【背景知识】【背景知识】1996年底的时候悄悄诞生了一种叫做样式表（年底的时候悄悄诞生了一种叫做样式表（stylesheets）的技术。它向世人保证：将对布局、字体、颜色、背景和其他文的技术。它向世人保证：将对布局、字体、颜色、背景和

43、其他文图效果实现更加精确的控制。只通过修改一个文件就改变页数不图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。能在所有浏览器和平台之间实现兼容。计的网页的外观和格式。能在所有浏览器和平台之间实现兼容。实际上除了还不能全面支持常用的大多数浏览器之外，实际上除了还不能全面支持常用的大多数浏览器之外，CSS在实现在实现其他承诺方面做得相当出色。现在，先来了解样式表能做什么。其他承诺方面做得相当出色。现在，先来了解样式表能做什么。下一页返回上一页任务三使用样式表（任务三使用样式表（CSS）来美化网页）来美化网页CSS样式表有什么特别之处样式表有什么特别之处?简而言之简而言

44、之,它能做以下事情。它能做以下事情。用户可以将格式和结构分离；用户可以将格式和结构分离；用户可以以前所未有的能力控制页面布局；用户可以以前所未有的能力控制页面布局；用户可以制作体积更小下载更快的网页；用户可以制作体积更小下载更快的网页；用户可以将许多网页同时更新，比以前更好、更快、更容易；用户可以将许多网页同时更新，比以前更好、更快、更容易；浏览器将成为更友好的界面。浏览器将成为更友好的界面。利用利用CSS样式表可以将格式和结构分离。样式表可以将格式和结构分离。利用利用CSS样式表使用户可以以前所未有的能力控制页面的布局。样式表使用户可以以前所未有的能力控制页面的布局。利用利用CSS样式表使用

45、户可以制作出体积更小下载更快的网页。样式表使用户可以制作出体积更小下载更快的网页。利用利用CSS样式表使用户可以更好、更快、更容易地维护及更新大量的样式表使用户可以更好、更快、更容易地维护及更新大量的网页。网页。返回上一页表表2-1常用标记及属性的英文识记常用标记及属性的英文识记返回图图2-2新建文本文档新建文本文档.txt返回图图2-3 index.htm返回图图2-4“记事本记事本”命令命令返回图图2-5程序运行效果程序运行效果返回图图2-6 Unitiled-1页面页面返回图图2-7运行结果运行结果返回图图2-8“管理管理”命令命令返回下一页图图2-9选择【选择【Internet信息服务

46、】命令信息服务】命令返回下一页上一页图图2-10选择【虚拟目录】命令选择【虚拟目录】命令返回上一页图图2-11设置别名设置别名返回图图2-12选择目录路径选择目录路径返回图图2-13显示页面显示页面返回图图2-14“高级高级”选项卡选项卡返回图图2-15设置本地信息设置本地信息返回图图2-16设置远程信息设置远程信息返回图图2-17设置测试服务器设置测试服务器返回图图2-21输入代码输入代码返回图图2-22输入代码输入代码返回图图2-23输入文字输入文字返回图图2-24输入代码输入代码返回图图2-25运行结果（运行结果（1）返回图图2-25运行结果（运行结果（1）返回图图2-26运行结果（运行结果（2）返回图图2-27运行结果（运行结果（3）返回图图2-28输入代码（输入代码（1）返回图图2-29输入代码（输入代码（2）返回图图2-30运行结果运行结果返回图图2-31新建页面新建页面返回图图2-32加入代码（加入代码（1）返回图图2-33加入代码（加入代码（2）返回图图2-34 Dream Weaver右侧窗口右侧窗口返回图图2-35【链接外部样式表】对话框【链接外部样式表】对话框返回图图2-36加入代码（加入代码（3）返回