Dreamweaver 教案

Dreamweaver 教案

第1章 Dreamweaver 基础知识 什么是Dreamweaver？ Dreamweaver是Macromedia公司推出的可视化网页制作工具，它与Flash、 Fireworks合在一起被称为“网页制作三剑客”，这三个软件相辅相承，是制作网页的最佳选择。其中， Dreamweaver主要用来制作网页文件，是当今最流行的网页制作工具，制作出的网页兼容性比较好，制作效率高，而且很容易上手，可以让你轻松制作出自己的网页。 Flash用来制作精美的网页动画，Fireworks用来处理网页中的图形。

Dreamweaver工作区 浮动面板组对象面板是一组停靠在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。包含多种不同类型的按钮，用于在文档中创建不同类型的对象（如图像、表格和层）。使用“插入”菜单中的命令也可以实现插入各种对象。工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些普通操作（如在浏览器中预览）。用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。站点面板文档窗口显示您当前创建和编辑的文档。使您可以管理组成站点的文件和文件夹。属性面板

菜单栏 “查看”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素以及不同的 Dreamweaver 工具。 “文件”菜单和“编辑”菜单包含用于“文件”菜单和“编辑”菜单的标准菜单项，例如“新建”、“打开”、“保存”、“剪切”、“拷贝”和“粘贴”。 “插入”菜单提供插入栏的替代项，以用于将对象插入您的文档。 “命令”菜单提供对各种命令的访问；包括根据您的格式参数选择设置代码格式的命令、创建相册的命令，以及使用 Macromedia Fireworks 优化图像的命令。 “文本”菜单使您可以轻松地设置文本的格式。 “修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。 “站点”菜单提供一些菜单项，这些菜单项可用于创建、打开和编辑站点，以及用于管理当前站点中的文件。 “窗口”菜单提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。

创建第一个简单网站 一、定义本地站点使用 Dreamweaver 创建 Web 站点最常见的方法就是在您的本地磁盘上创建并编辑网页，然后将这些网页的拷贝上传到一个远程 Web 服务器使公众可以访问它们。所以要解决网页文件的存放位置问题，也就是把这个网页文件放在硬盘上的哪个文件夹（站点）之中。本地站点是本地磁盘上文件和文件夹的集合，它对应于服务器上的WEB 站点。定义站点的操作步骤： 1、选择“站点”>“新建站点”。（即从“站点”菜单中选择“新建站点”。）即会出现“站点定义”对话框。 2、如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一个屏幕，要求您为站点输入一个名称。 3、在文本框中，输入一个名称以在 Dreamweaver 中标识该站点。该名称可以是任何所需的名称。例如，您可以将站点命名为“Mysite”。 4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。

5、选择“否”选项指示目前该站点是一个静态站点，没有动态页。5、选择“否”选项指示目前该站点是一个静态站点，没有动态页。 6、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件。 7、选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。 8、文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver 将在其中存储站点文件的本地版本。若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框。 9、在“选择站点的本地根文件夹”对话框中，先浏览到本地磁盘上可以存放所有站点的文件夹。单击“确定”。（注意文件夹名不要用中文） 10、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务器。 11、现在，从弹出式菜单中选择“无”。单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。 12、单击“完成”完成设置。

二、将资源添加到您的站点 在创建了本地站点之后，如果您已为该站点创建了资源（图像或其他内容片断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。那么当您要向页中添加内容时，这些资源将随时可用。可以使用“站点”面板完成此操作。 • 网站中的命名规则 • （1）最好使用小写英文名称，可以用汉语拼音代替。 • （2）可以包含数字或下划线。 • （3）注意正确的文件后缀名（扩展名）：网页文件的后缀名为：.htm 或 .html。 • （4）默认的主页名称。 index.htm 常常是作为一个网站的“主页”的名称。三、创建并保存新页设置完站点后，您就可以创建网页来填充站点了。当启动 Dreamweaver 时，将自动创建一个空的 HTML 文档。然后将本网页文件保存到本站点中，起名为 index 。程序会自动为网页文件添加 .htm 的扩展名，表示此文件是一个网页，而不是其他类型的文件。

四、页面设置 下面我们开始学习具体的网页设计了。画一幅画，首先得决定用什么样的纸张，用多大的纸画；网页制作也是这样，首先我们要决定采用多大，哪种样式的网页。对页面属性的设置，可通过菜单命令修改/页面属性来完成。其设置面板如图一：在进行网页编辑时，该标题会显示在 Dreamweaver 标题栏上；用浏览器进行查看时，该标题会显示在浏览器的标题栏上。四项属性都为 0 时，网页可以与电脑屏幕完全融合，而不会出现网页边界的空白

注：在 Dreamweaver 中，回车键的功能在于分段；按住 Shift 键同时按回车键，则代表强制折行。两者的区别在于，前者前后的内容属于不同的段落，因此行间距较大；后者同处于一段，只是另起一行，因此行间距比较小。文本文本是网页中最基本的元素，既可以手工逐字逐句地输入，也可以把别的应用程序中文本直接粘贴到网页编辑窗口中。 1、输入文本或粘贴文本就象使用WORD那样把光标放在文档中，然后输入文字。 2、文字属性设置对文本的属性设置，可以通过属性面板完成。

格式：设置文字大小。段落属性可以使选中文字独自成为一个段落，标题1至标题6用来控制文本大小。在 HTML 源代码中，Heading 被简化为 H ，标题1就写成 H 1 ，在这几种格式中，标题1字体最大，标题6字体最小。预先格式化用于预定义一个段落，使用该格式，可以在文本中插入多个空格，从而可以任意调整文本等内容的位置。大小：也是设置字体大小，不过与格式不同的是，标题标记通常赋予标题，字体改变大小的同时变为粗体；如果只想改变文字大小，而不想让字体变为粗体，可以用大小属性。另外，大小只对选中文本起作用，而格式对整段文字起作用。字体：设置字体类型。下拉框中有多种字体可供选择。颜色：选中文字，然后在弹出的色板中进行颜色选择。也可以直接在颜色输入栏中输入颜色的十六进制代码，如常见的红色(#ff0000)，绿色(#00ff00)，蓝色(#0000ff)。加粗、倾斜：使文字变为粗体字、斜体字。居左、居中、居右：使整段文本居左、居中、居右排列。

输入空格 在DW中，直接按空格键不管按多少次，都只显示一个空格，如果要连续输入几个空格，方法如下：方法一：单击[编辑]/[首选参数]命令，在弹出的对话框的[分类]列表中选择[常规]选项，在右侧选中[允许多个连续的空格]复选框。方法二：把中文输入法切换到全角模式。方法三：在属性面板的“格式”列表中选择“预先格式化的” 。方法四：在[对象]面板的[字符]选项卡中单击“不换行空格”按钮。输入特殊字符方法：从“对象”面板或输入法的小键盘中添加。

水平线 方法一： 1、单击插入面板中的常用选项卡/水平线按钮可以完成水平线的插入。或用插入菜单中的水平线命令。 2、然后在属性面板中设置其属性。（1）宽：是水平线的长度。像素是计量单位。（2）高：是水平线的高度。（3）对齐：是水平线的对齐方式。 3、水平线颜色的设置：先选中水平线，然后切换到“代码视图”方式，在<hr>中加入颜色的设置代码，如：<hr color=“对应颜色的代码”>，例要设置红色水平线：<hr color=“red”>或<hr color=“ff0000”> 方法二： 1、插入一个一行一列的表格； 2、设置表格的高为1（如想水平线粗就设大点），背景颜色为水平线的颜色； 3、选定表格，在代码窗口将<td>和</td>之间的“ ”删除，刷新即可。

图片 一．插入图片： 1、单击插入面板中的常用选项卡/图像按钮可以完成图片的插入。或用插入菜单中的图像命令。如果该图片不在网站目录中，将弹出对话框询问是否把该图片复制到网站目录下，这时请回答 Yes ，否则上传到网上后会因文件地址不正确显示不出图片。 2、然后选中这个图形，这时可查看图形属性面板。其中：(1) 宽（W）和高（H）是图形的宽度和高度。插入图形后，Dreamweaver 会自动给出图形的原本宽度和高度。这时可调整图形的宽度和高度，以放大或缩小图形的显示尺寸。但改变的只是图形用浏览器显示的尺寸，图形本身的尺寸并没有任何变化。因此，不要指望用Deanweaver 缩小图形尺寸，来提高页面下载速度。 (2) 源文件后是你这个图形的地址，可填入另一图形的地址，以替换掉这个图形。 (3) 对齐后选框是图形与文本的相互对齐方式，其后的下拉选框有十个选项默认值、基线、顶端、中间、底部、文本上方、绝对中间、绝对底部、左对齐和右对齐。基线和底部是图形底部和文本的顶行对齐。绝对底部是图形底部和文本的最底线完全对齐。顶端是图形顶部和文本的顶线完全对齐。文本上方是图形顶部和文本顶线对齐。中间是图形中央和文本底线对齐。绝对中间是图形中央和文本的正中间对齐。左对齐是图形在左，文本在右；右对齐则反之。

(4) 定义图形在页面中的对齐方式。左对齐，居中对齐，右对齐。效果和文本在页面中的对齐一样，不再赘述。 (5) 在替代后，可填进说明文字。当别人访问你的页面，在图形显示之前，图形位置将显示你填的这些文字。这样在图形没显示出来之前，别人就能知道图像所要说明的内容。 (6) 在低品质源后填入另一个图形的路径，这个图形一般为原图的低品质替换图。在原图没显示出来之前就先显示这副，让别人能迅速大体了解图形的内容。 (7) 水平边距是图形左边和其左方其它页面元素，及图形右边和其右方其它页面元素的距离。 (8) 垂直边距是图形顶部和其上方其它页面元素，及图形底部和其下方其它页面元素的距离。 (9) 边框后可填入图形边框的宽度。 (10) 其它将在超链接一课中详述。

当鼠标移到一幅图像上时，该图像变成另外一幅图像，当鼠标离开图像时，图片又还原成原来的模样。当鼠标移到一幅图像上时，该图像变成另外一幅图像，当鼠标离开图像时，图片又还原成原来的模样。鼠标经过图像一．插入鼠标经过图像：插入/交互式图像/鼠标经过图像命令，或者单击常用面板中的鼠标经过图像按钮来创建，其对话框设置如下：图像名称：不要用中文。本参数主要用来作为 Javascript 的调用对象，一般采用默认名字就行了。原始图像：原始图片，即一般情况下的图片，可以通过点按右边的文件夹标志在硬盘上找到该图片。鼠标经过图像：翻滚图片，就是当鼠标移上原图时要用哪张图片代替原图。预装鼠标经过图像：建议勾选，因为它可以在页面打开时就先读取资料，而不是当鼠标事件发生时才读取，有利于保持动作的流畅性。按下时前往的 URL：用鼠标点击翻滚图时跳转到哪个链接页面，可以是绝对地址，也可以是相对地址。

插入导航条 制作步骤：在“常用”面板中选择“导航条”按钮，打开一个窗口。在“项目名称”框中输入一个名称，进行标识导航条成员的名称。在“状态图像”框中选择一个图片，作为原图； “鼠标经过图像”用于设置当鼠标经过原图时，原图会变成这个图。这个和鼠标经过图像意思一样。 “按下图像”用于设置当按下鼠标时显示的图像。 “按下鼠标经过图像”用于设置当单击过鼠标后又在上面移动鼠标时显示的图像。在“按下时，前往的URL”框中输入当单击鼠标后要打开的网页。 [页面载入时就显示“鼠标按下图像”]：用于在打开网页时先显示按下时图像选项中设置的图像。按增加按钮“+”，会增加一个导航元件，然后重复第二步。最后确定。

插入flash按钮 步骤： 1、单击[媒体]对象面板中的“flash按钮”按钮。在插入Flash按钮或Flash文本之前必须保存文档。 2、在对话框的[样式]列表框中选择一种样式，在[按钮文本]中输入在按钮上显示的文字，在[另存为]用于保存当前所选flash按钮为flash电影文件。例：分别插入4个Flash按钮作为导航条：公司简介、产品介绍、服务项目、联系我们。

上机作业： 一、上机目的： 1、熟悉Dreamweaver的工作环境。 2、学习建立一个含有文本和图片的简单网页。二、上机内容： 1、Dreamweaver工作窗口、插入面板、属性面板、浮动面板的使用。 2、建立一个本地站点。（记住站点文体夹不要用中文） 3、建立一个简单网页，设置页面属性。 4、创建导航条，有4个导航元件。 5、插入Flash按钮制作导航栏，有4个栏目。 6、在网页中插入文本和图片。并在属性面板中设置它们的各种属性。

表格 一．表格概述：在实际制作过程中，表格更多地用在网页定位上，它可以控制文本和图像在页面上的出现位置，只需通过设定表格宽度，高度，彼此之间的比例大小，等等，就可以把不同的网页要素分别"框"在不同的单元格之中以达到页面的平衡。　　表格在网页定位上，除了精准控制的特点外，还具有规范、灵活的特点，正是因为这些原因，表格在网页制作过程中扮演着重要的角色。事实上，国内的许多大型网站的页面，都应用到了表格定位技术。二．表格的创建：（1）单击常用面板中的插入表格图标，或者选择插入菜单中的表格命令，弹出一个窗口，如图一：

（2）在行数文本框中输入表格的行数。（3）在列数文本框中输入表格的列数。（4）在宽度文本框中输入表格的宽度大小，可以是相对比例（百分数），也可以是绝对尺寸。（5）在边框文本框中输入表格边框的宽度，表格中的单元格的边框则不受该值的影响。（6）在单元格填充文本框中输入表格单元格中的内容与单元格边界的距离值。（7）在单元格间距文本框中输入单元格与单元格之间的距离。（2）在行数文本框中输入表格的行数。（3）在列数文本框中输入表格的列数。（4）在宽度文本框中输入表格的宽度大小，可以是相对比例（百分数），也可以是绝对尺寸。（5）在边框文本框中输入表格边框的宽度，表格中的单元格的边框则不受该值的影响。（6）在单元格填充文本框中输入表格单元格中的内容与单元格边界的距离值。（7）在单元格间距文本框中输入单元格与单元格之间的距离。提示：创建表格时，如果开始不能确定它的属性，可以使用默认值，然后再通过属性面板进行修改；另外，关于“宽度”的设定，一般来说，大表格往往采用绝对尺寸（单位为像素），表格中所套的表格采用相对尺寸（单位为百分比），这样定位出来的网页才不会随着显示器分辩率的差异而引起混乱。

表格属性面板中的属性设置： 对齐：表格的对齐方式，分别是居左，居中，居右。背景颜色：表格的背景颜色。边框颜色：只有当边框值大于 1 时本参数才有意义。背景图片：表格的背景图片。：清除行高与列宽。对所有单元格的宽度、高度进行压缩，直到内容最多的单元格与上下左右边界之间没有空隙为止。：根据表格的当前值，分别将表格比例改为绝对尺寸或者相对比例尺寸。三、表格的基本操作：在使用表格的过程中，常常需要对表格进行修改，如插入新行、拆分表格删除行等，这些操作可以通过修改菜单中的表格命令来实现，也可以通过右键菜单中的表格命令来实现。

四．单元格操作： 单元格的属性和表格的属性是不一样的，单元格有自己独立的属性，用鼠标点击表格任一单元格，属性面板中的设置如下：水平：单元格中图片或文本的水平方向的对齐方式。垂直：单元格中图片或文本的垂直方向的对齐方式。宽：单元格宽度，可以是百分数（如两个单元格组成一个表格，一个单元格可以设值为 30% ，另一个则设值为 70% ），也可以是绝对尺寸。高：单元格高度。不换行：强制不断行，所有内容在一行显示。值得提醒的是，此参数往往撑大整个表格，建议不要选。背景：单元格背景图片。背景颜色：单元格颜色。合并/拆分单元格：合并单元格，可以把一行或者一列单元格合并成一个，也可以把同行或同列中某几个单元格合并起来；拆分单元格，可以将一个单元格拆分成几个按行或按列排列的单元格。边框：边框颜色，只有当表格的边框宽度不为0时有效。五．总结：　　前面我们说表格是一种最基本的网页定位技术。但表格也并不是没有缺点，它的最大问题在于表格内容的下载比较耗时，往往要一个表格中全部内容下载完成后才能显示该表格内容，因此，对于表格的嵌套使用，大家应该注意，尽量不要嵌套过多的表格，以影响页面的下载速度。

布局表格 • 在标准模式下使用表格布局不是很方便，在布局模式下布局网页比较灵活。 • 单击“布局” 面板可以切换到布局视图。 • 在布局视图中，您可以在页上绘制布局单元格和布局表格。绘制一个布局表格: 单击插入栏“布局”分类中的“绘制布局表格”按钮, 将鼠标指针放置在页上，然后拖动指针以创建布局表格。按住Ctrl 键可绘制多个布局表格。表格不能重叠，也不能在同一行。 • 绘制布局单元格：单击插入栏“布局”分类中的“绘制布局单元格”按钮，将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。按住Ctrl 键并拖动指针可创建多个布局单元格。布局单元格不能存在于布局表格之外，也不能互相重叠。 • 绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。单击插入栏“布局”分类中的“绘制布局表格”按钮。鼠标指针变为加号 (+)，指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。

移动布局单元格和表格及调整它们的大小 调整布局单元格的大小: 选定一个单元格，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。移动布局单元格: 按住 Ctrl 键的同时单击该单元格中的任何位置, 将该单元格拖到其布局表格中的另一个位置。按箭头键移动该单元格，每次移动 1 个像素。在按住 Shift 键的同时按箭头键移动该单元格，每次 10 个像素。注意：移动单元格时，不能移出所在表格之外。调整布局表格的大小: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。移动布局表格: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。将表格拖到页上的另一个位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。

调整单元格大小和实际大小一致，设置列宽度为自动伸展调整单元格大小和实际大小一致，设置列宽度为自动伸展如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小设置：（1）选择使单元格宽度一致。（2）设置列宽度为自动伸展。设置列宽度为自动伸展的意义：把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。自动伸展列的宽度随着浏览器窗口的宽度自动变化。自动伸展列的列标题区域显示波浪线而不是数字。在一行中，最好只选择最右边的一列为自动伸展。选中一列的标题区域，选择“列设置为自动伸展”。如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。按确定按钮，自动会有一个spacer.gif文件，选择保存。自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。

超级链接 • 超级链接是网页的灵魂。通过超级链接的方式可以使各个网页之间联接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。 • 超级链接的对象可以是一段文本、一副图像或其他网页元素。点击这些文字，图片，或其他元素就可以打开相应的页面。 • 路径问题： • 在创建超级链接和插入图片的过程中，路径非常重要。有两种路径——绝对路径和相对路径。 • 绝对路径是包含服务器协议（如在网面上通常是http://或ftp://）的完全路径，是精确位置，而不考虑源文件的位置。如果目标文件被移动，则超链接无效。创建当前站点外文件的超级链接时必须使用绝对路径。 • 相对路径可分为和根目录相对的路径及和文档相对的路径。

（1）和根目录相对的路径是从当前站点的根目录开始和根目录相对的路径可以使用斜杠告诉服务器从根目录开始。例如：/index.html 将链接到站点根目录的index.html 。但是和根目录相对的路径不适合在本地查看站点。当在浏览器中按照本地方式预览文件时，和根目录相对的路径所链接的内容不会出现。这是因为浏览器不能像服务器那样识别站点根目录。要预览和根目录相对的路径所链接的内容，必须将文件放置到远程服务器，从那里进行查看。（2）文档的相对路径是指和当前文档所在的文件夹相对的路径例如：文档 index.html 在文件夹 ming 中，则pic/aaa.jpg指定是在ming文件夹下pic文件夹中的aaa.jpg文档。注：在创建文档的相对路径之前必须保存新文件，否则文档的相对路径是无效的。在文档保存之前，Dreamweaver会自动使用以File://开头的绝对路径。创建当前站点内部文件的超级链接时应使用相对路径。

1、文字链接的建立： 选中要做链接的文本，然后使用下面方法之一可创建链接：方法1：按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。方法2：在属性面板的 “链接” 中输入要跳转到的目标页面。方法3：输入框旁边有个指向文件图标，也可以通过拖拉该图标建立超链接。方法4：有个文件夹图标，也可以通过点击它找到目标页面。提示：链接文件如果是网页文件，浏览器就会打开该网页并进行显示；如果是浏览器本身不能显示的文件，则会弹出提示框让你决定是否进行下载。打开方式的设置：在属性窗口中有个[目标]选项，是用来设置超级链接打开的页面显示的窗口及框架： _blank：表示另外打开一个窗口，用新窗口显示该链接网页。_self：在本窗口中打开链接页面。_parent：在父窗口中打开链接页面，主要用于框架结构的页面。_top：整个浏览器窗口，主要用于框架结构的页面。一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。例：导航图像的链接。 2、图像链接的建立：例：上一页、下一页的链接。和设置文字链接一样。

图片链接中，还有这样一种情况：图片比较大，分为几个区，点击不同的区可以打开不同的网页。图片链接中，还有这样一种情况：图片比较大，分为几个区，点击不同的区可以打开不同的网页。 3、图片的热区映射图：图片的热区映射制作也很简单，先选中图片，属性面板左下角的三个热点工具图标就是用来创建热区映射的，它们分别是矩形、椭圆、多边形热点工具。制作方法： 1、选中要制作热区的图片 2、在属性面板中选择一种矩形热点工具 3、在图片上的画出一个矩形框，然后在属性面板的“链接”框内输入映射的地址就行了。4、可以调整热区的大小和位置。另外，属性面板上还有一个 “替代” 输入框，它是用来为图像进行说明的。，当鼠标移动到图片上时， “替代” 中的文字内容就会显示在图片上面。它还有一个用途，当一些用户屏蔽了图片功能，以纯文本形式进行网页浏览时，有 “替代” 标记的图片虽然不能显示，但会在该图片区域显示出图片的介绍信息。

4、网页文件的内部链接： 锚点常用于长篇文章、技术文件等内容的网页，在网页中使用锚点来链接文章的每一个段落，以方便文章的阅读。要建立文件内部链接，必须经过两个步骤： <1>. 在被链接的部分前面加上一个位置标识（又称为锚点），以便被指定连接。在 Dreamweaver 中，此功能可以用菜单命令 “插入/命名锚记” 完成。也可以单击常用面板上的“命名锚记”图标，然后会弹出一个窗口，让我们输入锚记名称，这里输入一个名字就行了，注意不要使用中文，一个站点中的锚记名称只可以是唯一的，否则会出现错误。这时，就完成了锚点的设置。 <2>. 链接的指定：　　现在我们选择作为超级链接的网页元素，如图片，文字等，然后在其属性面板的 “链接” 栏中输入： #名称。请注意，这个名称就是刚才我们为那个锚点起的名称，另外，“#”号与名称之间没有空格。如果要从一个文件内跳转到另一个网页文件的某处，可以先在另一个文件中设置锚点，再在第一个文件中设定链接地址，不过这个地址请注意，它是由"路径 + 另一个文件名 + #Name "组成的。提示：

5、邮件链接 （1）选择需要作为邮件链接的文字。（2）在属性面板的链接文本框中输入邮件地址。注意：属性面板的链接文本框中在邮件地址前面需要添加 mailto:，表示该超链接是邮件链接。当用户单击该超链接时，系统会弹出默认的邮件程序，并在“收件人”栏中显示创建邮件的地址。 6、空链接使用空链接可以为页面上的对象或文本附加行为。创建步骤：1、在文档窗口中，选中要设置链接的文本、图像或其他对象。2、在属性面板的链接框中，只输入一个“#”号。3、如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件。可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。4、还可以在属性面板的链接框中输入javascript:;创建空链接。

7、创建跳转菜单 跳转菜单使用弹出式下拉菜单实现页面的跳转链接。例如制作一个友情链接。步骤： 1、将插入点放在要插入链接的位置。点击表单面板中的跳转菜单按钮。2、在插入跳转菜单对话框中，点添加项添加新链接。添加多个菜单项显示建好的菜单输入要在菜单列表中显示的文本。输入链接地址网页打开的位置

上机作业： 1、将上次上机所做的网页中的文本和图片放到表格中，通过表格来布局你的网页。 2、在网页中插入一幅图像，在该图像中定义三个不同的热点区域，定义第一个热点区域为圆形，第二个为矩形，第三个为多边形，然后在图像的热点区域上建立超链接。 4、在网页上制作内部链接、邮件链接、空链接、跳转菜单。

层层（Layer）的功能：层是一个可以容纳页面元素的对象，在层中可以添加文字、图片、表格和其他对象。它为网页设计者提供了强大的网页控制能力：一个网页可以有多个层；各个层可以重叠，可以设定是否可见，是否有子层，等等。在 Dreamweaver 中，层既可以作为一种网页定位技术出现，也可以作为一种特效形式出现。一．创建层：选择插入菜单中的层命令，可以创建一个层，网页编辑区域会出现一个灰色矩形块，它就是插入的层。或者单击常用面板中的描绘层图标，然后用鼠标在页面中绘制一个矩形来创建一个层。

激活层（才能将对象放入层中）方法：在层内任何地方单击。激活层（才能将对象放入层中）方法：在层内任何地方单击。 • 选择层（可以进行移动、调整大小、设置属性等操作）三种方法： • （1）单击层锚记。 • （2）单击层的控制柄。 • （3）单击层边界。 • （4）单击层面板中的层名称。 • 选择多层：按Shift键单击。 • 移动层：单击控制柄或单击层的边框，拖动到目标位置。 • 调整层的大小：（1）拖动的方法；（2）属性面板设置方法。 • 对齐层：选择要对齐的层  选择[修改]/[对齐]命令  选择对齐选项。

嵌套层： • 在一个图层内部绘制另一个图层，可绘制出嵌套层，或激活层，单击“插入”中的“层”命令，也可插入嵌套层。这时子层图标在父层内。移动父层，子层跟着移动，子层继承父层的可见性。 • 设置层的属性（Window/Properties）层编号：层的名称，不要用中文。左与上：层左边界/上边界距离浏览器窗口左边界/上边界的距离，它决定了层在网页中的显示位置，应该加以重视。宽与高：层的宽度与高度，输入数值可以精确控制其大小，如果不需很精确，也可以用鼠标拖动层边框改变其大小。 Z轴：层顺序号。前面我们说过，层的一大功能在于多个层的重叠，为了确定哪个层在最上面，哪个层在下面，就得给层添加一个顺序。默认情况为，数值大的层在上面。如果层不重叠，则该值没有实际用途。背景图像与背景颜色：层的背景图片与背景色。显示：共有三个重要的属性可供选择，Inherit （继承），本属性主要用于层的嵌套，子层可以继承父层，当父层发生位移，或者可见性发生改变等等情况时，子层也跟着发生同样的变化； Visible （可见），将层设为可见； Hidden （隐藏），将层隐藏起来；Default表示不指定层的可见性属性。

标签：层中 HTML 源代码中的标记形式，有 Span/DIV/Layer/ILayer 四种，建议采用默认设置的 DIV ，因为这种标记可以同时被两种主流浏览器即 IE 与 Netscape 所识别。溢出：层内容超过层大小时的显示方式，共有四种参数：Visible：通过扩大层大小将所有内容全部显示出来。Hidden：超过层大小的内容隐藏，也就是说层中只显示一部分内容。Scroll：不管内容是否超过层的区域大小，层右部与下部都会有滚动条出现。Auto：如果内容超过层的区域才会出现滚动条。剪辑：本参数比较特别，用来控制某个层中哪个区域内的内容是可见的，超过这个区域的同层内容则不可见。其中左、右表示可见部分的左边界或右边界到层的左边框的相对距离，上、下表示可见部分的上边界或下边界到层的上边框的相对距离。二、层面板层控制面板位于“框架”浮动面板中，选择“窗口”-->“其它”“层”命令可以打开层面板。使用层面板可以进行下面的设置： 1、改变层的可见性；2、改变层的堆叠顺序；3、改变层的名称；4、防止重叠。

三．层应用： • 制作阴影字步骤： 1.建立一个层，并在里面输入 SCHOOL 字样，字体为默认的黑色。如图四：图四图五图六 2.再建一个层，用同样的字型，大小输入 SCHOOL 字样，字体颜色改为红色。如图五： 3.选中后面建立的层，你会发现其左上角有个矩形框，点中它后将层向右向下移动到合适位置，最后就做成了如图六的效果。这就是层的简单应用。

利用层制作弹出信息 1、插入一张表格，居中。 2、在表格中插入一个图像，在图像文字上绘制热区。 3、在页面中插入层，设置层的属性。 4、在层中插入表格，表格宽度为90%，居中对齐，并输入文字。 5、选择热区，单击行为面板中的+按钮，在弹出的下拉菜单中选择”显示—隐藏层“。 6、在对话框中，选择层layer1，单击“显示”按钮，然后确定。 7、单击行为面板的onClick事件按钮，在下拉菜单中选择onMouseOver。 8、单击行为面板的+按钮，选择“显示—隐藏层”。 9、在对话框中选择layer1，单击“隐藏”按钮，然后确定。 10、单击行为面板的onClick事件按钮，在下拉菜单中选择onMouseOut。 11、隐藏层 layer1。 12、重复以上5至11步骤。

在时间轴上可通过在不同的时间更改层的位置、大小、可见性和层叠顺序等。由于时间轴只能移动层，可将图像、文本等其他对象插入层中，通过移动层不移动这些对象。在时间轴上可通过在不同的时间更改层的位置、大小、可见性和层叠顺序等。由于时间轴只能移动层，可将图像、文本等其他对象插入层中，通过移动层不移动这些对象。时间轴也叫时间线，通过往这条线上不同的时间部位放置不同的内容，就可以实现网页元素的动态效果。时间轴一．时间轴基础：时间轴面板：时间轴选择框，如果你在网页中使用了多个时间轴，就可以在选择框进行时间轴的选择，并可在动画中进行时间轴的自动切换。：前进一帧。：返回第一帧。：当前帧序号。 FPS：动画的播放速度，即每秒播放多少帧的意思。自动播放：也就是网页打开后动画自动播放。循环：也就是动画播放完毕后又重新开始播放。横向标尺状数字：帧序号，可以方便地知道目前处于哪一帧（红色块状）。

二．建立时间轴动画： 1、选择[窗口] / [其他] / [时间轴] 命令，调出时间轴面板。 2、用“层”命令，在编辑区域的左上角建立一个新图层，并在图层中输入“欢迎光临本站”字样，字取红色。 3、选定本图层，然后用鼠标拖动图层左上角的矩形控制柄到时间线的第一帧处。可以看到插入的动画长度默认为15帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏两端自动加入了两个关键帧。 4、将第15帧拖到第30帧，让播放时间变长。 5、单击关键帧第30帧，在文档窗口中选择该层，并拖动该层移动一定的距离后释放鼠标。可以看到动画起始位置到结束位置之间有一条线显示，这就是层的运动轨迹。 6、选中时间轴面板中的自动播放、循环两个选项。

三．制作曲线动画 如果时间轴中只有两个帧，则创建的时间轴动画轨迹是直线，如果想使时间轴动画作曲线运动，必须在时间轴中添加关键帧（方法：在时间轴上按住Ctrl键并单击或右键选择“增加关键贞”）。四．通过记录路径方式创建时间轴动画 1、选择刚才制作的层，并选中层。 2、选择[修改] / [时间轴] / [录制层路径]命令，然后在文档窗口中拖动层，按照自己的需要拖动层来创建动画路径。完成后释放鼠标。 3、选中时间轴面板中的[自动播放]和[循环]两个复选框。

五．制作显示-----隐藏效果动画（幻灯片特效）五．制作显示-----隐藏效果动画（幻灯片特效） 1、在文档窗口中插入一个层，在层中插入一幅图。 2、在[属性]面板中设置该层的[显示]属性为Hidden，把它隐藏起来。 3、重复第1、2步骤，需要制作几张幻灯片就创建几个隐藏层，在层中插入图片。这里做4张幻灯片。做隐藏层时一定要几个层位置一样。可以通过属性面板设置，也可以通过复制层。 4、在文档窗口中选择层Layer1，将其拖动到时间轴的第一个通道中的第1帧。 5、通过同样的办法，将Layer2层拖动到时间轴的第二个动画通道中的第15帧。 6、通过同样的办法，将Layer3层拖动到时间轴的第三个动画通道中的第30帧。 7、通过同样的办法，将Layer4层拖动到时间轴的第四个动画通道中的第45帧。 8、在第一帧上方的行为通道单击，然后单击行为面板中上的加号按钮，从打开的下拉菜单中选择[显示----隐藏层]命令，调出[显示----隐藏层]对话框，然后设置 Layer1为显示，其余层不进行设置，保持原来的隐藏状态。 9、通过同样的方法在第16帧上方的行为通道中加入行为，这次将Layer1 隐藏起来，Layer2显示。也就是动画在第16帧处换图片。 10、按同样的方法分别在第31帧和第46帧处加入行为，将一个隐藏，另一个显示。达到换图片的目的。 11、在最后一帧加入隐藏Layer4的行为，还要加入[转到时间轴帧]的行为。让动画在最后一帧时转到第1帧重新开始。还要选中[自动播放]复选框。

练习： 1、在网页中插入一个层，层中输入你喜欢的文字，然后将该文字制作成有阴影的特效。 2、制作弹出提示信息。 3、使用时间轴，制作一个图片作圆周运动的动画[提示：近似就可以了]。

框架 • 框架是一种先进的web技术，它比模板更灵活，可以方便创建使用相同布局的多个页面。使用框架页面的主要原因是为了使导航更加清晰，使网站的结构更加简单明了。 • 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，根据需要在某些区域放置不需要改变的元素，某些区域放置需要改变的内容。 • 框架实际上是由两部分组成，即框架集和框架。 • 框架集是一个HTML网页，它定义了一组框架的布局和属性。框架就是框架集上定义的一个区域，每个框架都显示单独的 HTML 文档。如果一个页面包含了3个框架，则加上框架集，该页面对应的HTML文件就会有4个。 • 框架集被称为父框架，其中每个框架都被称为子框架。

创建框架网页步骤： 1.选择“文件”>“新建”； 2、在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择合适的框架集； 3、单击创建。 4、选择“文件”>“保存全部”命令。（框架网页保存时，先保存框架中的网页，然后保存框架集。）拆分框架1.在框架页面中，将插入点放在边框上，出现双向箭头。2.拖动边框，产生一个新的框架文件。3.在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。4.选择“文件”>“保存全部”。注：要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住 Alt 键的同时拖动框架边框。

查看和设置框架集和框架属性选择“窗口”>“其他”>“框架”,打开“框架”面板。 在“框架”面板中单击环绕框架集的边框，选中框架集。在属性面板上设置框架集属性。在“框架”面板上单击某个框架，选中该框架，在属性面板上，设置框架属性。设置链接的目标框架在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。_blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。_self 在当前框架中打开链接，同时替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。如果链接需要在框架页之外打开，使用 target="_top" 或 target="_blank"。改变框架背景颜色在框架中右击，单击弹出菜单的“页面属性”命令。

用于框架的行为 单击一个链接更改两个或多个框架的内容选中一个链接后，重复使用“转到 URL”行为。1.首先假定已经建立了一个框架页面，有一个链接在“mainFrame”中打开，现在要做的是，点击链接后，改变其它框架中的内容。选中一个链接，打开行为面板，选择“转到 URL”行为。2. 选择要改变的框架名称。实例中选择“topFrame”框架。3.选择要在所选框中显示的框架文件URL地址，可以是站内文件，也可以是网址。这个时候，点击链接，不仅可以改变“mainFrame”框架中的内容，还可以改变“topFrame”框架内容。4.如果想点击链接，改变更多的框架内容，重复使用“转到 URL”行为。在框架中使用跳转菜单使用“插入跳转菜单”命令，可以设置当单击时在浏览器窗口中打开文件的链接的菜单列表，设置要在其中打开文档的特定目标窗口或框架。操作步骤：选择“插入”栏中的“表单”选项卡，然后单击“跳转菜单”按钮。设置框架文本使用指定的内容代替给定框架的内容和格式。操作步骤：选中一个链接，打开“行为”面板，单击加号 (+) 按钮并从“动作”弹出式菜单中选择“设置文本”>“设置框架文本”。可以输入任何有效的HTML。

实例：

HTML英语意思是：Hypertext Markup Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，关于HTML语言一个html文件应具有下面的结构： <html>html文件开始<head>文件头开始<title>文件标题</title> </head>　文件头结束<body>文件体开始　文件体</body>文件体结束</html>html文件结束所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

Dreamweaver 教案