DREAMWEAVER_8.0_网页制作教案

1、DREAMWEAVER 8.0 网页制作教案（二）邝翠珊 HYPERLINK mailto:cskuang cskuang 39322544-826复习：网页制作的一些常用功能：定义站点、数据表格的制作（学习表格的插入、合并拆分与嵌套）、利用表格布局网页、页面属性的设置、图片插入、文字的插入、日期的插入、插入电子邮件链接、flash动画插入 、插入水平线、练习1、练习上节课的内容：建立站点（包括站点文件）、用表格布局网页、设置页面属性、图片、文字、日期、电子邮件链接、flash动画、水平线等的插入交换图象效果的制作：（插入图像对象鼠标经过图象）鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时

2、候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。是网页变的生动活泼起来。看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。制作步骤：1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。【原始图像】页面开始时显示的图像【鼠标经过图像】鼠标经过的时候显示的图像。【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示时鼠标指向链接时的说明，也可以不填。【前往

3、的URL】点击鼠标后链接的目标。【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。二、了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍html的基本组成部分.如果深入了解可以参考： HYPERLINK /teaching/htmlbook/ /teaching/htmlbook/ 练习2、试在练习1中建立的网页文件index.html中进行交换图像的练习。三、制作滚动的公告文字在网页上可以方便

4、地设置文字上下左右移动，控制文字移动的标点词,如下格式：文字在移动在浏览器中显示时，文字在移动这几个字左右移动。还有一些重要的属性。dirrction:控制移动方向，可取left,right,up,down四个值；behavior:移动方向，可取scroll (循环移动),slide(只走一圈),alternate(来回移动)；loop:指定循环次数，不输入或-1表示无限循环 height,width:移动区域的高和宽，单位像素scrollamount:移动的快慢，整数越大则越快scorlldelay:每移动一步之后的延时，单位毫米bgcolor:移动区域的背景色onmouseover=thi

5、s.stop() 鼠标覆盖时停止滚动 onmouseout=this.start() 鼠标离开时开始滚动如下面的代码就是一个常见的实现向上滚动文字的原代码；请各位老师上课时都把第一次的讲义一起带来。上课地点：实验3号楼508授课教案下载：1、2、3 该学习站点整站下载 综合作业要求 代码中黄色斜体部分为滚动的内容。练习3、打开：index.html的文件，在此网页中做滚动的公告文字的练习，四、设置网页超链接（网页是通过链接联系起来的）简称链接链接是页面与页面之间一个单向的关联关系。通过点击链接，我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。要正确创建连接，必须了解链接与被链接

6、之间的路径关系，每一个网页都有唯一的地址，称为URL（统一资源定位符），外部链接：不同网站文档之间的链接。 内部链接：在同一网站文档之间的连接。 （一般创建内部链接，即在同一网站文档之间的连接，不需要指定完整的URL，而是指定相对于当前文档或站点的根文件夹间的路径。）E-mail连接：打开填写电子邮件表格的连接。 建立一个填好收件人地址的空白邮件链接，方便网络沟通。文件链接：链接ppt、word、图片等，以链接的方式提供下载服务。锚点链接：同一网页或不同网页的指定位置的连接。锚点可以给内容较多的页面进行编号，方便快速访问浏览。图像链接同文字链接一样，是网页中常见的超级链接图片热区链接：可以为一

7、张图片它设定不同的热点区域，当在网页图片上的不同位置按下鼠标左键，此时就会连接至不同的网页。 （可以将图象分割为不同的链接源，这些链接源可以拥有独立的链接目标。）图片热区链接制作方法：选中网页中的图片，在图片的属性面板中选择矩形热点工具，在图象上画出一个热区，此时属性面板中显示为当前新建热区的相关参数，在链接框中，设置链接网页或其他的网络资源在目标栏中设置打开网页的方式，当需要选择修改其他热区时，可以使用指针热区工具选择目标热区，然后在属性面板修改相关链接设置。绝对路径：完整的URL，称作绝对路径。例如在链接域输入： HYPERLINK 或 HYPERLINK file:/F|/web/jin

8、gpin.htm file:/F|/web/jingpin.htm 地球，中国，广州文档相对路径：以当前文档所在位置为起点到被连接文档经由的路径。这是用于本地链接的最适宜的路径。例如，dreamweaver/contents.html就是一个文档相对路径。当我们要把当前文档与处在相同文件夹中的另一文档链接，或把同一网站下不同文件夹中的文档相互链接时，就可使用相对路径。根相对路径：根相对路径是指从站点根文件夹到被链接文档经由的路径。一个根相对路径以前斜杠开头，它代表站点根文件夹。例如， /support/tips.html就是站点根文件夹下的support子文件夹中的一个文件（tips.html

9、）的根相对路径。根相对路径是指定网站内文档链接的最好方法，因为在我们移动一个包含根相对链接的文档时，无需对原有的链接进行修改。 认识链接的目标：（链接网页打开的方式）1、_seft为本窗口； 2、_top为上级窗口（使用多级框架时）3、_blank为打开新窗口； 4、_parent为父窗口（使用框架时）； 5、默认的效果.第1和第5种情况是相同的，_self表示“相同窗口”。点击链接后，地址栏不变。在网页中没有做设置时，网页链接默认的窗口为_self。.第2和第4种情况，也是相同的。_top表示整页窗口，_parent表示父窗口。实际使用中，它们没有任何区别，地址栏会变化。._blank是最常

10、见的链接方式，表示超链接的目标地址在新建窗口中打开。练习4、打开：未做超链接.html的文件，在此网页中做超链接的练习，参看文件超链接.htm。五、word和excel文档的导入。六 、利用一个现有网页制作其他网页（相同的页眉，导航，页脚）例如利用首页index.html制作课程介绍这一页 kcjs.html步骤：打开index.html文件，把页面中相同的部分如页眉，导航，页脚等保留，不同的地方删除或更改，再保存为kcjs.html在需要更改的地方插入图片等其他网页内容。练习5、打开index.htm,利用这个网页制作出几个相同的页眉，导航，页脚的网页。并设置这些网页导航的链接，七、行为的简

11、单运用：（一）利用行为创建弹出式菜单制作“弹出式菜单”的步骤如下： （1）在网页上选择要附加该行为的对象（导航栏按钮、链接文本、图片等）并打开“行为”面板。（2）单击加号 (+) 按钮并从“动作”弹出式菜单中选择“显示弹出式菜单”，弹出设置对话框，如图14-13所示。图14-13 设置弹出式菜单（3） 在出现的“显示弹出式菜单”对话框中，使用以下标签来设置弹出式菜单的选项： 内容：设置、更改单个菜单项的名称、结构、URL 和框架目标。 外观：设置菜单一般状态和滑过状态的外观以及设置菜单项文本的字体选择。 高级：设置菜单单元格的属性。例如，可以设置单元格的宽度和高度、单元格颜色和边框宽度、文本缩

12、进以及在用户将鼠标指针移到触发器上后菜单出现之前的延迟时间长度。 位置：设置菜单相对于触发图像或链接的放置位置。 （4）单击“确定”，关闭对话框。（5）检查默认事件是否是所需的事件。该行为的事件一般为“onMouseover”，即鼠标滑过时显示菜单。（二）弹出消息框。（三）打开浏览窗口（1）选择网页中需要点击的内容，在属性面板上的链接栏上填上 # ，如下图：（2）打开行为面板，点击（+）按钮并从动作弹出式菜单中选择打开浏览器窗口；（3）在打开的浏览器窗口中点击浏览选取需要链接的文件，或者输入您需要显示的URL地址。（4） 设置下列选项： 窗口宽度 指定以象素为单位的窗口宽度。 窗口高度 指定以

13、象素为单位的窗口高度。 导航工具栏 是一行浏览器按钮包括前进，后退，主页和刷新。 地址工具栏 是一行浏览器选项，其中包括地址域。 状态栏 是浏览器窗口底部的区域，用于显示信息（如剩余加载时间，和URL关联的链接）。 菜单条 是浏览器窗口（Windows）或桌面（Macintosh）上菜单出现的区域。菜单包括如文件，编辑，查看，转到，帮助等等。如果您需要来访者可以从新窗口导航，那么您可以明确地设置该选项。如果您不设置该选项，来访者在新窗口中将只能关闭或最小化窗口（Windows）或者关闭窗口或退出程序（Macintosh）。 需要时使用滚动条 指定如果内容超过可见区域时滚动条自动出现。如果您不明

14、确设置该选项，滚动条不会出现。如果调整大小手柄也被关闭，那么来访者将没有方便的办法看见超过窗口原始大小的那部分内容。（虽然他们可能可以通过使用拖动窗口边缘的办法使窗口滚动。） 调整大小手柄 指定用户是否可以调整窗口大小，无论是通过拖动窗口的右下角还是点击右上角的最大化按钮（Windows）或大小框（Macintosh）的办法。如果该选项没有明确设置，调整大小控制将不可用，而且右下角也是不可拖动的。 窗口名称 就是新窗口的名称。如果您想使用其作为链接目标或者用JavaScript控制它，那么您应该给新窗口命名。该名称中不能包含空格或特殊字符。 （5）点击确定。 （6）检查默认事件是否是您需要的事件。 如果该事件不是您所需的，请从弹出式菜单中选择另