二维码登录
邮箱帐号登录
二维码已失效请点击刷新
网易邮箱大师电脑版
登录更便捷，工作更高效
成功扫描，请在手机上确认登录
测试并选择最佳服务器
&|&&|&电脑版
（数据来源：艾媒邮箱报告）
登录过程有点慢哦，可能是由于网络问题造成的。
3&秒后自动尝试普通加密方式登录
无法登录邮箱？关注我们：
后使用快捷导航没有帐号？
这个QQ暂停使用,请加新QQ
请注意,请注意:::
qq暂停使用
,谢谢,谢谢
discuzx模板使用教程---用DW-dreamweaver来修改模板文件内容
对于新手来说，DW的新版本都有个破解的过程，功能也复杂用不上，建议只使用DW8就可以了。这个版本，运行飞快。安装简单
下载地址：
下载完成后--打开安装文件，一直带你下一步，知道安装完成，启动软件---选择&&我有一个序列号
填写序列后，完成
序列号：WPD800--71626
用FTP下载想要修改的文件（VPS可以直接打开修改）
使用之前，先强调下，要看清自己的论坛是什么编码，查看方法，打开论坛首页，在浏览器上查看。
无论是什么类型的浏览器方法 一样，都是 查看--编码---
1222.jpg (39.89 KB, 下载次数: 35)
18:29 上传
111.jpg (35.16 KB, 下载次数: 36)
18:29 上传
GBK和GB2312为一个格式，DZ上称为gbk
非GBK格式，那就是UTF格式了，港澳台的有BIG5格式
然后设置下自己的 DW新建文档格式，方法步骤，最上方导航 编辑--首选参数。
如果是GBK则如下图
222.jpg (60.08 KB, 下载次数: 35)
18:33 上传
如果是UTF如下图设置，签名那里别选择，留空
999.jpg (68.08 KB, 下载次数: 35)
18:35 上传
打开需要修改的模板文件
111.jpg (10.4 KB, 下载次数: 38)
18:38 上传
选择拆分（如上图），上面为代码，下面为可视化界面，就看到要修改的文字了，一般来说文字性的东西不会很多，一目了然，要修改链接点击有链接的文字或者图片（图片不要再DW里修改，修改连接可以，图片直接用FTP替换）
下面的属性窗口里会有链接显示，直接修改就行了。我用的是CS6没装8，不好演示，但明白大概意思就行了
2.jpg (24.25 KB, 下载次数: 37)
21:37 上传
知道这点修改模板足矣！
以下非常重要，是很多问题的根源，一定要注意，有则改之，无则加勉！！！
DZ模板分为utf和GBK文件格式，如果格式错误可能造成乱码，这样倒还是能分辨的，但有一种错误不会乱码但会乱位，那就是UTF格式的签名格式。本工作室做的模板就算全部是有签名也是不会有错位的现象，但有些不规范的插件，安装了后会出现签名冲突，DZ模板如果出现顶部错位就一定是这个签名问题，方法为，DW下CTRL+J 快捷键打开
QQ截图27.jpg (57.93 KB, 下载次数: 37)
18:28 上传
如需要详细学习，请打开DW技术板块&&
您可能感兴趣
此处修改有2处,而且都在个地方,建议搜索.klp_mohdbg
[/backcolor]找到修改地方
diy高级模式下,编辑这个模块
编辑每条文章
发布的时候,勾选文章编辑框靠右的那个勾选框(编辑源码)
复制通用代码(iframe格式)到
活动主题 内置类别
设置最大宽度就行了,当然这个和css也有关,如果设置无效,应该是图片宽度被css控制了
查看：9664&|&回复：0
此处修改有2处,而且都在个地方,建议搜索.klp_mohdbg
[/backcolor]找到修改地方
diy高级模式下,编辑这个模块
编辑每条文章
发布的时候,勾选文章编辑框靠右的那个勾选框(编辑源码)
复制通用代码(iframe格式)到
活动主题 内置类别
设置最大宽度就行了,当然这个和css也有关,如果设置无效,应该是图片宽度被css控制了
这个是权限问题,设置游客权限
用户 用户组
系统用户组
游客(编辑)
后台--运营--站点帮助
第一,用新域名登录后台,
工具--更新缓存
第二.修改ucenter地址
站长-->UCenter设置
管理员登录后,右上角diy图标
文字直接替换 需要注意的是,字数尽量保持一致,四个字的也对应四个字,否咋可能会错位,
Copyright &
All Rights Reserved. & Powered by
扫一扫，关注我们
下载APP客户端&p&Think Defferent&/p&
&p&Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.&&/p&
&p&- Apple Inc.&/p&
(默认模式)
(简单模式)
(异步加载)
(只读模式)
(回车换行设置)
(统计字数)
(关闭HTML过滤)
(粘贴设置)
(自动调整高度)
(自定义风格)
(自定义风格 仿QQ邮箱)
(自定义插件)
(MooTools)
(jQuery UI)
(Node操作)
(上传按钮)
(浏览服务器)
(上传图片弹出框)
(批量上传弹出框)
(上传文件弹出框)
注：因服务器空间原因，在本站演示里上传后都不保存文件，返回固定的URL。当前位置： >>
网页文档的编辑第2章
项目2 项目2项 目 2网页文档的编辑知识技能目标网 页 文 档 的 编 辑掌握站点的创建与管理技术 掌握站点的创建与管理技术 站点的创建与管理 掌握网页基本制作技术 掌握表单网页的制作技术 掌握框架网页制作方法 掌握基本的HTML标记 掌握基本的HTML标记 HTML本单元理论授课16学时，上机操作16学时。 本单元理论授课16学时，上机操作16学时。 16学时 16学时1 / 178课次3课时2教具投影仪 任务2 任务2备注 网页文档的基本操作任务1 课题 任务1站点的创建与管理掌握站点创建与管理的方法, 目的 掌握站点创建与管理的方法, 掌握网页文档的基本操作方法 项 目 2 网 页 文 档 的 编 辑 重点 网页文档的基本操作 难点 无任务1 任务1 站点的创建与管理一、任务分析 在Dreamweaver中制作网页，首先需要定义一个站点。无论是网页制作的新手， Dreamweaver中制作网页，首先需要定义一个站点。无论是网页制作的新手， 中制作网页 还是专业的网页设计师，都要从创建站点开始，理清网站结构。 还是专业的网页设计师，都要从创建站点开始，理清网站结构。Dreamweaver 有 一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。 一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。通过本任 务的学习，掌握“文件”面板的使用方法，学会站点的创建和管理方法。 务的学习，掌握“文件”面板的使用方法，学会站点的创建和管理方法。 二、相关知识 1．本地站点与远程站点 要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站， 要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站，然 后把这个网站上传到Web服务器上。放在本地磁盘上的网站称为本地站点， 后把这个网站上传到Web服务器上。放在本地磁盘上的网站称为本地站点，处于 Web服务器上 Internet中Web服务器上的网站称为远程站点。 Internet中Web服务器上的网站称为远程站点。 服务器上的网站称为远程站点2 / 1782．认识“文件”面板 认识“文件” 网站是多个网页、图像、动画和程序等文件有机联系的整体， 网站是多个网页、图像、动画和程序等文件有机联系的整体，要管理项 目 2 网 页 文 档 的 编 辑这些文件以及它们之间的联系，需要一个有效的工具， 文件” 这些文件以及它们之间的联系，需要一个有效的工具，“文件”面板便是 这样的工具。 文件”面板主要有三个方面的功能： 这样的工具。“文件”面板主要有三个方面的功能： （1）管理本地站点，包括建立文件夹和文件，对文件夹和文件进行 管理本地站点，包括建立文件夹和文件， 重命名等操作，也可以管理本地站点的结构； 重命名等操作，也可以管理本地站点的结构； （2）管理远程站点，包括文件上传、文件更新等； 管理远程站点，包括文件上传、文件更新等； （3）连接网络应用服务器，预览动态网页。 连接网络应用服务器，预览动态网页。 打开“文件”面板的方法：选择【窗口】菜单\ 文件】 打开“文件”面板的方法：选择【窗口】菜单\【文件】，或者按 【F8】键，即可显示“文件”面板。“文件”面板的组成如图2-1所示， F8】 即可显示“文件”面板。 文件”面板的组成如图2 所示， 在“文件”面板中显示了当前站点的内容。 文件”面板中显示了当前站点的内容。3 / 178使用“文件”面板中的按钮和命令， 使用“文件”面板中的按钮和命令，可以设置站点窗口显示的内容和 形式，实现本地站点和远程站点之间的来回传递。 文件”面板的“ 形式，实现本地站点和远程站点之间的来回传递。“文件”面板的“站点项 目 2 网 页 文 档 的 编 辑列表”中显示了Dreamweaver 中定义的所有站点。 视图列表” 列表”中显示了Dreamweaver 中定义的所有站点。“视图列表”中显示了 可以选择的四种站点视图类型：本地视图、远程视图、测试服务器和地图 可以选择的四种站点视图类型：本地视图、远程视图、 视图。 视图。文件” 图2-1 “文件”面板 文件4 / 178三、任务实施 1. 创建本地站点 使用Dreamweaver 创建站点的向导创建第一个本地站点“我的站点” 使用Dreamweaver 创建站点的向导创建第一个本地站点“我的站点”，项 目 2 网 页 文 档 的 编 辑具体操作步骤如下: 具体操作步骤如下: （1）在磁盘上创建一个 用来存放站点的文件夹， 用来存放站点的文件夹，命名 为“myweb”，该文件夹就是本 myweb ， 地站点的根目录， 地站点的根目录，是为网站特 别建立的一个文件夹。 别建立的一个文件夹。 （2）选择【站点】菜单\ 选择【站点】菜单\ 【新建站点】，打开“站点定 新建站点】 打开“ 义”对话框，如右图所示。 对话框，如右图所示。 在“站点定义”对话框上方有两 站点定义” 个选项卡： 基本” 个选项卡：“基本”和“高级”， 高级” 这里打开的是“基本”选项卡。 这里打开的是“基本”选项卡。5 / 178项 目 2 网 页 文 档 的 编 辑（3）在“您打算为您的站点起什么名字?”文本框中输入要创建的网 您打算为您的站点起什么名字? 文本框中输入要创建的网 站名称：我的站点。站点的URL可以暂时不填写，在上传网站时再添加。 URL可以暂时不填写 站名称：我的站点。站点的URL可以暂时不填写，在上传网站时再添加。 单击【下一步】按钮，设置该站点需要用到的服务器技术。 （4）单击【下一步】按钮，设置该站点需要用到的服务器技术。由 于新建的是静态网站，所以选中“ 我不想使用服务器技术”单选按钮。 于新建的是静态网站，所以选中“否，我不想使用服务器技术”单选按钮。 单击【下一步】按钮，打开如下图所示的对话框， （5）单击【下一步】按钮，打开如下图所示的对话框，在该对话框 中可以设置该站点的编辑方式。具体有以下两种情况： 中可以设置该站点的编辑方式。具体有以下两种情况：6 / 178项 目 2 网 页 文 档 的 编 辑大多数情况下，都是在本地站点中编辑网页，再上传到远程服务器， 大多数情况下，都是在本地站点中编辑网页，再上传到远程服务器， 这种情况下选中“编辑我的计算机上的本地副本， 这种情况下选中“编辑我的计算机上的本地副本，完成后再上传到服务器 推荐） 单选按钮。 （推荐）”单选按钮。 但有时会直接用Dreamweaver在服务器上编辑网页，这种情况下应该 但有时会直接用Dreamweaver在服务器上编辑网页， Dreamweaver在服务器上编辑网页 选中“使用本地网络直接在服务器上进行编辑”单选按钮。 选中“使用本地网络直接在服务器上进行编辑”单选按钮。 本任务中，选中“编辑我的计算机上的本地副本， 本任务中，选中“编辑我的计算机上的本地副本，完成后再上传到服 务器（推荐） 单选按钮。 务器（推荐）”单选按钮。 在图2 所示的对话框下方的“ （6）在图2-3所示的对话框下方的“您将把文件存储在计算机上的什 么位置?”文本框用来设定保存网站文件的文件夹的路径。可以在文本框中 么位置? 文本框用来设定保存网站文件的文件夹的路径。 文本框用来设定保存网站文件的文件夹的路径 输入已有的路径，也可以单击其后的按钮，在弹出的“ 输入已有的路径，也可以单击其后的按钮，在弹出的“选择站点 我的站 的本地根文件夹： 对话框中选择保存位置，结果如图2 所示。 点 的本地根文件夹：”对话框中选择保存位置，结果如图2-3所示。 单击【下一步】按钮，进一步设置如何连接到远程服务器。 （7）单击【下一步】按钮，进一步设置如何连接到远程服务器。 您如何连接到远程服务器? 下拉列表框中有六个选项 下拉列表框中有六个选项： FTP”、 “您如何连接到远程服务器?”下拉列表框中有六个选项：“无”、“FTP 、 “本地网络”、“WebDAV”、“RDS”和“SourceSafe（R）数据库”。本任 本地网络” WebDAV 、 RDS 和 SourceSafe（ 数据库” 务创建网站时不需要用Dreamweaver 来管理远程站点，所以应选择“ 务创建网站时不需要用Dreamweaver 来管理远程站点，所以应选择“无”， 在网站创建完成后再与FTP连接。 FTP连接 在网站创建完成后再与FTP连接。7 / 178（8）单击【下一步】按钮，打开如下图所示的对话框。“站点定义” 单击【下一步】按钮，打开如下图所示的对话框。 站点定义” 对话框列出了刚才设置的主要内容，如果发现有错误，则可以单击【 对话框列出了刚才设置的主要内容，如果发现有错误，则可以单击【上一项 目 2 网 页 文 档 的 编 辑步】按钮返回，进行更正。 按钮返回，进行更正。 核对无误后，单击【完成】 核对无误后，单击【完成】 按钮，结束“站点定义” 按钮，结束“站点定义”对话 框的设置。 框的设置。8 / 178至此， Dreamweaver中新建了一个静态站点：我的站点。 文件” 至此，在Dreamweaver中新建了一个静态站点：我的站点。“文件” 中新建了一个静态站点 面板中显示了刚才新建的站点，如下图左所示。 面板中显示了刚才新建的站点，如下图左所示。项 目 2 网 页 文 档 的 编 辑2．站点的管理 通常需要对多个站点进行管理，这就需要专门的工具完成站点的切换、 通常需要对多个站点进行管理，这就需要专门的工具完成站点的切换、添 加、删除等操作。用户可以选择【站点】菜单【管理站点】，也可以在 删除等操作。用户可以选择【站点】菜单 管理站点】 “文件”面板左边的下拉列表框中选择“管理站点”，如上图右所示，同 文件”面板左边的下拉列表框中选择“管理站点” 如上图右所示， 样可以打开“管理站点”对话框。 样可以打开“管理站点”对话框。9 / 178（1）切换站点 编辑网页或进行网站管理时，每次只能操作一个站点， 用Dreamweaver 编辑网页或进行网站管理时，每次只能操作一个站点，项 目 2 网 页 文 档 的 编 辑这样就需要在各个站点之间进行切换，打开另一个站点。 这样就需要在各个站点之间进行切换，打开另一个站点。在“文件”面板 文件” 左边的下拉列表框中选择某个已创建的站点， 左边的下拉列表框中选择某个已创建的站点，这样就可切换到对这个站点 进行操作的状态。 进行操作的状态。 （2）编辑站点 如果要对站点进行编辑，可以在上图所示的“管理站点”对话框中， 如果要对站点进行编辑，可以在上图所示的“管理站点”对话框中， 选择要编辑的站点，然后单击【编辑】按钮，将重新打开“站点定义” 选择要编辑的站点，然后单击【编辑】按钮，将重新打开“站点定义”对 话框，用户可以根据需要逐步修改站点的属性。 话框，用户可以根据需要逐步修改站点的属性。10 / 178（3）复制站点 复制站点就是对某一个站点进行复制操作。 复制站点就是对某一个站点进行复制操作。复制站点的功能省去了重 复建立多个结构相同的站点的操作，这样可以提高工作效率， 复建立多个结构相同的站点的操作，这样可以提高工作效率，也可以让这项 目 2 网 页 文 档 的 编 辑些站点保持一定的相似性。 些站点保持一定的相似性。 （4）删除站点 删除站点就是对某一个站点进行删除操作，注意， 删除站点就是对某一个站点进行删除操作，注意，这个操作只是从 的站点管理器中删除， Dreamweaver 的站点管理器中删除，网站的文件仍保存在硬盘原来的位置 上，并没被删除。 并没被删除。 （5）导入站点 导入站点就是将选中的站点导出成一个XML文件， 导入站点就是将选中的站点导出成一个XML文件，需要的时候还可以 XML文件 再次导入。 再次导入。 （6）导出站点 导出站点就是把导出的保存站点设置的XML文件再次导入。 导出站点就是把导出的保存站点设置的XML文件再次导入。 XML文件再次导入11 / 1783．管理网站中的文件和文件夹 （1）创建文件夹和文件 在“文件”面板中站点根目录上右击，然后从弹出的快捷菜单中单击 文件”面板中站点根目录上右击，项 目 2 网 页 文 档 的 编 辑菜单【新建文件夹】 菜单【新建文件夹】或【新建文件】，接着给新建的文件夹或文件命名， 新建文件】 接着给新建的文件夹或文件命名， 即可完成站点中文件夹和文件的创建。 即可完成站点中文件夹和文件的创建。 （2）移动和复制文件 从“文件”面板的本地站点“文件列表”中，选中要移动或复制的文 文件”面板的本地站点“文件列表” 件夹或文件，右键单击，如果要进行移动操作，则单击【编辑】菜单\ 件夹或文件，右键单击，如果要进行移动操作，则单击【编辑】菜单\ 【剪切】；如要进行复制操作，则单击【编辑】\【拷贝】。然后单击 剪切】 如要进行复制操作，则单击【编辑】 拷贝】 【编辑】菜单\【粘贴】，将文件夹或文件移动或复制到相应的文件夹中。 编辑】菜单\ 粘贴】 将文件夹或文件移动或复制到相应的文件夹中。 使用拖动的方法，也可以实现对文件夹或文件移动的操作，方法如下： 使用拖动的方法，也可以实现对文件夹或文件移动的操作，方法如下： 先从“文件”面板的本地站点“文件列表” 先从“文件”面板的本地站点“文件列表”中，选中要移动或复制的文件 夹或文件，用鼠标再拖动选中的文件夹或文件将其移动到目标文件夹中， 夹或文件，用鼠标再拖动选中的文件夹或文件将其移动到目标文件夹中， 然后释放鼠标即可。 然后释放鼠标即可。12 / 178（3）重命名文件夹或文件 选中需要重命名的文件夹或文件，选择快捷菜单中的【编辑】\【重 选中需要重命名的文件夹或文件，选择快捷菜单中的【编辑】项 目 2 网 页 文 档 的 编 辑命名】或者按【F2】键，文件夹或文件的名称变成可编辑状态，重新输入 命名】或者按【F2】 文件夹或文件的名称变成可编辑状态， 新的名称，按Enter键确认。 新的名称， Enter键确认。 键确认 （4）删除文件夹或文件 选中要删除的文件夹或文件，然后选择【编辑】菜单\【删除】或按 选中要删除的文件夹或文件，然后选择【编辑】菜单\ 删除】 【Delete】键，在弹出的提示对话框中询问是否要真正删除文件夹或文件， Delete】 在弹出的提示对话框中询问是否要真正删除文件夹或文件， 单击【是】按钮确认。 单击【 按钮确认。13 / 178四、课堂实践 创建一个命名为“课堂实践”的静态网站， 创建一个命名为“课堂实践”的静态网站，该网站的所有文件存项 目 2 网 页 文 档 的 编 辑储在本地计算机E盘中的“ClassroomPractise 文件夹中 文件夹中。 文件” 储在本地计算机E盘中的“ClassroomPractise”文件夹中。在“文件” 面板的站点根目录下创建三个子文件夹“image 、 music”和 text”。 面板的站点根目录下创建三个子文件夹“image”、“music 和“text 。 在根文件夹中创建一个名为“index.html 的网页文档 的网页文档。 在根文件夹中创建一个名为“index.html”的网页文档。将所需的图像 文件和音乐文件分别复制到“image”和“music 文件夹中。操作中注 文件夹中。 文件和音乐文件分别复制到“image 和 music”文件夹中 意以下几点： 意以下几点： 文件夹“C1assroomPractise”必须在Windows操作系统的资源 必须在Windows ① 文件夹“C1assroomPractise 必须在Windows操作系统的资源 管理器中创建。 管理器中创建。 其他子文件夹直接利用Dreamweaver Dreamweaver的 文件”面板创建。 ② 其他子文件夹直接利用Dreamweaver的“文件”面板创建。 拷贝图像文件和音乐文件也是在Windows Windows操作系统的资源管理 ③ 拷贝图像文件和音乐文件也是在Windows操作系统的资源管理 器中完成。 器中完成。14 / 178任务2 任务2项 目 2 网 页 文 档 的 编 辑网页文档的基本操作一、任务分析 网页上的信息大多是通过文字来表达的，文字是网页的主体和构成 网页上的信息大多是通过文字来表达的， 网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、 网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、 易保存、易打印等优点。制作网页时，文本的输入与编辑占了制作工作 易保存、易打印等优点。制作网页时， 的大部分时间。在Dreamweaver 中输入文本与在Word中输入文本很相似， 的大部分时间。 中输入文本与在Word中输入文本很相似， Word中输入文本很相似 它们都可以对文本的格式进行设置。 它们都可以对文本的格式进行设置。 本任务主要学习如何创建网页文档、打开和关闭网页；如何设置网 本任务主要学习如何创建网页文档、打开和关闭网页； 页的整体属性以及关于文本的各项操作。 页的整体属性以及关于文本的各项操作。15 / 178二、相关知识 Dreamweaver为处理各种 设计和开发文档提供了灵活的环境。 Dreamweaver为处理各种 Web 设计和开发文档提供了灵活的环境。 文档以外，还可以创建和打开各种基于文本的文档， 除了 HTML 文档以外，还可以创建和打开各种基于文本的文档，如CFML项 目 2 网 页 文 档 的 编 辑CSS等 （互联网应用标记语言）、ASP、XML、JavaScript 和 CSS等。 互联网应用标记语言）、ASP、XML、 ）、ASP Dreamweaver还支持源代码文件， Basic、.NET、 Dreamweaver还支持源代码文件，如 Visual Basic、.NET、C# 和 还支持源代码文件 Java。 Java。 Dreamweaver为创建新文档提供了若干选项。可以创建以下文档： Dreamweaver为创建新文档提供了若干选项。可以创建以下文档： 为创建新文档提供了若干选项 新的空白文档或模板 基于Dreamweaver附带的某预定义页面布局的文档 基于Dreamweaver附带的某预定义页面布局的文档 Dreamweaver 基于某现有模板的文档 文档的创建包括创建空白文档和打开现有文档； 文档的创建包括创建空白文档和打开现有文档；文档的编辑包括文 档页面属性的设置、插入换行标签、文字属性的设置、段落属性的设置、 档页面属性的设置、插入换行标签、文字属性的设置、段落属性的设置、 列表的使用及文档的保存。 列表的使用及文档的保存。16 / 178三、任务实施 1．创建一个空白文档 选择【文件】菜单 新建】命令，弹出如图2 选择【文件】菜单【新建】命令，弹出如图2-7所示的新建文档界项 目 2 网 页 文 档 的 编 辑面，选择相应的文档类别，单击 选择相应的文档类别，按钮。 按钮。由于制作的是静态页面，所以这里选择的是“基本页”列表中的“HTML”。 所以这里选择的是“基本页”列表中的“HTML 。17 / 1782. 打开现有文档 方法一：选择【文件】菜单\【打开】命令，弹出“打开”对话框。 方法一：选择【文件】菜单\ 打开】命令，弹出“打开”对话框。 如图2 所示, 在该对话框内选中要打开的文档， 如图2-8所示, 在该对话框内选中要打开的文档，单击项 目 2 网 页 文 档 的 编 辑按钮， 按钮，即可将选定的文档打开。 即可将选定的文档打开。18 / 178方法二： Windows资源管理器中选择要打开的文档，单击右键， 方法二：在Windows资源管理器中选择要打开的文档，单击右键，从快 资源管理器中选择要打开的文档 捷菜单中选择“使用Dreamweaver编辑”选项。如图2-9所示。 捷菜单中选择“使用Dreamweaver编辑”选项。如图2 所示。 Dreamweaver编辑项 目 2 网 页 文 档 的 编 辑19 / 1783. 设置文件的页面属性 新的文档建好后，要先对文档的属性进行设置，主要包括指定页面的默 新的文档建好后，要先对文档的属性进行设置， 认字体和字体大小、背景颜色、边距、链接样式等内容。 认字体和字体大小、背景颜色、边距、链接样式等内容。设置文档页面项 目 2 网 页 文 档 的 编 辑属性的方法如下： 属性的方法如下： （1）打开【修改】菜单【页面属性】，或在文档窗口右健单击鼠标右 打开【修改】菜单 页面属性】 健，然后从快捷菜单中选择【页面属性】选项，打开如图2-10所示对话 然后从快捷菜单中选择【页面属性】选项，打开如图2 10所示对话 框。20 / 178其中，各项意义如下： 其中，各项意义如下： 外观：为文档指定多种基本页面默认布局选项，如图2 11所示 所示， ① 外观：为文档指定多种基本页面默认布局选项，如图2-11所示， 页面中使用的默认字体。 ?字体：指定在 Web 页面中使用的默认字体。 字体：项 目 2 网 页 文 档 的 编 辑页面中使用的默认字体大小。 ?大小：指定在 Web 页面中使用的默认字体大小。 大小： ?文本颜色：指定显示字体的默认颜色。 文本颜色：指定显示字体的默认颜色。 ?背景着色：指定文档的背景颜色。 背景着色：指定文档的背景颜色。 ?背景图像：指定文档的背景图像。 背景图像：指定文档的背景图像。 ?重复：指定背景图像在页面上的显示方式。 重复：指定背景图像在页面上的显示方式。 ?左边距和右边距：指定左右页边距的大小。 左边距和右边距：指定左右页边距的大小。 ?上边距和下边距：指定上下 上边距和下边距： 页边距的大小。 页边距的大小。 链接：定义默认的字体、 ② 链接：定义默认的字体、 字体大小，以及链接、 字体大小，以及链接、访问 过的链接和活动链接的颜色。 过的链接和活动链接的颜色。 标题： ③ 标题：指定文档页中标 题使用的字体、大小和颜色。 题使用的字体、大小和颜色。21 / 1784. 插入换行标签 一般文本的换行是自动进行的，在大多数情况下， 一般文本的换行是自动进行的，在大多数情况下，它由浏览器的窗口大小来决 定。在浏览文本时，不同的窗口大小，可能导致文本中换行位置发生变化，同样 在浏览文本时，不同的窗口大小，可能导致文本中换行位置发生变化， 在文档窗口中，窗口的大小也会影响段落的显示。 在文档窗口中，窗口的大小也会影响段落的显示。 项 目 2 网 页 文 档 的 编 辑 有时希望将一组文字设置为一个段落，但是又希望在其中某个位置强行换行， 有时希望将一组文字设置为一个段落，但是又希望在其中某个位置强行换行，这 时可以使用换行标签&BR&。如希望在“湖北三峡职业技术学院信息系” 时可以使用换行标签&BR&。如希望在“湖北三峡职业技术学院信息系”中“信” &BR& 字处强制换行，操作方法如下： 字处强制换行，操作方法如下： 将光标移到文本中要强制换行处； ① 将光标移到文本中要强制换行处； 单击【插入】菜单\ 标签】 打开“标签选择器”对话框， ② 单击【插入】菜单\【标签】，打开“标签选择器”对话框，在左边选择 “HTML标签”，在右边选择“br”标记，单击【插入】按钮。如下图所示。 HTML标签” 在右边选择“br”标记，单击【插入】按钮。如下图所示。 标签 标记22 / 1785. 设置文字属性 在Dreamweaver中，可以对文字的格式、字体、字号、颜色以及对齐格 Dreamweaver中 可以对文字的格式、字体、字号、项 目 2 网 页 文 档 的 编 辑式等属性进行设置。选中【窗口】菜单\ 属性】项或【插入】 式等属性进行设置。选中【窗口】菜单\【属性】项或【插入】项，可以 在图2 14所示的文本“属性”窗口和图2 18所示的“插入” 文本） 在图2-14所示的文本“属性”窗口和图2-18所示的“插入”（文本）窗 所示的文本 所示的 口中进行设置。 口中进行设置。图2-14 属性面板23 / 178（1） 文字标题格式的设置 HTML语言中页面的文本有6种标题格式， HTML语言中页面的文本有6种标题格式，它们对应的字号大小和段落对齐方式 语言中页面的文本有 都是预设好的。 都是预设好的。在“格式”下拉列表框中，可以选择各种格式。如下图所示。 格式”下拉列表框中，可以选择各种格式。如下图所示。 项 目 2 网 页 文 档 的 编 辑 ①“无”选项：无特殊格式的规定，仅决定于浏览器本身。 选项：无特殊格式的规定，仅决定于浏览器本身。 ②“段落”选项：正文段落，在文字的开始与结尾处有换行， ②“段落”选项：正文段落，在文字的开始与结尾处有换行，各行的文字 段落 间距较小。 间距较小。 ③“标题1”至“标题6”：标题1至标题6约为中文6号至中文1号字大小。 ③“标题1”至 标题6”：标题1至标题6约为中文6号至中文1号字大小。 标题1” 6” ④“预先格式化的”选项：设置预定义的格式。 ④“预先格式化的”选项：设置预定义的格式。 预先格式化的24 / 178（2） 创建字体组合 使用了字体组合的方法，字体组合就是按多种字体依次设定, Dreamweaver 使用了字体组合的方法，字体组合就是按多种字体依次设定,浏 项 目 2 网 页 文 档 的 编 辑 览网页时，系统会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的 览网页时， 字体。采用这种方法可以照顾各种浏览器和安装不同操作系统的计算机用户。 字体。采用这种方法可以照顾各种浏览器和安装不同操作系统的计算机用户。 在“字体”下拉列表框中，可以选择Dreamweaver提供的各种字体组合，如图 字体”下拉列表框中，可以选择Dreamweaver提供的各种字体组合， Dreamweaver提供的各种字体组合 2-16所示。 16所示。 所示 单击图2 16所示的字体组合列表项中的“编辑字体列表”列表项，弹出“ 单击图2-16所示的字体组合列表项中的“编辑字体列表”列表项，弹出“编辑 所示的字体组合列表项中的 字体列表”对话框，如图2 17所示。 字体列表”对话框，如图2-17所示。 所示25 / 178（3） 文字属性的设置 文字大小设置：字号的数字越大，文字也越大。 Dreamweaver中 ① 文字大小设置：字号的数字越大，文字也越大。在Dreamweaver中，默认 的字号是13。单击文字“属性”栏内的“大小”下拉列表框中的一种字号数字， 的字号是13。单击文字“属性”栏内的“大小”下拉列表框中的一种字号数字， 13 项 目 2 网 页 文 档 的 编 辑 即可完成字号的设定。 即可完成字号的设定。 文字样式设置： 样式”下拉列表框中，单击“管理样式”项目， ② 文字样式设置：在“样式”下拉列表框中，单击“管理样式”项目，可 以弹出“编辑样式表”对话框。单击该对话框中的“新建”按钮， 以弹出“编辑样式表”对话框。单击该对话框中的“新建”按钮，就可以为文字 添加样式设置。 添加样式设置。 文字的对齐设置：文字的对齐是指一行或多行文字在水平方向的位置， ③ 文字的对齐设置：文字的对齐是指一行或多行文字在水平方向的位置， 它有左对齐、居中对齐、右对齐和两端对齐4 它有左对齐、居中对齐、右对齐和两端对齐4种。选中文字后，单击文字“属性” 选中文字后，单击文字“属性” 左对齐）、 居中对齐）、 右对齐） 两端对齐）按钮来实现。 栏内的 （左对齐）、 （居中对齐）、 （右对齐）和 （两端对齐）按钮来实现。 如果文字是直接输入到页面中的，则会与浏览器的边界线对齐。 如果文字是直接输入到页面中的，则会与浏览器的边界线对齐。 文字的缩进设置： 要改变段落文字的缩进量，可以选中文字， ④ 文字的缩进设置： 要改变段落文字的缩进量，可以选中文字，再单击文 减少缩进，向左移两个单位） 增加缩进， 字“属性”栏内的 （减少缩进，向左移两个单位）按钮或 （增加缩进，向右移 属性” 两个单位）按钮。 两个单位）按钮。26 / 178文字风格的设置：选中网页中的文字， 按钮， ⑤ 文字风格的设置：选中网页中的文字，单击按下 按钮，即可将选中的文 字设置为粗体； 按钮，即可将选中的文字设置为斜体。 字设置为粗体；单击按下 按钮，即可将选中的文字设置为斜体。 项 目 2 网 页 文 档 的 编 辑 ⑥ 利用菜单命令改变文字风格：在【文本】\【样式】菜单的子菜单中，单 利用菜单命令改变文字风格： 文本】 样式】菜单的子菜单中， 击其中的某一个菜单命令，可以将选中的文字样式做相应的改变。 击其中的某一个菜单命令，可以将选中的文字样式做相应的改变。 文字颜色的设置：单击文字“属性”栏内的“大小” ⑦ 文字颜色的设置：单击文字“属性”栏内的“大小”下拉列表框右边的 按钮，可以弹出颜色面板，利用它可以设置文字的颜色。也可以在其文本框中直 按钮，可以弹出颜色面板，利用它可以设置文字的颜色。 接输入颜色代码，例如红色的颜色代码为“#FF0000”。 接输入颜色代码，例如红色的颜色代码为“#FF0000”。 使用“插入” 文本） 单击“插入”栏的“文本”标签，如图2 ⑧ 使用“插入”（文本）栏：单击“插入”栏的“文本”标签，如图2-18 所示。 所示。图2-1827 / 1786. 设置文档的段落属性 良好的段落格式可以使文档清晰易读，便于理解。 良好的段落格式可以使文档清晰易读，便于理解。 项 目 2 网 页 文 档 的 编 辑 （1） 定义段落 一般来说，每在文档窗口中输入文字，然后按回车键， 一般来说，每在文档窗口中输入文字，然后按回车键，即可将之定义为一 个段落。 个段落。 有时候也可以手工将文档窗口中的文字定义为段落，方法如下： 有时候也可以手工将文档窗口中的文字定义为段落，方法如下： 将插入点放置在要定义为段落的文字中； ① 将插入点放置在要定义为段落的文字中； 打开【文本】菜单，选择【段落格式】 再选择【段落】 ② 打开【文本】菜单，选择【段落格式】，再选择【段落】项，这时插入 点所在的文字块就被定义为段落。 点所在的文字块就被定义为段落。 ③如果希望取消对段落的指定，可以选择【无】项。 如果希望取消对段落的指定，可以选择【28 / 178（3） 定义已编排格式 所谓已编排格式，指的是用户预先对一个段落的文字进行格式化， 所谓已编排格式，指的是用户预先对一个段落的文字进行格式化，浏览器在 项 目 2 网 页 文 档 的 编 辑 显示其中的内容时，会完全按照其真正的文本格式来显示。例如，原封不动地保 显示其中的内容时，会完全按照其真正的文本格式来显示。例如， 留文档中的空白，如空格等。 留文档中的空白，如空格等。 要在Dreamweaver 中指定已编排格式，操作如下： 要在Dreamweaver 中指定已编排格式，操作如下： ① 将插入点放置到要设置已编排格式的段落中，如果要将多个段落设置为 将插入点放置到要设置已编排格式的段落中， 已编排格式，可以选中多个段落。 已编排格式，可以选中多个段落。 打开【文本】菜单，选择【段落格式】 再选择【已编排格式】 ② 打开【文本】菜单，选择【段落格式】，再选择【已编排格式】项，如 下图所示。 下图所示。29 / 178（4）对齐段落段落的对齐方式，是指段落相对文档窗口在水平位置的对齐方式。 段落的对齐方式，是指段落相对文档窗口在水平位置的对齐方式。项 目 2 网 页 文 档 的 编 辑有三种对齐方式：左对齐、居中和右对齐，可以按照如下方法进行操作： 有三种对齐方式：左对齐、居中和右对齐，可以按照如下方法进行操作： 将插入点置于要设置对齐方式的文档中， ① 将插入点置于要设置对齐方式的文档中，如果要设置多个文档 段落的对齐方式，可以选中这些段落。 段落的对齐方式，可以选中这些段落。 打开【文本】菜单\ 对齐】 ② 打开【文本】菜单\【对齐】，再选择相应的对齐方式菜单项即 可。 使用属性窗口中的 前段落设置对齐方式。 前段落设置对齐方式。 、 、 、 按钮， 按钮，也可为当30 / 1787．保存和关闭文档 （1）保存文档 选择【文件】菜单\ 保存】 或使用组合键Ctrl+S Ctrl+S。 ① 选择【文件】菜单\【保存】，或使用组合键Ctrl+S。 项 目 2 网 页 文 档 的 编 辑 如果文档尚未保存，则会出现“文件存储”对话框。 ② 如果文档尚未保存，则会出现“文件存储”对话框。选择路径并输入文 件名，单击【保存】按钮即可。 件名，单击【保存】按钮即可。 如果文档已经保存过，则会直接存储文档。 ③ 如果文档已经保存过，则会直接存储文档。 （2）另存文档 如果希望将文档以另外的名称保存，操作如下： 如果希望将文档以另外的名称保存，操作如下： 选择【文件】菜单\ 另存为】 ① 选择【文件】菜单\【另存为】； 出现“文件存储”对话框，选择路径并输入文件名，单击【保存】 ② 出现“文件存储”对话框，选择路径并输入文件名，单击【保存】。 （3）存储所有文档 如果同时打开多个Dreamweaver文档，可在任意窗口中， 如果同时打开多个Dreamweaver文档，可在任意窗口中，选【文件】菜单\ Dreamweaver文档 文件】菜单\ 【保存全部】项将所有Dreamweaver窗口中正在编辑的文档保存。 保存全部】项将所有Dreamweaver窗口中正在编辑的文档保存。 Dreamweaver窗口中正在编辑的文档保存 （4）关闭文档 选择【文件】菜单 关闭】 选择【文件】菜单【关闭】或【全部关闭】，即可关闭网页文档。如果 全部关闭】 即可关闭网页文档。 网页还未保存，则会弹出一个对话框，确认是否保存。 网页还未保存，则会弹出一个对话框，确认是否保存。31 / 178四、课堂实践 打开“课堂实践”站点文件夹中的网页文档“index.html”， 打开“课堂实践”站点文件夹中的网页文档“index.html”，然后完成以 下操作。操作中插入水平线和日期利用“插入”工具栏或者【插入】菜单完成， 下操作。操作中插入水平线和日期利用“插入”工具栏或者【插入】菜单完成， 项 目 2 网 页 文 档 的 编 辑 设置文本格式利用“属性”面板完成。 设置文本格式利用“属性”面板完成。 页面属性的设置要求。 ① 页面属性的设置要求。 外观属性的设置。 页面字体”采用“默认字体” 外观属性的设置。“页面字体”采用“默认字体”，“大小”采用“12 大小”采用“ 像素” 像素”；“背景图像”选用image文件夹下的“bj01.jpg”；“左边距”和 背景图像”选用image文件夹下的“bj01.jpg”； 左边距” image文件夹下的 “右边距”设置为“100像素”，“上边距”和“下边距”设置为“20像 右边距”设置为“100像素” 像素 上边距” 下边距”设置为“20像 素”。 链接属性的设置要求。 链接属性的设置要求。网页中超级链接文本默认状态下的字体设置为 “宋体”，字体大小设置为“14像素”；网页中超级链接文本的颜色设置 宋体” 字体大小设置为“14像素” 像素 为“blue”，访问过的超级链接颜色设置为“olive”；当鼠标指针移动到 blue”，访问过的超级链接颜色设置为“olive”； 网页中超级链接文字上方时，超级链接的颜色设置为“maroon”， 网页中超级链接文字上方时，超级链接的颜色设置为“maroon”，下划线 样式设置为“变换图像时隐藏下划线” 样式设置为“变换图像时隐藏下划线”；网页中已激活的超级链接文本颜 色设置为“fuchsia”。 色设置为“fuchsia”。 标题属性的设置要求。设置网页中标题的字体为“隶书” 标题1 标题属性的设置要求。设置网页中标题的字体为“隶书”，标题1的大小 为“18像素”，颜色为“aqua”。? 18像素” 颜色为“aqua”。 像素32 / 178在页面中输入标题及一段正文文本。在标题与正文之间插入一条水平线。 ② 在页面中输入标题及一段正文文本。在标题与正文之间插入一条水平线。 在正文的下面插入日期。 在正文的下面插入日期。 项 目 2 网 页 文 档 的 编 辑 设置文本格式的要求如下。 ③ 设置文本格式的要求如下。 将网页中标题文字的“格式”设置为“标题1”， 字体”设置为“ 将网页中标题文字的“格式”设置为“标题1”，“字体”设置为“隶 1” 书”，“大小”设置为“36”，“文本颜色”设置为“aqua”，且要求水 大小”设置为“36”， 文本颜色”设置为“aqua”， 平居中。 平居中。 将网页中标题以下的正文， 字体”设置为“华文行楷” 将网页中标题以下的正文，“字体”设置为“华文行楷”，“大小”设 大小” 置为“16”。插入的日期“字体”设置为“楷体-GB2321”， 大小” 置为“16”。插入的日期“字体”设置为“楷体-GB2321”，“大小”设置 为“18”，“文本颜色”设置为“#FF6600”，且要求水平居中。 18”， 文本颜色”设置为“#FF6600”，且要求水平居中。33 / 178课次4课时2教具投影仪 任务4 任务4备注 超级链接任务3 课题 任务3在网页中使用图像目的 掌握在网页中使用图片及设置超级链接的方法 项 目 2 网 页 文 档 的 编 辑 重点 超级链接 难点 无任务3 任务3 在网页中使用图像一、任务分析 图像和文字都是组成网页的基本元素，仅有文字的网页， 图像和文字都是组成网页的基本元素，仅有文字的网页，不管它的内容是何 等的丰富，构思是多么的精巧，看上去总是觉得缺少点什么。图像具有直观、 等的丰富，构思是多么的精巧，看上去总是觉得缺少点什么。图像具有直观、生 动的特点，灵活地使用图像可以表达一些文字所无法表达的东西， 动的特点，灵活地使用图像可以表达一些文字所无法表达的东西，使网页更加丰 富多彩，一幅生动的图片所包含的信息量可能会超过许多文字的描述， 富多彩，一幅生动的图片所包含的信息量可能会超过许多文字的描述，使网页页 面更加美观，使得文档更加具有吸引力。 面更加美观，使得文档更加具有吸引力。 图片除了用于点缀网页之外，还可以创建图像链接， 图片除了用于点缀网页之外，还可以创建图像链接，这是在网页中运用图片 的另一个主要目的。 的另一个主要目的。 本任务主要学习插入图像、设置图像属性、掌握图文混排的基本方法。 本任务主要学习插入图像、设置图像属性、掌握图文混排的基本方法。34 / 178二、相关知识 1. 图像格式 GIF、JPEG和PNG格式是网络中常用的图像格式，各有特点， GIF、JPEG和PNG格式是网络中常用的图像格式，各有特点，用户需要了解每 格式是网络中常用的图像格式 项 目 2 网 页 文 档 的 编 辑 种格式的使用和局限，才能在Dreamweaver中成功地运用它们。 种格式的使用和局限，才能在Dreamweaver中成功地运用它们。 Dreamweaver中成功地运用它们 （1）JPG／JPEG文件格式 JPG／JPEG文件格式 JPEG是 Group（联合图像专家组）的简称， JPEG是Joint Photographic Experts Group（联合图像专家组）的简称，用 于处理具有连续色调的图像或图片，特点如下： 于处理具有连续色调的图像或图片，特点如下： 使用有损的压缩方案，所以图像在压缩后会损失一些细节。 ① 使用有损的压缩方案，所以图像在压缩后会损失一些细节。 支持1670万种颜色，可以很好地再现色彩丰富的摄影图像。 1670万种颜色 ② 支持1670万种颜色，可以很好地再现色彩丰富的摄影图像。 使用JPEG压缩后，图像的鲜明的边缘周围会损失一些细节， JPEG压缩后 ③ 使用JPEG压缩后，图像的鲜明的边缘周围会损失一些细节，不适用于包含 鲜明对比图像或者包含大量文本的图像。 鲜明对比图像或者包含大量文本的图像。 由于JPEG使用了压缩技术，JPEG文件越压缩，图像降级得就越厉害。 由于JPEG使用了压缩技术，JPEG文件越压缩，图像降级得就越厉害。用户可 JPEG使用了压缩技术 文件越压缩 以根据自己的需要，在保存JPEG图像文件的时候，通过压缩JPEG文件在图像品质 以根据自己的需要，在保存JPEG图像文件的时候，通过压缩JPEG文件在图像品质 JPEG图像文件的时候 JPEG 和文件大小之间达到良好的平衡。 和文件大小之间达到良好的平衡。35 / 178（2）GIF图像文件格式 GIF图像文件格式 GIF（CompuServe Graphical Interchange Format）最适合显示色调不连续 GIF（ Format） 项 目 2 网 页 文 档 的 编 辑 变化或具有大面积单一颜色块的图像。这些图像一般用作插图、按钮、图标、 变化或具有大面积单一颜色块的图像。这些图像一般用作插图、按钮、图标、徽 标或其他具有统一色彩和色调的图像。GIF图像具有下列特性： 标或其他具有统一色彩和色调的图像。GIF图像具有下列特性： 图像具有下列特性 使用无损压缩方案，图像在压缩以后不会有细节的损失。 ① 使用无损压缩方案，图像在压缩以后不会有细节的损失。 ② 最多可以显示256种颜色。 最多可以显示256种颜色。 256种颜色 支持透明的背景，从而可以创建带有透明区域的图像。 ③ 支持透明的背景，从而可以创建带有透明区域的图像。 使用交织文件格式，在浏览器完成下载全部图像之前， ④ 使用交织文件格式，在浏览器完成下载全部图像之前，用户可以通过隔行 扫描显示出图像。 扫描显示出图像。 受到几乎所有图像浏览器广泛和良好的支持，不必担心兼容性问题。 ⑤ 受到几乎所有图像浏览器广泛和良好的支持，不必担心兼容性问题。 可以将数张图片转化为动画存储在一个文件中， ⑥ 可以将数张图片转化为动画存储在一个文件中，就是我们在网页中常见的 GIF（多帧）动画。 GIF（多帧）动画。36 / 178（3）PNG文件格式 PNG文件格式 PNG（Portable Network Graphic）格式是专门为网络准备的。它结合了其他 PNG（ Graphic）格式是专门为网络准备的。 项 目 2 网 页 文 档 的 编 辑 图像格式的优点， GIF一样无损压缩， JPEG一样拥有百万种颜色。而且， 图像格式的优点，像GIF一样无损压缩，像JPEG一样拥有百万种颜色。而且，PNG 一样无损压缩 一样拥有百万种颜色 具有的隔行扫描的特性比其他格式都要快，同时它还提供对它包括的索引色、 具有的隔行扫描的特性比其他格式都要快，同时它还提供对它包括的索引色、灰 度、真彩色图像以及alpha通道透明的支持。 真彩色图像以及alpha通道透明的支持。 alpha通道透明的支持 PNG格式是Macromedia Fireworks的默认格式，这是第一个将PNG作为自己的 的默认格式， PNG作为自己的 PNG格式是Macromedia Fireworks的默认格式 这是第一个将PNG 格式是 格式的Web图像工具，PNG格式中具有可编辑的Web页属性。有关Fireworks的内容 格式的Web图像工具，PNG格式中具有可编辑的Web页属性。有关Fireworks的内容 Web图像工具 格式中具有可编辑的Web页属性 Fireworks 在下一章将有进一步的介绍。 在下一章将有进一步的介绍。 PNG日益得到应用，极有可能在未来逐渐取代GIF的位置。目前在Dreamweaver、 PNG日益得到应用，极有可能在未来逐渐取代GIF的位置。目前在Dreamweaver、 日益得到应用 GIF的位置 Dreamweaver 4.0和 4.0及其更高版本都支持PNG图像 及其更高版本都支持PNG Microsoft Explorer 4.0和Netscape Navigator 4.0及其更高版本都支持PNG图像 格式。 格式。37 / 178三、任务实施 1．插入图像 项 目 2 网 页 文 档 的 编 辑 （1）插入普通图像 的常用工具栏中，单击“图像” 在Dreamweaver 的常用工具栏中，单击“图像”图标 ，或执行【插入】 或执行【插入】菜单 图像】命令，会出现如图2 21所示的【选择图像源文件】对话框。 菜单【图像】命令，会出现如图2-21所示的【选择图像源文件】对话框。 所示的38 / 178（2）插入图像占位符 图像占位符是在准备好将最终图像添加到Web页之前使用的图像， 图像占位符是在准备好将最终图像添加到Web页之前使用的图像，用户不必让 Web页之前使用的图像 插入到网页图像文件立即可用，只是插入一个占位符来代替一个空的图像。 插入到网页图像文件立即可用，只是插入一个占位符来代替一个空的图像。我们 项 目 2 网 页 文 档 的 编 辑 可以定义占位符的某些属性，如可以设置占位符的大小和颜色， 可以定义占位符的某些属性，如可以设置占位符的大小和颜色，以及为占位符提 供文本标签等。 供文本标签等。 当要插入图像占位符时，将插入点放置在页面中要插入占位符图像的位置， 当要插入图像占位符时，将插入点放置在页面中要插入占位符图像的位置， 点击常用工具栏中的“图像占位符” 或执行【插入】菜单\ 图像对象】 点击常用工具栏中的“图像占位符”图标 ，或执行【插入】菜单\【图像对象】\ 【图像占位符】命令，会出现如图2-23所示的【图像占位符】对话框。在此对话 图像占位符】命令，会出现如图2 23所示的【图像占位符】对话框。 所示的 框中设置相应参数后，单击“确定”按钮即可。当在Dreamweaver的文档窗口中查 框中设置相应参数后，单击“确定”按钮即可。当在Dreamweaver的文档窗口中查 Dreamweaver 看图像占位符时，将显示图像占位符的颜色、 看图像占位符时，将显示图像占位符的颜色、大 小属性和标签文字。当在浏览器窗口中查看时， 小属性和标签文字。当在浏览器窗口中查看时， 将不显示标签文字和大小的文本， 将不显示标签文字和大小的文本，不过鼠标指 向占位符时会显示出替换文本。 向占位符时会显示出替换文本。39 / 178（3）插入鼠标经过图像 鼠标经过图像是Web页效果中的一种。即当鼠标箭头经过一个图像时， 鼠标经过图像是Web页效果中的一种。即当鼠标箭头经过一个图像时，它的显 Web页效果中的一种 示外观会变为另一幅图像，这种变化可以是图像在颜色或形状上发生了改变， 示外观会变为另一幅图像，这种变化可以是图像在颜色或形状上发生了改变，这 项 目 2 网 页 文 档 的 编 辑 就是一种互动效果(也称为Mouse Over)。而当鼠标箭头从图像上移走的时候， 就是一种互动效果(也称为Mouse Over)。而当鼠标箭头从图像上移走的时候，图 像又恢复为原状。这种轮换图像实际上是由两幅图像组成的，即初始图像( 像又恢复为原状。这种轮换图像实际上是由两幅图像组成的，即初始图像(页面首 次装载时显示的图像)和替换图像(当鼠标指针经过时显示的图像) 次装载时显示的图像)和替换图像(当鼠标指针经过时显示的图像)。 要插入鼠标经过图像时，在文档窗口中，将插入点放置在要显示轮替图像的位置， 要插入鼠标经过图像时，在文档窗口中，将插入点放置在要显示轮替图像的位置， 然后点击常用工具栏中的“鼠标经过图像” 然后点击常用工具栏中的“鼠标经过图像”图标 ，或单击【插入】\【图像 或单击【插入】对象】 对象】\【鼠标经过图像】命令，会出现如图2-24所示的【插入鼠标经过图像】对 鼠标经过图像】命令，会出现如图2 24所示的【插入鼠标经过图像】 所示的 话框。 话框。40 / 178Dreamweaver自 “图像名称”: 为图像输入一个唯一的名称，或者不输入而让Dreamweaver自 图像名称” 为图像输入一个唯一的名称，或者不输入而让Dreamweaver 动生成这个名称。 动生成这个名称。 “原始图像”: 输入鼠标还没经过时显示的那个图像的路径和名称，点击 原始图像” 输入鼠标还没经过时显示的那个图像的路径和名称， 项 目 2 网 页 文 档 的 编 辑 【浏览】按钮可以选择某个站点文件。 浏览】按钮可以选择某个站点文件。 “鼠标经过图像”: 输入鼠标经过时显示的图像的路径和名称或点击【浏览】 鼠标经过图像” 输入鼠标经过时显示的图像的路径和名称或点击【浏览】 按钮选择站点中的文件。 按钮选择站点中的文件。 “预载鼠标经过图像”: 如果您希望图像预先载入浏览器的缓存中，以便用 预载鼠标经过图像” 如果您希望图像预先载入浏览器的缓存中， 户将鼠标指针滑过图像时不发生延迟的快速显示，则将该复选框打钩。 户将鼠标指针滑过图像时不发生延迟的快速显示，则将该复选框打钩。 “替换文本”: 鼠标指向图像时显示的描述性文本。 替换文本” 鼠标指向图像时显示的描述性文本。 “按下时，前往的URL”: 设置点击图像时要链接到的网址或本地页面文件。 按下时，前往的URL”: 设置点击图像时要链接到的网址或本地页面文件。 设置结束后单击【确定】按钮。鼠标经过图像中的这两个图像应大小相等， 设置结束后单击【确定】按钮。鼠标经过图像中的这两个图像应大小相等，如果 不一样大，Dreamweaver自动调整第二幅图像的大小，使之与第一幅图像匹配。 不一样大，Dreamweaver自动调整第二幅图像的大小，使之与第一幅图像匹配。插 自动调整第二幅图像的大小 入后，在文档窗口中不能看到鼠标经过图像的最终效果。 入后，在文档窗口中不能看到鼠标经过图像的最终效果。若要看到鼠标经过图像 的效果，请按F12键在浏览器中预览该页，然后将鼠标指针滑过该图像，如图2 25、 的效果，请按F12键在浏览器中预览该页，然后将鼠标指针滑过该图像，如图2-25、 F12键在浏览器中预览该页 图2-26所示。 26所示。 所示41 / 178（4）插入导航条 导航条由图像或具有相同外观的图像组组成， 导航条由图像或具有相同外观的图像组组成，利用导航条设计的前后一致性 项 目 2 网 页 文 档 的 编 辑 和导航条的重复使用可以让推广网站工作变得简单。 和导航条的重复使用可以让推广网站工作变得简单。导航条与轮替图像的效果非 常相似，操作也大致相同，只是导航条通常使用多个相近的按钮组成。 常相似，操作也大致相同，只是导航条通常使用多个相近的按钮组成。 导航条能够组合互动图像或更多的对象，一个导航条元素可由4 导航条能够组合互动图像或更多的对象，一个导航条元素可由4种不同的图像 组成，每种图像反映不同的用户动作。用户不一定使用所有4种状态(平时状态、 组成，每种图像反映不同的用户动作。用户不一定使用所有4种状态(平时状态、 鼠标指向状态、鼠标按下状态、按下时鼠标经过状态)，像轮替图像一样，如果只 鼠标指向状态、鼠标按下状态、按下时鼠标经过状态) 像轮替图像一样， 使用前两种状态是足够胜任工作的。 使用前两种状态是足够胜任工作的。 ① 创建一系列的图像 在使用Dreamweaver的导航条对象之前，应该为每一个按钮创建一组（通常4 在使用Dreamweaver的导航条对象之前，应该为每一个按钮创建一组（通常4 Dreamweaver的导航条对象之前 个）图像。这些图像对应按钮触发事件的不同显示状态，各个按钮被碰触的感觉 图像。这些图像对应按钮触发事件的不同显示状态， 以及外观上要具有一致性。 以及外观上要具有一致性。42 / 178② 插入一个导航条 在文档窗口中，将插入点放置在要显示导航条的位置， 在文档窗口中，将插入点放置在要显示导航条的位置，然后点击常用工具栏 中的“导航条” 中的“导航条”图标 项 目 2 网 页 文 档 的 编 辑 ，或执行【插入】菜单\【图像对象】\【导航条】命 或执行【插入】菜单\ 图像对象】 导航条】令，会出现如图2-27所示的【插入导航条】对话框。 会出现如图2 27所示的【插入导航条】对话框。 所示的43 / 178“项目名称”: 为导航条项目输入一个唯一的名称。每一个项目都对应一个 项目名称” 为导航条项目输入一个唯一的名称。 按钮，该按钮具有一组状态图像，最多可达4 按钮，该按钮具有一组状态图像，最多可达4个。 项 目 2 网 页 文 档 的 编 辑 “状态图像”: 输入或单击【浏览】按钮以选择在浏览器中默认显示的图像 状态图像” 输入或单击【浏览】 文件名，此项为必填项，其他图像状态选项为可选项。 文件名，此项为必填项，其他图像状态选项为可选项。 “鼠标经过图像”: 选择用户鼠标指针滑过项目所显示的图像。 鼠标经过图像” 选择用户鼠标指针滑过项目所显示的图像。 “按下图像”: 选择用户单击项目后显示的图像。 按下图像” 选择用户单击项目后显示的图像。 “按下时鼠标经过图像”: 当用户将鼠标指针滑过按下图像时显示的图像。 按下时鼠标经过图像” 当用户将鼠标指针滑过按下图像时显示的图像。 “替换文本”: 输入项目的描述性文本。在浏览器中，当鼠标滑过导航条项 替换文本” 输入项目的描述性文本。在浏览器中， 目时会显示该文本。 目时会显示该文本。 “按下时，前往的URL”: 设置点击图像时要链接到的网址或本地页面文件。 按下时，前往的URL”: 设置点击图像时要链接到的网址或本地页面文件。 “预先载入图像”: 为了体现一个按钮的多种状态效果，按钮选中后的反应 预先载入图像” 为了体现一个按钮的多种状态效果， 必须迅速，那么反映状态的图像必须预装入，如果未选择此选项， 必须迅速，那么反映状态的图像必须预装入，如果未选择此选项，则在用户将鼠 标指针滑过鼠标经过图像时可能会出现延迟。 标指针滑过鼠标经过图像时可能会出现延迟。44 / 178按下” “页面载入时就显示‘鼠标按下图像’”: 在显示页面时，以“按下”状态 页面载入时就显示‘鼠标按下图像’”: 在显示页面时， ’” 显示所选项目，而不是以默认的“一般”状态显示。当这一选项被选定， 显示所选项目，而不是以默认的“一般”状态显示。当这一选项被选定，在导航 条元素列表框中的当前按钮旁边会显示一个星形符号。 条元素列表框中的当前按钮旁边会显示一个星形符号。 项 目 2 网 页 文 档 的 编 辑 “插入”: 用于设置导航条的方向，在下拉列表中既可以选择水平方向，也 插入” 用于设置导航条的方向，在下拉列表中既可以选择水平方向， 可以选择垂直方向。 可以选择垂直方向。 “使用表格”: 选中该复选框，可以表格的形式插入导航条项目。 使用表格” 选中该复选框，可以表格的形式插入导航条项目。 ③ 添加其他的导航条图标 单击 按钮向导航条添加另一个项目，然后重复前面的步骤定义该项目， 按钮向导航条添加另一个项目，然后重复前面的步骤定义该项目， 按钮我们可以添加多个项目， 按钮我们可以添加多个项目，单击 按钮可以添加下一个元件； 添加下一个元件；再次单击 删除选中的项目。 删除选中的项目。要重新排序导航条中的元件，在导航条元件列表框中选定一个元件， 要重新排序导航条中的元件，在导航条元件列表框中选定一个元件，然后使 用向上 或向下 按钮来重新调整该元件在元件列表中的位置。 按钮来重新调整该元件在元件列表中的位置。每一页只能有一个Dreamweaver内置的导航条， 每一页只能有一个Dreamweaver内置的导航条，如果再次单击插入导航条的图 Dreamweaver内置的导航条 标，Dreamweaver会出现警示框，提示是否想修改现有的序列。单击【确定】按钮 Dreamweaver会出现警示框，提示是否想修改现有的序列。单击【确定】 会出现警示框 将打开【修改导航条】对话框，如下图所示。 将打开【修改导航条】对话框，如下图所示。45 / 178项 目 2 网 页 文 档 的 编 辑该对话框与插入导航条对话框中的设置完全一样，只是不包括改变导航条方 该对话框与插入导航条对话框中的设置完全一样， 向和表格设置的内容。 向和表格设置的内容。 不过此时在Dreamweaver我们看不到导航条的鼠标事件， F12键 不过此时在Dreamweaver我们看不到导航条的鼠标事件，按F12键，在浏览器 Dreamweaver我们看不到导航条的鼠标事件 中才能查看最终效果，如下图所示。 中才能查看最终效果，如下图所示。46 / 178“项目名称”: 为导航条项目输入一个唯一的名称。每一个项目都对应一个 项目名称” 为导航条项目输入一个唯一的名称。 按钮，该按钮具有一组状态图像，最多可达4 按钮，该按钮具有一组状态图像，最多可达4个。 项 目 2 网 页 文 档 的 编 辑 “状态图像”: 输入或单击【浏览】按钮以选择在浏览器中默认显示的图像 状态图像” 输入或单击【浏览】 文件名，此项为必填项，其他图像状态选项为可选项。 文件名，此项为必填项，其他图像状态选项为可选项。 “鼠标经过图像”: 选择用户鼠标指针滑过项目所显示的图像。 鼠标经过图像” 选择用户鼠标指针滑过项目所显示的图像。 “按下图像”: 选择用户单击项目后显示的图像。 按下图像” 选择用户单击项目后显示的图像。 “按下时鼠标经过图像”: 当用户将鼠标指针滑过按下图像时显示的图像。 按下时鼠标经过图像” 当用户将鼠标指针滑过按下图像时显示的图像。 “替换文本”: 输入项目的描述性文本。在浏览器中，当鼠标滑过导航条项 替换文本” 输入项目的描述性文本。在浏览器中， 目时会显示该文本。 目时会显示该文本。 “按下时，前往的URL”: 设置点击图像时要链接到的网址或本地页面文件。 按下时，前往的URL”: 设置点击图像时要链接到的网址或本地页面文件。 “预先载入图像”: 为了体现一个按钮的多种状态效果，按钮选中后的反应 预先载入图像” 为了体现一个按钮的多种状态效果， 必须迅速，那么反映状态的图像必须预装入，如果未选择此选项， 必须迅速，那么反映状态的图像必须预装入，如果未选择此选项，则在用户将鼠 标指针滑过鼠标经过图像时可能会出现延迟。 标指针滑过鼠标经过图像时可能会出现延迟。47 / 1782. 设置图像属性 图像属性检查器用于显示或修改图像的属性。在设计视图中选择一幅图像， 图像属性检查器用于显示或修改图像的属性。在设计视图中选择一幅图像， 属性检查器显示出常用的图像属性。如下图所示。 属性检查器显示出常用的图像属性。如下图所示。 项 目 2 网 页 文 档 的 编 辑【文件名称】 文件名称】当用户首次插入一个图像时，图像属性检查器中在缩略图 当用户首次插入一个图像时，和文件大小旁边的文本框是空白的。 和文件大小旁边的文本框是空白的。用户应在这个框中为图像填入一个用于 JavaScript和其他应用程序可以引用该图像的名称。 JavaScript和其他应用程序可以引用该图像的名称。 和其他应用程序可以引用该图像的名称 【宽】和【高】 以像素为单位指定图像的宽度和高度。 以像素为单位指定图像的宽度和高度。当您在页中插入图像时，Dreamweaver自动用图像的原始尺寸更新这些域。 图像时，Dreamweaver自动用图像的原始尺寸更新这些域。 自动用图像的原始尺寸更新这些域 【源文件】 源文件】 【链接】 链接】 指定图像的源文件。 指定图像的源文件。 拖到文件面板中的某指定图像的超链接。 指定图像的超链接。将指向文件图标个文件， 个文件，或单击文件夹图标浏览站点上的文档，或手动键入URL。 浏览站点上的文档，或手动键入URL。 URL48 / 178项 目 2 网 页 文 档 的 编 辑【替代】 显示在图像上的文字。浏览器无法显示图像时显示这些文字。 替代】 显示在图像上的文字。浏览器无法显示图像时显示这些文字。 编辑】 单击此按钮，将调出与该图像对应的编辑器对图像进行编辑。 【编辑】 单击此按钮，将调出与该图像对应的编辑器对图像进行编辑。 允许您标注和创建客户端图像地图， 【地图名称和热点工具 】 允许您标注和创建客户端图像地图， 具体使用将在后面的章节中详细介绍。 具体使用将在后面的章节中详细介绍。 垂直边距】 水平边距】 设置沿图像边缘的边距(以像素为单位) 【垂直边距】和【水平边距】 设置沿图像边缘的边距(以像素为单位)。垂 直边距沿图像的顶部和底部添加边距。水平边距沿图像左侧和右侧添加边距。 直边距沿图像的顶部和底部添加边距。水平边距沿图像左侧和右侧添加边距。 目标】 指定页面应载入的目标框架或窗口。 【目标】 指定页面应载入的目标框架或窗口。如果文档中使用了框架和框 架集，则文档内的所有框架名都显示在列表中供选择。 架集，则文档内的所有框架名都显示在列表中供选择。如果当前文档在浏览器中 打开时指定的框架不存在，则链接页面被载入新窗口中。还可选择以下目标名： 打开时指定的框架不存在，则链接页面被载入新窗口中。还可选择以下目标名： blank：将链接文档载入到新的未命名浏览器窗口中。 ＿blank：将链接文档载入到新的未命名浏览器窗口中。 parent：将链接文档载入到父框架集或包含该链接的框架窗口中。 ＿parent：将链接文档载入到父框架集或包含该链接的框架窗口中。如果包 含该链接的框架是非嵌套框架，则链接文档将载入到整个浏览器窗口中。 含该链接的框架是非嵌套框架，则链接文档将载入到整个浏览器窗口中。 self：将链接文档载入与该链接相同的框架或窗口中（默认）。 ＿self：将链接文档载入与该链接相同的框架或窗口中（默认）。 top：在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。 ＿top：在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。 低解析度源】 指定在载入主图像之前应该载入的图像。 【低解析度源】 指定在载入主图像之前应该载入的图像。可以使用主图像 黑和白)版本，它可以迅速载入并使访问者对将看到的内容有所了解。 的2位(黑和白)版本，它可以迅速载入并使访问者对将看到的内容有所了解。 边框】 以像素为单位的图像边框的宽度。默认无边框。 【边框】 以像素为单位的图像边框的宽度。默认无边框。 对齐】 对齐同一行上的图像和文本。 【对齐】 对齐同一行上的图像和文本。49 / 178（1）调整图像大小 使用Dreamweaver8调整图像大小时，有些操作会更改磁盘上的源图像文件， 使用Dreamweaver8调整图像大小时，有些操作会更改磁盘上的源图像文件， Dreamweaver8调整图像大小时 因此，您可能需要备份图像文件，以在需要时可以回复到原始图像。 因此，您可能需要备份图像文件，以在需要时可以回复到原始图像。 项 目 2 网 页 文 档 的 编 辑 在设计视图中选定图像，图像四周会出现控制点， 在设计视图中选定图像，图像四周会出现控制点，我们也可以单击标签选 择器中的图像标签&img&，选定该图像，如下图所示。 择器中的图像标签&img&，选定该图像，如下图所示。 &img&50 / 178拖动右边（底边）手柄，调整图像的宽度（高度）；拖动右下角手柄， 拖动右边（底边）手柄，调整图像的宽度（高度）；拖动右下角手柄，可 ）；拖动右下角手柄 同时调整元素的宽和高。按住Shift键拖动右下角手柄，可等比缩放， 同时调整元素的宽和高。按住Shift键拖动右下角手柄，可等比缩放，如下图所 Shift键拖动右下角手柄 示。 项 目 2 网 页 文 档 的 编 辑调整元素大小后，属性检查器的宽和高域中将显示图像新的宽度和高度， 调整元素大小后，属性检查器的宽和高域中将显示图像新的宽度和高度， 并且在其旁边会出现一个重设大小按钮 。单击此按钮可恢复图像大小。 单击此按钮可恢复图像大小。51 / 178（2）对齐方式 图像与文本一样，可以向左、向右、居中对齐。另外，还可以9 图像与文本一样，可以向左、向右、居中对齐。另外，还可以9种方式进行 垂直对齐。也可以将图片转变为浮动的图像类型，允许文本围绕等。 垂直对齐。也可以将图片转变为浮动的图像类型，允许文本围绕等。 项 目 2 网 页 文 档 的 编 辑 ①水平对齐 当改变一行的水平对齐方式后， 当改变一行的水平对齐方式后，整个段落以及段落中的任何内置图像也会 随着移动。 DW8中水平对齐图像同对齐文本的方法一样， 随着移动。在DW8中水平对齐图像同对齐文本的方法一样，使用属性检查器中的 中水平对齐图像同对齐文本的方法一样 对齐按钮 中的两端对齐按钮 。这些按钮包括左对齐、居中对齐和右对齐，但不包括文本 这些按钮包括左对齐、居中对齐和右对齐， 。左对齐如下左图，右对齐如下右图所示。 左对齐如下左图，右对齐如下右图所示。52 / 178②垂直对齐 可以把文本放置在图像旁边，在同一行对齐文本和图像。 可以把文本放置在图像旁边，在同一行对齐文本和图像。图像属性检查器 对齐下拉列表中包含了很多种指定如何排列文本和图像的选项， 对齐下拉列表中包含了很多种指定如何排列文本和图像的选项，从中选择任一 项 目 2 网 页 文 档 的 编 辑 选项，如下图所示。DW8会将用户的选择写入标签&img&里的align属性中。 选项，如下图所示。DW8会将用户的选择写入标签&img&里的align属性中。 会将用户的选择写入标签&img&里的align属性中【默认值】 默认值】通常指定基线对齐，在标签&img&中不包含对齐属性。 通常指定基线对齐，在标签&img&中不包含对齐属性。根据 &img&中不包含对齐属性站点访问者的浏览器的不同，默认值也会有所不同。 站点访问者的浏览器的不同，默认值也会有所不同。 【基线】 基线】 【顶端】 顶端】 【居中】 居中】 【底部】 底部】 围绕文本的基线与选定图像的底部对齐。 围绕文本的基线与选定图像的底部对齐。 图像顶端与当前行中最高项(图像或文本)的顶端对齐。 图像顶端与当前行中最高项(图像或文本)的顶端对齐。 图像中部与当前行的基线对齐。 图像中部与当前行的基线对齐。 围绕文本的底部与选定图像的底部对齐。 围绕文本的底部与选定图像的底部对齐。 图像顶端与文本行中最高字符的顶端对齐。 图像顶端与文本行中最高字符的顶端对齐。53 / 178【文本上方】 文本上方】【绝对居中】 绝对居中】 【绝对底部】 绝对底部】 项 目 2 网 页 文 档 的 编 辑 【左对齐】 左对齐】 【右对齐】 右对齐】图像中部与当前行中文本的中部对齐。 图像中部与当前行中文本的中部对齐。 图像底部与文本行底部对齐。 包括字母下部， 图像底部与文本行底部对齐。(包括字母下部，如y、g)所选图像放置在左边，文本在图像的右侧换行。 所选图像放置在左边，文本在图像的右侧换行。 图像放置在右边，文本在对象的左侧换行。 图像放置在右边，文本在对象的左侧换行。“文本上方”效果如下图左所示，“绝对居中”效果如下图右所示。 文本上方”效果如下图左所示， 绝对居中”效果如下图右所示。54 / 1783. 使用图像地图 利用文字和图像作为超级链接的触发点，是网页上创建链接的主要方式。 利用文字和图像作为超级链接的触发点，是网页上创建链接的主要方式。 项 目 2 网 页 文 档 的 编 辑 DW8还可以使用图像地图来创建超级链接， DW8还可以使用图像地图来创建超级链接，图像地图是指已被分为多个热点的图 还可以使用图像地图来创建超级链接 像。当单击某个热点时，会执行相应命令，就像平时使用的地图一样，我们可 当单击某个热点时，会执行相应命令，就像平时使用的地图一样， 以把它划分为若干个区域，每个区域对应于不同的URL。 以把它划分为若干个区域，每个区域对应于不同的URL。 URL 选择图像，打开属性面板，图像地图工具如下所示。 选择图像，打开属性面板，图像地图工具如下所示。55 / 178项 目 2 网 页 文 档 的 编 辑（1）创建图像地图 点击图像，然后选择一个图像地图工具来描绘矩形、椭圆形或多边形。 点击图像，然后选择一个图像地图工具来描绘矩形、椭圆形或多边形。操 作步骤： 作步骤： 选择图像； ①选择图像； 在图像属性检查器的“地图”文本框中输入图像地图名称。 ②在图像属性检查器的“地图”文本框中输入图像地图名称。 DW8会在 地图”文本框内显示占位名称。 会在“ DW8会在“地图”文本框内显示占位名称。如果在同一文档中使用多个图像 地图，应给每个地图起唯一的名称。 地图，应给每个地图起唯一的名称。 选择合适的绘图工具(矩形、圆形或者多边形)来绘制图像地图区域。 ③选择合适的绘图工具(矩形、圆形或者多边形)来绘制图像地图区域。选 择多边形工具时，在选定图像上，每个角点单击一次， 择多边形工具时，在选定图像上，每个角点单击一次，定义一个不规则形状的 热区。单击箭头工具，结束多边形热区定义，如下图所示。 热区。单击箭头工具，结束多边形热区定义，如下图所示。56 / 178④点击某个热区，在屏幕上显示热点属性检查器，【链接】文本框中会自动 点击某个热区，在屏幕上显示热点属性检查器， 链接】 添加一个空链接，如下图所示。 添加一个空链接，如下图所示。 项 目 2 网 页 文 档 的 编 辑⑤在【链接】文本框中键入此图像地图的URL，或者单击文件夹图标或选择指 链接】文本框中键入此图像地图的URL， URL 向图标选择URL文件。如需要，在目标下拉列表中选择链接目标的打开方式。 向图标选择URL文件。如需要，在目标下拉列表中选择链接目标的打开方式。 URL文件 ⑥在【替换】文本框中，可以输入提示文本在鼠标移动到这个区域时显示。 替换】文本框中，可以输入提示文本在鼠标移动到这个区域时显示。使用属性检查器中的绘图工具绘制图像地图既直观又容易使用。 使用属性检查器中的绘图工具绘制图像地图既直观又容易使用。绘制后在代 码视图中会自动生成相应的HTML代码。 码视图中会自动生成相应的HTML代码。 HTML代码57 / 178（2）修改图像地图 图像地图创建后，可进行编辑修改。可移动热点，调整热点大小， 图像地图创建后，可进行编辑修改。可移动热点，调整热点大小，或者在 层之间向上或向下移动热点。 层之间向上或向下移动热点。还可将含有热点的图像从一个文档复制到其他文 项 目 2 网 页 文 档 的 编 辑 档，或者复制某图像中的一个或多个热点，然后将其粘贴到其他图像上。 或者复制某图像中的一个或多个热点，然后将其粘贴到其他图像上。 ①移动图像地图位置 直接点击定义的热区，将图像地图拖动至一个新的位置。 直接点击定义的热区，将图像地图拖动至一个新的位置。如果要做精确的 以像素为单位的移动，选择区域然后使用移动光标键移动即可。 以像素为单位的移动，选择区域然后使用移动光标键移动即可。 ②调整图像地图大小 选择图像地图后，图像地图上都有几个控点， 选择图像地图后，图像地图上都有几个控点，可用来改变热点的大小及形 状。矩形和圆形图形有四个控点，拖拉任意一个控点可以改变图形大小及形状。 矩形和圆形图形有四个控点，拖拉任意一个控点可以改变图形大小及形状。 拖动箭头时按住Shift键 将保持纵横比。多边形热点的角上有多个控点， 拖动箭头时按住Shift键，将保持纵横比。多边形热点的角上有多个控点，按 Shift 住某个控点将它拖至新的位置，多边形的形状就会发生变化。 住某个控点将它拖至新的位置，多边形的形状就会发生变化。58 / 178③对齐图像地图 一个图像地图还能与其他图像地图对齐， 一个图像地图还能与其他图像地图对齐，或改变大小以适应其他热点的尺 寸。选择两个或多个热区，选择【修改】菜单\【排列顺序】命令，在下级菜 选择两个或多个热区，选择【修改】菜单\ 排列顺序】命令， 项 目 2 网 页 文 档 的 编 辑 单中选择左对齐、右对齐、对齐上缘、对齐下缘、设成宽度相同、 单中选择左对齐、右对齐、对齐上缘、对齐下缘、设成宽度相同、设成高度相 同等项中的一个选项，效果见下两图所示。 同等项中的一个选项，效果见下两图所示。④删除图像地图 选中图像地图，按下Delete键即可删除图像地图。 选中图像地图，按下Delete键即可删除图像地图。 Delete键即可删除图像地图59 / 1784. 使用外部图像编辑器 DW8是极好的网页编辑软件，但并不是一个图像编辑软件。 DW8是极好的网页编辑软件，但并不是一个图像编辑软件。有时候当我们将 是极好的网页编辑软件 项 目 2 网 页 文 档 的 编 辑 图像插入Web页后，发现图片在某些方面需要做些更改。例如， 图像插入Web页后，发现图片在某些方面需要做些更改。例如，要对图像添加阴 Web页后 影，或者要将背景设置为透明等。此时可借助其他图像编辑软件。 或者要将背景设置为透明等。此时可借助其他图像编辑软件。 下章的Fireworks是Macromedia公司开发的网页图像处理软件，它与DW紧密 下章的Fireworks是Macromedia公司开发的网页图像处理软件，它与DW紧密 Fireworks 公司开发的网页图像处理软件 DW 集成。我们可以利用Fireworks设计网页图像，然后把它插入到网页中。 DW与 集成。我们可以利用Fireworks设计网页图像，然后把它插入到网页中。让DW与 Fireworks设计网页图像 Fireworks联合作战，快速、高效地设计出美观的网页。 Fireworks联合作战，快速、高效地设计出美观的网页。 联合作战 下面介绍设置外部图像编辑器首选参数的方法。 下面介绍设置外部图像编辑器首选参数的方法。 通过首选参数中的外部编辑器面板，DW8允许用户指定自己的图像编辑器。 通过首选参数中的外部编辑器面板，DW8允许用户指定自己的图像编辑器。 允许用户指定自己的图像编辑器 我们可以设置编辑器打开哪些文件类型；为该文件类型选择多个图像编辑器。 我们可以设置编辑器打开哪些文件类型；为该文件类型选择多个图像编辑器。60 / 178①选择【编辑】菜单\【使用外部编辑器编辑】命令，弹出“首选参数” 选择【编辑】菜单\ 使用外部编辑器编辑】命令，弹出“首选参数” 对话框，从左侧的【分类】列表中选择【文件类型／编辑器】项。如下所示。 对话框，从左侧的【分类】列表中选择【文件类型／编辑器】 如下所示。 项 目 2 网 页 文 档 的 编 辑61 / 178②在【扩展名】列表中，选择您要为其设置外部编辑器的文件扩展名。单击 扩展名】列表中，选择您要为其设置外部编辑器的文件扩展名。 【扩展名】列表上方的 扩展名】 项 目 2 网 页 文 档 的 编 辑 按钮，可以添加自定义的文件扩展名。 按钮，可以添加自定义的文件扩展名。③在右边【编辑器】列表中，会出现相应的编辑器启动应用程序。单击【编 在右边【编辑器】列表中，会出现相应的编辑器启动应用程序。单击【 辑器】 辑器】列表上方的 按钮，会出现【选择外部编辑器】对话框， 按钮，会出现【选择外部编辑器】对话框，可以添加自定义的外部编辑器应用程序。 义的外部编辑器应用程序。 ④编辑器列表中可以有多个外部编辑器应用程序，如果您希望该编辑器成为 编辑器列表中可以有多个外部编辑器应用程序， 此文件类型的主编辑器，选择该编辑器名称后单击“设为主要”按钮。 此文件类型的主编辑器，选择该编辑器名称后单击“设为主要”按钮。 ⑤一旦用户为一种格式选定了一个图像编辑器，就可以单击属性检查器上的 一旦用户为一种格式选定了一个图像编辑器， “编辑”中的某个应用程序按钮，DW8将启动该文件类型的默认编辑器。用户做 编辑”中的某个应用程序按钮，DW8将启动该文件类型的默认编辑器。 将启动该文件类型的默认编辑器 完修改之后，将文件保存在图像编辑器中然后跳转回DW8。这时用户会发现新的、 完修改之后，将文件保存在图像编辑器中然后跳转回DW8。这时用户会发现新的、 DW8 修改过的图像已经出现在Web页中。 修改过的图像已经出现在Web页中。 Web页中62 / 178四、课堂实践 准备二幅普通风景图像，分别命名为“01.jpg”和“02.jpg”；二幅宽度 准备二幅普通风景图像，分别命名为“01.jpg”和 02.jpg”； 项 目 2 网 页 文 档 的 编 辑 和高度相同的图像，命名为“03.gif”和 04.gif”； 幅制作“导航条” 和高度相同的图像，命名为“03.gif”和“04.gif”；4幅制作“导航条”的 图像，命名为“ jpg”、 06.gif”、 07.gif”、 08.gif”。 图像，命名为“05. jpg”、“06.gif”、 “07.gif”、“08.gif”。打开 “课堂实践”站点，新建一网页文档“st1.html”。 课堂实践”站点，新建一网页文档“st1.html”。 在网页中插入4幅图像，具体操作如下： 在网页中插入4幅图像，具体操作如下： （1）在网页文档“st1.html”中插入第一幅与第二幅图像，源文件分别 在网页文档“st1.html”中插入第一幅与第二幅图像， 中插入第一幅与第二幅图像 为“01.jpg”和“02.jpg”，在“替换文本”文本框中分别输入“景观之一” 01.jpg”和 02.jpg”， 替换文本”文本框中分别输入“景观之一” 和“景观之二”。 景观之二” （2）第3幅插入的是“鼠标经过图像”，“原始图像”的源文件为 幅插入的是“鼠标经过图像” 原始图像” “03.gif”，“鼠标经过图像”的源文件为“04.gif”，“替换文本”为“鼠 03.gif”， 鼠标经过图像”的源文件为“04.gif”， 替换文本” 标经过图像练习” 标经过图像练习”，“链接”为“03.html”。 链接” 03.html”。63 / 178（3）第4幅插入的是“导航条”的图像按钮，该图像按钮的项目名称为 幅插入的是“导航条”的图像按钮， “buttonl”，“状态图像”的源文件为“05.jpg”，“鼠标经过图像”的源 buttonl”， 状态图像”的源文件为“05.jpg”， 鼠标经过图像” 文件为“06.gif”， 按下图像”的源文件为“07.gif”， 文件为“06.gif”，“按下图像”的源文件为“07.gif”，“按下时鼠标经过 项 目 2 网 页 文 档 的 编 辑 图像”的源文件为“08.gif”， 替换文本” 图像”的源文件为“08.gif”，“替换文本”为“导航条练习”，“链接”为 导航条练习” 链接” “st1.html”。 st1.html”。 （4）所有图像的“水平边距”都为“10”，边框都为“2”，“对齐”都 所有图像的“水平边距”都为“10”，边框都为“2”， 对齐” 为“默认值”。 默认值” 操作时注意：所需的图像文件保存站点根文件夹下的子文件夹“ 操作时注意：所需的图像文件保存站点根文件夹下的子文件夹“image” 中；插入普通图像时，直接单击“常用”插入工具栏中的【图像】按钮，弹出 插入普通图像时，直接单击“常用”插入工具栏中的【图像】按钮， “选择图像源文件”对话框，在该对话框中选择所需的图像文件，单击【确定】 选择图像源文件”对话框，在该对话框中选择所需的图像文件，单击【确定】 按钮即可；插入“鼠标经过图像” 按钮即可；插入“鼠标经过图像”时，必须在“插入鼠标经过图像”对话框中 必须在“插入鼠标经过图像” 设置相应的参数，然后单击【确定】按钮即可；插入“导航条”时，必须在 设置相应的参数，然后单击【确定】按钮即可；插入“导航条” “插入导航条”对话框中设置相应的参数，然后单击【确定】按钮即可；图像 插入导航条”对话框中设置相应的参数，然后单击【确定】按钮即可； 插入到网页后，可通过图像“属性”面板设置插入图像的“ 插入到网页后，可通过图像“属性”面板设置插入图像的“宽”、“高”、 “水平边距”、“边框”、“对齐”等属性。 水平边距” 边框” 对齐”等属性。64 / 178任务4 任务4 超级链接项 目 2 网 页 文 档 的 编 辑 一、任务分析 超级链接是网页的灵魂，它合理、 超级链接是网页的灵魂，它合理、协调地把网站中的众多页面通过链接构 成一个有机整体，使访问者能够在各个页面之间跳转， 成一个有机整体，使访问者能够在各个页面之间跳转，还能够使不同站点之间 建立联系。 建立联系。 超级链接可以是一段文本、一幅图像或其他网页元素， 超级链接可以是一段文本、一幅图像或其他网页元素，当在浏览器中用鼠 标单击这些对象时，浏览器可以载入一个新的页面或者转到页面的其他位置。 标单击这些对象时，浏览器可以载入一个新的页面或者转到页面的其他位置。 本任务主要学习创建内部链接、外部链接、 Mail链接等的操作方法。 本任务主要学习创建内部链接、外部链接、E-Mail链接等的操作方法。 链接等的操作方法65 / 178二、相关知识 1. 链接的种类 浏览网页时，单击带有链接的文字或图片， 浏览网页时，单击带有链接的文字或图片，会跳转到链接指明的文件或网 项 目 2 网 页 文 档 的 编 辑 站。我们把带有链接的文字或图片称为“链接源端点”，而把跳转的地方称为 我们把带有链接的文字或图片称为“链接源端点” 是“链接目标端点”，根据后者不同，超链接可分为以下几种： 链接目标端点” 根据后者不同，超链接可分为以下几种： 内部链接。链接的目标端点是本站中的其他文档。 内部链接。链接的目标端点是本站中的其他文档。 外部链接。链接的目标端点是本站点之外的站点或文档。利用这种链接， 外部链接。链接的目标端点是本站点之