第一列标题	第二列标题	第三列标题
第一列	第二列	第三列


具有 width、colspan、rowspan 和 nowrap 属性。width 是格子的宽度，单位用绝对像素值或总宽度的百分比；colspan 设置一个表格格子跨占的列数(缺省值为 1)；rowspan 设置一个表格格子跨占的行数(缺省值为 1)；nowrap 禁止表格格子内的内容自动断行。重难点: 通栏的表的说明 1、有横向通栏的表用	属性说明 colspan 表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 2、有纵向通栏的表用 rowspan=#属性说明。 rowspan 表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用

	标志是一致的。

Lunch
Food	Drink	Sweet
A	B	C

意大利	英格兰	西班牙
佛罗伦萨	曼联	纽卡斯尔	巴塞罗那	皇家社会
尤文图斯	桑普多利亚	利物浦	阿森纳	皇家马德里	……
拉齐奥	国际米兰	切尔西	米德尔斯堡	马德里竞技	……

。那么你只需要将定义部分的 h1.xinwen 改为.xinwen，即去掉 h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。修改代码中的样式，在浏览器中看看修改之后的网页，“新闻的内容”也应用了 xinwen 类的样式。（3）class(类)与 id 的区别 class 和 id 看起来除了一个和#的区别之外，无论在定义上还是在应用上似乎都是一模一样啊？然而事实上并不如此，同一 id 在一个页面内只能应用一次，而 class 则是用于描述多次出现的元素。这从它们的名称上很容易理解。id 就类似元素的身份证号码，它必须是唯一的，而 class 则是一类具有共同属性的元素的合称，是一类。如果你试图在一个页面内多次使用同一个 id，页面通常是可以正常显示的。但是这会给后期的维护带来不便，还可能造成其它的问题。所以我们一定要区分开 id 和 class，并且合理的应用它们。（4）包含选择符包含选择符是指：标记 1 里包含标记 2，如果只想定义标记 2 的样式，并且这种样式只对在标记 1 里的标记 2 中有效，对单独的标记 1 或标记 2 无定义，例如： Table a { font-size: 12px } 在表格内的链接改变了样式，文字大小为 12 象素，而表格外的链接的文字仍为默认大小。 4.5 样式表加入网页方式在上两节中我们已经为网页添加过简单的样式表了，我们也了解了样式表的语法基础。本节将介绍将样式表加入到页面中的几种不同方法。 4.5.1 内部样式表其实我们在前两节已经应用了内部样式表。内部样式表需要在网页的部分定义，格式如下： 4.5.2 行内样式表(内嵌样式表) 它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义，使用 style 属性，写法如下： <标签 style="符合 CSS 语法结构的 CSS 语句"> 例如：

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面新闻的标题 1

的属性为 Block，所以文本、列表、图片都在不同的位置上打开， Inline 属性使文本不折行，list-style-type 的属性值为 square 使列表项前的符号为方块；如果我们在上面的代码中做一些改动，则将以另一种效果显示，我们在中把“EM”的 display 属性值改为 block ，使其都在新的位置打开； li 的 “ list-style ” 属性值改为 “Upper-roman”（大写罗马符号），img 的“display”属性值改为“none”（让图片不显示）。修改后的显示效果如下图： 57 编程改变生活励志照亮人生 4.9 div 和 span div 和 span 是 XHTML 中比较特殊的标签。结合 CSS 他们可以实现许多方便的功能。 4.9.1 div 和 span 是什么意思? 相对与其他 XHTML 标签，div 和 span 对于它们包含的元素是没有意义的。例如当你看到

案例源代码如下：我真惨!被用来演示 CSS!

我在 div 内，类为 boxhead

我在 div 内

在上面的例子中，我们首先在页面内放了一个 class 为 box 的 div，而在它的内部又放了一个 class 为 boxhead 的 div。为了便于观察，我们为 div 添加了背景颜色。下面我们来看看对这两个 div 定义的前面教程中没有的属性：对 box 的属性：width: 30%;表示这个 box div 占页面宽度的 30%，而浮动属性 float: left; 则表示 box div 浮动在页面的左侧。对 boxhead 的属性：width: 100%;由于 boxhead div 在 box div 之内，那么这里的 100%是指 box 的宽度。 4.9.3 行级标签(行内标签) 案例本实例在上面实例的基础之上，只修改一段文本的颜色。修改如下代码：将第一个“

我在 div 内

”修改为：

我在 div 内，也在 span 内，属性为 box。

4.10 盒子(box) CSS 盒子(CSS box)又称为 CSS 盒模式，是 CSS 非常重要的一部分。尤其在网页的布局中更是必不可少的。首先要清楚，CSS 中没有 box 这个属性。CSS 的盒子(box)是由以下几个部分组成的：内容(content)、填充(padding)、边框(border)和边界(margin)。 4.10.1 CSS 边框(border) 本节的实例均在上一节的例子基础上修改。首先我们来为上一节的 box div 添加边框。代码修改如下： .box { background-color: #EEFAFF; width: 30%; float: left; border: 1px solid #000000; } 查看修改后的页面，可以看到 box 的外边多了一条 1 像素宽的黑色实线边框。在 border: 1px solid #000000;一句中，我们一起为 border 指定了三个属性值，其实它等效与下面的 CSS 语句： border-style:solid; border-color:#000000; border-width:1px; 59 编程改变生活励志照亮人生其实 CSS 中还有一些属性支持这样的写法，比如之前学过的 font。但是这里暂不介绍。下面让我们来看看如何控制某一侧的边框属性。我们为 boxhead div 添加一个 1 像素的虚线下侧边框。修改的代码如下： .boxhead { font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; } 上面的例子只用到了两种边框，下面来看看其它几种样式的边框。

边框属性列表： 4.10.2 CSS 填充属性(padding) 填充属性定义的是内容(content)与边框(border)的距离，下面我们来为 boxhead div 添加一个 5 像素的填充。 boxhead { 60 赛杰 IT 教育中心 font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; padding:5px; } 看看修改之后的页面，是不是 boxhead div 中的内容距离边框有了一段距离？与边框属性 (border)一样，填充属性(padding)也可以只设定某一边。例如：padding-left、padding-bottom。填充距的属性列表： 4.10.3 CSS 边界属性(marging) 为了更好的理解边界(marging)属性，我们现在试着为网页多添加几个 box，也就是复制几个

…

内容，然后再看看网页的外观。你会发现 box 都连在了一起，也许你不喜欢这样的布局。那么我们就为它们设置边界属性，需要修改的代码如下： .box { background-color: #EEFAFF; width: 30%; float: left; border: 1px solid #000000; margin:5px; } 修改之后的页面所有的 box 之间都有了 5 个像素的间隔，这就是边界属性的作用。当然了，边界属性与其他两个构成盒子的属性一样都可以单独定义某一个方向。边距属性的详细列表：至此，我们已经了解了构成盒子的几个元素。不过想要完全的掌握盒子的还需要不断的实践， 61 编程改变生活励志照亮人生尤其是想要完全用盒子来取代 table 定位的朋友更是要花一定的时间在实践练习上。 4.11 定位(positon) CSS 定位在网页布局中是起着决定性作用。 CSS 的定位功能是很强大的，利用它你可以做出各种各样的网页布局。 4.11.1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动。 …… ……

我是一段正常的文本

我本来应该在它的正下方，可是 relative 相对定位让我在正常位置的基础上向右移动了 50 个像素。

…… 4.11.2.绝对定位(absolute) 绝对定位非常好理解，你指定元素出现的坐标(x,y)，然后它就准确无误地显示在那里。我真惨!被用来演示 CSS! 62 赛杰 IT 教育中心

CSS

绝对定位

定位中使用的 left 属性表示元素距离左侧的距离，而 top 属性表示距离上方的位置。如果用坐标系来理解的话 left 就是横坐标 x，而 top 就是纵坐标 y。绝对定位会按照我们给定的坐标 x，y 来准确地定位你一个元素。但是问题在于，坐标系的原点在哪里呢？答案就是父元素。上例中，class 为"dingwei2"的元素设置为绝对定位，它的父元素为 body，所以它其实是相对 body 位置来定位的的。如果有如下代码：

段落正文 强调文字

若给 strong 元素设置绝对定位，那么坐标原点将会是父元素 p 的位置。定位属性的详细列表（见下图）：尽管定位的语法非常简单，但是它的功能强大和实用是不容置疑的，合理地使用定位和盒子可以实现网页布局等等。 4.12 链接(a) 改变链接的样式几乎在任何使用 CSS 的网站中都可以看到。对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了 CSS 之后我们就不用担心了。下面就看看如何修改网页的链接样式。 4.12.1.改变整个页面的链接样式。就是上面的这段 CSS 代码改变了页面的链接样式。其中 a:link、a:visited、a:hover 和 a:active 分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这段代码看起来很简单，但是一定要注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。下面再来看看如何只更改部分页面的链接样式。 4.12.2.只改变局部的链接样式。我们只要在链接样式的定义前面加上相应 class 或者 id 即可。例如本页面导航部分的 id 是 navbar，那么定义的语句就应该是： #nvbar a:link { color: #003366; text-decoration: none; } #nvbar a:visited { text-decoration: none; color: #000000; } #nvbar a:hover { color: #FFFFFF; background-color:#FF0000; } #nvbar a:active { text-decoration: none; } 这样链接样式的定义就只对 id 为 nvbar 的内容起作用了。相应的，如果你希望这些链接的样式只对某个类起作用只要上面的#nvbar 替换成该类即可。例如只对 class 为 rightbox 的内容起作用，那么就可以定义为： .rightbox a:link { color: #003366; text-decoration: none; } …… 假设我们现在有一个页面，它使用了上面的 CSS 代码。页面中有一个链接，它的代码如下：失望啊如果你一直尝试着跟着本节教程，自己书写代码，那么预览结果一定会令你失望的，因为它的样式根本就没有改变。而如果将链接的代码改为：

可以了

这次 CSS 正常工作了。也就是说我们必须有一个 id 为“nvbar”的 div 或者是 p 之类的标签， 64 赛杰 IT 教育中心然后包含在它里面的链接标签 a 的样式才会受到影响。为了更好的理解这种方法，我们再来看一个例子。我真惨!被用来演示 CSS!

【课堂收获】 65 【上机手册】试着用三种方式写出以下样式文字有黑色的背景，字体为白色编程改变生活励志照亮人生参考代码：样式表范例

样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善 WEB 的展示样式来为自己的网页加入创新的动力，于是开始使用 NETSCAPE 或者 IE 专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。

66 赛杰 IT 教育中心第五章使用 Dreamweaver 制作网页【学习目标】 � 会用 Dreamweaver 工具实现已学的图像、文本、列表标签 � 会用 Dreamweaver 工具实现已学的表格 � 会用 Dreamweaver 工具实现已学的表单 � 会用 Dreamweaver 工具实现已学的框架 � 会用 Dreamweaver 工具实现已学的样式表【本章简介】本章开始讲解使用 Dreamweaver 制作网页，其中重点是使用 Dreamweaver 实现各类 HTML 标签和 CSS 样式，难点是如何制作样式。为了使我们制作的页面更规整我们还要研究使用 Dreamweaver 如何实现表格对图文进行布局、表格对表单进行布局和框架页面。【理论课堂】 5.1 工具介绍 1、启动界面在安装 DW MX 2004 之后，它会自动在 Windows 的【开始】菜单中创建程序组。单击【开始】>【所有程序】>【Macromedia】 >【Macromedia Dream weaver MX 2004】菜单项。图 5-1-01 为 DW MX 2004 的启动界面。（图 5-1-01）另一个更常用的方法是直接启动 DW MX 2004 并载入要编辑的 HTML 文档，可以选中要编辑的 HTML 文件图标，然后单击鼠标右键，打开快捷菜单，选择【使用 Dreamweaver MX 2004 编辑】命令。 2. Dreamweaver MX 的工作界面 DW MX 2004 的工作界面如图 5-1-02 所示，包括标题栏、菜单栏、插入栏、文档工具栏、文档窗口、面板组以及属性面板等。（1）菜单栏菜单栏由 DW MX 2004 的菜单命令构成，它汇集了各种功能菜单。 ● 【查看】菜单【查看】菜单中包含了文档的各种视图（例如【设计】视图和【代码】视图），通过它可以显示或隐藏不同类型的页面元素以及不同的 DW MX 2004 工具。 ● 【插入】菜单提供【插入】栏的替代项，以用于将对象插入文档中。 ● 【修改】菜单 67 编程改变生活励志照亮人生使用【修改】菜单可以更改选定页面或者项的属性，可以编辑标签属性、更改表格和表格元素，并且为库项和模板执行不同的操作。 ● 【文本】菜单使用该菜单可以轻松地设置文本的格式。 ● 【命令】菜单提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令和创建相册的命令，以及提供 Macromedia Fireworks 优化图像的命令。 ● 【站点】菜单提供一些菜单项，可用于创建、打开和编辑站点。 ● 【窗口】菜单提供对 DW MX 2004 中的所有面板、检查器和窗口的访问。 ● 【帮助】菜单提供对 DW MX 2004 文档的访问，包括用于使用 DW MX 2004 以及创建 DW MX 2004 的扩展的帮助系统，并且包括各种语言的参考材料。（图 5-1-02）另外，DW MX 2004 还提供了多种弹出式菜单，使用这种菜单可以很方便地访问与正在处理的对象或窗口有关的、最有用的命令和属性。弹出式菜单仅列出那些适用于当前选定内容的命令。若要显示弹出式菜单，用右键单击窗口中的某一项即可。（2）工具栏 DW MX 2004 的工具栏有两种格式，一种是【文档】工具栏，一种是【标准】工具栏，如图 5-1-03 所示。 ● 【文档】工具栏（图 5-1-03）该工具栏包含各种按钮，它们提供各种【文档】窗口视图（如【设计】视图和【代码】视图）的选项、各种查看选项和一些常用的操作（如在浏览器中预览）。 ● 【标准】工具栏（图 5-1-04）该工具栏（在默认工作区布局中不显示）包含来自【文件】和【编辑】菜单中的一般操作的按钮：新建、打开、保存、保存全部、剪切、复制、粘贴、撤销和重做。若要显示【标准】工具栏，请选择【查看】>【工具栏】>【标准】菜单项。（3）插入栏【插入】栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时即会出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，用户 68 赛杰 IT 教育中心可以在【插入】栏的左侧切换它们。默认状态下显示的时常用类型，当用户启动 DW MX 2004 时系统会打开上一次使用的类别。（图 5-1-05）【插入】栏按以下的类别进行组织： ● 【常用】类别：使用该类别可以创建和插入最常用的对象，例如图像和表格。 ● 【布局】类别：使用该类别可以插入表格、div 标签、层和框架。 ● 【表单】类别：该类别包含用于创建表单和插入表单元素的按钮。 ● 【文本】类别：该类别使您可以插入各种文本格式设置标签和列表格式设置标签。 ● 【HTML】类别：该类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 ● 【应用程序】类别：该类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 ● 【Flash 元素】类别：该类别使您可以插入 Flash 元素。 ● 【收藏】类别：该类别使您可以将【插入】栏中最常用的按钮分组和组织到某一常用位置。（4）属性面板：在文档窗口中选择已插入的元素时将自动浮现一个能够设置相关元素属性的面板，即称为属性面板，如图 5-1-06 所示。若要显示或隐藏属性面板，可依次单击【窗口】> 【属性】菜单项。（图 5-1-06）（5）面板组【面板组】（如图 5-1-07）是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。（图 5-1-07）（6）网页视图 DW MX 2004 的特性之一就是采用了“所见即所得”方式，并适当地汲取了 HTML 编辑器的优点。在 DW MX 2004 中可以分别显示出“所见即所得”方式的设计视图和 HTML 标记的代码视图，也可以将两个窗口同时显示出来。在文档工具栏中有 4 个控制 DW MX 2004 试图的按钮，这 4 个按钮分别对应显示 4 种视图，如图 5-1-08 所示。如果看不到这些按钮，则可以选择【查看】>【工具栏】>【文档】菜单项打开文档工具栏。 ● 设计视图（图 5-1-08） 69 编程改变生活励志照亮人生 DW MX 2004 是可视化的网页编辑软件，在网页的设计视图中看到的网页的外观和在浏览器中看到的效果基本上是一致的。 ● 代码视图如果想查看或编辑网页源代码，则可以进入代码视图。 ● 拆分视图拆分视图可将屏幕一分为二，同时显示设计视图和代码视图。 ● 活动数据视图只有当网页的扩展名为.asp、.jsp 等动态格式时才会有此视图方式。 5.2 定义站点 1、在任意一个根目录下创建好一个文件夹（我们这里假设为 E 盘），如取名为 MyWeb。备注：网站中所用的文件都要用英文名。 2、打开 Dreamweaver，选择“站点—新建站点”，打开对话框。在站点名称中输入网站的名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（E:web），然后确定即可。步骤如下：出现【站点定义向导】的第一个界面，要求您为站点输入一个名称。如图 5-2-01 所示。（图 5-2-01） 3、在文本框中，输入一个名称以在 DW MX 2004 中标识该站点。该名称可以是任何所需的名称。单击【下一步】，出现向导的下一个界面，询问您是否要使用服务器技术。如图 5-2-02 所示。（图 5-2-02） 4、选择【否】选项，指示目前该站点是一个静态站点，没有动态页。单击【下一步】，出现向导的下一个界面，询问您要如何使用您的文件。如图 5-2-03 所示。 70 赛杰 IT 教育中心（图 5-2-03） 5、选择标有【编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）】的选项。在站点开发过程中有多种处理文件的方式，初学网页制作的用户请选择此选项。单击该文本框旁边的文件夹图标，随即会出现【选择站点的本地根文件夹】对话框。 6、单击【下一步】，出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择【无】。您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击【下一步】，该向导的下一个屏幕将出现，其中显示您的设置概要。（图 5-2-04） 7、单击【完成】完成设置。随即出现【管理站点】对话框，显示您的新站点。单击【完成】关闭【管理站点】对话框。现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。备注：再次打开 Dreamweaver，会自动找到刚才设立的站点。如果有多个站点，可以在菜单 “站点—打开站点”中去选择。 5.3 创建页面现在，以下边的简单网页为例，叙述一下制作过程。简单网页如图 5-3-01。（图 5-3-01）在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。〇网页顶端的标题“我的主页”是一段文字。 71 编程改变生活励志照亮人生〇网页中间是一幅图片。〇最下端的欢迎词是一段文字，单击文字可以进入相应的网页。〇网页背景是一灰色。首先启动 DW MX 2004，确保你已经用站点管理器建立好了一个网站（根目录）。为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录 images 文件夹内。 ● 插入标题文字进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。 ● 设置文字的格式选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。 ● 设置文字的颜色首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。（图 5-3-02） ● 设置网页的标题和背景颜色单击【修改】菜单选【页面属性】。系统弹出页面属性对话框，如图 5-3-03 所示。（图 5-3-03） ● 插入图像选择以下任意一种方法： ① 使用插入菜单：在【插入】菜单选【图像】，弹出【选择图像源文件】对话框，选中该图像文件，单击【确定】。如图 5-3-04 所示。（图 5-3-04） ② 使用插入栏（如图 5-3-04 所示）：单击插入栏【对象】按钮>选按钮，弹出【选择图像源文件】对话框，其余操作同上。 72 赛杰 IT 教育中心（图 5-3-04） ③ 使用面板组【资源】面板（如图 5-3-05 所示）：点选定该文件，用鼠标拖动至工作区中合适位置。按钮，展开根目录的图片文件夹，（图 5-3-05）注：为了管理方便，我们把图片放在“images”文件夹内。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。一个图片就插入完毕了。（插入*.swf 动画文件，选择【插入】菜单＞【媒体】＞【Flash】）。 ● 输入欢迎文字在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎进入……”，然后利用【属性】面板对文字进行设置。 ● 添加超级链接作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。在上面的网页中，单击了“欢迎进入……”这行文字就会跳转到相应的网页中去。其具体操作步骤如下。 ① 在网页中选中要做超级链接的文字。 ② 在【属性】面板中单击【链接】旁边的图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如图 5-3-06）（图 5-3-06）提示：你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。如果超级链接指向的不是一个网页文件，而是其他文件例如 zip、exe 文件等等，单击链接的时候就会下载文件。超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接框里写上 http://www.jstvu.edu.cn/那么，单击链接就可以跳转到江苏电大网站。保存页面。一个简单的页面就这样编辑完毕了。 ● 预览网页 73 编程改变生活励志照亮人生在页面编辑器中按【F12】预览网页效果。在浏览器里光标移到超级链接的地方就会变成手型。网站中的第一页，也就是首页，我们通常在存盘时取名为 index.htm。 5.4 表格设计表格在网页中是一种用途非常广泛的工具。表格不仅可以有序地排列数据，还可以精确地定位文本、图像以及其他网页元素，这在网页版面布局方面起着非常重要的作用。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。如图 5-4-01 所示。（图 5-4-01）一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。（1）制作实例下面看看我们使用表格制作的页面的实例。（图 5-4-02）这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用四行一列的表格来制作。 ① 在插入栏中选择按钮或【插入】菜单>选【表格】。系统弹出表格对话框如图 5-4-03。行数：4，列数：1。其余的参数都保留其默认值。 74 赛杰 IT 教育中心（图 5-4-03） ② 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。如图 5-4-04 所示。（图 5-4-04） ③ 单击第一行单元格，然后插入图片。如果需要调整格子的大小，只需要鼠标的光标移动到边框上拖拽即可。 ④ 在下面的三行单元格内分别插入图片和文本，页面的基本样子有了。 ⑤ 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中在【对齐】栏中选择【居中对齐】。这样一个符合要求的页面在表格的帮助下做好了。（2）表格操作的基本方法通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。表格颜色设置，选择整幅表格后，利用【属性】面板的颜色选择器设置背景色。单元格也可单独设置，鼠标在需要设置的单元格点一下，其余操作同上。下面我们就来看看这些属性面板的区别。表格的【属性】面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如图 5-4-05 所示。（图 5-4-05）选中了单元格之后【属性】面板就发生如下变化了。选择行或者列都属于选中单元格。如图 5-4-06 所示。对表格操作的几种常用方式：【合并】：将选中的连续单元格合并成为一个单元格。【拆分】：将一个单元格分割成若干单元格。（图 5-4-06） 75 编程改变生活励志照亮人生【水平对齐方式】：分为（左）（中）（右）三种。【垂直对齐方式】：分为（顶）（居中）（居底）（基线对齐）表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择【表格】选项>选择【插入行或列】。系统会弹出对话框如图 5-4-07。（图 5-4-07）在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。如图 5-4-08 所示。（图 5-4-08）选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。（图 5-4-09）选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。（图 5-4-10）选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按【Shift】键不放，选取最后一个单元格。选不连续的单元格。按住【Ctrl】键，点取所需要的单元格即可。我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充分掌握。 5.5 框架技术在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接在上边单击以后链接的目标出现在下边。或者在左边单击链接指向的目标页面出现在右边。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。 76 赛杰 IT 教育中心 top top.htm index.htm main main.htm i （图 5-5-01）这是一个上下结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用 index.htm 命名。框架中上边命名为 top，指向的是一个网页 top.htm。下边命名为 main，指向的是一个网页 main.htm。下面我们就来从头开始制作一个框架。（以上下框架结构为例） ① 单击【文件】菜单>【新建】，弹出【新建文档】对话框如图 5-5-02 所示。（图 5-5-02）或在【插入】栏>【布局】>选【框架：顶部框架】，如图 5-5-03 所示。 DW MX 2004 生成一个空白的框架页面，如图 5-5-04 所示。（图 5-5-03）（图 5-5-04） ② 选择【窗口】菜单＞【框架】，弹出【框架】面板如图 5-5-05 所示。从框架面板可知，系统对左右框架生成命名。上框架名为：topFrame，下框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。 77 编程改变生活励志照亮人生（图 5-5-05） ③ 保存框架。选择【文件】菜单点击【保存全部】。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为 index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。如图 5-5-06 所示。（图 5-5-06）虚线笼罩在上边就是保存框架中上边网页。如图 5-5-07 所示。（图 5-5-07）虚线笼罩在下边就是保存框架中下边的网页。如图 5-5-08 所示。（图 5-5-08） 78 赛杰 IT 教育中心三个页面保存完毕。 ④ 下面我们要实现按上边的超级链接，对应的页面出现在下边。在上边的页面中做超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为 mainFrame。如图 5-5-09 所示。（图 5-5-09）【目标】我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下区域中有四个选项。 _blank ：单击链接以后，指向页面出现在新窗口中。 _parent：用指向页面替换它外面所在的框架结构。 _self：将连接页面显示在当前框架中。 _top：跳出所有框架，页面直接出现在浏览器中。提示：如果链接到您的站点外的某一页面，始终使用"_top" 或 "_blank" 来确保该页面不会嵌入框架内。 ⑤ 设置完毕，保存全部，按【F12】预览网页。链接指向的页面出现在下边框架中。 ⑥ 重复以上步骤，把上框架所有的链接做完，一个简单的网站导航结构创建完成。 5.6 使用 CSS 样式 CSS 是 Cascading Style Sheets（层叠样式表单）的简称。它允许用户在 HTML 文档中加入样式（如字体类型、颜色、大小等等）。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供 HTML 调用。CSS 在当前的网页设计中已经成为不可缺少的技术，例如我们现在最常见的去除连接文字的下划线就是 CSS 最简单的应用。（1）制作实例下面我们来通过一个实例了解一下 CSS 的创建过程。 ① 单击【窗口】>【CSS 样式】菜单项或者按下【Shift+F11】打开【CSS 样式】面板。点击【CSS 样式】面板上的新建一个样式表，如图 5-6-01 所示。（图 5-6-01） ② 填写一个名称，点【确定】按钮。（如果您选择○仅对该文档，您所创建的 CSS 样式仅在本页有效。）然后在弹出的对话框中进行设置。如图 5-6-02 所示。 79 编程改变生活励志照亮人生（图 5-6-02） ③ 在上面的对话框中您可以定义文字的字体、大小、颜色和有无上、下划线等属性。还可以设置网页的背景使用固定的背景颜色或者图片。平时上网你多留意就会发现了，很多网站做出来的链接都是无下划线的（或者鼠标移到后下划线不见了），而自己做出来的网页总是有下划线的。这样的效果也是使用 CSS 来制作的。其具体操作步骤如下。 ① 打开样式面板。按【新建】按钮。 ② 在新建样式对话框中选择。使用 CSS 选择器。选择器：选择 a: hover （图 5-6-03） ③ 在样式定义对话框内设定参数。如图 5-6-04 所示。（图 5-6-04） ④ 点击【确定】，保存页面。预览网页。该例是用新建 CSS 样式的办法创建的链接的下划线样式，也是以往常用的手法，主要是让您了解使用选择器类型【高级】选项的设置方法。 DW MX 2004 提供了更便捷的途径：使用【页面属性】对话框，可以很容易指定特殊的 CSS 链接样式，可以【从下划线样式】选择框直接选择。如图 5-6-05 所示。（图 5-6-05） 80 赛杰 IT 教育中心操作方法如下： ① 选择【修改】>【页面属性】，或从【文档】窗口的【设计】视图中的上下文菜单中选择【页面属性】。 ② 在【页面属性】对话框中选择【链接】类别。 ③ 从【下划线样式】弹出菜单中，选择您的页面的默认下划线样式。 ④ 单击【确定】即可。（2）CSS 样式操作的说明通过上面的这个例子，我们现在对于样式表 CSS 有了初步了解。下面我们就其中的一些操作进行说明。新建 CSS 样式时有三种不同的样式类型：【自定义样式】【重定义 HTML 标签】【使用 CSS 选择器】它们是有区别的。自定义样式是生成一个新的样式。制作完毕以后，就可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面中选中对象，然后选择样式即可。当我们制作网页时候需要对某些对象使用这些效果的时候可以使用。重定义 HTML 标签，将现有的 HTML 标签赋上样式。因此制作完毕以后不需要选中对象就直接应用到页面中去了。网页的核心是 HTML 语言。HTML 语言是一种标记语言。它的形式主要是这样的：<标签名>内容。（注：可以重定义的标签有很多）。 CSS 选择器用于针对超级链接进行设置。一共有四种状态： a:active 选中超级链接状态 a:hover 光标移上超级链接状态 a:link 超级链接的正常状态 a:visited 访问过的超级链接状态。我们需要实现将光标移动到超级链接上去时，超级链接的下划线消失。也就是对于超级链接的 hover 状态进行设置。样式表的可选参数有很多，全部在样式定义对话框中选择参数。分为若干类。其中针对文字的类、背景类、项目列表类这些都是比较常用的。样式的删除： ① 直接在样式面板中选中样式。如果是重定义标签和 CSS 选择器从编辑样式表删除。 ② 单击面板中的按钮即可。样式的编辑： ① 单击样式面板中的按钮。 ② 在对话框中选择样式直接按【编辑】按钮即可编辑。样式表简单应用就介绍到这里。 5.7 表单的使用表单主要用于得到用户的反馈信息，如进行会员注册、问卷调查、建立检索界面等，使用表单体现了网页的交互性的功能。（1）表单对象单击【插入】>【表单对象】菜单栏或者在【表单】插入栏中直接单击表单对象按钮来插入表单对象。（图 5-7-01）（2）制作实例下面学习制作一个通过电子邮件发送的表单，具体操作步骤如下。 ①单击【表单】按钮插入一个表单，如图 5-7-02 所示。 81 编程改变生活励志照亮人生（图 5-7-02） ② 在表单内插入一个四行两列的表格（边框为 0），并填上文字，如图 5-7-03 所示。（图 5-7-03） ③ 把光标移到表格的第一行第二列，单击【文本字段】插入一个文本框；光标再移到表格第二行第二列，再插入一个文本框；光标移到第三行第二列，单击【文本区域】插入一个文本区域；合并表格第四行的两个单元格，单击两下【按钮】插入两个按钮；选中第二个按钮，在【属性】面板把动作设为【重设表单（R）】，如图 5-7-04 所示。（图 5-7-04）【文本域】的参数说明如下： ● 【字符宽度】：可以理解为框的宽度，即为多少个字符的长度； ● 【最大字符数】：框可以填写字符的最大个数； ● 【类型】：单行就是见到的样子，如果选多行就变为文本区域了，如果选了密码，填上去的内容将以*号表示； ● 【初始值】：是表单最初的内容；【按钮】的参数说明： ● 【按钮名称】：可以理解为名字； ● 【标签】：就是按钮上显示的字； ● 【动作】：提交表单（提下时发送表单的内容）；无（普通按钮）；重置表单（按下后表单的内容还原为默认状态）其它的就不一一细说了，可以自己认真看看，按上面步骤操作后会出现图 5-7-05 的样子。（图 5-7-05） ④ 打开【行为】面板，选中【提交】按钮，添加检查表单的行为，如图 5-7-06 所示。（图 5-7-06） 82 参数设置如图 5-7-07、5-7-08、5-7-09 所示。赛杰 IT 教育中心（图 5-7-07）（图 5-7-08）（图 5-7-09）单击【确定】完成设置。 ⑤ 选中整个表单，然后在【属性】面板设置如图 5-7-10 的参数。（图 5-7-10）【动作】处填上：mailto:你的 email 地址【目标】处，如果需要打开新窗口的方式发送，可选_blank。如果要为发送的表单添加标题，可以在动作处填上:mailto:你的 email?subject=这是我的意见。其中把你的 email 换成你的电子邮件地址，这是我的意见为邮件的标题。做出来的效果如图 5-7-11：（图 5-7-11）关于邮件提交表单的说明：提交的表单是通过发送电子邮件的软件发送出去的，如 outlook，如果电脑上没有装任何类似的软件或者没有设置好，表单将无法发送。 5.8 常见问题及解决办法 1. 如何对待中文文件名和路径【问题描述】为什么在 Dreamweaver 中不提倡用中文文件名和路径？【分析处理】由于有的网络服务器不支持中文路径和文件名称，所以在 Dreamweaver 中也不支持。当使用 83 编程改变生活励志照亮人生中文做路径和文件名称时，Dreamweaver 会自动转换为 ASCⅡ码，因此建议所有的路径和文件名使用英文标识。 2. 如何换行【问题描述】输入文字达到一行后，按下回车键时光标却跑到下一个段落去了，这是怎么回事？【分析处理】在 Dreamweaver 中编辑文档时，默认情况下按下回车键是分段。实现换行的正确做法是按【Shift】＋【Enter】组合键。 3. 如何在网页中插入空格【问题描述】我们在用 Dreamweaver 的所见即所得编辑模式下编辑中文网页时，往往需要在段落的开头空两格，但是在 Dreamweaver 中，在选定的文本前按下空格键为什么不行呢？【分析处理】在 Dreamweaver 中插入空格通常有以下几种方法： ① 启动输入法并切换到全角状态，此时按下空格键就可以插入全角空格。 ② 单击【文本】插入栏中的按钮，在打开的菜单中选择【不换行空格】菜单项。 ③ 在 HTML 源代码编辑窗口中直接加入“ ”代码。 ④ 使用【Ctrl】＋【Shift】＋【Space】组合键。 4.为何不显示图片【问题描述】做好了的一个主页里面有一些图片，在本地一切正常，但上传后背景、图片都显示不出来，这是怎么回事呢？【分析处理】产生这样的问题有两种可能：一是图片用的是绝对路径，二是大小写有问题。 ① 第一种情况。如果图片链接时用的是绝对路径，并且路径用了本地盘符，那么上传就找不到此图片文件。在 Dreamweaver 中显示正常，打开图形的【属性】面板，发现其图片的【源文件】显示为 “file:///D:/my Web/img/zt.gif”，这就是绝对路径，而且引用了本地盘符。如果坚持用绝对路径，可以将其改为“/img/zt.gif”，如果要用相对路径就改为“img/zt.gif”。 ②第二种情况。可能文件名或图形文件所在的目录名中有大写字母，或是里面有中文。将其文件名或目录名改为英文的即可。 5. 如何让网页紧贴顶部和左部【问题描述】为什么我制作的网页最上边和最左边没有靠边，有空隙呢？【分析处理】用鼠标右键点击网页中非表格区域，选择属性，然后可以看到左边距和上边距的设置，把他们设置为 0 即可。 6. 如何制作表格细边框【问题描述】制作了一个表格，为什么表格边框样子很粗糙，不美观？【分析处理】 Dreamweaver 虽然为用户提供了定义表格边框的属性 Border，但是很多用户不喜欢用它，因为感觉它的样子很粗糙，达不到我们预期的效果。我们可以利用 Dreamweaver 的另外一个表格的属性 CellSpace（单元格间距），把它设置为 1，然后为表格设置一种背景颜色（就是细边框的 84 颜色），然后把全部单元格选中，设置背景颜色为表格的前景颜色。【课堂收获】赛杰 IT 教育中心 85 编程改变生活励志照亮人生【温故知新】一、选择题 1.“页面属性”对话框中的()用于设置将显示在 Web 浏览器的标题栏上的页面名称。 A.文本 B.标题/编码 C.脚本 D. HTML 2.命名锚记() A.不能链接两个不同的网页 B.能链接同一网页的不同部分 C.不能链接同一网页的不同部分 D.以__上都不是 3.请先阅读下面的代码，然后选择一个正确的答案() …… A. bgcolor 修饰的是行的背景色，background 修饰的是表格的背景图片 B . bgcolor 修饰的是表格的背景色，background 修饰的是行的背景图片 C. bgcolor 修饰的是单元格的背景色，background 修饰的是单元格的背景图片 D. bgcolor 修饰的是表格的背景色，background 修饰的是一单元格的背景图片 3. 下面( )是 ID 的样式规则定义。 A.TR{color:red; font-family:”隶书”;font-size:24px;} B. .H2{color:red; font-family:”隶书”;} C.#grass{color:green; font-family:”隶书”;font-size:24px;} D. P{ background-color: #CCFF33;text-align: left;} 4. 采用 DIV+CSS 标准的好处有()。 A.减少页面冗余代码 B.更容易修改和维护 C.容易被搜索引擎搜索到 D.可以轻松地控制页面的布局 5. 有关下面片段代码的说法，()是正确的。 #head{ position:absolute; left:9px; top:12px; width:418px; 86 赛杰 IT 教育中心 height:58px; background-color:#FF0000;} A.#head 是类样式选择符 B.position:absolute;表示绝对定位，也就是被定位的元素位置固定不变 C. width:418px; height:58px;表示被修饰的元素距离别的元素的左右和上下边距 D. background-color: #FF0000;表示被修饰的元素的背景图像 6. 一般网页由( )组成。 A.导航部分 B.内容部分 C.版权声明部分 D.新闻部分 7. 在网页设计中，涉及到的页面布局有()。 A.框架布局 B.表格布局 C. DIV 层布局 D.混合布局(框架布局、表格布局和 DIV 层布局的组合) 二、简答题 1.简述建设一个网站的一般开发流程。 2.简述 3 种页面布局的优点及使用场合? 87 编程改变生活励志照亮人生第六章网站设计和页面布局技术【学习目标】 � 能使用网站设计流程分析简单网站的设计 � 能使用 DIV 层技术进行页面整体布局 � 能使用表格进行图文内容的布局 � 会使用 Dreamweave:制作模板并应用到其他页面 � 会使用 Dreamweave:制作样式表文件并绑定到各页面 � 会使用网站开发流程制作并发布网站【本章简介】从本章开始我们将学习网站设计和布局技术,其中重点是熟悉网站的开发流程,DIV 层和表格布局各自的使用场合以及网站开发的一些经验、技巧、难点是如何进行网页布局。【理论课堂】 6.1 网站开发的基本流程网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才能实现这一完整流程。其流程主要有以下几个方面： 6.1.1 客户提出需求在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。常见的目的包括宣传产品、电子商务、行业宣传、市场开拓等。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这一流程中，双方的沟通与交流是非常重要的。 6.1.2 注册域名和申请空间注册域名和申请空间如同给网站在因特网中命名和安家。域名用以给访问者提供访问地址，而空间则用来存放站点以供访问。 1．注册域名域名是网站的名称。由于在网络上，所有的计算机都以一长串的数字构成的 IP 地址进行标识，不便于人们使用，因此人们使用域名来标识网站。域名通常包括国际域名和国家二级域名两种。国际域名可以被任何访问者访问。它具有全球性的特点，所以适合集团公司等企业用户使用。国际域名的申请由 InterNIC 及其他由 Internet 国际特别委员会（IAHC）授权的机构进行。国家二级域名以国家后缀结尾，在我国以 cn 结尾。它具有地域性特点，所以适合所有国内用户使用。国家二级域名的申请由中国互联网络信息中心（CNNIC）负责进行。现在，网络中流行使用中文域名。中文域名是为了方便中国的网络用户而产生的。它由中文构成。中文域名的申请由中国互联网络信息中心（CNNIC）负责。 2．申请空间空间是用来存放网站的页面文件。网站空间通常有两种：专有空间和租赁空间。专有空间是指客户自己提供服务器，所有网站资料均存放在该服务器中。该类空间的特点是空间容量容易得到保证，便于设计较大的网站。但由于很多客户使用的服务器并不是专用服务器，所以服务器的性能存在较大可变性。租赁空间是指使用租赁的方式向 ICP 服务商购买的空间。该类空间的特点是服务性能稳定， 88 赛杰 IT 教育中心前期投入较少，租用空间容量有限，不适合大量信息流吞吐。 6.1.3 确定网站的内容和主题设计前期还需要做一些准备工作，比如整合客户资源、收集网站内容资料、确定网站功能等。设计人员在参与设计前期，需要根据客户的需要和计划，确定网站的功能——产品宣传型、网上营销型、客户服务型、电子商务型等。根据网站功能，确定网站应达到的目的和应发挥的作用，同时还需要考虑网站后期的可扩展性。在具体设计构思时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这一主题进行设计制作，保证风格的和谐统一。 6.1.4 设计页面设计页面是整个流程中最为重要的环节，设计人员要做的事情是设计网站整体风格、色彩搭配、布局结构等，设计的页面将决定最终的网站效果。现在设计人员常用的网页页面设计软件有两种：Photoshop 和 Fireworks。 1．Photoshop Photoshop 在图形图像处理领域拥有毋庸置疑的权威。使用 Photoshop 设计网页，具有高速、优质的优点，其缺点是不能生成具有较高兼容性和 Java 特效的 HTML 页面。目前的版本是 Photoshop CS。 Photoshop 的工作界面如图 6-1 所示，主要包括工具面板、图层面板和工作区域。目前的 CS 版本中可以轻松实现切图并输出 HTML 页面。通常使用 Photoshop 设计页面的静态效果图。图 6-1 Photoshop CS 工作界面 2．Fireworks Fireworks 相当于结合了 Photoshop（位图处理）以及 CorelDRAW（矢量图）的功能。使用 Fireworks 设计页面，其优点是能够输出与 Dreamweaver 完全兼容的，具有双向可编辑性的页面；其缺点是色彩和功能上不如 Photoshop 强大。目前的版本是 8.0。作为一款为网络设计而开发的图像处理软件，Fireworks 能够自由地导入各种图像；能够自动切图、生成鼠标动态感应的 JavaScript，具有十分强大的动画功能和一个几乎完美的图像输出功能。图 6-2 所示是 Fireworks 8 的工作界面，其界面与 Photoshop 非常类似，易学易用。 89 编程改变生活励志照亮人生图 6-2 Fireworks 8 工作界面 6.1.5 设计网页动画网页动画对于增添页面动感和提升网站品质具有极大的促进作用。制作精良的动画能与网页相得益彰、锦上添花。网页动画通常以 Banner 条或广告的形式出现，现在随着宽带网络的普及，也有越来越多的网站使用动画作为页面导航甚至整个页面。设计网页动画常用的软件是 Flash。该软件制作动画具有制作方便、动态效果显著、容量小、非常适合网络传播等特点；可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。图 6-3 所示是 Flash 的工作界面，其界面非常友好，并且提供非常详细和完整的教程。图 6-3 Flash 的工作界面 6.1.6 网页整合网页整合是对前期设计进行汇总和编辑。整合页面需要对设计好的网页进行编辑，诸如规划站点、制作链接、制作页面效果等，该阶段主要使用可视化的网页制作软件进行整合。目前整合网页所使用的主流软件是 Dreamweaver，该软件具有强大的可视化编辑功能，其优点是具有完善的站点管理机制，能够添加动态效果代码和客户端程序。在使用 Dreamweaver 进行整合时需要注意整体站点结构的划分，为了便于日后的维护和再开发，对于站点和栏目要做到结构清晰明了。Dreamweaver 目前的版本是 8.0，如图 6-4 所示。 90 赛杰 IT 教育中心图 6-4 Dreamweaver 8 Dreamweaver 工作界面如图 6-5 所示。 Dreamweaver 在网页设计流程中主要用来整合页面，例如整合 Photoshop 或 Fireworks 输出的页面，添加动态效果和客户端程序等。图 6-5 Dreamweaver 8 的工作界面 6.1.7 文件发布文件发布阶段要做的工作是对已经搭建好的本地网站进行测试，通过测试无误后即可上传至服务器空间进行发布。将网站上传到服务器，也就是将网站文件复制到已经申请的虚拟主机中去。可以通过以下两种方法进行上传发布： * 一种是使用Dreamweaver的站点管理功能上传本地文件，使用该方法能够有效同步本地站点和远程站点，但其对远程站点的管理功能较弱。 * 另一种方法是使用FTP软件连接到服务器空间，然后进行上传发布文件。该方法具有较大的自主性，但其不利于对整体站点进行有序管理。不管使用哪一种方法，最终能实现将本地的网站文件复制到服务器空间中即可。 6.1.8 后期维护一个网站上传后，如果没有专业人员维护，不断更新内容，网站内容就不会引起人们的关注，如果因此没有人访问这个网站，该网站也就没有存在的价值了。让更多的人知道该网站，这才是建立网站的根本目的，所以后期维护是必须的，也是非常重要的环节之一。后期维护工作主要包括站内测试、网站推广、内容更新、及时更正错误、添加新的信息、保持本地站点与远程站点同步以及必要时的改版等。在做后期维护时，需要特别注意远程站点中的文件安全，在进行相关维护操作时，应该先在本地站点中测试检查，通过后再同步远程站点中的内容。 6.2 框架布局不知道什么缘故，使用框架布局的人越来越少，可能是因为它在不同浏览器之间的兼容性不好;也有可能是保存框架集网页比较麻烦，保存时不但要保存框架集本身页面，还要保存一个框架窗口中的 HTML 文档;更有可能是应用范围有限的原因。 91 编程改变生活励志照亮人生除此之外，框架也有不少优点比如:它能在框架窗口中支持滚动条，从而能显示更多的内容; 还能有效地实现页面导航工作，从而方便用户浏览网页;由于框架集中相同的内容只要下载一次，不同的内容才需要重新下载，所以使用框架布局能减少页面下载时间。从布局上考虑，框架布局有它存在的理由，支持框架结构不失为一个好的选择。其实，在因特网上使用框架布局的网页还不少，如许多的 BBS 论坛页面，还有一些小型的商业网站以及各种网页形式的学习教程，此外在一些网站的后台管理页面中也常常用到框架技术。案例：制作一个上下,左右分开的框架,上面是 banner 栏,下面的左边部分是是导航栏,右侧是主页面. 6.3 表格布局表格当初出现的初衷是用来存放内容，根本不是用来布局的。由于使用表格来布局页面的人多了，才有表格布局这一说法。表格布局好像已经成为一个标准，随便浏览一个站点，它们一定存在表格布局。表格布局的优势在于能很方便地排列有规律、结构均匀的内容或数据，而且表格在定位图片和文本上比起用 CSS 更加方便，因此，表格适合用来布局很规整的内容或数据。表格布局的缺点是，当你用了过多表格时，会产生过多的垃圾代码，还会影响页面的下载时间。另外当页面布局需要调整时，往往都要重新制作表格，因此表格布局的灵活性不大、难于修改。任何事物都有两面性，表格布局也不例外，因此，我们应该尽量少用其缺点，多多使用其优点来为我们服务。虽然表格的缺点不少，但是在因特网上使用表格的网页随处可见。几乎所有的网站都用过表格，没用过表格的网站简直就是凤毛麟角。因此，表格布局绝对不可抛弃。 6.4 DIV+CSS 进行网页布局 CSS+DIV 是网站标准中常用的术语之一，通常为了说明与 HTML 网页设计语言中的表格定位方式的区别，因此 XHTML 网站设计标准中，不再使用表格定位技术，而是采用 CSS+DIV 的方式实现各种定位。 6.4.1 div+css 布局案例 1：第一节：总体布局思想参考代码： DIV+CSS 实现两边固定宽度,中间自适应宽度

我是头部

我是左边,宽:200px

我是右边,宽:200px

我是中间,宽自适应

我是底部

案例 2：有如下已经构思好的界面布局图：仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了 LOGO、MENU 和一幅 Banner 图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 93 编程改变生活励志照亮人生根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV 结构如下： │body {} /*这是一个 HTML 元素，具体我就不说明了*/ └#Container {} /*页面层容器*/ ├#Header {} /*页面头部*/ ├#PageBody {} /*页面主体*/ │ ├#Sidebar {} /*侧边栏*/ │ └#MainBody {} /*主体内容*/ └#Footer {} /*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写 HTML 代码和 CSS。第二节：总体布局实现（测试）接下来我们在桌面新建一个文件夹，命名为“DIV+CSS 布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 94 赛杰 IT 教育中心无标题文档这是 XHTML 的基本结构，将其命名为 index.htm，另一个记事本文档则命名为 css.css。下面，我们在标签对中写入 DIV 的基本结构，代码如下：

[color=#aaaaaa][/color]

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开 css.css 文件，写入 CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。关于以上 CSS 的说明（详细请参考 CSS2.0 中文手册，网上有下载）： 1、请养成良好的注释习惯，这是非常重要的； 2、body 是一个 HTML 元素，页面中所有的内容都应该写在这标签对之内，我就不多说了； 3、讲解一些常用的 CSS 代码的含义： font:12px Tahoma； 95 编程改变生活励志照亮人生这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为 12 像素大小，字体为 Tahoma 格式； margin:0px；也使用了缩写，完整的应该是： margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px 或 margin:0px 0px 0px 0px 顺序是上 / 右 / 下 / 左，你也可以书写为 margin:0(缩写)；以上样式说明 body 部分对上右下左边距为 0 像素，如果使用 auto 则是自动调整边距，另外还有以下几种写法： margin:0px auto；说明上下边距为 0px，左右为自动调整；我们以后将使用到的 padding 属性和 margin 有许多相似之处，它们的参数是一样的，只不过各自表示的含义不相同，margin 是外部距离，而 padding 则是内部距离。 text-align:center 文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。 background:#FFF 设置背景色为白色，这里颜色使用了缩写，完整的应该是 background:#FFFFFF。 background 可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式： background:#ccc url('bg.gif') top left no-repeat；表示：使用#CCC(灰度色)填充整个层，使用 bg.gif 做为背景图片， top left 表示图片位于当前层的左上端，no-repeat 表示仅显示图片大小而不填充满整个层。 top/right/bottom/left/center 用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用 background:url('bg.gif') 20px 100px; 表示 X 座标为 20 像素，Y 座标为 100 像素的精确定位； repeat/no-repeat/repeat-x/repeat-y 分别表示填充满整个层 / 不填充 / 沿 X 轴填充 / 沿 Y 轴填充。 height / width / color 分别表示高度(px)、宽度(px)、字体颜色(HTML 色系表)。 4、如何使页面居中？大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在#container 中使用了以下属性： margin:0 auto; 按照前面的说明，可以知道，表示上下边距为 0，左右为自动，因此该层就会自动居中了。如果要让页面居左，则取消掉 auto 值就可以了，因为默认就是居左显示的。通过 margin:auto 我们就可以轻易地使层自动居中了。 5、这里我只介绍这些常用的 CSS 属性了，其他的请参看 CSS2.0 中文手册。第三节：实现 Header 头部接下来，我们开始制作 TOP 部分，TOP 部分包括了 LOGO、菜单和 Banner，首先我们要做的就是对设计好的图片进行切片，我们还需要对 TOP 部分进行分析并将 DIV 结构写入 Header 中代码如下：为什么要这么写呢，因为对菜单使用列表

形式，可以在以后方便对菜单定制样式。而为什么要添加以下代码呢？

插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。然后我们在 css.css 中再写入以下样式： /*页面头部*/ #header {background:url(logo.gif) no-repeat} 样式说明： #header {background:url(logo.gif) no-repeat} 给页面头部分加入一个背景图片 LOGO，并且不作填充。这里，我们没有指定 header 层的高度，为什么不指定呢？因为 header 层中还有菜单和 banner 项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。按照上面的介绍，我们先在 css.css 中写入以下代码： #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 解释一下： #menu ul {list-style:none;margin:0px;} list-style:none，这一句是取消列表前点，因为我们不需要这些点。 margin:0px，这一句是删除 UL 的缩进，这样做可以使所有的列表内容都不缩进。 #menu ul li {float:left;} 这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码 margin:0 10px #menu ul {list-style:none;margin:0px;} 97 编程改变生活励志照亮人生 #menu ul li {float:left;margin:0 10px} margin:0 10px 的作用就是让列表内容之间产生一个 20 像素的距离(左：10px，右： 10px)，预览的效果如下：现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下： #menu {padding:20px 20px 0 0} /*利用 padding:20px 20px 0 0 来固定菜单位置*/ #menu ul {float:right;list-style:none;margin:0px;} /*添加了 float:right 使得菜单位于页面右侧*/ #menu ul li {float:left;margin:0 10px} 这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢？别忘了，我们早就已经留好了一个空的

，要想加入竖线就使用它了。按照上面说的方法，我们再添加以下代码： .menuDiv {width:1px;height:28px;background:#999} 保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容易理解的。不过，菜单选项的文字却在顶部，我们再修改成以下代码： #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} 关于 display:block;line-height:28px 大家可以去参阅一下手册。效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在 css.css 中添加以下代码： #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{} 这个也不多说了，没什么好说的了，最后的效果如下：第四节：使用好 border 和 clear 这两个属性首先，如果你曾用过 table 制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在中加入这么一段就可以了，你可以试试：

大家可以再次参考手册，然后你就能明白 dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。以上代码便可以实现设计草图中的 banner，在 css.css 中加入以下样式： #banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ 98 赛杰 IT 教育中心 width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/ } 通过 border 很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。另一个要说明的就是 clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加 clear:both 是由于之前的 ul、li 元素设置了浮动，如果不清除则会影响 banner 层位置的设定。

以上是页面主体部分，我们在 css.css 中添加以下样式： #pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/ } #sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/ } #mainbody { width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden } 为了可以查看到效果，建议在#sidebar 和#mainbody 中加入以下代码，预览完成后可以删除这段代码： border:1px solid #E00; height:200px 保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该 160+2(border)+570+2=734px，已经超出了父层的宽度，由于 clear 的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。 99 编程改变生活励志照亮人生而之后添加的 overflow:hidden 则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加 overflow:hidden 就可以解决这个问题。总结：CSS 中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。 6.5 .dwt 模板的使用 6.5.1 为什么要使用网页模板网站通常都遵循一个标准结构，例如所有页面都有页眉、导航栏和页脚。模板有助于保持整个网站外观和风格的一致性。假设您的网站有许多页面，有些页面含有相同的页眉、导航栏和隐私条例说明、版权标题。现在要做一个小改动，比如说在版权文本中加一些内容。那么就必须分别打开每个页面，并做必要的修改，这样是不是非常耗时耗力，而且容易出错，那怎么办?不急，设计 HTML 语言的人早就为我们想好了，多个页面中相同部分可以制作成一个文件，它就是模板。如果使用了模板，这项工作就变得轻松多了。您只需在模板中进行修改，应用了该模板的所有页面都将自动更新。其实模板的功能就是将版式和内容的设计分离，先设计版式布局并存为模板，然后，对于相同布局版式的网页就可以用前面定义的模板来创建，在新的页面中只需修改部分内容就可以快速制作成功，而且可以保证页面风格的一致性。模板的好处的确不少。 6.5.2 创建 dwt 模板创建模板的方法有两种，一种是将现有的 HTML 文档保存为模板，另一种是在空白 HTML 文档中从头开始创建。最简单的方法是先打开一个创建好的网页，然后将它用作模板。另一个方法是从头开始创建，然后在其中添加图像、表格和文本。最后必须决定哪些区域是可以修改的(内容)，然后保存为模板，这样就可以开始创建其他页面了。Dreamweaver 使用标准的 HTML 注释来确定使用了哪个模板和哪些区域可以编辑。模板将自动保存在"Templates”文件夹中，该文件夹在站点的本地根文件夹下。下面分别介绍用两种不同的方式来创建模板。 1、将现有文档保存为模板 (1)选择“文件”~“打开”命令，即会出现“打开”对话框。 (2)在“打开”对话框中，选择要创建为模板的现有文档。 (3)单击“确定”按钮，该文档将出现在“文档”窗口中。 (4)选择“文件”~“另存为模板”命令，将出现“另存为模板”对话框。 (5)在此对话框中，从“站点”下拉列表框中选择要保存模板的站点。在“另存为”文本框中，输入模板的名称。 (6)单击“保存”按钮。 100 赛杰 IT 教育中心此文档将以.dwt 为扩展名保存在“Templates”文件夹下。 2、新建空白模板 (1)选择“窗口”~“资源”命令或按 F11 键，即会出现“资源”面板。 (2)单击“资源”面板上的“模板”图标，将显示“模板”面板，如图 6-6 所示。 (3)单击“模板”面板右下角的“新建模板”图标。 (4)在“名称”字段中输入新模板名称，然后按 Enter 键。 (5)单击“模板”面板右下角的“编辑”图标。（图 6-6）注意：在使用模板时需谨记，不能将模板从“Templates”文件夹中移出，也不能将非模板文件放在“Templates”文件夹下。而且，不能将“Templates”文件夹从站点的本地根文件夹中移出，否则将导致“Templates”文件夹的路径出错 3、定义可编辑区域 1) 添加基本可编辑区域 (1)在“模板”文档中选择要设置为可编辑的区域。 (2)请执行以下步骤之一: 》在插入栏的“常用”选项卡中，单击“模板”图标，在弹出的下拉菜单中选择“可编辑区域”命令。》选择“插入”~“模板对象”一“可编辑区域”命令。》右击选中的区域，然后选择“模板”一“新建可编辑区域”命令。》按 Ctrl+Alt+V 组合键。（3）此时，将出现“新建可编辑区域”对话框。在“名称”文本框中，为该区域输入一个唯一的名称。同一名称不能使用两次。 2) 删除可编辑区域如果在模板中设置了可编辑区域并想锁定它，即将其设为不可编辑，则需使用“删除模板标记”选项。（1）选择要编辑的区域。（2）选择“修改”一“模板”一“删除模板标记”命令。该区域即被锁定，不可编辑。 4、编辑模板要编辑模板，请执行以下步骤。 (1)选择“窗口”~“资源”命令。 (2)在“资源”面板中，单击“模板”图标。 (3)从模板列表中，选择要编辑的模板，然后双击。该模板将出现在“文档”窗口中。此时即可编辑该模板，并对其做必要的修改。 101 编程改变生活励志照亮人生 6.5.3 应用模板在模板创建好之后，必须确保所有相关的页面都使用该模板，以便在更新模板时，这些页面会随之自动更新。下面介绍将模板应用于页面的步骤。将模板应用于打开的文档的步骤如下： (1)新建要应用模板的空白文档。 (2)在“资源”面板中单击“模板”图标，找到要应用的模板。 (3)将模板从面板拖到空白“文档”窗口中。 (4)在可编辑区域添加或编辑数据即可。 6.6 psd 模板的使用 psd 模板其实就是一张图片，不能直接在 DW 中打开，我们下载下来的 psd 网页模板，必须先要使用 Fireworks 或者 photoshop 工具，对图片进行切片操作，然后保存为.html 文件（或者是导出.html 文件），然后用 DW 打开.html 文件即可。然后再保存为 dwt 模板。注意：使用时必须所有的文件必须放在同一个文件夹中。 6.7 网站的完工并发布 6.7.1 网站的发布 1、申请网站空间，然后将它上传到网上。目前基本上没有免费空间，免费空间也都需要放置广告，或是申请一个收费空间，它都会提供十天左右的试用期，可以作为网站测试来用一下。 (http://www.5944.net/ 免费空间的申请网址) 2、在点击申请后，会出现要求注册的表格，一般包括用户名、密码、邮箱、联系电话、省份、主页的名称、主页的类别、主页的简介等。 3、全部填完之后，即可得到以下几项：①用户名（刚才填写）②密码（刚才填写）③FTP 上传地址 ④主页地址（有时是将以上几项发送到所填写的邮箱） 4、下载并安装 FTP 上传软件，可以用 CuteFtp（昆山视窗/软件可以下载，免费） 5、打开 CuteFtp 软件，点击主菜单中的文件/站点管理器。 6、在打开的对话框中填写好 FTP 上传地址、FTP 站点用户名称、FTP 站点密码，然后点击连接，就可以连接到站点服务器。（第二次打开就自动连接，不用再填写了） 7、连接好以后，在页面上出现框架，左边为本地计算机上的文件，右边为远程计算机，只要将左边的文件（即做好的网站文件）一个个拖动到右边，即完成了上传。 6.7.2 宣传自己的网站如何让网站地址让别人知道，方法有二： 1、用专门的软件，可以将网站登录到各大搜索引擎。 2、手工登录。如打开百度（www.baidu.com）,在下面有个链接“网站登录”，点击后会被要求填写网站地址、名称、内容等，然后就被收入百度的搜索引擎了，这样别人就可以搜索到你的网站了。其他网站登录同理。 102 赛杰 IT 教育中心【上机手册】 1、设计一个页面，具体要求如下： (1) HTML 文档的基本结构，标签配对出现。 (2)图片标签与文字关系。 (3)标题标签 (n=1, 2, ……7)，段落标签

，换行标签
，字体标签。 (4) HTML 中使用的特殊字符。 (5)设置背景色 bgcolor 属性。参考代码 (略) 2、利用记事本编写制作一个简单的 NBA 中国的首页页面，页面内容包括: (1) NBA 中国的官方标志图片，鼠标放置到上面时会显示信息:“欢迎登录 NBA 中国”。 (2)导航菜单:查看球员、主编信箱、NBA 动态、NBA 专题，每一项均设置超链接。参考代码（略） 103 编程改变生活励志照亮人生【温故知新】一、选择题 1.模板会自动保存在()中，该文件夹在站点的本地根文件夹下。 A. Library 文件夹 B . Custom 文件夹 C. Assets 文件夹 D. Templates 文件夹 2.网页制作技术不可以实现由一个文件控制一大批网页()。 A. CSS 文件 B.表格 C.模板 D. DIV 层 3.下列关于模板的说法正确的是()。 A. Dreamweaver 模板是一段 HTML 源代码 B. Dreamweaver 模板可以创建具有相同页面布局的一系列文件 C. Dreamweaver 模板可以由用户自己创建 D. Dreamweaver 模板是一种特殊类型的文档，它可以一次更新多个页面 4.在 CSS 语言中()是设置“上边框”样式的语法。 A . letter-spacing:<值> B.border-top:<值> C. border-top-width:<值> D. text-transform:<值> 5.超级链接元素 A 有很多属性，其中用来指明超级链接所指向的 URL 的属性是 ( ). A. href B . herf C.target D,link 二、简答题 1.新建一个空白模板，起名为“templates 1 "，自定义设计模板。然后新建一个空白页面，将“templates 1”应用到该网页中，并在可编辑区域添加相关内容。 2.试简述创建模板的大致步骤。 104 赛杰 IT 教育中心第七章 JavaScript 的基本语法【学习目标】 � 掌握脚本的基本结构〔SCRIPT 标签) � 熟悉基本语法 � 会运用高级语法一自定义函数【本章简介】本章首先介绍为什么要学习 JavaScript，让读者对 JavaScript 语言的主要作用有基本的了解。接着讲解什么是 JavaScript，然后讲解 JavaScript 的基本语法和高级语法。最后介绍在编写 JavaScript 代码时常犯的一些错误。其中重点是 JavaScript 的基本语法和自定义函数的使用，难点是自定义函数参数的传递方法。【理论课堂】 7 .1 为什么要学习 JavaScript Internet 时代，造就了我们新的工作和生活方式，其互联性、开放性和共享信息的模式，打破了传统信息传播方式的重重壁垒，为我们带来了新的机遇。随着计算机和信息时代的到来，人类社会前进的脚步在逐渐加快，每一天都有新的事情发生，每一天都在创造着奇迹。随着 Internet 技术的突飞猛进，各行各业都在加入 Internet 的行业中来。无论从管理方面，还是从商业角度来看，Internet 都可以带来无限生机。通过 Internet，可以实现地区、集体乃至个人的连接，从而达到一种“统一的和谐”。那么怎样把自己的或公司的信息资源加入到 WWW 服务器，是广大用户日益关心的问题。采用超链技术（超文本和超媒体技术）是实现这个目标最简单的、最快速的手段和途径。具体实现这种手段的支持环境，那就是 HTML 超文本标识语言。通过它们可制作所需的 Web 网页。通过超文本(Hyper Text)和超媒体(Hyper Media)技术结合超链接(Hyper link)的链接功能将各种信息组织成网络结构(web)，构成网络文档(Document)，实现 Internet 上的“漫游”。通过 HTML 符号的描述就可以实现文字、表格、声音、图像、动画等多媒体信息的检索。然而采用这种超链技术存在一定的缺陷，那就是它只能提供一种静态的信息资源，缺少动态的客户端与服务器端的交互。虽然可通过 CGI(Common Gateway Interface)通用网关接口实现一定的交互，但由于该方法编程较为复杂，因而在一段时间防碍了 Internet 技术的发展。而 JavaScript 的出现，无凝为 Internet 网上用户带来了一线生机。可以这样说,JavaScript 的出现是时代的需求，是当今的信息时代造就了 JavaScript。 JavaScript 的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。从而基于 CGI 静态的 HTML 页面将被可提供动态实时信息，并对客户操作进行反应的 Web 页面的取代。JavaScript 脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱的欢迎。它是众多脚本语言中较为优秀的一种，它与 WWW 的结合有效地实现了网络计算和网络计算机的蓝图。无疑 Java 家族将占领 Internet 网络的主导地位。因此，尽快掌握 JavaScript 脚本语言编程方法是我国广大用户日益关心的。 7.2 什么是 JavaScript JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与 HTML 超文本标记语言、Java 脚本语言（Java 小程序）一起实现在一个 Web 页面中链接多个对象，与 Web 客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的 HTML 语言中实现的。它的出现弥补了 HTML 语言的缺陷，它是 Java 与 HTML 105 编程改变生活励志照亮人生折衷的选择，具有以下几个基本特点： 1、脚本编写语言 JavaScript 是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript 同样也是一种解释性语言，它提供了一个易的开发过程。它的基本结构形式与 C、C++、VB、Delphi 十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与 HTML 标识结合在一起，从而方便用户的使用操作。 2、基于对象的语言 JavaScript 是一种基于对象的语言，同时可以看作一种面向对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 3、简单性 JavaScript 的简单性主要体现在：首先它是一种基于 Java 基本语句和控制流之上的简单而紧凑的设计, 从而对于学习 Java 是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 4、安全性 JavaScript 是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 5、动态性 JavaScript 是动态的，它可以直接对用户或客户输入做出响应，无须经过 Web 服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page) 中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 6、跨平台性 JavaScript 是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持 JavaScript 的浏览器就可正确执行，从而实现了“编写一次，走遍天下”的梦想。实际上 JavaScript 最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须 WEB 服务器通道，通过自己的电脑即可完成所有的事情。综合所述 JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。 JavaScript 语言可以做到回应使用者的需求事件 (如： form 的输入) ，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。 JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那么注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。 7.3 JavaScript 和 Java 的区别虽然 JavaScript 与 Java 有紧密的联系，但却是两个公司开发的不同的两个产品。Java 是 SUN 公司推出的新一代面向对象的程序设计语言，特别适合于 Internet 应用程序开发；而 JavaScript 是 Netscape 公司的产品，其目的是为了扩展 Netscape Navigator 功能，而开发的一种可以嵌入 Web 页面中的基于对象和事件驱动的解释性语言，它的前身是 Live Script；而 Java 的前身是 Oak 语言。下面对两种语言间的异同作如下比较： 1、基于对象和面向对象 Java 是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。 JavaScript 是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软 106 赛杰 IT 教育中心件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。 2、解释和编译两种语言在其浏览器中所执行的方式不一样。Java 的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。 JavaScript 是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。 3、强类型和弱变量两种语言所采取的变量是不一样的。 Java 采用强类型变量检查，即所有变量在编译之前必须作声明。如: Integer x; String y; x=1234; x=4321; 其中 X=1234 说明是一个整数，Y=4321 说明是一个字符串。 JavaScript 中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型，如： x=1234; y＝"4321"; 前者说明 x 为其数值型变量，而后者说明 y 为字符型变量。 4、代码格式不一样 Java 是一种与 HTML 无关的格式，必须通过像 HTML 中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。 JavaScript 的代码是一种文本字符格式，可以直接嵌入 HTML 文档中，并且可动态装载。编写 HTML 文档就像编辑文本文件一样方便。 5、嵌入方式不一样在 HTML 文档中，两种编程语言的标识不同，JavaScript 使用来标识，而 Java 使用...来标识。 6、静态联编和动态联编 Java 采用静态联编，即 Java 的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。 JavaScript 采用动态联编，即 JavaScript 的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。 7.4 脚本的基本结构为了运用 JavaScript 控制 HTML 页面上的对象，JavaScript 的代码必须与 HTML 代码结合在一起。将 JavaScript 嵌入 HTML 页面时，必须使用＜SCRIPT＞标签，该标签使用形式如下：标签说明。在标识之间就可加入 JavaScript 脚本。 Eg: 在浏览器的窗口中调用该例子，则显示“这是工大赛杰 IT 教育中心，欢迎您来到学校”字串。见图 7-1 所示。图（7-1）JavaScript 实例说明: Document. write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口；document. close()是将输出关闭。 7.4.1 脚本的执行原理在脚本的执行过程中，浏览器客户端与应用服务器采用请求/响应模式进行交流。 7.5 JavaScript 的基本语法 7.5.1 HTML 中插入脚本 1、内部使用 108 赛杰 IT 教育中心编写第一个 JavaScript 程序。通过它可说明 JavaScript 的脚本是怎样被嵌入到 HTML 文档中的。 < Script Language ="JavaScript"> // JavaScript Appears here. alert("这是第一个 JavaScript 例子!"); alert("欢迎你进入 JavaScript 世界!"); alert("今后我们将共同学习 JavaScript 知识！"); 效果如图: 说明:上面的 HTML 文档，其标识格式为标准的 HTML 格式；如同 HTML 标识语言一样， JavaScript 程序代码是一些可用字处理软件浏览的文本，它在描述页面的 HTML 相关区域出现。 alert()是 JavaScript 的窗口对象方法，其功能是弹出一个具有 OK 对话框并显示（）中的字符串。理论上，可以将 JavaScript 语句放置在 HTML 文档中的任何位置。然而，将核心脚本语句放置在标签与之间是一个良好的编程习惯，将 JavaScript 标识放置... 在头部之间，使之在主页和其余部分代码之前装载，从而可使代码的功能更强大。有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。 2、使用外部的 javascript 代码为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。注意：外部文件不能包含 109 编程改变生活励志照亮人生 3、javascript 中的注释 1) 单行的注释以 // 开始。本例用单行注释来解释代码： 2) 多行注释以 /* 开头，以 */ 结尾。 7.5.2 基本数据类型 JavaScript 脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。JavaScript 提供了四种基本的数据类型用来处理数字和文字, 而变量提供存放信息的地方, 表达式则可以完成较复杂的信息处理。 1、基本数据类型在 JavaScript 中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或‘’ 括起来的字符或数值）、布尔型（使 True 或 False 表示）和空值。在 JavaScript 的基本类型中的数据可以是常量，也可以变量。由于 JavaScript 采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。 2、常量 a) 整型常量 JavaScript 的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。 b) 实型常量实型常量是由整数部分加小数部分表示，如 12.32、193.98 。可以使用科学或标准方法表示：5E7、4e5 等。 c) 布尔值布尔常量只有两种状态：True 或 False。它主要用来说明或代表一种状态或标志，以说明操作流程。它与Ｃ是不一样的，Ｃ可以用１或０表示其状态，而 JavaScript 只能用 True 或 False 表示其状态。 d) 字符型常量 110 赛杰 IT 教育中心使用单引号（‘）或双引号（“）括起来的一个或几个字符。如 "This is a book of JavaScript "、"3245"、"ewrt234234" 等。 e) 空值 JavaScript 中有一个空值 null,表示什么也没有。如试图引用没有定义的变量,则返回一个 Null 值。 f) 特殊字符同Ｃ语言一样，JavaScript 中同样以反斜杠（／）开头的不可显示的特殊字符。通常称为控制字符。 3、变量 a) 变量的定义 JavaScript 中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时确定类型。但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript 中变量的定义用关键字 var 来实现。例如，定义一个名为 id 的变量：变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 b) 变量的命名 JavaScript 是一种区分大小写的语言，因此将一个变量命名为 myCounter 和将其命名为 mYCounter 是不一样的。另外，变量的名称其长度可以任意，但必须遵循若干规则： ·第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。 ·后续的字符可以是字母、数字、下划线或美元符。 ·变量名称不能是保留字。 c) 变量的类型在 JavaScript 中，变量可以用命令 Var 作声明: var mytest; 该例子定义了一个 mytest 变量。但没有赋予它的值。 Var mytest=”This is a book” 该例子定义了一个 mytest 变量, 同时赋予了它的值。在 JavaScript 中，变量可以不作声明，而在使用时再根据数据的类型来确其变量的类型。如： x=100 y="125" xy= True cost=19.5 等。其中 x 整数，y 为字符串，xy 为布尔型，cost 为实型。 eg1: 声明变量说明：prompt("请输入一个数字",1); 表示带有输入栏的弹出窗口, 前面表窗口名称，后面参数是输入的默认值。 d ) 数据类型的转换(介绍常见的两个): parseInt (String) 将字符串转换为整型数字如: parseInt (“86”)将字符串“86”转换为整型值 86 parseFloat(String) 将字符串转换为浮点型数字如: parseInt (“34.45”)将字符串“34.45”转换为浮点值 34.45 e ) 变量的声明及其作用域 JavaScript 变量可以在使用前先作声明，并可赋值。通过使用 var 关键字对变量作声明。对变量作声明的最大好处就是能及时发现代码中的错误；因为 JavaScript 是采用动态编译的，而动态编译是不易发现代码中的错误，特别是变量命名的方面。变量的生命周期又称为作用域，是指某变量在程序中的有效范围。根据作用域，变量可以分为全局变量和局部变量。 (1) 全局变量的作用域是全局性的，即在整个 JavaScript 程序中，全局变量处处都在。 (2) 而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。在 JavaScript 中可以有两种方式声明全局变量：第一种:声明变量时不使用 var 关键字第二种:在函数外部使用 var 关键字声明变量使用第一种方法声明变量时，就算是在函数内部，该变量仍为全局变量，使用第二种方法声明变量时，就算是用 var 关键字，那么声明的变量也是全局变量。 eg1： 112 赛杰 IT 教育中心为什么结果与大家公认的不一致呢，让我们把程序做稍微的改动：程序代码如下: 总结: 如果我们在函数内部声明了一个全局变量，也就是声明变量时未使用 var 关键字，当我们在其他地方使用该变量时，必须保证该函数已被调用，所以，如果真的要使用全局变量还是在函数外部声明的好。 7.5.3、表达式和运算符１、表达式在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又称一个叫表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。２、运算符运算符完成操作的一系列符号，在 JavaScript 中有算术运算符，如＋、-、*、/等；有比较运算符如!＝、＝＝等; 有逻辑布尔运算符如！（取反）、|、||; 有字串运算如＋、＋＝等。在 JavaScript 主要有双目运算符和单目运算符。其双目运算符由下列组成：操作数１运算符操作数２即由两个操作数和一个运算符组成。如 50＋40、"This"+"that"等。单目运算符，只需一个操作数，其运算符可在前或后。（１）算术运算符 JavaScript 中的算术运算符有单目运算符和双目运算符。双目运算符： +（加）、-（减）、 *（乘）、 /（除）、 %（取模）、|（按位或）、&(按位与)、<< （左移）、 >>（右移）、 >>>（右移，零填充）。单目运算符： -（取反）、~（取补）、++（递加 1）、--（递减 1）。（２）比较运算符比较运算符它的基本操作过程是，首先对它的操作数进行比较，尔后再返回一个 true 或 113 编程改变生活励志照亮人生 False 值，有８个比较运算符: <(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)、===（等同于）。（３）布尔逻辑运算符在 JavaScript 中增加了几个布尔逻辑运算符: !（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、 ^= （异或之后赋值）、 ^（逻辑异或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。其中三目操作符主要格式如下：操作数？结果１：结果２若操作数的结果为真，则表述式的结果为结果１，否则为结果２。（4）运算符优先极 JavaScript 中的运算符是按照一个特定的顺序来求值的。这个顺序就是运算符的优先级。下表按从最高到最低的优先级列出了这些运算符。处于同一行中的运算符按从左至右的顺序求值。运算符描述 . [] () 字段访问、数组下标以及函数调用 ++ -- - ~ ! typeof new void delete 一元运算符、返回数据类型、对象创建、未定义值 */% 乘法、除法、取模 +-+ 加法、减法、字符串连接 << >> >>> 移位 < <= > >= 小于、小于等于、大于、大于等于 == != === !== 等于、不等于、恒等、不恒等 & 按位与 ^ 按位异或 | 按位或 && 逻辑与 || 逻辑或 ?: 条件 = oP= 赋值、运算赋值 , 多重求值圆括号可用来改变求值顺序。圆括号中的表达式应在其用于语句的其余部分之前全部被求值。注意：用于字符串的 + 运算符 + 运算符用于把文本值或字符串变量加起来（连接起来）。 114 赛杰 IT 教育中心如需把两个或多个字符串变量连接起来，请使用 + 运算符。例如： txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; 在以上语句执行后，变量 txt3 包含的值是 "What a verynice day"。 eg：数据类型 7.5.4 综合案例制作一小型计算器:效果图如下: 其中的 JavaScript 代码如下: 7.6 逻辑控制语句在任何一种语言中，程序控制流是必须的，它能使得整个程序减小混乱，使之顺利按其一定的方式执行。下面是 JavaScript 常用的程序控制流结构及语句: １、if 条件语句 a) 基本格式: if（表述式）语句段１； ...... else 语句段２； ..... 功能：若表达式为 true，则执行语句段１；否则执行语句段２。说明： if -else 语句是 JavaScript 中最基本的控制语句，通过它可以改变语句的执行顺序。表达式中必须使用关系语句来实现判断，它是作为一个布尔值来估算的。它将零和非零的数分别转化成 false 和 true。若 if 后的语句有多行，则必须使用花括号将其括起来。 b) if 语句的嵌套 if（布尔值）语句１； else（布尔值）语句２； else if（布尔值）语句３； …… else 语句４；在这种情况下，每一级的布尔表述式都会被计算，若为真，则执行其相应的语句，否则执行 else 后的语句。 eg1： 116 赛杰 IT 教育中心 if (monkey_behavior == "good") { var toy = "videogames"; } else { var toy = "rocks"; } 等价于： var toy = (monkey_behavior=="good") ? "videogames" : "rocks"; eg2 ：判断时间段２、For 循环语句基本格式 for（初始化；条件；增量）语句集；功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。说明：初始化：初始化参数告诉循环的开始位置，必须赋予变量的初值；条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出。增量：主要定义循环控制变量在每次循环时按什么方式变化。注意：三个主要语句之间，必须使用逗号分隔。 eg1: * 在脚本的运行次数已确定的情况下使用 for 循环。例子中定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。显示结果: The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10 ３、while 循环基本格式 while (变量<=结束值) { 需执行的代码 } 该语句与 For 语句一样，当条件为真时，重复循环，否则退出循环。 eg1: 下面的例子定义了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。 eg2: 学会 do—while 的使用: For 与 while 语句两种语句都是循环语句，使用 For 语句在处理有关数字时更易看懂，也较紧凑；而 while 循环对复杂的语句效果更特别。４、break 和 continue 语句与 C 语言相同，使用 break 语句使得循环从 For 或 while 中跳出，continue 使得跳过循环内剩余的语句而进入下一次循环。 1) break: 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。 eg1: break 结果显示: The number is 0 The number is 1 The number is 2 ２）continue 命令会终止当前的循环，然后从下一个值继续运行。结果显示： The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10 ５、For...In 声明用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。语法： for (变量 in 对象) { 在此执行代码 }“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。 eg1：使用 for ... in 循环遍历数组。 7.7 JavaScript 的高级语法---自定义函数函数为程序设计人员提供了一个非常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript 函数可以封装那些在程序中可能要多次用到的模块，并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与 120 赛杰 IT 教育中心事件驱动相关联。这是与其它语言不样的地方。同时，将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。１、JavaScript 函数定义 Function 函数名（参数,变元）{ 函数体;. Return 表达式; } 说明：当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字 Function 定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。 function 函数名(var1,var2,...,varX) { 代码．．． } var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。通过指定函数名（实参）来调用一个函数。必须使用 Return 将值返回。函数名对大小写是敏感的。 eg1 ：
２、函数中的形式参数：在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在 JavaScript 中可通过 arguments .Length 来检查参数的个数。例： Function function_Name(exp1,exp2,exp3,exp4) Number =function _Name . arguments .length; if (Number>1） 121 编程改变生活励志照亮人生 document.wrile(exp2); if (Number>2) document.write(exp3); if(Number>3) document.write(exp4); ... 3、与函数关系密切的 return 语句 return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子下面的函数会返回两个数相乘的值（a 和 b）： function prod(a,b) { x=a*b return x } 当您调用上面这个函数时，必须传入两个参数： product=prod(2,3) 而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。【课堂收获】 JavaScript 代码都是写在开始标记别摸我

【温故知新】一、选择 l.以下哪个变量名是非法的？() A .numb_1 B.2numb c .sum D. de2$f 2. JavaScript 的表达式”总价钱足"+800+”元“的结果是什么？() A. 一条错误消息 B.“总价钱是”+800+”元“ 123 编程改变生活励志照亮人生 c.“总价钱是“800”元“ D. 总价钱是 800 元 3. JavaScript 的表达式 parseInt("8")+parseFloat{'8')的结果足多少?〔) A. 8+8 B .88 c .16 D.”8”+’8’ 4.语句中，()语句是根据表达式的值，进行匹配，然后执行其中的一个语句块。如果找不到匹配项，则执行默认语句块。 A.switch B .if-else C .for D. 字符串运算符 5.下列有关函数的说法中哪两项是正确的?() A.函数名称是不区分大小写的，所以 errMsg（）和 errmsg( )表示的是同一个函数 B . 函数可以有多个参数，每个参数之间用分号隔开 C.在函数的第一行还包括一个大括号，这是一种常用的风格，也可以将次大括号放到下一行 D.函数可以有返回值，也可以没有返回值，如果有返回值，必须使用 return 语句二、简答题 1.根据你的理解，请简述 JavaScript 脚本的执行原理。 2.使用 JavaScript 脚本输出如下所示的页面。 3.使用 Javascript 脚本输出如图 1.13 所示的页面 124 赛杰 IT 教育中心第八章 JavaScript 核心语言对象【学习目标】 � 使用数组 � 理解 JavaScript 对象 � 使用 String、Math 和 Date 等对象 � 会使用 window 对象的 setTimeout()方法和 Date 对象制作日期显示效果【本章简介】 JavaScript 语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供像抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然 JavaScript 语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大 JavaScript 的应用范围，增强编写功能强大的 Web 文档。【理论课堂】 8.1 javascript 中的数组 1、使用 New 创建数组 JavaScript 中没有提供像其它语言具有明显的数组类型，但可以通过 function 定义一个数组，并使用 New 对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。 a ) 定义数组: 数组对象用来在单独的变量名中存储一系列的值。我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象： var myArray=new Array()有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。 var mycars=new Array() mycars[0]="Saab" mycars[1]="Volvo" mycars[2]="BMW" 也可以使用一个整数自变量来控制数组的容量： var mycars=new Array(3) mycars[0]="Saab" mycars[1]="Volvo" mycars[2]="BMW"2: var mycars=new Array("Saab","Volvo","BMW") 注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。 b ) 访问数组通过指定数组名以及索引号码，你可以访问某个特定的元素。下面是代码行： document.write(mycars[0])下面是输出： 125 编程改变生活励志照亮人生 Saab c ) 修改已有数组中的值如需修改已有数组中的值，只要向指定下标号添加一个新值即可： mycars[0]="Opel";现在，以上代码： document.write(mycars[0]);将输出： Opel 2、内部数组在 Java 中为了方便内部对象的操作，可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。 anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。 links[]: 使用来定义一个越文本链接项。 Forms[]: 在程序中使用多窗体时,建立该数组。 Elements[]:在一个窗口中使用从个元素时,建立该数组。 Frames[]:建立框架时，使用该数组 anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而 anchors[] 反映 Web 页面中的链接属性。 eg：有关锚数组的文档：定义第一个锚名 HTML 代码定义第二个锚名 HTML 代码建立锚的链接效果显示: George,John,Thomas,James,Adrew,Martin b) 用数组的元素组成字符串 - join() 如何使用 join() 方法将数组的所有元素组成一个字符串。 eg2: 效果显示: George,John,Thomas George.John.Thomas c) 文字数组 - sort() 如何使用 sort() 方法从字面上对数组进行排序。 eg1: 效果显示: George,John,Thomas,James,Adrew,Martin Adrew,George,James,John,Martin,Thomas d) 数字数组 - sort() 赛杰 IT 教育中心 127 编程改变生活励志照亮人生如何使用 sort() 方法从数值上对数组进行排序。效果显示: 10,5,40,25,1000,1 1,5,10,25,40,1000 8.2 JavaScript 对象基础 JavaScript 语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然 JavaScript 语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大 JavaScript 的应用范围，增强编写功能强大的 Web 文文件。 8.2.1 String 对象字符串是 JavaScript 的一种基本的数据类型。String 对象的 length 属性声明了该字符串中的字符数。String 类定义了大量操作字符串的方法。需要注意的是，JavaScript 的字符串是不可变的，String 类定义的方法都不能改变字符串的内容。下表是 String 对象的方法: 方法描述 anchor() 创建 HTML 锚。 big() 用大号字体显示字符串。 blink() 显示闪动字符串。 bold() 使用粗体显示字符串。 charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 concat() 连接字符串。 128 赛杰 IT 教育中心 fixed() 以打字机文本显示字符串。 fontcolor() 使用指定的颜色来显示字符串。 fontsize() 使用指定的尺寸来显示字符串。 fromCharCode() 从字符编码创建一个字符串。 indexOf() 检索字符串。 italics() 使用斜体显示字符串。 lastIndexOf() 从后向前搜索字符串。 link() 将字符串显示为链接。 localeCompare() 用本地特定的顺序来比较两个字符串。 match() 找到一个或多个正在表达式的匹配。 replace() 替换与正则表达式匹配的子串。 search() 检索与正则表达式相匹配的值。 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 small() 使用小字号来显示字符串。 split() 把字符串分割为字符串数组。 strike() 使用删除线来显示字符串。 sub() 把字符串显示为下标。 substr() 从起始索引号提取字符串中指定数目的字符。 substring() 提取字符串中两个指定的索引号之间的字符。 sup() 把字符串显示为上标。 toLocaleLowerCase () 把字符串转换为小写。 toLocaleUpperCase () 把字符串转换为大写。 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 toString() 返回字符串。 valueOf() 返回某个字符串对象的原始值。 1、字符串对象用于处理已有的字符块。 eg1: 下面的例子使用字符串对象的长度属性来计算字符串的长度。 var txt="Hello world!" document.write(txt .length)上面的代码输出为：12 eg2: 下面的例子使用字符串对象的 toUpperCase()方法将字符串转换为大写： var txt="Hello world!" document.write(txt.toUpperCase())上面的代码输出为：HELLO WORLD! 2、字符串对象的其他方法的实例 a）计算字符串的长度如何使用长度属性来计算字符串的长度。 129 编程改变生活励志照亮人生结果显示：12 b）为字符串添加样式如何为字符串添加样式。效果显示： 130 赛杰 IT 教育中心 c）indexOf() 方法如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。没有找到则返回 -1。 eg：效果显示： 0 -1 6 d）match() 方法 131 编程改变生活励志照亮人生如何使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。 eg：效果显示： world null null world! e）如何替换字符串中的字符 - replace() 如何使用 replace() 方法在字符串中用某些字符替换另一些字符。 eg：效果显示: Visit SUNJOB 8.2.2 Math（算数）下表是 Math 对象常用到函数及其功能介绍: 方法描述 abs(x) 返回数的绝对值 acos(x) 返回数的反余弦值 asin(x) 返回数的反正弦值 atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 atan2(y, x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间） ceil(x) 对一个数进行上舍入。 cos(x) 返回数的余弦 exp(x) 返回 e 的指数。 132 赛杰 IT 教育中心 floor(x) 对一个数进行下舍入。 log(x) 返回数的自然对数（底为 e） max(x,y) 返回 x 和 y 中的最高值 min(x,y) 返回 x 和 y 中的最低值 pow(x,y) 返回 x 的 y 次幂 random() 返回 0 ~ 1 之间的随机数 round(x) 把一个数四舍五入为最接近的整数 sin(x) 返回数的正弦 sqrt(x) 返回数的平方根 tan(x) 返回一个角的正切 1) JavaScript 提供多种可被 Math 对象访问的算数值：及其使用方法列表: 圆周率 Math.PI 2 的平方根 Math.SQRT2 1/2 的平方根 Math.SQRT1_2 2 的自然对数 Math.LN2 10 的自然对数 10 的自然对数以 2 为底的 e 的对数 Math.LOG2E 以 10 为底的 e 的对数 Math.LOG10E 2) 除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。函数（方法）实例： eg1: 下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。 document.write(Math.round(4.7))上面的代码输出为：5 eg2: 下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数： document.write(Math.random())上面的代码输出为：0.9370844220218102 eg3: 下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数： document.write(Math.floor(Math.random()*11)) 上面的代码输出为：3 说明: Math.ceil(x) -- 返回大于等于数字参数的最小整数(取整函数)，对数字进行上舍入。 Math.floor(x)--返回小于等于数字参数的最大整数，对数字进行下舍入。 3) 其他的函数使用实例: a) round() 如何使用 round()。 eg: 效果显示: 1 1 0 -4 -5 b) random() 如何使用 random() 来返回 0 到 1 之间的随机数。 eg: c) max() 如何使用 max() 来返回两个给定的数中的较大的数。 eg: 效果显示: 7 5 -3 7.3 d) min() 如何使用 min() 来返回两个给定的数中的较小的数。 eg: 效果显示: 134 赛杰 IT 教育中心 5 -3 -5 7.25 8.2.3 Data 对象 Date 对象是 JavaScript 的一种内部数据类型。Date 对象没有可以直接读写的属性，所有对日期和时间值的访问都是通过其方法执行的。请从下面的表格访问有关 Date 对象的方法的详细信息。方法描述 Date() 返回当日的日期和时间 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) getMonth() 从 Date 对象返回月份 (0 ~ 11) getFullYear() 从 Date 对象以四位数字返回年份 getYear() 从 Date 对象以两位或四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23) getMinutes() 返回 Date 对象的分钟 (0 ~ 59) getSeconds() 返回 Date 对象的秒数 (0 ~ 59)) getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999) getTime() 返回 1970 年 1 月 1 日至今的毫秒数 getTimezoneOffset( ) 返回本地时间与格林威治标准时间的分钟差 (GMT) getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31) getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6) getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11) getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份 getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23) getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59) getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59) getUTCMilliseconds () 根据世界时返回 Date 对象的毫秒(0 ~ 999) parse() 返回 1970 年 1 月 1 日午夜到指定日期（字符串）的毫秒数 setDate() 设置 Date 对象中月的某一天 (1 ~ 31)) setMonth() 设置 Date 对象中月份 (0 ~ 11)) setFullYear() 设置 Date 对象中的年份（四位数字） setYear() 设置 Date 对象中的年份（两位或四位数字）。 setHours() 设置 Date 对象中的小时 (0 ~ 23) setMinutes() 设置 Date 对象中的分钟 (0 ~ 59) setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59) 135 编程改变生活励志照亮人生 setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999) setTime() 通过向或从 1970 年 1 月 1 日午夜添加或减去指定数目的毫秒来计算日期和时间 setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31) setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11) setUTCFullYear() 根据世界时设置 Date 对象中年份（四位数字） setUTCHours() 根据世界时设置 Date 对象中小时 (0 ~ 23) setUTCMinutes() 根据世界时设置 Date 对象中分钟 (0 ~ 59) setUTCSeconds() 根据世界时设置 Date 对象中秒钟 (0 ~ 59) setUTCMilliseconds () 根据世界时设置 Date 对象中毫秒 S(0 ~ 999) toString() 把 Date 对象转换为字符串。 toTimeString() 把 Date 对象的时间部分转换为字符串。 toDateString() 把 Date 对象的日期部分转换为字符串。 toGMTString() 根据格林威治时间，把 Date 对象转换为字符串。 toUTCString() 根据世界时，把 Date 对象转换为字符串。 toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 toLocaleTimeString () 根据本地时间格式，把 Date 对象的时间部分转换为字符串 toLocaleDateString () 根据本地时间格式，把 Date 对象的日期部分转换为字符串 UTC() 根据世界时，获得一个日期，然后返回 1970 年 1 月 1 日午夜到该日期的毫秒数。 1、定义日期 Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象： var myDate=new Date() 注释：Date 对象自动使用当前的日期和时间作为其初始值。 2、操作日期通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。 eg1: 在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)： var myDate=new Date() myDate.setFullYear(2008,8,9) eg2: 在下面的例子中，我们将日期对象设置为 5 天后的日期： var myDate=new Date() myDate.setDate(myDate.getDate()+5)注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。 3、比较日期日期对象也可用于比较两个日期。下面的代码将当前日期与 2008 年 8 月 9 日做了比较： var myDate=new Date(); myDate.setFullYear(2008,8,9); 136 赛杰 IT 教育中心 var today = new Date(); if (myDate>today) { alert("Today is before 14th January 2010"); } else { alert("Today is after 14th January 2010"); } 4、日期对象函数部分实例 a）返回当日的日期和时间：如何使用 Date() 方法或者当日的日期。效果显示： Sun Jul 26 11:27:34 2009 b） getTime() ，使用 getTime() 计算从 1970 年到今天有多少年。 eg： c ）setFullYear() ，如何使用 setFullYear() 得到精确的日期。 eg： 137 编程改变生活励志照亮人生效果显示： Tue Nov 3 12:08:34 UTC+0800 1992 d）toUTCString()，如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。 eg：效果显示： Sun, 26 Jul 2009 04:10:36 UTC e） getDay() ，如何使用 getDay() 来显示星期，而不仅仅是数字。 eg： f）综合实例显示一个钟表：如何在网页上显示一个钟表。 eg：

【课堂收获】 139 编程改变生活励志照亮人生【上机手册 1. 使用 JavaScript 编写一个用于验证用户名和密码有效性的网页，如图 8-1 所示。要求：用户名不能为空，并且只能由数字和字母组成。密码也不能为空，而且其长度必须是 6 位以上（包括 6 位）。若用户输入的用户名或密码不对，就弹出相应的错误提示警告对话框，如图 8-1 所示是用户输入的密码为空时，就弹出的警告对话框。图 8-1 验证用户名和密码有效性页面提示： (1)通过 String 对象 index0f()方法来验证 E-mail 地址是否包含“@”符号和“、”符号。 (2) 通过复选框的 checked 属性来判断复选框是否被选中. 2、使用 JavaScript 编写一个用于验证输入的日期格式是否正确的网页，如图 8-2 所示。要求:输入的日期必须是 10 位，不能多也不能少。还要求第 5 位和第 8 位必须是“/”符号，另外年份、月份和日必须是大于 0 的数字，如 2007/11/05 是合法的日期格式，2007/-1/5 是非法的日期格式。若用户输入的日期格式不对，就弹出相应的错误提示警告对话框。提示： (1)通过 String 对象的 charAt()方法和 length 属性来判断断入的日期格式是否正确. (2)使用 String 对象的方法 split（“分割的标志符”），来返回一个按照分割标志符拆分的数组，然后按照数组下标判断每个数组中的元素是否是数字，在判断数组中的元素是否是数字时可以使用 isNaN()方法。图 8-2 验证输入的日期格式 140 赛杰 IT 教育中心第九章对象 JavaScript 中的浏览器对象【学习目标】 � 理解事件处理程序的概念 � 了解 JavaScript 中的常用事件 � 掌握常用的浏览器对象： � window � document � history 【理论课堂】 9.1 事件 1、事件基本概念 JavaScript 是基于对象(object-based)的语言。这与 Java 不同。Java 是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它是在用图形界面的环境下，使得一切输入变得简单化。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。２、事件处理程序在 JavaScript 中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下： Function 事件处理名（参数表）{ 事件处理语句集； …… } ３、事件驱动 JavaScript 事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：（１）单击事件 onClick 当用户单击鼠标按钮时，产生 onClick 事件。同时 onClick 指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重要按钮） submit buttons（提交按钮）例如可通过下列按钮激活 change()函数的 javascript 文件：在 onClick 等号后，可以使用自己编写的函数作为事件处理程序，也可以使用 JavaScript 中内部的函数。还可以直接使用 JavaScript 的代码等。例： 141 编程改变生活励志照亮人生当鼠标单击按钮的时候，自动弹出一个 alert 对话框，显示的结果如图: （２）onChange 改变事件当利用 text 或 texturea 元素输入字符值改变时发该事件，同时当在 select 表格项中一个选项状态改变后也会引发该事件。例：当文本框的内容发生改变的时候，就回自动弹出一个 alert 框，显示的结果如图: （３）选中事件 onSelect 当 Text 或 Textarea 对象中的文字被加亮后，引发该事件。例子: 142 赛杰 IT 教育中心当文本框中内容被选中的时候就会自动弹出对话框，显示的结果如图: 可以看出当文本框的内容 test 被选中的时候， onselect 事件就被触发了. （４）获得焦点事件 onFocus 当用户单击 Text 或 textarea 以及 select 对象时，产生该事件。此时该对象成为前台对象。例子：
当我们用鼠标选中一个文本框的时候，触发 Onfocus 事件，弹出一个对话框。显示的结果如图：（５）失去焦点 onBlur 当 text 对象或 textarea 对象以及 select 对象不再拥有焦点、而退到后台时，引发该文件， 143 编程改变生活励志照亮人生它与 onFocas 事件是一个对应的关系。（６）载入文件 onLoad 当文档载入时，产生该事件。onLoad 一个作用就是在首次载入一个文档时检测 cookie 的值，并用一个变量为其赋值，使它可以被源代码使用。（７）卸载文件 onUnload 当 Web 页面退出时引发 onUnload 事件，并可更新 Cookie 的状态。一个 JavaScript 的测试程序图 9-1 出始窗口说明：这个 HTML 页的起始页如图 9-1 所示，上面只有一个元素，即一个按钮。如果不设置任何事件，但单击该按钮后不会有任何反应。但现在，定义了单击按钮的 onClick 事件，并把事件交给了脚本程序 KKK()处理。这是实现交互的第一步。接着，用户单击按钮后，浏览器中将出现一个如图 9-2 所示 JavaScript 的对话框，框中提示用户输入姓名。这时，只要输入姓名并且单击“确定”按钮，就可以看到浏览器的显示结果如图 9-3 所示。 144 图 9-2 提示窗口赛杰 IT 教育中心图片 9-3 最终效果显示窗口 3、常见的事件列表: 事件名说明 onClick 鼠标单击 onChange 文本内容或下拉菜单中的选项发生改变 onFocus 获得焦点，表示文本框等获得鼠标光标。 onBlur 失去焦点，表示文本框等失去鼠标光标。 onMouseOver 鼠标悬停，即鼠标停留在图片等的上方 onMouseOut onMouseMove 鼠标移出，即离开图片等所在的区域鼠标移动，表示在

层等上方移动 onLoad 网页文档加载事件 onSubmit 表单提交事件 onMouseDown 鼠标按下 onMouseUp 鼠标弹起表 9-1 常见的事件说明 9.2 JAVASCRIPT 浏览器对象之 Window 对象在浏览器对象中，Window 对象表示浏览器的窗口，其他对象都继承自 Window 对象，并且是通过 Window 对象访问的。Window 对象可用于检索有关窗口的状态信息，也可以用来显示 Document 对象和访问窗口中发生的事件。由于 Window 对象是其他浏览器对象的共同祖先，所以一般在 JavaScript 程序中可以省略 Window 对象。 1、window 对象的属性和方法浏览器打开 HTML 文档时，通常会创建一个 Window 对象。然而，如果文档中定义了一个或多个框架，浏览器将为原始文档创建一个 Window 对象，并为每一个框架创建一个附加的 Window 对象。附加的对象是原始窗口的子窗口，会受到原始父窗口中发生的操作的影响。例如，如果关闭原始窗口，所有的子窗口也会被关闭。表 9-2 和表 9-3 列出了 Window 对象的属性和方法。 145 编程改变生活励志照亮人生表 9-2 属性： Window 对象的属性名称说明 document 表示浏览器窗口中的 HTML 文档 event 提供所发生事件的信息，给出关于触发事件的元素、键盘上键的状态、鼠标的位置和鼠标按钮的状态等事件的信息。 history 包含有关客户访问过的 URL 信息 location 包含有关当前 URL 的信息。 name 设置或检索窗口或框架的名称 navigator 包含有关 Web 浏览器的信息 screen 包含客户端屏幕和显示性能的信息 parent 表示当前窗口的父窗口 status 设置或检索窗口底部状态栏内的信息 defaultStatus 设置在窗口状态栏中显示的默认信息（在加载页面时显示） external 返回浏览网页的主机表 9-3 方法： window 方法名称说明 alert(“msg”) 显示包含信息的对话框 close 关闭当前浏览器窗口。 focus() 使控件接收焦点 open( “ url “ ，打开新窗口，并加载 URL 中指定的文档；如果没有提供 URL， “name”) 则打开一个空白文档。注意：Window 属性、方法和集合的名称是保留的关键字，不能用作变量名和函数名。 eg1：得到当前窗口的信息： JavaScript eg2：学会使用 window 对象使用 Window 对象在以上代码中，使用了 open 方法在新窗口中打开网页，使用了 close 方法关闭新打开的窗口。 eg3：弹出一自定义的广告窗口

这个图片广告是和我一起来的的

说明: 窗体属性可能值描叙 height integer Height of new window in pixels left integer Window's left starting position in pixels scrollbars status toolbar top yes, no yes, no yes, no integer Show scrollbars if page too large to fit in window Show status bar Show toolbar Window's top starting position in pixels 147 编程改变生活励志照亮人生 width integer Width of new window in pixels 2、window 对象常见的三种弹出窗口：使用 JavaScript，我们可以生成三种弹出窗口：提示窗口，确认窗口和提问窗口。 a）警示窗口（Alert Box）警示窗口通常用来确保用户收到某项信息，因为当一个提示窗口弹出后，用户必须点击“确认”（“OK”）按钮才能继续。语法： alert(”文本内容”); 例子（将例中内容存为一个 html 文件以测试效果）： b）确认窗口（Confirm Box）确认窗口通常在你需要用户验证或接受某些信息时使用。当一个确认窗口弹出后，用户必须选择点击”确认”（”OK”）或“取消”（”Cancel”）按钮才能继续。如果用户选择”确认”（”OK”），窗口返回值为真(true)。如果用户选择“取消”（”Cancel”），窗口返回值为假(false)。语法： confirm(”文本内容”); 例子（将例中内容存为一个 html 文件以测试效果）： c）提问窗口（Prompt Box）如果你需要用户在进入页面前先输入某些信息，通常使用提问窗口。当一个提问窗口弹出后，用户需要输入某些信息并选择”确认”（”OK”）或“取消”（” Cancel”）方能继续。如果用户选择了“确认”（”OK”），窗口返回值为用户输入的信息，否则，返回空值(null)。语法： prompt(”文本内容”,”默认值”) 例子（将例中内容存为一个 html 文件以测试效果）： 3、window.setTimeout()和 window.setInterval window 对象提供了两个方法来实现定时器的效果，分别是 window.setTimeout() 和 window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下： window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 其中，expression 可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是 milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法： a） window.setTimeout 方法该方法可以延时执行一个函数，例如：这段代码将使得页面打开 5 秒钟后显示对话框“hello”。其中最后一句也可以写为： window.setTimeout("hello()",5000); 如果在延时期限到达之前取消延执行，可以使用 window.clearTimeout(timeoutId)方法，该方法接收一个 id，表示一个定时器。这个 id 是由 setTimeout 方法返回的，例如：这样，如果要取消显示，只需单击页面任何一部分，就执行了 window.clearTimeout 方法，使得超时操作被取消。 b） window.setInterval 方法该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和 clearTimeout 方法类似，可以调用 window.clearInterval 方法。clearInterval 方法同样接收一个 setInterval 方法返回的值作为参数。例如： //定义一个反复执行的调用 var id=window.setInterval("somefunction",10000); //取消定时执行 window.clearInterval(id); 上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到 setInterval 方法，下面将设计一个秒表，来介绍 setInterval 函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为 0.01 秒，此时再次单击按钮则停止计时，文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下： New Document 150 赛杰 IT 教育中心 3）给定时器调用传递参数无论是 window.setTimeout 还是 window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。例如对于函数 hello(_name)，它用于针对用户名显示欢迎信息： 151 编程改变生活励志照亮人生 var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); } 这时，如果企图使用以下语句来使 hello 函数延迟 3 秒执行是不可行的： window.setTimeout(hello(userName),3000); 这将使 hello 函数立即执行，并将返回值作为调用句柄传递给 setTimeout 函数，其结果并不是程序需要的，而是使用字符串形式可以达到想要的结果： window.setTimeout("hello(userName)",3000); 这里的字符串是一段 JavaScript 代码，其中的 userName 表示的是变量。但这种写法不够直观，而且有些场合必须使用函数名，下面用一个小技巧来实现带参数函数的调用：这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在 window.setTimeout 函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。 9.3 History 历史对象 JavaScript 中的 History 历史对象包含了用户已浏览的 URL 的信息，是指历史对象指浏览器的浏览历史。鉴于安全性的需要，该对象收到很多限制，现在只剩下下列属性和方法。History 历史对象有 length 这个属性，列出历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。 History 历史对象有以下方法： back() 后退，跟按下“后退”键是等效的。 forward() 前进，跟按下“前进”键是等效的。 go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。 152 赛杰 IT 教育中心 9.4 screen 屏幕对象反映了当前用户的屏幕设置。 width 返回屏幕的宽度（像素数）。 height 返回屏幕的高度。 availWidth 返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。 availHeight 返回屏幕的可用高度。 colorDepth 返回当前颜色设置所用的位数 - 1：黑白；8：256 色；16：增强色；24/32：真彩色。 location 地址对象：它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location” 就行了；若要表示某一个窗口的地址，就使用 “<窗口对象>.location”。先前写了一片用 window.location.href 实现刷新另个框架页面，特此我看了一下 locaiton 的详细用法，对此有点改进，具体如下：注意：属于不同协议或不同主机的两个地址之间不能互相引用对方的 location 对象，这是出于安全性的需要。例如，当前窗口打开的是“www.a.com”下面的某一页，另外一个窗口（对象名为：bWindow）打开的是“www.b.com”的网页。如果在当前窗口使用“bWindow.location”，就会出错：“没有权限”。这个错误是不能用错误处理程序（Event Handler，参阅 onerror 事件)来接收处理的。 1、简单介绍一下 location 属性、用法以及相关示例： Location 包含了关于当前 URL 的信息。location 对象描述了与一个给定的 Window 对象关联的完整 URL。location 对象的每个属性都描述了 URL 的不同特性。通常情况下，一个 URL 会有下面的格式：协议//主机:端口路径名称#还是标识?搜索条件：例如：http://www.ijavascript.cn/jiaocheng/index.html#topic1?x=7&y=2 这些部分是满足下列需求的： “协议”是 URL 的起始部分，直到包含到第一个冒号。 “主机”描述了主机和域名，或者一个网络主机的 IP 地址。 “端口”描述了服务器用于通讯的通讯端口。路径名称描述了 URL 的路径方面的信息。 “哈希标识”描述了 URL 中的锚名称，包括哈希掩码(#)。此属性只应用于 HTTP 的 URL。 “搜索条件”描述了该 URL 中的任何查询信息，包括问号。此属性只应用于 HTTP 的 URL。 “搜索条件”字符串包含变量和值的配对；每对之间由一个“&”连接。 a）属性概览 protocol 返回地址的协议，取值为 ‘http:’,'https:’,‘file:’ 等等。 hostname 返回地址的主机名，例如，一个“http://www.microsoft.com/china/”的地址， location.hostname == ‘www.microsoft.com’。 port 返回地址的端口号，一般 http 的端口号是 ‘80′。 host 返回主机名和端口号，如：’www.a.com:8080′。 pathname 返回路径名，如 “ http://www.a.com/b/c.html ” ， location.pathname == ‘b/c.html’。 hash 返回 “ # ” 以及以后的内容，如 “ http://www.a.com/b/c.html#chapter9 ” ， location.hash == ‘#chapter9′；如果地址里没有“#”，则返回空字符串。 search 返回“?”以及以后的内容，如 “ http://www.a.com/b/c.asp?selection=3&jumpto=4 ” ， location.search == ‘?selection=3&jumpto=4′；如果地址里没有“?”，则返回空字符串。 153 编程改变生活励志照亮人生 href 返回以上全部内容，也就是说，返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址，可以使用“location.href = ‘…’”，也可以直接用“location = ‘…’”来达到此目的。 b）方法概览 reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。 replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。【课堂收获】 JavaScript 程序是事件驱动程序 onFocus 获得焦点事件，表示获得鼠标光标， onBlur 失去焦点事件，刚好与之相反浏览器对象是一个分层次的结构，window 是顶层的根对象打开窗口使用 window 对象的 open( )方法设置定时器，使用 window 对象的 setTimeout( )方法 history 对象的 back( )和 forward( )方法等同于前进、后退按钮 154 赛杰 IT 教育中心【上机手册】 1、操作定时器的两个方法：（1）setTimeout(“函数’,毫秒数)：设置定时器，经过指定毫秒值后执行某个函数。（2）clearTimeout(定时器对象)：取消某个定时器。例：动态显示时间 JavaScript

155 编程改变生活励志照亮人生

2、编写程序说明 window.open、window.alert()、window.confirm()等的应用. JavaScript 156 赛杰 IT 教育中心 3、历史对象 history 主要属性： 1 window.history.length:得到浏览器历史清单中的项目个数。主要方法： 1 window.history.back():加载 History 列表中的上一个 URL，相当于 IE 的后退按钮。等同于 window.history.go(-1); 2 window.history.forward():加载 History 列表中的下一个 URL，相当于 IE 的前进按钮。等同于 window.history.go(1); 3 go(“url” or number):加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。 go 上一步 go 下一步跳转到指定 URL back 上一步 forward 下一步 location 的方法： 1 assign(“url”)：加载 URL 指定的新的 HTML 文档。 2 reload()：重新加载当前页。 3 replace(“url”)：通过加载 URL 指定的文档来替换当前文档。 JavaScript 【温故知新】一：选择题 1. String 对象的方法不包括（） A. charAt() B. substring() C. toUpperCase() D. length() 2.使用 String 对象的 indexOf()方法查找字符串"Hello World"是否包含 G，下下列语句描述正确的是()。 A. 字符串“Hello World"“中不包含 G 字符，indexOf 返回 0 B. 字符串“Hello World"“中不包含 G 字符，indexOf 返回 null C. 字符串“Hello World"“中不包含 G 字符，indexOf 返回 -1 D. 字符串“Hello World"“中不包含 G 字符，indexOf 返回 1 3.能够与 onFocus 事件处理程序相关联的表单元素有（） A. 文本框 B. 复选框 C. 窗口 D. 按钮 4. 字符串 str="welcome to Beijing'! 进行下列操作处理，描述结果错误的是（） A.str.substring (4, 9)返回值是"ome t" B. str.lengith 的返回值是”18” C. str.charAt ("4")的返回值是“c” D. str.toUpperCase()的返回值是"WELCOME TO BEIJING" 5.查阅附录 1 中 Stringy 对象，使用 split( "-")方法对字符串’，“北京-东城区-米市大街 8 号。”进行分割的结果是（） A.返回一个长度为 4 的数组 B.返回一个长度为 3 的数组 c.不能返回数组，因为最后一个”-”后面没有数值，代码不能执行 D.能够返回数组，数组最后一个元索的数值为 null 158 赛杰 IT 教育中心第十章 DOM 编程－document 【学习目标】 � 会运用 DOM 模型查找某个 HTME 元素 � 会使用 document 对象的 gctElementByfd()方法访问 DIV 层对象 � 会使用 document 对象的 getElementsByName()方法访问表单元素 � 会使用 DIV 对象的样式属性控制层的隐藏和显示【本章简介】本章将进一步介绍 window 对象下的子对象一 document 对象，并学习如何使用 document 对象的常用方法来制作浮动的广告窗口以及如何控制一个页面中所有的复选框。其中重点是 document 对象的 getEiementById()和 getElementsByName()方法的应用难点是带”关闭“按钮浮动窗口的制作。【理论课堂】 10.1 DOM 对象模型 DOM—Document Object Model，它是 W3C 国际组织的一套 Web 标准。它定义了访问 HTML 文档对象的一套习属性、方法和事件。 DOM 是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给 HTML 与 XML 文件使用的一组 API。DOM 的本质是建立网页与脚本语言或程序语言沟通的桥梁。浏览器对象是一个分层结构，也称为文档对象模型，如下图所示：从上图可以看出：（1）打开网页后，首先看到的是浏览器窗口，即顶层的 window 对象。（2）其次，看到的是网页文档的内容，即 document 文档。因为 window 窗口对象是所有页面的根对象，所以常常省略。 10.2 Document 文档对象 Document 文档对象是 JavaScript 中 window 和 frames 对象的一个属性，是显示于窗口或框架内的一个文档。描述当前窗口或指定窗口对象的文档。它包含了文档从到的内 159 编程改变生活励志照亮人生容。用法：document （当前窗口）或 <窗口对象>.document （指定窗口） 1、Document 的属性说明： document.title //设置文档标题等价于 HTML 的标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的链接颜色 document.URL //设置 URL 属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期，只读属性 document.fileModifiedDate //文件修改日期，只读属性 document.fileSize //文件大小，只读属性 document.cookie //设置和读出 cookie document.charset //设置字符集简体中文:gb2312 lastModified 当前文档的最后修改日期，是一个 Date 对象。 referrer 如果当前文档是通过点击连接打开的，则 referrer 返回原来的 URL。 title 指<head>标记里用<title>…定义的文字。在 Netscape 里本属性不接受赋值。 fgColor 指标记的 text 属性所表示的文本颜色。 bgColor 指标记的 bgcolor 属性所表示的背景颜色。 linkColor 指标记的 link 属性所表示的连接颜色。 alinkColor 指标记的 alink 属性所表示的活动连接颜色。 vlinkColor 指标记的 vlink 属性所表示的已访问连接颜色。 2、Document 的方法： open() 打开文档以便 JavaScript 能向文档的当前位置（指插入 JavaScript 的位置）写入数据。通常不需要用这个方法，在需要的时候 JavaScript 自动调用。 write(); writeln() 向文档写入数据，所写入的会当成标准文档 HTML 来处理。writeln() 与 write() 的不同点在于，writeln() 在写入数据以后会加一个换行。这个换行只是在 HTML 中换行，具体情况能不能给显示出来的文字换行，要看插入 JavaScript 的位置而定。如在

标记中插入，这个换行也会体现在文档中。 clear() 清空当前文档。 close() 关闭文档，停止写入数据。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法来保证所做的更改能够显示出来。如果文档还没有完全读取，也就是说，JavaScript 是插在文档中的，那就不必使用该方法。 getElementById("ID ")：用于获取页面中 ID 标签唯一的对象。 getElementsByName("Name ")：用于获取一个页面中包含所有指定 Name 元素的对象数组。 getElementsByTagName(“TagName”)：用于获取一个页面中包含所有指定标签名元素的对象数组，如 document.getElementsByName(“P”)表示得到文档中所

标签的引用。例如：当然也可以先写好一个 HTML 文件，在 open() 方法中直接 load 这个文件, 例子：通过 doucmnet 的 bgColor 属性动态改变背景色 bgColor 动态改变背景色变红色变绿色变黄色 3、获取目标文档中 HTML 元素 Document 对象包括当前浏览器窗口或框架区域中的所有内容，包含文本域、按钮、单选框、复选框、下拉框、图片、链接等 HTML 页面可访问元素，但不包含浏览器的菜单栏、工具栏和状态栏。 Document 对象提供多种方式获得 HTML 元素对象的引用，如使用 getElementById 举个例子来说明: 赛杰 IT 教育中心同一页面内的引用方法: 1) 使用 id: link1.href，返回值为 http:/ chinasunjob.cn 2) 使用 name: document.all.link1.href，返回值为 http:/ chinasunjob.cn 3) 使用链接集合: document.anchors(0).href 4) getElementById: document.getElementById("link1").href 5) getElementsByName: document.getElementsByName("link1")[0].href //这也是一个集合，是所有 name 等于该方法所带参数的标记的集合。 6) getElementsByTagName: document.getElementsByTagName("A")[0].href //这也是一个集合，是所有标记名称等于 161 编程改变生活励志照亮人生该方法所带参数的标记的集合。 7) tags 集合: document.all.tags("A")[0].href eg1: 如在某目标文档中含有多个通过
和标记对引入的表单，则可通过如下方式获得对该文档中 forms 对象数组长度信息的引用： document.forms.length document.getElementsByTagName("form").length 获取了对象数组信息后，就可以根据目标文档中该类型对象的相对位置定位某对象，如循环检索 forms 数组各表单的 name 属性的代码： var MyForms=document.forms; for(i=0;i fish

获取文件指定的元素

162 赛杰 IT 教育中心 eg3：通过 html 元素的方法，设置页面控件（DIV、table 等）的显示和隐藏。 javascript 控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位：方法一：document.all<"PanelSMS">.style.visibility="hidden"; document.all<"PanelSMS">.style.visibility="visible"; 方法二：document.all<"PanelSMS">.style.display="none"; document.all<"PanelSMS">.style.display="inline"; 方法一隐藏后页面的位置还被控件占用只是不显示类似于.net 验证控件的 Display=Static 方法二隐藏后页面的位置不被占用类似于.net 验证控件的 Display=Dynamic a）实现表格行的显示和隐藏的方法： 1）编写 js 函数 2）要显示/隐藏的 html 元素加上 id 属性

:

3）添加按钮，链接等触发 js 函数显示/隐藏 b）实现 DIV 的显示和隐藏主要代码如下： 163 【课堂收获】编程改变生活励志照亮人生 164 赛杰 IT 教育中心【上机手册】 1. 编写相关的 JavaScript 代码，使用键盘事件，返回按下键盘上的按键所对应的字符。如图 10-1 所示是在键盘上按“g”键时输出的效果。当按下其他键时，也能出现类似的输出效果。提示： (1)使用键盘事件 onKeypress ,也可以使用 onKeyDown 和 onKeyUp 事件。 (2)使用对象 event 的 keycode 属性保存发生键盘事件时按键的 Unicode 值. (3)通过 string 对象的方法 fromCharcode()把字符编码（Unicode 值）转换为对应的字符。图 10-1 按键盘上的 9 键输出的效果 165 编程改变生活励志照亮人生【温故知新】一、选择题 l，光标移到文本框上方时，文本框边框的颜色就改变，这是因为激发了下列的 ()事件。 A.onFocus B. onMoitseUp C.onMouseOver D. onMouseMove 2. 下列那个属性能够实现 l 的隐藏?() A .display: false B .display: hidden C. display: none D. display:”” 3.下列选项中,不属于文本属性的是(). A .font-size B .font-style C .text-align D. font-color 4、页面上有一按钮 btn,同时定义好了一个类样式(按钮图片样式表 btnPic),那么使用() 就可以实现按钮背景图片的改变。 A .onMouseOver="className='btnPic'” B .onMouseOver="this.className='btnPic'" C.onMouseOver="this.style.className='btnPic' " D.this.btn.style.className='btnPic' 5.下列语句描叙正确的是（）。 A. 当页面有多个层堆叠时，按照 z-index 的数值升序先后排列每个层 B. 当页面有多个层堆叠时，按照 z-index 的数值降序先后排列每个层 C. 设置层的显示属性 inline 意味着按块显示，换行显示 D. 设置层的显示属性中 block 念味着按行显示，和其他元索同一行显示 166 赛杰 IT 教育中心第十一章 JavaScript 操作 CSS 样式【学习目标】 � 访问样式表 � 样式表属性 � 添加和删除 CSS 规则 � 改变元素样式 � 元素的 class 名【本章简介】本章将介绍另一种比较特别的特效—css 样式特效。通过定义 css 样式，就可以制作出绚丽多彩的页面。不过为了能动态地改变页面或局部区域的显示外观还需要学习如何使用 JavaScrrtpt 控制 CSS 样，也就是 CSS 样式特效。样式特效非常多, 同时我们会讨论如何通过 JavaScript 在运行时操作 CSS，从而动态地更新应用到我们的元素上的式样。。【理论课堂】 11.1 基础知识样式表是由样式规则组成的，这些规则告诉浏览器如何显示 HTML 文档，虽然添加 CSS 样式有 4 种方法:行内样式表、内嵌样式表(嵌入样式表)、链接外部样式表和导入外部样式表，但是样式表类型只有 3 种：外部样式表、内嵌样式表、行内样式表。下面通过示例分别介绍什么是外部样式表、内嵌样式表、行内样式表。第一种：链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用 HTML 的 link 对象。示例如下：文档标题而在 XML 中，你应该如下例所示在声明区中加入： < ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?> eg1: 外部的 css 文件: outcss_file.css 代码: /*设置无下划线的超连接样式*/ A{ color: blue; text-decoration: none; } A:hover{ /*鼠标在超链接上悬停时变为颜色*/ color: red; } /*设置细边框样式*/ .boxBorder{ 167 编程改变生活励志照亮人生 border-width:1px; border-style:solid; } /*设置图片按钮样式*/ .picButton{ background-image: url(images/back1.jpg); color:#0000FF; border:0 px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } html 代码: 外部样式表应用 168 赛杰 IT 教育中心

第二种：定义内部样式块对象 (Embedding a Style Block) 你可以在你的 HTML 文档的和标记之间插入一个块对象。定义方式请参阅样式表语法。示例如下：文档标题 eg2: 内嵌样式应用

请注意，这里将 style 对象的 type 属性设置为”text/css”，是允许不支持这类型的浏览器忽略样式表单。第三种：行内样式定义 (Inline Styles) 170 赛杰 IT 教育中心行内样式定义即是在对象的标记内使用对象的 style 属性定义适用其它样式表属性。示例如下：

这一行被增加了左右的外补丁

具体的例子 eg: 行内样式应用 171 编程改变生活励志照亮人生

11.2 使用 JavaScript 方法改变样式 1、局部改变样式分为改变直接样式，改变 className 和改变 cssText 三种。需要注意的是： a) 注意大小写： javascript 对大小写十分敏感，className 不能够把“N”写成“n”，cssText 也不能够把 “T”写成“t”，否则无法实现效果。 b) 调用方法：如果改变 className ，则事先在样式表中申明类，但调用时不要再跟 style ，像 document.getElementById('obj').style.className= ” … ” 的写法是错误的！只能写成： document.getElementById('obj').className=”…” eg: 学会使用 className 改变样式改变文字的背景

c) 改变 cssText 173 编程改变生活励志照亮人生但是如果用 cssText 的话，必须加上 style，正确的写法是： document.getElementById('obj').style.cssText=”…” eg:学会使用 cssText

弹出结果: background-color: red; height: 50px; width: 50px d) 改变直接样式它就是直接写到样式的底层了，如: document.getElementById('obj').style.backgroundColor=”#003366″; eg:学会改变直接样式改变背景图 2、全局改变样式通常情况下，我们可以通过改变外链样式的 href 的值实现网页样式的实时切换，也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个 id，如：调用时很简单，如：点我改变样式注意: 对于新手往往不知道 CSS 具体样式在 javascript 怎么写，而且有时候在不同浏览器中要求也不一样。如 float 在 IE 中写成 styleFloat，在 FIREFOX 中写成 cssFloat，这就需要大家的积累了。在 google 中搜索“ccvita javascript”，也许会对你的疑惑有所帮助。 javascript 切换页面样式切换页面样式 StyleSheet1.CSS 样式代码： BODY { background-color: Black; } StyleSheet2.CSS 样式代码： BODY { background-color: maroon; } 【课堂收获】 175 编程改变生活励志照亮人生【上机手册】 1、制作当鼠标移出或移到图片上方时，就改变按钮背景图片；当鼠标移出或移到文本框上方时，就改变文本框边框颜色的特效，如图 11-1 和图 11-2 所示。提示：定义好文本框和按钮在鼠标移到和移出两种不同状态下的显示样式. 通过 this . className=“样式”来改变控件的样式图 11-1 鼠标移出文本框和按钮显示的效果图 11-2 鼠标移到文本框和按钮上显示的效果 2、制作如图 11-3 和图 11-4 所示的图片切换特效。当鼠标移到“找工作”Tab 上时，显示的页面效果如图 11-3 所示：当鼠标移到“填简历”Tab 上时，显示的页面效果如图 11-4 所示。提示： (1)首先要清楚的是“找工作”和“填简历”各自有两种状态对应鼠标的移到和移出。当鼠标移到‘找工作’选项卡上时，‘找工作’状态 1 和填简历状态 2 显示。当鼠标移到“填简历”选项卡时，“找工作”状态 2 和“填简历”状态 1 显示。 (2)利用 document . getElementyld( )方法获得图片对象，然后通过设置其样式的 ddisplay 属性来控制图片是显示还是隐藏。 176 赛杰 IT 教育中心图 11-3 鼠标移到“找工作”Tab 上时的效果图 11-4 鼠标移到“填简历”Tab 上时的效果 3、制作如图 11-5 和图图 11-6 所示的层显示和隐藏特效。初始情况下显示的页面效果如图 11-5 所示；在图 11-5 中，当用户单击超链接文本“注册前请先阅读会员权益和义务”，就显示如图 11-6 所示的页面效果；在图 11-6 中，当用户单击超链接文本“点击关闭”时，又返回到如图 11-5 所示的页面效果。通过反复单击超链接文本“注册前请先阅读会员权益和义务”和“点击关闭“能实现如图 11-5 与图 11-6 之间不断地切换显示。提示： (l)单击“江册前请先阅读会员权盖和义务”（如图 11-5 所示）时，就显示层中的内容（如图 11-6 所示） (2)同时超链接文本改变成“点击关闭”，它是通过修改超链接对象的两年 lnnerHTMl 或者 innerText 属性来实现的。 177 编程改变生活励志照亮人生图 11-5 刚打开时显示的页面效果图 11-6 显示“注册前请先阅读会员权益和义务”的页面效果 178 赛杰 IT 教育中心【温故知新】一、选择题 l，光标移到文本框上方时，文本框边框的颜色就改变，这是因为激发了下列的 ( )事件。 A.onFocus B. onMoitseUp C.onMouseOver D. onMouseMove 2. 下列那个属性能够实现 l 的隐藏?() A .display: false B .display: hidden C. display: none D. display:”” 3.下列选项中,不属于文本属性的是(). A .font-size B .font-style C .text-align D. font-color 4．页面上有一按钮 btn,同时定义好了一个类样式(按钮图片样式表 btnPic),那么使用() 就可以实现按钮背景图片的改变。 A .onMouseOver="className='btnPic'” B .onMouseOver="this.className='btnPic'" C.onMouseOver="this.style.className='btnPic' " D.this.btn.style.className='btnPic' 5.下列语句描叙正确的是（）。 A. 当页面有多个层堆叠时，按照 z-index 的数值升序先后排列每个层 B. 当页面有多个层堆叠时，按照 z-index 的数值降序先后排列每个层 C. 设置层的显示属性 inline 意味着按块显示，换行显示 D. 设置层的显示属性中 block 念味着按行显示，和其他元索同一行显示 179 编程改变生活励志照亮人生第十二章表单验证的相关事件和辅助特效【学习目标】使用与以下各项关联的事件处理程序： � 文本框 � 文本区域 � 命令按钮 � 复选框 � 单选按钮 � 组合框 � 编写用于验证表单的 JavaScript 代码【理论课堂】 12.1 各种类型特效 12.1.1 图片代替按钮效果

图片不具有提交功能，调用提交方法-onSubmit()，onSubmit()方法属于 form 对象中，用图片代替提交按钮步骤： 1.插入图片，并写图片的 onclick 事件； 2.在事件中获得 form 表单元素，给表单元素的 action 属性赋值，还要调用表单元素的 submit（）方法进行提交。参考代码: Untitled Document 180 赛杰 IT 教育中心 12.1.2 回车切换输入的效果 event 的 keyCode 属性用于键盘事件,event.keyCode 表示按的键对应的 unicode 码给输入框定义 onKeyDown 事件 onKeyDown=changefocus(); document.onKeyCode=changefocus; 输入提示的效果 12.2 innerHTML 和 innerText DIV 层的 innerHTML 或 innerTEXT 属性来动态改变层中显示的内容 innerHTML 和 innerText 的区别： innerHTML 的值可以是普通文本或 html 代码； innerText 的值只能是普通文本 html 代码不会被执行如图表示： eg1: msg.innerText = "用户名不可用"; msg.innerHTML = "用户名不可用"; 注意： innerText 在火狐下是不支持的具体的实例： innerHTML 和 innerText

这是一个层

【课堂收获】 182 【上机手册】动态的改变文本开始的文字效果如图：赛杰 IT 教育中心点击文字后，动态的对提问进行了回答： DHtml 举例 12

请点击下边的文字……

您好吗?
您叫什么名字?
恢复原样!

【温故知新】一：选择题 1. 当表单中的”提交“按钮被图片代替后，并且图片还具备”提交“按钮同样的功能，该如何编写这样的表单提交？（） A.在图片上添加 onClick 事件 B .在图片上添加 onSumbit 事件 C.在事件中手动提交 D.在事件中自动提交 2 够返回键盘上的按键所对应字符的事件是（） A.onKeyDown B .onKeyPress C.onKeyUp D.onMouseOver 3 当按键盘上 A 键时，使用]onKeyDown 事件打印 event.keyCode 的结果是（） A. 65 B. 13 C. 97 D. 37 4.在进行表单验证时，当填写的文本框信息有错误时，通常会在文本框后面用红色的特殊字体显示错误信息，那么这种即时错误信息是在文本框发生了什么事件后产生的？（） A. onFocus B. onBlur C.onChange D.onClick 5.要动态改变层中的内容可以使用下列哪些方法?（） A 利用层 innerHTML 改变内容 B. 利用层的 innerText 改变内容 C.可以通过设置层的隐藏和示来实现 D. 可以通过设置层的样式属性的 display 属性来实现 184 赛杰 IT 教育中心第十三章表单验证的高级特效【学习目标】 � 会运用 DOM 模型查找某个 HTME 元素 � 会使用 window 对象的 open()方法制作 � 各种样式的弹出广告窗口 � 会使用 window 对象的 setTimeout()方法和 Date 对象制作日期显示效果【理论课堂】 13.1 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。(减轻服务器负荷),所以 JavaScript 的表单验证应用是很广泛的,被 JavaScript 验证的这些典型的表单数据有： 1、用户是否已填写表单中的必填项目？ 2、用户输入的邮件地址是否合法？ 3、用户是否已输入合法的日期？ 4、用户是否在数据域 (numeric field) 中输入了文本？ 5、必填（或必选）项目： 13.2 表单验证实例及其特效 13.2.1 验证必填（或必选）项目下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题。举一个完整的例子如下： 13.2.2 E-mail 验证：输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号。 13.2.3 二级联动主要的 HTML 代码 javascript 脚本代码: 【课堂收获】编程改变生活励志照亮人生 188 赛杰 IT 教育中心【上机手册】 1、一常见的省市二级联动的网页特效：参考代码： New Document 编程改变生活励志照亮人生【温故知新】一：选择题 1.下列哪一个选项，可以用来检索被选定的选项的索引号？（） A. disabled B .selectedIndex C .option D.multiple 2. 下列声明数组的语句中，错误的选项是（） A. var arry=new Array() B. var arry=new Array( 3) C. var arry[]=new Array( 3)(4) D. var arry 1=new Array( ‘3’,‘4’) 3. 下列选项中，描述正确的是( ) A. options. add(new Option('a,，‘A’))可以动态添加一个下列表选项 B. option. add(new Option('a,，‘A’))可以动态添加一个下列表选项 C.new Option('a’,'A’)中‘A’表示列表选项的值，‘a’用于在页面中显示 4.制作级联菜单功能时调用的是下拉列表框的（）事件。 A. onClick B. onChange C. selected D. onBlur 5.在 JavaScript 中 Array 对象拥有的方法不包括( ) A. sort( )数组排序 B. length( )计算数组长度 C. concat()数组合并 D. reverse( )数组元素反转 190 赛杰 IT 教育中心第十四章* jQuery 基础【学习目标】 � 会运用 DOM 模型查找某个 HTME 元素 � 会使用 window 对象的 open()方法制作 � 各种样式的弹出广告窗口 � 会使用 window 对象的 setTimeout()方法和 Date 对象制作日期显示效果【理论课堂】 13.1 什么是 jQuery jQuery 是一个用 javascript 写的框架，说白了就是一个 js 库，里面有很多函数都写好了，你用就可以。JQuery 是一个简化的 Javascript 开发包，可以大大简化客户端脚本开发,所以时下应用很广泛。 jQuery 于 2006 年一月十四号在 BarCamp NYC (New York City)面世。主将 John Resig ，写有《Pro JavaScript Techniques》一书，因为效力于 mozolla，据说 firefox 3 将包含 Jquery，现在的 Jquery 团队有主要开发人员，推广人员，UI，插件开发，网站设计维护，其中 3 个主要开发人员分别是：两个美国人 John Resig/Brandon Aaron，一个德国人 Jorn Zaefferer)。jQuery 其主要功能： - 访问页面框架的局部 - 修改页面的表现 - 更改页面的内容 - 响应事件 - 为页面添加动画 - 与服务器异步交互 - 简化常用的 JavaScript 操作 13.2 安装 jQuery 1).下载 jQuery:在 http://docs.jquery.com/Downloading_jQuery 下载最新版本，下载下来后就是一个.js 的文件，只有十几 K，够精简的吧。 2).我为了方便起见，直接将下载的 jquery-1.2.6.min.js 改名为 jqeury.js，方便调用；体验的实例： jQuery basic 191 编程改变生活励志照亮人生

jQuery 构造函数

jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)

13.3 jQuery 的 js 库引用的基本语法 1、使用方法：在需要使用 JQuery 的页面中引入 JQuery 的 js 文件即可。例如：引入之后便可在页面的任意地方使用 jQuery 提供的语法。实例 1：

src="js/jquery.js" 192 赛杰 IT 教育中心代码说明：引入 jquery.js，引入插件 js，应用插件. 插件的应用方法一般为 $(元素).me(传递参数); //在此例中，插件名叫 me 其中 jquery.me.js 代码： $.fn.me=function(color){ this.css("background",color); } 插件的语法为 $.fn.插件名 = function(参数){ this.*** //this 即表示当前 jquery 对象，在此例中为 id=a 的元素对象 } 2、jQuery 的语法总结 a）关于页面元素的引用通过 jquery 的$()引用元素包括通过 id、class、元素名以及元素的层级关系及 dom 或者 xpath 条件等方法，且返回的对象为 jquery 对象（集合对象），不能直接调用 dom 定义的方法。 b）jQuery 对象与 dom 对象的转换只有 jquery 对象才能使用 jquery 定义的方法。注意 dom 对象和 jquery 对象是有区别的，调用方法时要注意操作的是 dom 对象还是 jquery 对象。普通的 dom 对象一般可以通过$()转换成 jquery 对象。如：$(document.getElementById("msg"))则为 jquery 对象，可以使用 jquery 的方法。由于 jquery 对象本身是一个集合。所以如果 jquery 对象要转换为 dom 对象则必须取出其中的某一项，一般可通过索引取出。如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是 dom 对象，可以使用 dom 中的方法，但不能再使用 Jquery 的方法。以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; c）如何获取 jQuery 集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用 eq 或 get(n)方法或者索引号获取，要注意，eq 返回的是 jquery 对象，而 get(n)和索引返回的是 dom 元素对象。对于 jquery 对象只能使用 jquery 的方法，而 dom 对象只能使用 dom 的方法，如要获取第三个

元素的内容。有如下两种方法： $("div").eq(2).html(); //调用 jquery 对象的方法 $("div").get(2).innerHTML; //调用 dom 的方法属性 d）同一函数实现 set 和 get 193 编程改变生活励志照亮人生 Jquery 中的很多方法都是如此，主要包括如下几个： $("#msg").html(); //返回 id 为 msg 的元素节点的 html 内容。 $("#msg").html("new content"); //将“new content” 作为 html 串写入 id 为 msg 的元素节点内容中,页面显示粗体的 new content $("#msg").text(); //返回 id 为 msg 的元素节点的文本内容。 $("#msg").text("new content"); //将“new content” 作为普通文本串写入 id 为 msg 的元素节点内容中,页面显示 new content $("#msg").height(); //返回 id 为 msg 的元素的高度 $("#msg").height("300"); //将 id 为 msg 的元素的高度设为 300 $("#msg").width(); //返回 id 为 msg 的元素的宽度 $("#msg").width("300"); //将 id 为 msg 的元素的宽度设为 300 $("input").val("); //返回表单输入框的 value 值 $("input").val("test"); //将表单输入框的 value 值设为 test $("#msg").click(); //触发 id 为 msg 的元素的单击事件 $("#msg").click(fn); //为 id 为 msg 的元素单击事件添加函数同样 blur,focus,select,submit 事件都可以有着两种调用方法 e）集合处理功能对于 jquery 返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery 已经为我们提供的很方便的方法进行集合的处理。包括两种形式： $("p").each(function(i){this.style.color=['#f00','#0f0','#00f']}) //为索引分别为 0，1，2 的 p 元素分别设定不同的字体颜色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //实现表格的隔行换色效果 $("p").click(function(){alert($(this).html())}) //为每个 p 元素增加了 click 事件，单击某个 p 元素则弹出其内容 f）扩展我们需要的功能 $.extend({ min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //为 jquery 扩展了 min,max 两个方法使用扩展的方法（通过“$.方法名”调用）： alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); g）支持方法的连写所谓连写，即可以对一个 jquery 对象连续调用各种不同的方法。例如： $("p").click(function(){alert($(this).html())}) .mouseover(function(){alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0','#00f']}); h）操作元素的样式 194 赛杰 IT 教育中心主要包括以下几种方式： $("#msg").css("background"); //返回元素的背景颜色 $("#msg").css("background","#ccc") //设定元素背景为灰色 $("#msg").height(300); $("#msg").width("200"); //设定宽高 $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式 $("#msg").addClass("select"); //为元素增加名称为 select 的 class $("#msg").removeClass("select"); //删除元素名称为 select 的 class $("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为 select 的 class i）完善的事件处理功能 Jquery 已经为我们提供了各种事件处理方法，我们无需在 html 元素上直接写事件，而可以直接为通过 jquery 获取的对象添加事件。如： $("#msg").click(function(){alert("good")}) //为元素添加了单击事件 $("p").click(function(i){this.style.color=['#f00','#0f0','#00f']}) //为三个不同的 p 元素单击事件分别设定不同的处理 3、 jQuery 中几个自定义的事件：（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将 class 置为 over，离开时置为 out。 $("tr").hover(function(){ $(this).addClass("over"); }, function(){ $(this).addClass("out"); }); （2）ready(fn):当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){alert("Load Success")}) //页面加载完毕提示“Load Success”,相当于 onload 事件。与$(fn)等价（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为 selected 的 class。 $("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); }); （4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。例如： $("p").trigger("click"); //触发所有 p 元素的 click 事件 195 编程改变生活励志照亮人生（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。例如： $("p").bind("click", function(){alert($(this).text());}); //为每个 p 元素添加单击事件 $("p").unbind(); //删除所有 p 元素上的所有事件 $("p").unbind("click") //删除所有 p 元素上的单击事件 13.4 jQuery 使用案例(已下载了 jQuery 的库文件, jquery.js) 体验：弹出窗口效果 custom.js 的代码： $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。 test.html 的代码: jquery 测试

jQuery 弹出窗口测试

测试

一个普通的链接【特别说明】此章仅作介绍…… 196

下载中心

html教程(培训班教程)

例子

……

最大的标题

使用 h3 的标题

最小的标题

菜鸟吧

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

菜鸟吧

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

是大傻瓜！傻瓜

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面右侧新闻的标题 1

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面新闻的标题 1

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面新闻的标题 1

这个图片广告是和我一起来的的

获取文件指定的元素

jQuery 构造函数

jQuery 弹出窗口测试

测试

评论

上传资源

他的资源

查看他的所有资源

更多相关视频

下载专区

工业电子汽车电子个人电子

更多相关讨论

技术分类

今日技术

热门技术文章

今日应用

热门应用文章

公众号推荐

今日电子头条

头条推荐

4月26日上午10:00邀您观看 基于TI Sitara™AM5708的工业派开源平台介绍 有奖直播

发现：TI最新SimpleLink无线MCU=彻底告别石英+实时测量也能低功耗+多频段多协议？

4月TI两场EP直播，都挺好：超声气体流量计量创新方案+SimpleLink平台小鲜肉CC13X2/CC26X2专场

4月26日上午10:00邀您观看 基于TI Sitara™AM5708的工业派开源平台介绍 有奖直播

发现：TI最新SimpleLink无线MCU=彻底告别石英+实时测量也能低功耗+多频段多协议？

4月TI两场EP直播，都挺好：超声气体流量计量创新方案+SimpleLink平台小鲜肉CC13X2/CC26X2专场

技术中心

html教程(培训班教程)

例子

……

最大的标题

使用 h3 的标题

最小的标题

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

是大傻瓜！傻瓜

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面右侧新闻的标题 1

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面新闻的标题 1

我是页面最上端的标题 1

我是页面左侧的标题 1，用来导航

我是页面新闻的标题 1

这个图片广告是和我一起来的的

获取文件指定的元素

jQuery 构造函数

jQuery 弹出窗口测试

测试

相关资源 换一换

评论

他的资源

更多相关视频

下载专区

更多相关讨论

4月26日上午10:00邀您观看基于TI Sitara™AM5708的工业派开源平台介绍有奖直播

4月26日上午10:00邀您观看基于TI Sitara™AM5708的工业派开源平台介绍有奖直播

相关资源换一换