DREAMWEAVERMX2004网页制作教案(二)(精)_网页制作教案二

2020-02-28 教案模板下载本文

DREAMWEAVERMX2004网页制作教案(二)(精)由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页制作教案二”。

DREAMWEAVER 8.0 网页制作教案

（二）邝翠珊

cskuang@gdut.edu.cn

39322544-826

复习：

网页制作的一些常用功能：定义站点、数据表格的制作（学习表格的插入、合并拆分与嵌套）、利用表格布局网页、页面属性的设置、图片插入、文字的插入、日期的插入、插入电子邮件链接、flash动画插入、插入水平线、练习

1、练习上节课的内容：建立站点（包括站点文件）、用表格布局网页、设置页面属性、图片、文字、日期、电子邮件链接、flash动画、水平线等的插入

一、交换图象效果的制作：（插入→图像对象→鼠标经过图象）

鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。是网页变的生动活泼起来。

看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。

制作步骤：

1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：

【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。

【原始图像】页面开始时显示的图像

【鼠标经过图像】鼠标经过的时候显示的图像。

【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示时鼠标指向链接时的说明，也可以不填。

【前往的URL】点击鼠标后链接的目标。

【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。

二、了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍html的基本组成部分.如果深入了解可以参考：http://www.daodoc.com 或file:///F|/web/jingpin.htm

地球，中国，广州

文档相对路径：以当前文档所在位置为起点到被连接文档经由的路径。这是用于本地链接的最适宜的路径。例如，dreamweaver/contents.html就是一个文档相对路径。当我们要把当前文档与处在相同文件夹中的另一文档链接，或把同一网站下不同文件夹中的文档相互链接时，就可使用相对路径。

根相对路径：根相对路径是指从站点根文件夹到被链接文档经由的路径。一个根相对路径以前斜杠开头，它代表站点根文件夹。例如，/support/tips.html就是站点根文件夹下的support子文件夹中的一个文件（tips.html）的根相对路径。根相对路径是指定网站内文档链接的最好方法，因为在我们移动一个包含根相对链接的文档时，无需对原有的链接进行修改。

认识链接的目标：（链接网页打开的方式）

1、_seft为本窗口；

2、_top为上级窗口（使用多级框架时）

3、_blank为打开新窗口；

4、_parent为父窗口（使用框架时）；

5、默认的效果

.第1和第5种情况是相同的，_self表示“相同窗口”。点击链接后，地址栏不变。在网页中没有做设置时，网页链接默认的窗口为_self。.第2和第4种情况，也是相同的。_top表示整页窗口，_parent表示父窗口。实际使用中，它们没有任何区别，地址栏会变化。

._blank是最常见的链接方式，表示超链接的目标地址在新建窗口中打开。

练习

4、打开：未做超链接.html的文件，在此网页中做超链接的练习，参看文件超链接.htm。

五、word和excel文档的导入。

六、利用一个现有网页制作其他网页（相同的页眉，导航，页脚）

例如利用首页index.html制作课程介绍这一页

kcjs.html 步骤：

1、打开index.html文件，把页面中相同的部分如页眉，导航，页脚等保留，不同的地方删除或更改，再保存为kcjs.html2、在需要更改的地方插入图片等其他网页内容。

练习

5、打开index.htm,利用这个网页制作出几个相同的页眉，导航，页脚的网页。并设置这些网页导航的链接，七、行为的简单运用：

（一）利用行为创建弹出式菜单

制作“弹出式菜单”的步骤如下：

（1）在网页上选择要附加该行为的对象（导航栏按钮、链接文本、图片等）并打开“行为”面板。

（2）单击加号(+)按钮并从“动作”弹出式菜单中选择“显示弹出式菜单”，弹出设置对话框，如图14-13所示。

图14-13 设置弹出式菜单

（3）在出现的“显示弹出式菜单”对话框中，使用以下标签来设置弹出式菜单的选项：   内容：设置、更改单个菜单项的名称、结构、URL 和框架目标。

  外观：设置菜单一般状态和滑过状态的外观以及设置菜单项文本的字体选择。  高级：设置菜单单元格的属性。例如，可以设置单元格的宽度和高度、单元格颜色和边框宽度、文本缩进以及在用户将鼠标指针移到触发器上后菜单出现之前的延迟时间长度。

  位置：设置菜单相对于触发图像或链接的放置位置。

（4）单击“确定”，关闭对话框。

（5）检查默认事件是否是所需的事件。该行为的事件一般为“onMouseover”，即鼠标滑过时显示菜单。

（二）弹出消息框。

（三）打开浏览窗口

（1）选择网页中需要点击的内容，在属性面板上的链接栏上填上 #，如下图：

（2）打开「行为」面板，点击（+）按钮并从「动作」弹出式菜单中选择「打开浏览器窗口」；

（3）在打开的浏览器窗口中点击「浏览」选取需要链接的文件，或者输入您需要显示的URL地址。

（4）设置下列选项：

「窗口宽度」指定以象素为单位的窗口宽度。

「窗口高度」指定以象素为单位的窗口高度。

「导航工具栏」是一行浏览器按钮包括「前进」，「后退」，「主页」和「刷新」。

「地址工具栏」是一行浏览器选项，其中包括地址域。

「状态栏」是浏览器窗口底部的区域，用于显示信息（如剩余加载时间，和URL关联的链接）。

「菜单条」是浏览器窗口（Windows）或桌面（Macintosh）上菜单出现的区域。菜单包括如「文件」，「编辑」，「查看」，「转到」，「帮助」等等。如果您需要来访者可以从新窗口导航，那么您可以明确地设置该选项。如果您不设置该选项，来访者在新窗口中将只能关闭或最小化窗口（Windows）或者关闭窗口或退出程序（Macintosh）。

「需要时使用滚动条」指定如果内容超过可见区域时滚动条自动出现。如果您不明确设置该选项，滚动条不会出现。如果「调整大小手柄」也被关闭，那么来访者将没有方便的办法看见超过窗口原始大小的那部分内容。（虽然他们可能可以通过使用拖动窗口边缘的办法使窗口滚动。）

「调整大小手柄」指定用户是否可以调整窗口大小，无论是通过拖动窗口的右下角还是点击右上角的最大化按钮（Windows）或大小框（Macintosh）的办法。如果该选项没有明确设置，调整大小控制将不可用，而且右下角也是不可拖动的。

「窗口名称」就是新窗口的名称。如果您想使用其作为链接目标或者用JavaScript控制它，那么您应该给新窗口命名。该名称中不能包含空格或特殊字符。

（5）点击「确定」。

（6）检查默认事件是否是您需要的事件。

如果该事件不是您所需的，请从弹出式菜单中选择另一个事件。如果您需要的事件没有列出，请在「选择浏览器」弹出式菜单中改变目标浏览器。

（四）在网页中添加背景音乐。（wave、mp3等格式）

练习6：制作利用行为制作弹出式菜单、打开浏览窗口和弹出消息框、在网页中添加背景音乐的练习。

八、内框的运用

src=“nk1.html” frameBorder=0 width=150

scrolling=no

height=130> 滚动内框