《网页编辑技术应用》由会员分享，可在线阅读，更多相关《网页编辑技术应用（370页珍藏版）》请在金锄头文库上搜索。
1、网网页页编编辑辑DreamweaverMX界面与建站DreamweaverMX是Macromedia公司开发的网页编辑工具，它集网页设计、制作与网站管理于一身，是一个所见即所得的网页编辑工具，利用它可以轻而易举的制作出跨平台限制和浏览器限制的充满动感的网页。本章着重介绍DreamweaverMX的基础知识和基本操作，通过本章学习可以综合运用DreamweaverMX的常用功能制作网页，为以后学习各类网站开发技术打好扎实的基础。MacromediaDreamweaverMX是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论您愿意享受手工编写HTML代
2、码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会为您提供有用的工具，使您拥有更加完美的Web创作体验。通过本项目的实训与练习使学生熟悉软件的界面及基本操作，掌握站点的规划、建立和管理。.Dreamweaver的界面的界面(1)菜单栏功能介绍菜单栏功能介绍包含有文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助10个菜单项，具体功能有：.【文件】菜单：包含有【新建】、【打开】、【保存】、【关闭】、【另存为】、【保存全部】等命令，用于查看当前文档或对当前文档执行操作，例如【在浏览器中预览】和【另存为模板】。.【编辑】菜单：包含选择和查找命令，例如【选择父标签】和【查找
3、和替换】，还包括【首选参数】命令。(1)菜单栏功能介绍菜单栏功能介绍.【查看】菜单：可以设置文档的各种视图(例如【设计】视图和【代码】视图)，并且可以显示和隐藏不同类型的页面元素和工具栏。.【插入】菜单：提供【插入】栏的扩充选项，用于将合适的对象插入您当前的文档。.【修改】菜单：可以更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。.【文本】菜单：可以轻松的设置文本的格式。.【命令】菜单：提供对各种命令的访问；包括一个清理HTML、一个创建相册的命令、一个添加/移除Netscape调整修复(使你的网页适合netscape浏览)等。.【
4、站点】菜单：提供用于管理站点以及上传和下载文件的菜单项。.【窗口】菜单：提供对DreamweaverMX2004中的所有面板、属性、检查器和窗口的访问。.【帮助】菜单：提供对文档的访问，包括关于使用以及创建扩展功能的帮助系统，还包括各种语言的参考材料。其中包含一个入门教程，初学者可以去看看。(2)插入插入栏栏功能介功能介绍绍(3)文档工具文档工具栏栏(4)【文档文档】窗口窗口(5)状状态栏态栏显示当前创建和编辑的文档。(6)【属性】检查器用于查看和更改所选对象或文本的各种属性。(7)面板组CSS样式面板层面板行为面板参考面板数据库面板绑定面板服务器行为面板组件面板文件面板资源面板标签面板结果面
5、板历史记录面板框架面板代码检查器2.站点结构的规划站点结构的规划在建立一个站点之前，策划站点是至关重要的。俗话说“三思而后行”，完善的策划往往可以使用户取得事半功倍的效果。在创建一个网站前，我们首先要对网站进行规划。用户要根据实际情况制定自己的策划步骤。一般来讲，我们需要考虑下面几个问题。1)策划站点结构2)策划站点的导航(1)清晰的显示浏览用户在站点中所处的位置，使浏览者可以轻松的返回到站点首页。(2)在整个站点内导航风格应保持一致。(3)提供反馈功能，方便浏览者与网站管理员及相关人员联系。(4)提供搜索和索引功能，方便浏览者查找信息。3)策划模板和库的使用3.建立站点参数设置建立站点参数设
6、置1)设置站点首选参数2)建立站点时本地信息设置参数“本地信息”：“远程信息”：3)站点遮盖4)设计备注4.管理站点在构建站点的基础上，为了组织和管理站点系统中的文件，在本地系统上重新创建了远程的网站机构。这样在本地站点上创建的链接和远程站点上同样有效，因为两个站点的结构是一样的。启动Dreamweaver，单击【窗口】【文件】菜单项，打开“文件”面板，如图所示。.实训步骤实训建立站点启动Dreamweaver。选择【站点】【管理站点】(即，从“站点”菜单中选择“管理站点”)。出现“管理站点”对话框。单击【新建】【站点】，弹出“站点定义”对话框。给新建的站点定义一个名称为“myweb”。单击“
7、下一步”，选择“是”，我想使用服务器技术”，在“哪种服务器技术”的下拉菜单中选择“ASPVBscript”项。单击“下一步”，选择“在本地进行编辑和测试”。单击“下一步”，在图中单击“测试URL”按钮。弹出对话框，表明测试成功，否则需要重新定义站点。单击“确定”后点“下一步”，在共享文件设置时，选择“否”。单击“下一步”后，将会看到动态站点定义的基本信息。单击“完成”。.思考与练习1.DreamweaverMX2004有什么特点？2.启动DreamweaverMX2004，描述各组成部分，点击菜单命令、面板组进行显示和关闭操作。3.为什么要进行站点规划？4.创建一个名为“myweb2”的本地站
8、点。第2章网页编辑网页文件的建立、保存与打开网页文件的建立、保存与打开是文件操作中最基本的部分。通常首先创建本地站点，然后根据站点设计蓝图添加各种空白文件，接着对这些文件进行编辑。在DreamweaverMX2004中，文件的建立、保存与打开等操作在许多方面和其他的软件类似，因而方便了用户。学会了文件的建立、保存与打开，可以为以后的网站设计与制作奠定基本的操作基础。1.文件格式文件格式在DreamweaverMX2004中，网页文件的格式很多，有asp、php、jsp、htm、html、aspx、shtml、xml等。html格式是最基本的文件格式，asp文件格式是最常用的动态页面文件格式。还
9、有其他一些自由的格式，都是网页文件格式。想判别是什么类型就得知道它用的是什么服务器，如：asp和aspx用的是Windows服务器；php用的是Linux服务器，jsp用的是Java服务器。2.文件命名文件命名静态网页命名：lindex.htm或index.htmlldefault.htm或default.html.实训实训-新建文件新建文件1.常规新建文件启动Dreamweaver，打开站点，单击【文件】【新建】选项，弹出“新建文档”对话框。在对话框的“类别”下选择需要创建文件的类型，在“基本页”下选择文件格式。选择完成后单击“创建”按钮。在D盘下新建站点myweb，该站点作为新建文件存放的
10、位置。.实训实训-保存文件保存文件文件的存储形式有6种，保存、另存为、保存全部、保存到远程服务器、另存为模板、回复到上次的保存。常见的为“保存”和“另存为”两种，根据不同的需要选择合适的形式。.实训实训-保存文件保存文件1.“保存”文件的操作步骤打开已有站点。切换到要保存的文件窗口。单击【文件】【保存】菜单项，弹出“另存为”对话框，输入文件名。如果需要同时保存多个文件，则可以选择“全部保存”菜单一次完成。单击“保存”按钮就可以存储文档，如果是对已命名的存在文件进行编辑后的保存，只要单击【保存】就可以了。2.“另存为”文件的操作步骤切换到要保存的文件窗口。单击【文件】【另保存】菜单项，弹出“另存
11、为”对话框，找到文件存放路径，输入文件名。单击“保存”按钮就可以另存文档。.实训实训-打开文件操作1.从起始页面打开启动Dreamweaver，在起始页面中显示了最近编辑过的文件。单击目标文件，即可打开。2.从站点打开打开站点。单击【窗口】【文件】选项，弹出“文件”对话框。双击需要打开的目标文件。当然，也可以直接找到文件路径，双击打开。4.思考与练习思考与练习1.网页文件的命名原则是什么？2.分别建立名为index的html类型的文件，保存在站点myweb2文件夹下，然后打开“index.html”进行简单编辑，另存为“index2.html”。第2章网页编辑DreamweaverMX2004
12、设置网页属性和文件头内容1通过本实训项目的学习，用户可以在进行制作网站前，对网页的属性设置、文件头的内容有进一步的了解，对以后的网站制作提供帮助。2实训预备知识实训预备知识使用“页面属性”对话框可以定义页面背景的图像和颜色。如果同时使用图像和颜色，则颜色将在图像下载过程中出现。如果背景图像有透明象素，则背景颜色将一直显示。当网络速度比较慢时。背景图像可能显示迟缓，此时背景颜色将首先出现。另外，当了当浏览者关闭了浏览器的图片显示功能时，则仍可以看到背景颜色。除了可以定义网页背景之外，在“页面属性”对话框中单击“链接”分类还可以定义普通文本、超级链接、已访问的链接和活动链接的默认颜色。如图2.26
13、所示。图2.263.网页标题和编码对HTML页面来说，标题非常重要。标题可以帮助用户在浏览时了解正在访问的内容，在历史记录和书签列表中标识页面。如果页面没有标题，则将作为“无标题文档”在浏览器窗口、历史记录、书签列表中显示。直接在DreamweaverMX2004中的工具栏上的“标题”框中就可以输入新标题。标题将出现在文件窗口的标题栏上，其右边是文件名和保存文件的文件夹名。如图2.27所示。图2.27网页编码的设置可在未选中任何网页对象状态下，单击属性面板上的“页面属性”按钮，再单击“标题/编码”分类，从“编码”下拉菜单中选择编码类型，如“简体中文(GB2312)”。如图2.28所示。图2.2
14、84.不可见元素在DreamweaverMX2004的文件窗口中，某些页面元素是不可见的，例如表单、命名锚记、批注和脚本等。它们在浏览器中也是看不到的。这些元素称为“不可见元素”。但是用户往往需要对这些元素进行编辑。因此，DreamweaverMX2004允许用户单击【查看】【可视化助理】【不可见元素】选项，显示或隐藏代表不可见元素的标记。不可见元素如图2.29所示。图2.295.META随着WWW的不断发展，网络上的信息资源正呈现出不断增多的趋势。为了有效地解决查找网络资源这一问题，元数据(metadata)这一概念被提出来。元数据就是被称为关于数据的数据，它是专门用来描述数据特征和属性的。
15、元数据是HTML文件头部的主要组成部分，主要存储一个文件的页面信息，在某些特定场合这些信息可以被计算机识别。在HTML中，元数据可以有多种表现形式。主要有标记。标记是元数据的主要标记，它提供文件的关键字、作者和描述等多种重要信息。在HTML的头部可以包含人以数量的标记。标记是非封闭类型的标记，它有两种书写方式：其中，http-equiv属性的作用和name属性类似，常常代替name属性。利用该属性，Internet上的HTTP服务器可以从页面的HTTP响应头部收集信息。另外，标记还有charset属性，用于指定文件的文字编码方式。6.关键字关键字是常用的元数据，可以帮助搜索引擎找到网页。在Dr
16、eamweaverMX2004中定义了关键字插入选项可以直接插入关键字，而无须手工将标记的name属性设置为“keywords”。7.描述描述信息也是常用的元数据，可以帮助搜索引擎找到相关页面。在DreamweaverMX2004中定义了描述信息插入选项可以直接插入描述信息，而无须手工将标记的name属性设置为“decription”。8.刷新定义自动刷新就是标记的http-equiv属性设置为“refresh”。在DreamweaverMX2004中提供了定义自动刷新和自动跳转的方法，而无须手工将标记的http-equiv设置为“refresh”。9.基础文档中所有采用显贵地址URL的基础出
17、发位置称为基础URL地址，基础地址也是通过文档头部的标记来实现的。通常一篇文档中的标记不能多于一个，位于头部，并且在所有包含URL地址的语句之前。在标记中有href和两个常用属性。前者指定基础地址的URL，后者则用于设置当在文档中单击该链接时在哪个框架或窗口打开所连接的文档。10.链接使用标记可以设置文档和引用资源之间的链接关系，在HTML头部可以插入任意数量的标记。标记带有很多属性。常用的属性有：href属性用于指定链接资源的URL；title属性用于说明该链接关系，为一个字符串；rel属性定义文档和所链接资源之间的链接关系；rev属性则定义文档与所链接资源之间的反向关系。11实训1.设置网
18、页的页面属性单击【修改】【页面属性】选项，弹出如图2.30所示对话框。在“分类”列表中选择“外观”选项。图2.30在“分类”列表中选择“链接”选项，弹出如图2.31所示的对话框。在“分类”列表中选择“标题”选项，弹出如图2.32所示的对话框。图2.31图2.32在“分类”列表中选择“标题/编码”选项，弹出如图2.33所示的对话框。在“分类”列表中选择“跟踪图像”选项，弹出如图2.34所示的对话框。图2.33图2.34设置完毕后单击“确定”按钮完成页面设置。12实训2.编辑网页的头部文件。1)插入元数据单击【插入】【HTML】【文件头标签】【Meta】选项，或单击“HTML”工具栏中的“元数据”
19、按钮，弹出如图2.35所示的对话框。在“属性”下拉列表中选择类型的属性。在“值”文本框中输入属性值；在“内容”文本框中可以输入属性的内容。设置完毕单击“确定”按钮完成插入元数据的操作。图2.352)插入关键字单击【插入】【HTML】【文件头标签】【关键字】选项，或单击“HTML”工具栏中的“关键字”按钮，弹出如图2.36所示的对话框。在“关键字”文本框中输入关键字信息。输入多个关键字时，关键字之间须用逗号隔开。设置完毕单击“确定”按钮完成插入关键字的操作。图2.363)插入描述信息单击【插入】【HTML】【文件头标签】【描述】选项，或单击“HTML”工具栏中的“描述信息”按钮，弹出如图2.37
20、所示的对话框。在“描述”文本框中输入描述信息。设置完毕单击“确定”按钮完成插入描述信息的操作。图2.374)定义自动刷新单击【插入】【HTML】【文件头标签】【刷新】选项，或单击“HTML”工具栏中的“刷新”按钮，弹出如图2.38所示的对话框。在“延迟”文本框中输入延迟的时间。在“操作”区域可以设置刷新动作。选中“转到URL”单选按钮可以跳转到指定的URL地址页面，在其右面的文本框中可以输入目标页面的URL地址，也可以单击“浏览”按钮从磁盘中选择文档。选中“刷新此文档”单选按钮则仅刷新当前文档。设置完毕单击“确定”按钮完成操作。图2.385)设置基础URL地址单击【插入】【HTML】【文件头标
21、签】【基础】选项，或单击“HTML”工具栏中的“基础”按钮，弹出如图2.39所示的对话框。在“Href:”文本框中输入基础URL地址，也可以单击“浏览”按钮选择基础地址路径。在“目标”下拉列表中，设置当在文档中单击该链接时在哪个框架或窗口打开锁链接的文档。设置完毕单击“确定”按钮完成操作。图2.396)设置文档链接单击【插入】【HTML】【文件头标签】【链接】选项，或单击“HTML”工具栏中的“链接”按钮，弹出如图2.40所示的对话框。在“Href”文本框中输入链接资源所在的URL地址，也可以单击“浏览”按钮选择目标文档。在“ID”文本框中输入ID值。在“标题”文本框中输入对该链接的说明。在“
22、Rel”和“Rev”文本框中输入文档与链接资源之间的关系。设置完毕单击“确定”按钮完成操作。图2.4013思考与练习1)新建一张网页，设置主页关键字为“我的站点”，描述信息为“第一张网页”。2)在网页中插入元数据，8秒钟自动刷新一次。3)新建页面，设置网页的配色方案，然后输入内容。网网页页编编辑辑输入文本和添加图像网页内容是网站的灵魂，图像和文本是网页中最重要的两个元素。无论制作网页的目的是什么，文本都是网页中最基本的、必不可少的的元素。一个内容充实的网站必然会运用大量的文本。良好的文本格式，可以创建出别具特色的网页，激发访客的兴趣。在网页中构建丰富的字体、多样的段落格式以及赏心悦目的文本效果
23、是网页制作的基本要求。一个高质量的网站是离不开图像的。制作精良的图像可以大大增强网页的美观性，令网页更加生动多彩。1.文本工具栏和文本属性面板文本工具栏和文本属性面板文文本本工工具具栏栏是是建建立立文文本本的的基基础础工工具具，通通过过文文本本工工具具栏栏可可以以设设置置文文本本的的标标题题格格式式和和文文字字样样式式等等。属属性性面面板板可可以以显显示示当当前前文文本本的的一一些些设设置置参参数数，并并可可以以通过属性面板编辑这些参数。通过属性面板编辑这些参数。1) 1) 文本工具栏，文本工具栏如图所示。文本工具栏，文本工具栏如图所示。2)文本属性面板文本属性面板选选中中文文档档编编辑辑中中
24、的的文文本本，即即可可得得到到文文本本属属性性面面板板，如图所示。如图所示。2.图像属性图像属性仅仅插入图像，对于网页来说是不够的，也不能达到正确使用图像的目的，只有在设置好图像的属性之后才能使网页图文并茂，更见精美。插入图像后，选中图像，得到图像属性面板。如图所示。3实训实训1.添加文本添加文本（1）输入文本 在文件窗口中直接输入文本内容。 从其他的程序或窗口中复制文本，粘贴至文件窗口中，步骤如下：A 在Word窗口中选定需要粘贴的文本；B 执行【编辑】【复制】，复制文本；C 切换到Dreamweaver文件窗口，将其粘贴在指定位置。 将一个文本文件或文本处理的文档转换为HTML，再用Dre
25、amweaver打开。 （2）格式化文本A 设置字体组合 选定要改变字体的文本。 打开属性面板，如图所示。 在字体下拉列表中选择所要的字体。 若字体列表中无需要的字体，选择下拉列表中“编辑字体列表”选项，打开“编辑字体列表”对话框，如图所示。 在“可用字体”列表框中选择要添加的字体。 单击“添加”按钮，在左边的“选择的字体”列表框中就会加入选中的字体，点击“确定”即可。B 设置字体颜色及大小，单击“颜色”按钮，从中选择需要的颜色。在“大小”中选择或输入字体大小。C 设置文本格式。从属性面板的“格式”中选择文本的格式。如图所示。D 将文本和元素对齐。E添加链接。（3）创建列表创建列表A A 创建
26、新列表创建新列表 将光标置于要增新列表的地方。将光标置于要增新列表的地方。 单单击击属属性性面面板板中中的的中中的的项项目目列列表表或或编编号号列列表表按按钮钮，也也可可选选择择“文文本本”下下的的“列列表表”菜菜单单，选选择择需需要要的列表类型：的列表类型：l l项目列表项目列表l l编号列表编号列表l l定义列表定义列表 输入列表项目，按回车输入另一个列表项目。输入列表项目，按回车输入另一个列表项目。 完成列表时，按两次回车键。完成列表时，按两次回车键。B B 使用已有文本创建列表的方法：使用已有文本创建列表的方法： 选择需要转化为列表的一个段落。选择需要转化为列表的一个段落。 在在属属性
27、性面面板板中中单单击击项项目目列列表表或或编编号号列列表表按按钮钮，或或选择选择“文本文本”下的下的“列表列表”菜单中的列表类型。菜单中的列表类型。C C 创建嵌套的列表：创建嵌套的列表： 选择需要嵌套的列表项目。选择需要嵌套的列表项目。 单击属性面板中的文本缩进按钮。单击属性面板中的文本缩进按钮。4 4 实训实训2.添加图像。添加图像。（1）插入图像插入图像 将光标放置在文件中需要插入图片的位置。 单击【插入】【图像】选项，或单击常用工具栏上的“图像”按钮。弹出“图像选择”对话框。如图所示。 选择需要的图片。则可以在右侧预览图片。 在“相对于”选项后的文本框下拉列表中，可以选择文件URL地址
28、的类型。选择文档，则使用相对地址；选择站点根目录，则使用基于根目录的地址。 选定图像文件后，单击“确定”按钮，完成图片的插入。（2）图像编辑在Dreaweaver MX 2004 中增加了图片处理功能，如图片亮度和对比度的调节、图片的锐化效果等等。 选中需要编辑的图片。 在属性面板中，看到图像编辑的工具，如图所示。 图片剪切。选择“剪切”工具，用鼠标在图片上圈出所要图片的大小范围。然后双击鼠标，将图片剪切成所要的大小。如图所示。亮度调节。单击“亮度/对比度”调整工具，弹出“亮度/对比度”对话框，如图所示。设置亮度的参数为25，对比度为35，图片的效果改变了，如图所示。 锐化。继续上一步的图片操
29、作，选择“锐化”工具，弹出“锐化”工具对话框，将参数设置为8，图片变得清晰了。如图所示。5思考与练习思考与练习（1）新建一个页面，输入文本，并设置不同的字体。（2）在页面中插入图片，并进行编辑。网网页页编编辑辑创建超链接每个网站都有许多网页构成，网页之间通常都是通过超级链接方式相互建立关联的。在DreamweaverMX2004中，超级链接的范围很广，利用它不仅可以链接到其他页面，还可以链接到其他图像文件、多媒体文件等。1.超级链接的定义及类型超级链接的定义及类型超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链
30、接由两部分组成：链接载体(源端点)和链接目标(目标端点)。许多页面元素可以作为链接载体，如：文本、图像、图像热区、轮替图像、动画。而链接目标可以是任意网络资源，如：页面、图像、声音、程序、其他网站、Email甚至是页面中的某个位置书签。如图所示。根据链接载体的特点，一般把链接分为文本链接与图像链接两大类。文本链接：用文本作链接载体，简单实用。图像链接：用图像作为链接载体能使网页美观、生动活泼，它既可以指向单个的链接，也可以根据图像不同的区域建立多个链接。如果按链接目标分类，可以将超级链接分为以下几种类型：内部链接：同一网站文档之间的链接。外部链接：不同网站文档之间的链接。书签链接：同网页或不同
31、网页中指定位置链接。邮件链接：发送电子邮件的链接。2.链接路径链接路径创建超级链接时必须了解链接与被链接文件的路径。在一个网站中，路径通常有3种表示方法：绝对路径、根目录相对路径、文档目录相对路径。1)绝对路径绝对路径是被链接文档的完整URL地址，包括使用的传输协议(对于网页而言通常是http:/)，例如：http:/ 文档目录相对路径文档目录相对路径是指以当前文档所在位置为起始点到被链接文档经由的路径，这种方式适合于创建本地链接。使用文档相对路径可以省去当前文档和被链接文档的绝对URL中相同的部分，保留不同部分。一般在创建同一个站点中不同的网页之间的链接时，会使用到这种链接方式。3.文本超链
32、接文本超链接文本超链接是网页中最常见的超级链接，它能给浏览者非常直观的主题信息，对它所包含的信息一目了然。同时，文本超链接的建立也非常简单，所以文本超链接在网页中最常用。使用Dreamweaver MX 2004创建召集链接既简单又方便，只要选中要设置成超级链接的文字，然后在属性检查器“链接”文本框中添加相应的URL即可。4.图像超链接图像超链接有些时候，我们需要建立图像之间的超链接。例如，在个人的Web中提供自己的照片，通过单击照片，可以看到有关个人的一些内容；在电子商务中，商家在Web页中提供商品的图片，通过单击图片来了解商品的情况等。这样一方面可以吸引其他人的注意，另一方面可以通过单击这
33、些图像，实现特定的功能。建立图像超链接和建立文本超链接一样简单，步骤也大同小异，通过创建图像的各种超链接，可以实现主页结构和内容的多样性。在建立图像超链接的过程中，需要先在一个Web页中插入图像，然后再与需要链接的内容建立超链接。5.邮件超链接电子邮件正日益成为人们的重要沟通手段。因此，在网页中设置电子邮件链接已经变得非常普遍。电子邮件链接可以附加在按钮图片上，也可以附加在文本上，一般出现在网页末尾。从方便沟通的角度出发，需要在网页中大量使用电子邮件链接。当页面浏览者单击具有电子邮件链接的文本或按钮时，可以直接打开安装在系统中的电子邮件应用程序，在“收件人”位置已经自动填写好了预先输入的电子邮
34、件地址，浏览者只要在编写完电子邮件后，直接发送即可。6.书签链接书签链接当用户浏览网页时，经常会碰到这样的情况：在网页上端位置由一个内容列表，列表下面分别是针对各列表项的详细说明。当用户单击上端内容列表中感兴趣的某一项时，网页会自动跳转到该列表项的详细说明位置。当用户阅读完该项说明的全部内容之后，又可以单击“返回”文本或按钮回到页面的前端。这种处理方式需要使用到一种特殊方式的超链接“书签链接”。书签链接的原理就和锚一样，在需要的时候，返回到指定的位置。在Dreamweaver MX 2004中文版中，“书签”就被翻译成“命名锚记”。7.空链接空链接的含义就是像它的名字一样：它不会跳转到任何地方
35、。这种链接对于读取某些JavaScript事件时是非常有用的。有些JavaScript事件有链接但是并不针对文本或图像，而且也不需要用户离开当前页面。例如，在大多数浏览器中，图像不能识别onMouseOver事件。因此，必须使用空链接实现图像变换。在DreamweaverMX2004，“交换图像”的行为就是通过自动调用空链接实现的。8实训实训1.给文本创建超链接。给文本创建超链接。建立站点，新建一个名为lianjie.htm的网页。(1) 创建一指向搜狐(http:/)网站的链接 在网页中选中要添加超链接的文本“文本链接”。 单击【插入】【超级链接】选项，弹出“超级链接”设置对话框，链接后输入
36、“http:/”，目标为“_blank”，其他参数默认设置。如图所示。也可以在属性面板中进行设置或修改，如图所示。 保存。按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型，状态栏显示链接的指向位置。(2)创建一个指向站内文件的链接 在网页中选中要添加超链接的文本“文本链接”。.拖动“指向文件”按钮到需要链接的文件位置，放开。此时，在“链接”对话框中就会出现刚才被选中的链接文件。如图所示。也可以在属性面板中单击“文件夹”图标，在弹出的对话框里选中相应的网页文件就完成了，效果是一样的。保存。按F12预览网页。9 9 实训实训2.给图像创建超链接给图像创建超链接给图像创建超级链接的制作
37、方法同文本链接一样，区别只是添加链接的对象不同。下面介绍通过热区给图像添加超链接。制作图像上的超级链接。这里所说的图像上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。 在lianjie.htm文件里插入一张图片。如图所示。 选中图片，单击属性面板上的“多边形热点工具”按钮，如图所示。 在图上左下角的花朵上绘制热区，弹出热点面板，在“链接”位置输入“http:/www. ”，目标为“_blank”,替代文本为“新浪网”，其他参数默认设置。如图所示。重复的操作，对其他花朵进行热区设置。保存。按F12预览。用鼠标在设置的热区检验效果，可以看到光标移上热区就会显示出相应的说明文字，状态
38、栏显示链接的URL。如图所示。10 10 实训实训3.创建邮件超链接创建邮件超链接创建一个指向的邮件超链接，发送的主题为“咨询”。 选中要作为链接的“联系管理员”。 单击【插入】【电子邮件链接】选项，或者在“插入”工具栏上的“常用”选项上单击“电子邮件链接”按钮，都会弹出“电子邮件链接”对话框。 在“文本”文本框中会显示选中的文字，也可以在该文本框中输入新文字代替。在“E-mail”文本框中输入相应的E-mail地址“”。如图所示。如果希望在输入地址的同时输入信件主题，则可以在“E-mail”文本框中进行设置，例如输入“？subject=咨询”，单击链接后启动邮件程序，如图所示。 保存。按F1
39、2预览网页效果。11实训实训4.制作书签链接。制作书签链接。利用书签可以在文件中特定的位置上设置链接的目标端点。使用书签可以跳转到其他文件中的制定位置，也可以跳转到当前文件中的指定位置。在 index.htm文 件 中 制 作 一 个 指 向 站 点lianjie.htm文件的书签链接。 在lianjie.htm文件中将光标定位在要插入锚的位置。 单击【插入】【命名锚记】选项，弹出“命名锚记”对话框，给锚命名为“lianjie”。如图所示。 单 击 “确 定 ”。锚就插入在指定的位置。如图所示。 打开index.htm文件，选中设置超链接的对象。 单击属性面板中“链接”文本框后的“浏览文件”按
40、钮，弹出“选择文件”对话框，选择存在锚的网页文件。 在“URL：”文本框中输入“lianjie.htm#lianjie”。如图所示。单击确定。保存。按F12预览网页。在状态栏中显示了带有锚的URL地址，如图所示。12实训实训5.制作空链接。制作空链接。 选中要作为链接的对象。 在属性面板的“链接”文本框中输入一个“#”，这样单击地址为“#”的链接就会自动跳转到文档的起始位置。为了避免上述情况，可以用“#”来代替“#”，这时会保持在当前页面的浏览位置。 保存。按F12预览网页。会看到状态栏的文件路径后出现“#”。如图所示。13思考与练习思考与练习（1） 绝对路径和相对路径有什么区别？（2） 超级
41、链接按链接目标分类，分为哪几类？（3） 新建一个页面。创建电子邮件链接、空链接和文字链接。（4）在一个文件中命名一个锚“tu”，在当前文档内实现书签链接。网网页页编编辑辑网页布局 Dreamweaver MX 2004 提供了两种查看和操作表格的方式，一种是在“标准”模式中，表格显示为行和列的网格，另一种是在“布局”模式，允许用户在页面上绘制、调整以及移动布局表格或单元格。由于层可以定位在页面上的任意位置。所以使用层进行布局，可以作到对层中文档内容的精确定位。利用层可以非常灵活地放置内容，给了设计者很大的自己度。但是同时我们也必须要考虑它的兼容性问题。框架是一种常用的版面设计方式。框架可以将一
42、个浏览器窗口划分为多个区域，而且每个区域都可以显示不同HTML文档。1.表格表格表格是用于在页面上显示表格式数据以及对文本和图像进行布局的强有力的工具，很多设计人员还使用表格来对网页进行布局。表格由一行或多行组成，每行又由一个或多个单元格组成，虽然HTML代码中通常不明确指定列，但Dreamweaver MX 2004允许用户操作列、行和单元格。当用户选定了表格或表格中有插入点时，Dreamweaver MX 2004会显示表格宽度和每个单元列的列宽，提供了两种查看和操作表格的方式：在“标准”模式中，表格显示为行和列的网格；在“布局”模式下允许用户在将表格用作基础结构的同时再页面上绘制、调整表
43、格的大小以及移动表格。2.布局视图布局视图布局视图是一种特殊的表格视图，它的作用在于用可视化的方法在页面上绘制复杂的表格。它同传统绘制表格方法的差别在于，在布局视图中，我们可以在页面上绘制任意数量和大小的表格，而且在表格中的任意位置上也可以绘制任意数量和任意大小的单元格。要进入布局视图，可以在布局选项卡上，单击“布局”按钮。3.层层层是网页的一个区域，在一个网页中可以有多个层存在，它最大的魅力在于各个层可以重叠，并且可以设定层的属性和关系。使用层可以更灵活有效的制作页面，它可与表格相互转换。与表格的功能相比，层与表格相似，而且能够相互转化，但层在操作上上自由度更高。在Dreamweaver M
44、X2004中，层能够实现对网页内容的精确定位，层中可以放置任何网页对象，包括文本、图像、表单、对象插件及其他层等。4.框架框架框架的作用是把浏览器窗口划分为若干个区域，各区域可以分别显示不同的网页内容。框架由两个主要部分组成：框架集和单个框架。框架可以起到折分浏览器窗口的作用，它本身并不是网页，在使用框架建立并编辑网页时，一定要分别保存与名框架相链接的网页。框架与框架中显示的网页是链接关系，改变框架的结构并不会改变与框架链接的网页的内容。一般建立完成框架后，会分别设计与框架链接的网页，然后检测网页内容是否可以在框架中正确地显示。5实训实训1.表格的建立和操作。表格的建立和操作。（1）建立表格
45、建立一个新的空白页面biaoge.htm，在文件中选定插入点。单击【插入】【表格】选项，或单击“常用”工具栏上的“插入表格”按钮，弹出“表格”对话框。如图所示。 在对话框中设置5行8列表格，宽度为600像素，边框粗细为1，单元格边距为1，单元格间距为0。如图所示。如果需要查看表格的属性，可以选中表格，弹出表格属性面板。如图所示。如果需要查看单元格的属性，可以选中单元格，弹出单元格属性面板。如图所示。单击“确定”按钮，保存，按F12预览。效果如图所示。（2）调整表格行数和列数打开文件biaoge.htm。将鼠标指向目标单元格内，单击鼠标右键，在弹出的菜单中选择目标选项，如图所示。插入一行，单击“
46、表格”中的“插入行”选项，在插入点上方插入一行单元格。(要删除一行单元格，单击“表格”中的“删除行”选项。)插入一列，单击“表格”中的“插入列”选项，在插入点左侧插入一列单元格。(要删除一列单元格，单击“表格”中的“删除列”选项。)如果要插入多行多列，单击“表格”中的“插入行/列”选项，弹出“插入行/列”对话框，如图所示，输入行数或列数，选择插入行或列的位置，单击“确定”按钮。(3)调整表格宽度和高度的设置打开文件biaoge.htm。选取表格，在弹出的表格属性面板中的“行”或“宽”中选择宽度和高度的单位，输入数值，宽600像素，高300像素。如图所示。保存。按F12预览。如图所示。（4）设置
47、带边框的表格如果想让表格的边框具有立体感和个性，可以把表格边框加粗，设置喜爱的颜色。打开文件biaoge.htm。选取表格，在属性面板中设置填充、间距为0，边框为4，单击“边框颜色”按钮，在弹出的颜色面板中选择颜色“#990000”，如图所示。将鼠标指向边框点单击鼠标右键，如图所示，在弹出的菜单中单击“编辑标签”，弹出“标签编辑器”。在“标签编辑器”中单击“浏览器特定的”选项，在该项中设置边框的颜色#990000、亮色“#000099”和暗色“#333333”，设置完成，单击“确定”按钮。如图所示。保存。按F12预览。如图所示。（5）合并与拆分单元格打开文件biaoge.htm。单击一个目标单
48、元格，按住“Shift”键点击下一个目标单元格，选取4个相邻的单元格。如图所示。单击属性面板中的“合并单元格按钮”，如图所示，合并单元格。保存。按F12预览。如图所示。在需要合并的单元格上单击鼠标。单击属性面板的“拆分单元格”按钮，弹出“拆分单元格”对话框。如图所示。在对话框中设置列为4。单击“确定”按钮。保存。按F12预览。如图所示。6实训2.布局视图的建立和操作。（1）绘制布局表格和单元格建立一个新的页面buju.htm。在“布局”工具栏上单击“布局”按钮，如图所示，进入布局模式。单击“布局”工具栏上的“绘制布局表格”按钮，绘制布局表格。单击“布局”工具栏上的“绘制布局单元格”按钮，绘制布
49、局单元格。拖动鼠标在页面上绘制出所需要的表格，即可完成布局模式的创建。如图所示，布局表格为浅绿色，上面带有布局表格的标签和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏可以打开列标题菜单。绘制完布局表格和单元格后，如图所示，系统会自动生成表格，如图所示。（2）移动布局表格和单元格打开buju.htm，切换到布局模式下。选中需要移动的嵌入的布局表格，然后利用鼠标拖动到适当的位置，或者利用键盘上的方向键移动(每次移动1个像素的距离，如果按住“Shift键+方向键”，则每次移动10像素)。如下图所示。选中需要移动的布局单元格，然后利用鼠标拖动到适当的位置。如图所示。（3）重设布局表格和单元格的
50、大小打开buju.htm，切换到布局模式下。选中要调整的布局表格，出现控制点，用鼠标拖动控制点，调整布局表格的大小。如图所示。选中要调整的布局单元格，出现控制点，用鼠标拖动控制点，调整布局表格的大小。如图所示。（4）清除单元格高度当在单元格中插入内容后，发现单元格大小与插入内容不匹配，需要清除单元格高度的方法来使单元格与内容匹配。操作如下：打开buju.htm，切换到布局模式下，在某单元格内输入文本。如图所示。单击该单元格所在列的标题栏上的按钮打开列标题菜单。在菜单中选择“清除所有高度”选项，此时单元格的高度设置就被取消，单元格高度将随单元格的内容而变化。如图所示。7实训3.层的建立和操作层(
51、Layer)是一种HTML页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它HTML文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。（1）层的建立新建一个页面ceng.htm，在页面中选择插入点。单击【插入】【布局对象】【层】选项，在页面中显示一个层。如图所示。选中新建的层，通过周围的控制点拖动控制层的大小，如图所示，拖动左上角的“选择柄”或者层边框可以移动层。如图所示。再在页面中插入一个层。单击【窗口】【层】选项。弹出“层”对话框。如图所示。一个页面中可以画出很多的层，这些层都会列在层面板中。层有“隐藏”和“显示”的属性。改变层数就可以改变
52、层的重叠顺序。层面板上面还有防止层重叠。层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。如图所示。（2）层和表格之间转换由于层在网页布局上非常方便，所以，有些用户可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。DreamweaverMX2004可以使用层来创建自己的布局，然后将它们转换为表格。A层转换为表格新建页面ceng2.htm，插入3个层。如图所示。在转换为表格之前，请确保层没有重叠。单击【修改】【转换】【层到表格】选项。弹出“转换层为表格”对话框。如图所示。选择所需的选项。单击“确定”。转换后如图所示。B表格转换为层若要将表转换为层，单击【修改】【
53、转换】【表格到层】选项。弹出“转换表格为层”对话框。如图所示。选择所需的选项。单击“确定”。8实训4.框架的建立和操作框架是一种先进的Web技术，它比模板更灵活，可以方便创建使用相同布局的多个页面。本文介绍创建基于框架的网页步骤和对框架的修改。在制作该框架页面之前先做好3个页面。（1）创建框架单击【文件】【新建】，在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择合适的框架集。如图所示。单击【窗口】【框架】选项,打开框架面板。在框架面板中单击框架，选择一个框架。(如果要选择一个框架集，在框架面板中单击环绕框架集的边框)。如图所示。在框架面板中单击其中的一个框架页，然后打开属性面板
54、，单击“浏览文件”按钮。给它选择一个文件。如图2.111所示。选择在框架中打开的页面。之后重复上面的步骤为第2、3个框架设置相应的框架页。单击【文件】【保存全部】选项。因为前几步已经选定了框架文件，这里只出现保存框架集文件，为框架命名，保存。按F12预览。（2）修改框架A拆分框架在框架页面中，将插入点放在边框上，出现双向箭头。向上拖动边框，产生一个新的框架文件。在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。单击【文件】【保存全部】选项。要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住“Alt”键的同时拖动框架边框。B查看和设置框架集属性单击【窗口】
55、【框架】选项，打开框架面板。在框架面板中单击环绕框架集的边框，选中框架集。在属性面板上，选中框架区，然后修改框架集属性。使用类似的方法修改框架文件的属性。如图所示。C设置链接的目标框架在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。如图所示。“_blank”：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。“_parent”：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。“_self”：在当前框架中打开链接，同时替换该框架中的内容。“_top”：在当前浏览器窗口中打开链接的文档，同时替换所有框架。如果链接需要在框架页之外打开，
56、使用target=_top或target=_blank。（3）插入iframeiframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。单击“常用”工具栏的“标签选择器”。如图所示。在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。如图所示。在“标签编辑器-Iframe”对话框中，如图所示，根据面板提示操作。最基本的两项是“源”和“名称”。设置链接在某个iframe中打开。选中链接，在属性面板中的“目标”项，手工输入目标iframe的名称。如图所示。iframe透明。为了使iframe内容和网页背景相同，需要使iframe透明。在“
57、标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。如图所示。框架包含应用程序。在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“框架包含应用程序”。如图所示。Iframe的替代内容。在某些不支持iframe的浏览器中，iframe将不能显示。这时需要输入替代内容。在“标签编辑器-Iframe”对话框中，选择“替代内容”选项，在替代内容中输入代码或者文字。如图所示。9思考与练习思考与练习（1）什么是布局视图？什么是层？他们的作用是什么？（2）新建一个页面，创建5行6列的表格，并进行单元格合并、拆分操作。（3）在布局视图中绘制首页的布局。（4
58、）新建一个层，添加一定内容，然后把层转换为表格。网网页页编编辑辑网页布局 Dreamweaver MX 2004 提供了两种查看和操作表格的方式，一种是在“标准”模式中，表格显示为行和列的网格，另一种是在“布局”模式，允许用户在页面上绘制、调整以及移动布局表格或单元格。由于层可以定位在页面上的任意位置。所以使用层进行布局，可以作到对层中文档内容的精确定位。利用层可以非常灵活地放置内容，给了设计者很大的自己度。但是同时我们也必须要考虑它的兼容性问题。框架是一种常用的版面设计方式。框架可以将一个浏览器窗口划分为多个区域，而且每个区域都可以显示不同HTML文档。1.表格表格表格是用于在页面上显示表格
59、式数据以及对文本和图像进行布局的强有力的工具，很多设计人员还使用表格来对网页进行布局。表格由一行或多行组成，每行又由一个或多个单元格组成，虽然HTML代码中通常不明确指定列，但Dreamweaver MX 2004允许用户操作列、行和单元格。当用户选定了表格或表格中有插入点时，Dreamweaver MX 2004会显示表格宽度和每个单元列的列宽，提供了两种查看和操作表格的方式：在“标准”模式中，表格显示为行和列的网格；在“布局”模式下允许用户在将表格用作基础结构的同时再页面上绘制、调整表格的大小以及移动表格。2.布局视图布局视图布局视图是一种特殊的表格视图，它的作用在于用可视化的方法在页面上
60、绘制复杂的表格。它同传统绘制表格方法的差别在于，在布局视图中，我们可以在页面上绘制任意数量和大小的表格，而且在表格中的任意位置上也可以绘制任意数量和任意大小的单元格。要进入布局视图，可以在布局选项卡上，单击“布局”按钮。3.层层层是网页的一个区域，在一个网页中可以有多个层存在，它最大的魅力在于各个层可以重叠，并且可以设定层的属性和关系。使用层可以更灵活有效的制作页面，它可与表格相互转换。与表格的功能相比，层与表格相似，而且能够相互转化，但层在操作上上自由度更高。在Dreamweaver MX2004中，层能够实现对网页内容的精确定位，层中可以放置任何网页对象，包括文本、图像、表单、对象插件及其
61、他层等。4.框架框架框架的作用是把浏览器窗口划分为若干个区域，各区域可以分别显示不同的网页内容。框架由两个主要部分组成：框架集和单个框架。框架可以起到折分浏览器窗口的作用，它本身并不是网页，在使用框架建立并编辑网页时，一定要分别保存与名框架相链接的网页。框架与框架中显示的网页是链接关系，改变框架的结构并不会改变与框架链接的网页的内容。一般建立完成框架后，会分别设计与框架链接的网页，然后检测网页内容是否可以在框架中正确地显示。5实训实训1.表格的建立和操作。表格的建立和操作。（1）建立表格 建立一个新的空白页面biaoge.htm，在文件中选定插入点。单击【插入】【表格】选项，或单击“常用”工具
62、栏上的“插入表格”按钮，弹出“表格”对话框。如图所示。 在对话框中设置5行8列表格，宽度为600像素，边框粗细为1，单元格边距为1，单元格间距为0。如图所示。如果需要查看表格的属性，可以选中表格，弹出表格属性面板。如图所示。如果需要查看单元格的属性，可以选中单元格，弹出单元格属性面板。如图所示。单击“确定”按钮，保存，按F12预览。效果如图所示。（2）调整表格行数和列数打开文件biaoge.htm。将鼠标指向目标单元格内，单击鼠标右键，在弹出的菜单中选择目标选项，如图所示。插入一行，单击“表格”中的“插入行”选项，在插入点上方插入一行单元格。(要删除一行单元格，单击“表格”中的“删除行”选项。
63、)插入一列，单击“表格”中的“插入列”选项，在插入点左侧插入一列单元格。(要删除一列单元格，单击“表格”中的“删除列”选项。)如果要插入多行多列，单击“表格”中的“插入行/列”选项，弹出“插入行/列”对话框，如图所示，输入行数或列数，选择插入行或列的位置，单击“确定”按钮。(3)调整表格宽度和高度的设置打开文件biaoge.htm。选取表格，在弹出的表格属性面板中的“行”或“宽”中选择宽度和高度的单位，输入数值，宽600像素，高300像素。如图所示。保存。按F12预览。如图所示。（4）设置带边框的表格如果想让表格的边框具有立体感和个性，可以把表格边框加粗，设置喜爱的颜色。打开文件biaoge.
64、htm。选取表格，在属性面板中设置填充、间距为0，边框为4，单击“边框颜色”按钮，在弹出的颜色面板中选择颜色“#990000”，如图所示。将鼠标指向边框点单击鼠标右键，如图所示，在弹出的菜单中单击“编辑标签”，弹出“标签编辑器”。在“标签编辑器”中单击“浏览器特定的”选项，在该项中设置边框的颜色#990000、亮色“#000099”和暗色“#333333”，设置完成，单击“确定”按钮。如图所示。保存。按F12预览。如图所示。（5）合并与拆分单元格打开文件biaoge.htm。单击一个目标单元格，按住“Shift”键点击下一个目标单元格，选取4个相邻的单元格。如图所示。单击属性面板中的“合并单元
65、格按钮”，如图所示，合并单元格。保存。按F12预览。如图所示。在需要合并的单元格上单击鼠标。单击属性面板的“拆分单元格”按钮，弹出“拆分单元格”对话框。如图所示。在对话框中设置列为4。单击“确定”按钮。保存。按F12预览。如图所示。6实训2.布局视图的建立和操作。（1）绘制布局表格和单元格建立一个新的页面buju.htm。在“布局”工具栏上单击“布局”按钮，如图所示，进入布局模式。单击“布局”工具栏上的“绘制布局表格”按钮，绘制布局表格。单击“布局”工具栏上的“绘制布局单元格”按钮，绘制布局单元格。拖动鼠标在页面上绘制出所需要的表格，即可完成布局模式的创建。如图所示，布局表格为浅绿色，上面带有
66、布局表格的标签和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏可以打开列标题菜单。绘制完布局表格和单元格后，如图所示，系统会自动生成表格，如图所示。（2）移动布局表格和单元格打开buju.htm，切换到布局模式下。选中需要移动的嵌入的布局表格，然后利用鼠标拖动到适当的位置，或者利用键盘上的方向键移动(每次移动1个像素的距离，如果按住“Shift键+方向键”，则每次移动10像素)。如下图所示。选中需要移动的布局单元格，然后利用鼠标拖动到适当的位置。如图所示。（3）重设布局表格和单元格的大小打开buju.htm，切换到布局模式下。选中要调整的布局表格，出现控制点，用鼠标拖动控制点，调整布局表
67、格的大小。如图所示。选中要调整的布局单元格，出现控制点，用鼠标拖动控制点，调整布局表格的大小。如图所示。（4）清除单元格高度当在单元格中插入内容后，发现单元格大小与插入内容不匹配，需要清除单元格高度的方法来使单元格与内容匹配。操作如下：打开buju.htm，切换到布局模式下，在某单元格内输入文本。如图所示。单击该单元格所在列的标题栏上的按钮打开列标题菜单。在菜单中选择“清除所有高度”选项，此时单元格的高度设置就被取消，单元格高度将随单元格的内容而变化。如图所示。7实训3.层的建立和操作层(Layer)是一种HTML页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它HTML文
68、档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。（1）层的建立新建一个页面ceng.htm，在页面中选择插入点。单击【插入】【布局对象】【层】选项，在页面中显示一个层。如图所示。选中新建的层，通过周围的控制点拖动控制层的大小，如图所示，拖动左上角的“选择柄”或者层边框可以移动层。如图所示。再在页面中插入一个层。单击【窗口】【层】选项。弹出“层”对话框。如图所示。一个页面中可以画出很多的层，这些层都会列在层面板中。层有“隐藏”和“显示”的属性。改变层数就可以改变层的重叠顺序。层面板上面还有防止层重叠。层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。如图所示
69、。（2）层和表格之间转换由于层在网页布局上非常方便，所以，有些用户可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。DreamweaverMX2004可以使用层来创建自己的布局，然后将它们转换为表格。A层转换为表格新建页面ceng2.htm，插入3个层。如图所示。在转换为表格之前，请确保层没有重叠。单击【修改】【转换】【层到表格】选项。弹出“转换层为表格”对话框。如图所示。选择所需的选项。单击“确定”。转换后如图所示。B表格转换为层若要将表转换为层，单击【修改】【转换】【表格到层】选项。弹出“转换表格为层”对话框。如图所示。选择所需的选项。单击“确定”。8实训4.框架
70、的建立和操作框架是一种先进的Web技术，它比模板更灵活，可以方便创建使用相同布局的多个页面。本文介绍创建基于框架的网页步骤和对框架的修改。在制作该框架页面之前先做好3个页面。（1）创建框架单击【文件】【新建】，在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择合适的框架集。如图所示。单击【窗口】【框架】选项,打开框架面板。在框架面板中单击框架，选择一个框架。(如果要选择一个框架集，在框架面板中单击环绕框架集的边框)。如图所示。在框架面板中单击其中的一个框架页，然后打开属性面板，单击“浏览文件”按钮。给它选择一个文件。如图2.111所示。选择在框架中打开的页面。之后重复上面的步骤为
71、第2、3个框架设置相应的框架页。单击【文件】【保存全部】选项。因为前几步已经选定了框架文件，这里只出现保存框架集文件，为框架命名，保存。按F12预览。（2）修改框架A拆分框架在框架页面中，将插入点放在边框上，出现双向箭头。向上拖动边框，产生一个新的框架文件。在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。单击【文件】【保存全部】选项。要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住“Alt”键的同时拖动框架边框。B查看和设置框架集属性单击【窗口】【框架】选项，打开框架面板。在框架面板中单击环绕框架集的边框，选中框架集。在属性面板上，选中框架区，然后修
72、改框架集属性。使用类似的方法修改框架文件的属性。如图所示。C设置链接的目标框架在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。如图所示。“_blank”：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。“_parent”：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。“_self”：在当前框架中打开链接，同时替换该框架中的内容。“_top”：在当前浏览器窗口中打开链接的文档，同时替换所有框架。如果链接需要在框架页之外打开，使用target=_top或target=_blank。（3）插入iframeiframe也称作嵌入式框架
73、，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。单击“常用”工具栏的“标签选择器”。如图所示。在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。如图所示。在“标签编辑器-Iframe”对话框中，如图所示，根据面板提示操作。最基本的两项是“源”和“名称”。设置链接在某个iframe中打开。选中链接，在属性面板中的“目标”项，手工输入目标iframe的名称。如图所示。iframe透明。为了使iframe内容和网页背景相同，需要使iframe透明。在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。如图所示。框架包含应用程
74、序。在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“框架包含应用程序”。如图所示。Iframe的替代内容。在某些不支持iframe的浏览器中，iframe将不能显示。这时需要输入替代内容。在“标签编辑器-Iframe”对话框中，选择“替代内容”选项，在替代内容中输入代码或者文字。如图所示。9思考与练习思考与练习（1）什么是布局视图？什么是层？他们的作用是什么？（2）新建一个页面，创建5行6列的表格，并进行单元格合并、拆分操作。（3）在布局视图中绘制首页的布局。（4）新建一个层，添加一定内容，然后把层转换为表格。网网页页编编辑辑使用CSS样式CSS是一种制作网页的新技术
75、，已经成为网页设计中必不可少的工具之一。目前，InternetExplorer4.0、NetscapeNavigator4.0或更高版本的浏览器都能正确的显示带有CSS样式的网页。使用CSS能够简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大的减少了无谓的重复劳动。1.CSS样式定义概念CSS是CascadingStyleSheets(层叠样式表单)的简称。它允许用户在HTML文档中加入样式(如字体类型、颜色、大小等等)。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中
76、定义，甚至作为外部样式文件供HTML调用。Dreamweaver是最早使CSS的应用方便于使用者的网页工具之一。通过直观的界面设计者可以定义超过70种不同的CSS设置，这些设置可以影响到网页中的任何元素，从文本的间距到类似于多媒体的转换。用户可以随时创建自己的样式单，然后在任何时候连接调用它。2.CSS样式3种类型1)HTML标签样式该样式可重新定义某些特殊标签的格式。例如H1，在创建完成H1标签的样式后，所有H1标签的文本都将立即改变。2)自定义CSS样式除了在字符和段落样式之间没有区别之外，该样式和用户在字处理程序中使用的样式没有什么两样。用户可以对任何文本块或文本区域应用自定义样式。如果
77、样式被应用于文本块，例如整个段落或无序列表，则文本块的标签中将添加CLASS属性，例如PCLASS=myStyle或ULCLASS=myStyle。如果样式被应用于文本区域，则选定文本的周围将插入包含CLASS属性的SPAN标签。3)级联样式表选择器样式该样式可重新定义某些特殊的标签组合的格式，例如对表格单元格应用H2标题格式的TDH2组合。此外，他还可以为所有包含指定ID属性的标签重新定义格式。3.CSS的引用方式1)外部文件方式外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。在DreamweaverMX2004下创建CSS文件比较简单。可以单击菜单栏【
78、文件】【新建】命令，在弹出的“新建文档”对话框中选择类别为“CSS样式表”。在DreamweaverMX2004在引用方式更加简单，根本不需要输入代码。单击“CSS样式”面板下方的“附加样式表”按钮，这时，打开一个对话框，单击对话框上的“浏览”按钮，选择要链接的CSS文件，在“添加为”选项区选择“链接”，单击“确定”按钮，即可链接外部CSS文件。此时链接的外部CSS文件会出现在CSS样式面板中。应用CSS文件的一个最大好处就是，用户可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置：另外，当用户遇上改版或作某些重大调整要对风格进行修改
79、时，可直接修改这个CSS文件，非常方便。如果想建立一个网站，这方面不可忽视。2)内部文档头方式这种方式与外部文件的区别在于它是将风格直接定义在文档之间，而不是形成文件。这种风格定义产生作用的范围也只局限于文档本身，即为样式定义在文档内部。这种方式的方根用处是，可针对具体页面进行具体调整。这两种方式并不相排斥，而是相互结合，就像我们在index.htm页面中定义了文档内部CSS样式，也链接了外部CSS文件。3)直接插入式直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如想给一个图像添加模糊效果，则可书写如下：。这种方式主要用于对具体的标志做具体的调整，其作用的范
80、围只限于本标签。综上所述，这几种方式各有用途，在统一整个站点风格上，用第一种方式；整个页面风格统一上，用第二种方式；而在页内某个标签的具体微调上，第三种方式也有用武之地，所以各有千秋。前两种的目的在于统一风格一，减少繁琐的标志属性设置。4.CSS样式定义的选项说明创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握属性设置非常重要。在DreamweaverMX2004的CSS样式里包含了W3C规范定义的所有CSS的属性，把这些属性分为：类型、背景、区块、方框、边框、列表、定位、扩展等八个部分，如图所示。DreamweaverMX2004实现CSS属性设置功能是完全可视化的，无
81、需编写代码。下面分别详细讲解。1)定义CSS“类型”属性使用“CSS样式定义”对话框中的“类型”类别可以定义CSS样式的基本字体和类型设置。在“CSS样式定义”对话框中，选择“类型”，如图所示，然后设置所需的样式属性。2)定义CSS样式“背景”属性使用“CSS样式定义”对话框的“背景”类别可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。在“CSS样式定义”对话框中，选择“背景”，如图所示，然后设置所需的样式属性。3)定义CSS样式“区块”属性使用“CSS样式
82、定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。定义区块设置：在“CSS样式定义”对话框中，选择“区块”，如图所示，然后设置所需的样式属性。4)定义CSS样式“方框”属性使用“CSS样式定义”对话框的方框(又称盒子)类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。定义元素在页面上的放置方式：在“CSS样式定义”对话框中，选择“方框”，如图所示，然后设置所需的样式属性。5)定义CSS样式“边框”属性使用“CSS样式定义”对话框的“边框”类别可以定义元素周围的边框的
83、设置(如宽度、颜色和样式)。设置边框样式：在“CSS样式定义”对话框中，选择“边框”，如图所示，然后设置所需的样式属性。6)定义CSS样式“列表”属性使用“CSS样式定义”对话框的“列表”类别为列表标签定义列表设置(如项目符号大小和类型)。定义列表样式：在“CSS样式定义”对话框中，选择“列表”，如图所示，然后选择所需的样式属性。7)定义CSS样式“定位”属性“定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。设置层定位属性：在“CSS样式定义”对话框中，选择“定位”，如图所示，然后设置所需的样式属性。8)定义CSS样式“扩展”属性“扩展”样式属性包括过滤器、分
84、页和光标选项，它们中的大部分效果仅受InternetExplorer4.0和更高版本的支持。指定扩展属性：在“CSS样式定义”对话框中，选择“扩展”，如图所示，然后设置所需的样式属性。5实训1.定义一个新的CSS样式将插入点放在文档中。单击【窗口】【CSS样式】选项，弹出“CSS样式”面板，单击面板右下角区域中的“新建CSS样式”按钮。如图所示。或者在文本属性检查器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建”。或者右键单击“窗口”“标签检查器”“相关CSS”选项卡，从上下文菜单中选择“新建规则”。或者单击【文本】【新建】【CSS样式表】选项。如图所示。定义要创建
85、的CSS样式的类型。若要创建可作为class属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式(Class)”，然后在“名称”文本框中输入样式名称。(类名称必须以句点开头，并且可以包含任何字母和数字组合，例如.jcss。如果没有输入开头的句点，DreamweaverMX2004将自动输入)。若要重定义特定HTML标签的默认格式，请选择“重定义标签”，然后在“标签”字段中输入一个HTML标签，或从下拉列表中选择一个标签。若要为具体某个标签组合或所有包含特定Id属性的标签定义格式，请选择“使用CSS选择器”，然后在“选择器”文本框中输入一个或多个HTML标签，或从下拉列表中选择一个标签
86、。下拉列表中提供的选择器(称作伪类选择器)包括a:active、a:hover、a:link和a:visited。选择定义样式的位置。若要创建外部样式表，请选择“新建样式表文件”。若要在当前文档中嵌入样式，请选择“仅对该文档”。单击“确定”。完成定义。6实训2.利用CSS样式制作一个带阴影的文字效果。建立站点myweb，新建空白网页文件yywz.htm。单击【窗口】【CSS样式】选项，弹出“CSS样式”面板，单击面板右下角区域中的“新建CSS样式”按钮，打开“新建CSS样式”对话框。并选中“选择器类型”单选按钮组中的“类(可应用于任何标签)”单选按钮，在名称列表框中输入“.shadow”，如图
87、所示。单击“确定”按钮，在弹出的“.shadow的CSS样式定义”对话框中设定参数。选择“分类”列表中的“类型”选项，设定“字体”为“隶书”，“字号”为“48”，“颜色”为“#66CCCC”。如图所示。选择“分类”列表中的“扩展”选项，在“光标”下拉列表中选择“hand”,在“过滤器”下拉列表中选择“shadow(color=?,direction=?)”,将过滤器的参数设为“shadow(color=#000000,direction=240)”。如图所示。参数设置完毕，单击“确定”按钮。在文件中输入“一些带阴影的文字”。保存。按F12预览网页。7思考与练习思考与练习（1）什么是CSS样式表
88、？他有几种类型？（2）CSS的引用方式有哪些？（3）CSS样式表定义的“扩展”功能中的过滤器有哪些？（4）新建一张网页，创建一个CSS样式，要求表格内所有文字为12号楷体。网网页页编编辑辑插入多媒体元素在MacromediaDreamweaverMX2004中，用户可以迅速、方便地向Web站点添加声音和影片媒体；可以并入和编辑多媒体文件和对象，例如MacromediaFlash和Shockwave影片、Javaapplets、QuickTime、ActiveX和音频文件等；可以将“设计备注”附加到这些对象上，以便于小组成员之间进行交流；还可以添加DreamweaverMX2004自身内置的Fl
89、ash按钮和文本对象等。1.Flash元素在网页里Flash元素能给网页添加不少动感。用户可以把3种Flash元素添加到DreamweaverMX2004的“文档”窗口中，即Flash动画、Flash按钮和Flash文本。如果用户没有制作好的Flash动画，那么也可以只在DreamweaverMX2004中添加Flash文件和Flash文本。在使用DreamweaverMX2004提供的Flash命令之前，应该先了解一下Flash文件的3种不同类型。1)Flash源文件格式Flash源文件扩展名为“.fla”，是在Flash程序中创建的只能在Flash应用程序中打开的文件形式，此类文件格式不能
90、在DreamweaverMX2004或浏览器中打开。2)Flash影片文件Flash影片文件(扩展名为“.swf”)是Flash源文件“.fla”格式的压缩版本，已进行了优化，以便于在Web上观看。这种格式的文件可以在浏览器中播放，并且可以在DreamweaverMX2004中进行预览，但不能在Flash应用程序中编辑。3)Flash模板文件用户可以通过Flash模板文件(扩展名为“.swt”)修改和替换Flash影片(扩展名为“.swf”)文件中的信息这些文件用于Flash按钮对象中，允许用户用自己的文本或链接修改模板，以便创建要插入到文档中的自定义Flash影片。2.Shockwave电影
91、电影Shockwave是一个很普及的浏览器的插件，它能将Macromedia公司的软件Director、Authorware和Freehand等制作的动画效果直接输出到网上。由于Shockwave作为Web上用于交互式多媒体的Macromedia标准是一种压缩格式，这使得在MacromediaDirector等软件中创建的多媒体文件能够被快速下载，而且可以在大多数常用的浏览器中进行播放。3.视频随着网络带宽的越来越大，以往因为占用带宽而很少应用的网络视频服务流行起来。在过去的几年里，各大公司争相蚕食六媒体市场，出台流媒体解决方案。目前，几乎占据整个流媒体市场的，主要是RealMedia、Qui
92、ckTime和WindowsMedia等三大技术。用户可以通过不同方式和使用不同格式将视频添加到页面，视频可被下载给用户，或者可以对视频进行流式处理，一边在下载它的同时播放它。4.音频数字音频虽不像数字视频文件那样庞大，但是它是声波的数字化表示，即使将它压缩后，仍然会使网页下载速度变慢。应该选择什么音频格式呢？这是由多种因素决定的，包括听众的喜好、可用的带宽以及使用音频的目的。除了比较常用的格式外，还有许多不同的音频和视频文件格式可在Web上使用。尽管大多数的网页浏览器都可以播放AIFF、WAV等格式的标准数字音频文件，但是因为这些格式的文件没有经过任何形式的压缩，所以并不适合在Interne
93、t上发布。现在Internet上使用的都是经过高度压缩的流媒体。既要保证音频的质量，又要同时兼顾带宽，尽量满足每一个浏览者。5实训1插入Flash元素。1）插入Flash动画在DreamweaverMX2004的“文档”窗口中可以直接插入Flash动画。将Flash动画插入【文档2窗口中时，DreamweaverMX2004同时object标记和embed标记以在所有的浏览器中都获得最佳的效果。当用户在属性面板中对动画进行更时，DreamweaverMX2004会将采用的各项属性映射为object和embed标记的适当参数。在DreamweaverMX2004的“文档”窗口中插入Flash动画
94、的操作步骤如下：新建一个网页文件flash.htm，将插入点放置在要插入动画的位置。单击【插入】【常用】【媒体】按钮，单击它旁边的下拉箭头按钮，弹出选择项菜单。如图所示。从中选择“FLASH”图标，弹出“选择文件”对话框。如图所示。在该对话框中选择相应的FLASH动画文件，单击“确定”按钮完成插入操作。如图所示。保存。按F12，可以预览动画，其效果如图所示。在插入FLASH动画时设置FLASH动画属性，如图所示。6实训实训2插入插入Shockwave影片影片在DreamweaverMX2004的文件中插入Shockwave影片的操作步骤如下：新建一个网页文件sk.htm，将插入点放置在要插入按
95、钮的位置。单击【插入】【常用】【媒体】按钮，单击它旁边的下拉箭头按钮，弹出选择项菜单。从中选择“Shockwave”图标，弹出“选择文件”对话框。选择Shockwave影片文件，然后单击“确定”按钮即可完成操作。保存。按F12预览。7实训3插入视频用户可以通过不同方式和使用不同格式将视频添加到Web页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。1）供用户下载的视频剪辑若要在页面中包含一个可供用户下载的简短的视频剪辑，操作步骤如下：将剪辑放入站点文件夹。这些剪辑通常采用AVI或MPEG文件格式。链接到剪辑，或将其嵌入到页面中。若要链接到剪辑，请输入链接文本，如“剪
96、辑下载”，选择文本，然后在属性检查器中单击文件夹图标。浏览到视频文件然后选择它，建立链接文字。2）插入插件内容将插件内容插入到页面中，页面中可包含将运行在用户浏览器的插件中的内容。要插入NetscapeNavigator插件内容，请执行以下操作：在“文档”窗口的“设计”视图中，将插入点旋转在要插入内容的地方，在“常用”工具栏中，单击“媒体”按钮，然后单击“插件”图标。或者单击【插入】【媒体】【插件】选项。在显示的对话框中，为NetscapeNavigator插件选择内容文件。可以在页面中插入ActiveX控件。ActiveX控件(以前称作OLE控件)可以充当浏览器插件的可重复使用的组件，有些像
97、微型的应用程序。ActiveX控件在Windows系统上的InternetExplorer中运行，但不在Macintosh系统上或NetscapeNavigator中运行。Dreamweaver中的ActiveX对象为访问者的浏览器中的ActiveX控件提供属性和参数。3）插入ActiveX控件内容要插入ActiveX控件内容，请执行以下操作：在“文档”窗口中，将插入点放置在要插入内容的地方，然后单击“常用”工具栏中的“媒体”按钮上的下拉箭头，然后选择“ActiveX”图标。或者单击【插入】【媒体】【ActiveX】选项。出现的图标标记出InternetExplorer中ActiveX控件将在
98、页面上出现的位置。4）插入Javaapplet可以使用Dreamweaver将Javaapplet插入HTML文档中。Java是一种编程语言，通过它可以开发可嵌入Web页中的小型应用程序(applet)。要插入Javaapplet，请执行以下操作：在“文档”窗口中，将插入点放在要插入applet的地方，然后单击“常用”工具栏中的【媒体】按钮上的下拉箭头，然后选择“Applet”图标。或者单击【插入】【媒体】【Applet】命令。在出现的对话框中，选择包含Javaapplet的文件。8实训4添加音频1）链接到音频文件链接到音频文件是将声音添加到Web页面的一种简单而有效的方法。这种集成声音文件的
99、方法可以使访问者能够选择他们是否要收听该文件，并且使文件可用于最广范围的观众。若要创建指向某一音频文件的链接，请执行以下操作：选择要用作指向音频文件的链接的文本或图像。在属性检查器中，单击文件夹图标以浏览到音频文件，或者在“链接”文本框中键入文件的路径和名称。2）嵌入音频嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，可以嵌入声音文件。若要嵌入音频文件，请执行以下操作：在“设计”视图中，将插入点放置在要嵌入文件的地方，然后单击“常用”工具栏中的“
100、媒体”按钮，然后选择“插件”图标。或者单击【插入】【媒体】【插件】选项。在出现的对话框中，选择所需的音频文件。9思考与练习思考与练习（1）新建一个网页，插入flash动画、按钮等。（2）新建一个网页，设置背景音乐。（3）新建一个网页，嵌入一个视频文件。网网页页编编辑辑插入多媒体元素在MacromediaDreamweaverMX2004中，用户可以迅速、方便地向Web站点添加声音和影片媒体；可以并入和编辑多媒体文件和对象，例如MacromediaFlash和Shockwave影片、Javaapplets、QuickTime、ActiveX和音频文件等；可以将“设计备注”附加到这些对象上，以便于
101、小组成员之间进行交流；还可以添加DreamweaverMX2004自身内置的Flash按钮和文本对象等。1.Flash元素在网页里Flash元素能给网页添加不少动感。用户可以把3种Flash元素添加到DreamweaverMX2004的“文档”窗口中，即Flash动画、Flash按钮和Flash文本。如果用户没有制作好的Flash动画，那么也可以只在DreamweaverMX2004中添加Flash文件和Flash文本。在使用DreamweaverMX2004提供的Flash命令之前，应该先了解一下Flash文件的3种不同类型。1)Flash源文件格式Flash源文件扩展名为“.fla”，是在
102、Flash程序中创建的只能在Flash应用程序中打开的文件形式，此类文件格式不能在DreamweaverMX2004或浏览器中打开。2)Flash影片文件Flash影片文件(扩展名为“.swf”)是Flash源文件“.fla”格式的压缩版本，已进行了优化，以便于在Web上观看。这种格式的文件可以在浏览器中播放，并且可以在DreamweaverMX2004中进行预览，但不能在Flash应用程序中编辑。3)Flash模板文件用户可以通过Flash模板文件(扩展名为“.swt”)修改和替换Flash影片(扩展名为“.swf”)文件中的信息这些文件用于Flash按钮对象中，允许用户用自己的文本或链接修
103、改模板，以便创建要插入到文档中的自定义Flash影片。2.Shockwave电影电影Shockwave是一个很普及的浏览器的插件，它能将Macromedia公司的软件Director、Authorware和Freehand等制作的动画效果直接输出到网上。由于Shockwave作为Web上用于交互式多媒体的Macromedia标准是一种压缩格式，这使得在MacromediaDirector等软件中创建的多媒体文件能够被快速下载，而且可以在大多数常用的浏览器中进行播放。3.视频随着网络带宽的越来越大，以往因为占用带宽而很少应用的网络视频服务流行起来。在过去的几年里，各大公司争相蚕食六媒体市场，出台
104、流媒体解决方案。目前，几乎占据整个流媒体市场的，主要是RealMedia、QuickTime和WindowsMedia等三大技术。用户可以通过不同方式和使用不同格式将视频添加到页面，视频可被下载给用户，或者可以对视频进行流式处理，一边在下载它的同时播放它。4.音频数字音频虽不像数字视频文件那样庞大，但是它是声波的数字化表示，即使将它压缩后，仍然会使网页下载速度变慢。应该选择什么音频格式呢？这是由多种因素决定的，包括听众的喜好、可用的带宽以及使用音频的目的。除了比较常用的格式外，还有许多不同的音频和视频文件格式可在Web上使用。尽管大多数的网页浏览器都可以播放AIFF、WAV等格式的标准数字音频
105、文件，但是因为这些格式的文件没有经过任何形式的压缩，所以并不适合在Internet上发布。现在Internet上使用的都是经过高度压缩的流媒体。既要保证音频的质量，又要同时兼顾带宽，尽量满足每一个浏览者。5实训1插入Flash元素。1）插入Flash动画在DreamweaverMX2004的“文档”窗口中可以直接插入Flash动画。将Flash动画插入【文档2窗口中时，DreamweaverMX2004同时object标记和embed标记以在所有的浏览器中都获得最佳的效果。当用户在属性面板中对动画进行更时，DreamweaverMX2004会将采用的各项属性映射为object和embed标记的
106、适当参数。在DreamweaverMX2004的“文档”窗口中插入Flash动画的操作步骤如下：新建一个网页文件flash.htm，将插入点放置在要插入动画的位置。单击【插入】【常用】【媒体】按钮，单击它旁边的下拉箭头按钮，弹出选择项菜单。如图所示。从中选择“FLASH”图标，弹出“选择文件”对话框。如图所示。在该对话框中选择相应的FLASH动画文件，单击“确定”按钮完成插入操作。如图所示。保存。按F12，可以预览动画，其效果如图所示。在插入FLASH动画时设置FLASH动画属性，如图所示。6实训实训2插入插入Shockwave影片影片在DreamweaverMX2004的文件中插入Shock
107、wave影片的操作步骤如下：新建一个网页文件sk.htm，将插入点放置在要插入按钮的位置。单击【插入】【常用】【媒体】按钮，单击它旁边的下拉箭头按钮，弹出选择项菜单。从中选择“Shockwave”图标，弹出“选择文件”对话框。选择Shockwave影片文件，然后单击“确定”按钮即可完成操作。保存。按F12预览。7实训3插入视频用户可以通过不同方式和使用不同格式将视频添加到Web页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。1）供用户下载的视频剪辑若要在页面中包含一个可供用户下载的简短的视频剪辑，操作步骤如下：将剪辑放入站点文件夹。这些剪辑通常采用AVI或MPEG
108、文件格式。链接到剪辑，或将其嵌入到页面中。若要链接到剪辑，请输入链接文本，如“剪辑下载”，选择文本，然后在属性检查器中单击文件夹图标。浏览到视频文件然后选择它，建立链接文字。2）插入插件内容将插件内容插入到页面中，页面中可包含将运行在用户浏览器的插件中的内容。要插入NetscapeNavigator插件内容，请执行以下操作：在“文档”窗口的“设计”视图中，将插入点旋转在要插入内容的地方，在“常用”工具栏中，单击“媒体”按钮，然后单击“插件”图标。或者单击【插入】【媒体】【插件】选项。在显示的对话框中，为NetscapeNavigator插件选择内容文件。可以在页面中插入ActiveX控件。Ac
109、tiveX控件(以前称作OLE控件)可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。ActiveX控件在Windows系统上的InternetExplorer中运行，但不在Macintosh系统上或NetscapeNavigator中运行。Dreamweaver中的ActiveX对象为访问者的浏览器中的ActiveX控件提供属性和参数。3）插入ActiveX控件内容要插入ActiveX控件内容，请执行以下操作：在“文档”窗口中，将插入点放置在要插入内容的地方，然后单击“常用”工具栏中的“媒体”按钮上的下拉箭头，然后选择“ActiveX”图标。或者单击【插入】【媒体】【ActiveX
110、】选项。出现的图标标记出InternetExplorer中ActiveX控件将在页面上出现的位置。4）插入Javaapplet可以使用Dreamweaver将Javaapplet插入HTML文档中。Java是一种编程语言，通过它可以开发可嵌入Web页中的小型应用程序(applet)。要插入Javaapplet，请执行以下操作：在“文档”窗口中，将插入点放在要插入applet的地方，然后单击“常用”工具栏中的【媒体】按钮上的下拉箭头，然后选择“Applet”图标。或者单击【插入】【媒体】【Applet】命令。在出现的对话框中，选择包含Javaapplet的文件。8实训4添加音频1）链接到音频文件
111、链接到音频文件是将声音添加到Web页面的一种简单而有效的方法。这种集成声音文件的方法可以使访问者能够选择他们是否要收听该文件，并且使文件可用于最广范围的观众。若要创建指向某一音频文件的链接，请执行以下操作：选择要用作指向音频文件的链接的文本或图像。在属性检查器中，单击文件夹图标以浏览到音频文件，或者在“链接”文本框中键入文件的路径和名称。2）嵌入音频嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，可以嵌入声音文件。若要嵌入音频文件，请执行以下操作
112、：在“设计”视图中，将插入点放置在要嵌入文件的地方，然后单击“常用”工具栏中的“媒体”按钮，然后选择“插件”图标。或者单击【插入】【媒体】【插件】选项。在出现的对话框中，选择所需的音频文件。9思考与练习思考与练习（1）新建一个网页，插入flash动画、按钮等。（2）新建一个网页，设置背景音乐。（3）新建一个网页，嵌入一个视频文件。网网页页编编辑辑插入表单使用表单可以制作简单的交互式页面，收集来自用户的信息。表单是网站管理者与浏览者之间沟通的桥梁。收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”。表单常用于制作
113、调查表、订单、用户注册表和搜索界面等。1.表单的交互过程表单有两个重要组成部分，一部分是页面中进行描述的HTML代码；另一部分是服务器端应用程序或客户端脚本，如CGI、ASP、C等，用于分析处理用户在表单中输入的信息。通过表单收集到的用户反馈信息，通常是一些用分隔符(如逗号、分号等)分隔的文字资料。这些资料可以导人到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。浏览器处理表单的过程一般是这样的：用户在表单中输人数据，然后提交表单，浏览器根据表单体中的设置处理用户输入的数据。若表单指定通过服务器端的脚本程序进行处理，则该程序处理完毕后将结果反馈给浏览器(即用户看到的反馈结果)；若
114、表单指定通过客户端的脚本程序处理，则处理完毕后也会将结果反馈给用户。2.表单元素一个表单有两个基本组成部分：表单域：包含了文本字段、隐藏域、文本区域、复选框、单选按钮、弹出菜单/列表等。表单对象：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。表单工具栏如图所示。1)表单域标签按钮单击该按钮可以在“文档”窗口中插入表单。此时DreamweaverMX2004会在html源代码中插入Form的开始和结束标签。其他的表单对象，如文本域和单选按钮等都要被插入到两个Form标签之间，以便于所有的浏览器都能正确地处理
115、表单中的数据。2)文本字段标签按钮单击该按钮可以在表单中插入文本域。文本域可以接受各种数字和字母项，也可以输入“*”用于密码保护。文本域对象可以接受单行和多行文字。3)隐藏域标签按钮单击该按钮可以在表单中插入一个存储用户数据的域。使用隐藏域可以存储用户输入的信息，以便该用户下一次访问站点时可以再一次使用这些数据。4)文本区域标签按钮单击该按钮可以在表单中插入文本区域，它可以接受多行文字。5)复选框标签按钮单击该按钮可以在表单中插入复选框。复选框允许用户在一组选择中有多个选项。6)单选按钮标签按钮单击该按钮可以在表单中插入单选按钮。单选按钮代表互斥的选择。当用户选择一组单选按钮中的一项时，就会取
116、消对该组中其他单选按钮的选择。7)单选按钮组标签按钮单击该按钮可以在表单中插入单选桉钮组。使用该按钮将在表单中插入一组共享名称的单选按钮集合。8)列表/菜单标签按钮单击该按钮可以在表单中插入列表/菜单。用户可以在列表中添加浏览者可以选择的选项，以方便浏览者的操作。“列表”选项在滚动列表中显示选项值，并且可以让浏览者选择多个选项。“菜单”选项在滚动列表中显示选项值，但是只能让浏览者有一项可以选择。9)跳转菜单标签按钮单击该按钮可以在表单中插入可导航的跳转菜单。在跳转菜单中，每个选项都会链接到不同的文档或文件。10)图像域标签按钮单击该按钮可以在表单中插入图像域。利用图像域可以用图像替换“提交”按
117、钮，以使按钮图像化。11)文字域字段按钮单击该按钮可以在表单中插入“文本域”和“浏览”按钮，使用该按钮可以让浏览者浏览自己硬盘上的文件，并将这些文件作为表单的数据上传到服务器上。12)按钮标签按钮单击该按钮可以在表单中添加按钮。单击添加的按钮后可以执行相应的任务。13)标签按钮该标签提供了一种在结构上将域的文本标签和该域关联起来的方法。14)字段集标签按钮该标签是表单元素逻辑组的容器标签。3实训1.建立表单用户可以通过多种方法创建表单，并利用其属性面板设定其属性。新建空白页面biaodan.htm。将光标置于需要插入表单的位置。单击【插入】【表单】【表单】选项，表单即插入当前网页文件中。如图所
118、示。选中表单，打开属性面板。为其设定属性。如图所示。属性设置完毕，保存。按F12预览网页。4实训2.表单元素的添加。表单元素有很多，常见的有：文本字段、文本区域、复选框、单选按钮、标签、列表/菜单。下面分别介绍它们的添加方法。1）插入文本字段文本字段通常包括以下3种类型：单行文本域：设置单行文本，如姓名、地址等。多行文本域：设置多行文本。密码域：设置特殊类型的文本字段，在密码域中输入文本时，所输入的文本被替换为“*”或项目符号，以隐藏文本。首先新建网页文件wbzd.htm，插入表单，在表单中适当的位置单击，设置插入点。单击【插入】【表单】【文本字段】选项，在文档中出现如图所示的文本字段。单击选
119、中文本字段，利用属性面板设置其属性，如图所示。在“文本域”文本框中输入文本字段的名称“danh”，并指定类型为“单行”。保存。按F12预览。2）插入文本区域首先新建网页文件wby.htm，插入表单，在表单中适当的位置单击，设置插入点。单击【插入】【表单】【文本区域】选项，在文档中出现如图所示的文本区域。单击选中文本区域，利用属性面板设置其属性，如图所示。在属性面板的“文本域”文本框中指定文本字段的名称为“wbqy”。保存。按F12预览。3）插入复选框复选框表单对象设置预定义的选择对象，用户可单击复选框进行选择。复选框是对每个单独响应进行“关闭”和“打开”状态切换的命令。新建一个页面fxk.ht
120、m，插入表单，将插入点放在表单区域内，输入文字“您的兴趣”。单击【插入】【表单】【复选框】选项或单击“插入”工具栏的“表单”类别工具面板的“复选框”按钮，在其后输入“旅游”。选中“复选框”，打开属性面板，“复选框名称”为“ly”,选定值为“旅游”，“初始状态”设置为“已勾选”状态，其余参数默认设置。如图所示。重复，插入复选框，依次输入“看书”、“游戏”、“散步”、“购物”。“复选框名称”分别为“ks”、“yx”、“sb”、“gw”，选定值依次为“看书”、“游戏”、“散步”、“购物”，“初始状态”设置为“未勾选”状态。如图所示。保存。按F12预览。效果如图所示。4）插入单选按钮如果要从一组选项中
121、只能选择一个选项，可以使用单选按钮。单选按钮通常成组的使用。一个组中所有的单选按钮必须具备相同的名称，而且必须包含不同的值。新建一个页面dxan.htm，插入表单，将插入点放在表单区域内，输入文字“您的性别”。单击【插入】【表单】【单选按钮】选项或单击“插入”工具栏的“表单”类别工具面板的“单选按钮”按钮，在其后输入“男”。选中“单选按钮”，打开属性面板，“单选按钮名称”为“xingbie”，选定值为“男”，“初始状态”设置为“已勾选”状态，其余参数默认设置。如图所示。继续插入单选按钮，在其后输入“女”，打开属性面板，“单选按钮”名称为“xingbie”,选定值为“女”，“初始状态”设置为“未
122、勾选”状态，其余参数默认设置。如图所示。保存。按F12预览。效果如图所示。5）插入标签对于单选按钮和复选框这些表单元素，最好能为他们添加标签。在没有添加标签的情况下，访问者只能通过单击表单元素本身来选定或取消选定元素，在添加标签之后，访问者就可以通过单击表单元素旁边的文本来选定元素或取消选定。要添加标签，需要为表单元素设置ID，然后为文本添加label标签，使文本和表单元素按相应顺序关联。以插入复选框实例为例插入标签。单击“旅游”文本前的复选框。按Ctrl+T打开快速标签编辑器。在“编辑标签”模式中，按Tab键快速转到input标签最后，然后按空格键，在出现的提示菜单中选择id或直接插入id，
123、在id后的引号中输入id名“ly”，如图所示。按“Enter”键确定。选中和已设置id值的表单元素对应的文本，按Ctrl+T打开快速标签编辑器。在“环绕标签”编辑模式中，输入labelfor=“ly”。这样就将文本和表单元素关联起来。如图所示。重复操作，将其余文本和相应表单元素关联起来。保存。按F12预览。效果如图所示。6）插入列表/菜单列表选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。菜单选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。新建网页文件lbcd.htm，插入表单，将插入点放在表单区域内。单击【插入】【表单】【列表/菜单】选项或单击“插入”工具栏的“表单”类
124、别工具面板的“列表/菜单”按钮，如图所示。选中插入的“列表/菜单”，在属性面板中设置属性。在“列表/菜单”文本框中输入名称，输入“zhiye”。在“类型”选项组中指定该对象是弹出式菜单还是滚动列表，选择“菜单”。其他参数默认设置。如图所示。单击属性面板中的“列表值”。弹出“列表值”对话框，如图所示。在“项目标签”和“值”下添加“工人”、“农民”、“职员”、“教师”等文本。如图所示。设置完毕，单击“确定”按钮。保存。按F12预览网页。效果如图所示。5思考与练习思考与练习（1）什么是表单？（2）DreamweaverMX2004有哪些表单对象？（3）创建一个表单，插入一个密码类型的文本字段、一个列
125、表/菜单。（4）尝试使用本节中的表单元素，设计一个用户注册页面。网网页页编编辑辑行为应用DreamweaverMX2004提供的行为技术，是一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。经常上网的用户可能会到过这样一些网站：一进入首页或某些页面立刻会弹出一个窗口，按一个链接或按钮也会弹出一个小窗口。通常在这个窗口里会显示一些注意事项、版权信息、警告、公告之类的话或者作者想要特别提示的信息。当网友在用户的留言簿上写完留言并按下“提交”按钮的时候又会弹出一个消息框，显示“感谢您的留言！”，这是不是让人感到很体贴呢？学会了应用DreamweaverMX2004的行
126、为之后就可以做出特别提示的信息来了。1.行为的概念行为的概念行为是事件和由该事件触发的动作的组合。DreamweaverMX2004行为的JavaScript代码放置在文档中以允许访问者与Web页进行交互，从而以多种方式更改Web页或引起某任务的执行。在行为面板中，通过指定一个动作然后指定触发该动作的事件，则可将行为添加到Web页中。由此可以得到以下的等式来描述每一个具体的行为。行为=事件+动作单个事件可以触发多个不同的动作，同时也可以指定这些动作发生的顺序。DreamweaverMX2004提供大约20多个行为动作，用户还可以在MacromediaExchangeWeb站点以及第三方开发人员
127、站点上找到更多的动作。当然，如果用户精通JavaScript，则还可以自己编写行为动作。2.事件的概念每个浏览器都提供一组事件，这些事件可以与行为面板的“动作”弹出式菜单中列出的动作相关联。当Web页的访问者与页面进行交互时(例如单击某个图像)，浏览器生成事件；这些事件可用于调用引起动作发生的JavaScript函数(没有用户交互也可以生成事件，例如没置页面每10秒钟自动重新载入)，DreamweaverMX2004提供许多可以使用这些事件触发的常用动作。3.应用行为可以将“行为”附加到整个文档(即附加到标签)，还可以附加到链接、图像、表单元素或多种其他HTML元素中的任何一种。选择的目标浏览
128、器确定给定的元素支持哪些事件。例如对于每个元素，InternetExplorer以上的版本比Navigator或任何3.0版的浏览器具有更多的事件。4.认识行为面板要打开行为面板，可单击【窗口】【行为】菜单项，这样当前被选择在“文档”窗口中的tag标签就会出现在行为面板的标题栏中。已经被附加在当前选择的页面元素的行为出现在“行为”列表中(面板的主要区域)，并被事件按字母排列。如果有几个动作作用于同一个事件，这些动作则会按照它们执行的顺序出现。如果没有行为出现在行为列表中，那就说明没有行为被附加到当前被选择的元素中。打开的行为面板如图所示。5.行为的解释当站点访问者在浏览页面时，如果产生了交互，
129、则浏览器生成事件。这些事件可以用来调用JavaScript函数，以及触发某项动作。各种浏览器可以支持的事件是不一样的，为了区别，下面将DreamweaverMx2004中的事件和所支持的浏览器列表分类给出，其中，NS4.0表示NetscapeNavigator4.0,Ie4.0表示InternetExplorer4.0。onAbort(NS4.0,IE4.0)：用户终止浏览器的图像下载时生成该事件。onAfterUpdate(IE4.0)：页面上的绑定数据元素完成数据源更新时生成该事件。onBeforeUpdate(IE4.0)：页面上的绑定数据元素已经修改并且将要失去焦点时生成的该事件。on
130、Blur(NS4.0,IE4.0)：元素不再作为用户交互的焦点时生成该事件。onBounce(IE4.0)：框元素的内容已经到达选取框的边界时生成该事件。onChange(NS4.0,IE4.0)：改变了页面上的值或文本域的值后单击页面其他位置时生成该事件。OnClick(NS4.0,IE4.0)：单击指定元素时生成该事件。OnDblClick(NS4.0,Ie4.0)：双击指定元素时生成该事件。OnError(NS4。0IE4.0)：页面和图像载入时，当浏览器发生错误时生成该事件。OnFinish(IE4.0)：选取框该元素的内容完成循环时生成该事件。ONFocus(NS4.0,IE4.0)
131、：指定元素变成交互的焦点时生成该事件。OnHelp(IE4.0)：从浏览器菜单中选择【帮助】菜单项时生成该事件。OnKeyDown(NS4.0,IE4.0)：按压任意键时立即生成该事件。OnKeyUP(NS4.0,Ie4.0)：按压并释放任意键时立即生成该事件。Onload(NS4.0,IE4.0)：按压任意键之后释放所按键时生成该事件。OnMouseDown(NS4.0,IE4.0)：单击鼠标时生成该事件。OnMouseMove(IE4.0)：鼠标指必须停留在元素边界内移动鼠标时生成该事件。OnMOuseOut(NS4.0,IE4.0)：当鼠标指针移出指定元素时生成该事件。OnMouseOv
132、er(NS4.0,IE4.0)：当鼠标从移动元素之外移动到指定元素之上时，生成的该事件。OnMouseUp(NS4.0,Ie4.0)：当按压的鼠标被释放时生成该事件。OnMouse(NS4.0)：在窗口或框架移动时生成该事件。OnReadyStateChange(IE4.0)：当指定的元素的状态改变时生成该事件。OnReset(NS4.0,IE4.0)：当表单被从置为其默认值时生成该事件。OnResize(NS4.0,IE4.0)：调整浏览器窗口或框架大小时生成该事件。OnRowEnter(IE4.0)：绑定数据源的当前记录指针已经改变时生成该事件。OnRExit(IE4.0)：绑定数据源的当
133、前记录指针将要改变时生成该事件OnScroll(IE4.0)：推动滚动条上下移动浏览器窗口时生成该事件。OnSelect(IE4.0)：选择文本域中的文本时生成该事件。OnStart(IE4.0)：选取框元素的内容开始循环时生成该事件。OnSubmit(NS4.0,IE4.0)：提交表单时生成该事件。OnUnload(NS4.0,IE4.0)：当前页面卸载时生成该事件。6.绑定行为如果将行为绑定到文档底部的标签，或加到链接、图像、组成元素、任何其它HTML元素，那么选择的目标浏览器就决定哪些事件被支持用于一个特定元素。例如internetexplorer3.0相比于Navigator或任何3.
134、0浏览器，所支持的用于每个元素的事件要多得多。7.修改现有行为如果用户的页面包含有使用Dreamweaver早期版本所创建的行为，则在当前版本的DreamweaverMX2004中打开该页面时不对这些行为进行自动更新。但是对页面中出现的一个行为进行更新时，此页面中所有其他位置出现的该行为都将进行更新。8.下载和安装第三方行为DreamweaverMX2004最大的功能之一就是它具有的扩展性，即它为精通JavaScript的用户提供了编写JavaScript代码的广阔舞台，这些代码可以扩展DreamweaverMX2004的功能，很多用户都愿意将这些扩展提交到网站与其他用户共享。9实训1.显示-
135、隐藏层的制作“显示隐藏层”动作：显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。“显示隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失。1）当指向一个图片时显示隐藏的层插入一个事先准备好的图片，如图所示。单击【插入】【布局对象】【层】选项，会在图片右侧加上一个层，在层内输入图片的说明文本。如图所示。在“文档”窗口中单击取消对层的选择。打开层面板，在“层”列表中,单击“隐藏”，隐藏该层。如图所示设置。选中图片，打开行为面板。单击加号按钮，从“动作”弹出菜单中选择“显示隐藏层”。单击“隐藏”按钮。如图所示。选中图
136、片，打开行为面板。单击加号按钮，从“动作”弹出菜单中选择“显示隐藏层”。单击“显示”按钮。如图所示。设置行为面板，层“隐藏”前的动作为“onMouseOut”，层“显示”前的动作为“onMouseove”。如图所示。保存。按F12可以预览到效果：当鼠标移入图片时，显示相关说明文本。如图所示。2）创建预先载入层在“插入”栏的“常用”类别中单击“绘制层”按钮，然后在“文档”窗口的“设计”视图中绘制一个较大的层。该层一定要覆盖页上的所有内容。在层面板中，将该层名称拖到层列表的顶部以指定该层应该在堆叠顺序的最前面。如果未选择，则选择该层，并使用层属性检查器中最左边的文本框将其命名为“load”。在层仍
137、处于选中状态时，在属性检查器中将层的背景颜色设置为与页背景相同的颜色。如果需要，在层中(该层现在应该挡住其余的页内容)单击并键入消息。例如“请稍候，正在载入页”，这些消息提示访问者正在发生的操作，以便他们知道该页包含有内容。单击“文档”窗口左下角标签选择器中的标签。在行为面板中，从“动作”弹出菜单中选择“显示隐藏层”。从“层”列表中选择名为“load”的层。单击“隐藏”。单击“确定”。确保行为列表中“显示隐藏层”动作旁边列出的事件是“onLoad”。保存文档，按F12预览效果。10实训2.弹出菜单的制作弹出菜单通常是在Web页中由鼠标来触发的一种菜单导航效果，当鼠标移动到导航对象上，就会显示弹
138、出菜单。当鼠标从导航对象上移开，弹出菜单自动消失。1）弹出菜单的参数设置若要查看文档中的弹出菜单，必须在浏览器窗口中打开该文档，然后将鼠标指针滑过触发图像或链接。如图所示。（2）添加、删除和更改弹出菜单项的顺序使用“显示弹出菜单”对话框的“内容”标签创建菜单。还可以使用此标签删除现有项或更改它们在菜单上出现的顺序。若要添加弹出菜单项，执行以下操作：在“内容”标签中，通过执行以下操作创建一个弹出菜单项。在“文本”文本框中，选择默认文本(“新建项目”)，然后键入要显示在弹出菜单中的文本。若要创建子菜单项，执行以下操作：在“显示弹出菜单”列表中，选择要将其创建为子菜单项的项，然后进行以下操作：若要在
139、菜单列表中缩进项，单击(缩进项)按钮。若要删除缩进，单击(凸出项)按钮。（3）设置弹出菜单的外观在创建了菜单项之后，使用“显示弹出菜单”的“外观”选项卡设置弹出菜单的方向、字体属性和按钮状态属性。如图所示。（4）设置高级外观选项使用“高级”标签中的选项指定菜单单元格的其它属性。单击“高级”选项卡，然后设置要应用于菜单项的选项，如图所示。（5）设置弹出菜单在文档中的位置使用位置选项设置弹出菜单相对于触发图像或链接的显示位置。还可以设置当用户将鼠标指针移开触发器之后该菜单是否隐藏。在“显示弹出菜单”对话框中，单击“菜单位置”标签。如图所示。2）制作一个弹出菜单给网页中的“新闻”图片添加一个弹出菜单
140、的制作步骤如下：在1行5列的表格中插入5张图片，选择要添加行为的对象“新闻”图片，如图所示。打开行为面板，从“动作”中选择“显示弹出菜单”。单击“内容”选项卡，对“内容”选项如图所示设置。需要设置二级菜单，并在新窗口中链接到相应网页。单击“外观”选项卡，设置菜单样式为“垂直菜单”，字体为12号大小“楷体_GB2312”，文本在单元格中的位置为“居中”，一般状态时文本颜色为“黑色”、单元格颜色为“绿色”。鼠标滑过状态时文本颜色为“白色”、单元格颜色为“紫色”。如图所示。单击“高级”选项卡，按默认值设置。如图所示。单击“位置”选项卡，设置菜单位置为添加行为对象的正下方，并选中“在发生onMouse
141、Out事件时隐藏菜单”复选框。如图所示。单击确定，完成设置。按F12预览。11实训3.跳转菜单的制作跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个Web站点内文档的链接、到其它Web站点上文档的链接、电子邮件链接、到图形的链接，也可以创建到可在浏览器中打开的任何文件类型的链接。跳转菜单可包含三个基本部分：(可选)菜单选择提示，如菜单项的类别说明，或一些提示信息等。(必需)所链接菜单项的列表：用户选择某个选项，则链接的文档或文件被打开。(可选)“前往”按钮。建立一个友情链接的跳转菜单：新建一个文档，然后将插入点放在“文档”窗口中。单击【插入】【表单】【
142、跳转菜单】，弹出“插入跳转菜单”对话框。如图所示。在菜单项中添加“搜狐”、“新浪”、“雅虎”3个菜单项，对应URL为“http:/”、“http:/”和“http:/”，打开URL于“主窗口”。其他参数默认。设置完成后如图所示。保存。按F12预览，选择跳转菜单列表中的链接，即可打开相应的目标。如图所示。12思考与练习（1）什么是行为？行为有哪些动作？（2）层的作用是什么？（3）制作一张网页，必须同时包含显示隐藏层、预先载入层、弹出菜单、跳转菜单等4个行为。网网页页编编辑辑使用模板和库项目通常在一个网站中会有几十甚至几百个风格基本相似的页面，如果每次都重新设定网页结构以及相同栏目下的导航条、各类
143、图标就显得非常麻烦，不过用户可以借助DreamweaverMX2004的模板功能来简化操作。其实模板的功能就是把网页布局和内容分离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创建，能够极大提高工作效率。用户还可以在DreamweaverMX2004中定制库项目。模板可以用来制作整体页面的重复部分，而库是用来制作页面局部重复部分的。使用了库，就可以通过改动库更新所有采用库的页面，不用一个一个的修改页面元素或者重新制作页面，使用库比模板有更大的灵活性。1模板模板1)模板的概念DreamweaverMX2004中的模板是一种特殊类型的文档，用于设计“固定”的页面布局。2)模板的应
144、用用户可以基于模板创建文档，从而使创建的文档继承模板的页面布局。设计模板时，可以指定在基于模板的文档中用户可以编辑文档的哪些区域。使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设计元素，如站点的版权信息或徽标等，可以创建库项目。在使用模板创建了文档后，依然可以修改文件。当用修改后的模板更新文档时，锁定部分即不可编辑区域将会依模板的改变而更新，但其他部分不会受影响。2库项目1)库项目的概念库是一种特殊的DreamweaverMX2004文件，其中包含用户已放在web页上的单独的资源或资源副本的集合。库里的这些资源被称为库项目。2)库项目的应用每当更改某个库项目的内容时，
145、可以更新所有使用该项目的页面。在库中，可以存储各种各样的页面元素，如图像、表格、声音和Flash文件等。DreamweaverMX2004将库项目存储在每个站点的本地根文件夹内的Library文件夹中。每个站点都有自己的库。使用库项目时，DreamweaverMX2004不是在Web页中插入库项目，而是插入一个指向项目的链接。即DreamweaverMX2004向文档中插入该项目的HTML源代码副本，并添加一个包含对原始外部项目引用的HTML注释。3实训1.创建网页模板。1）创建模板创建模板的方法如下：单击【窗口】【资源】选项，打开如图2.186所示的资源面板，单击“模板”标签，点击“新建模板
146、”按钮。单击“新建模板”按钮后，在资源栏中新增一个模板，如图所示。在新建的模板名称栏输入所需的模板名称。要编辑该模板可双击模板名称，或在选择模板名称后点击“编辑”按钮。如图所示。编辑该模板然后保存。如图所示。2）将网页存储为模板如果要将一个创建好的网页存储为模板，可以用下面的方法来完成：打开一个网页，如图所示。单击【文件】【另存为模板】选项，或单击“常用”工具栏下的“创建模板”按钮，如图所示，打开“另存模板”对话框。在打开的另存模板对话框中，设置保存模板的站点，输入模板的名称。单击“保存”按钮，打开更新链接提示框。在提示框中单击“是”按钮，完成模板另存任务。另存后的资源面板状态如图所示。4实训
147、2.编辑网页模板1）模板中的可编辑区域在模板中有两种类型的区域，可编辑区域和锁定区域。可编辑区域主要用于控制基于模板创建的页面中可以编辑的区域；除可编辑区域外，其余区域为锁定状态，是不可更改的，即锁定区域。（1）插入可编辑区域在插入可编辑区域之前，应该将正的其中工作的文档另存为模板。在创建可编辑区域时，如果当前文档还是模板文件，则插入可编辑区域时，系统会警告用户应将该文档另存为模板。用户可以将可编辑区域放的页面中的任何位置，但如果要使表格或层可编辑，则需考虑以下情况。可以将整个表格或单独的表格单元格标记为可编辑，但不能将多个表格单元格标记为单个可编辑区域。如果选定标签，则可编辑区域中包括单元格
148、周围的区域；如果未选定，则可编辑区域将只影响单元格中的内容。定义可编辑区域，可执行以下操作：对上例中得到的模板文件创建正文可编辑区域。打开文件面板，并选择上面新建的myweb站点。双击“Templates”目录下的新建的模板文件末mob.dwt，打开模板文件。将插入点置于想要插入可编辑区域的位置。单击“插入”“模板对象”“可编辑区域”选项，或单击鼠标右键并弹出菜单中选择“模板”“新建可编辑区域”选项，随即弹出“新建可编辑区域”对话框，如图所示。在“名称”文本框中为该区域输入惟一的名称，输入“正文部分1”。如图所示。单击“确定”按钮后，可编辑区域在模板中会由高亮显示的矩形边框围绕，如图所示。（2
149、）删除可编辑区域如果要取消模板文件的可编辑区域的属性,可以使用“删除模板标记”命令。选中要删除的可编辑区域，然后单击【修改】【模板】【删除模板标记】选项即可，删除后该区域不再是可编辑区域，只保留下说明文字，如图所示。2）创建重复区域重复区域是可以根据需要在基于模板的页面中复制任意次数的模板部分。重复区域通常用于表格，同时用户也可以为其他页面元素定义重复区域。使用重复区域，可以通过重复特定项目来控制页面布局，例如目录项。说明布局或者重复数据行(如项目列表)等。重复区域是不可编辑的，若要使重复区域中的内容可编辑，例如让用户可以在表格中输入文本，必须在重复区域内插入可编辑区域。重复区域可以使用两种重
150、复区域模板对象：重复区域和重复表格。（1）重复区域对上例得到的模板文件创建正文重复区域。制作步骤：打开文件面板，并选择上面新建的myweb站点。双击“Templates”目录下的新建的模板文件mob.dwt，打开模板文件。将插入点置于想要插入重复区域的位置。单击【插入】【模板对象】【重复区域】选项，如图所示。或单击鼠标右键并在弹出菜单中单击“模板”下的“新建重复区域”选项，随即弹出“新建重复区域”对话框。在对话框中的“名称”文本框中输入重复区域的惟一名称“重复内容”，并单击“确定”按钮。如图所示。重复区域的占位符被插入到文档中，如图所示。（2）插入重复表格用户可以使用重复表格创建包含重复行的表
151、格格式的可编辑区域。可以而且定义表格属性并设置哪些表格单元格可编辑。对上例得到的模板文件创建正文重复区域。制作步骤：打开文件面板，并选择上面新建的myweb站点。双击“Templates”目录下的新建的模板文件mob.dwt，打开模板文件将插入点置于想要插入重复表格的位置。单击【插入】【模板对象】【重复区域】选项，随即弹出“插入重复表格”对话框，如图所示。在对话框中指定“行数”为2，“列数”为3，“起始行”为1，“结束行”为2，“区域名称”为“重复表格”。单击“确定”按钮，重复表格出现在模板中。3）插入可选区域使用可选区域，可以控制在基于模板的文档中显示的内容。Dreamweaver提供了两种
152、可选区域对象。可选区域：是指模板用户可以显示和隐藏特别标记的区域。在这些区域中用户无法编辑内容。可选区域的模板选项卡的单词if之后。根据模板中设置的条件，模板用户可以定义该区域在他们所创建的页面中是否可见。可编辑区域：是指模板用户可以设置显示或隐藏该区域，且用户可以编辑该区域中的内容。如果可选区域包括图像或文本，模板用户即可设置该内容是否显示，并根据需要对该内容进行编辑。可编辑区域是由条件控制的。将上例制作的模板文件的内容转变为可选区域。制作步骤：打开文件面板，并选择上面新建的myweb站点。双击“Templates”目录下的新建的模板文件mob.dwt，打开模板文件。选中文档中的表格然后选择
153、菜单栏中【插入】【模板对象】【可选区域】选项，随即弹出“新建可选区域”对话框，如图所示。在对话框“基本”选项卡的“名称”文本框中输入可选区域的名称“nav”。单击切换到“高级”选项卡，如图所示。在选项卡中有两个单选按钮，分别是“常用参数”和“输入表达式”，在下面的文本框中输入“nav=0”。如图所示。单击确定按钮，完成设置，则模板中出现如图所示的可选区域。5实训3.创建库项目1）直接创建一个空白的库项目首先保证没有选中任何内容。单击【窗口】【资源】选项，单击“库”按钮，将其切换到库类别中。如图所示。在资源面板中，单击面板的“库”类别底部的“新建库项目”按钮，即在面板中新增一个库项目。重命名为l
154、b0.lbi。如图所示。打开新建的库项目，可以为其添加图像、文字等元素并保存。2）将文档中选定的部分另存为库项目对象制作一张包含文字和图片的简单网页，如图所示。选中文件中的表格，如图所示。单击【窗口】【资源】选项，弹出资源面板，单击“库”按钮，将其切换到库类别中。在资源面板中，单击“库”类别底部的“新建库项目”按钮。为新的库项目键入一个名称lb1.lbi，然后按“Enter”键，DreamweaverMX2004在站点本地根文件夹的Library文件夹中，将每个库项目都保存为一个单独的文件，文件扩展名为.lbi，如图所示。6实训实训4.添加库项目添加库项目当向页面中添加库项目时，将把实际内容以
155、及对该库项目的引用一起插入到文档中。将上例中的lb1.lbi库项目插入空白文件中。新建空白文件yku.htm在文件中适当位置单击，设置插入点。从资源面板中拖动库项目lb1.lbi放入文件中。文件中出现库项lb1.lbi，而且“mm:libitem”标签出现在标签工具栏，但在文件中该库项目是不能编辑的。如图所示。(如果拖动库项目时，按住“Ctrl”键，则插入的库可以编辑，但其他引用库项目的文件不会随之更新)7实训5.编辑库项目当编辑了库项目时，使用该库项目的所有文件也随之改变。如果选择不更新文档，那么文件将保持与库项目的关联，可以在以后更新它们。对lb1.lbi库项目进行编辑。在资源面板中选择要
156、的库项目lb1.lbi，库项目的预览出现在面板的顶部位置，如图所示。单击资源面板底部的“编辑”按钮或双击选中库项目lb1.lbi。DreamweaverMX2004打开一个用于编辑该库项目的窗口，在左上角出现“”字样，表示编辑的是库项目，如图所示。编辑库项目，然后保存更改，弹出更新库项目对话框。如图所示。在“更新这些文件的库项目吗？”文件列表中选择要更新库项目的文件，然后单击“更新”按钮，弹出“更新页面”对话框。如图所示。在对话框的“查看”下拉列表中选择“整个站点”，然后从相邻的下拉列框中选择站点“myweb”，这样就会更新选中的站点中的所有页面，如图所示。单击“开始”按钮进行更新，更新完毕，下方“状态”列表框显示更新信息。单击“关闭”按钮关闭对话框。8思考与练习思考与练习（1）新建一个页面，建立新的模板。（2）登录，将该网页另存为模板。（3）什么是库项目？（4）制作一个库项目lb2.lbi，添加到新页面中。
