网站外观设计和内容编辑课件.ppt

1、第第3 3章章 网站外观设计和内容编网站外观设计和内容编辑辑 通过本章的学习，主要掌握以下知识点：通过本章的学习，主要掌握以下知识点：Dreamweaver简介简介站点的规划与设计站点的规划与设计站点的管理站点的管理 网页编辑与超连接网页编辑与超连接 网页定位技术网页定位技术 层叠样式、模板与库层叠样式、模板与库表单与应用表单与应用 2023-8-3123.1 Dreamweaver MX简介简介 Dreamweaver MX是是Macromedia公司最公司最新发布的集网页设计、代码开发、网站创建新发布的集网页设计、代码开发、网站创建和管理于一体的软件。和管理于一体的软件。Dreamweav

2、er MX不仅可以轻松设计网站不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后前台的页面，而且也可以方便地实现网站后台的各种复杂功能。台的各种复杂功能。2023-8-313启动启动Dreamweaver MX后，屏幕显示的是工后，屏幕显示的是工作区窗口，此时系统打开一个名为作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件编辑区中，设计者的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。可以完成网页的设计。工作区窗口各部分功能如下所述。工作区窗口各部分功能如下所述。Dreamweaver MX的工作环境的工作环境2023-8-3141.标题栏标题栏2.菜单栏

3、菜单栏3.文档工具栏文档工具栏4.网页文件编辑区网页文件编辑区5.状态栏状态栏6.浮动面板和浮动面板组浮动面板和浮动面板组7.【插入】面板【插入】面板8.【属性】面板【属性】面板2023-8-3153.2 站点的规划与设计站点的规划与设计 1创建具有浏览器兼容性的站点创建具有浏览器兼容性的站点2站点结构的组织站点结构的组织3创建设计外观创建设计外观4设计导航方案设计导航方案5规划和收集资源规划和收集资源 2023-8-316创建网站一般有以下几个步骤创建网站一般有以下几个步骤:(1)规划站点规划站点：了解建站的目的，收集各种有关的了解建站的目的，收集各种有关的资料。确定站点的主题、风格、网站要

4、提供的服务资料。确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。和网页要表达的主要内容。(2)创建站点的基本结构创建站点的基本结构：在计算机中创建本地站在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹，配置点的根文件夹以及存放各种资料的子文件夹，配置好所有系统的参数和站点测试路径。好所有系统的参数和站点测试路径。(3)网页设计网页设计：充分利用收集到的数据资料，合理充分利用收集到的数据资料，合理地运用地运用Dreamweaver MX提供的技术，最完美地设提供的技术，最完美地设计出能表达网站中心思想的计出能表达网站中心思想的Web 页面。页面。2023-8-317规划站

5、点规划站点“Dreamweaver站点站点”和和“Internet web 站点站点”不完不完全相同。全相同。“Dreamweaver站点站点”是在是在Dreamweaver制作网页的过程中所使用的术语，制作网页的过程中所使用的术语，是定义一个站点名称、存放文件的文件夹、使用是定义一个站点名称、存放文件的文件夹、使用的的Web服务器和应用服务器技术等。服务器和应用服务器技术等。“Internet Web 站点站点”则是把已经成功的网站内容放到则是把已经成功的网站内容放到Internet 或或Intranet的的web服务器上供用户浏览，服务器上供用户浏览，即运行系统的即运行系统的web服务器上

6、的站点。服务器上的站点。网站的发布过程就是将网站的发布过程就是将Dreamweaver站点变成站点变成Internet Web 站点的过程。站点的过程。2023-8-318有两种：有两种：一是使用一是使用“站点定义向导站点定义向导”，这可以，这可以根据提示逐步完成设置过程；根据提示逐步完成设置过程；二是使用二是使用“高级高级”设置，可以根据需设置，可以根据需要分别设置本地、远程和测试文件夹。要分别设置本地、远程和测试文件夹。设置设置Dreamweaver站点的方法站点的方法2023-8-3193.2.1编辑站点编辑站点 1选择菜单栏中的选择菜单栏中的“站点站点”-“编辑站点编辑站点”，出现，出

7、现“站点管理站点管理”对对话框，在对话框中可以定义多个站点。话框，在对话框中可以定义多个站点。新建站点操作如下：新建站点操作如下：1）单击）单击“新建新建”-“站点站点”，出现站，出现站点定义对话框点定义对话框2）单击）单击“基本基本”选项卡以使用站点定选项卡以使用站点定义向导，或者单击义向导，或者单击“高级高级”选项卡以使用选项卡以使用“高级高级”设置。设置。2023-8-3110l建站过程中要建站过程中要注意注意一点：所有站点名称和素一点：所有站点名称和素材名称只能用英文，不能用中文，因为材名称只能用英文，不能用中文，因为DreamweaverMX对中文的解析不是很好，如对中文的解析不是很

8、好，如果用中文会出现解析问题。果用中文会出现解析问题。2023-8-3111编辑站点对话框 2023-8-3112站点定义站点定义 2023-8-31133.2.2设置本地文件夹设置本地文件夹1在在“站点定义站点定义”对话框中选择对话框中选择“高级高级”选项卡和选项卡和“本地信息本地信息”类别选项。类别选项。2输入输入“站点名称站点名称”，如，如my site。3输入输入“本地根文件夹本地根文件夹”，或者单击文件夹图标以选择或新建，或者单击文件夹图标以选择或新建一个本地文件夹，如一个本地文件夹，如D:/xwx11。4如果选中如果选中“自动刷新本地文件列表自动刷新本地文件列表”选项，则当每次复制

9、文选项，则当每次复制文件到本地文件夹时，系统将自动刷新本地文件列表。如果不选件到本地文件夹时，系统将自动刷新本地文件列表。如果不选中此项，则可以在站点面板中手动刷新。中此项，则可以在站点面板中手动刷新。5在在“默认图像文件夹默认图像文件夹”中确定存放图像的默认文件夹，一般中确定存放图像的默认文件夹，一般是根目录下的是根目录下的“Images”。6在在“HTTP地址地址”文本框中，输入文本框中，输入Web站点将使用的站点将使用的URL。这使这使Dreamweaver能够验证站点中使用绝对能够验证站点中使用绝对URL的链接。的链接。7“启用缓存启用缓存”选项，指定是否创建本地缓存以提高链接和站选项

10、，指定是否创建本地缓存以提高链接和站点管理任务的速度。点管理任务的速度。2023-8-3114完成后的本地文件夹对话框 2023-8-31153.2.3设置远程文件夹设置远程文件夹 1在站点定义对话框中选择在站点定义对话框中选择“高级高级”选项卡的选项卡的“远程信息远程信息”分类选项分类选项 2选择一个选择一个“访问访问”选项选项:本地本地/网络网络。3确定一个确定一个“远程文件夹远程文件夹”。4“自动刷新远程文件列表自动刷新远程文件列表”复选框。复选框。5“保存时自动将文件上传到服务器保存时自动将文件上传到服务器”复选框。复选框。6“启用文件存回和取出启用文件存回和取出”。7单击单击“确定确

11、定”按钮。按钮。2023-8-3116定义远程站点对话框 2023-8-31173.2.4 用用FTP连接到连接到Web服务器服务器 1输入输入FTP主机名。主机名。2输入远程站点的主目录名。输入远程站点的主目录名。3输入连接输入连接FTP服务器的登录名和密码。服务器的登录名和密码。4如果你的防火墙配置要求被动如果你的防火墙配置要求被动FTP，则选择，则选择“Use Passive FTP”。5使用防火墙选项。使用防火墙选项。6在在windows中使用安全中使用安全FTP 选择选择FTP来访问远来访问远程文件夹时，在程文件夹时，在Windows中可以选择使用中可以选择使用SSH安全安全登录检查

12、框以自动继续登录检查框以自动继续FTP的安全检查。的安全检查。7其它选项与其它选项与“本地网络本地网络”中相同。中相同。8单击单击“确定确定”按钮。按钮。2023-8-3118使用ftp连接时的远程站点定义对话框 2023-8-31191在在“站点定义站点定义”对话框中选择对话框中选择“高级高级”选项卡，然后从选项卡，然后从“类别类别”列表中选择列表中选择“测试服测试服务器务器”2服务器模型服务器模型 3访问方式访问方式有有“无无”、“FTP”和和“Local/Network”三三种。种。4测试服务器测试服务器 5自动刷新远程文件列表选项自动刷新远程文件列表选项6URL前缀前缀 7单击单击“确

13、定确定”按钮按钮 3.2.5 设置测试服务器设置测试服务器2023-8-3120测试服务器定义对话框 2023-8-3121应用服务器技术列表 2023-8-31223.3.1“文件文件”面板面板1使用使用“文件文件”面板面板 2设置设置“文件文件”面板参数面板参数 3设置设置“文件视图列文件视图列”4在在“文件文件”面板中查看站点面板中查看站点3.3 管理站点文件管理站点文件2023-8-3123展开的文件面板 2023-8-3124折叠的文件面板 2023-8-3125站点面板工具栏 2023-8-3126站点首选参数对话框 2023-8-3127站点面板的文件列表 2023-8-3128

14、站点定义中的“文件视图列”选项 2023-8-31293.3.2站点地图站点地图 站点地图仅适用于本地站点，若要创站点地图仅适用于本地站点，若要创建远程站点的地图，需将远程站点的内建远程站点的地图，需将远程站点的内容复制到本地磁盘上的一个文件夹中，容复制到本地磁盘上的一个文件夹中，然后使用然后使用“编辑站点编辑站点”命令将该站点定命令将该站点定义为本地站点。义为本地站点。2023-8-31301.设置站点设置站点 1）选择）选择“站点站点”-“编辑站点编辑站点”，出，出现现“编辑站点编辑站点”对话框。对话框。2）选择一个）选择一个“站点站点”并单击并单击“编辑编辑”按按钮，出现钮，出现“站点定

15、义站点定义”对话框。对话框。3）从左侧的）从左侧的“分类分类”列表中选择列表中选择“站点站点地图布局地图布局”，“站点定义站点定义”对话框即可显对话框即可显示示“站点地图布局站点地图布局”选项选项 4）单击文件夹图标以通过浏览查找站点）单击文件夹图标以通过浏览查找站点的主页。的主页。2023-8-31315）在）在“列数列数”文本框中，键入一个数字以文本框中，键入一个数字以设置在站点地图窗口中每行要显示的设置在站点地图窗口中每行要显示的页数页数。6）在）在“列宽列宽”文本框中，键入一个数字以文本框中，键入一个数字以设置站点地图列的宽度。设置站点地图列的宽度。7）在）在“图标标签图标标签”下，选

16、择在站点地图中下，选择在站点地图中与文档图标一起显示的名称表示为文件名与文档图标一起显示的名称表示为文件名还是页标题。还是页标题。8）在）在“选项选项”下，选择要在站点地图中显下，选择要在站点地图中显示的文件示的文件。9)单击单击“确认确认”按钮按钮 2023-8-3132站点地图布局对话框 2023-8-3133站点地图例图 2023-8-31342.站点地图站点地图 站点地图的显示规则如下：（1）以红色显示的文本指示断开的链接；（2）以蓝色显示并标有地球图标的文本，指示其它站点上的文件或特殊链接；（3）绿色选中标记指示你已取出的文件；（4）红色选中标记指示他人取出的文件；（5）锁形图标指示

17、只读或锁定的文件。2023-8-3135若要在站点地图中打开某页进行若要在站点地图中打开某页进行编辑，可执行以下操作之一编辑，可执行以下操作之一（1）双击该文件；）双击该文件；（2）选择该文件，然后选择）选择该文件，然后选择“文件文件”-“打开打开”或或“站点站点”-“打开打开”。2023-8-31363.3.3从站点列表中删除站点从站点列表中删除站点 1选择选择“站点站点”-“编辑站点编辑站点”，出，出现现“编辑站点编辑站点”对话框。对话框。2选择一个站点名称。选择一个站点名称。3单击单击“删除删除”按钮，出现一个对话框，按钮，出现一个对话框，要求确认删除。如图要求确认删除。如图 3 16所

18、示。所示。4单击单击“是是”，从列表中删除站点，或，从列表中删除站点，或单击单击“NO”保留站点名称。保留站点名称。5单击单击“完成完成”，关闭，关闭“编辑站点编辑站点”对话框。对话框。2023-8-3137确认删除站点对话框 2023-8-31383.3.4 获取和上传文件获取和上传文件 1从远程或测试服务器或取文件从远程或测试服务器或取文件（1）在）在“文件文件”面板上，从面板上，从“站点站点”弹出弹出式菜单中选择一个式菜单中选择一个“站点站点”。（2）如果在使用）如果在使用FTP传输文件，请单击传输文件，请单击“连接连接”按钮打开于远程服务器的连接。按钮打开于远程服务器的连接。如果可以在

19、前以链接的如果可以在前以链接的“远程远程”窗格中看窗格中看到远程文件，则无需单击到远程文件，则无需单击“连接连接”；当单；当单击击“获取获取”时，时，Dreamweaver会自动连接。会自动连接。2023-8-3139（3）选择所需文件进行下载。通常在）选择所需文件进行下载。通常在“远程视图远程视图”或或“测试服务器测试服务器”视图中选择这些文件，视图中选择这些文件，也可以在也可以在“本地视图本地视图”中选择相应的文件。中选择相应的文件。（4）单击）单击“文件文件”面板工具栏上的面板工具栏上的“获取获取”按钮，按钮，或者选择或者选择“站点站点”-“获取获取”。如果文件当前已在文档窗口中打开，则

20、可以从文档如果文件当前已在文档窗口中打开，则可以从文档窗口中选择窗口中选择“站点站点”“获取获取”，出现一个对，出现一个对话框，询问是否要获取相应文件。话框，询问是否要获取相应文件。（5）若要下载相关文件，则单击）若要下载相关文件，则单击“是是”；否则单击；否则单击“否否”按钮。按钮。2023-8-3140 3.3.5同步本地和远程站点上的文件同步本地和远程站点上的文件（1）在）在“文件文件”面板上选择一个站点。面板上选择一个站点。（2）选择要上传的文件。通常在）选择要上传的文件。通常在“本地本地”视图视图中选择这些文件，也可以在中选择这些文件，也可以在“远程远程”视图中选视图中选择相应的文件

21、。择相应的文件。（3）单击）单击“文件文件”面板工具栏上的面板工具栏上的“上传上传”按按钮。如果文件当前已经在文档窗口中打开，则钮。如果文件当前已经在文档窗口中打开，则可以从文档窗口种选择可以从文档窗口种选择“站点站点”“上传上传”命令，命令，（4）若要上传相关文件，则单击）若要上传相关文件，则单击“是是”；否则；否则单击单击“否否”按钮。按钮。2023-8-3141确认获取相关文件对话框 2023-8-3142 如果远程站点为如果远程站点为ftp服务器，则使用服务器，则使用ftp来来同步文件，其操作如下。同步文件，其操作如下。1在在“文件文件”面板中，从面板中，从“当前站点当前站点”列表弹出

22、式菜单中选择一个站点。列表弹出式菜单中选择一个站点。2选择特定的文件或文件夹。如果要同选择特定的文件或文件夹。如果要同步整个站点，则跳过此步骤。步整个站点，则跳过此步骤。3从上下菜单中选择从上下菜单中选择“同步同步”，出现，出现“同步文件同步文件”对话框。对话框。4完成该对话框。完成该对话框。2023-8-31433.4 网页编辑与超链接网页编辑与超链接Dreamweaver MX文字格式化主要有文字格式化主要有4种方式：种方式：(1)手工格式化方式是在文本【属性】面板中完手工格式化方式是在文本【属性】面板中完成文字的格式化操作。成文字的格式化操作。(2)用用HTML标记格式化方式是用系统提供

23、的标记格式化方式是用系统提供的HTML标记来格式化文本。标记来格式化文本。(3)用用HTML样式来格式化文本的方式。样式来格式化文本的方式。(4)CSS样式是一种对网页文档内容进行精确格样式是一种对网页文档内容进行精确格式化的方法，它可以使用许多式化的方法，它可以使用许多HTML样式不样式不能使用的属性。能使用的属性。3.4.1 网页文档的格式化网页文档的格式化2023-8-31443.4.2 网页编辑的基本操作网页编辑的基本操作3.4.2.1 在网页中插入各种元素在网页中插入各种元素1.插入水平线插入水平线2.插入日期插入日期3.插入插入Flash按钮和按钮和Flash 文字文字4.插入插入

24、Java Applet 程序程序5.插入插入ActiveX控件控件6.插入第三方插件插入第三方插件2023-8-3145 3.4.2.2文本的查找和替换文本的查找和替换*3.4.2.3文本的拼写检查文本的拼写检查*3.4.2.4建立网站相册建立网站相册 3.4.2.5利用外部编辑器编辑图像利用外部编辑器编辑图像 3.4.2.6创建鼠标经过图像创建鼠标经过图像2023-8-31463.4.3 创建超链接创建超链接l3.4.3.1 超链接概述超链接概述 超链接是用准备好的文本、按钮、图像等对象与其超链接是用准备好的文本、按钮、图像等对象与其他对象建立链接，也就是在源端点和目标端点之间他对象建立链接

25、，也就是在源端点和目标端点之间建立一种链接。源端点是超链接的起始端点，目标建立一种链接。源端点是超链接的起始端点，目标端点是链接的对象，也称为目标锚。超链接按源端端点是链接的对象，也称为目标锚。超链接按源端点的链接划分，分为超文本链接和非超文本链接两点的链接划分，分为超文本链接和非超文本链接两类。类。2023-8-31473.4.3 创建超链接创建超链接l3.4.3.2 创建超链接的方法（创建超链接的方法（5种）种）l3.4.3.3 在站点管理器中编辑超链接在站点管理器中编辑超链接l3.4.3.4 创建锚点链接创建锚点链接l3.4.3.5 创建电子邮件链接创建电子邮件链接l3.4.3.6 创建

26、导航条创建导航条l3.4.3.7 创建跳转菜单创建跳转菜单l3.4.3.8 创建映射图链接创建映射图链接2023-8-31483.5 网页的定位技术网页的定位技术3.5.1 3.5.1 创建表格的基本操作创建表格的基本操作3.5.2 3.5.2 表格的编辑与格式化表格的编辑与格式化3.5.3 3.5.3 外部数据导入和表格排序外部数据导入和表格排序3.5.4 3.5.4 布局表格和布局单元格布局表格和布局单元格3.5.5 3.5.5 层的创建和基本操作层的创建和基本操作3.5.6 3.5.6 层的属性设置层的属性设置1001003.5.7 3.5.7 层与表格互换层与表格互换3.5.8 3.5

27、.8 层的应用实例层的应用实例3.5.9 3.5.9 框架的基本操作框架的基本操作3.5.10 3.5.10 框架和框架集的选择与属性设置框架和框架集的选择与属性设置3.5.11 3.5.11 框架和框架集的保存框架和框架集的保存3.5.12 3.5.12 框架应用实例框架应用实例2023-8-31493.5.1 创建表格的基本操作创建表格的基本操作l新建表格新建表格l设置表格和单元格的属性设置表格和单元格的属性l选取表格和单元格选取表格和单元格l表格的嵌套表格的嵌套2023-8-31502023-8-31513.5.2 表格的编辑与格式化表格的编辑与格式化l改变表格或单元格的大小改变表格或单

28、元格的大小l表格行、列的增加和删除表格行、列的增加和删除l单元格的拆分和合并单元格的拆分和合并l单元格的复制、粘贴、移动和清除单元格的复制、粘贴、移动和清除l表格格式化表格格式化2023-8-31523.5.3 外部数据导入和表格排序外部数据导入和表格排序l在表格中导入外部数据文件在表格中导入外部数据文件l表格内容排序表格内容排序*2023-8-31533.5.4 布局表格和布局单元格布局表格和布局单元格l创建和调整布局表格与布局单元格创建和调整布局表格与布局单元格l布局视图应用实例布局视图应用实例2023-8-31543.5.5 层的创建和基本操作层的创建和基本操作l创建和删除层创建和删除层

29、l激活和选中层激活和选中层l调整、移动和对齐层调整、移动和对齐层2023-8-31553.5.6 层的属性设置层的属性设置l利用层【属性】面板设置利用层【属性】面板设置l层的控制和操作层的控制和操作3.5.7 层与表格互换层与表格互换l表格转换为层表格转换为层l层转换为表格层转换为表格3.5.8 层的应用实例层的应用实例2023-8-3156本节重点回顾本节重点回顾l主要介绍在主要介绍在Dreamweaver中如何规划、设计中如何规划、设计和管理站点，可以用多种方法创建站点，如和管理站点，可以用多种方法创建站点，如果开发果开发Web应用程序，则必须根据需要设置应用程序，则必须根据需要设置服务器

30、和数据库，然后再设计该站点的外观，服务器和数据库，然后再设计该站点的外观，并对该站点进行功能测试，以验证该站点是并对该站点进行功能测试，以验证该站点是否符合定义的目标，可以在站点中包含动态否符合定义的目标，可以在站点中包含动态页，在服务器上可以发布网站，并定期地维页，在服务器上可以发布网站，并定期地维护，以确保站点保持最新，且工作正常。本护，以确保站点保持最新，且工作正常。本章培养学生实际动手操作能力。章培养学生实际动手操作能力。2023-8-3157另外，介绍了Drameweaver MX中的3种页面定位工具表格、层和框架，重点介绍了表格、层和框架在设计网页时的定位作用以及表格、层、框架的创

31、建、编辑和属性设置等操作。重点知识有：表格、层、框架和框架集的创建、选择、编辑、保存等操作方法，表格、层、框架和框架集的各种属性设置，在表格、层和框架中输入各种网页元素的方法，布局表格和布局单元格的应用、表格样式化、外部数据导入表格、层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。2023-8-31583.6 层叠样式、模板与库层叠样式、模板与库3.6.1 层叠样式表概述层叠样式表概述3.6.2 层叠样式表的创建与编辑层叠样式表的创建与编辑3.6.3 层叠样式表的应用层叠样式表的应用3.6.4 模板的应用模板的应用3.6.5 库的应用库的应用3.6.6 资源管理资源管理20

32、23-8-31593.6.1 层叠样式表概述层叠样式表概述 层叠样式表（层叠样式表（Cascading Style Sheets,以下简称以下简称CSS样式表）是由样式表）是由W3C（Word Wide Web Consortium）组织批准的一种网页元素定义规则，）组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的是一种可以对网页文档内容进行精确格式化控制的工具。工具。利用利用CSS样式表可自动格式化网页文档，可将样式表可自动格式化网页文档，可将CSS样式表直接存储在网页文档中，也可以将样式表直接存储在网页文档中，也可以将CSS样式表定义在网页文档之外，然后将它链接

33、到多个样式表定义在网页文档之外，然后将它链接到多个文档中。文档中。2023-8-31603.6.2 层叠样式表的创建与编辑层叠样式表的创建与编辑 在在Dreamweaver MX中，单击网页编辑窗口中中，单击网页编辑窗口中状态栏右下角的按钮，或选择【窗口】状态栏右下角的按钮，或选择【窗口】|【CSS样式】样式】命令，还可以单击【设计】浮动面板组的【命令，还可以单击【设计】浮动面板组的【CSS样样式】选项卡，便可打开【式】选项卡，便可打开【CSS样式】面板。样式】面板。层叠样式、模板与库电子商务网站建设教程在层叠样式、模板与库电子商务网站建设教程在【CSS样式】面板中，有【应用样式】和【编辑样样

34、式】面板中，有【应用样式】和【编辑样式】两种模式，分别用于式】两种模式，分别用于CSS样式的应用和编辑操样式的应用和编辑操作。设计者可以用【作。设计者可以用【CSS样式】面板右下角的样式】面板右下角的4个按个按钮对钮对CSS样式进行操作。样式进行操作。4个按钮的作用如下所述。个按钮的作用如下所述。2023-8-3161图7-1【CSS样式】面板2023-8-3162 附加样式附加样式：单击此按钮，可选择一个外部样单击此按钮，可选择一个外部样式表文件，并将其应用于当前文档。式表文件，并将其应用于当前文档。新建样式新建样式：单击此按钮，可打开【新建样式】单击此按钮，可打开【新建样式】对话框，新建一

35、个样式。对话框，新建一个样式。编辑样式编辑样式：单击此按钮，可打开【编辑样式】单击此按钮，可打开【编辑样式】对话框，编辑制定的样式。对话框，编辑制定的样式。删除样式删除样式：选中列表中的样式后，单击此按选中列表中的样式后，单击此按钮可删除该样式。钮可删除该样式。2023-8-3163l创建层叠样式和层叠样式表l外部样式表的链接、导入和编辑l层叠样式表的应用2023-8-31643.6.3 层叠样式表的应用层叠样式表的应用l滤镜的概述滤镜的概述l透明度滤镜的应用透明度滤镜的应用l显示滤镜的应用显示滤镜的应用l模糊滤镜的应用模糊滤镜的应用2023-8-3165滤镜的概述l滤镜是CSS样式表中功能最

36、丰富、效果最奇特的工具之一，调整Dreamweaver MX 中CSS样式表的十几种滤镜的参数，就能在网页上制作出多姿多彩、令人眩目的各种效果。2023-8-3166透明度滤镜的应用用透明度(Alpha)滤镜可以通过具体的数值来指定网页中对象点、线、面的透明度，使得网页中对象的透明度发生变化，制作出一些特殊的视觉效果。透明度滤镜的语法格式是：filter:Alpha（Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)2023-8-3167显示滤镜的应用可以利用混合(blend)和显示(reveal)两

37、种滤镜在页面上添加动人的淡入淡出、网页转换效果，前者可以使页面中的对象逐渐消失或显示，后者提供了24种网页转换的效果。其语法格式如下：filter:blendTrans(duration=时间数值)filter:revealTrans(duration=时间数值，transition=过渡类型)2023-8-3168模糊滤镜的应用模糊滤镜(Blur)是CSS的滤镜之一，将其应用到网页文本上可以产生出立体字的效果。模糊滤镜能为制作网页的立体字标题带来方便，与其他立体字效果的处理方法相比，能使页面的下载速度明显增快。将滤镜应用到图片上，也能得到意想不到的效果。模糊滤镜的语法格式是：filter:B

38、lur(Add=add，Direction=direction，Strength=strength)2023-8-31693.6.4 模板的应用模板的应用 Dreamweaver MX的模板是一种预先设计好的网页样式，在制作风格相似的页面时，只要套用这种模板便可以设计出风格一致的网页。2023-8-3170创建与保存模板创建与保存模板 创建模板的方法可以是新建一个空白的模板，然后对它进行编辑后保存，也可以利用一个现成的网页，设置好可编辑区，转存为模板。1.新建一个空白模板 2.利用一个现成的网页文件来创建一个模板2023-8-3171应用与修改模板应用与修改模板l1.应用模板制作网页l2.修改

39、模板2023-8-3172更新基于模板的网页文档更新基于模板的网页文档l将创建的模板应用到页面制作以后，只需修改一个模板，就可修改所有应用此模板的网页。2023-8-31733.6.5 库的应用库的应用l创建和应用库项目l编辑库项目l用库项目更新网站2023-8-3174编辑库项目编辑库项目l1.重命名一个库项目l2.删除一个库项目l3.修改库项目2023-8-31753.6.6资源管理资源管理l图像管理l颜色管理l超链接管理lFlash管理2023-8-3176本节本节摘要与重点回顾摘要与重点回顾样式、模板和库是网页设计者设计制作网页时不可缺少的工具。它们可以帮助设计者统一整个网站的风格，节

40、省网页创作的时间，提高工作效率，给管理整个网站带来很大方便。CSS层叠样式表不但能使设计者控制许多HTML样式不能控制的属性，还能迅速准确地将样式作用于整个网站的多个网页上；另外，它带有的特效滤镜，也可使网页设计效果丰富多彩。2023-8-3177l本节中介绍的【资源】管理面板可以统一管本节中介绍的【资源】管理面板可以统一管理整个站点的资源，避免反复查找某些网页理整个站点的资源，避免反复查找某些网页元素，能提高网页设计的效率，得到事半功元素，能提高网页设计的效率，得到事半功倍的效果。倍的效果。l本节的重点知识：本节的重点知识：创建、编辑创建、编辑CSS样式，创样式，创建、编辑、选用建、编辑、选

41、用CSS外部样式表，常用外部样式表，常用CSS特特效滤镜的使用方法，模板和库的创建、编辑、效滤镜的使用方法，模板和库的创建、编辑、应用，站点的更新，用网站资源管理器统一应用，站点的更新，用网站资源管理器统一管理网站中的各种资源。管理网站中的各种资源。2023-8-31783.7 表单及应用表单及应用l3.7.1交互式表单概述交互式表单概述l3.7.2创建表单创建表单l3.7.3表单应用实例表单应用实例2023-8-31793.7.1交互式表单概述交互式表单概述 表单（表单（Form）技术可以实现浏览者与）技术可以实现浏览者与Internet服务器之间信息的交互传送，它是服务器之间信息的交互传送

42、，它是网络信息收集处理的一种重要的方式。网络信息收集处理的一种重要的方式。使用表单，可以帮助使用表单，可以帮助Internet服务器从用服务器从用户那里收集信息，例如收集用户资料、获取户那里收集信息，例如收集用户资料、获取用户订单，在用户订单，在Internet上统也同样存在大量上统也同样存在大量的表单，让用户输入文字进行选择。的表单，让用户输入文字进行选择。2023-8-3180表单有两个重要的表单有两个重要的组成部分组成部分：（1）一个是在网页中进行描述的）一个是在网页中进行描述的表单对象表单对象。（2）二是）二是应用程序应用程序，它可以是服务器端的，它可以是服务器端的，也可以是客户端的，

43、用于对客户信息进行分也可以是客户端的，用于对客户信息进行分析处理。析处理。2023-8-3181通常表单的工作过程如下：通常表单的工作过程如下：l（1）访问者在浏览有表单的页面时，可填写）访问者在浏览有表单的页面时，可填写必要的信息，然后单击必要的信息，然后单击“提交提交”按钮。按钮。l（2）这些信息通过）这些信息通过Internet传送传送到服务器上。到服务器上。l（3）服务器上专门的程序对这些数据进行）服务器上专门的程序对这些数据进行处处理理，如果有错误会返回错误信息，并要求纠，如果有错误会返回错误信息，并要求纠正错误。正错误。l（4）当数据完整无误后，服务器）当数据完整无误后，服务器反馈

44、反馈一个输一个输入完成信息。入完成信息。2023-8-3182 在 Dreamweaver 中，表单输入类型称为表单对象。可以通过选择“插入”“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。2023-8-3183l1、表单、表单 l“表单表单”在文档中插入表单。任何其他表单对象，如文本域、在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。理这些数据。l2、文本域、文本域l“文本域文本域”在表单中插入文本域。文本域可接受任何类型的在表

45、单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。项目符号或星号（用于保护密码）。l3、复选框、复选框 l“复选框复选框”在表单中插入复选框。复选框允许在一组选项中在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。选择多项，用户可以选择任意多个适用的选项。2023-8-3184l4、单选按钮、单选按钮l“单选按钮单选按钮”在表单中插入单选按钮。单选按钮代表互相排在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取

46、消选择该组中的斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择所有其他按钮。例如，用户可以选择“是是”或或“否否”。l5、单选按钮组、单选按钮组l“单选按钮组单选按钮组”插入共享同一名称的单选按钮的集合。插入共享同一名称的单选按钮的集合。l6、列表、列表/菜单菜单l“列表列表/菜单菜单”使您可以在列表中创建用户选项。使您可以在列表中创建用户选项。“列表列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。个选项。“菜单菜单”选项在弹出式菜单中显示选项值，而且只选项在弹出式菜单中显示选项值，而且只

47、允许用户选择一个选项。允许用户选择一个选项。2023-8-3185l7、跳转菜单、跳转菜单l“跳转菜单跳转菜单”插入可导航的列表或弹出式菜单。跳插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。选项都链接到文档或文件。请参见创建跳转菜单。l8、图像域、图像域l“图像域图像域”使您可以在表单中插入图像。可以使用使您可以在表单中插入图像。可以使用图像域替换图像域替换“提交提交”按钮，以生成图形化按钮。按钮，以生成图形化按钮。l9、文件域、文件域l“文件域文件域”在文档中插入空白文本域和

48、在文档中插入空白文本域和“浏览浏览”按按钮。文件域使用户可以浏览到其硬盘上的文件，并钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。将这些文件作为表单数据上传。2023-8-3186l10、按钮、按钮 l“按钮按钮”在表单中插入文本按钮。按钮在单击时执行任务，在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的者使用预定义的“提交提交”或或“重置重置”标签之一。标签之一。l11、标签、标签l“标签标签”在文档中给表单加上标签，以在文档中给表单加上标签，以形式形式

49、开头和结尾。开头和结尾。l12、字段集、字段集l“字段集字段集”在文本中设置文本标签。在文本中设置文本标签。l认识了表单，那么创建和使用表单时就可以根据需要进行选认识了表单，那么创建和使用表单时就可以根据需要进行选择。表单时是动态网页的灵魂。择。表单时是动态网页的灵魂。2023-8-31873.7.2创建表单创建表单在在Dreamweaver中可以创建各种各样的表单，表单中中可以创建各种各样的表单，表单中可以包含各种对象，例如文本域、按钮、列表等。可以包含各种对象，例如文本域、按钮、列表等。l1、插入表单、插入表单l在网页中添加表单对象，首先必须创建表单。表单在浏览网在网页中添加表单对象，首先

50、必须创建表单。表单在浏览网页中属于不可见元素。在页中属于不可见元素。在Dreamweaver8中插入一个表单。中插入一个表单。当页面处于当页面处于“设计设计”视图中时，用红色的虚轮廓线指示表单。视图中时，用红色的虚轮廓线指示表单。如果没有看到此轮廓线，请检查是否选中了如果没有看到此轮廓线，请检查是否选中了“查看查看”“可视可视化助理化助理”“不可见元素不可见元素”。l（1）将插入点放在希望表单出现的位置。选择）将插入点放在希望表单出现的位置。选择“插插入入”“表单表单”，或选择，或选择“插入插入”栏上的栏上的“表单表单”类别，然后类别，然后单击单击“表单表单”图标，图标，l（2）用鼠标选中表单