《网页设计与制作第6章dreamweavermx的高级应用》由会员分享，可在线阅读，更多相关《网页设计与制作第6章dreamweavermx的高级应用（64页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容：利用Dreamweaver MX设置网页的动态效果在Dreamweaver MX中使用样式利用模板和库创建、更新网页,第6章 Dreamweaver MX的高级应用,图层又称层，是Dreamweaver MX中最有价值的对象之一，它提供了一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单、插件，甚至层内还可以包含其它层。即在HTML文档的正文部分可以放置的元素都可以放入层内。由于层可以放置在网页的任何位置，从而能有效地控制网页中的对象。,6.1 设置网页的动态效果,6.1.1 使用层,层是在制作网页中经常用到的对象，元素的定位就是一个简单的应用。用表格
2、来对网页进行排版非常方便，但有时需要在文字上放一些图片之类的元素，表格就不能胜任了，这时就可以利用图层来排版。图层可以重叠地放置，制作出层叠的效果。也可以控制层的显示或隐藏，实现交互技术。配合时间显的使用，还可以同时移动一个或多个图层，轻松制作出动态效果。,1. 层的基本操作,1）创建图层,Dreamweaver MX创建图层，可执行以下操作之一： （1）将光标放置在文档窗口中需要插入层的位置，然后选择“插入”|“层”命令。 （2）打开插入“常用”面板，单击该面板上的插入层图标 ，然后释放鼠标，鼠标会变成十字形状，用鼠标在页面中绘制一个矩形来创建层。 （3）如果需要画多个层，在单击插入层图标
3、的同时，按住Ctrl键，在文档窗口中画一个层，只要不释放Ctrl键，就可以连续化多个层。,创建完层之后，在页面中会出现一个层的标志，并且有一个矩形的层出现。单击层标志，其属性面板显示如图所示，在属性面板上可以设定层的属性。,2） 选择图层,（1）选择一个图层,选择图层的目的是便于层的对齐、重定位和缩放，还可以为图层添加背景图像和背景颜色。在Dreamweaver MX中要选择一个层，可使用如下方法之一： （1）用鼠标单击层标志 。 （2）用鼠标单击层的任意边框线。 （3）选择“窗口”|“其它”|“层”命令，打开图层面板，单击该面板中需要选择的层的名称。,（2）选择多个图层,如果要同时选择多个层
4、，可以按住Shift键，再执行上述操作之一。 注意：当选择了多个图层后，最后选择的图层标记高亮显示，同时调控点显示为黑色，其他图层的调控点显示为白色。,选择层后，层的四周出现8个调控点，且层的标志反色显示 。,3）激活图层,如果需要在图层中插入对象，必须激活图层。把鼠标指针移动到层内任何地方单击，即可激活该层。此时，插入点位于图层内，被激活图层的边界突出显示，选中手柄也同时显示出来。注意：激活图层的操作不同于选择图层。,4）移动图层,在文档中要移动一个图层，可以执行以下操作之一： （1）先选择层，然后在该层的选择手柄上按住鼠标左键并拖动鼠标，则可移动。 （2）将鼠标指针移动到需要移动层的边框位
5、置，当鼠标指针形状为四个箭头时，按住鼠标左键并拖动鼠标，则可移动层。 （3）在属性面板中直接设置“左”、“上”的数值，也可以移动层。 （4）利用键盘，每按一次方向键，则移动一个像素单位；若按Shift键的同时按一次方向键，则移动一个网格单位。,5）复制图层,在Dreamweaver MX中要复制一个层，可执行以下：（1）按住Ctrl键，将鼠标指针移到需要复制层的标志 上，按住鼠标左键拖动鼠标，移动一定距离后，释放鼠标，则该层被复制。（2）先选择一个层，执行“编辑”|“复制”命令，取消被选层，执行“编辑”|“粘贴”命令，则该层被复制。,6）调整图层的大小,要调整一个图层的大小，可执行如下操作之一
6、：拖曳法：选择层，拖曳图层的调控点。上/下调控点只能调整层的高度，左/右调控点只能调整层的宽度，四角的调控点能同时调整层的高度和宽度。 在层属性面板中设置“宽”和“高”的数值。利用键盘来调整图层的大小：选择要调整的图层，按Ctrl+方向键，每次调整一个像素单位。按Ctrl+Shift+方向键，每次调整一个网格单位。,（1）调整单个图层的大小,（2）调整多个图层的大小,在文档中要调整多个图层的大小，可执行如下操作之一： 在设计视图中按Shift键选择多个图层，单击“修改”|“对齐”|“设成宽度相同”或“修改”|“对齐”|“设成高度相同” 。 选择要调整的图层，打开其属性面板。在属性面板的多个层“
7、高”和“宽”文本框中修改所有选中的层的宽度值和高度值。,7）对齐图层,在文档窗口中有多个图层，可以选择这些图层，然后使用图层对齐命令使被选择的多个图层与最后被选择的图层边框对齐。对齐多个层的方法如下：在文档窗口中选中需要对齐的图层，执行“修改”|“对齐”命令，选择下列对齐方式中的一种：左对齐、右对齐、对齐上缘、对齐下缘、设成宽度相同、设成高度相同。 注意：在对齐图层时，没有选择的子图层会因为其父图层的移动而移动。,8）创建嵌套图层,图层嵌套指的是在一个图层的内部创建另一个图层，可以用嵌套的方法将多个图层组合在一起。使用嵌套层的目的通常是为了将多个图层组成群组，这样一来，只要移动父层，其中的子层
8、也会一起移动，而且子层还会继承父层的显示隐藏状态，其可见性与父层保持一致。这在制作动态网页是十分有用。,创建嵌套层通常有两种方法： （1）直接创建嵌套层先创建一个层为父层，后在父层内创建的层成为子层，在图层面板中也可以看出层2是层1的子层。 （2）将已有的多个层变为嵌套层打开图层面板，在层列表中将需要作为子层的层选中，按住Ctrl键将该层拖动到父层上，释放鼠标即可。,图层和表格都可以用来进行页面定位，但图层是可以随意移动的，应用图层来进行页面设计更快捷、方便、灵活。但图层只有在较高版本的浏览器中才能够正确显示，如果要使设计的网页在3.0版本的浏览器中也正确显示，则不能使用图层来控制版面。 为了
9、避免显示错误，可以先用图层来快速创建复杂的页面布局，然后再把图层布局转换为表格布局。需要时，也可以进行图层和表格的相互转换，以调整布局和优化页面设计。,2. 层与表格的相互转换,在Dreamweaver MX中，先用图层来制作一个页面，选择“修改”|“转换”|“层到表格”命令，弹出 “转换层为表格”对话框，根据需要对以上各项进行设置，设置完毕单击“确定”按钮。,1）将图层转换为表格,注意：1隐藏的图层不能转换为表格。2重叠的层不允许转换为表格，因为表格的单元格是不能重叠的。3在模板文档或已应用模板的文档中，不能将层转换为表格或将表格转换为层。即应该在非模板文档中创建布局，然后再将该文档另存为模
10、板之前进行转换。,将表格转换为图层的步骤如下：选择需要转换的表格，执行“修改”|“转换”|“表格到层”命令，弹出 “转换表格为层”对话框；在对话框中选择所需要的选项，单击“确定”按钮，文档中的表格转换为层，但空表格单元不转换，表格之外的内容也被置于图层中。 注意：如果文档应用了模板或模板文档，就不能把把表格转换为图层。如果确实需要转换，可在存为模板之前先进行转换。,2）将表格转换为图层,6.1.2 使用行为,行为是Dreamweaver中极其重要的一大技术，是Dreamweaver创建互动网页效果的根源所在。通过将行为附加到某个对象上，浏览器就能根据访问者的鼠标活动做出响应，从而方便地实现人机
11、交互。行为大大丰富了网页的交互功能，它让访问者能够通过与页面交互来改变网页内容。,对于一个行为来说，它的核心有两个事件和动作。所谓的事件就是访问者对网页进行的某个操作行为，而动作则是指接受事件的网页应当执行的响应功能，它是预先编写好的JavaScript脚本。比如说有这样一个网页，当用户把鼠标移动到一幅图像上时，该图像变为另外一幅，这就是一个典型的行为。把鼠标移动到图像上称为一个事件，而图像发生变化则称为该行为的动作。事件可以触发动作，用户可以定义不同的事件触发不同的动作。,以变换图像为例说明在网页添加行为的方法。,1. 添加行为,给一个页面元素附加了行为后，有时需要改变触发动作的事件，如：增
12、加、删除动作或改变动作参数等，这些都属于编辑行为的操作。 （1）修改行为的触发事件,2. 编辑行为,（2）修改行为的动作参数对已经设置的行为，可以改变动作参数。只要双击行为面板上该行为对应的“事件”或“行为”栏，就可以打开该动作的参数对话框，在对话框中修改各项参数。（3）删除行为在行为面板上选取欲删除的行为，单击行为面极左上方的按钮，或按Delete键。（4）调整行为的执行顺序一个事件可以触发多个动作，在这种情况下就存在一个动作发生的先后问题，可以通过单击行为面板上的按钮和来解决这一问题。,Dreamweaver预先设计了许多标准的动作，只有充分利用这些现成的动作，并与不同的事件组合，就可以设
13、计出各种生动活泼的动态网页。（1）调用JavaScript调用JavaScript动作的作用是执行预先编写好的一个JavaScript函数或一行JavaScript代码。,3. Dreamweaver MX自带的行为,（2）弹出信息该动作用于弹出一个消息框，显示说明信息。例如当访问者打开网页时，弹出一些消息提示访问者一些注意事项或是弹出欢迎词，最常见的是弹出一些建议性的消息，如建议访问者在多大分辨率下浏览该网页可获得最佳效果等。,（3）打开浏览器窗口经常上网的用户在某些网站可能会遇到这样的情况，一进入主页或某些页面立刻会弹出一个窗口，通常在这个窗口里会显示一些重要通知、广告之类的内容，这样的页
14、面效果可以用打开浏览器窗口动作来实现。,（4）设置状态条文本该动作用于在浏览器窗口底部左侧的状态栏中显示消息。但要注意，访问者常常会忽略或注意不到状态栏中的消息，而且并不是所有的浏览器都提供设置状态栏文本的完全支持；如果您的消息非常重要，可以考虑将其显示为弹出式消息。（5）设置层文本设置层文本动作用于动态地设置层中的文本和格式，或替换现有层的内容。该内容可以包括任何有效的HTML源代码。但它将保留层的属性，包括颜色在内。,（6）播放声音在浏览网页时，当鼠标指针滑过某个超链接时会播放一段声音效果，或在页载入时播放音乐剪辑。这种效果可以使用“播放声音”动作来完成。,6.2 使用样式,HTML样式表
15、是通过设置HTML标识符，对段落或选择的文本进行格式化，主要是设置这些文本的字体类型、字体大小、字体颜色及风格等，而且也定义了文档的结构，例如标题、段落及列表等。HTML样式表只能实现层叠样式表（CSS）的部分功能。,6.2.1 使用HTML样式,选择“窗口”|“HTML样式”命令，即可打开“HTML样式”面板。如图所示。,1HTML样式面板,可以用两种方法创建样式：首先设置文档中的文本格式，然后基于所选文本创建样式；也可以在“HTML样式”面板上通过选择要应用的格式属性来创建新样式。（1）基于现有文本创建新的HTML样式如果在页面中已经有文本是所需要的格式，而这个格式需要经常使用，可以基于该
16、文本创建新的HTML样式，然后将这个样式应用到目前的文本中，也可以应用到其它文本中乃至整个站点的文本中。,2创建HTML样式,（2）创建新的HTML样式要建立新的HTML样式表，可执行如下操作之一：用鼠标单击HTML样式面板底部的新建样式图标。单击HTML样式面板顶部右边的白色三角按钮，从打开的下拉菜单中选择“新建”命令。在HTML样式面板内单击鼠标右键，从弹出的菜单中选择“新建”命令。,（1）格式化段落演示格式化段落（2）格式化选择文本演示格式化文本,3应用HTML样式,编辑现有HTML样式的方法如下： （1）确保“文档”窗口中未选择任何文本。 （2）在HTML样式面板上选择“自动应用”复选框。如果打开“自动应用”选项，则在HTML样式面板上选择HTML样式时将会应用该样式。 （3）在HTML样式面板上执行下列操作之一，出现 “定义HTML样式”对话框。 （4）在该对话框中，设置该样式的样式属性选项。 （5）若要将其重置为默认选项，单击“清除”按钮。,4编辑HTML样式,选择“窗口”|“CSS样式”命令可以打开“CSS样式”面板，如图所示。,
