《网站外观设计与内容编辑详述.pptx》由会员分享，可在线阅读，更多相关《网站外观设计与内容编辑详述.pptx（102页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网站开发技术网站开发技术第3章 网站外观设计和内容编辑 河北科技大学经济管理学院河北科技大学经济管理学院袁再健袁再健5/24/20231网站开发技术网站开发技术通过本章的学习，主要掌握以下知识点：通过本章的学习，主要掌握以下知识点：Dreamweaver简介简介站点的规划与设计站点的规划与设计站点的管理站点的管理 网页编辑与超连接网页编辑与超连接 网页定位技术网页定位技术 层叠样式、模板与库层叠样式、模板与库表单与应用表单与应用 5/24/20232网站开发技术网站开发技术3.1 Dreamweaver MX简介简介 Dreamweaver MX是是Macromedia公司最公司最新发布的集网
2、页设计、代码开发、网站创建新发布的集网页设计、代码开发、网站创建和管理于一体的软件。和管理于一体的软件。Dreamweaver MX不仅可以轻松设计网站不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后前台的页面，而且也可以方便地实现网站后台的各种复杂功能。台的各种复杂功能。5/24/20233网站开发技术网站开发技术启动启动Dreamweaver MX后，屏幕显示的是工后，屏幕显示的是工作区窗口，此时系统打开一个名为作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件编辑区中，设计者的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。可以完成网页的设计。工作区窗
3、口各部分功能如下所述。工作区窗口各部分功能如下所述。Dreamweaver MX的工作环境的工作环境5/24/20234网站开发技术网站开发技术1.标题栏标题栏2.菜单栏菜单栏3.文档工具栏文档工具栏4.网页文件编辑区网页文件编辑区5.状态栏状态栏6.浮动面板和浮动面板组浮动面板和浮动面板组7.【插入】面板【插入】面板8.【属性】面板【属性】面板5/24/20235网站开发技术网站开发技术3.2 站点的规划与设计站点的规划与设计 1创建具有浏览器兼容性的站点创建具有浏览器兼容性的站点2站点结构的组织站点结构的组织3创建设计外观创建设计外观4设计导航方案设计导航方案5规划和收集资源规划和收集资源
4、 5/24/20236网站开发技术网站开发技术创建网站一般有以下几个步骤创建网站一般有以下几个步骤:(1)规划站点规划站点：了解建站的目的，收集各种有关的了解建站的目的，收集各种有关的资料。确定站点的主题、风格、网站要提供的服务资料。确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。和网页要表达的主要内容。(2)创建站点的基本结构创建站点的基本结构：在计算机中创建本地站在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹，配置点的根文件夹以及存放各种资料的子文件夹，配置好所有系统的参数和站点测试路径。好所有系统的参数和站点测试路径。(3)网页设计网页设计：充分利用收集到的数据
5、资料，合理充分利用收集到的数据资料，合理地运用地运用Dreamweaver MX提供的技术，最完美地设提供的技术，最完美地设计出能表达网站中心思想的计出能表达网站中心思想的Web 页面。页面。5/24/20237网站开发技术网站开发技术规划站点规划站点“Dreamweaver站点站点”和和“Internet web 站点站点”不完全相不完全相同。同。“Dreamweaver站点站点”是在是在Dreamweaver制作制作网页的过程中所使用的术语，是定义一个站点名网页的过程中所使用的术语，是定义一个站点名称、存放文件的文件夹、使用的称、存放文件的文件夹、使用的Web服务器和应服务器和应用服务器技
6、术等。用服务器技术等。“Internet Web 站点站点”则是把已则是把已经成功的网站内容放到经成功的网站内容放到Internet 或或Intranet的的web服务器上供用户浏览，即运行系统的服务器上供用户浏览，即运行系统的web服务器服务器上的站点。上的站点。网站的发布过程就是将网站的发布过程就是将Dreamweaver站点变成站点变成Internet Web 站点的过程。站点的过程。5/24/20238网站开发技术网站开发技术有两种：有两种：一是使用一是使用“站点定义向导站点定义向导”，这可以根，这可以根据提示逐步完成设置过程；据提示逐步完成设置过程；二是使用二是使用“高级高级”设置，
7、可以根据需要设置，可以根据需要分别设置本地、远程和测试文件夹。分别设置本地、远程和测试文件夹。设置设置Dreamweaver站点的方法站点的方法5/24/20239网站开发技术网站开发技术3.2.1编辑站点编辑站点 1选择菜单栏中的选择菜单栏中的“站点站点”-“编编辑站点辑站点”，出现，出现“站点管理站点管理”对话框，在对话框，在对话框中可以定义多个站点。对话框中可以定义多个站点。新建站点操作如下：新建站点操作如下：1）单击）单击“新建新建”-“站点站点”，出现站点定，出现站点定义对话框义对话框2）单击）单击“基本基本”选项卡以使用站点定义选项卡以使用站点定义向导，或者单击向导，或者单击“高级
8、高级”选项卡以使用选项卡以使用“高级高级”设置。设置。5/24/202310网站开发技术网站开发技术l建站过程中要建站过程中要注意注意一点：所有站点名称和素一点：所有站点名称和素材名称只能用英文，不能用中文，因为材名称只能用英文，不能用中文，因为DreamweaverMX对中文的解析不是很好，如对中文的解析不是很好，如果用中文会出现解析问题。果用中文会出现解析问题。5/24/202311网站开发技术网站开发技术编辑站点对话框 5/24/202312网站开发技术网站开发技术站点定义站点定义 5/24/202313网站开发技术网站开发技术3.2.2设置本地文件夹设置本地文件夹1在在“站点定义站点定
9、义”对话框中选择对话框中选择“高级高级”选项卡和选项卡和“本地信息本地信息”类别类别选项。选项。2输入输入“站点名称站点名称”，如，如my site。3输入输入“本地根文件夹本地根文件夹”，或者单击文件夹图标以选择或新建一，或者单击文件夹图标以选择或新建一个本地文件夹，如个本地文件夹，如D:/xwx11。4如果选中如果选中“自动刷新本地文件列表自动刷新本地文件列表”选项，则当每次复制文件选项，则当每次复制文件到本地文件夹时，系统将自动刷新本地文件列表。如果不选中此到本地文件夹时，系统将自动刷新本地文件列表。如果不选中此项，则可以在站点面板中手动刷新。项，则可以在站点面板中手动刷新。5在在“默认
10、图像文件夹默认图像文件夹”中确定存放图像的默认文件夹，一般是中确定存放图像的默认文件夹，一般是根目录下的根目录下的“Images”。6在在“HTTP地址地址”文本框中，输入文本框中，输入Web站点将使用的站点将使用的URL。这。这使使Dreamweaver能够验证站点中使用绝对能够验证站点中使用绝对URL的链接。的链接。7“启用缓存启用缓存”选项，指定是否创建本地缓存以提高链接和站点选项，指定是否创建本地缓存以提高链接和站点管理任务的速度。管理任务的速度。5/24/202314网站开发技术网站开发技术完成后的本地文件夹对话框 5/24/202315网站开发技术网站开发技术3.2.3设置远程文件
11、夹设置远程文件夹 1在站点定义对话框中选择在站点定义对话框中选择“高级高级”选项卡的选项卡的“远程信息远程信息”分类选项分类选项 2选择一个选择一个“访问访问”选项选项:本地本地/网络网络。3确定一个确定一个“远程文件夹远程文件夹”。4“自动刷新远程文件列表自动刷新远程文件列表”复选框。复选框。5“保存时自动将文件上传到服务器保存时自动将文件上传到服务器”复选框。复选框。6“启用文件存回和取出启用文件存回和取出”。7单击单击“确定确定”按钮。按钮。5/24/202316网站开发技术网站开发技术定义远程站点对话框 5/24/202317网站开发技术网站开发技术3.2.4 用用FTP连接到连接到W
12、eb服务器服务器 1输入输入FTP主机名。主机名。2输入远程站点的主目录名。输入远程站点的主目录名。3输入连接输入连接FTP服务器的登录名和密码。服务器的登录名和密码。4如果你的防火墙配置要求被动如果你的防火墙配置要求被动FTP，则选择，则选择“Use Passive FTP”。5使用防火墙选项。使用防火墙选项。6在在windows中使用安全中使用安全FTP 选择选择FTP来访问远来访问远程文件夹时，在程文件夹时，在Windows中可以选择使用中可以选择使用SSH安全安全登录检查框以自动继续登录检查框以自动继续FTP的安全检查。的安全检查。7其它选项与其它选项与“本地网络本地网络”中相同。中相
13、同。8单击单击“确定确定”按钮。按钮。5/24/202318网站开发技术网站开发技术使用ftp连接时的远程站点定义对话框 5/24/202319网站开发技术网站开发技术1在在“站点定义站点定义”对话框中选择对话框中选择“高级高级”选项选项卡，然后从卡，然后从“类别类别”列表中选择列表中选择“测试服务器测试服务器”2服务器模型服务器模型 3访问方式访问方式有有“无无”、“FTP”和和“Local/Network”三种。三种。4测试服务器测试服务器 5自动刷新远程文件列表选项自动刷新远程文件列表选项6URL前缀前缀 7单击单击“确定确定”按钮按钮 3.2.5 设置测试服务器设置测试服务器5/24/
14、202320网站开发技术网站开发技术测试服务器定义对话框 5/24/202321网站开发技术网站开发技术应用服务器技术列表 5/24/202322网站开发技术网站开发技术3.3.1“文件文件”面板面板1使用使用“文件文件”面板面板 2设置设置“文件文件”面板参数面板参数 3设置设置“文件视图列文件视图列”4在在“文件文件”面板中查看站点面板中查看站点3.3 管理站点文件管理站点文件5/24/202323网站开发技术网站开发技术展开的文件面板 5/24/202324网站开发技术网站开发技术折叠的文件面板 5/24/202325网站开发技术网站开发技术站点面板工具栏 5/24/202326网站开发
15、技术网站开发技术站点首选参数对话框 5/24/202327网站开发技术网站开发技术站点面板的文件列表 5/24/202328网站开发技术网站开发技术站点定义中的“文件视图列”选项 5/24/202329网站开发技术网站开发技术3.3.2站点地图站点地图 站点地图仅适用于本地站点，若要创站点地图仅适用于本地站点，若要创建远程站点的地图，需将远程站点的内容建远程站点的地图，需将远程站点的内容复制到本地磁盘上的一个文件夹中，然后复制到本地磁盘上的一个文件夹中，然后使用使用“编辑站点编辑站点”命令将该站点定义为本地命令将该站点定义为本地站点。站点。5/24/202330网站开发技术网站开发技术1.设置
16、站点设置站点 1）选择）选择“站点站点”-“编辑站点编辑站点”，出现，出现“编编辑站点辑站点”对话框。对话框。2）选择一个）选择一个“站点站点”并单击并单击“编辑编辑”按钮，按钮，出现出现“站点定义站点定义”对话框。对话框。3）从左侧的）从左侧的“分类分类”列表中选择列表中选择“站点地站点地图布局图布局”，“站点定义站点定义”对话框即可显示对话框即可显示“站站点地图布局点地图布局”选项选项 4）单击文件夹图标以通过浏览查找站点）单击文件夹图标以通过浏览查找站点的主页。的主页。5/24/202331网站开发技术网站开发技术5）在）在“列数列数”文本框中，键入一个数字以设文本框中，键入一个数字以设
17、置在站点地图窗口中每行要显示的置在站点地图窗口中每行要显示的页数页数。6）在）在“列宽列宽”文本框中，键入一个数字以设文本框中，键入一个数字以设置站点地图列的宽度。置站点地图列的宽度。7）在）在“图标标签图标标签”下，选择在站点地图中与下，选择在站点地图中与文档图标一起显示的名称表示为文件名还文档图标一起显示的名称表示为文件名还是页标题。是页标题。8）在）在“选项选项”下，选择要在站点地图中显示下，选择要在站点地图中显示的文件的文件。9)单击单击“确认确认”按钮按钮 5/24/202332网站开发技术网站开发技术站点地图布局对话框 5/24/202333网站开发技术网站开发技术站点地图例图 5
18、/24/202334网站开发技术网站开发技术2.站点地图站点地图 站点地图的显示规则如下：（1）以红色显示的文本指示断开的链接；（2）以蓝色显示并标有地球图标的文本，指示其它站点上的文件或特殊链接；（3）绿色选中标记指示你已取出的文件；（4）红色选中标记指示他人取出的文件；（5）锁形图标指示只读或锁定的文件。5/24/202335网站开发技术网站开发技术若要在站点地图中打开某页进行若要在站点地图中打开某页进行编辑，可执行以下操作之一编辑，可执行以下操作之一（1）双击该文件；）双击该文件；（2）选择该文件，然后选择）选择该文件，然后选择“文文件件”-“打开打开”或或“站点站点”-“打开打开”。5
19、/24/202336网站开发技术网站开发技术3.3.3从站点列表中删除站点从站点列表中删除站点 1选择选择“站点站点”-“编辑站点编辑站点”，出现，出现“编编辑站点辑站点”对话框。对话框。2选择一个站点名称。选择一个站点名称。3单击单击“删除删除”按钮，出现一个对话框，按钮，出现一个对话框，要求确认删除。如图要求确认删除。如图 3 16所示。所示。4单击单击“是是”，从列表中删除站点，或单，从列表中删除站点，或单击击“NO”保留站点名称。保留站点名称。5单击单击“完成完成”，关闭，关闭“编辑站点编辑站点”对话对话框。框。5/24/202337网站开发技术网站开发技术确认删除站点对话框 5/24
20、/202338网站开发技术网站开发技术3.3.4 获取和上传文件获取和上传文件 1从远程或测试服务器或取文件从远程或测试服务器或取文件（1）在）在“文件文件”面板上，从面板上，从“站点站点”弹出式菜弹出式菜单中选择一个单中选择一个“站点站点”。（2）如果在使用）如果在使用FTP传输文件，请单击传输文件，请单击“连接连接”按钮打开于远程服务器的连接。按钮打开于远程服务器的连接。如果可以在前以链接的如果可以在前以链接的“远程远程”窗格中看到窗格中看到远程文件，则无需单击远程文件，则无需单击“连接连接”；当单击；当单击“获获取取”时，时，Dreamweaver会自动连接。会自动连接。5/24/202
21、339网站开发技术网站开发技术（3）选择所需文件进行下载。通常在）选择所需文件进行下载。通常在“远程视图远程视图”或或“测试服务器测试服务器”视图中选择这些文件，视图中选择这些文件，也可以在也可以在“本本地视图地视图”中选择相应的文件。中选择相应的文件。（4）单击）单击“文件文件”面板工具栏上的面板工具栏上的“获取获取”按钮，或者按钮，或者选择选择“站点站点”-“获取获取”。如果文件当前已在文档窗口中打开，则可以从文档如果文件当前已在文档窗口中打开，则可以从文档窗口中选择窗口中选择“站点站点”“获取获取”，出现一个对话框，出现一个对话框，询问是否要获取相应文件。询问是否要获取相应文件。（5）若
22、要下载相关文件，则单击）若要下载相关文件，则单击“是是”；否则单击；否则单击“否否”按钮。按钮。5/24/202340网站开发技术网站开发技术 3.3.5同步本地和远程站点上的文件同步本地和远程站点上的文件（1）在）在“文件文件”面板上选择一个站点。面板上选择一个站点。（2）选择要上传的文件。通常在）选择要上传的文件。通常在“本地本地”视图中视图中选择这些文件，也可以在选择这些文件，也可以在“远程远程”视图中选择相视图中选择相应的文件。应的文件。（3）单击）单击“文件文件”面板工具栏上的面板工具栏上的“上传上传”按钮。按钮。如果文件当前已经在文档窗口中打开，则可以如果文件当前已经在文档窗口中打
23、开，则可以从文档窗口种选择从文档窗口种选择“站点站点”“上传上传”命令，命令，（4）若要上传相关文件，则单击）若要上传相关文件，则单击“是是”；否则单；否则单击击“否否”按钮。按钮。5/24/202341网站开发技术网站开发技术确认获取相关文件对话框 5/24/202342网站开发技术网站开发技术 如果远程站点为如果远程站点为ftp服务器，则使用服务器，则使用ftp来同来同步文件，其操作如下。步文件，其操作如下。1在在“文件文件”面板中，从面板中，从“当前站点当前站点”列表列表弹出式菜单中选择一个站点。弹出式菜单中选择一个站点。2选择特定的文件或文件夹。如果要同选择特定的文件或文件夹。如果要同
24、步整个站点，则跳过此步骤。步整个站点，则跳过此步骤。3从上下菜单中选择从上下菜单中选择“同步同步”，出现，出现“同步同步文件文件”对话框。对话框。4完成该对话框。完成该对话框。5/24/202343网站开发技术网站开发技术3.4 网页编辑与超链接网页编辑与超链接Dreamweaver MX文字格式化主要有文字格式化主要有4种方式：种方式：(1)手工格式化方式是在文本【属性】面板中完手工格式化方式是在文本【属性】面板中完成文字的格式化操作。成文字的格式化操作。(2)用用HTML标记格式化方式是用系统提供的标记格式化方式是用系统提供的HTML标记来格式化文本。标记来格式化文本。(3)用用HTML样
25、式来格式化文本的方式。样式来格式化文本的方式。(4)CSS样式是一种对网页文档内容进行精确格样式是一种对网页文档内容进行精确格式化的方法，它可以使用许多式化的方法，它可以使用许多HTML样式不样式不能使用的属性。能使用的属性。3.4.1 网页文档的格式化网页文档的格式化5/24/202344网站开发技术网站开发技术3.4.2 网页编辑的基本操作网页编辑的基本操作3.4.2.1 在网页中插入各种元素在网页中插入各种元素1.插入水平线插入水平线2.插入日期插入日期3.插入插入Flash按钮和按钮和Flash 文字文字4.插入插入Java Applet 程序程序5.插入插入ActiveX控件控件6.
26、插入第三方插件插入第三方插件5/24/202345网站开发技术网站开发技术 3.4.2.2文本的查找和替换文本的查找和替换*3.4.2.3文本的拼写检查文本的拼写检查*3.4.2.4建立网站相册建立网站相册 3.4.2.5利用外部编辑器编辑图像利用外部编辑器编辑图像 3.4.2.6创建鼠标经过图像创建鼠标经过图像5/24/202346网站开发技术网站开发技术3.4.3 创建超链接创建超链接l3.4.3.1 超链接概述超链接概述 超链接是用准备好的文本、按钮、图像等对象与其超链接是用准备好的文本、按钮、图像等对象与其他对象建立链接，也就是在源端点和目标端点之间他对象建立链接，也就是在源端点和目标
27、端点之间建立一种链接。源端点是超链接的起始端点，目标建立一种链接。源端点是超链接的起始端点，目标端点是链接的对象，也称为目标锚。超链接按源端端点是链接的对象，也称为目标锚。超链接按源端点的链接划分，分为超文本链接和非超文本链接两点的链接划分，分为超文本链接和非超文本链接两类。类。5/24/202347网站开发技术网站开发技术3.4.3 创建超链接创建超链接l3.4.3.2 创建超链接的方法（创建超链接的方法（5种）种）l3.4.3.3 在站点管理器中编辑超链接在站点管理器中编辑超链接l3.4.3.4 创建锚点链接创建锚点链接l3.4.3.5 创建电子邮件链接创建电子邮件链接l3.4.3.6 创
28、建导航条创建导航条l3.4.3.7 创建跳转菜单创建跳转菜单l3.4.3.8 创建映射图链接创建映射图链接5/24/202348网站开发技术网站开发技术3.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 层与表格互换层与
29、表格互换3.5.8 3.5.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 框架应用实例框架应用实例5/24/202349网站开发技术网站开发技术3.5.1 创建表格的基本操作创建表格的基本操作l新建表格新建表格l设置表格和单元格的属性设置表格和单元格的属性l选取表格和单元格选取表格和单元格l表格的嵌套表格的嵌套5/24/202350网站开发技术网站开发技术5/24/202351网站开发技
30、术网站开发技术3.5.2 表格的编辑与格式化表格的编辑与格式化l改变表格或单元格的大小改变表格或单元格的大小l表格行、列的增加和删除表格行、列的增加和删除l单元格的拆分和合并单元格的拆分和合并l单元格的复制、粘贴、移动和清除单元格的复制、粘贴、移动和清除l表格格式化表格格式化5/24/202352网站开发技术网站开发技术3.5.3 外部数据导入和表格排序外部数据导入和表格排序l在表格中导入外部数据文件在表格中导入外部数据文件l表格内容排序表格内容排序*5/24/202353网站开发技术网站开发技术3.5.4 布局表格和布局单元格布局表格和布局单元格l创建和调整布局表格与布局单元格创建和调整布局
31、表格与布局单元格l布局视图应用实例布局视图应用实例5/24/202354网站开发技术网站开发技术3.5.5 层的创建和基本操作层的创建和基本操作l创建和删除层创建和删除层l激活和选中层激活和选中层l调整、移动和对齐层调整、移动和对齐层5/24/202355网站开发技术网站开发技术3.5.6 层的属性设置层的属性设置l利用层【属性】面板设置利用层【属性】面板设置l层的控制和操作层的控制和操作3.5.7 层与表格互换层与表格互换l表格转换为层表格转换为层l层转换为表格层转换为表格3.5.8 层的应用实例层的应用实例5/24/202356网站开发技术网站开发技术本节重点回顾本节重点回顾l主要介绍在主
32、要介绍在Dreamweaver中如何规划、设计中如何规划、设计和管理站点，可以用多种方法创建站点，如和管理站点，可以用多种方法创建站点，如果开发果开发Web应用程序，则必须根据需要设置应用程序，则必须根据需要设置服务器和数据库，然后再设计该站点的外观，服务器和数据库，然后再设计该站点的外观，并对该站点进行功能测试，以验证该站点是并对该站点进行功能测试，以验证该站点是否符合定义的目标，可以在站点中包含动态否符合定义的目标，可以在站点中包含动态页，在服务器上可以发布网站，并定期地维页，在服务器上可以发布网站，并定期地维护，以确保站点保持最新，且工作正常。本护，以确保站点保持最新，且工作正常。本章培
33、养学生实际动手操作能力。章培养学生实际动手操作能力。5/24/202357网站开发技术网站开发技术另外，介绍了Drameweaver MX中的3种页面定位工具表格、层和框架，重点介绍了表格、层和框架在设计网页时的定位作用以及表格、层、框架的创建、编辑和属性设置等操作。重点知识有：表格、层、框架和框架集的创建、选择、编辑、保存等操作方法，表格、层、框架和框架集的各种属性设置，在表格、层和框架中输入各种网页元素的方法，布局表格和布局单元格的应用、表格样式化、外部数据导入表格、层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。5/24/202358网站开发技术网站开发技术3.6 层
34、叠样式、模板与库层叠样式、模板与库3.6.1 层叠样式表概述层叠样式表概述3.6.2 层叠样式表的创建与编辑层叠样式表的创建与编辑3.6.3 层叠样式表的应用层叠样式表的应用3.6.4 模板的应用模板的应用3.6.5 库的应用库的应用3.6.6 资源管理资源管理5/24/202359网站开发技术网站开发技术3.6.1 层叠样式表概述层叠样式表概述 层叠样式表（层叠样式表（Cascading Style Sheets,以下简称以下简称CSS样式表）是由样式表）是由W3C（Word Wide Web Consortium）组织批准的一种网页元素定义规则，）组织批准的一种网页元素定义规则，是一种可以
35、对网页文档内容进行精确格式化控制的是一种可以对网页文档内容进行精确格式化控制的工具。工具。利用利用CSS样式表可自动格式化网页文档，可将样式表可自动格式化网页文档，可将CSS样式表直接存储在网页文档中，也可以将样式表直接存储在网页文档中，也可以将CSS样式表定义在网页文档之外，然后将它链接到多个样式表定义在网页文档之外，然后将它链接到多个文档中。文档中。5/24/202360网站开发技术网站开发技术3.6.2 层叠样式表的创建与编辑层叠样式表的创建与编辑 在在Dreamweaver MX中，单击网页编辑窗口中中，单击网页编辑窗口中状态栏右下角的按钮，或选择【窗口】状态栏右下角的按钮，或选择【窗
36、口】|【CSS样式样式】命令，还可以单击【设计】浮动面板组的【】命令，还可以单击【设计】浮动面板组的【CSS样式】选项卡，便可打开【样式】选项卡，便可打开【CSS样式】面板。样式】面板。层叠样式、模板与库电子商务网站建设教程在层叠样式、模板与库电子商务网站建设教程在【CSS样式】面板中，有【应用样式】和【编辑样样式】面板中，有【应用样式】和【编辑样式】两种模式，分别用于式】两种模式，分别用于CSS样式的应用和编辑操样式的应用和编辑操作。设计者可以用【作。设计者可以用【CSS样式】面板右下角的样式】面板右下角的4个按个按钮对钮对CSS样式进行操作。样式进行操作。4个按钮的作用如下所述。个按钮的作
37、用如下所述。5/24/202361网站开发技术网站开发技术图7-1【CSS样式】面板5/24/202362网站开发技术网站开发技术 附加样式附加样式：单击此按钮，可选择一个外部样单击此按钮，可选择一个外部样式表文件，并将其应用于当前文档。式表文件，并将其应用于当前文档。新建样式新建样式：单击此按钮，可打开【新建样式单击此按钮，可打开【新建样式】对话框，新建一个样式。】对话框，新建一个样式。编辑样式编辑样式：单击此按钮，可打开【编辑样式单击此按钮，可打开【编辑样式】对话框，编辑制定的样式。】对话框，编辑制定的样式。删除样式删除样式：选中列表中的样式后，单击此按选中列表中的样式后，单击此按钮可删除
38、该样式。钮可删除该样式。5/24/202363网站开发技术网站开发技术l创建层叠样式和层叠样式表l外部样式表的链接、导入和编辑l层叠样式表的应用5/24/202364网站开发技术网站开发技术3.6.3 层叠样式表的应用层叠样式表的应用l滤镜的概述滤镜的概述l透明度滤镜的应用透明度滤镜的应用l显示滤镜的应用显示滤镜的应用l模糊滤镜的应用模糊滤镜的应用5/24/202365网站开发技术网站开发技术滤镜的概述l滤镜是CSS样式表中功能最丰富、效果最奇特的工具之一，调整Dreamweaver MX 中CSS样式表的十几种滤镜的参数，就能在网页上制作出多姿多彩、令人眩目的各种效果。5/24/202366
39、网站开发技术网站开发技术透明度滤镜的应用用透明度(Alpha)滤镜可以通过具体的数值来指定网页中对象点、线、面的透明度，使得网页中对象的透明度发生变化，制作出一些特殊的视觉效果。透明度滤镜的语法格式是：filter:Alpha（Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)5/24/202367网站开发技术网站开发技术显示滤镜的应用可以利用混合(blend)和显示(reveal)两种滤镜在页面上添加动人的淡入淡出、网页转换效果，前者可以使页面中的对象逐渐消失或显示，后者提供了24种网页转换的效果。
40、其语法格式如下：filter:blendTrans(duration=时间数值)filter:revealTrans(duration=时间数值，transition=过渡类型)5/24/202368网站开发技术网站开发技术模糊滤镜的应用模糊滤镜(Blur)是CSS的滤镜之一，将其应用到网页文本上可以产生出立体字的效果。模糊滤镜能为制作网页的立体字标题带来方便，与其他立体字效果的处理方法相比，能使页面的下载速度明显增快。将滤镜应用到图片上，也能得到意想不到的效果。模糊滤镜的语法格式是：filter:Blur(Add=add，Direction=direction，Strength=streng
41、th)5/24/202369网站开发技术网站开发技术3.6.4 模板的应用模板的应用 Dreamweaver MX的模板是一种预先设计好的网页样式，在制作风格相似的页面时，只要套用这种模板便可以设计出风格一致的网页。5/24/202370网站开发技术网站开发技术创建与保存模板创建与保存模板 创建模板的方法可以是新建一个空白的模板，然后对它进行编辑后保存，也可以利用一个现成的网页，设置好可编辑区，转存为模板。1.新建一个空白模板 2.利用一个现成的网页文件来创建一个模板5/24/202371网站开发技术网站开发技术应用与修改模板应用与修改模板l1.应用模板制作网页l2.修改模板5/24/2023
42、72网站开发技术网站开发技术更新基于模板的网页文档更新基于模板的网页文档l将创建的模板应用到页面制作以后，只需修改一个模板，就可修改所有应用此模板的网页。5/24/202373网站开发技术网站开发技术3.6.5 库的应用库的应用l创建和应用库项目l编辑库项目l用库项目更新网站5/24/202374网站开发技术网站开发技术编辑库项目编辑库项目l1.重命名一个库项目l2.删除一个库项目l3.修改库项目5/24/202375网站开发技术网站开发技术3.6.6资源管理资源管理l图像管理l颜色管理l超链接管理lFlash管理5/24/202376网站开发技术网站开发技术本节本节摘要与重点回顾摘要与重点回
43、顾样式、模板和库是网页设计者设计制作网页时不可缺少的工具。它们可以帮助设计者统一整个网站的风格，节省网页创作的时间，提高工作效率，给管理整个网站带来很大方便。CSS层叠样式表不但能使设计者控制许多HTML样式不能控制的属性，还能迅速准确地将样式作用于整个网站的多个网页上；另外，它带有的特效滤镜，也可使网页设计效果丰富多彩。5/24/202377网站开发技术网站开发技术l本节中介绍的【资源】管理面板可以统一管本节中介绍的【资源】管理面板可以统一管理整个站点的资源，避免反复查找某些网页理整个站点的资源，避免反复查找某些网页元素，能提高网页设计的效率，得到事半功元素，能提高网页设计的效率，得到事半功
44、倍的效果。倍的效果。l本节的重点知识：本节的重点知识：创建、编辑创建、编辑CSS样式，创样式，创建、编辑、选用建、编辑、选用CSS外部样式表，常用外部样式表，常用CSS特特效滤镜的使用方法，模板和库的创建、编辑、效滤镜的使用方法，模板和库的创建、编辑、应用，站点的更新，用网站资源管理器统一应用，站点的更新，用网站资源管理器统一管理网站中的各种资源。管理网站中的各种资源。5/24/202378网站开发技术网站开发技术3.7 表单及应用表单及应用l3.7.1交互式表单概述交互式表单概述l3.7.2创建表单创建表单l3.7.3表单应用实例表单应用实例5/24/202379网站开发技术网站开发技术3.
45、7.1交互式表单概述交互式表单概述 表单（表单（Form）技术可以实现浏览者与）技术可以实现浏览者与Internet服务器之间信息的交互传送，它是服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。网络信息收集处理的一种重要的方式。使用表单，可以帮助使用表单，可以帮助Internet服务器从用服务器从用户那里收集信息，例如收集用户资料、获取户那里收集信息，例如收集用户资料、获取用户订单，在用户订单，在Internet上统也同样存在大量上统也同样存在大量的表单，让用户输入文字进行选择。的表单，让用户输入文字进行选择。5/24/202380网站开发技术网站开发技术表单有两个重要的表单有
46、两个重要的组成部分组成部分：（1）一个是在网页中进行描述的）一个是在网页中进行描述的表单对象表单对象。（2）二是）二是应用程序应用程序，它可以是服务器端的，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分也可以是客户端的，用于对客户信息进行分析处理。析处理。5/24/202381网站开发技术网站开发技术通常表单的工作过程如下：通常表单的工作过程如下：l（1）访问者在浏览有表单的页面时，可填写）访问者在浏览有表单的页面时，可填写必要的信息，然后单击必要的信息，然后单击“提交提交”按钮。按钮。l（2）这些信息通过）这些信息通过Internet传送传送到服务器上。到服务器上。l（3）服务器
47、上专门的程序对这些数据进行）服务器上专门的程序对这些数据进行处处理理，如果有错误会返回错误信息，并要求纠，如果有错误会返回错误信息，并要求纠正错误。正错误。l（4）当数据完整无误后，服务器）当数据完整无误后，服务器反馈反馈一个输一个输入完成信息。入完成信息。5/24/202382网站开发技术网站开发技术 在 Dreamweaver 中，表单输入类型称为表单对象。可以通过选择“插入”“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。5/24/202383网站开发技术网站开发技术l1、表单、表单 l“表单表单”在文档中插入表单。任何其他表单对象，如
48、文本域、在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。理这些数据。l2、文本域、文本域l“文本域文本域”在表单中插入文本域。文本域可接受任何类型的字在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。目符号或星号（用于保护密码）。l3、复选框、复选框 l“复选框复选框”在表单中插入复选框。复选框允许在一组选项中选在表单中插入复选框。复选框允许在一组选项中选
49、择多项，用户可以选择任意多个适用的选项。择多项，用户可以选择任意多个适用的选项。5/24/202384网站开发技术网站开发技术l4、单选按钮、单选按钮l“单选按钮单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择有其他按钮。例如，用户可以选择“是是”或或“否否”。l5、单选按钮组、单选按钮组l“单选按钮组单选按钮组”插入共享同一名称的单选按钮的集合。插入共享同一名称的单选按钮的集合。l6、列表、列表/菜单菜单l“列表列
50、表/菜单菜单”使您可以在列表中创建用户选项。使您可以在列表中创建用户选项。“列表列表”选项在选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单菜单”选项在弹出式菜单中显示选项值，而且只允许用户选选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。择一个选项。5/24/202385网站开发技术网站开发技术l7、跳转菜单、跳转菜单l“跳转菜单跳转菜单”插入可导航的列表或弹出式菜单。跳转插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文