第五单元 制作“家乡山水”网页.ppt

1、Dreamweaver网页制作，第五单元是“故乡山水”网页，第五单元是“故乡山水”网页，任务1是热点和锚定链接，任务2是层，任务3是页面动态效果，本单元“故乡山水”页的效果如下图。 整个页面分为左侧、右上和右下三部分，左侧放置景区的地图图像，右上部放置景区名称，右下部显示景区的图像和景区介绍。 如果光标指向景区地图中的景区，则在光标下方显示相应的景区名称的同时，还会在页面右下部显示该景区的风景图像和简单介绍。 用鼠标单击景区将打开“景区介绍”页，如下图所示。 第五单元作成“故乡山水”页，景区介绍，第五单元作成“家乡山水”页，任务增加了热点和锚定链接，任务说明：景区地图各景区和“景区介绍”页的相

2、关内容建立了链接关系任务分析：建立本单元的目录结构，在“景区介绍”页面上为每个景区介绍内容添加锚，然后在景区地图上为每个景区绘制热点，并在各个热点上添加锚链接，链接到“景区介绍”页面上的相应位置第五单元创建“故乡山水”页，自己着手，1 .建立本栏的目录结构，任务添加热点和锚链接，2 .在“景区介绍”页上添加锚，将光标放在表第一行的文本“金华山景区”前， 单击“插入”栏的“常用”类别中的“命名锚点”按钮，或选择菜单栏的“插入”菜单下的“命名锚点”选项，显示如下图所示的对话框。 输入锚点名称jd1，然后单击“确定”按钮，在插入点处显示锚点图标。 1 .什么是锚？ 2 .锚是怎么命名的？ 任务添加热

3、点和锚的链接后，根据下表所示的对应关系，用同样的方法向“景区介绍”页面的其他5个景区添加锚。 任务添加热点和锚点链接后，3 .在“故乡山水”页的景区地图上添加热点，使用多边形热点工具向图中的“金华山景区”添加热点。 用同样的方法向其他景区增加热点。 时，绘图过程中相邻的两个顶点自动连接，第一个和最后两个顶点自动关闭。 还没有被选择的部分。 3 .什么是热点？ 4 .热点工具是什么？任务添加热点和锚点链接时，4 .设置热点属性添加锚点链接，选择要添加到“金华山景区”的热点，在“属性”面板上，进行以下设置：5.热点6 .热点工具的操作是什么？当任务添加了热点和锚点链接时，请按照下表所示的相同方式设

4、置其他热点的属性，并分别在“viewpiont.html”页面的相应景区中介绍的锚点位置任务添加热点和锚点链接后，任务总结：完成上述任务后，您将学习什么是热点，如何添加热点，如何设置热点属性，如何添加锚点链接，如何创建锚点链接等。 任务添加了热点和锚点链接，任务添加了层，任务说明完成了“家乡山水”页的中间层制作。 任务分析：景区地图上有6个景区，每一个景区对应一层，加上初始显示层，七层放在同一位置，并显示相应的图像。 此外，还需要创建一个层来显示简单的介绍文本。 此任务在页面上插入8个层，调整层的大小，确定层的位置，并向层添加内容。 第五单元制作“故乡山水”页，自己插手：1.插入层，在“文件”

5、面板中双击 travel.html 文件，打开“故乡山水”页。 将光标置于表table3的第一行，然后选择菜单栏“插入”“布局对象”“层”选项，插入层。以相同的方式，在表“表3”的第一行中插入另外六个层，命名为“第二层”、“第三层”、“第四层”、“第五层”、“第六层”和“第七层”，然后在第二行中插入层“第八层” “层面板”如下图所示：选中此选项可防止层和层在绘制层时重叠。 按一下，按一下图层名称来选取图层，然后双击以变更图层名称。 1 .插入层的另一种方法和层的操作。 添加和使用任务2层，2 .设置层属性，在“层”面板上单击选择“层8”。 “属性”面板如下图所示：2 .属性面板中项目的含义是什

6、么？ 任务2添加和使用层，3 .向层中添加内容，在“层”面板中选择层“层1”，将光标置于层上，在“插入”菜单中，将“D:mysitetraveltlimages”文件夹用同样的方法向其他层添加内容。 要向层添加内容，首先将光标置于该层上。 添加和使用任务2层，4 .设置层的显示属性，然后单击“切换是否显示所有层”。 看不到闭着眼睛的显示层，看不到打开的显示层。 按一下来切换图层是否显示.然后按一下。任务2层的添加和使用、任务总结：通过完成上述任务，您学习了如何插入层、设置层属性、将内容插入层等。 任务2添加和使用层，任务3创建页动态效果，任务说明：向“故乡山水”页添加动态效果。 任务分析：通过

7、在“家乡山水”页面上添加“显示-隐藏层”行为，添加“设置层文本”行为来控制层8中显示的文本内容。 第五单元创建“故乡山水”页，自己动手：1.在“金华山景区”的热点中添加“显示-非显示层”的行为，a .在向热点添加行为的“文件”面板上双击“travel.html”文件在景区地图“map.jpg”中选择“金华山景区”的热点，单击“行动”面板上的“添加行动”按钮，从下拉菜单中选择“显示-隐藏图层”选项，打开“显示-隐藏图层”对话框将层“第二层”(包含“金华山景区”图像的层)和层“第八层”(显示文本的层)设置为“显示”，将其他层全部设置为“隐藏”，然后单击“确定”按钮。 创建任务3页的动态效果。 什么

8、是行动？ 任务3创建页面动态效果，层“第2层”和层“第8层”为“显示”，其他层全部为“隐藏”，b .动作设定事件为“动作”面板的事件栏，选择该动作的事件为“onMouseOver” 选择常用的行为是什么。 迄今为止，对“金华山观光地”的热点进行了行为，此时预览了“故乡山水”页，将鼠标移动到“金华山观光地”的热点上，就会显示层“第二层”和“第八层”，其他层全部隐藏，右侧制作任务3页动态效果，2 .在“金华山景区”的热点上添加“设置层文本”行为a .在“行为”面板上选择“添加行为”按钮，在弹出菜单上选择菜单栏“设置层文本”“设置层文本” 弹出“设置层文本”对话框，在“层”中选择“第8层”，在“新H

9、TML”中输入该景区的简要介绍，然后单击“确定”按钮。 效果如下图所示：任务3创建页面的动态效果，输入该景区的简要介绍，在“第8层”和“b .行动”面板的事件栏中选择“onMouseOver”，然后按F12预览页面。 效果如下图所示。 制作任务3页动态效果，左侧选择景区，右侧显示相应的介绍。使用上述方法，参照教材表5-1，在其他热点设定“显示-隐藏层”行为。 如果要设置一个景区热点的行为，请注意，该景区的图像所在层和显示文本的“第8层”层设置为“显示”，其他层设置为“隐藏”。 使用以上的方法，参照教材表5-7，在对应的热点中追加“设置层文本”行为，输入对应热点的景区的介绍文字。 至此，“家乡山

10、水”栏的制作全部完成，保存并预览了检查效果。 任务3页的动态效果、任务的总结.1.掌握在热点上添加“显示-隐藏层”动作。 2 .掌握向热点添加“显示层文本”行为。 任务3页的动态效果，相关知识：1 .锚点是文档中设置的标签，通常位于文档的特定主题或顶部。 要使用锚点，请在第一步中添加锚点，在第二步中添加锚点链接。 此链接可让读者快速移动到特定位置。 2 .锚点名称通常以字母开头，区分大小写，不包含空格和特殊字符。 创建锚点后，如果在网页创建窗口中没有显示锚点图标，则从菜单栏的“显示”菜单中选择“可视助手”选项，并检查“不可见元素”。 在预览过程中不显示锚点图标。 如果任务添加了热点和锚点链接，

11、则3 .热点是图像内区域的几何描述，通常每个热点链接到不同的网页、URL、锚点、图像等。任务添加了热点和锚点链接时，4 .热点工具介绍：多边形热点工具、椭圆形热点工具、指针热点工具、矩形热点工具、“指针热点工具”:此工具矩形热点工具：选择此工具后，在图像上拖动鼠标以添加矩形热点，按住Shift键并拖动以添加正方形热点。 椭圆热点工具：选择此工具，然后在图像上拖动鼠标以添加圆形热点。 这个工具不能添加椭圆形的热点. 多边形热点工具：选择此工具后，可以在图像上单击鼠标(用鼠标连续单击图像中的其他位置)来添加多边形热点。 5 .热点的属性面板：链接：设置热点的链接路径。 要添加锚点链接，如果链接的锚

12、点位于此页面上，请输入#并输入锚点名称；如果链接的锚点不位于此页面上，请输入链接路径 #和锚点名称。 目标下拉列表中的_blank :表示在新的浏览器窗口中打开链接的文档，而不更改当前的浏览器窗口。 替换：设置鼠标指向热区域时显示的替换文本. 任务添加了热点和锚点链接后，6 .使用热点工具：要移动热点，请在属性面板中单击“指针热点工具”，选择热点，然后拖动以移动该位置，或按键盘调整热点大小用指针热点工具单击热点，将光标移动到热点顶点上，并拖动鼠标来调整热点的形状和大小. 要选择多个热点，请在“属性”面板中单击“热点工具”，按住Shift键单击以选择多个热点，然后按键盘上的Ctrl A键选择所有

13、热点。 任务添加热点和锚点链接，相关知识：1 .插入层的另一种方法和层的操作？ a .除了使用上述方法插入层之外，还可以使用以下方法绘制层： 在“插入”栏的“布局”类别中，单击“绘制层”按钮后，可以在“设计”视图中拖动以在任意位置绘制任意大小的层。 单击“绘制层”按钮，然后按住Ctrl键连续绘制多个层。 b .如何选择图层在“图层”面板中单击图层的名称。 单击“标签”检查器中中间层的标签。 用鼠标单击图层的边界线。 如果同一位置存在多个层，则无法执行此选择方法。然后在任务2中添加层来使用。 c .如何选择多个图层？按住Shift键并在“图层”面板中单击图层名称。 按住Shift键，并在图层的边

14、界或内部按一下。 如果同一位置存在多个层，则无法执行此选择方法。 d .删除层的方法选择层后，按Delete键删除。 e .您可以选择一个图层来调整图层大小，然后执行以下操作之一来调整图层大小。 拖动图层的控点。 在“图层属性”面板中，输入“宽度”和“高度”的值。 使用方向键的同时按住Ctrl键，可以精确地调整大小(以像素为单位)。 您可以在使用箭头键的同时按住Shift Ctrl键，以10像素为单位调整大小。 添加和使用任务2层，选择移动f .层的方法层，然后用鼠标拖动。 选择图层后，使用方向键一次移动一个像素。 按住Shift键，同时使用方向键一次移动10个像素。 g .层的对齐方法选择多

15、个层，然后从“修改”菜单的“对齐顺序”选项中选择层的对齐方法。 您可以将选定的图层与最后一个选定的图层对齐。 任务2添加和使用层、2 .属性面板中各项目的含义是什么？ 图层编号：设置图层的名称。 同一页中的每个层都有唯一的名称。 默认情况下，第一个插入的层名称为第一层。 “左”和“上”:用于设置页面(对于嵌套层，为父层)左上角的水平和垂直距离。 默认值为0，默认值为像素，通常使用默认值。 “宽度”和“高度”:设定层的宽度和高度。 单位默认为像素。 z轴：设定层在z轴上的位置，即堆叠顺序。 在浏览器中，编号较大的阶层位于编号较小的阶层之上。 值可以是正的也可以是负的。 可见性(visibilit

16、y ) :设定层是否可见。 default:默认值inherit:继承父层的可见性：可见的隐藏：不可见。 添加和使用任务2层：溢出：设置当前层的内容超过大小时的状态。 可见：层的高度自动增加，存储多馀的内容hidden :层的大小不变。 很多内容是隐藏的scroll :在预览时自动向图层添加滚动条自动识别auto :滚动条是否可见，如果图层内容超过图层大小，则不显示。 剪辑：定义“文档”窗口中图层显示的区域(以像素为单位)。 任务2层的添加和使用，知识解说：1 .行为是Dreamweaver8的预定义JavaScript库。 每个行为都由动作和事件组成。 其中，事件是行为发生的条件，即诱发动态

17、效果的原因，例如鼠标的手指、点击等的动作是事件发生后的反应，即最终完成的动态效果，例如图像交换、信息的弹出、声音的播放等。 可以添加行为的对象包括图像、热点、超链接文本、多媒体文件和网页本身。 创建任务3页的动态效果。 2 .您可以在“行为”面板中执行“行为”面板、添加、删除和修改行为等操作。 “显示配置事件”按钮：“显示所有事件”按钮：“添加行为”按钮：“删除行为”按钮：“增减事件值”按钮：任务3页动态效果，3 .浏览器支持的一般事件类型，任务3页动态效果，4.dr 交换映像：更改img标签上的src属性以交换一个映像和另一个映像。 交换映像还原：将最后一组交换映像还原为原始源文件。 每次向

18、对象添加“替换图像”操作时，该操作都会自动添加。如果在附加交换图像时选择了“恢复”选项，则不需要手动选择恢复交换图像的操作。 弹出：显示包含用户指定的信息的JavaScript警告框，以便用户无法选择信息。打开浏览器窗口：可以在新窗口中打开URL，可以指定新窗口的大小、属性和名称。 制作任务3页面的动态效果，播放声音：可以在网页上播放声音。 例如，您可以在鼠标在图像上移动时播放音乐，也可以在加载页面时播放音乐。 更改属性：通过更改图像、图层、表单等属性，如图层的背景色、图像的宽度和高度，可以实现动态效果。 可以更改哪些属性取决于当前所选的浏览器. 在IE4.0中，此行为可以更改的属性远远多于IE3.0。 设置文本：用于设置图层的文本、框架的文本、状态栏的文本、表单元素的文本字段的文本。 预载的图像：用于将未立即显示在网页上的图像预载到浏览器缓存中，以防止在显示图像时延迟下载。 任务3制作页面的动态效果