网页设计与制作全册课件完整

网页设计与制作21世纪技能培训教程目录第1章网页设计基础知识1第2章Dreamweaver操作基础第3章网页中编辑文本第4章网页中使用图像234第5章网页色彩基础知识5目录第6章网页中插入多媒体6第7章网页中使用超级链接第8章网页中使用图层第9章使用样式表修饰内容789第10章表单应用基础10目录第11章用表格控制网页布局11第12章用框架控制网页布局第13章网页脚本与网页特效第14章应用模板提高设计效率121314第15章网站发布与维护基础15Thank

You

!第1章网页设计基础知识主要内容1.1网络基础知识11.2网站基础知识1.3网页设计语言介绍1.4网页设计工具介绍2341.1网络基础知识互联网互联网：英文名称为Internet，是一个由各种不同类型和规模、独立运行和管理的计算机网络组成的全球性的大网络。互联网具有许多强大的功能，其中包括电子邮件（E-mail）、远程登录（Telnet）、Web服务（WWW）、文件传送（FTP）、域名服务（DNS）和电子论坛（BBS）等。1.1网络基础知识·

TCP/IP协议·TCP/IP是计算机网络中最基本的通信协议。虽然从名字上看TCP/IP包括两个协议：传输控制协议（TCP）和网际协议（IP），实际上它是一组协议的集合（常称为TCP/IP协议族），TCP协议和IP协议只是保证数据传输的两个最基本的协议。

TCP/IP协议族中还包括其它一些重要的协议，如：远程登录（TELNET）、文件传输（FTP）和电子邮件（E-mail）等，这些协议协同完成计算机之间的数据交换。1.1网络基础知识·

IP地址·

Internet上的每台计算机在通信之前必须指定一个地址，通过这个地址，才能确保数据从何处来，到何处去的传输过程。这个地址就是IP地址。每台连到Internet上的计算机都必须有一个唯一的地址。IP地址为32位二进制数组成。为了使用方便，用四个数字表示的十进制表示形式。1.1网络基础知识查看IP地址相关知识子网掩码默认网关DNS服务器返回1.2网站基础知识网页网页又称“Web页”，它是万维网（World

WideWeb）的基本单位。网页可分为静态网页和动态网页。静态网页是相对动态网页而言的，是指浏览器端与服务器端不发生交互行为的网页。动态网页中除了静态网页中的元素外，还包括一些应用程序，这些应用程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要专门的应用服务器负责完成。1.2网站基础知识文本图片导航栏网页中常见元素动态元素网页表格超链接表单框架1.2网站基础知识网站网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成。网站可分为：资讯类网站、交易类网站、互动游戏类网站、有偿服务类网站、功能型网站、综合类网站、办公类网站。HTTP协议即超文本传输协议，用于传输超文本标记语言写的文件。通过这个协议，我们可以浏览网络上的各种信息，看到丰富多彩的文字与图片等多媒体信息。1.2网站基础知识网站网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成。网站可分为：资讯类网站、交易类网站、互动游戏类网站、有偿服务类网站、功能型网站、综合类网站、办公类网站。HTTP协议即超文本传输协议，用于传输超文本标记语言写的文件。通过这个协议，我们可以浏览网络上的各种信息，看到丰富多彩的文字与图片等多媒体信息。FTPFTP是FileTransfer

Protocol（文件传输协议）的缩写，用来在两台计算机之间互相传送文件。

FTP分为主动式和被动式两种：主动方式：客户端首先向服务器发送连接请求，服务器接受连接，建立一条命令链路。传送数据时，客户端在命令链路上通知服务器端，由服务器主动发起连接，建立数据链路，完成数据传送。被动方式：客户端首先向服务器发送连接请求，服务器接受连接，建立一条命令链路。传送数据时，服务器通过命令链路通知客户端，由客户端向服务器端发送连接请求，建立一条数据链路来传送数据，完成数据传输。1.2网站基础知识1.2网站基础知识URLURL是Uniform

Resource

Location的缩写，译为

“统一资源定位符”。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。HTML语言是一种基于标记（所谓标记，就是一些特殊的记号，用于识别网页中的每个元素，如图像就用<img>表示）格式的语言，可以直接由浏览器解释执行，不需要特别的编译。1.2网站基础知识·

Web服务工作原理①浏览器发送请求②服务器响应请求返回1.3网页设计语言介绍网页设计语言HTML浏览器端语言服务器端语言DHTMLCSSJavascriptXMLJSPASP.NETASPCGIPHP返

回1.4网页设计工具介绍FrontPageDreamweaverFireworksPhotoshopFlashFrontPage最强大之处是其站点管理功能。Dreamweaver支持

ActiveX、Java、Flash、Shockwave等特性Fireworks是专为网络图像设Javascript、计而开发；Photoshop用于比较复杂的图象处理Flash图形采用矢量技术，使得图形保存的内容十分简单但又可以无限放大而不失真。返

回本章小结本章主要向读者介绍了网页设计相关的基础知识，主要包括网络的相关知识和网站的相关知识。这些知识都是网页设计者必须掌握的入门知识，所以如果读者不熟悉就不要跳过该章。对于网页设计者，要熟悉网络的基础知识，网站的基础知识，尤其是网站的基本工作原理，和网站设计的基本过程和方法，以及用于设计网站的基本工具，只有这样，才能做到心中有数，不止于盲目开始。Thank

You

!第2章Dreamweaver操作基础主要内容2.1工作环境12.2创建站点2.3创建网页2.4

HTML标记基本结构2342.5网站设计的基本思路52.1工作环境·

第一次运行Dreamweaver的时候会出现图2.1所示的选择界面，可以根据需要选择合适的工作环境。图2.1工作区设置对话框2.1工作环境·

窗口结构·Dreamweaver运行后出现如图2.2所示的界面，下面我们介绍一下Dreamweaver工作区的各个组成部分。图2.2

Dreamweaver工作环境2.1工作环境·

菜单栏程序的所有功能基本上都能在菜单栏上实现，通过菜单可以进行对象的任意操作与控制，菜单栏分为文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助的等，使用起来非常方便。2.1工作环境·

插入栏插入栏包含用于创建和插入对象（如表格、层和图像）的按钮。这些按钮被组织到几个类别中，您可以在插入栏的左侧切换它们。如图2.3所示。切换几个类别图2.3插入栏2.1工作环境·

文档工具栏文档工具栏，如图2.4所示，其包很多含按钮，主要包括三种“文档”窗口视图（设计视图、代码视图和拆分视图）、各种查看选项和一些常用的操作（例如在浏览器中预览）。图2.4文档工具栏2.1工作环境文档窗口显示当前创建和编辑的文档，在制作网页的各种操作中，文档窗口中都会有所体现。文档窗口底部的状态栏如图2.5所示，文档窗口底部的状态栏提供与正创建的文档有关的其它信息。图2.5文档窗口底部的状态栏2.1工作环境属性检查器用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性，也就是说【属性】检查器里的内容是虽着编辑对象的不同而不同。在【代码】视图中，【属性】检查器默认是不展开的。面板组组合在一个标题下面的相关面板的集合。文件面板使您可以管理文件和文件夹，无论它们属于Dreamweaver站点的一部分还是位于远程服务器上。返回2.2创建站点·

创建站点1在菜单栏【站点】菜单中选择【管理站点】，在弹出的【管理站点】对话框中点击【新建】按钮，出现【站点】和【FTP】两个选项。选择如图2.6所示。图2.6管理站点对话框2.2创建站点·

创建站点2

选择【站点】弹出【未命名站点1的站点定义为】对话框，在【未命名站点1的站点定义为】中选择【基本】选项卡。2.2创建站点·

创建站点3

文本框中填写您站点的名字，它仅仅做为管理和识别用，单击【下一步】按钮，进入下一步。如图

2.7所示。图2.7定义站点名字的对话框2.2创建站点·

创建站点4

我们要建立的是静态网页，因此我们选择【不，我不想使用服务器技术】如图2.8所示，单击【下一步】按钮，进入下一步。图2.8选择服务器对话框2.2创建站点·

创建站点5选择第一项：编辑我计算机的本地副本，完成后再上传，也建议网络初学者也采用此项，选择要保存网站的物理路径名。手工填写或者点击文件夹图标选择路径都可以，单击【下一步】按钮，进入下一步。如图2.9所示。2.2创建站点图2.9保存位置对话框2.2创建站点·

创建站点6

【您如何连接到远程服务器】现在，已经为您的站点定义了一个本地根文件夹。暂时我们还不登陆远程服务器，因此选项中选择【无】。单击【下一步】按钮，进入下一步。2.2创建站点图2.10总结报告对话框图2.10给出我们刚才设置的总结报告，单击【完成】按钮，结束站点的设置。这样，一个站点就完成了，相当于一个房子建好了。2.2创建站点·

编辑站点·

站点的编辑其实很简单，选择【站点】菜单下的【管理站点】命令。选中站点的名称，然后单击【编辑】按钮。将会出现类似创建站点的内容，根据需要可以在相应的内容上进行修改。2.2创建站点·

规划站点内容·现在我们就假设建立一个我的网站设计草图，只有这样网站的主要内容、分支名称、网页的数量就一

目了然了。当然不可避免的在实际制作过程中会有

所改变，但是有了最初的设计思想，就能有的放矢。设计草图如图2.12所示。图2.12网站设计草图返回2.3创建网页·

新建、打开和保存网页·文档操作可以看作是设计网页的基本操作，它包括打开和编辑文档、设置文档标题等多个方面，在设计网页时都是必须考虑的。2.3创建网页·

网页中添加内容·可以往网页中添加任何的内容，象文本、图像、表格、音频、视频、超级链接、表单等。具体插入的方法，以及详细内容在下几章中会作介绍。2.3创建网页页面设置设置页面的外观设置页边距设置背景颜色、图像图2.17【页面属性】设置对话框2.3创建网页图2.18页面属性对话框·

页面设置2.设置页面的链接在【属性】面板点击【页面属性】打开其对话框，对话框中的【分类】选择【链接】，内容参见图2.18所示。2.3创建网页测试网页Dreamweaver中进行测试直接在IE中打开测试2.4

HTML标记基本结构·

HTML是构成网页的基本语言<html><head><title>Untitled

Document</title><meta

http-equiv=“Content-Type”Content=“text/html;charset=gb2312”></head><body

bgcolor=“＃FFFFFF”></body></html>2.4

HTML标记基本结构<head>和</head>标记之间的内容称为HTML的头部，一般不会在网页上直接显示，但插入的特效制作是可以在网页上显示的。<title>和</title>之间的内容是Web页的标题，当浏览这一网页时，它会出现在浏览器的标题栏上。例如主页的名称是：“教你申请专利”，其原代码标记为：<title>教你申请专利</title><meta>是一个非封闭类型的标记。在HTML的头部可以有包括多个<meta>标记。返回2.5网站设计的基本思路确定网站的主题和名称设计网站的整体风格网站的形象设计确定网站的栏目网站设计的基本思路确定网站的目录结构确定网站的链接结构返回本章小结本章主要介绍了Dreamweaver

的环境和基本操作，主要包括Dreamweaver

的环境，在Dreamweaver

里创建站点，如何在Dreamweaver里新建、保存、打开网页，以及页面的一些基本设置，就象是我们建了一个房子和房子的具体规划，比如家具的用途、摆放等等，下面几章将以更多精彩的实例详细介绍网页基本元素的添加以及设置。Thank

You

!第3章网页中编辑文本主要内容3.1在Dreamweaver中添加文本13.2插入其它文本元素23.3文本标记基础33.1

在Dreamweaver

中添加文本插入文本方式直接在文档窗口中输入文本内容，就像在其他文本编辑其中一样。从其他应用程序中复制文本。例如Word、Excel等，切换到Dreamweaver，将插入点定位在文档窗口的设计

视图中，然后选择【编辑】>【粘贴】或【编辑】>【选择性粘贴】。当您选择【编辑】>【选择性粘贴】时，将出现一个对话框为您提供几个粘贴格式设置选项。这个很简单，就不再举例。3.1

在Dreamweaver

中添加文本编码设置编码指定文档中字符所用的编码，文档编码在文档头中的

meta标签内指定，它告诉浏览器和Dreamweaver应如何对文档进行解码以及使用哪些字体来显示解码的文本。例如，如果您指定“日语(Shift

JIS)”，则插入此meta标签：<meta

http-equiv="Content-Type"content="text/html;charset=Shift_JIS">。使用汉

语“简体中文（GB2312）”，则meta标签就变为<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">3.1

在Dreamweaver

中添加文本·

文本格式设置

1.设置字体选中要改变的文本，如果没有选中任何文本，则改变的字体格式将应用于后面输入的文本。选择【文本】【字体】命令，在弹出的子菜单中选择所需字体，或者打开属性检查器，选择【字体】列表上所需的字体，如图3.1所示。图3.1设置字体属性检查器3.1

在Dreamweaver

中添加文本·

文本格式设置

2.添加字体打开【编辑字体列表】对话框如图3.2所示。在字体列表中显示了当前已有的字体组合，在【可用字体】列表中显示了目前本机上安装的字体。图3.2编辑字体列表对话框3.1

在Dreamweaver

中添加文本·

文本格式设置

2.添加字体将选中的字体添加到【选择的字体】列表后，具体操作如图3.3所示。图3.3编辑字体列表对话框3.1

在Dreamweaver

中添加文本·

文本格式设置

3.设置文本大小选中要改变大小的文本。选择【属性】检查器【大小】命令，在【大小】下拉列表中可以设置文本的尺寸大小，在后面的下拉列表中选择文本大小的单位。如图3.4所示。图3.4设置字体大小大小的数值相同，文字大小却不同，与单位有关。3.1

在Dreamweaver

中添加文本·

文本格式设置

4.设置文本颜色选中要改变颜色的文本。选择【文本】菜单 【颜色】命令，打开颜色对话框，然后

选择需要的颜色即可，当然可以利用【属性】检查器【文本】颜色框，用取色笔进行选取。图3.5颜色对话框3.1

在Dreamweaver

中添加文本·

文本格式设置5.设置文本的样式文本的样式包括文本的粗体、斜体、下划线等，具体参见图3.6子菜单所示。要设置文本的样式，直接选中要设置文本样式的字体，选择【文本】菜单 【样式】，在弹出的子菜单中选择所需要的样式，即可。如果要取消文本的样式设置，则再次选择该样式。图3.6文本属性面板这个子菜单都是文本样式3.1

在Dreamweaver

中添加文本·

段落设置段落设置主要包括分段与换行，段落对齐、缩进以及项目符号和编号。按照如下的步骤进行操作即可。打开01文件夹下的01.htm网页，如图3.7所示图3.7打开准备的网页3.1

在Dreamweaver

中添加文本·

段落设置选择布局工具栏的【绘制层】 ，放在如图3.8所示的位置，有关绘制层的更多内容参见后面的章节。图3.8绘制层3.1

在Dreamweaver

中添加文本·

段落设置在层中输入类似图3.9所示的文字，注意在图中指示位置输入空格。接下来我们使用键盘的【回车】可以换行，同时也就结束了一个段落。图3.9输入空格在此处输入空格3.1

在Dreamweaver

中添加文本。·

段落设置我们可以对其中段落进行对齐，对齐方式主要有：左对齐、居中对齐、右对齐和两端对齐4种对齐方式，即对应着【属性】检查器里的这四个

按钮

其设置方法与设置文本相同。我们这里选择居中对齐。结果如图3.10所示。图3.10选择居中对齐后的效果返回3.2

插入其它文本元素我们可以插入其它文本元素，这里的其它文本元素包括列表、日期、水平线、特殊字符等。项目列表：设置相同类别文本的列表形式。打开02文件夹下的01.htm网页，选中属性面板的列表按钮，然后在文档窗口输入列表需要的文字，要输入下一项直接回车即可。默认的就会在其前面加上项目符号。如图3.11所示网页。图3.11插入文件列表3.2

插入其它文本元素接下来我们再制作另外一种编号列表：选中属性面板的列表按钮，与步骤1类似，看一下结果如图3.12所示。图3.12 编号列表3.2

插入其它文本元素接下来我们在网页当中插入日期，选择【插入】菜单的【日期】命令。或者在【插入】栏的【常用】类别中，单击【日期】按钮。出现图3.13所示的对话框。选择你所喜欢的日期格式，您如果要在每次保存文件时都自动更新该日期。则将【储存时自动更新】选中。图3.13插入日期对话框3.2

插入其它文本元素接下来我们插入另外一个文本元素水平线：用户可以使用一条或者更多的水平分割线，将文本或者对象分割开来。选择【插入】菜单下的【HTML】→【水平线】如图3.14所示图3.14插入水平线3.2

插入其它文本元素接下来我们设置一下水平线的属性，选中水平线，看一下【属性检查器】我们设置水平线的【宽】为500，当然高度，对齐都可以根据需要进行设置，效果如图3.15所示。图3.15水平线属性在此背景下我们好象看不到水平线，主要是因为水平线的颜色默认为灰色，我们可以设置其颜色，选中水平线，选择【拆分】视图，我们发现在【代码】视图里有选中的代码，结果如图3.16所示。图3.16【拆分】视图3.2

插入其它文本元素将插入点定位在【代码】视图里，在<hr后面单击空格键，将会出

现如图3.17所示的效果。在图所示的下拉菜单中双击【color】，出现图3.18所示的效果，选择白色。图3.17选择属性图3.18颜色对话框3.2

插入其它文本元素最后我们看一下我们网页效果，如图3.19所示。图3.19 网页的最终效果返回3.3

文本标记基础·

文本标记➢加粗<B></B>➢斜体<I></I>➢字体加大<BIG>➢字体变细<SMALL>➢加底线<U></U>（尚有些浏览器不提供）➢删除线<S></S>（尚有些浏览器不提供）➢下标<SUB></SUB>➢上标<SUP></SUP>3.3

文本标记基础·

文本标记➢标题标记<H1><H2><H3><H4><H5><H6>，这些是，由<H1>至<H6>变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。➢打字机体<TT></TT>（用单空格字型显示）➢闪耀<BLINK></BLINK>➢<FONT>是应用于文件的内文部分，即<BODY>与</BODY>之间的位置，只影响所标示的字句，是一个围堵标记。➢<HR>称为水平线。3.3

文本标记基础格式标记<P>称为段落标记。作用：为文本、图像、表格等之间留一空白行。<P>的常用参数：如：<P

ALIGN="CENTER">ALIGN="CENTER"可选值：RIGHT,LEFT,CENTER。默认值：ALIGN="LEFT"<BR>称为换行标记。作用：令文本、图像、表格等显示于下一行，即段内换行，由于浏览器会自动忽略原始码中空白和换行的部分，这使<BR>成为最常用的标记之一。因为无论你在代码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。返回本章小结本章主要介绍了Dreamweaver中如何插入文本和设置文本的属性。通过多种插入文本的方式可以很快地将文本添加到网页中。而Dreamweaver提供的文本属性设置功能使得我们能够方便地设置各种排板效果。下一章，我们将学习如何在网页中添加图像，设置图像属性，进一步提高网页的可欣赏性。Thank

You

!第4章网页中使用图像主要内容4.1网页中常见的图像14.2插入图像24.3设置图像34.4图像标记及其属性44.1网页中常见的图像·

Gif图像Gif图像只支持256色采用无损压缩支持透明色支持交替下载支持帧动画4.1网页中常见的图像·

JPG图像JPG格式图像是网页中另一种被广泛使用的图像格式，它是“联合图像专家组文件格式”的英文缩写，最多可以支持1600万种颜色，适合在需要表现细腻颜色细节的图像上使用，因为它支持的颜色数目较多，所以生成的文件体积较大。但由于JPG格式图像具有较高的压缩率，提高了浏览器下载速度，也被广泛应用在网页中。4.1网页中常见的图像·

PNG图像PNG（可移植网络图形）文件：此格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。PNG是

MacromediaFireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有png文件扩展名才能被Dreamweaver识别为Png文件。返回4.2插入图像·

插入图像在您将图像插入Dreamweaver文档时，Dreamweaver自动在Html源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver会询问您是否要将此文件复制到当前站点中。您还可以动态插入图像。动态图像指那些经常变化的图像。例如，广告横幅旋转系统需要在请求页面时从可用横幅列表中随机选择一个横幅，然后动态显示所选横幅的图像。下面我们通过一个实例来说明图像的插入。4.2插入图像图4.1【页面属性】对话框1·

插入图像新建一个网页，单击【属性】面板上的按钮，，打开【页面】属性对话框，如图4.1所示。在此对话框中【背景颜色】处选择黑色。24.2插入图像图4.2表格对话框3·

插入图像在【布局】工具栏上选择按钮 。出现【表格】对话框，具体参数如图4.2所示。有关表格的更多知识，参见后面的章节。4.2插入图像·

插入图像图4.3【属性】面板4接下来，在【属性】面板中【对齐】命令中选择【居中】对齐，填充、间距、边框都设为0。如图4.3所示。居中对齐填充、间距、边框都设为05在文档窗口中，将插入点放置在您要显示图像的地方。4.2插入图像·

插入图像图4.4选择图像文件对话框6执行以下操作：在【插入】栏的常用【类别】中，单击 图标。出现如图4.4所示的对话框。7在该对话框中，可以单击上面的【文件系统】单选按钮，直接从本地硬盘中选择图像文件，当然还可以单击【图像源】单选按钮，从数据库中选取图像文件。4.2插入图像·

插入图像图4.5【图像标签辅助功能属性】8选择图像文件后，窗口右边会出现它的预览图。而且在下面的URL文本框中，会显示当前选中文件的URL地址，并且在“相对于”下拉列表中，可以选择文件URL地址的类型，如果选择“文档”选项，则使用的是相对地址，如果选择“站点根目录”选项，则使用的是基于站点根目录的地址。9在出现的对话框中，选择【取消】命令，如图4.5所示。4.2插入图像·

插入图像10同理，在相应的单元格插入相应的图像，效果如图4.6所示。11在页面中央插入一个层，在层内再插入另外一幅图像。12保存预览后下面是此网页的最终效果图。如图4.7所示。图4.6插入图像后的效果4.2插入图像图4.7网页最终效果图返回4.3设置图像·

图像占位符图像占位符是在准备好将最终图形添加到Web页面之前使用的图形。若要插入图像占位符，请执行以下操作：图4.9插入图像占位符1在插入栏中，单击【图像占位符】图标。2在该对话框中，为图像占位符选择选项，您可以设置占位符的大小和颜色，并为占位符提供文本标签。例如：图中因为还没有设计好“logo”图像，所以用占位符代替。如图4.9所示。4.3设置图像·

图像占位符图4.10

IE浏览器显示结果3浏览器显示结果如图4.10所示：4.3设置图像图4.11裁剪图像。图像的编辑裁剪图像选中图象，单击图像属性检查器中的【裁减工具】图标 所选图像周围会出现裁剪控制点。调整裁剪控制点直到边界框包含的图像区域符合所需大小。如图4.11所示。在边界框内部双击或按Enter键裁剪所选区域。裁减后如图4.12所示。图4.12裁剪后的结果4.3设置图像·

图像的编辑2.图像重新取样在Dreamweaver中重新调整图像的大小时，您可以对图像进行重新取样，以容纳其新尺寸。重新取样位图对象时，会在图像中添加或删除像素，以使其变大或变小。重新取样图像以取得更高的分辨率一般不会导致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失，并且通常会使品质下降。4.3设置图像·

图像的编辑3.亮度/对比度若要调整图像的亮度和对比度，选中图像，单击图像【属性】检

查器中的【亮度/对比度】按钮 ，将出现【亮度/对比度】对话框。如图4.13所示，用鼠标拖动对话框上的滑块即可调整其亮度/对比度。图4.13【亮度/对比度】对话框4.3设置图像·

图像的编辑4.锐化当我们感觉到图像的边缘不够清晰时，可以执行此操作：要锐化的图像，先选择图像，然后单击【属性】检查器中的按钮 ，通过拖动滑块控件或在文本框中输入一个0到10之间的值，来指定Dreamweaver应用于图像的锐化程度如图4.14所示。图4.14【锐化】对话框4.3设置图像·

设置图像属性【宽】和【高】以像素为单位指定图像的宽度和高度。当您在页中插入图像时，您可以用以下单位指定图像大小：pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）和诸如2in+5mm的单位组合；在HTML源代码中，Dreamweaver将这些值转换为像素。【源文件】是图片的路径，点击后面的文件夹图标也能选择其他图片。【链接】是链接的目标页面或者定位点的URL。有关创建链接的知识，请参见后面的章节。【替代】是图片的文字注释，当图片不能正常显示的时候，图片的位置就会显示文字注释。【垂直边距】和【水平边距】沿图像的边缘添加边距（以像素为单位）。【垂直边距】图像的顶部和底部添加边距。【水平边距】沿图像左侧和右侧添加边距。4.3设置图像·

设置图像属性【低解析度源】当前图片的低分辨率副本的路径。如果图片很大，则先让浏览器下载显示一个文件较小的图片副本，浏览器装载完其他内容后再回头来下载较大的图像，这样做既能保持网页的完整性，又能减少用户等待时间。【边框】图像边框的宽度。选择空白或零时没有边框。【对齐】将图像与同一行中的文本、另一个图像、插件或其它元素对齐。还可以设置图像的水平对齐方式。【默认值】通常指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。）【基线和底部】将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。【顶端】将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。4.3设置图像·

设置图像属性【居中】将图像的中部与当前行的基线对齐。【文本上方】将图像的顶端与文本行中最高字符的顶端对齐。【绝对居中】将图像的中部与当前行中文本的中部对齐。【绝对底部】将图像的底部与文本行（这包括字母下部，例如在字母g中）的底部对齐。【左对齐】将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。【右对齐】将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。【调整图像大小】您可以在Dreamweaver中以可视化的形式调整元素的大小，这些元素包括图像、插件、MacromediaShockwave或Flash文件、applet和ActiveX控件等。您可以设置相对于同一段落或行中的其它元素的对齐方式。4.3设置图像创建鼠标经过图像若要创建鼠标经过图像，请执行下面的操作：在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。从【插入】菜单中选择【图像】对象，如图4.15所示。图4.15插入鼠标经过图像4.3设置图像创建鼠标经过图像在对话框中选择原图像和鼠标经过图像要显示的图片如图4.16所示。选择【文件】菜单【在浏览器中预览】，或按F12键。在浏览器中，图17显示鼠标未经过图像之前，图4.18为鼠标经过图像时显示的结果。图4.16鼠标经过图像对话框图4.17原图像图4.17鼠标经过图像返回4.4图像标记及其属性<IMG>称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播放及影像地图（IMAGEMAP或称一图多连结）等。<IMG>的一般参数设定：SRC=“LOGO.GIF”：图片来源，接受.GIF,.JPG及.PNG格式，若图片文件与该HTML文件同处一目录则只写上文件案名称，否则必

须加上正确的途径，相对及绝对路径均可。WIDTH=100

HEIGHT=100：设定图片大小，此宽度、及高度一般采用像素作单位。通常只设为图片的真实大小以免失真，若要改变图片大小最好事先使用图像编辑工具。HSPACE=5

VSPACE=5：设定图片边沿空白，以免文字或其它图片过于贴近。HSPACE是设定图片左右的空间，VSPACE则是设定图片上下的空间，采用像素作单位。4.4图像标记及其属性BORDER=2：图片边框厚度。ALIGN=“TOP”：调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：TOP、

MIDDLE、BOTTOM、LEFT或RIGHT，默认为BOTOM。ALT=“LOGOOFPENPALGARDEN”：这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示。LOWSRC=“PRE_LOGO.GIF”：设定先显示低品质图像图片，若所加入的是一张很大的图片，下载时很长，这张低品质图像会先被显示以免浏览失却兴趣，通常是原图片灰阶版本。返回本章小结本章主要介绍了Dreamweaver中如何插入文本和设置文本的属性。通过多种插入文本的方式可以很快地将文本添加到网页中。而Dreamweaver提供的文本属性设置功能使得我们能够方便地设置各种排板效果。下一章，我们将学习如何在网页中添加图像，设置图像属性，进一步提高网页的可欣赏性。Thank

You

!第5章网页色彩基础知识主要内容125.2网页配色技巧5.1网页色彩基础知识5.1

网页色彩基础知识·

色彩基础知识什么是色彩色彩是光作用于人眼引起的视觉特性。人的视觉特性是受大脑支配的，所以色彩也是一种心理反映。色彩感觉不仅与物体本来的颜色特性有关，而且还受时间、空间、外表状态以及该物体的周围环境的影响，同时还

受人的经历、记忆力、世界观和视觉灵敏度等各种因素的影响。色彩的形成我们能看到物体，并不是因为物体发光，而是物体反光的结果。太阳光是白色的，是由红色，绿色和蓝色三种颜色组成，当它照射到物体上之后，部分光被物体吸收，剩余的光被物体表面反射回来，我们看到的就是反射回来的光。我们说某个物体是“蓝色”的，其实是这个物体反射了蓝色光，而吸收了红色和绿色光。5.1

网页色彩基础知识·

色彩基础知识3.色彩三要素色彩可分为无彩色和有彩色两大类。无彩色是指黑色、白色和灰色，而有彩色是指红、橙、黄、绿、蓝、青、紫等。有彩色的每种色彩都可以用三个值表示，即色相、明度和纯度，它们决定着色彩的主要特征，被称为色彩的三要素。色相:是指的是色彩的名称，是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。明度:也叫亮度，指的是色彩的明暗程度，或者色彩在不同光线下的明暗程度。纯度:也叫色度，表示色彩的饱和度，即某种色彩中是否包黑色或者白色成分。5.1

网页色彩基础知识·

色彩表示RGB模式RGB模式是计算机中表示色彩最常用的模式，基本原理是用三原色的组合表示每种色彩。这种表示模式中，三个原色分别被划分为256个级别，每种色彩都可以表示为三个数字的组合。HSB模式HSB色彩把颜色分为色相（Hue）、饱和度（Saturation）、明度（Brightness）三个因素。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽，饱和度低色彩就接近灰色。明度也称为亮度，

等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度

最高得到纯白，最低得到纯黑。5.1

网页色彩基础知识·

色彩表示CMYK模式CMY是3种印刷油墨名称的首字母：青色Cyan、洋红色Magenta、黄色Yellow。而K取的是black最后一个字母，之所以不取首字母，是为了避免与蓝色(Blue)混淆。Lab颜色模式Lab是CIE（国际照明委员会）指定的表示颜色的标准之一。它是广泛应用于彩色印刷和复制层面。L：指的是亮度；a：由绿至红；b：由蓝至黄。CIE色彩模式是以数学方式来表示颜色，所以不依赖于特定的设备，这样确保输出设备经校正后所代表的颜色能保持其一致性。5.1

网页色彩基础知识·

色彩表示5.色彩模式的选择RGB色彩模式是发光的，存在于屏幕等显示设备中，不存在于印刷品中；

CMYK色彩模式是反光的，需要外界辅助光源才能被感知，它是印刷品唯一的色彩模式；

CMYK的所有色彩都包含于RGB色域中，但CMYK的色彩数量少于RGB，RGB通道灰度图中偏白表示发光程度高；CMYK通道灰度图中偏白表示油墨含量低。反而反之。5.1

网页色彩基础知识·

色彩表示可以按照这样的原则选择色彩模式：

如果图像只在电脑上显示，就用RGB模式，这样可以得到较广的色域；

如果图像需要打印或者印刷，就必须使用CMYK模式，才可确保印刷品颜色与设计时一致。5.1

网页色彩基础知识·

216种安全色216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。所以，使用216网页安全色进行网页配色可以避免原有的颜色失真问题。返

回5.2网页配色技巧色彩选择的基本原则色彩的鲜明性原则色彩的独特性原则色彩的适当性原则色彩的联想性原则5.2网页配色技巧·

网站主色调的选择网站的主色调对整个网站色彩搭配是至关重要的。网站的主色调实际上是由网站的内容确定的，跟据网站的内容可以确定网站的主色调，也可以更具网站访问群体的类别、社会背景、心理需求和场合来确定，也可以根据不同色彩带给人们的不同心理反应进行选择。我们可以从下面的几个例子来看看。5.2网页配色技巧·

网站主色调的选择5.2网页配色技巧·

网站主色调的选择5.2网页配色技巧·

网站主色调的选择5.2网页配色技巧网页中色彩搭配的原则基于色调进行配色类似色调配色；互补色调配色；

2.基于色彩情感进行配色红色调配色技巧；

(2)黄色调配色技巧；蓝色调配色技巧绿色调配色技巧绿色调配色技巧白色调配色技巧5.2网页配色技巧·

网页中色彩搭配的原则3.基于渐变和重复的色彩搭配5.2网页配色技巧色彩搭配案例基于灰黑色的NBA网站5.2网页配色技巧·

色彩搭配案例2.娱乐性网站UGO5.2网页配色技巧·

色彩搭配案例3.采用黄色调为主返回本章小结本章主要向读者介绍了网页设计色彩搭配的基础知识。好多网页设计着在学习网页设计的时候，并不注意色彩搭配的运用，而是把主要精力放在代码编写上，结果导致费了很大功夫设计的网站，却往往“无人问津”，一个原因就是网页的色彩搭配不受欢迎。Thank

You

!第7章网页中使用超级链接主要内容7.1给文字添加超级链接17.2给图像添加超级链接7.3热点链接7.4站内链接与站外链接2347.5链接到其它对象57.6链接的不同打开效果67.7链接标记及其属性77.1

给文字添加超级链接“文字链接”即以文字作为媒介的链接，它是网页中最常使用的链接方式，具有文件小制作简单和便于“维护”等优点。1.准备好已经制作完成的首页和各个栏目的页面(除了“链接”，其它内容都已经制作完成了)，在这里我们打开本书附带光盘07/course/1.html文件，如图7.1所示。图7.1初始页面7.1

给文字添加超级链接2.在1.html的设计视图中选取“茉莉文学”作为链接的文字，观察【属性】面板中的链接地址栏，然后把链接的地址加入到文本框中，在这里我们点击浏览文件 按钮，选择07/index1.html文件，如图7.2所示。图7.2“链接”文本框7.1

给文字添加超级链接图7.3文字链接的目标网页3.

在设计视图中，单击在【浏览器中预览与测试】按钮 ，选择下拉列表中的【预览在IExplore6.0】选项或按F12键，便可打开浏览器，在浏览器指向“茉莉文学”，当鼠标变成手状时单击，便可切换到所链接的页面如图7.3所示。返回7.2

给图像添加超级链接“图像”也是常被使用的链接媒体，它和文字链接非常相似。下面我们继续上例给图像添加链接。在Dreamweaver中打开index1.html文件，选择页面顶部的图像，观察【属性】面板，在链接地址栏中输入链接文件的地址，可以使用之前讲到的“指向文件”和“选择文件”的方法。这里我们将图像链接到1.html文件，如图7.5所示。设置完成后保存文件并预览链接效果。图7.5图像链接矩形热点图形热点多边形热点返回7.3

热点链接1.在Dreamweaver中打开1.html文件，选择页面底部的图像，便可看到【属性】面板左侧“地图”下的热点工作按钮。如图7.6所示。矩形热点图形热点多边形热点图7.6热点工具7.3

热点链接2.单击矩形热点工具按钮，当光标移到所选图像变为十字形状时，拖动鼠标框选设置链接的部分，此时被框选的部分以透明蓝色显示，如图7.7所示。图7.7框选热区7.3

热点链接3.选中图像中的热点，在属性面板上为图像热点设置链接，这里链接到index1.html文件，将然后保存文件并预览效果，在浏览器中将光标指向设为热区的部分光标会变为手状，此时单击便会到达index1.html文件页面。同样，在图片的其它部分还可以用热点工具设置不同的热区，以实现在一张图片出现多个链接。返

回7.4

站内链接与站外链接·

站内链接之前的实例中我们所创建的链接都属于“站内链接”，简单地理解，“站内链接”就是链接站点内部的文件，在“链接”地址栏中需要输入文件的“相对路径”。7.4

站内链接与站外链接链接到站内网页具体位置锚点链接在Dreamweaver中打开1.html文件，将光标定位在文章标题“茉

莉飘香”前，单击【插入】菜单下【命名锚记】选项，如图7.8所示。图7.8“命名锚记”选项7.4

站内链接与站外链接·

链接到站内网页具体位置锚点链接2.在弹出的【命名锚记】对话框中，输入锚记（锚点）名称，这里命名为“茉莉飘香”，如图图7.9所示。图7.9命名锚记7.4

站内链接与站外链接·

链接到站内网页具体位置锚点链接3.单击确定按钮后，名称为“茉莉飘香”的锚点即被插入到文档中相应的位置，如图7.10所示。图7.9命名锚记7.4

站内链接与站外链接·

链接到站内网页具体位置锚点链接4.选择导航栏中的文字“茉莉飘香”，如图7.11所示，在【属性】面板中的“链接”地址栏中，输入一个符号“＃”和锚记名称。这里输入“＃茉莉飘香”，如图7.12所示。图7.11选中文字图7.12设置链接7.4

站内链接与站外链接·

链接到站内网页具体位置锚点链接5.保存文件并预览效果，在浏览器单击导航栏中的文字“茉莉飘香”，页面就会迅速跳转到“命名锚记”的位置，如图7.13和图7.14所示。图7.13点击链接前图7.14点击链接后7.4

站内链接与站外链接·

站外链接“站外链接”就是在“链接”地址栏中直接输入网页在Internet上的“绝对路径”，并且包括所使用的协议（如HTTP、FTP）。“站外链接”多用于网站间友情链接的内容。在Dreamweaver中打开1.html文件，选项中导航栏中的文字“友情链接”，在【属性】面板中的“链接”地址栏中，输入网址保存文件并预览，在浏览器点击“友情链接”，页面便会跳转到搜狐首页。7.4

站内链接与站外链接·

链接到站外网页具体位置首先，为了实现这个功能我们将某站点下载到本地主机（与我们的实例站点在不同的路径下）。同时在下载站点的主页上某位置插入锚点，并命名为“t”。在Dreamweaver中打开1.html文件，选择页面中的文字“茉莉公司网络工作室”，在【属性】面板中的“链接”地址栏中，输入如下地址file:///F|/xiasi/xiasi.html#t。如图7.15所示。图7.15链接到站外网页具体位置7.4

站内链接与站外链接·

链接到站外网页具体位置保存文件并预览，在浏览器点击“茉莉公司网络工作室”，页面便会跳转到站外网页锚点定位的位置，如图7.16所示。图7.16站外网页目标位置返回7.5链接到其它对象·

链接到电子邮件在Dreamweaver中打开1.html文件，选中页面中E-mail:moli@163.com，在【属性】面板中的“链接”地址栏中输入“mailto：电子邮件地址”，这里输入“mailto：moli@163.com”，如图7.17所示。保存文件并预览效果，单击页面中的E-mail:moli@163.com便可弹出窗口，如图7.18所示。图7.17输入邮件地址图7.18邮件撰写窗口7.5链接到其它对象·

链接到下载文件在Dreamweaver中打开1.html文件，选中导航栏中的“茉莉下载”，观察【属性】面板中的链接地址栏，然后把下载的文件添加到文本框中，在这里我们点击浏览文件

按钮，选择07/index_files/download.rar文件，如图7.19所示。保存文件并预览效果，单击页面中的“茉莉下载”，便可弹出另存为对话框，如图7.20所示。提示用户保存下载文件。图7.19链接下载文件图7.20“另存为”对话框7.5链接到其它对象·

链接到FTP站点链接到FTP站点的方法与以上介绍的链接方法基本一致。在Dreamweaver中打开1.html文件，选中导航栏中的“茉莉FTP”，在【属性】面板中的链接地址栏中输入FTP站点地址，这里输入48，如图7.21所示。保存文件并预览效果，单击页面中的“茉莉FTP”，便可打开FTP站点，如图7.22所示。图7.21链接FTP站点图7.22接到的FTP站点返回7.6链接的不同打开效果返回❏_blank将链接的文档载入一个新的、未命名的浏览器窗口。❏_parent将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏

览器窗口。❏_self将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。❏_

top将链接的文档载入整个浏览器窗口，从而删除所有框架。另外效果比较好的超级链接例如：鼠标指向颜色会随机变化，还

有效果比较好的特效都是CSS（层叠样式表）来完成，详见层叠样式表（CSS）。7.7链接标记及其属性链接标记只有一个，即<A>标记。该标记中包括如下属性，如表7.1所示。表7.1<A>标记的属性属href性描

述指定链接地址NAME给链接命名TITLETARGETACCESSKEY给链接设置提示文字指定链接的目标窗口链接热键7.7链接标记及其属性站内链接站内链接的代码格式如下：<A

href=“文件名”TARGET=“属性值”>链接文字</A>其中，TARGET的“属性值”包括：_blank、_parent、_self和_top四种。站外链接站外链接的代码格式如下：<A

href=“URL”>链接文字</A>其中的URL格式如表7.2所示。锚点链接锚点链接的代码格式如下：<A

NAME=“锚点名称”>链接文字</A><A

href=“#锚点名称”>链接文字</A>7.7链接标记及其属性表7.2

URL格式属

性WWW

FTPEMALLURL格式

http://

ftp://

mailto:描述进入万维网站点进入文件传输服务器启动邮件返回本章小结链接是一个网页的灵魂，整个网页中的链接的条理是否清晰，对浏览者能否方便的浏览信息是至关重要的。通过本章的学习，我们应该掌握在网页中建立各种类型链接的方法与技巧，这将对网站的形成大有益处。在下一章，我们将向大家介绍能够方便、灵活定位网页元素的重要的排版工具，它就是“层”。Thank

You

!第8章网页中使用图层主要内容8.1插入图层18.2层中插入对象8.3层的定位238.1

插入图层图8.2选择“插入”→“布局对象”→“层”·

插入层打开附带光盘08\course\1.html文件，先将光标置于文档窗口中要插入层的位置，然后选择【插入】→【布局对象】→【层】，则可插入一个层，如图8.2所示。8.1

插入图层图8.3插入层·

嵌套层嵌套层就是在一层中创建另一层。创建嵌套层方法如下：在如图8.3所示的设计视图中，单击【插入】面板中的【描绘层】按钮，然后在已有的层中拖动鼠标，即可创建一个嵌套层，并调整到合适大小和位置，如图8.4所示。图8.4插入嵌套层返回8.2

层中插入对象·

插入对象将光标定位到层内，就可以在层中插入文本、图像、Flash或视频，甚至还可以插入表格。总之，一切在网页中插入的对象，在层中同样可以插入。1．插入图像在如图8.4所示的设计视图中，单击层面板中名为layer3的层，选择【插入】→【图像】，弹出【选择图像源文件】对话框，如图8.6所示，选择08\image\gdl.jpg文件，图像将被插入到层中，同时调整图像的大小与层的大小相同。图8.6【选择图像源文件】对话框8.2

层中插入对象2.插入文本在此例中，我们在layer4上插入一新层，命名为layer5，并在该层中添加若干文字，如图8.7所示。图8.7插入文本效果8.2

层中插入对象·

层属性设置选择下拉菜单中的【窗口】→【属性】命令，打开【属性】面板。选中创建好的层，【属性】面板中会显示出层的常用属性。单击【属性】面板右下角的扩展箭头，可以看到层的所有属性，如图8.12所示。在【属性】面板中我们可以对层的相关属性进行设置。图8.12层【属性】面板返回8.3

层的定位·

相对定位相对定位（position:relative）指的是层的位置相对于某个元素设置，该元素位置改变，则层的位置相应改变。最简单的设置相对定位层的的方式就是在插入层之前，先创建一个表格，选中某单元格，在其中插入层，即可在该位置创建一个固定大小的层，这个层就是相对于该位置定位的。需要注意，采用这种方式创建的层，你只可以使用鼠标调整它的大小，绝对不可以移动它的位置！也就是说，在属性面板中将层的【左】和【上】属性值设为空，即不可以有数值。8.3

层的定位·

绝对定位绝对定位（position:absolute）就是层默认的定位方式，绝对于浏览器左上角的边缘开始计算定位数值。绝对定位也有一定的好处，当网页全部使用层来排版，而且页面是使用默认的居左设置，那么使用默认的绝对定位方式可以方便的排版，提高设计的工作效率。下面我们通过实例来比较一下相对定位与绝对定位的区别，当浏览器在全屏窗口下显示的效果如图8.13所示；而当浏览器窗口的缩小时，显示效果如图8.14所示。8.3

层的定位相对定位绝对定位看！位置发生变化图8.13全屏窗口效果图8.14缩小窗口效果返回本章小结在本章中我们对层和嵌套层有了一定的认识，并介绍了在层中插入元素的方法，以及对层属性的设置。为了体现出层的优势，我们结合时间轴面板控制层的运动，制作了具有动态效果的网页。当然层也有它的缺点，因为浏览器窗口大小的不同，通过层定位的元素会出现移位的问题，在本章中，我们介绍的层的定位知识，这个问题便可以得到解决。在页面的层在网页中占有非常重要的地位，因此请读者熟练掌握本章内容。在下一章中将介绍样式表修饰网页元素的有关知识，通过下一章的学习相信能够进一步提高网页的设计技能。Thank

You

!第9章使用样式表修饰内容主要内容9.1网页中使用样式的方法19.2各种样式的应用29.1

网页中使用样式的方法·

内联样式表这种方法是将定义CSS样式的语句放在了HTML文件的<head>标记中。在网页中使用时，在规定样式的HTML标记中用id=“…”或class=“…”属性引用，作用范围是当前页。9.1

网页中使用样式的方法·

外联样式表这种方法是将样式表定义成一个.CSS文件，然后链接到网页中。.CSS文件的引用是在HTML的<head>……</head>之间使用语句：<link

href=”style.css”

rel=”stylesheet”

type=”text/css”/href的属性值表示样式表文件的相对位置，rel表示引用文件和当前页面的关系，一般rel的值是stylesheet，表示当文件是HTML主文件，引用的文件是修饰当前文件的样式表文件，它的作用范围是整个网站内的网页，可以使得整个网站的网页风格保持一致，type表示样式表的文本类型。9.1

网页中使用样式的方法·

嵌入样式表这种方法比较简单，只要在需要应用样式的HTML标记内书写上CSS属性就可以了。这种方法主要用于对具体的标记做特定的调整，作用范围只限于本标记内。它并没有很好地体现出CSS的优势，要少用。使用方法如下：<font

style=”font:small;font-family:Arial,Helvetica,sans-serif9.1

网页中使用样式的方法·

导入样式表这种方式与外联样式表很类似,有更高的灵活性。在同一个网页中可以输入多个样式表，它的作用是对整个网页做最笼统的规划。引用方法：＠import url(文件路径)路径可以是样式表相对于HTML文件的路径，或者是一个网址。返回9.2

各种样式的应用·

文本样式【类型】样式用于定义网页中文本的字体、颜色及字体的风格等，如图9.1所示。图9.1【CSS1的CSS规则定义】对话框9.2

各种样式的应用·

文本样式在Dreamweaver中打开教学光盘中的09\course\gc1.html文件，如图9.2所示。我们将以这个网页为例，在其中应用各种类型的CSS样式，使网页最终达到整齐、美观的效果。图9.2初始网页9.2

各种样式的应用·

文本样式首先新建一个CSS1样式，如图9.3所示，外部样式表文件命名为style1，如图9.4所示。在CSS1样式的【类型】属性中进行设置，如图9.5所示。图9.3新建CSS1样式图9.4保存样式表文件9.2

各种样式的应用·

文本样式图9.5【类型】设置9.2

各种样式的应用·

文本样式这时，在【CSS样式】面板中会出现style1.css外部样式文件，选择设计视图左下角的<body>标签,在【CSS样式】面板中右击

CSS1样式，在弹出的快捷菜单中选择【套用】，如图9.6所示。这样CSS1样式便可应用到该网页中。图9.6套用CSS1样式9.2

各种样式的应用·

背景样式【背景】样式的功能是在网页中加入背景颜色或背景图像。继续上例编辑CSS1样式，设置其【背景】属性，在背景图像文本框，点击【浏览...】按钮选择如图9.7所示。图9.7【背景】设置9.2

各种样式的应用·

段落样式段落设置是在【区块】样式中设置完成的，【区块】样式是精确定义整段文本中文字的字距、对齐方式等属性。在Dreamweaver打开gc1.html文件，插入一个层，在层中添加一段文字，在【CSS样式】面板中右击CSS１样式，在弹出的快捷菜单中选择【新建…】选项,新建一个名为CSS2样式，对其设置【区块】样式，如图9.8所示。图9.8【区块】设置9.2

各种样式的应用·

定位样式【定位】样式主要用来定义层在页面中的排布相关属性，如图9.9所示。图9.9【定位】设置9.2

各种样式的应用·

边框样式【边框】样式可以给对象添加边框，设置边框的颜色、粗细以及样式。在【CSS样式】面板的style1样式表文件中，新建样式CSS3，设置其【边框】样式，如图如图9.10所示。图9.10【边框】设置9.2

各种样式的应用·

区域样式【方框】样式是定义特定元素的大小及其与周围元素的间距等属性。在CSS3样式中设置方框样式，如图9.11所示。图9.11【方框】设置9.2

各种样式的应用·

列表样式【列表】样式是用于控制现表内各项元素，可以定义样式的空格和对齐方式。在【CSS样式】面板的style1样式表文件中，新建样式CSS4，设置其【列表】样式，如图9.12所示。图9.12【列表】设置9.2

各种样式的应用·

光标样式【光标】样式可以指定在某个元素上要使用的光标形状，在【CSS样式】面板的style1样式表文件中，新建样式CSS5，在【扩展】样式中设置【光标】选项，如图9.13所示。图9.13【光标】设置9.2

各种样式的应用·

滤镜样式【扩展样式】中的【过滤器】选项，可以为网页中的元素施加各种奇妙的过滤器效果。单击【过滤器】下拉列表框旁的下拉按钮，可以选择各种滤镜，如图9.14所示。图9.14【滤镜】设置返回本章小结本章主要介绍了CSS样式表的基本知识及应用方法，包括如何建立CSS样式表、各类样式如何设置以及如何用CSS样式美化网页。通过本章的学习使大家的网页制作水平又上了一个新的台阶，在下一章节中我们将向大家介绍用来收集用户信息的网页元素—表单。Thank

You

!第10章表单应用基础主要内容1210.2表单交互应用10.1

Dreamweaver中插入表单310.3表单标记介绍10.1

Dreamweaver中插入表单·

表单的基本知识表单包括两个部分：一部分是客户端，通过HTML源代码实现，用于描述表单（如单选框，复选框，列表框，文本框等等）表单的外观；另一部分则是客户端脚本或服务器端应用程序，它们是用于处理通过表达表单提交的信息。如图10.1，表单由文本域、复选框、单选框、菜单、文件地址域、按钮等表单对象组成，所有的部分都包含在一个由HTML的FORM标记构成的表单结构中。表单的种类有注册表、留言薄、站点导航条、搜索引擎等。10.1

Dreamweaver中插入表单图10.1表单样例10.1

Dreamweaver中插入表单插入表单域表单工具栏表单工具栏包括14个按钮，它们分别是：表单域，文本框，隐藏

域，文本域，复选按钮，单选按钮，单选按钮组，列表框，跳转菜单，图像按钮，文件域，按钮，标签和群组框。如图10.2所示图10.2切换到表单工具栏10.1

Dreamweaver中插入表单2．插入表单域打开配套光盘下缘代码文件加下的chap10文件夹下的1.htm，从表单工具栏选择第一个按钮，即表单域，然后再设计界面的选择位置点击鼠标。出现如图10.3所示的红色区域，那就是表单域。图10.3插入表单域表单域10.1

Dreamweaver中插入表单2．插入表单域在表单域中插入如图10