Dreamweaver MX2004教案 第一周 星期五 第5，6节课 题
网页设计概述
教学目标
1、了解网页设计原则；2、了解网页设计制作工具；3、了解站点规划基本流程。
教学重点
1、网页设计及布局原则；2、站点规划基本流程。
教学难点
1、网页设计及布局原则；2、站点规划基本流程。
教
学
过
程
基础概念
1、网页：网站中供用户阅读的一个个页面，又称为WEB页。是通过超级链接将各种文档连接起来的一个大规模信息集合。网页（Web页）一般指文件扩展名为htm（或html）结尾的文档。这些文档是用文本标记语言HTML表示出来的，故通常也称之为HTML文档。这种语言要通过IE浏览器“翻译”过来我们才能直接访问。
2、主页（Homepage）：是各个网站向用户提供的最初起始页面。通常包括通向其它相关页面的超级链接。
3、万维网：（World Wide Web）简称WWW，或3W，是目前INTERNET网上最流行的一种基于超文本形式资源组强形式。
浏览器：网络中资源要通过浏览器来访问（IE、Netscape、腾讯）。
统一资源定位器（universal resource locator，URL）：用来指出某一项信息所在位置及存取方式，也就是我们经常所说的网址。
通信协议 HTTP：超文本传输协议
FTP：文件传输协议二,网页包括的主要元素
1,文本：信息载体和交流工具，网页的主体以文本为主。文本格式有（字体、字号、颜色等）
2,图像：在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。图像在网页中可以使用多种文件格式，但使用最多的还是JPEG和GIF两种格式，因为这两种图像格式占用空间最少。网页中使用图像不宜太多，每张图像也不宜太大，图像过多传会让人觉得累赘，过大会影响网页的传输速度。
3,超级链接：它是Internet上最受欢迎的基于超文本方式的多媒体信息查询系统。它是从一个网页指向另一个目的端的链接。该链接可以指向该网站的另一个网页，也可以指向世界各地的其他网页。文字或图像都可以设置超级链接。链接一般包括两种类型：站内和站外链接。
4,导航栏：是网站设计者规划好网站结构后必须考虑的一个问题。为了让访问者顺利浏览，避免访问者迷失方向，可以在网页上设置导航栏；它能使访问者方便地返回主页或者继续进一步访问。导航栏可以是按钮、文本超级链接或者图像，可以在站点的每一网页上设置导航栏，一般情况下导航栏应放在网页中比较显眼的位置。
5,表格：在网页中的表格主要是一种用来控制网页中页面布局的有效方式。为了达到较理想的视觉效果，通常都有不显示边框。
6、表单：是一种特殊的网页元素，它通常用来收集信息或实现一些交互式效果。其主要功能是接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。
7,多媒体及特殊效果：有些网页为了吸引浏览者，可级还会有声音、动画、视频等多媒体元素以及悬停按钮，Java、ActiveX控件等特殊效果。
教
学
过
程
网页设计原则正确分析网页用户需要；
网页命名要简洁 在助于管理网页
方便用户搜索确保页面导览性好网页下载时间不宜过长网页设计做到不同环境均能浏览网页中的图形设计（.gif和.jpg/jpeg）
站点内容搭配（图文并茂、美观大方）
尽量使用相对链接页面色彩（页面色彩是树立网页（站）形象的关键因素之一，在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性）
10、网页的文字（四大原则）
原则一：不要使用超过3种字体的文字类型，否则网页看起来将显得杂乱，没有主题。
原则二：不要用太大的字，因为版面空间非常宝贵和有限。
原则三：最好不要使用不停闪烁的文字。
原则四：标题文字字体应比正文稍大，颜色有所区别。
网站规划流程确定网站规划主题搜集资料规划网站选择合适制作工具制作网页上传测试
7、推广宣传例如：设计一个学习型的网站其模块（结构可以设计如下）
首页、图像处理（FIREWORKS、PHOTOSHOP）、动画（FLASH MX2004、COOL 3D、3DS MAX）、网页设计（FRONTPAGE、DREAMWEAVER、PHOTOSHOP）、程序设计（VB、C、PASCAL、DELPHI）、教程下载、学习园地、联系我们网站分类门户网站：如www.sina.com.cn
职能网站：如www.alibaba.com.cn
专业网站：如www.cctv.com
个人网站：如www.wu.com
课堂小结、作业网页设计原则 2、网站规划流程 3、常用工具教学反思：本堂课主要学习了网页的主要制作和设计流程的知识简介。在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制作软件的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼。
Dreamweaver MX2004教案 第二周 星期一 第3、4节课 题
网站制作流程
教学目标
1、掌握网站制作的基本流程；2、掌握网站初期规划；3掌握网站整体布局。
教学重点
网点制作的初期规划
教学难点
网点制作的初期规划
教
学
过
程
一 制作网站的流程
建立一个网站上一个系统工程，有自己特定的工作流程，只有遵循这个步骤，才能设计出一个令人满意的网站。下面我们就来谈一谈网站设计的基本流程。网站设计主要分三个阶段。初期规划、中期实际制作、后期维护。
（一）初期规划：
1、确定网站的主题、名称：主题鲜明、小而精、体现个性。
2、搜集材料：可以从各类媒介中收集，但就注意要有特色（自己的东西）。
3、规划网站：包括要栏目的设置、目录结构、风站的风格等。网站风格主要体现在：
①颜色的搭配：
②网站的标志（Logo）
③版面的布局：突出重点、平衡和谐，网站标志、主菜单等重要模块应放在最显眼、最突出的位置，然后再安排次要模块（如搜索、友情链接、计数器、版权信息、E-mail地址等）。
④图像的运用：整个页面不要太花，暄宾夺主主，图像大小（字节数）尽可能缩小，单张图像不要超过30KB，每页图像总量不要超过60KB。最好采用JPG和GIF两种图像格式。
（二）、实际制作
1、制作网站主要包括以步骤：
① 建立一个用于容纳首页及相关网页和网站中用到的其他文件的本地站点。
② 在站点根目录下创建子目录 （为了使文件安排比较清晰，将页面文件和图像文件分开放置）。
③ 向该站点中添加所需的空网页。注意：文件名和目录都不能使用中文，且用小写。
④ 设计网页尺寸：目前大都采用的是15寸显示器，页面大都设为800╳600规格，网页应选择760╳420模式。
⑤ 设置网页的属性；包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。
⑥ 向网页中插入文本、图形图像、动画等对象，并将图像合理布局。
⑦ 建立所需的超级链接。
⑧ 预览和保存网页。
2、上传测试网页制作完毕后一般要进行测试。主要包括上传前兼容性测试、链接测试和上传后实地测试。完成上传前所需的测试后，利用FTP工具把网页发布到自己申请的主页存放服务器上。网站上传达室后要在浏览器中打开自己的网站，进行实地测试，发现问题及时修改，然后再上传测试。全部测试完毕后就可以把网址告诉给朋友，让他们不浏览。
（三）、后期维护推销网站：网页做好后，要不断地进行宣传，提高网站的访问率和知名度。推广网站的方法很多，如E-mail、新闻组、与别的网站交换链接、到搜索引擎上注册、加入交换广告等。
2、维护更新：网站要注意定期维护、扩充内容，不要长期不变，只有不断补充新的内容。才能吸引住浏览者。同时，随着软硬件的进步，网页设计也应由文字向多媒体、由平面向立体动画或影片、由单项传播向交互式发展。
二、复习与思考:
1、网页文件的扩展名
2、网页包括的主要元素
3、网页图像格式使用最多的两种格三、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作的基本流程。在教学过程中取得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。
Dreamweaver MX2004教案 第二周 星期二 第1、2节课 题
HTML语言教程（一）
教学目标
1、了解HTML基本结构；2、了解HTML单位和颜色表示方法；3、掌握相对与绝对链接。
教学重点
HTML基本语法及相对和绝对链接
教学难点
相对和绝对链接
教
学
过
程
一、HTML基础知识
1、HTML定义
HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件，因为它就是一总纯文本文件。
2、HTML语言的基本结构下面我们来看一小段HTML语言的代码，来了解HTML语言的基本结构：
<html>
<head>
<title>我的第一个网页</title></head>
<body>我的网页</body></html>
将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后再所在的目录下就可看到一个IE的图标，名字就是你所存的文件名称。
注意：几乎每一种HTML语言的语法都是以<>开头，以</>结束。
3、HTML语言的基本单位
（1）长度单位
长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。
长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。
<HR>标记是在页面上建立水平线的标记。
width是水平线元素中的一种属性，用来表示水平线的宽度。这里width="500"即表示这个水平线的宽度是500像素；width="%50"即表示水平线占据客户区的总宽度的%50。
（2）颜色单位和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方法：16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同，但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。
<font COLOR=#0000ff>用16进制表示红色
<font COLOR=red>用颜色名表示红色注意：
16进制颜色代码，语法格式,#RRGGBB 。16进制颜色代码之前必须有一个“#”号，这种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围是00--FF。
10进制RGB码，语法格式,RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别是红色、绿色、蓝色，他们的取值范围是0--255。以上两种表达方式可以相互转换，标准是16进制与10进制的相互转换。
直接颜色名称，可以在代码中直接写出颜色的英文名称。
以上三种表示方法的效果相同，一般16进制颜色代码的表示方法比较常用。可以根据自己的喜好和实际情况来决定使用哪一种表示方法。
教
学
过
程
（3）URL路径
URL(Universal Resource Locator，统一资源定位器)路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信息。在HTML中，URL路径分为两种形式：绝对路经和相对路径。
a,绝对路径：
绝对路径是将服务器上磁盘驱动器名称完整的写出来，同时也会表现出磁盘上的目录结构。
语法格式：?
例如：http://www.frontfree.net
<A href="file:///D:/test/html.htm"></A>
b,相对路径：
相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。
语法格式,? 相对关系/部分路径/文件名
根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。
<1>相对文档：
这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../”表示上一级目录，没有“../”表示当前目录。
例如当前文档的路径是：test/project1/index.htm 。我们要找test目录下的html.htm 。而当前的目录是project1，我们要回到上一级目录中，所以路径是“../html.htm”。
<2>相对根目录：
这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。
二、上机练习
1、利用记事本制作一个简单的页面。
例如,<html>
<head>
<title>欢迎光临</title></head>
<body><font color=red>我的主页</font><br>
<font color=”#00ff00”>欢迎光临我的主页！</font>
</body></html>
2、接上面例题，将“我的主页”创建一个链接三、教学反思：
在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制作语言html的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼四、作业
Dreamweaver MX2004教案 第二周 星期三 第1，2节课 题
HTML语言教程（二）
教学目标
1、掌握BODY标志的应用；2、了解BODY标志中属性。
教学重点
BODY标志中属性
教学难点
BODY标志中属性
教
学
过
程
一、BODY标志
body是一个网页代码的绝对主要部分。body是由<body>开始，由</body>结束。下面我们看一下body部分的元素：
下面介绍各个部分的功能及用法：
bgcolor用于指定页面的背景颜色。在Microsoft公司的IE浏览器中，默认情况下是白色，Netscape公司的Navigator浏览器的默认情况是灰色。
语法格式：<body bgcolor="颜色值">
background：background属性用于指定页面的背景图案。
语法格式：<body background="http://www.ebok.cn/URL">
下面介绍几种文字的属性，可以改变文字的颜色,以及在页面上留出空白,
textlinkalinkvlink leftmargin topmargin
他们的作用分别是：非链接文字的颜色；可连接文字的颜色；正被点击的可链接文字的颜色；已被点击的可链接的文字的颜色；页面左侧的留白；页面顶部的留白。
语法格式：
<body text="color" link="color" alink="color" vlink="color">
<body leftmargin="value" topmargin="value">
BODY实例如右所示：
说明：对于link这样的属性，大多数html的页面已经不使用这样的用法了。现在多数是在head中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时，字体变色，点击后字体变为灰色。具体方法如下：
A:link {color:#00007f;}
A:visited {color:#65038e;}
A:active {color:#ff0000;}
A:hover {color:#ff0000;}
将这段代码加入到head中，在body中加入有链接的文字，就可以看出效果了。这一部分是属于css中的知识。
Align属性(三种选择)
Left(默认值)? 文字左对齐 Center文字居中对齐 Right 文字据右对齐
教
学
过
程
<br>是换行标记，夹在代码的最后，显示出的网页将自动换行。同样，<nobr>……</nobr> 就是不换行标记，无论你在代码中将文字写为何种形式，都会在一行中显示。
通过浏览器，我们可以看到其中的效果，大家也就能体会到其中的用法。还有一种属性叫做预格式化<pre>……</pre>。请大家看一下下面的例子。
示例：
<html>
<head>
<title>预格式化演示</title>
</head>
<body>
<p>卜算子 咏梅</p>
<pre>
驿外断桥边，寂寞开无主。
已是黄昏独自愁，更著风和雨。
无意苦争春，一任群芳妒。
零落成泥碾作尘，只有香如故。
</pre>
</body>
</html>
通过浏览器看看上面这段代码的产生效果。
二、上机练习三、教学反思学生通过本节课的学习后，大多数同学已经掌握了网页制作掌握BODY标志的应用。在教学过程中取得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。。
四、作业
Dreamweaver MX2004教案 第三周 星期一 第3、4节课 题
Dreamweaver MX简介
教学目标
1、了解网页中部分术语；2、如何创建一个站点；3、如何创建一个简单网页。
教学重点
站点及网页创建
教学难点
站点及网页创建
教
学
过
程
复习：1、利用记事本编辑一个网页。
2、BODY标志符及其属性设置。
讲授新课：
Dreamweaver简介网页的术语：
1、网页：通过浏览器在WWW上看到的页面。
2、网站：是网页的集合，设计者先把整个网络结构规划好，然后分别制作各个网页，在整理过程中，再将网页按一定顺序结合起来，使浏览者在访问该网站时能连接到各个网页进行观看网页内容。
3、网站开发流程：是集体团结的象征，因一个公司组织开发一个网站时，不是某个人单独完成的，参与开发的包括主导网站的单位、客户，还有美术设计人员、程序设计师和维护人员等。
4、服务器：用户在浏览网页时，是由自己的计算机向存放网页的计算机发出的一个请求，对方在收到请求后，将所需内容发送给发出请求的计算机。
本地计算机被称为客户机，对方计算机被称为服务器。
5、CSS：层叠样式表，可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标形状等。
html标签
1、标签：用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面，通过标签可在网页中加入文本、图片、声音、动画等多媒体文件。
2、标签分类：
a、单标签：如<br>表示换行
b、双标签：给网页文件发送的指令符号前面和后面分别加上标签，告诉文件从开始标签开始到结束标签之间执行某个命令。如<html></html>
工作环境介绍
1、页面编辑器,标题栏：若做更改但未保存，则在文件名后显示星号。
菜单栏：
插入栏：
文档工具栏：“设计”“代码”“拆分”
标签选择器：显示环绕当前选定的内容的标签的层次结构。
状态栏,
窗口大小：
教
学
过
程
2、面板组：是分组在某个标题下面的相关面板的集合。
3、属性检查器：用于测试和编辑当前所选页面元素的属性。
五、站点的建立：
步骤：1、在硬盘上新建一个用来存放网站内容的文件夹。
2、“站点”“管理站点”
3、“新建”“站点”
4、定义“编辑文件”第一部分：为站点输入名称。
5、定义“编辑文件”第二部分：服务器技术的运用与否。
6、定义“编辑文件”第三部分。
7、定义“共享文件”
8、完成。
六、编辑网页用记事本：<html>
<head>
<title>欢迎光临我的第一个网页！</title>
</head>
<body>
这是我的第一个网页！</body>
</html>
用dreamweaver编辑
教学反思：
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver创建站点的应用，制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性
八、课外作业：上机练习。
Dreamweaver MX2004教案 第三周 星期二 第1、2节课 题
表格的应用
教学目标
通过本节学习，让学生掌握在网页中如何应用表格，以及如何对表格进行编辑。
教学重点
表格的创建与修改
教学难点
表格的修改
教
学
过
程
复习：1、如何利用Dreamweaver MX2004创建一个站点。
2、如何利用Dreamweaver MX2004创建一个简单的网页。
讲授新课：
概念表格宽度：百分比、像素边框粗细：设置表格边框的大小，默认值为1像素。
单元格边框：单元格中的内容与边框距离的大小。
单元格间距：指单元格与单元格、单元格与表格边框的距离，两者的单位都为像素。
页面设置：实质是为表格选择一个加粗文字的标题栏，这样对于要求标题以默认粗体显示的表格省去加粗动作。
表格的编辑和排版创建表格方法一：菜单。单击“插入/表格”命令，完成表格创建操作。
方法二：在“常用”工具栏中单击“插入表格”按钮，创建表格。
表格修改表格的宽度和高度表格的背景和边框选择单元格选择单个单元格：按delete键后，内容清除，表格存在。
连续选多个单元格：
选择整行单元格：
选择多个非连续的单元格：按下ctrl键。
选择整个表格调整行和列的宽度和高度
shift
插入行和列修改---表格---插入行或列拆分和合并单元格表格的嵌套：
在一个表格的其中一个单元格里再插入一个表格，“插入”—“表格”
课堂小结：
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver的表格创建，应用及编辑。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性。
四、课外作业：课后习题填空1、2、3
Dreamweaver MX2004教案 第三周 星期三 第1，2节课 题
表格应用实例（一）
教学目标
1、掌握表格的创建及修改操作；2、将本班课程表设计成一个网页。
教学重点
将课程表做成一个网页
教学难点
表格的修改
教
学
过
程
复习：1、如何创建一个表格？
2、如何修改创建好的表格？
3、更改表格中行、列、单元格属性。
讲授新课：
操作步骤
1、启动Dreamweaver MX2004
2、创建新站点
3、创建一新网页，网页标题为“304班课程表”
4、单击“插入”菜单，选择“表格”命令
5、创建一个8行6列的表格，设置表格的宽度为480像素，高度为200像素
6、设置表格的边框，单元格宽度、高度及背景颜色
7、对表格进行合并和拆分操作，如上图所示
8、在表格中输入本班的课程表
9、保存预览，完成网页操作。
二、上机练习按要求完成本网页的制作三、教学反思学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver中表格的应用及其把课程表设计为网页的操作。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性
四、作业
Dreamweaver MX2004教案 第四周 星期一 第3、4节课 题
表格实例（二）
教学目标
1、掌握表格的创建及修改操作；2、将教材目录设计成一个网页。
教学重点
教材目录设计为一个网页
教学难点
单元格修改操作
教
学
过
程
复习：1、表格的创建与修改
2、表格中单元格的操作
3、课程表网页制作讲授新课：
一、实例操作步骤
新建一页面在新建页面中创建一45行7列的表格，表格的宽度为600像素，第一列宽度为190像素，第二列宽度为60像素，第三列宽度为30像素，第四列宽度为40像素，第五列宽度为190像素，第六列宽度为60像素，第七列宽度为30像素。
将表中第四列的单元格选定，并将其合并为一个单元格将Dreamweaver MX 2004教材上的目录输入到表格中，如上图所示。
设置文字属性：文字字体为“宋体”，文字大小为“12像素”，文字对齐方式为“居中”。
添加省略号和页数，最后保存，效果如上图所示。
上机练习小结表格的创建及修改操作三．教学反思学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver创建站点的应用，制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性
Dreamweaver MX2004教案 第四周 星期二 第1、2节课 题
表格线框制作
教学目标
掌握边框的制作方法，尤其是细线边框、粗线边框的制作
教学重点
细线边框制作
教学难点
细线边框制作
教
学
过
程
复习：1、表格和单元格操作
2、目录网页制作讲授新课：
一、细表格边框制作方法方法一：背景设置式
方法二：
教
学
过
程
方法三：CSS层叠式
二、上机练习用第一种细表格方法完成课程表网页制作。
用第二种细表格方法完成目录网页制作。
用第三种细表格制作方法完成P54面实例。
三、教学反思：
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver边框的制作方法，尤其是细线边框、粗线边框的制作应用，制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性四、作业
Dreamweaver MX2004教案 第四周 星期三 第1、2节课 题
滚动字幕
教学目标
掌握MARQUEE标志符的应用。
教学重点
MARQUEE标志符的应用
教学难点
MARQUEE标志符的应用
教
学
过
程
复习：1、细表格制作的三种方法。
2、制作一个细表格讲授新课：
一、MARQUEE标签
1、把光标插入点放在需要插入滚动字幕的地方。
2、点击插入面板的“标签选择器,
3、选择 marquee标签，点击“插入”按钮，如下图1所示
4、转换到代码视图。把光标插入点放在 marquee标签内。
5、选择“窗口”>“标签检查器”。可以在“标签检查器”中设置标签的各种用法
6、点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式，如图2所示。
7、direction属性设置字幕内容的滚动方向，如图3所示。
8、scrollamount属性设置字幕滚动的速度，如图4所示
9、scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。
教
学
过
程
10、width属性设置滚动字幕的宽度。
11、onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。
onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动
12、style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。
13、loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。
实例：
二、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweave掌握MARQUEE标志符的应用。但是本知识点点需要以后上课经常巩固。
Dreamweaver MX2004教案 第五周 星期一 第3、4节课 题
超级链接（一）
教学目标
掌握链接的种类以及各种链接的功能和实现方法。
教学重点
链接的类型
教学难点
链接的应用
教
学
过
程
复习：1、marquee标签在网页中的应用
2、marquee标签中属性设置
3、利用marquee标签制作一滚动字幕讲授新课：
一、链接分类超级链接作用：是可以把一个网站的网页连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。
分以下几种类型：
1 导航链接：实现站点内文档的链接。方法一，使用属性检查器；
方法二，指向文件图标链接文档；
方法三，使用拖放创建链接。
相关内容：在链接时使用的路径；目标文件的打开方式。
2 链接到文档中的指定位置，使用锚；
3 空链接：是一个无指向的链接。使用空链接可以为页面上的对象或文本附加行为。
4 创建javascript脚本链接：用于执行javascript代码或者调用javascript函数,这样可以让来访者不用离开当前Web页面就可以得到关于一个项目的其他信息。当来访者点击某指定项目时，脚本链接也可以用于执行计算，表单确认和其他处理任务。
5 创建电子邮件链接（mailto:sa@163.com）
6 链接到站点中的文档或者其它站点，可以使用跳转菜单，跳转菜单是文档中的一种来访者可以看见的弹出式菜单，其中列出了链接的文档或文件。
7 给链接增加提示，给链接增加快捷键。
二、创建导航链接
◇使用指向文件图标链接文档：选中图像，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。示例中指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm。
◇使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标
◇选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用。
◇根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径。很少用到这种路径。如果没有服务器的控制权限，不要使用这种方式！
教
学
过
程
◇绝对路径：完整的URL，称作绝对路径。例如在链接域输入http://vip.5dmedia.com/fuguotao
◇从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。
◇选择被链接文档要打开的位置：
若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选一个选项。
_blank 在新的未命名的浏览器窗口中加载链接文档。
_parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。
_self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。
_top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。
一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。
三、使用锚简明步骤：选中文本→在目标文档中插入锚标记→命名→拖动“指向文件”图标到文本。
◇链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面 板上的命名锚记工具。键入锚记名称，一个站点中的锚记名称只可以是唯一的，否则会出现错误。
◇在文档中选取要创建链接的文本，打开您需要链接的命名锚记所在文档，不一定要是当前文档，可以是站点中的其它文档，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处。
四、小结
1、链接在网页中的作用及分类。
2、如何创建链接？
五、上机练习六、作业七．教学反思,
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweave链接的种类以及各种链接的功能和实现方法。这个知识点在本课中算是比较容易掌握的，因此。在练习和讲解的时间分配上会比较容易搭配。
Dreamweaver MX2004教案 第五周 星期二 第1、2节课 题
超级链接（二）
教学目标
掌握链接的种类以及各种链接的功能和实现方法。
教学重点
链接的应用
教学难点
链接的应用
教
学
过
程
复习：1、链接的作用及分类
2、如何创建一个导航链接？
3、如何创建一个锚点？
讲授新课：
一、使用空链接使用空链接可以为页面上的对象或文本附加行为。创建步骤：
1,在文档窗口中，选中要设置链接的文本、图像或其他对象。
2,在属性面板的链接框中，只输入一个“#”号。
3,如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件。可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。
4,还可以在属性面板的链接框中输入javascript:;创建空链接。
二、创建javascript脚本链接
1,在文档窗口中选取文本，图象或对象
2,在“属性”检查器的“链接”栏中键入javascript:，其后紧接javascript代码或函数调用。
例如在链接栏中键入javascript:alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框三、创建电子邮件链接方法一：选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接” 工具，输入邮件地址。
方法二：选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址。
四、创建跳转菜单，例如制作一个友情链接。
首先将插入点放在要插入链接的位置。点击表单面板中的跳转工具在插入跳转菜单对话框中，点添加项添加新链接。
在属性面板中选择类型为“菜单”。
五、给链接增加提示，给链接增加快捷键。
首先将插入点放在要插入链接的位置。
点击常用面板上的超级链接工具。
设置链接参数。
标题是指当指向链接会出现提示六、小结空链接、JavaScript链接、邮件链接、跳转菜单等链接创建。。
七、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweave链接的种类以及各种链接的功能和实现方法。这个知识点在本课中算是比较容易掌握的，因此。在练习和讲解的时间分配上会比较容易搭配。
Dreamweaver MX2004教案 第五周 星期三 第1、2节课 题
CSS样式
教学目标
掌握CSS样式表的使用方法，以及每个样式表的设计方法
教学重点
CSS样式应用
教学难点
CSS样式应用
教
学
过
程
复习：1、空链接、JavaScript链接、邮件链接、跳转菜单等链接创建。
2、链接参数设置。
讲授新课：
一、使用最基本的CSS
概念：层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。CSS 样式使您可以控制许多仅使用 HTML 无法控制的属性。
（一）：把一个网页的文字变成12象素（px）大小。
实现方法：通过“重定义HTML”标签，定义td（td是单元格的标签）的字体大小为12象素（px）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。
简明步骤：打开样式面板→在类型中选择“重定义HTML”标签→选择要重定义的标签，例如td→给所选标签（例如td）定义CSS→一个定义了标签的网页就做好了。
1.打开一个网页文档。
2.打开样式面板。
3．点击“新建CSS样式“按钮。
4.在“类型”中，选择“重定义HTML”标签。
5.选择td标签。Td标签代表单元格。
6．选择分类中的“类型”。
7.设置字体：选择字体，如果没有需要的字体，可以编辑字体列表，
大小：设置字体大小，好看的中文字大小有12象素（px）和9点数（pt）两种，两者效果差不多。
行高：行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在15像素到25像素之间。实例中使用20像素。
修饰：对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。
颜色：黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色！
8.按“确定”按钮后，一个应用了CSS的网页就做好了。
（二）：编辑字体列表
1.单击字体栏的下拉箭头，打开编辑字体列表。
2.在编辑字体列表窗口中，点击加号按钮。
3.选择一种字体，如宋体，按左箭头按钮。
4.继续添加字体，选择一种字体，如Arial，按箭头按钮添加。
5.可以重复以上的步骤，添加其它组合的字体。
教
学
过
程
（三）：重定义body标签，使表格之外的内容应用样式。如果在一个网页中，在表格之外还有内容，就需要定义body标签。
1.定义了单元格而没有定义body的网页。
2.选择重定义“body”标签。按照第一部分的方法，定义“body”标签。
3.定义了body的网页。
（四）：定义表单标签。如果在一个网页中使用表单，就需要重定义这些表单标签。
1.定义input标签。
2.定义select标签。
3.定义textarea标签。
（五）：定义层对应的标签。层对应的标签是div。
（六）：定义锚标签。既是有关链接的标签。锚对应的标签是a。
1默认锚标签的网页，链接有下划线，蓝色。这种链接很难看！
2.在标签下拉栏中选择a。
3.定义a的CSS样式。大小选择12象素；修饰选择无；颜色选择一种深灰色，就可以和采用黑色的文本区分开来。
4.重定义了锚标签的网页。
（七）：修改样式表。
在CSS样式面板中，单击“编辑样式”单选按钮，再点击右下角的“编辑样式表”按钮。
二、上机练习三、小结学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS样式表的使用方法，以及每个样式表的设计方法。这个知识点在本课中算是比较难以掌握的，因此。在练习和讲解的时间分配上会花较多时间来搭配。
Dreamweaver MX2004教案 第七周 星期一 第3、4节课 题
CSS文字样式
教学目标
通过本节学习，让学生掌握CSS样式表的使用方法，以及每个样式表的设计方法
教学重点
创建CSS样式
教学难点
CSS选择器的四种状态
教
学
过
程
一 CSS样式通过上节课的学习，要了解使用样式表的基本思想是格式与内容分离，先定义后使用。
二 CSS样式的基本操作
1、创建CSS样式（操作步骤）
⑴、选择【窗口】下的CSS样式命令，弹出CSS样式面板。
⑵、单击“CSS样式”面板右下角的“+”符号新建一个CSS样式
⑶、在弹出的“新建样式”对话框中选择三种样式类型。
① 创建自定义样式(class)：该样式可以被应用于文档中的任何该文本。
② 重定义HTML标签：将现有的标签赋上样式，不需要选中对象就可能直接应用到网页中。
③ CSS选择器：用于对超级链接的四种状态进行设置。用“选择器”下拉菜单列表框进行选择。
它们的意义分别是：
a：Link 超级链接的正常状态（加载网页后的初始状态）[网页默认状态]
a：Visited 被点击过后（或称被访问过后）的状态。 [点击后的状态]
a：Hover 鼠标指针指向该超级链接时的状态。 [接触时的状态]
a：Active 鼠标单击超级链接时（尚未松手时）的状态。 [点下时的状态]
④ 新建样式表文件：生成专门的*.css文件，可以应用于多个文档，属外部链接式样式。单击“确定”按钮，系统会提示保存CSS样式文件。
⑤ 仅对该文档：只在当前文档中应用，属嵌入式样式。
⑷,选择“创建自定义样式”并在“名称”文本框中输入自定义的CSS样式表名称，选择“仅对该文档”单选项。
⑸,单击“确定”按钮，打开“样式定义”对话框。
⑹,在此对话框中可能定义样式表的各项属性。
⑺,单击“确定”按钮后，一个CSS样式就创建好了。新的样式会出现在“CSS样式”面板中。
三 使用CSS样式表四 编辑CSS样式表五 删除CSS样式表
（一）、打开CSS样式现板
（二）、在CSS样式面板中选择要删除的样式名称，再单击“删除样式”。
注：在删除了样式之后，该文档将恢复应用样式之前的状态。
六 设置CSS样式表属性。
CSS样式对话框有八个选项卡：类型、背景、区块、盒子、边框、列表、定位和扩展。
复习与思考,
二、上机测验：1、“我国古书之最” 2、“水调歌头”
教学反思,学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS样式表的使用方法，以及每个样式表的设计方法。这个知识点在本课中算是比较难以掌握的，因此。在练习和讲解的时间分配上会花较多时间来搭配
Dreamweaver MX2004教案 第七周 星期二 第1、2节课 题
多彩文字链接
教学目标
1、掌握CSS样式的应用；2、CSS样式在文字链接中的应用于。
教学重点
文字链接样式应用实例
教学难点
CSS样式应用
教
学
过
程
复习：1、CSS样式的应用
2、CSS样式实例讲授新课：
一、实例操作步骤首先创建一个基本的链接样式，其他的样式将在此基础上添加一个自定义的Class类。
Shift+F11打开样式面板，点击新建样式按钮，如图一；
在Type选项中选择Use CSS Selector，创建默认链接样式，如图二；
按照图三中所示设定默认链接的样式为无下划线，字体为宋体9pt，其他色彩等等都不设置，我们将在后面为每一个Class类分别设置。
定义样式类Class。步骤如下：点击添加打开新定义样式面板，选择Make Custom Style（class）定义自己的样式类。如图四；
为链接文字添加样式类。在Dreamweaver中选择一项链接文字，在窗口最下端的快速标签选择条上选择标签，右键点击此标签，选择Set Class将自定义的样式赋予此链接文字即可，如图五；
其它链接文字样式的做法与此相同，后面我将不再作介绍。在本教程中有关定义hover状态的链接样式办法，朋友们可以自己制作。我也不再作介绍，只是提示定义时直接输入[.t1:hover]即可。
二、上机练习三、小结四、作业教学反思,
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS掌握CSS样式的应用和CSS样式在文字链接中的应用。经过上面的学习，大家已经对这个css样式掌握的较好了。能够较好地去理解各种概念。
Dreamweaver MX2004教案 第七周 星期三 第1，2节课 题
CSS样式表的应用实例
教学目标
1、掌握CSS样式应用；2、文字样式和链接样式实例。
教学重点
文字样式和链接样式实例
教学难点
CSS样式创建
教
学
过
程
要想做出精美的网页一定要用到CSS。层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。CSS 样式使您可以控制许多仅使用 HTML 无法控制的属性。
第一部分:要实现的目标:把一个网页的文字变成好看的12象素(px)大小。
实现方法:通过“重定义HTML”标签，定义td(td是单元格的标签)的字体大小为12象素(px)。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。
简明步骤:打开样式面板→在类型中选择“重定义HTML”标签→选择要重定义的标签，例如td→给所选标签(例如td)定义CSS→一个定义了标签的网页就做好了。
1、打开一个网页文档。
2、打开样式面板。
3、点击“新建CSS样式“按钮。
4.在“类型”中，选择“重定义HTML”标签。
5.选择td标签。Td标签代表单元格。
6.选择分类中的“类型”。
7.设置字体:选择字体，如果没有需要的字体，可以编辑字体列表。
大小:设置字体大小，好看的中文字大小有12象素(px)和9点数(pt)两种，两者效果差不多。
行高:行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在15像素到25像素之间。实例中使用20像素。
修饰:对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。
颜色:黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色!
8.按“确定”按钮后，一个应用了CSS的网页就做好了。
教
学
过
程
定义锚标签。也就是有关链接的标签。锚对应的标签是a。
1默认锚标签的网页，链接有下划线，蓝色。这种链接很难看!
2.在标签下拉栏中选择a。
3.定义a的CSS样式。大小选择12象素;修饰选择无;颜色选择一种深灰色，就可以和采用黑色的文本区分开来。
4.重定义了锚标签的网页。
上机练习：
小结：CSS样式在网页中文字的应用。
作业：
教学反思:
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS掌握CSS样式的应用和CSS文字样式和链接样式实例。经过上面的学习，大家已经对这个css样式掌握的较好了。能够较好地去理解各种概念，通过这两节的巩固练习，加强了学生对知识点的理解。
Dreamweaver MX2004教案 第八周 星期一 第3、4节课 题
网页中图像的应用
教学目标
掌握图象在网页中的应用，制作灵活多样，富于变化的网页，增添网页的可观赏性。
教学重点
创建图像映射
教学难点
创建网站相册
教
学
过
程
复习：1、CSS样式的应用
2、CSS样式实例讲授新课：
一 网页图像基础知识
（一）、网页图像格式
在Web页面中经常用到的图形文件有三件：GIF、JPEG和PNG。通常只有GIF和JPEG是被绝大多数浏览器完全支持的，而且它们的共同特点是：文件信息量小，适合于网络传输，，适合于各种平台。
1、GIF（图形交换格式）：
采用非失真的压缩方式，在压缩文件的过程中，图像的像素信息不会被牺牲掉，被牺牲的只是图像的颜色。因此GIF格式最多只能显示256色，相对来说，GIF格式比JPEG格式的质量要差一些。其扩展名为“·gif”。
2、JPEG（联合摄影专家组）
采用失真的压缩方式，在图像文件被压缩过程中，图像的像素信息会被除数减去一些。因此图像会失真，但图像颜色不会失真，因此JPEG格式是一种真彩色的影像压缩格式。最适合连续色调图像或照片，如风景名胜摄影、人物肖像照片等，因为JPEG可以包含几百万种颜色。
JPEG图像格式的显著特点是：随着JPEG文件质量不同，文件大小和下载时间也会不同，质量越高，则文件越大；质量越低，则文件越小。我们通常可以根据肉眼所能失接受的程度自由调节压缩质量，找到一个图像质量和文件大小之间最佳平衡点。
★JPEG图像不支持透明颜色属性，也不支持动画。
★JPEG文件比GIF文件大，其扩展名为“．jpg或．jpeg"
（二）、颜色原理
在HTML中，颜色既可以用红、绿、蓝等颜色来表示，也可以用十六进制数来表示（如：#FF0000）。在Windows操作系统中，在256颜色模式下显示的颜色被称为安全色。总共有212个Web安全色。
Dreamwcaver中所有颜色拾取器均使用212色的Web安全色调色板，从调色板中选择颜色时可显示颜色的十六进制值。我们也可以在任何颜色区域中直接手动输入十六进制值。
二、网页图像素材的搜集和管理
1、利用网络搜集资料； 2、平时积累。
三、图像应用
（一）、插入图像
（二）、设置图像属性
教
学
过
程
当在文件中添加图像后，我们可以在文档窗口中直接选取并修改它们。例如，我们可以使用“属性”面板为图像添加链接，为图像添加边框，设置图像大小，在图像周围添加间隔，设置对齐方式等。
１、图像的属性面板
选择【窗口】属性命令，显示属性面板
在网页中选中图像后则显示＂图像＂属性面板
2、调整图像的大小
可以在Dreamweaer的文档窗口中可视化地调整图像的大小，以便页面布局更加合理、美观。
FLASH动画可按比例调整，不会影响播放品质。
GIF和JPEG图像在增大或减小它的高和宽时可能会引起图像失真和模糊。因此，希望大家在Dreamweaer中调整位图大小只是用于决定布局，一旦决定了图像的理想尺寸，还是应该到图像编辑软件中去调整大小。编辑图像可以减小图像大小，从而节省下载时间。
3、设置图像的对齐方式
（三）、制作图像的提示信息
首先选中需要制作提示信息的图像（图像右下角出现有人３个黑色的小方块，然后在属性面板中的“替代”文本框中输入提示信息后保存及可。如下图
（四）、设置E-mail链接
方法一：使用插入电子邮件链接命令创建电子邮件链接。
1、选择插入电子邮件命令。在对象面板的标准分类中单击“插入电子邮件链接”按钮。
2、弹出插入电子邮件链接“对话框。如果选中了文本，则文本将自动出现在“文本”框中；如果没有选中文本则要在”文本“输入”框中输入将出现在文档中描述电子邮件的文本。
3、在“E-mail”框中键入邮件地址。然后单击确定。
方法二：使用属性面板创建电子邮件链接
1、在文档窗口的设计视图中选取文本或图像。
2、在“属性”面板“链接”框中键入“mailto：”，其后紧接电子邮件地址。如：mailto:lx6565@163.com。在点阵字库子邮件地址和冒号之间不能加入任何形式的空格。
三、上机练习四、小结五、作业教学反思:
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS图象在网页中的应用，制作灵活多样，富于变化的网页，增添网页的可观赏性。经过上面的学习，大家已经对图像在dw中的应用有了较好的理解。
Dreamweaver MX2004教案 第八周 星期二 第1，2节课 题
网页图像添特效
教学目标
掌握网页添加图象特效及制作弹出式小窗口的方法。领会样式表的使用，以及行为的运用。
教学重点
CSS样式表的使用
教学难点
行为的运用
教
学
过
程
复习：1、图像的基础知识；
2、简单图像应用实例讲授新课：
图象特效的制作其具体的实现方法如下,
1、在Dreamweaver编辑窗口中，点击菜单命令“窗口/Css 样式表”打开样式浮动面板，在浮动面板中点击右键菜单中的“新建样式表”选项或者点击右下角带“+”的按钮，打开新增样式对话框，在“名字”栏中输入新增特效名称，并选择类型的第一个选项：“Make custom style”，然后点击“确定”按钮，并在出现的保存对话框中输入文件名保存样式文件。
2、在随即出现的样式定义设置对话框中，选择Category列表框中的最后一项“Extensions”选项，打开扩展窗口参数设置窗口，其中“Page Break”选项用于设置样式应用前后的位置，可以不予设置，而“Visual Effect”下的“Cursor”则用于自定义鼠标指针形状，“Filter”用于选择效果的类型，共有16个选项。用户选择好效果类型以后，将其中有问号的地方改成自己希望的参数，点击“OK”即完成样式的定义。
3、点击菜单“插入/图像”打开图片，选择对话框插入希望应用特效的图像，然后在编辑窗口中选中该图像，并点击样式浮动面板中刚才创建的样式，按下“F12”键，在浏览器中即可看到特效显示的最终效果。即为Filter类型为“Wave”，参数为：“Add=1，Freq=6，LightStrength=20，Phase=8，Strength=15”的样式在图片上应用以后的效果对比。
4、也可以在样式浮动面板中点击快捷菜单中“编辑”选项，重新打开样式定义窗口进行参数设置，直到满意为止。
二、制作弹出小窗口
（一）准备小窗口页面,
1,打开一个页面，设置页面属性。左边界，顶部边界为 0,在标题处输入标题名称。
2,在页面中插入图片。也可以是文字,Flash 动画等。小窗口页面就准备好了。
（二）给一个页面添加弹出小窗口,
1,打开需要添加弹出小窗口页面，例如一个网站的首页，在标签选择器中选择,body,标签。
2,打开行为面板，点击,+,按钮添加行为。
3,选择“打开浏览器窗口”。
4,在要显示的 URL 处，选择弹出小窗口页面文件。设置弹出小窗口属性。
5,按 F12,在浏览器中发布。
教学反思：学生掌握了网页添加图象特效及制作弹出式小窗口的方法。领会样式表的使用，以及行为的运用，学生还需要叫多联系来巩固这个概念。
Dreamweaver MX2004教案 第八周 星期三 第1，2节课 题
动态文本
教学目标
掌握鼠标特效，实现按钮导航文本变大，同时按钮颜色进行变换，而移开时恢复初始状态。
教学重点
代码的设置
教学难点
行为的添加
教
学
过
程
复习：1、图像特效制作及应用；
2、弹出式小窗口的制作及其应用。
讲授新课：
一、动态文字实例操作步骤如下：
1：执行菜单“插入/表格”命令，在编辑区中插入一个一行一列的表格。
2：选中该表格，使用快捷键Ctrl+F3打开其属性控制面板，设置表格背景色彩“Bg Color”参数值为#0099FF，表格边线色彩“BrDr Color”参数值为#000000
3：选中单元格，设置单元格属性面板中背景色彩“Bg”参数值为#006699，单元格边线色彩“BrDr”参数值为#FFFFFF。通过以上设置，使表格更具有立体感。
4：单击工具栏“显示代码窗口”按钮，显示代码窗口，在表格开始和结束段加代码“〈div id="bottun"〉..,〈/div〉”使表格产生一个Div标记名称.
5：在单元格中输入按钮导航文本，并设置文本属性，这里可以把导航文本做成超级链接，并设置其字体、字号和居中效果。
6：同样道理在导航文本开始和结束段加上这样的代码“〈span id="text" 〉...〈 /span 〉”，使该文本产生一个Span标记名称。
7：按快捷键Shift+F3打开Behaviors行为面板，点击面板上“+”按钮，在弹出行为列表中选择“Change Property”动作，这里我们设置几个当鼠标移动和离开按钮文本上时，文本和背景颜色发生变化的动作。选择“Change Property”动作对话框中的“Div”动作类型（Type of Object），在类型名称下拉列表中会列出我们标记的“bottun”标记，选择它并设置Property下拉列表中的“style-backgroundcolor”的New Value值为#6699CC，确认返回Behaviors面板，最后更改动作触发事件类型为Onmouseover。同样方法再设置当鼠标离开时，将背景颜色改为初始颜色，即##006699。
同样的方法，我们也是应用这个动作，只要设置了文本“Change Property”的动作（动作类型“Span”），控制鼠标移动和离开时的文字大小变换就可以了。
二、上机练习三、课堂小结四、作业教学反思：
学生通过这节课的学习掌握鼠标特效，实现按钮导航文本变大，同时按钮颜色进行变换，而移开时恢复初始状态。还有部分同学跟进不是很到位。课后会加强这些学生的学习积极性。
Dreamweaver MX2004教案 第九周 星期二 第3、4节课 题
层的应用
教学目标
掌握层的概念及层的应用，并在学习过程中，掌握层和表格转换的操作。
教学重点
层的概念
教学难点
层和表格的转换
教
学
过
程
复习：1、鼠标特效的制作及应用；
2、行为代码的基本操作讲授新课：
基本概念层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包 含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素 进行重叠和复杂的布局。首先，请看下图,
我们首先来做一个层
1,在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。
2,在页面中显示一个层。
3,通过周围的黑色调整柄拖动控制层的大小
4,拖动层左上角的选择柄可以移动层的位置。
5,单击层标记可以选中一个层。
6,在层中可以插入其他任何元素包括图片文字链接表格等。
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。 层面板可以通过菜单「窗口」菜单＞选“层”打开。
这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性 和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。 眼睛挣开和关闭表示层的显示和隐藏。
教
学
过
程
层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。比如层 数为2的层在层数为1的层的上面。改变层数就可以改变层的重叠顺序。层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。
层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1,Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影 响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可 。
二、层和表格之间转换
由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来 创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己 的布局，然后将它们转换为表格。 在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换” ＞“层到表格”。即可显示“转换层为表格”对话框。 选择所需的选项。单击“确定”。
若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表格为层。对话框。 选择所需的选项。单击“确定”。
三、上机练习四、小结五、作业
Dreamweaver MX2004教案 第九周 星期四 第3、4节课 题
滑动菜单的制作
教学目标
掌握滑动菜单的制作及层的应用方法。
教学重点
滑动菜单的制作
教学难点
滑动菜单的制作
教
学
过
程
复习：1、层的创建及应用；
2、层与表格相互转换及操作。
讲授新课：
一、滑动菜单实例制作前期准备：
1,在dw中新建一个空白文档。
2,设置好css风格。
3,在页面上插入一个长500pix的表格（插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变，如果页面之前没有做相关设置，那么这一部可能要费点功夫整理一下页面结构）。
4,将光标置入表格内，点击菜单 [插入——层] 插入一个长500高20的图层，并命名为layer1。
5,然后再将光标置入图层layer1，点击菜单 [插入——层] 再插入一个长500高130的图层layer2；并将layer2的属性中左边距和上边距都设置为0，并为它指定一个背景色。
6,然后重复步骤5的方法，再插入一个图层layer3，这个图层没什么特殊的用处，是为了放置几个按钮。最后如图：
注意：这里这么做的目的是为了给你要滑动的图层前面加一个挡板，只有当点击的时候图层才从你的这个图层下缓缓的滑动出来。
现在开始，才正式进入到我们今天要制作的滑动菜单的制作过程中。
现在让我们再次重复上面的步骤5，再插入一个图层layer4,设置图层属性为宽500,150高，刚好是刚才layer2和layer3的高度之和，并将图层layer4调整到另外两个图层下面。然后点击图层layer2前面的眼睛让他闭合，这样可以看到它下面的图层layer4
这时，我们点击ALT + F9 打开时间轴面板，DW已经添加了默认的时间轴Timeline1，然后，选中要滑动的图层layer4，在上面点击右键，选择 [添加到时间轴] 这时可以在时间轴面板中看到刚刚制定的图层layer4，这说明，已经添加成功了！
教
学
过
程
然后点击时间轴上的第15桢，将图层layer4的属性面板中的上边距调整为150。到这里，一个能滑动的图层就算做好了，可以拖动时间轴上面的红色方块慢慢从1走向15，就可以看到这个图层慢慢的从layer2和layer3下面滑动出来！
在添加的layer3上插入了个表格，并为layer4设置了两个按钮。
我们先设置激活滑动图层的动作。选择上展开这个按钮，转到行为面板，点击在出来的菜单中选择 [时间轴——播放时间轴] DW会弹出一个窗体，在上面的下拉菜单中选择timeline1。然后在行为面板中确认事件为onclick
再给图层添加上一个简单的关闭动作，就是点击关闭按钮后图层隐藏。选择上关闭按钮，转到行为面板，点击在出来的菜单中选择 [显示隐藏层],在跳出的窗体中选择上layer4，然后点击下面的隐藏按钮，将其设置为隐藏重复刚才的步骤5，选择上展开按钮，添加动作 [时间轴——转到时间轴桢],在跳出的窗体中的下拉菜单选择timeline1，桢数添上1。
重复步骤5，选择 [显示隐藏层],和刚才步骤6相反，这次选择显示，确定后，保证行为面板中显示隐藏图层的时间都是onclick。此刻展开按钮的行为面板如图
上机练习小结及作业
Dreamweaver MX2004教案 第九周 星期五 第3、4节课 题
网页随浏览器伸展
教学目标
掌握网页随浏览器伸展，以及在普通视图和布局视图的转换操作。
教学重点
设计
教学难点
布局
教
学
过
程
复习：
讲授新课：
一、实例
dreamweaverMX提供了两种视图，布局视图和标准视图。dreamweaver能自动生成一个名为spacer的gif图片来填充你的表格，使你的表格不会发生自动伸缩的现象。
一、先建立一个新站点，然后我们用熟悉的表格工具画一个1*3的表格，不要管它的宽度。因为，可以让它自动伸展适合浏览器窗口，然后，单击对象面板最底下的布局视图按钮,这时出现一个对话框，按ok。切换到了布局视图。
现在看我们的表格左上角有一个绿色的layout?table标签，它代表着你这个表格。标签中有三个空白部份且每一个都标明了宽度且有一个小三角形。在这个表格中，如果希望表格最左边的列固定，而整个表格适合浏览器的宽度。要记住的是，
我们只能让一列自动伸展！！。在这里，决定将蓝色表格作为伸展列。
二、选择最后一列，单击它上面的三角形按钮，在出现在菜单中选择列自动填充。
由于是一个新站点，这时将出现一个对话框,提示你为了能够使行伸展，dreamweaver需要放置一些spacer图片在另一些行里。
下面有三个选项：?
创建一个spacer图片：这个图片在浏览器窗口是不会显示出来的，它只是起着固定表格的作用。
利用存在的spacer图片：不利用spacer图片来做伸展：这样其它的行将会变形。
三、对于已经定义的站点，不会出现这个对话框，但仍可以利用增加spacer图片，现在选择第一个。在弹出的窗口中选择spacer图片的存放目录，好了。定义的自动伸展的列已经填充了我们的整个文档窗口，在浏览器中，它同样会自动伸展以适应整个浏览器的宽度。而剩下的两行被spacer图片的填充并固定，在浏览器中它们也将保持同样的宽度。
可以看见一个波浪线在这个行上，它代表了伸展的列。这个表格原来做时的宽度是400，但现在由于设置了自动伸展列，蓝色的那一列自动放大，填满了整个文档窗口。
上机练习小结及作业
Dreamweaver MX2004教案 第十周 星期二 第3、4节课 题
下拉菜单
教学目标
掌握下拉菜单的制作方法，通过层的显示和隐藏，行为的添加完成本次实例。
教学重点
层的应用
教学难点
层的应用
教
学
过
程
复习：网页中浏览器伸展讲授新课：
用Dreamweaver制作下拉菜单 利用了“行为”面板中的内置方法“隐藏-显示层”方法，并用“鼠标移至”和“鼠标移开”来触发层的隐藏和显示，而将要出现的菜单就在层中。
因此，可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，进行菜单的美化修饰。
导航条的制作首先进行一些必要的前期工作，按CTRL+J，打开页面属性窗口，参数设置按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的属性面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、15，背景色填入#006699，将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表格,按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是主菜单名，可按自己想要的名字输入，并加上链接。
二、下拉选单的制作现在开始制作将要下拉出现的菜单，同样用层来制作。再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
这时，可以在menu1这个层中输入所要的菜单内容。这个层将作为"经典论坛"的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为"天极网"也做一个下拉选单（层menu2）。
这一步要注意的是下拉选单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。
按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的三、显示和隐藏效果的添加导航条部分
首先按CTRL键不放点击导航条中的第一个单元格，现按Shift+F3打开行为窗口，点按钮，在下拉选项中选中"Show-Hide Layers"。如果选项中没有这一项，则选择Show Events For下的IE 5.0后，重新点 按钮，此时"Show-Hide Layers"将出现。这时将会弹出一个窗口，如下图。在Named Layers框中会列出当前网页所有的层，选中" layer "menu1" "，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮，OK
这时会回到行为窗口，窗口中出现如下图所示字样，点击事件下的文字"onClick"，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示。
四、上机练习 五、小结及作业
Dreamweaver MX2004教案 第十周 星期四 第3、4节课 题
布局视图
教学目标
掌握在布局视图中设置对象的属性，以及各种设置的作用。
教学重点
设置种类
教学难点
布局视图中属性设置
教
学
过
程
复习：1、下拉菜单制作及应用；
2、层及行为面板的应用讲授新课：
一、布局视图在布局视图中设置对象的属性：
1 给图像描边
作用：增加图片的美观。
简明步骤：选中一个图像，边框设置为1，就给图像加了一个像素的边框。选中页面中的一个图像。在属性面板"边框"中填1。
2 设置图文混排简明步骤：选中图片，在属性面板中设置对齐方式为左对齐或者右对齐。采用默认设置时的图片和文字：选中图片，在属性面板中选择对齐方式为"左对齐"。
3 给图片增加提示作用：使用浏览者知道所选择项目的内容。
简明步骤：选中一个图片，在属性面板的替代下拉栏，输入提示文字。选中一个图片。在属性面板的替代下拉栏，输入提示文字。在浏览器中，当指向这个图片时，就会出现文字提示。
4 创建图像地图
作用：当点击一个图像的不同部分，可链接到一个新网页。也可以在当前窗口打开。
简明步骤：选中目标图片→选择属性面板中的热点工具→用热工具在图片中画出热点区域→在属性面板中输入链接地址，选择目标窗口打开方式。选中目标图片，选择属性面板中的矩形热点工具。用热工具在图片中画出热点区域。在属性面板中输入链接地址，选择目标窗口打开方式。
5 设置图像边距
作用：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。有时候设置边距为一个非0的数值可以起到美观的作用。但是有的时候输入数值为0的边距可以使用页面紧凑。
简明步骤：选中一个图片，在属性面板中，给垂直边距和水平边距输入数值。
没有设置边距的图片：输入了垂直边距和水平边距的效果，明显和表格边框有距离。
6 给单元格设置颜色简明步骤：选中单元格，在属性面板中，选择一种背景颜色。把鼠标放在单元格内，出现红色边框时，单击，就可以选中单元格了。在属性面板中，选择一种背景颜色。设置了背景颜色的单元格：
7 设置单元格的对齐方式作用：可以使单元格里的内容，从不同的地方开始。在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；选择中间，文字就开始从中间开始。在“水平”下拉栏，选择“左对齐”，文字和单元格左对齐；选择“右对齐”，文字和单元格右对齐。
简明步骤：选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。
在属性面板中的垂直选项栏选择“中间”，输入的文字从单元格中间开始。
在属性面板中的垂直选项栏选择“顶端”，输入的文字从单元格顶端开始。输入文字常选择这种方式。在属性面板中选择水平对齐方式为右对齐：在属性面板中，如果不想文字换行，不要选中“不换行”。这种方式可以保持其它表格不变形。
如果选中“不换行”，文字会沿一行扩张，其它表格也被挤压变形。
设置列为自动伸展的作用：自动伸展列可以随着浏览器调整大小。
选择固定的宽，输入数值可以改变单元格的高度。
二、上机练习三、课堂小结：在布局视图中设置对象属性，掌握设计的方法以及需注意的问题和技巧
Dreamweaver MX2004教案 第十周 星期五 第3、4节课 题
飘浮光球特效
教学目标
掌握利用Dreamweaver 来实现漂浮光球的特效，从而加强对层的认识。
教学重点
层的操作
教学难点
时间轴的应用
教
学
过
程
复习：布局视图的基本操作讲授新课：
一.制作步骤：
第一步：准备一张图片作为背景图，大小为240x180。
第二步：在页面中建立层layer1，大小和所选的背景图片一致，然后把背景图插入 这个层内。
第三步：再建立一个层layer2，这个层将被制作成漂浮的光球。层的大小就是球的大小，位置重叠在层layer1上，其余的层属性均采用默认值。
第四步：让层layer2动起来。将层layer2拖曳至时间轴，然后在该层的右键菜单中选择“记录路径”，接着用鼠标拖曳层画出一条闭和路径，这个路径就是光球运动的轨迹。最后在时间轴中的“自动播放”和“循环”前打上勾，按F12键预览一下，看看速度是否合适，如不满意可以调节时间轴中帧的总数或者每秒播放的帧数，直到符合要求为止。
第五步：控制动画的播放。打开行为面板，选择层layer1，选择事件中的“停止时间轴”，再选择动作中的“onMouseOver”,这样就完成了一组动作事件，即鼠标移至层layer1时动画停止播放；然后再增加一组动作事件：事件为“播放时间轴”，动作为“onMouseOut”，即在鼠标移出层layer1时，动画接着播放。
第六步：使层可以拖动。打开行为面板，选择事件中的“拖动层”，将可被拖动的层确定为layer2，这样层layer2也就是光球就可以在网页中任意拖动了。
第七步：制作光球。打开时间轴，选择首帧，在其右键菜单中选择“添加行为”，这时就打开了行为面板，选择事件中的“改变属性”，这时出现“改变属性”对话框，在“对象类型”下拉菜单中选则“div”即层，“命名对象”选择“layer2”，“属性”选择“style.filter”，在“新的值”框中输入下列代码：
mask(color=#ffffff) alpha(opacity=100,style=2)
这里用了两个滤镜，可以产生光球效果，最后“确定”。
第八步：使光球变色。在时间轴中找几处关键帧，按照第七步的方法设置动作事件，注意将mask滤镜的color值改成自己喜欢的颜色即可。
二.上机练习三、课堂小结四、作业
Dreamweaver MX2004教案 第11周 星期二 第3、4节课 题
时间轴
教学目标
掌握时间轴的基本概念，基本知识，以及基本的运用方法
教学重点
时间轴概念
教学难点
时间轴运用
教
学
过
程
复习：飘浮光球特效实例讲授新课：
一、时间轴时间轴描述了层和图像的属性随时间变化的情况。选择窗口>时间轴打开时间轴控制器。
属性如下：
播放头,指示在网页中显示的是哪一帧。 动画通道： 显示动画层的地方。
动画条：可显示每个对象的持续时间。 关键帧：动画条中的小圆圈是关键帧。
行为通道：在时间轴中执行行为的通道。 回放：可将播放头移到时间轴的初始帧。
后退：将播放头往左移动一帧。
播放：将播放头往右移动一帧。单击Play按钮并按住鼠标不放，则时间轴向前连续播放。
自动播放：当网页载入到浏览器时使当前时间轴自动播放。
循环：当网页载入到浏览器时使当前时间轴无限循环播放。
二、创建时间轴动画
1、在对象面板上选择 Draw layers,在画面增加一个层（Layer1）。
2、在Layer1中插入GIF动画。
3、直接将选中的层拖动到时间轴检查器或选择Modify>Timeline>Add Object to Timeline。此时在时间轴的第一个通道中将出现一动画条。
4、在Timeline选中 Layer1，将最后一帧拖长至30帧，在第15帧的位置插入关键帧。
5、选中第15帧，然后分别在显示区选中层，使鼠标变成，将层（包括图）拖向右上角，然后再在Timeline选中最后一帧，将层拖回起点位置，如图所示。
6、如果希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置，按住Play（播放）按钮不放即可预览网页中的动画。
7、给时间轴加入互交：首先在Timeline 上选中动画条Layer1，然后在状态栏点打开行为控制器，从中选Timeline>Stop Timeline,再点将onClick改成onMouseOver，就是我们用鼠标触到小天使后就停飞，如果我们希望点他一下重新飞起来，那么再从行为控制器中选Timeline>Play Timeline。
通过拖动途径创建动画三、使用多个时间轴
在网页中用一个时间轴控制所有动作不如用多个时间轴分别控制网页的不同部分简单。要管理多个时间轴，请使用以下选项：
要创建新的时间轴，选择（修改>时间轴>增加时间轴）。
要删除时间轴，选择（修改>时间轴>删除时间轴）。
要为时间轴重新命名，选择（修改>时间轴>重新命名时间轴）。
要在时间轴控制器中查看不同的时间轴，可在时间轴弹出菜单中选择。
四、应用已有的动画顺序
要将存在的动画顺序应用到其它对象,1、在时间轴控制器中选择一个动画顺序并拷贝它。
2、单击时间轴控制器的任一帧，然后粘贴动画顺序。
3、使用右键然后从快捷菜单中选择Change Object（改变对象）。
4、从出现的对话框的弹出菜单中选择其它对象后单击OK。 五、上机练习 六、小结作业
Dreamweaver MX2004教案 第11周 星期四 第3、4节课 题
格式化表格
教学目标
掌握表格的基本操作，以及如何对表格进行排版。
教学重点
表格操作
教学难点
格式化表格
教
学
过
程
复习：时间轴的应用 讲授新课：
一．建立表格
1.首先文档窗口欲插入表格的地方单击鼠标置插入点，点击对象面板按钮或拖动它到页面适当位置，此时会显示出插入表格对话框。
2.在插入表格对话框中，按默认值会建立一个三行、三列，宽度为页面宽度75% 的表格，并且表格边框宽度为 1 pixel（象素）。
行和列：指的是行和列的数目。 单元格边距：指的是单元格内容与边框之间的距离（象素值）。
单元格间距：指表格之间的空间大小（象素值）。 宽：指表格宽度，可以用象素或百分比来表示。
边框：指表格边框的象素值，输入 0就没有边框 。
二,格式化表格
1,表格属性面板选项说明:
行和列项中设定表格的行列数。
宽和高设定表格的宽度和高度，可以用象素来设定绝对值或用百分比来设定其相对宽高。
对齐 使表格对齐浏览器的左边(默认设置),右边或居中。
三,调整表格和单元的大小调整表格大小,选中表格，拖动表格的边框线来调整行或列的大小。
用属性面板改变列宽度：
打开属性面板，点击该列的任一单元格或选中列,
在面板的W项,可以输入宽度值，也可输入列宽占整个表格宽度的百分比。
四,添加或删除表格的行列方法一,选中整个表格。 在属性面板中,加大行或列的数值来增加行或列； 减小行或列的数值来删除行或列。
方法二：选中一行或一列，按Delete键删除整行或整列。
五,拷贝和粘贴表格元素
（一）在表格里剪切或拷贝单元格,
1,在表格中选择一个（或多个）单元格。
要剪切或拷贝，选择的区域必须是矩形区,
2,在“编辑”菜单中选“剪切”命令。
如果你选的是整行或整列，那（编辑＞剪切）命令将会移除整行或整列。
（二）粘贴到表格单元里的方法,
1,选定好粘贴的位置。 2,从菜单中选编辑＞粘贴。
（三）想移除表格中的内容：
1,选择一个或多个单元格（但不能是整行或整列）。 2,点菜单编辑＞清除或直接按一下 Delete键。
（四）要拷贝和粘贴单元格中的内容：
六．课堂小结七．上机作业：在单元格中编辑文本
Dreamweaver MX2004教案 第11周 星期五 第3、4节课 题
层
教学目标
掌握层的概念，以及层的相关属性的设置，并且学会层面板的使用。进行层的设置。
教学重点
层的属性
教学难点
层面板的熟悉
教
学
过
程
复习：表格的格式化讲授新课：
一、建立层
从Objects面板中点按钮，或从菜单中选（插入＞层），这时鼠标会变成十字形，拖动鼠标就可插入一个层。然后对层可以通过其上的八个小控点进行拖动，放大缩小等。另外可以选择该层，在属性面板中对其进行设定，层的属性面板中各选项：
Layer ID,层的名字，可以随便起，以便于识别该层。
L和T,层相对于页面或当前层（嵌套时）的左边距和顶边距。
W和H,指层的宽和高。如果层中包含的元素的宽高超过了指定的层的宽高，那指定的W和H值会被忽略。
Z-Index,堆叠顺序号，表示层的前后编号。号码大的层在下方。并且取值可正可负。 要改变Z-Index的大小，可以直接在属性面板中键入,更简单的方法是按F11键调出层面板用鼠标直接拖动各层。
Default,不特别指明层的可见性属性。
Inherit,继承父层的可见性属性。
Visible,层内容可见，无论父层可见与否。
Hidden,隐藏层内容，无论父层可见与否。
Bg Image,层的背景图，可点击后面的文件夹图标来选择图像文件。
Bg Color,层的背景色，不填就为透明。
TOverflow,如果层中的元素大小超出层的宽高，该项将决定显示的方式。
Visible,层根据元素的尺寸自动扩展。
Hidden,保持原有大小，元素超出范围的部分将不可见。
Scroll,给层加滚动条，无论层中元素大小是否超出层的宽高。
Auto,仅在层中元素大小超出层的宽高时才给层加滚动条。
Clip,设定层的可见面积，指定的数值代表的是与层边框之间的象素距离。
二．层面板的使用
最常见到的一些技巧：
1 防止重叠如果选中该项，任意多个层都不会发生重叠的情况。
2 。层的嵌套
所谓层的嵌套是指一个层建在另一个层内部。这样做的好处是你可以用嵌套方式来使所有的层形成一个集合。因为一个嵌套的层或者我们称之为子层可以随父层移动并且继承父层的可见或不可见性（visibility）。
（1）建立嵌套层的方法如下：
方法一：首先在现有的层中点一下鼠标以设定插入点，然后点菜单（插入＞层）。
方法二：直接从控件面板上按住按钮将其拖到现有的层中即可。
方法三：点菜单 Window > Layers（窗口＞层）或按 F11 打开层面板。按下 Control 键并选择层layer2，拖动其到layer3层上。就可将layer2层已嵌套在layer3层之中了。
教
学
过
程
建立嵌套层的方法如下：
方法一：首先在现有的层中点一下鼠标以设定插入点，然后点菜单（插入＞层）。
方法二：直接从控件面板上按住按钮将其拖到现有的层中即可。
方法三：点菜单 Window > Layers（窗口＞层）或按 F11 打开层面板。按下 Control 键并选择层layer2，拖动其到layer3层上。就可将layer2层已嵌套在layer3层之中了。
三、层的操作
1．调整层的大小
选中层，然后在属性面板中输入宽度和高度值。或直接用鼠标的在层的八个控点上拖动调整大小。要调整多个层：可选中两个或多个层，然后在属性面板中填入适当的高和宽值即可。
2,层的对齐选中多个层，点菜单修改＞层和热区,然后选择对齐选项。
3,移动层先选中层，用鼠标拖住最后一个选中层的手柄随意移动。
4,改变层的深度层的深度，用Z-Index属性来表示，可以直接在属性面板中键入，还可按F11键调出层面板用鼠标直接拖动各层。
5,改变层的可视性点菜单（窗口＞层）打开层面板。可看到图标，利用它可以修改层的可视性。 睁开眼睛表示层为可见的；闭的眼睛图标表示层为不可见； 如果没有眼睛图标，表示层为继承性的即与父层属性相同，若并非嵌套层，那就是可见的
6,用层来设计表格
（1） 将层转化为表格：
（2）将表格转化为层：
四．小结：
五．作业：上机练习
Dreamweaver MX2004教案 第12周 星期二 第3、4节课 题
期中考试复习
教学目标
教学重点
教学难点
教
学
过
程
一、文件夹操作考生文件夹创建在考生文件夹下创建站点在站点下面创建网页二、网页中文本操作文本输入网页中文字字体、大小、颜色、对齐等属性设置三、网页属性设置（网页背景、文字大小、颜色等操作）
四、链接链接到页面；
链接到网站；
下载链接；
链接到邮箱；
热点链接五、表格操作
1、标准表格
（1）表格创建、修改及属性设置；
（2）单元格属性设置；
（3）表格中行的操作
（4）表格中列的操作
2、布局表格
（1）布局表格创建及属性设置；
（2）布局单元格创建及属性设置六、图像操作插入图像；
修改图像属性给图像添加特效给图像创建热点链接。
Dreamweaver MX2004教案 第13周 星期二 第3、4节课 题
滚动公告栏
教学目标
掌握如何创建可拖动式的公告栏，并掌握其操作步骤，以及结合时间轴的操作。
教学重点
层的操作
教学难点
时间轴的操作
教
学
过
程
复习：期中考试试卷评讲讲授新课：
一、滚动公告栏实例效果的实现步骤,
1,首先，准备一张背景图片bg.gif，作为滚动公告栏的样式。单击对象浮动工具栏中的图层工具，在网页中插入一个图层Layer1，设置这个图层和图片bg.gif相同大小，然后将bg.gif设置为图层背景。这样图层Layer1就成为滚动面板的样式。
2.单击对象浮动工具栏中的图层工具，按住“Alt”键不放，然后在Layer1上需要显示滚动文字的区域拖动鼠标，画出图层Layer2。
3.在Layer2中绘制一个图层Layer3，注意在这里Layer3的宽度必需小于Layer2的宽度，而长度可以不限，根据文本内容的长度自由调节。
4.在Layer3中加入所需要发布的文字内容。单击Layer3的标签，出现它的属性栏，在属性栏中设置“剪辑“项，使文本的显示区域占满Layer3，这里设置L（左）、T（上）值为0，而R（右）、B（下）的值分别和Leyer3的W（宽）、H（高）相同。
5.打开Timelines面板，并把图层Layer3拖动到Timelines中。单击Timelines的第一帧，把Layer3拖动到Layer2的最下方的位置；然后单击Timelines的最后一帧，把Layer3拖动到Layer2最上方的位置，这样Layer3就会在Timelines的第一帧和最后一帧之间从Layer2的下方出现，滚动到上方消失。拖动Timelines中的播放块可以看到运动效果。
接下来调整文本滚动的速度，一般情况下，在Timelines中设置动画速度为2Fps（2帧/秒）比较合适，同时动画的长度设置得越长，则整体播放速度越慢。然后，勾选Timelines面板上的“自动播放“和“循环“复选框。
6.用鼠标在Timelines的“行为“轨道（即最上面一条轨道）的第一帧位置双击，弹出Behaviors窗口，单击行为窗口左上方的“+”按钮，在下拉菜单中选择（拖动层），在弹出的菜单中选择层,Layer1”→拖动,不限制”，确认即可。
上机练习：重复此过程，加深记忆。
二、上机练习三、课堂小结四、作业
Dreamweaver MX2004教案 第13周 星期四 第3、4节课 题
自由放大网页图片
教学目标
掌握如何利用dw进行自由放大网页图片，并学会应用本实例。
教学重点
层与行为的结合
教学难点
层与行为的结合运用
教
学
过
程
复习：滚动公告栏实例操作及具体应用讲授新课：
一、自由放大网页图片实例步骤：
1、启动Dreamweaver MX，单击插入面板中的插入图像按钮，在弹出的对话框中选择一幅图片，把它插入页面中，并把它缩小。
2、单击Insert面板中的插入层按钮，在页面中拖曳鼠标画一个层，然后在层中插入上步使用的那幅图片。调整它的位置，使之覆盖在缩小的图片上面。
3、在层面板中如果没有打开，选择窗口-其他-层，可打开层面板，选择该层，单击左边的眼睛列，使眼睛闭合，隐藏该层。
4、选择页面中的小图片，单击Behaviors(行为)面板中的加号按钮。从弹出的菜单上选择Show-Hide Layers(显示-隐藏层)动作。
5、在弹出的Show-Hide Layers对话框中单击“显示“按钮。此时，层列表中选定层后面自动添加,显示”，表示显示该层。
6、单击OK按钮返回，行为面板中添加了onClick。Events和显示-隐藏层
7、在Behaviors面板中选择刚才添加的行为，单击中间的下三角，从弹出的事件选择菜单上选择onMouseOver(鼠标掠过)事件，把onClick事件改为onMouseOver事件。设置把鼠标放到小图片上面时显示插入了大图片的层。
8、在Layers面板中用鼠标点选“Layer 1”层，使页面中的层处于被选择状态。然后按第4-7步的类似方法设置行为，操作步骤中不同的地方是：在第5步中单击Hide(隐藏)按钮；在第7步中选择onMouseOut事件。这样设置的目的是：当鼠标移出大图片后，大图片自动隐藏。
9、单击工具栏中的预览按钮，即可在浏览器中预览效果。
上机练习：对本实例进行填充。
二、课堂小结三、作业
Dreamweaver MX2004教案 第13周 星期五 第3、4节课 题
菜单的制作
教学目标
掌握菜单的制作方法，从中学习对表格的编辑以及排版，并添加好行为事件。
教学重点
行为的添加
教学难点
行为的添加
教
学
过
程
复习：网页放大图像效果实例操作步骤及具体应用。
讲授新课：
一、交换图片
1、在导航栏上放置好相应的图片。
1）在页面中插入表格，1行1列，表格边框、间距、填充均为0。
2）在表格中插入制作好的图片，按顺序插入中间不要插入字符或者其它东西。
2、对导航图片进行命名。
对要进行变换的图片，必须进行命名。
选中要命名的图片，在此选，在属性栏中命名，在图像下方的框中输入用户 自定的名字（用英文或数字，如image1,a1等）。
3、设置图片的交换。
选中要进行交换的图片,在此选,在设计面板中添加行为1。当事件为onmouseover时，动作为交换图片。在交换图像窗口中选定刚才的图像命名，在“设定原始档为”框中选定更换为的图像。
添加行为2，当事件为onmouseout时，动作为恢复交换图像。
二、菜单的制作
1、制作三个层，一个层为父层，二个层为此父层下的子层。父层作为子层的统领，当移动父层时，各子层统一移动，方便保持位置。子层一个为菜单层（置前），用以放置菜单，一个为菜单的背景层（置后），用以撤消（隐藏）菜单。
2、制作菜单层。
1）在菜单层中插入表格，一行一列。
2）再在此表中插入表格，多行一列。
3）调整外表格的背景色。
4）调整内表的行宽，字的格式。
5）在内表中输入菜单项，并设置链接。
6）调整表格、单元格的形式，达至美观。要达到美观效果，必须用到样式。
3、设置各层的属性。
1）父层为默认。
2）子层中菜单层为隐藏，背景层为默认。
4、设置有关行为。
1）在导航栏的图片设置行为。加上:onmouseover事件，动作是显示-隐藏层,显示菜单层。
2）在背景层中添加行为。事件为onmouseover,动作是显示-隐藏层，隐藏菜单层。
思考：1、菜单层和背景层的Z值怎样设置它们的大小？同样大可以吗？
2,父层有什么作用？
三、上机练习四、课堂小结五、作业
Dreamweaver MX2004教案 第14周 星期二 第3、4节课 题
自动关闭网页制作
教学目标
1、掌握链接的应用；2、掌握行为动作的应用
教学重点
行为动作的应用
教学难点
代码操作
教
学
过
程
复习：利用层制作下拉菜单讲授新课：
一、自动关闭网页制作本例中制作了两个页面,Index.html是显示于子窗口中的页面，而在名为firstpage.html的页面中，包含在子窗口中打开Index.html的链接。单击链接时，将在子窗口中打开index.html。可以直接单击子窗口中的“关闭”链接关闭子窗口，也可以不去理睬它，在15秒之后，子窗口也会自动关闭。
具体操作如下:
1,在本地站点中生成一个Smlple文件夹。
2,在Smlple文件夹中，生成名为Index.html以及名为firstpage.html的文件。
3,双击Index.html，打开该文档，进入到文档的设计视图窗口中。
4,单击菜单View/Head Content，显示文档的头部区域。
5,单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，打开Inset Script对话框。在Language下拉列表框中选择JavaScript选项，并在Coctento文本框中输入“setTimeout("self.close()"，15000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。
6,在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“###”，将其设置为一个空链接。
7,在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标记模式。然后在“>”前输入“onclick="selfclose()"”。设置完毕，单击OK按钮，确认操作。这样在Index.html被作为子窗口打开后，单击该链接就可以立刻关闭该子窗口。
8,保存Index.html文件，并退出index.html的Dremweaver窗口。
9,现在开始设计fristpage.html页面。在本地站点的Smlple文件夹中，双击 fristpage.html，打开该文档，进入到文档的设计视图窗口中。
10,在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“###”，将之设置为空链接。
11,可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的 编辑标识模式。再在“>”前输入“onclick="window.open( index.html,null,width=200px，height=200px )"”。设置完毕，按下回车键，确认操作。
上机练习二、小结
1、网页中添加行为动作。
2、代码操作三、作业
1、上机作业：利用行为给网页添加自动关闭网页效果
2、书面作业：P247 （1）（2）
Dreamweaver MX2004教案 第14周 星期四 第3、4节课 题
制作反馈表单
教学目标
1、行为的应用；2、表单操作
教学重点
表单应用
教学难点
表单操作
教
学
过
程
复习：自动关闭网页效果制作过程 讲授新课：
本文介绍制作客户反馈表单的过程。主要内容是使用表格设计表单结构和设置form参数。
1.将插入点放在希望表单出现的位置。选择“插入”>“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标。
2.将插入点放在红色的表单中，单击“插入”栏“常用”类别中的“表格”按钮。
3.在“插入表格对话框中，设置行数11，列数2。
4.在表格中，左边一列的单元格中输入文字，右边一列中插入“文本字段”。
5.选中右边一列中的“文本字段”，在属性面板上，为“文本字段”输入和左边一列单元格中相同的文字。
6.重复输入文字和插入“文本字段”，给文本字段命名。按住ctrl键，选中最下面一行的两列，合并单元格。
7.在最下面一列，插入两个“按钮”。
8.选中右边一个按钮，在属性面板上，动作选择为“重设表单”。
9.选中文档左下角“标签选择器”上的form标签，在属性面板上，动作中输入mailto:网站管理员的电子信箱地址，在方法中选择POST。
10.继续选中form标签，打开“标签检查器”面板，在enctype属性中，单击右边的下拉箭头，选择text/plain类型。
11.全选左边一列，居右对齐，选中最下面一列的单元格，居中对齐。为表格和表单设置css，定义表格和表单中的文字大小，客户反馈表单就做好了。反馈表单在使用Outlook Express的电脑上，使用email方式发送，接收到的是一些文本。
购货单位：
地址：
联系人：
联系电话：
传真：
邮编：
电子信箱：
网址：
产品规格型号：
备注：
?
练习
小结作业
Dreamweaver MX2004教案 第14周 星期五 第3、4节课 题
网页应用技巧
教学目标
掌握Dreamweaver Mx2004插件的应用
教学重点
插件的应用
教学难点
插件的应用
教
学
过
程
复习：反馈表单制作过程讲授新课：
一、网页应用技巧：
1,让网页页面更有弹性用工具面版(Object palette)上的按钮开启网页，并且转换到 格式检视( Layout view)。这时可以看到文字方块的列宽,每一列的方框上方中间还有一个小小的下拉式箭头,选择想要设定弹性显示的列上方的小箭头，接着选择「将列设为弹性显示」( Make Column Autostretch)。 (设定自动调整列宽以一列为限)这时该列方框上方就会出现一条波浪形的线，而不是原本表示列宽的数字。 Dreamweaver 会自动制作出固定版面的空格图文件，这个空白图文件是以列上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设定。
2,创造个性化调色盘
Dreamweaver 新的 Assets panel(属性控制面板)是一种可以在编辑网站时根据档案型态，例如图片、样板等来管理档案的新工具，当你定义新站台时(选择Site · New Site)，所有类型的组件会自动增加到 Asset panel 里的适当表框中。这个加入新的Assets panel属性控制面版里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及连结的颜色等。这是一个为使用者量身定做的网站导向颜色盘。只要激活 Assets panel (先选择 Window · 再选择 Assets)，接着选择左方那个小小的色彩滚动条，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进制值的色彩浓淡度，和三色对应码(RGB)。如果想将调色盘工具列缩小一点，甚至可以仅加入某些颜色到调色盘的收藏夹里。只需将选取的颜色反白、选择窗口里一个叫做「添加到我的收藏夹」按钮(最下方靠右的按钮)，就完成了。
3,制作弹出式选单导览系统原本要制作弹出式选单导览系统(Pop-up Menu Navigation System)要用到好一些 JavaScript 的语法技巧，但是若你装了Dreamweaver/Fireworks Studio，轻轻松松即可快速办到。首先在 Fireworks 里开始，选择某个图片,然后在 Set Pop-Up Menu的对话框里选择 Insert· Pop-Up Menu，你可以输入项目(items)的名称并选择 Plus (加入)按钮，来新增该项目。你可以继续在跳出来的讯息框里进行细项设定，例如设定该项目所要用的文字及连结，当然也可以新增子选单、并重新安排下一层的设定。完成时，选择 Next (下一步)，继续设定偏好值，例如颜色、字体等等。这时选单完成后，可以预览 HTML 语法，也可预览影像。再选择 Finish (完成)。这时当鼠标移动到原来的图案时，会出现选单系统的内容一览。 接着将制作好的档案汇出时,Fireworks 会自动生产出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像档案。
4,让图档动起来如果你同时安装有 Dreamweaver/Fireworks Studio，这两种产品搭配的完美程度将使你赞不绝口。即使你不是专业的图档设计者，在设计网页时也多多少少想把一些 GIF 图片文件修改得活灵活现。Dreamweaver 可以让你制作动画不求人喔!在标准窗口里选择要进行修改的图片，然后在 Property Inspector 里选择编辑钮(Edit)。如果你安装的 Dreamweaver里附有 Fireworks,Fireworks 就是 Dreamweaver 预设图片编辑器，这时图片就会自动加载到 Fireworks
5,让按钮有闪动效果
6,制作流动文字二、小结作业
网页设计概述
教学目标
1、了解网页设计原则；2、了解网页设计制作工具；3、了解站点规划基本流程。
教学重点
1、网页设计及布局原则；2、站点规划基本流程。
教学难点
1、网页设计及布局原则；2、站点规划基本流程。
教
学
过
程
基础概念
1、网页：网站中供用户阅读的一个个页面，又称为WEB页。是通过超级链接将各种文档连接起来的一个大规模信息集合。网页（Web页）一般指文件扩展名为htm（或html）结尾的文档。这些文档是用文本标记语言HTML表示出来的，故通常也称之为HTML文档。这种语言要通过IE浏览器“翻译”过来我们才能直接访问。
2、主页（Homepage）：是各个网站向用户提供的最初起始页面。通常包括通向其它相关页面的超级链接。
3、万维网：（World Wide Web）简称WWW，或3W，是目前INTERNET网上最流行的一种基于超文本形式资源组强形式。
浏览器：网络中资源要通过浏览器来访问（IE、Netscape、腾讯）。
统一资源定位器（universal resource locator，URL）：用来指出某一项信息所在位置及存取方式，也就是我们经常所说的网址。
通信协议 HTTP：超文本传输协议
FTP：文件传输协议二,网页包括的主要元素
1,文本：信息载体和交流工具，网页的主体以文本为主。文本格式有（字体、字号、颜色等）
2,图像：在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。图像在网页中可以使用多种文件格式，但使用最多的还是JPEG和GIF两种格式，因为这两种图像格式占用空间最少。网页中使用图像不宜太多，每张图像也不宜太大，图像过多传会让人觉得累赘，过大会影响网页的传输速度。
3,超级链接：它是Internet上最受欢迎的基于超文本方式的多媒体信息查询系统。它是从一个网页指向另一个目的端的链接。该链接可以指向该网站的另一个网页，也可以指向世界各地的其他网页。文字或图像都可以设置超级链接。链接一般包括两种类型：站内和站外链接。
4,导航栏：是网站设计者规划好网站结构后必须考虑的一个问题。为了让访问者顺利浏览，避免访问者迷失方向，可以在网页上设置导航栏；它能使访问者方便地返回主页或者继续进一步访问。导航栏可以是按钮、文本超级链接或者图像，可以在站点的每一网页上设置导航栏，一般情况下导航栏应放在网页中比较显眼的位置。
5,表格：在网页中的表格主要是一种用来控制网页中页面布局的有效方式。为了达到较理想的视觉效果，通常都有不显示边框。
6、表单：是一种特殊的网页元素，它通常用来收集信息或实现一些交互式效果。其主要功能是接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。
7,多媒体及特殊效果：有些网页为了吸引浏览者，可级还会有声音、动画、视频等多媒体元素以及悬停按钮，Java、ActiveX控件等特殊效果。
教
学
过
程
网页设计原则正确分析网页用户需要；
网页命名要简洁 在助于管理网页
方便用户搜索确保页面导览性好网页下载时间不宜过长网页设计做到不同环境均能浏览网页中的图形设计（.gif和.jpg/jpeg）
站点内容搭配（图文并茂、美观大方）
尽量使用相对链接页面色彩（页面色彩是树立网页（站）形象的关键因素之一，在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性）
10、网页的文字（四大原则）
原则一：不要使用超过3种字体的文字类型，否则网页看起来将显得杂乱，没有主题。
原则二：不要用太大的字，因为版面空间非常宝贵和有限。
原则三：最好不要使用不停闪烁的文字。
原则四：标题文字字体应比正文稍大，颜色有所区别。
网站规划流程确定网站规划主题搜集资料规划网站选择合适制作工具制作网页上传测试
7、推广宣传例如：设计一个学习型的网站其模块（结构可以设计如下）
首页、图像处理（FIREWORKS、PHOTOSHOP）、动画（FLASH MX2004、COOL 3D、3DS MAX）、网页设计（FRONTPAGE、DREAMWEAVER、PHOTOSHOP）、程序设计（VB、C、PASCAL、DELPHI）、教程下载、学习园地、联系我们网站分类门户网站：如www.sina.com.cn
职能网站：如www.alibaba.com.cn
专业网站：如www.cctv.com
个人网站：如www.wu.com
课堂小结、作业网页设计原则 2、网站规划流程 3、常用工具教学反思：本堂课主要学习了网页的主要制作和设计流程的知识简介。在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制作软件的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼。
Dreamweaver MX2004教案 第二周 星期一 第3、4节课 题
网站制作流程
教学目标
1、掌握网站制作的基本流程；2、掌握网站初期规划；3掌握网站整体布局。
教学重点
网点制作的初期规划
教学难点
网点制作的初期规划
教
学
过
程
一 制作网站的流程
建立一个网站上一个系统工程，有自己特定的工作流程，只有遵循这个步骤，才能设计出一个令人满意的网站。下面我们就来谈一谈网站设计的基本流程。网站设计主要分三个阶段。初期规划、中期实际制作、后期维护。
（一）初期规划：
1、确定网站的主题、名称：主题鲜明、小而精、体现个性。
2、搜集材料：可以从各类媒介中收集，但就注意要有特色（自己的东西）。
3、规划网站：包括要栏目的设置、目录结构、风站的风格等。网站风格主要体现在：
①颜色的搭配：
②网站的标志（Logo）
③版面的布局：突出重点、平衡和谐，网站标志、主菜单等重要模块应放在最显眼、最突出的位置，然后再安排次要模块（如搜索、友情链接、计数器、版权信息、E-mail地址等）。
④图像的运用：整个页面不要太花，暄宾夺主主，图像大小（字节数）尽可能缩小，单张图像不要超过30KB，每页图像总量不要超过60KB。最好采用JPG和GIF两种图像格式。
（二）、实际制作
1、制作网站主要包括以步骤：
① 建立一个用于容纳首页及相关网页和网站中用到的其他文件的本地站点。
② 在站点根目录下创建子目录 （为了使文件安排比较清晰，将页面文件和图像文件分开放置）。
③ 向该站点中添加所需的空网页。注意：文件名和目录都不能使用中文，且用小写。
④ 设计网页尺寸：目前大都采用的是15寸显示器，页面大都设为800╳600规格，网页应选择760╳420模式。
⑤ 设置网页的属性；包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。
⑥ 向网页中插入文本、图形图像、动画等对象，并将图像合理布局。
⑦ 建立所需的超级链接。
⑧ 预览和保存网页。
2、上传测试网页制作完毕后一般要进行测试。主要包括上传前兼容性测试、链接测试和上传后实地测试。完成上传前所需的测试后，利用FTP工具把网页发布到自己申请的主页存放服务器上。网站上传达室后要在浏览器中打开自己的网站，进行实地测试，发现问题及时修改，然后再上传测试。全部测试完毕后就可以把网址告诉给朋友，让他们不浏览。
（三）、后期维护推销网站：网页做好后，要不断地进行宣传，提高网站的访问率和知名度。推广网站的方法很多，如E-mail、新闻组、与别的网站交换链接、到搜索引擎上注册、加入交换广告等。
2、维护更新：网站要注意定期维护、扩充内容，不要长期不变，只有不断补充新的内容。才能吸引住浏览者。同时，随着软硬件的进步，网页设计也应由文字向多媒体、由平面向立体动画或影片、由单项传播向交互式发展。
二、复习与思考:
1、网页文件的扩展名
2、网页包括的主要元素
3、网页图像格式使用最多的两种格三、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作的基本流程。在教学过程中取得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。
Dreamweaver MX2004教案 第二周 星期二 第1、2节课 题
HTML语言教程（一）
教学目标
1、了解HTML基本结构；2、了解HTML单位和颜色表示方法；3、掌握相对与绝对链接。
教学重点
HTML基本语法及相对和绝对链接
教学难点
相对和绝对链接
教
学
过
程
一、HTML基础知识
1、HTML定义
HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件，因为它就是一总纯文本文件。
2、HTML语言的基本结构下面我们来看一小段HTML语言的代码，来了解HTML语言的基本结构：
<html>
<head>
<title>我的第一个网页</title></head>
<body>我的网页</body></html>
将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后再所在的目录下就可看到一个IE的图标，名字就是你所存的文件名称。
注意：几乎每一种HTML语言的语法都是以<>开头，以</>结束。
3、HTML语言的基本单位
（1）长度单位
长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。
长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。
<HR>标记是在页面上建立水平线的标记。
width是水平线元素中的一种属性，用来表示水平线的宽度。这里width="500"即表示这个水平线的宽度是500像素；width="%50"即表示水平线占据客户区的总宽度的%50。
（2）颜色单位和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方法：16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同，但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。
<font COLOR=#0000ff>用16进制表示红色
<font COLOR=red>用颜色名表示红色注意：
16进制颜色代码，语法格式,#RRGGBB 。16进制颜色代码之前必须有一个“#”号，这种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围是00--FF。
10进制RGB码，语法格式,RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别是红色、绿色、蓝色，他们的取值范围是0--255。以上两种表达方式可以相互转换，标准是16进制与10进制的相互转换。
直接颜色名称，可以在代码中直接写出颜色的英文名称。
以上三种表示方法的效果相同，一般16进制颜色代码的表示方法比较常用。可以根据自己的喜好和实际情况来决定使用哪一种表示方法。
教
学
过
程
（3）URL路径
URL(Universal Resource Locator，统一资源定位器)路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信息。在HTML中，URL路径分为两种形式：绝对路经和相对路径。
a,绝对路径：
绝对路径是将服务器上磁盘驱动器名称完整的写出来，同时也会表现出磁盘上的目录结构。
语法格式：?
例如：http://www.frontfree.net
<A href="file:///D:/test/html.htm"></A>
b,相对路径：
相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。
语法格式,? 相对关系/部分路径/文件名
根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。
<1>相对文档：
这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../”表示上一级目录，没有“../”表示当前目录。
例如当前文档的路径是：test/project1/index.htm 。我们要找test目录下的html.htm 。而当前的目录是project1，我们要回到上一级目录中，所以路径是“../html.htm”。
<2>相对根目录：
这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。
二、上机练习
1、利用记事本制作一个简单的页面。
例如,<html>
<head>
<title>欢迎光临</title></head>
<body><font color=red>我的主页</font><br>
<font color=”#00ff00”>欢迎光临我的主页！</font>
</body></html>
2、接上面例题，将“我的主页”创建一个链接三、教学反思：
在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制作语言html的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼四、作业
Dreamweaver MX2004教案 第二周 星期三 第1，2节课 题
HTML语言教程（二）
教学目标
1、掌握BODY标志的应用；2、了解BODY标志中属性。
教学重点
BODY标志中属性
教学难点
BODY标志中属性
教
学
过
程
一、BODY标志
body是一个网页代码的绝对主要部分。body是由<body>开始，由</body>结束。下面我们看一下body部分的元素：
下面介绍各个部分的功能及用法：
bgcolor用于指定页面的背景颜色。在Microsoft公司的IE浏览器中，默认情况下是白色，Netscape公司的Navigator浏览器的默认情况是灰色。
语法格式：<body bgcolor="颜色值">
background：background属性用于指定页面的背景图案。
语法格式：<body background="http://www.ebok.cn/URL">
下面介绍几种文字的属性，可以改变文字的颜色,以及在页面上留出空白,
textlinkalinkvlink leftmargin topmargin
他们的作用分别是：非链接文字的颜色；可连接文字的颜色；正被点击的可链接文字的颜色；已被点击的可链接的文字的颜色；页面左侧的留白；页面顶部的留白。
语法格式：
<body text="color" link="color" alink="color" vlink="color">
<body leftmargin="value" topmargin="value">
BODY实例如右所示：
说明：对于link这样的属性，大多数html的页面已经不使用这样的用法了。现在多数是在head中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时，字体变色，点击后字体变为灰色。具体方法如下：
A:link {color:#00007f;}
A:visited {color:#65038e;}
A:active {color:#ff0000;}
A:hover {color:#ff0000;}
将这段代码加入到head中，在body中加入有链接的文字，就可以看出效果了。这一部分是属于css中的知识。
Align属性(三种选择)
Left(默认值)? 文字左对齐 Center文字居中对齐 Right 文字据右对齐
教
学
过
程
<br>是换行标记，夹在代码的最后，显示出的网页将自动换行。同样，<nobr>……</nobr> 就是不换行标记，无论你在代码中将文字写为何种形式，都会在一行中显示。
通过浏览器，我们可以看到其中的效果，大家也就能体会到其中的用法。还有一种属性叫做预格式化<pre>……</pre>。请大家看一下下面的例子。
示例：
<html>
<head>
<title>预格式化演示</title>
</head>
<body>
<p>卜算子 咏梅</p>
<pre>
驿外断桥边，寂寞开无主。
已是黄昏独自愁，更著风和雨。
无意苦争春，一任群芳妒。
零落成泥碾作尘，只有香如故。
</pre>
</body>
</html>
通过浏览器看看上面这段代码的产生效果。
二、上机练习三、教学反思学生通过本节课的学习后，大多数同学已经掌握了网页制作掌握BODY标志的应用。在教学过程中取得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。。
四、作业
Dreamweaver MX2004教案 第三周 星期一 第3、4节课 题
Dreamweaver MX简介
教学目标
1、了解网页中部分术语；2、如何创建一个站点；3、如何创建一个简单网页。
教学重点
站点及网页创建
教学难点
站点及网页创建
教
学
过
程
复习：1、利用记事本编辑一个网页。
2、BODY标志符及其属性设置。
讲授新课：
Dreamweaver简介网页的术语：
1、网页：通过浏览器在WWW上看到的页面。
2、网站：是网页的集合，设计者先把整个网络结构规划好，然后分别制作各个网页，在整理过程中，再将网页按一定顺序结合起来，使浏览者在访问该网站时能连接到各个网页进行观看网页内容。
3、网站开发流程：是集体团结的象征，因一个公司组织开发一个网站时，不是某个人单独完成的，参与开发的包括主导网站的单位、客户，还有美术设计人员、程序设计师和维护人员等。
4、服务器：用户在浏览网页时，是由自己的计算机向存放网页的计算机发出的一个请求，对方在收到请求后，将所需内容发送给发出请求的计算机。
本地计算机被称为客户机，对方计算机被称为服务器。
5、CSS：层叠样式表，可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标形状等。
html标签
1、标签：用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面，通过标签可在网页中加入文本、图片、声音、动画等多媒体文件。
2、标签分类：
a、单标签：如<br>表示换行
b、双标签：给网页文件发送的指令符号前面和后面分别加上标签，告诉文件从开始标签开始到结束标签之间执行某个命令。如<html></html>
工作环境介绍
1、页面编辑器,标题栏：若做更改但未保存，则在文件名后显示星号。
菜单栏：
插入栏：
文档工具栏：“设计”“代码”“拆分”
标签选择器：显示环绕当前选定的内容的标签的层次结构。
状态栏,
窗口大小：
教
学
过
程
2、面板组：是分组在某个标题下面的相关面板的集合。
3、属性检查器：用于测试和编辑当前所选页面元素的属性。
五、站点的建立：
步骤：1、在硬盘上新建一个用来存放网站内容的文件夹。
2、“站点”“管理站点”
3、“新建”“站点”
4、定义“编辑文件”第一部分：为站点输入名称。
5、定义“编辑文件”第二部分：服务器技术的运用与否。
6、定义“编辑文件”第三部分。
7、定义“共享文件”
8、完成。
六、编辑网页用记事本：<html>
<head>
<title>欢迎光临我的第一个网页！</title>
</head>
<body>
这是我的第一个网页！</body>
</html>
用dreamweaver编辑
教学反思：
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver创建站点的应用，制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性
八、课外作业：上机练习。
Dreamweaver MX2004教案 第三周 星期二 第1、2节课 题
表格的应用
教学目标
通过本节学习，让学生掌握在网页中如何应用表格，以及如何对表格进行编辑。
教学重点
表格的创建与修改
教学难点
表格的修改
教
学
过
程
复习：1、如何利用Dreamweaver MX2004创建一个站点。
2、如何利用Dreamweaver MX2004创建一个简单的网页。
讲授新课：
概念表格宽度：百分比、像素边框粗细：设置表格边框的大小，默认值为1像素。
单元格边框：单元格中的内容与边框距离的大小。
单元格间距：指单元格与单元格、单元格与表格边框的距离，两者的单位都为像素。
页面设置：实质是为表格选择一个加粗文字的标题栏，这样对于要求标题以默认粗体显示的表格省去加粗动作。
表格的编辑和排版创建表格方法一：菜单。单击“插入/表格”命令，完成表格创建操作。
方法二：在“常用”工具栏中单击“插入表格”按钮，创建表格。
表格修改表格的宽度和高度表格的背景和边框选择单元格选择单个单元格：按delete键后，内容清除，表格存在。
连续选多个单元格：
选择整行单元格：
选择多个非连续的单元格：按下ctrl键。
选择整个表格调整行和列的宽度和高度
shift
插入行和列修改---表格---插入行或列拆分和合并单元格表格的嵌套：
在一个表格的其中一个单元格里再插入一个表格，“插入”—“表格”
课堂小结：
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver的表格创建，应用及编辑。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性。
四、课外作业：课后习题填空1、2、3
Dreamweaver MX2004教案 第三周 星期三 第1，2节课 题
表格应用实例（一）
教学目标
1、掌握表格的创建及修改操作；2、将本班课程表设计成一个网页。
教学重点
将课程表做成一个网页
教学难点
表格的修改
教
学
过
程
复习：1、如何创建一个表格？
2、如何修改创建好的表格？
3、更改表格中行、列、单元格属性。
讲授新课：
操作步骤
1、启动Dreamweaver MX2004
2、创建新站点
3、创建一新网页，网页标题为“304班课程表”
4、单击“插入”菜单，选择“表格”命令
5、创建一个8行6列的表格，设置表格的宽度为480像素，高度为200像素
6、设置表格的边框，单元格宽度、高度及背景颜色
7、对表格进行合并和拆分操作，如上图所示
8、在表格中输入本班的课程表
9、保存预览，完成网页操作。
二、上机练习按要求完成本网页的制作三、教学反思学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver中表格的应用及其把课程表设计为网页的操作。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性
四、作业
Dreamweaver MX2004教案 第四周 星期一 第3、4节课 题
表格实例（二）
教学目标
1、掌握表格的创建及修改操作；2、将教材目录设计成一个网页。
教学重点
教材目录设计为一个网页
教学难点
单元格修改操作
教
学
过
程
复习：1、表格的创建与修改
2、表格中单元格的操作
3、课程表网页制作讲授新课：
一、实例操作步骤
新建一页面在新建页面中创建一45行7列的表格，表格的宽度为600像素，第一列宽度为190像素，第二列宽度为60像素，第三列宽度为30像素，第四列宽度为40像素，第五列宽度为190像素，第六列宽度为60像素，第七列宽度为30像素。
将表中第四列的单元格选定，并将其合并为一个单元格将Dreamweaver MX 2004教材上的目录输入到表格中，如上图所示。
设置文字属性：文字字体为“宋体”，文字大小为“12像素”，文字对齐方式为“居中”。
添加省略号和页数，最后保存，效果如上图所示。
上机练习小结表格的创建及修改操作三．教学反思学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver创建站点的应用，制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性
Dreamweaver MX2004教案 第四周 星期二 第1、2节课 题
表格线框制作
教学目标
掌握边框的制作方法，尤其是细线边框、粗线边框的制作
教学重点
细线边框制作
教学难点
细线边框制作
教
学
过
程
复习：1、表格和单元格操作
2、目录网页制作讲授新课：
一、细表格边框制作方法方法一：背景设置式
方法二：
教
学
过
程
方法三：CSS层叠式
二、上机练习用第一种细表格方法完成课程表网页制作。
用第二种细表格方法完成目录网页制作。
用第三种细表格制作方法完成P54面实例。
三、教学反思：
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaver边框的制作方法，尤其是细线边框、粗线边框的制作应用，制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学习积极性四、作业
Dreamweaver MX2004教案 第四周 星期三 第1、2节课 题
滚动字幕
教学目标
掌握MARQUEE标志符的应用。
教学重点
MARQUEE标志符的应用
教学难点
MARQUEE标志符的应用
教
学
过
程
复习：1、细表格制作的三种方法。
2、制作一个细表格讲授新课：
一、MARQUEE标签
1、把光标插入点放在需要插入滚动字幕的地方。
2、点击插入面板的“标签选择器,
3、选择 marquee标签，点击“插入”按钮，如下图1所示
4、转换到代码视图。把光标插入点放在 marquee标签内。
5、选择“窗口”>“标签检查器”。可以在“标签检查器”中设置标签的各种用法
6、点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式，如图2所示。
7、direction属性设置字幕内容的滚动方向，如图3所示。
8、scrollamount属性设置字幕滚动的速度，如图4所示
9、scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。
教
学
过
程
10、width属性设置滚动字幕的宽度。
11、onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。
onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动
12、style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。
13、loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。
实例：
二、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweave掌握MARQUEE标志符的应用。但是本知识点点需要以后上课经常巩固。
Dreamweaver MX2004教案 第五周 星期一 第3、4节课 题
超级链接（一）
教学目标
掌握链接的种类以及各种链接的功能和实现方法。
教学重点
链接的类型
教学难点
链接的应用
教
学
过
程
复习：1、marquee标签在网页中的应用
2、marquee标签中属性设置
3、利用marquee标签制作一滚动字幕讲授新课：
一、链接分类超级链接作用：是可以把一个网站的网页连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。
分以下几种类型：
1 导航链接：实现站点内文档的链接。方法一，使用属性检查器；
方法二，指向文件图标链接文档；
方法三，使用拖放创建链接。
相关内容：在链接时使用的路径；目标文件的打开方式。
2 链接到文档中的指定位置，使用锚；
3 空链接：是一个无指向的链接。使用空链接可以为页面上的对象或文本附加行为。
4 创建javascript脚本链接：用于执行javascript代码或者调用javascript函数,这样可以让来访者不用离开当前Web页面就可以得到关于一个项目的其他信息。当来访者点击某指定项目时，脚本链接也可以用于执行计算，表单确认和其他处理任务。
5 创建电子邮件链接（mailto:sa@163.com）
6 链接到站点中的文档或者其它站点，可以使用跳转菜单，跳转菜单是文档中的一种来访者可以看见的弹出式菜单，其中列出了链接的文档或文件。
7 给链接增加提示，给链接增加快捷键。
二、创建导航链接
◇使用指向文件图标链接文档：选中图像，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。示例中指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm。
◇使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标
◇选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用。
◇根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径。很少用到这种路径。如果没有服务器的控制权限，不要使用这种方式！
教
学
过
程
◇绝对路径：完整的URL，称作绝对路径。例如在链接域输入http://vip.5dmedia.com/fuguotao
◇从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。
◇选择被链接文档要打开的位置：
若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选一个选项。
_blank 在新的未命名的浏览器窗口中加载链接文档。
_parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。
_self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。
_top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。
一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。
三、使用锚简明步骤：选中文本→在目标文档中插入锚标记→命名→拖动“指向文件”图标到文本。
◇链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面 板上的命名锚记工具。键入锚记名称，一个站点中的锚记名称只可以是唯一的，否则会出现错误。
◇在文档中选取要创建链接的文本，打开您需要链接的命名锚记所在文档，不一定要是当前文档，可以是站点中的其它文档，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处。
四、小结
1、链接在网页中的作用及分类。
2、如何创建链接？
五、上机练习六、作业七．教学反思,
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweave链接的种类以及各种链接的功能和实现方法。这个知识点在本课中算是比较容易掌握的，因此。在练习和讲解的时间分配上会比较容易搭配。
Dreamweaver MX2004教案 第五周 星期二 第1、2节课 题
超级链接（二）
教学目标
掌握链接的种类以及各种链接的功能和实现方法。
教学重点
链接的应用
教学难点
链接的应用
教
学
过
程
复习：1、链接的作用及分类
2、如何创建一个导航链接？
3、如何创建一个锚点？
讲授新课：
一、使用空链接使用空链接可以为页面上的对象或文本附加行为。创建步骤：
1,在文档窗口中，选中要设置链接的文本、图像或其他对象。
2,在属性面板的链接框中，只输入一个“#”号。
3,如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件。可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。
4,还可以在属性面板的链接框中输入javascript:;创建空链接。
二、创建javascript脚本链接
1,在文档窗口中选取文本，图象或对象
2,在“属性”检查器的“链接”栏中键入javascript:，其后紧接javascript代码或函数调用。
例如在链接栏中键入javascript:alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框三、创建电子邮件链接方法一：选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接” 工具，输入邮件地址。
方法二：选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址。
四、创建跳转菜单，例如制作一个友情链接。
首先将插入点放在要插入链接的位置。点击表单面板中的跳转工具在插入跳转菜单对话框中，点添加项添加新链接。
在属性面板中选择类型为“菜单”。
五、给链接增加提示，给链接增加快捷键。
首先将插入点放在要插入链接的位置。
点击常用面板上的超级链接工具。
设置链接参数。
标题是指当指向链接会出现提示六、小结空链接、JavaScript链接、邮件链接、跳转菜单等链接创建。。
七、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweave链接的种类以及各种链接的功能和实现方法。这个知识点在本课中算是比较容易掌握的，因此。在练习和讲解的时间分配上会比较容易搭配。
Dreamweaver MX2004教案 第五周 星期三 第1、2节课 题
CSS样式
教学目标
掌握CSS样式表的使用方法，以及每个样式表的设计方法
教学重点
CSS样式应用
教学难点
CSS样式应用
教
学
过
程
复习：1、空链接、JavaScript链接、邮件链接、跳转菜单等链接创建。
2、链接参数设置。
讲授新课：
一、使用最基本的CSS
概念：层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。CSS 样式使您可以控制许多仅使用 HTML 无法控制的属性。
（一）：把一个网页的文字变成12象素（px）大小。
实现方法：通过“重定义HTML”标签，定义td（td是单元格的标签）的字体大小为12象素（px）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。
简明步骤：打开样式面板→在类型中选择“重定义HTML”标签→选择要重定义的标签，例如td→给所选标签（例如td）定义CSS→一个定义了标签的网页就做好了。
1.打开一个网页文档。
2.打开样式面板。
3．点击“新建CSS样式“按钮。
4.在“类型”中，选择“重定义HTML”标签。
5.选择td标签。Td标签代表单元格。
6．选择分类中的“类型”。
7.设置字体：选择字体，如果没有需要的字体，可以编辑字体列表，
大小：设置字体大小，好看的中文字大小有12象素（px）和9点数（pt）两种，两者效果差不多。
行高：行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在15像素到25像素之间。实例中使用20像素。
修饰：对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。
颜色：黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色！
8.按“确定”按钮后，一个应用了CSS的网页就做好了。
（二）：编辑字体列表
1.单击字体栏的下拉箭头，打开编辑字体列表。
2.在编辑字体列表窗口中，点击加号按钮。
3.选择一种字体，如宋体，按左箭头按钮。
4.继续添加字体，选择一种字体，如Arial，按箭头按钮添加。
5.可以重复以上的步骤，添加其它组合的字体。
教
学
过
程
（三）：重定义body标签，使表格之外的内容应用样式。如果在一个网页中，在表格之外还有内容，就需要定义body标签。
1.定义了单元格而没有定义body的网页。
2.选择重定义“body”标签。按照第一部分的方法，定义“body”标签。
3.定义了body的网页。
（四）：定义表单标签。如果在一个网页中使用表单，就需要重定义这些表单标签。
1.定义input标签。
2.定义select标签。
3.定义textarea标签。
（五）：定义层对应的标签。层对应的标签是div。
（六）：定义锚标签。既是有关链接的标签。锚对应的标签是a。
1默认锚标签的网页，链接有下划线，蓝色。这种链接很难看！
2.在标签下拉栏中选择a。
3.定义a的CSS样式。大小选择12象素；修饰选择无；颜色选择一种深灰色，就可以和采用黑色的文本区分开来。
4.重定义了锚标签的网页。
（七）：修改样式表。
在CSS样式面板中，单击“编辑样式”单选按钮，再点击右下角的“编辑样式表”按钮。
二、上机练习三、小结学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS样式表的使用方法，以及每个样式表的设计方法。这个知识点在本课中算是比较难以掌握的，因此。在练习和讲解的时间分配上会花较多时间来搭配。
Dreamweaver MX2004教案 第七周 星期一 第3、4节课 题
CSS文字样式
教学目标
通过本节学习，让学生掌握CSS样式表的使用方法，以及每个样式表的设计方法
教学重点
创建CSS样式
教学难点
CSS选择器的四种状态
教
学
过
程
一 CSS样式通过上节课的学习，要了解使用样式表的基本思想是格式与内容分离，先定义后使用。
二 CSS样式的基本操作
1、创建CSS样式（操作步骤）
⑴、选择【窗口】下的CSS样式命令，弹出CSS样式面板。
⑵、单击“CSS样式”面板右下角的“+”符号新建一个CSS样式
⑶、在弹出的“新建样式”对话框中选择三种样式类型。
① 创建自定义样式(class)：该样式可以被应用于文档中的任何该文本。
② 重定义HTML标签：将现有的标签赋上样式，不需要选中对象就可能直接应用到网页中。
③ CSS选择器：用于对超级链接的四种状态进行设置。用“选择器”下拉菜单列表框进行选择。
它们的意义分别是：
a：Link 超级链接的正常状态（加载网页后的初始状态）[网页默认状态]
a：Visited 被点击过后（或称被访问过后）的状态。 [点击后的状态]
a：Hover 鼠标指针指向该超级链接时的状态。 [接触时的状态]
a：Active 鼠标单击超级链接时（尚未松手时）的状态。 [点下时的状态]
④ 新建样式表文件：生成专门的*.css文件，可以应用于多个文档，属外部链接式样式。单击“确定”按钮，系统会提示保存CSS样式文件。
⑤ 仅对该文档：只在当前文档中应用，属嵌入式样式。
⑷,选择“创建自定义样式”并在“名称”文本框中输入自定义的CSS样式表名称，选择“仅对该文档”单选项。
⑸,单击“确定”按钮，打开“样式定义”对话框。
⑹,在此对话框中可能定义样式表的各项属性。
⑺,单击“确定”按钮后，一个CSS样式就创建好了。新的样式会出现在“CSS样式”面板中。
三 使用CSS样式表四 编辑CSS样式表五 删除CSS样式表
（一）、打开CSS样式现板
（二）、在CSS样式面板中选择要删除的样式名称，再单击“删除样式”。
注：在删除了样式之后，该文档将恢复应用样式之前的状态。
六 设置CSS样式表属性。
CSS样式对话框有八个选项卡：类型、背景、区块、盒子、边框、列表、定位和扩展。
复习与思考,
二、上机测验：1、“我国古书之最” 2、“水调歌头”
教学反思,学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS样式表的使用方法，以及每个样式表的设计方法。这个知识点在本课中算是比较难以掌握的，因此。在练习和讲解的时间分配上会花较多时间来搭配
Dreamweaver MX2004教案 第七周 星期二 第1、2节课 题
多彩文字链接
教学目标
1、掌握CSS样式的应用；2、CSS样式在文字链接中的应用于。
教学重点
文字链接样式应用实例
教学难点
CSS样式应用
教
学
过
程
复习：1、CSS样式的应用
2、CSS样式实例讲授新课：
一、实例操作步骤首先创建一个基本的链接样式，其他的样式将在此基础上添加一个自定义的Class类。
Shift+F11打开样式面板，点击新建样式按钮，如图一；
在Type选项中选择Use CSS Selector，创建默认链接样式，如图二；
按照图三中所示设定默认链接的样式为无下划线，字体为宋体9pt，其他色彩等等都不设置，我们将在后面为每一个Class类分别设置。
定义样式类Class。步骤如下：点击添加打开新定义样式面板，选择Make Custom Style（class）定义自己的样式类。如图四；
为链接文字添加样式类。在Dreamweaver中选择一项链接文字，在窗口最下端的快速标签选择条上选择标签，右键点击此标签，选择Set Class将自定义的样式赋予此链接文字即可，如图五；
其它链接文字样式的做法与此相同，后面我将不再作介绍。在本教程中有关定义hover状态的链接样式办法，朋友们可以自己制作。我也不再作介绍，只是提示定义时直接输入[.t1:hover]即可。
二、上机练习三、小结四、作业教学反思,
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS掌握CSS样式的应用和CSS样式在文字链接中的应用。经过上面的学习，大家已经对这个css样式掌握的较好了。能够较好地去理解各种概念。
Dreamweaver MX2004教案 第七周 星期三 第1，2节课 题
CSS样式表的应用实例
教学目标
1、掌握CSS样式应用；2、文字样式和链接样式实例。
教学重点
文字样式和链接样式实例
教学难点
CSS样式创建
教
学
过
程
要想做出精美的网页一定要用到CSS。层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。CSS 样式使您可以控制许多仅使用 HTML 无法控制的属性。
第一部分:要实现的目标:把一个网页的文字变成好看的12象素(px)大小。
实现方法:通过“重定义HTML”标签，定义td(td是单元格的标签)的字体大小为12象素(px)。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。
简明步骤:打开样式面板→在类型中选择“重定义HTML”标签→选择要重定义的标签，例如td→给所选标签(例如td)定义CSS→一个定义了标签的网页就做好了。
1、打开一个网页文档。
2、打开样式面板。
3、点击“新建CSS样式“按钮。
4.在“类型”中，选择“重定义HTML”标签。
5.选择td标签。Td标签代表单元格。
6.选择分类中的“类型”。
7.设置字体:选择字体，如果没有需要的字体，可以编辑字体列表。
大小:设置字体大小，好看的中文字大小有12象素(px)和9点数(pt)两种，两者效果差不多。
行高:行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在15像素到25像素之间。实例中使用20像素。
修饰:对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。
颜色:黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色!
8.按“确定”按钮后，一个应用了CSS的网页就做好了。
教
学
过
程
定义锚标签。也就是有关链接的标签。锚对应的标签是a。
1默认锚标签的网页，链接有下划线，蓝色。这种链接很难看!
2.在标签下拉栏中选择a。
3.定义a的CSS样式。大小选择12象素;修饰选择无;颜色选择一种深灰色，就可以和采用黑色的文本区分开来。
4.重定义了锚标签的网页。
上机练习：
小结：CSS样式在网页中文字的应用。
作业：
教学反思:
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS掌握CSS样式的应用和CSS文字样式和链接样式实例。经过上面的学习，大家已经对这个css样式掌握的较好了。能够较好地去理解各种概念，通过这两节的巩固练习，加强了学生对知识点的理解。
Dreamweaver MX2004教案 第八周 星期一 第3、4节课 题
网页中图像的应用
教学目标
掌握图象在网页中的应用，制作灵活多样，富于变化的网页，增添网页的可观赏性。
教学重点
创建图像映射
教学难点
创建网站相册
教
学
过
程
复习：1、CSS样式的应用
2、CSS样式实例讲授新课：
一 网页图像基础知识
（一）、网页图像格式
在Web页面中经常用到的图形文件有三件：GIF、JPEG和PNG。通常只有GIF和JPEG是被绝大多数浏览器完全支持的，而且它们的共同特点是：文件信息量小，适合于网络传输，，适合于各种平台。
1、GIF（图形交换格式）：
采用非失真的压缩方式，在压缩文件的过程中，图像的像素信息不会被牺牲掉，被牺牲的只是图像的颜色。因此GIF格式最多只能显示256色，相对来说，GIF格式比JPEG格式的质量要差一些。其扩展名为“·gif”。
2、JPEG（联合摄影专家组）
采用失真的压缩方式，在图像文件被压缩过程中，图像的像素信息会被除数减去一些。因此图像会失真，但图像颜色不会失真，因此JPEG格式是一种真彩色的影像压缩格式。最适合连续色调图像或照片，如风景名胜摄影、人物肖像照片等，因为JPEG可以包含几百万种颜色。
JPEG图像格式的显著特点是：随着JPEG文件质量不同，文件大小和下载时间也会不同，质量越高，则文件越大；质量越低，则文件越小。我们通常可以根据肉眼所能失接受的程度自由调节压缩质量，找到一个图像质量和文件大小之间最佳平衡点。
★JPEG图像不支持透明颜色属性，也不支持动画。
★JPEG文件比GIF文件大，其扩展名为“．jpg或．jpeg"
（二）、颜色原理
在HTML中，颜色既可以用红、绿、蓝等颜色来表示，也可以用十六进制数来表示（如：#FF0000）。在Windows操作系统中，在256颜色模式下显示的颜色被称为安全色。总共有212个Web安全色。
Dreamwcaver中所有颜色拾取器均使用212色的Web安全色调色板，从调色板中选择颜色时可显示颜色的十六进制值。我们也可以在任何颜色区域中直接手动输入十六进制值。
二、网页图像素材的搜集和管理
1、利用网络搜集资料； 2、平时积累。
三、图像应用
（一）、插入图像
（二）、设置图像属性
教
学
过
程
当在文件中添加图像后，我们可以在文档窗口中直接选取并修改它们。例如，我们可以使用“属性”面板为图像添加链接，为图像添加边框，设置图像大小，在图像周围添加间隔，设置对齐方式等。
１、图像的属性面板
选择【窗口】属性命令，显示属性面板
在网页中选中图像后则显示＂图像＂属性面板
2、调整图像的大小
可以在Dreamweaer的文档窗口中可视化地调整图像的大小，以便页面布局更加合理、美观。
FLASH动画可按比例调整，不会影响播放品质。
GIF和JPEG图像在增大或减小它的高和宽时可能会引起图像失真和模糊。因此，希望大家在Dreamweaer中调整位图大小只是用于决定布局，一旦决定了图像的理想尺寸，还是应该到图像编辑软件中去调整大小。编辑图像可以减小图像大小，从而节省下载时间。
3、设置图像的对齐方式
（三）、制作图像的提示信息
首先选中需要制作提示信息的图像（图像右下角出现有人３个黑色的小方块，然后在属性面板中的“替代”文本框中输入提示信息后保存及可。如下图
（四）、设置E-mail链接
方法一：使用插入电子邮件链接命令创建电子邮件链接。
1、选择插入电子邮件命令。在对象面板的标准分类中单击“插入电子邮件链接”按钮。
2、弹出插入电子邮件链接“对话框。如果选中了文本，则文本将自动出现在“文本”框中；如果没有选中文本则要在”文本“输入”框中输入将出现在文档中描述电子邮件的文本。
3、在“E-mail”框中键入邮件地址。然后单击确定。
方法二：使用属性面板创建电子邮件链接
1、在文档窗口的设计视图中选取文本或图像。
2、在“属性”面板“链接”框中键入“mailto：”，其后紧接电子邮件地址。如：mailto:lx6565@163.com。在点阵字库子邮件地址和冒号之间不能加入任何形式的空格。
三、上机练习四、小结五、作业教学反思:
学生通过本节课的学习后，大多数同学已经掌握了网页制作软件dreamweaveCSS图象在网页中的应用，制作灵活多样，富于变化的网页，增添网页的可观赏性。经过上面的学习，大家已经对图像在dw中的应用有了较好的理解。
Dreamweaver MX2004教案 第八周 星期二 第1，2节课 题
网页图像添特效
教学目标
掌握网页添加图象特效及制作弹出式小窗口的方法。领会样式表的使用，以及行为的运用。
教学重点
CSS样式表的使用
教学难点
行为的运用
教
学
过
程
复习：1、图像的基础知识；
2、简单图像应用实例讲授新课：
图象特效的制作其具体的实现方法如下,
1、在Dreamweaver编辑窗口中，点击菜单命令“窗口/Css 样式表”打开样式浮动面板，在浮动面板中点击右键菜单中的“新建样式表”选项或者点击右下角带“+”的按钮，打开新增样式对话框，在“名字”栏中输入新增特效名称，并选择类型的第一个选项：“Make custom style”，然后点击“确定”按钮，并在出现的保存对话框中输入文件名保存样式文件。
2、在随即出现的样式定义设置对话框中，选择Category列表框中的最后一项“Extensions”选项，打开扩展窗口参数设置窗口，其中“Page Break”选项用于设置样式应用前后的位置，可以不予设置，而“Visual Effect”下的“Cursor”则用于自定义鼠标指针形状，“Filter”用于选择效果的类型，共有16个选项。用户选择好效果类型以后，将其中有问号的地方改成自己希望的参数，点击“OK”即完成样式的定义。
3、点击菜单“插入/图像”打开图片，选择对话框插入希望应用特效的图像，然后在编辑窗口中选中该图像，并点击样式浮动面板中刚才创建的样式，按下“F12”键，在浏览器中即可看到特效显示的最终效果。即为Filter类型为“Wave”，参数为：“Add=1，Freq=6，LightStrength=20，Phase=8，Strength=15”的样式在图片上应用以后的效果对比。
4、也可以在样式浮动面板中点击快捷菜单中“编辑”选项，重新打开样式定义窗口进行参数设置，直到满意为止。
二、制作弹出小窗口
（一）准备小窗口页面,
1,打开一个页面，设置页面属性。左边界，顶部边界为 0,在标题处输入标题名称。
2,在页面中插入图片。也可以是文字,Flash 动画等。小窗口页面就准备好了。
（二）给一个页面添加弹出小窗口,
1,打开需要添加弹出小窗口页面，例如一个网站的首页，在标签选择器中选择,body,标签。
2,打开行为面板，点击,+,按钮添加行为。
3,选择“打开浏览器窗口”。
4,在要显示的 URL 处，选择弹出小窗口页面文件。设置弹出小窗口属性。
5,按 F12,在浏览器中发布。
教学反思：学生掌握了网页添加图象特效及制作弹出式小窗口的方法。领会样式表的使用，以及行为的运用，学生还需要叫多联系来巩固这个概念。
Dreamweaver MX2004教案 第八周 星期三 第1，2节课 题
动态文本
教学目标
掌握鼠标特效，实现按钮导航文本变大，同时按钮颜色进行变换，而移开时恢复初始状态。
教学重点
代码的设置
教学难点
行为的添加
教
学
过
程
复习：1、图像特效制作及应用；
2、弹出式小窗口的制作及其应用。
讲授新课：
一、动态文字实例操作步骤如下：
1：执行菜单“插入/表格”命令，在编辑区中插入一个一行一列的表格。
2：选中该表格，使用快捷键Ctrl+F3打开其属性控制面板，设置表格背景色彩“Bg Color”参数值为#0099FF，表格边线色彩“BrDr Color”参数值为#000000
3：选中单元格，设置单元格属性面板中背景色彩“Bg”参数值为#006699，单元格边线色彩“BrDr”参数值为#FFFFFF。通过以上设置，使表格更具有立体感。
4：单击工具栏“显示代码窗口”按钮，显示代码窗口，在表格开始和结束段加代码“〈div id="bottun"〉..,〈/div〉”使表格产生一个Div标记名称.
5：在单元格中输入按钮导航文本，并设置文本属性，这里可以把导航文本做成超级链接，并设置其字体、字号和居中效果。
6：同样道理在导航文本开始和结束段加上这样的代码“〈span id="text" 〉...〈 /span 〉”，使该文本产生一个Span标记名称。
7：按快捷键Shift+F3打开Behaviors行为面板，点击面板上“+”按钮，在弹出行为列表中选择“Change Property”动作，这里我们设置几个当鼠标移动和离开按钮文本上时，文本和背景颜色发生变化的动作。选择“Change Property”动作对话框中的“Div”动作类型（Type of Object），在类型名称下拉列表中会列出我们标记的“bottun”标记，选择它并设置Property下拉列表中的“style-backgroundcolor”的New Value值为#6699CC，确认返回Behaviors面板，最后更改动作触发事件类型为Onmouseover。同样方法再设置当鼠标离开时，将背景颜色改为初始颜色，即##006699。
同样的方法，我们也是应用这个动作，只要设置了文本“Change Property”的动作（动作类型“Span”），控制鼠标移动和离开时的文字大小变换就可以了。
二、上机练习三、课堂小结四、作业教学反思：
学生通过这节课的学习掌握鼠标特效，实现按钮导航文本变大，同时按钮颜色进行变换，而移开时恢复初始状态。还有部分同学跟进不是很到位。课后会加强这些学生的学习积极性。
Dreamweaver MX2004教案 第九周 星期二 第3、4节课 题
层的应用
教学目标
掌握层的概念及层的应用，并在学习过程中，掌握层和表格转换的操作。
教学重点
层的概念
教学难点
层和表格的转换
教
学
过
程
复习：1、鼠标特效的制作及应用；
2、行为代码的基本操作讲授新课：
基本概念层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包 含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素 进行重叠和复杂的布局。首先，请看下图,
我们首先来做一个层
1,在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。
2,在页面中显示一个层。
3,通过周围的黑色调整柄拖动控制层的大小
4,拖动层左上角的选择柄可以移动层的位置。
5,单击层标记可以选中一个层。
6,在层中可以插入其他任何元素包括图片文字链接表格等。
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。 层面板可以通过菜单「窗口」菜单＞选“层”打开。
这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性 和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。 眼睛挣开和关闭表示层的显示和隐藏。
教
学
过
程
层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。比如层 数为2的层在层数为1的层的上面。改变层数就可以改变层的重叠顺序。层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。
层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1,Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影 响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可 。
二、层和表格之间转换
由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来 创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己 的布局，然后将它们转换为表格。 在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换” ＞“层到表格”。即可显示“转换层为表格”对话框。 选择所需的选项。单击“确定”。
若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表格为层。对话框。 选择所需的选项。单击“确定”。
三、上机练习四、小结五、作业
Dreamweaver MX2004教案 第九周 星期四 第3、4节课 题
滑动菜单的制作
教学目标
掌握滑动菜单的制作及层的应用方法。
教学重点
滑动菜单的制作
教学难点
滑动菜单的制作
教
学
过
程
复习：1、层的创建及应用；
2、层与表格相互转换及操作。
讲授新课：
一、滑动菜单实例制作前期准备：
1,在dw中新建一个空白文档。
2,设置好css风格。
3,在页面上插入一个长500pix的表格（插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变，如果页面之前没有做相关设置，那么这一部可能要费点功夫整理一下页面结构）。
4,将光标置入表格内，点击菜单 [插入——层] 插入一个长500高20的图层，并命名为layer1。
5,然后再将光标置入图层layer1，点击菜单 [插入——层] 再插入一个长500高130的图层layer2；并将layer2的属性中左边距和上边距都设置为0，并为它指定一个背景色。
6,然后重复步骤5的方法，再插入一个图层layer3，这个图层没什么特殊的用处，是为了放置几个按钮。最后如图：
注意：这里这么做的目的是为了给你要滑动的图层前面加一个挡板，只有当点击的时候图层才从你的这个图层下缓缓的滑动出来。
现在开始，才正式进入到我们今天要制作的滑动菜单的制作过程中。
现在让我们再次重复上面的步骤5，再插入一个图层layer4,设置图层属性为宽500,150高，刚好是刚才layer2和layer3的高度之和，并将图层layer4调整到另外两个图层下面。然后点击图层layer2前面的眼睛让他闭合，这样可以看到它下面的图层layer4
这时，我们点击ALT + F9 打开时间轴面板，DW已经添加了默认的时间轴Timeline1，然后，选中要滑动的图层layer4，在上面点击右键，选择 [添加到时间轴] 这时可以在时间轴面板中看到刚刚制定的图层layer4，这说明，已经添加成功了！
教
学
过
程
然后点击时间轴上的第15桢，将图层layer4的属性面板中的上边距调整为150。到这里，一个能滑动的图层就算做好了，可以拖动时间轴上面的红色方块慢慢从1走向15，就可以看到这个图层慢慢的从layer2和layer3下面滑动出来！
在添加的layer3上插入了个表格，并为layer4设置了两个按钮。
我们先设置激活滑动图层的动作。选择上展开这个按钮，转到行为面板，点击在出来的菜单中选择 [时间轴——播放时间轴] DW会弹出一个窗体，在上面的下拉菜单中选择timeline1。然后在行为面板中确认事件为onclick
再给图层添加上一个简单的关闭动作，就是点击关闭按钮后图层隐藏。选择上关闭按钮，转到行为面板，点击在出来的菜单中选择 [显示隐藏层],在跳出的窗体中选择上layer4，然后点击下面的隐藏按钮，将其设置为隐藏重复刚才的步骤5，选择上展开按钮，添加动作 [时间轴——转到时间轴桢],在跳出的窗体中的下拉菜单选择timeline1，桢数添上1。
重复步骤5，选择 [显示隐藏层],和刚才步骤6相反，这次选择显示，确定后，保证行为面板中显示隐藏图层的时间都是onclick。此刻展开按钮的行为面板如图
上机练习小结及作业
Dreamweaver MX2004教案 第九周 星期五 第3、4节课 题
网页随浏览器伸展
教学目标
掌握网页随浏览器伸展，以及在普通视图和布局视图的转换操作。
教学重点
设计
教学难点
布局
教
学
过
程
复习：
讲授新课：
一、实例
dreamweaverMX提供了两种视图，布局视图和标准视图。dreamweaver能自动生成一个名为spacer的gif图片来填充你的表格，使你的表格不会发生自动伸缩的现象。
一、先建立一个新站点，然后我们用熟悉的表格工具画一个1*3的表格，不要管它的宽度。因为，可以让它自动伸展适合浏览器窗口，然后，单击对象面板最底下的布局视图按钮,这时出现一个对话框，按ok。切换到了布局视图。
现在看我们的表格左上角有一个绿色的layout?table标签，它代表着你这个表格。标签中有三个空白部份且每一个都标明了宽度且有一个小三角形。在这个表格中，如果希望表格最左边的列固定，而整个表格适合浏览器的宽度。要记住的是，
我们只能让一列自动伸展！！。在这里，决定将蓝色表格作为伸展列。
二、选择最后一列，单击它上面的三角形按钮，在出现在菜单中选择列自动填充。
由于是一个新站点，这时将出现一个对话框,提示你为了能够使行伸展，dreamweaver需要放置一些spacer图片在另一些行里。
下面有三个选项：?
创建一个spacer图片：这个图片在浏览器窗口是不会显示出来的，它只是起着固定表格的作用。
利用存在的spacer图片：不利用spacer图片来做伸展：这样其它的行将会变形。
三、对于已经定义的站点，不会出现这个对话框，但仍可以利用增加spacer图片，现在选择第一个。在弹出的窗口中选择spacer图片的存放目录，好了。定义的自动伸展的列已经填充了我们的整个文档窗口，在浏览器中，它同样会自动伸展以适应整个浏览器的宽度。而剩下的两行被spacer图片的填充并固定，在浏览器中它们也将保持同样的宽度。
可以看见一个波浪线在这个行上，它代表了伸展的列。这个表格原来做时的宽度是400，但现在由于设置了自动伸展列，蓝色的那一列自动放大，填满了整个文档窗口。
上机练习小结及作业
Dreamweaver MX2004教案 第十周 星期二 第3、4节课 题
下拉菜单
教学目标
掌握下拉菜单的制作方法，通过层的显示和隐藏，行为的添加完成本次实例。
教学重点
层的应用
教学难点
层的应用
教
学
过
程
复习：网页中浏览器伸展讲授新课：
用Dreamweaver制作下拉菜单 利用了“行为”面板中的内置方法“隐藏-显示层”方法，并用“鼠标移至”和“鼠标移开”来触发层的隐藏和显示，而将要出现的菜单就在层中。
因此，可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，进行菜单的美化修饰。
导航条的制作首先进行一些必要的前期工作，按CTRL+J，打开页面属性窗口，参数设置按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的属性面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、15，背景色填入#006699，将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表格,按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是主菜单名，可按自己想要的名字输入，并加上链接。
二、下拉选单的制作现在开始制作将要下拉出现的菜单，同样用层来制作。再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
这时，可以在menu1这个层中输入所要的菜单内容。这个层将作为"经典论坛"的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为"天极网"也做一个下拉选单（层menu2）。
这一步要注意的是下拉选单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。
按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的三、显示和隐藏效果的添加导航条部分
首先按CTRL键不放点击导航条中的第一个单元格，现按Shift+F3打开行为窗口，点按钮，在下拉选项中选中"Show-Hide Layers"。如果选项中没有这一项，则选择Show Events For下的IE 5.0后，重新点 按钮，此时"Show-Hide Layers"将出现。这时将会弹出一个窗口，如下图。在Named Layers框中会列出当前网页所有的层，选中" layer "menu1" "，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮，OK
这时会回到行为窗口，窗口中出现如下图所示字样，点击事件下的文字"onClick"，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示。
四、上机练习 五、小结及作业
Dreamweaver MX2004教案 第十周 星期四 第3、4节课 题
布局视图
教学目标
掌握在布局视图中设置对象的属性，以及各种设置的作用。
教学重点
设置种类
教学难点
布局视图中属性设置
教
学
过
程
复习：1、下拉菜单制作及应用；
2、层及行为面板的应用讲授新课：
一、布局视图在布局视图中设置对象的属性：
1 给图像描边
作用：增加图片的美观。
简明步骤：选中一个图像，边框设置为1，就给图像加了一个像素的边框。选中页面中的一个图像。在属性面板"边框"中填1。
2 设置图文混排简明步骤：选中图片，在属性面板中设置对齐方式为左对齐或者右对齐。采用默认设置时的图片和文字：选中图片，在属性面板中选择对齐方式为"左对齐"。
3 给图片增加提示作用：使用浏览者知道所选择项目的内容。
简明步骤：选中一个图片，在属性面板的替代下拉栏，输入提示文字。选中一个图片。在属性面板的替代下拉栏，输入提示文字。在浏览器中，当指向这个图片时，就会出现文字提示。
4 创建图像地图
作用：当点击一个图像的不同部分，可链接到一个新网页。也可以在当前窗口打开。
简明步骤：选中目标图片→选择属性面板中的热点工具→用热工具在图片中画出热点区域→在属性面板中输入链接地址，选择目标窗口打开方式。选中目标图片，选择属性面板中的矩形热点工具。用热工具在图片中画出热点区域。在属性面板中输入链接地址，选择目标窗口打开方式。
5 设置图像边距
作用：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。有时候设置边距为一个非0的数值可以起到美观的作用。但是有的时候输入数值为0的边距可以使用页面紧凑。
简明步骤：选中一个图片，在属性面板中，给垂直边距和水平边距输入数值。
没有设置边距的图片：输入了垂直边距和水平边距的效果，明显和表格边框有距离。
6 给单元格设置颜色简明步骤：选中单元格，在属性面板中，选择一种背景颜色。把鼠标放在单元格内，出现红色边框时，单击，就可以选中单元格了。在属性面板中，选择一种背景颜色。设置了背景颜色的单元格：
7 设置单元格的对齐方式作用：可以使单元格里的内容，从不同的地方开始。在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；选择中间，文字就开始从中间开始。在“水平”下拉栏，选择“左对齐”，文字和单元格左对齐；选择“右对齐”，文字和单元格右对齐。
简明步骤：选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。
在属性面板中的垂直选项栏选择“中间”，输入的文字从单元格中间开始。
在属性面板中的垂直选项栏选择“顶端”，输入的文字从单元格顶端开始。输入文字常选择这种方式。在属性面板中选择水平对齐方式为右对齐：在属性面板中，如果不想文字换行，不要选中“不换行”。这种方式可以保持其它表格不变形。
如果选中“不换行”，文字会沿一行扩张，其它表格也被挤压变形。
设置列为自动伸展的作用：自动伸展列可以随着浏览器调整大小。
选择固定的宽，输入数值可以改变单元格的高度。
二、上机练习三、课堂小结：在布局视图中设置对象属性，掌握设计的方法以及需注意的问题和技巧
Dreamweaver MX2004教案 第十周 星期五 第3、4节课 题
飘浮光球特效
教学目标
掌握利用Dreamweaver 来实现漂浮光球的特效，从而加强对层的认识。
教学重点
层的操作
教学难点
时间轴的应用
教
学
过
程
复习：布局视图的基本操作讲授新课：
一.制作步骤：
第一步：准备一张图片作为背景图，大小为240x180。
第二步：在页面中建立层layer1，大小和所选的背景图片一致，然后把背景图插入 这个层内。
第三步：再建立一个层layer2，这个层将被制作成漂浮的光球。层的大小就是球的大小，位置重叠在层layer1上，其余的层属性均采用默认值。
第四步：让层layer2动起来。将层layer2拖曳至时间轴，然后在该层的右键菜单中选择“记录路径”，接着用鼠标拖曳层画出一条闭和路径，这个路径就是光球运动的轨迹。最后在时间轴中的“自动播放”和“循环”前打上勾，按F12键预览一下，看看速度是否合适，如不满意可以调节时间轴中帧的总数或者每秒播放的帧数，直到符合要求为止。
第五步：控制动画的播放。打开行为面板，选择层layer1，选择事件中的“停止时间轴”，再选择动作中的“onMouseOver”,这样就完成了一组动作事件，即鼠标移至层layer1时动画停止播放；然后再增加一组动作事件：事件为“播放时间轴”，动作为“onMouseOut”，即在鼠标移出层layer1时，动画接着播放。
第六步：使层可以拖动。打开行为面板，选择事件中的“拖动层”，将可被拖动的层确定为layer2，这样层layer2也就是光球就可以在网页中任意拖动了。
第七步：制作光球。打开时间轴，选择首帧，在其右键菜单中选择“添加行为”，这时就打开了行为面板，选择事件中的“改变属性”，这时出现“改变属性”对话框，在“对象类型”下拉菜单中选则“div”即层，“命名对象”选择“layer2”，“属性”选择“style.filter”，在“新的值”框中输入下列代码：
mask(color=#ffffff) alpha(opacity=100,style=2)
这里用了两个滤镜，可以产生光球效果，最后“确定”。
第八步：使光球变色。在时间轴中找几处关键帧，按照第七步的方法设置动作事件，注意将mask滤镜的color值改成自己喜欢的颜色即可。
二.上机练习三、课堂小结四、作业
Dreamweaver MX2004教案 第11周 星期二 第3、4节课 题
时间轴
教学目标
掌握时间轴的基本概念，基本知识，以及基本的运用方法
教学重点
时间轴概念
教学难点
时间轴运用
教
学
过
程
复习：飘浮光球特效实例讲授新课：
一、时间轴时间轴描述了层和图像的属性随时间变化的情况。选择窗口>时间轴打开时间轴控制器。
属性如下：
播放头,指示在网页中显示的是哪一帧。 动画通道： 显示动画层的地方。
动画条：可显示每个对象的持续时间。 关键帧：动画条中的小圆圈是关键帧。
行为通道：在时间轴中执行行为的通道。 回放：可将播放头移到时间轴的初始帧。
后退：将播放头往左移动一帧。
播放：将播放头往右移动一帧。单击Play按钮并按住鼠标不放，则时间轴向前连续播放。
自动播放：当网页载入到浏览器时使当前时间轴自动播放。
循环：当网页载入到浏览器时使当前时间轴无限循环播放。
二、创建时间轴动画
1、在对象面板上选择 Draw layers,在画面增加一个层（Layer1）。
2、在Layer1中插入GIF动画。
3、直接将选中的层拖动到时间轴检查器或选择Modify>Timeline>Add Object to Timeline。此时在时间轴的第一个通道中将出现一动画条。
4、在Timeline选中 Layer1，将最后一帧拖长至30帧，在第15帧的位置插入关键帧。
5、选中第15帧，然后分别在显示区选中层，使鼠标变成，将层（包括图）拖向右上角，然后再在Timeline选中最后一帧，将层拖回起点位置，如图所示。
6、如果希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置，按住Play（播放）按钮不放即可预览网页中的动画。
7、给时间轴加入互交：首先在Timeline 上选中动画条Layer1，然后在状态栏点打开行为控制器，从中选Timeline>Stop Timeline,再点将onClick改成onMouseOver，就是我们用鼠标触到小天使后就停飞，如果我们希望点他一下重新飞起来，那么再从行为控制器中选Timeline>Play Timeline。
通过拖动途径创建动画三、使用多个时间轴
在网页中用一个时间轴控制所有动作不如用多个时间轴分别控制网页的不同部分简单。要管理多个时间轴，请使用以下选项：
要创建新的时间轴，选择（修改>时间轴>增加时间轴）。
要删除时间轴，选择（修改>时间轴>删除时间轴）。
要为时间轴重新命名，选择（修改>时间轴>重新命名时间轴）。
要在时间轴控制器中查看不同的时间轴，可在时间轴弹出菜单中选择。
四、应用已有的动画顺序
要将存在的动画顺序应用到其它对象,1、在时间轴控制器中选择一个动画顺序并拷贝它。
2、单击时间轴控制器的任一帧，然后粘贴动画顺序。
3、使用右键然后从快捷菜单中选择Change Object（改变对象）。
4、从出现的对话框的弹出菜单中选择其它对象后单击OK。 五、上机练习 六、小结作业
Dreamweaver MX2004教案 第11周 星期四 第3、4节课 题
格式化表格
教学目标
掌握表格的基本操作，以及如何对表格进行排版。
教学重点
表格操作
教学难点
格式化表格
教
学
过
程
复习：时间轴的应用 讲授新课：
一．建立表格
1.首先文档窗口欲插入表格的地方单击鼠标置插入点，点击对象面板按钮或拖动它到页面适当位置，此时会显示出插入表格对话框。
2.在插入表格对话框中，按默认值会建立一个三行、三列，宽度为页面宽度75% 的表格，并且表格边框宽度为 1 pixel（象素）。
行和列：指的是行和列的数目。 单元格边距：指的是单元格内容与边框之间的距离（象素值）。
单元格间距：指表格之间的空间大小（象素值）。 宽：指表格宽度，可以用象素或百分比来表示。
边框：指表格边框的象素值，输入 0就没有边框 。
二,格式化表格
1,表格属性面板选项说明:
行和列项中设定表格的行列数。
宽和高设定表格的宽度和高度，可以用象素来设定绝对值或用百分比来设定其相对宽高。
对齐 使表格对齐浏览器的左边(默认设置),右边或居中。
三,调整表格和单元的大小调整表格大小,选中表格，拖动表格的边框线来调整行或列的大小。
用属性面板改变列宽度：
打开属性面板，点击该列的任一单元格或选中列,
在面板的W项,可以输入宽度值，也可输入列宽占整个表格宽度的百分比。
四,添加或删除表格的行列方法一,选中整个表格。 在属性面板中,加大行或列的数值来增加行或列； 减小行或列的数值来删除行或列。
方法二：选中一行或一列，按Delete键删除整行或整列。
五,拷贝和粘贴表格元素
（一）在表格里剪切或拷贝单元格,
1,在表格中选择一个（或多个）单元格。
要剪切或拷贝，选择的区域必须是矩形区,
2,在“编辑”菜单中选“剪切”命令。
如果你选的是整行或整列，那（编辑＞剪切）命令将会移除整行或整列。
（二）粘贴到表格单元里的方法,
1,选定好粘贴的位置。 2,从菜单中选编辑＞粘贴。
（三）想移除表格中的内容：
1,选择一个或多个单元格（但不能是整行或整列）。 2,点菜单编辑＞清除或直接按一下 Delete键。
（四）要拷贝和粘贴单元格中的内容：
六．课堂小结七．上机作业：在单元格中编辑文本
Dreamweaver MX2004教案 第11周 星期五 第3、4节课 题
层
教学目标
掌握层的概念，以及层的相关属性的设置，并且学会层面板的使用。进行层的设置。
教学重点
层的属性
教学难点
层面板的熟悉
教
学
过
程
复习：表格的格式化讲授新课：
一、建立层
从Objects面板中点按钮，或从菜单中选（插入＞层），这时鼠标会变成十字形，拖动鼠标就可插入一个层。然后对层可以通过其上的八个小控点进行拖动，放大缩小等。另外可以选择该层，在属性面板中对其进行设定，层的属性面板中各选项：
Layer ID,层的名字，可以随便起，以便于识别该层。
L和T,层相对于页面或当前层（嵌套时）的左边距和顶边距。
W和H,指层的宽和高。如果层中包含的元素的宽高超过了指定的层的宽高，那指定的W和H值会被忽略。
Z-Index,堆叠顺序号，表示层的前后编号。号码大的层在下方。并且取值可正可负。 要改变Z-Index的大小，可以直接在属性面板中键入,更简单的方法是按F11键调出层面板用鼠标直接拖动各层。
Default,不特别指明层的可见性属性。
Inherit,继承父层的可见性属性。
Visible,层内容可见，无论父层可见与否。
Hidden,隐藏层内容，无论父层可见与否。
Bg Image,层的背景图，可点击后面的文件夹图标来选择图像文件。
Bg Color,层的背景色，不填就为透明。
TOverflow,如果层中的元素大小超出层的宽高，该项将决定显示的方式。
Visible,层根据元素的尺寸自动扩展。
Hidden,保持原有大小，元素超出范围的部分将不可见。
Scroll,给层加滚动条，无论层中元素大小是否超出层的宽高。
Auto,仅在层中元素大小超出层的宽高时才给层加滚动条。
Clip,设定层的可见面积，指定的数值代表的是与层边框之间的象素距离。
二．层面板的使用
最常见到的一些技巧：
1 防止重叠如果选中该项，任意多个层都不会发生重叠的情况。
2 。层的嵌套
所谓层的嵌套是指一个层建在另一个层内部。这样做的好处是你可以用嵌套方式来使所有的层形成一个集合。因为一个嵌套的层或者我们称之为子层可以随父层移动并且继承父层的可见或不可见性（visibility）。
（1）建立嵌套层的方法如下：
方法一：首先在现有的层中点一下鼠标以设定插入点，然后点菜单（插入＞层）。
方法二：直接从控件面板上按住按钮将其拖到现有的层中即可。
方法三：点菜单 Window > Layers（窗口＞层）或按 F11 打开层面板。按下 Control 键并选择层layer2，拖动其到layer3层上。就可将layer2层已嵌套在layer3层之中了。
教
学
过
程
建立嵌套层的方法如下：
方法一：首先在现有的层中点一下鼠标以设定插入点，然后点菜单（插入＞层）。
方法二：直接从控件面板上按住按钮将其拖到现有的层中即可。
方法三：点菜单 Window > Layers（窗口＞层）或按 F11 打开层面板。按下 Control 键并选择层layer2，拖动其到layer3层上。就可将layer2层已嵌套在layer3层之中了。
三、层的操作
1．调整层的大小
选中层，然后在属性面板中输入宽度和高度值。或直接用鼠标的在层的八个控点上拖动调整大小。要调整多个层：可选中两个或多个层，然后在属性面板中填入适当的高和宽值即可。
2,层的对齐选中多个层，点菜单修改＞层和热区,然后选择对齐选项。
3,移动层先选中层，用鼠标拖住最后一个选中层的手柄随意移动。
4,改变层的深度层的深度，用Z-Index属性来表示，可以直接在属性面板中键入，还可按F11键调出层面板用鼠标直接拖动各层。
5,改变层的可视性点菜单（窗口＞层）打开层面板。可看到图标，利用它可以修改层的可视性。 睁开眼睛表示层为可见的；闭的眼睛图标表示层为不可见； 如果没有眼睛图标，表示层为继承性的即与父层属性相同，若并非嵌套层，那就是可见的
6,用层来设计表格
（1） 将层转化为表格：
（2）将表格转化为层：
四．小结：
五．作业：上机练习
Dreamweaver MX2004教案 第12周 星期二 第3、4节课 题
期中考试复习
教学目标
教学重点
教学难点
教
学
过
程
一、文件夹操作考生文件夹创建在考生文件夹下创建站点在站点下面创建网页二、网页中文本操作文本输入网页中文字字体、大小、颜色、对齐等属性设置三、网页属性设置（网页背景、文字大小、颜色等操作）
四、链接链接到页面；
链接到网站；
下载链接；
链接到邮箱；
热点链接五、表格操作
1、标准表格
（1）表格创建、修改及属性设置；
（2）单元格属性设置；
（3）表格中行的操作
（4）表格中列的操作
2、布局表格
（1）布局表格创建及属性设置；
（2）布局单元格创建及属性设置六、图像操作插入图像；
修改图像属性给图像添加特效给图像创建热点链接。
Dreamweaver MX2004教案 第13周 星期二 第3、4节课 题
滚动公告栏
教学目标
掌握如何创建可拖动式的公告栏，并掌握其操作步骤，以及结合时间轴的操作。
教学重点
层的操作
教学难点
时间轴的操作
教
学
过
程
复习：期中考试试卷评讲讲授新课：
一、滚动公告栏实例效果的实现步骤,
1,首先，准备一张背景图片bg.gif，作为滚动公告栏的样式。单击对象浮动工具栏中的图层工具，在网页中插入一个图层Layer1，设置这个图层和图片bg.gif相同大小，然后将bg.gif设置为图层背景。这样图层Layer1就成为滚动面板的样式。
2.单击对象浮动工具栏中的图层工具，按住“Alt”键不放，然后在Layer1上需要显示滚动文字的区域拖动鼠标，画出图层Layer2。
3.在Layer2中绘制一个图层Layer3，注意在这里Layer3的宽度必需小于Layer2的宽度，而长度可以不限，根据文本内容的长度自由调节。
4.在Layer3中加入所需要发布的文字内容。单击Layer3的标签，出现它的属性栏，在属性栏中设置“剪辑“项，使文本的显示区域占满Layer3，这里设置L（左）、T（上）值为0，而R（右）、B（下）的值分别和Leyer3的W（宽）、H（高）相同。
5.打开Timelines面板，并把图层Layer3拖动到Timelines中。单击Timelines的第一帧，把Layer3拖动到Layer2的最下方的位置；然后单击Timelines的最后一帧，把Layer3拖动到Layer2最上方的位置，这样Layer3就会在Timelines的第一帧和最后一帧之间从Layer2的下方出现，滚动到上方消失。拖动Timelines中的播放块可以看到运动效果。
接下来调整文本滚动的速度，一般情况下，在Timelines中设置动画速度为2Fps（2帧/秒）比较合适，同时动画的长度设置得越长，则整体播放速度越慢。然后，勾选Timelines面板上的“自动播放“和“循环“复选框。
6.用鼠标在Timelines的“行为“轨道（即最上面一条轨道）的第一帧位置双击，弹出Behaviors窗口，单击行为窗口左上方的“+”按钮，在下拉菜单中选择（拖动层），在弹出的菜单中选择层,Layer1”→拖动,不限制”，确认即可。
上机练习：重复此过程，加深记忆。
二、上机练习三、课堂小结四、作业
Dreamweaver MX2004教案 第13周 星期四 第3、4节课 题
自由放大网页图片
教学目标
掌握如何利用dw进行自由放大网页图片，并学会应用本实例。
教学重点
层与行为的结合
教学难点
层与行为的结合运用
教
学
过
程
复习：滚动公告栏实例操作及具体应用讲授新课：
一、自由放大网页图片实例步骤：
1、启动Dreamweaver MX，单击插入面板中的插入图像按钮，在弹出的对话框中选择一幅图片，把它插入页面中，并把它缩小。
2、单击Insert面板中的插入层按钮，在页面中拖曳鼠标画一个层，然后在层中插入上步使用的那幅图片。调整它的位置，使之覆盖在缩小的图片上面。
3、在层面板中如果没有打开，选择窗口-其他-层，可打开层面板，选择该层，单击左边的眼睛列，使眼睛闭合，隐藏该层。
4、选择页面中的小图片，单击Behaviors(行为)面板中的加号按钮。从弹出的菜单上选择Show-Hide Layers(显示-隐藏层)动作。
5、在弹出的Show-Hide Layers对话框中单击“显示“按钮。此时，层列表中选定层后面自动添加,显示”，表示显示该层。
6、单击OK按钮返回，行为面板中添加了onClick。Events和显示-隐藏层
7、在Behaviors面板中选择刚才添加的行为，单击中间的下三角，从弹出的事件选择菜单上选择onMouseOver(鼠标掠过)事件，把onClick事件改为onMouseOver事件。设置把鼠标放到小图片上面时显示插入了大图片的层。
8、在Layers面板中用鼠标点选“Layer 1”层，使页面中的层处于被选择状态。然后按第4-7步的类似方法设置行为，操作步骤中不同的地方是：在第5步中单击Hide(隐藏)按钮；在第7步中选择onMouseOut事件。这样设置的目的是：当鼠标移出大图片后，大图片自动隐藏。
9、单击工具栏中的预览按钮，即可在浏览器中预览效果。
上机练习：对本实例进行填充。
二、课堂小结三、作业
Dreamweaver MX2004教案 第13周 星期五 第3、4节课 题
菜单的制作
教学目标
掌握菜单的制作方法，从中学习对表格的编辑以及排版，并添加好行为事件。
教学重点
行为的添加
教学难点
行为的添加
教
学
过
程
复习：网页放大图像效果实例操作步骤及具体应用。
讲授新课：
一、交换图片
1、在导航栏上放置好相应的图片。
1）在页面中插入表格，1行1列，表格边框、间距、填充均为0。
2）在表格中插入制作好的图片，按顺序插入中间不要插入字符或者其它东西。
2、对导航图片进行命名。
对要进行变换的图片，必须进行命名。
选中要命名的图片，在此选，在属性栏中命名，在图像下方的框中输入用户 自定的名字（用英文或数字，如image1,a1等）。
3、设置图片的交换。
选中要进行交换的图片,在此选,在设计面板中添加行为1。当事件为onmouseover时，动作为交换图片。在交换图像窗口中选定刚才的图像命名，在“设定原始档为”框中选定更换为的图像。
添加行为2，当事件为onmouseout时，动作为恢复交换图像。
二、菜单的制作
1、制作三个层，一个层为父层，二个层为此父层下的子层。父层作为子层的统领，当移动父层时，各子层统一移动，方便保持位置。子层一个为菜单层（置前），用以放置菜单，一个为菜单的背景层（置后），用以撤消（隐藏）菜单。
2、制作菜单层。
1）在菜单层中插入表格，一行一列。
2）再在此表中插入表格，多行一列。
3）调整外表格的背景色。
4）调整内表的行宽，字的格式。
5）在内表中输入菜单项，并设置链接。
6）调整表格、单元格的形式，达至美观。要达到美观效果，必须用到样式。
3、设置各层的属性。
1）父层为默认。
2）子层中菜单层为隐藏，背景层为默认。
4、设置有关行为。
1）在导航栏的图片设置行为。加上:onmouseover事件，动作是显示-隐藏层,显示菜单层。
2）在背景层中添加行为。事件为onmouseover,动作是显示-隐藏层，隐藏菜单层。
思考：1、菜单层和背景层的Z值怎样设置它们的大小？同样大可以吗？
2,父层有什么作用？
三、上机练习四、课堂小结五、作业
Dreamweaver MX2004教案 第14周 星期二 第3、4节课 题
自动关闭网页制作
教学目标
1、掌握链接的应用；2、掌握行为动作的应用
教学重点
行为动作的应用
教学难点
代码操作
教
学
过
程
复习：利用层制作下拉菜单讲授新课：
一、自动关闭网页制作本例中制作了两个页面,Index.html是显示于子窗口中的页面，而在名为firstpage.html的页面中，包含在子窗口中打开Index.html的链接。单击链接时，将在子窗口中打开index.html。可以直接单击子窗口中的“关闭”链接关闭子窗口，也可以不去理睬它，在15秒之后，子窗口也会自动关闭。
具体操作如下:
1,在本地站点中生成一个Smlple文件夹。
2,在Smlple文件夹中，生成名为Index.html以及名为firstpage.html的文件。
3,双击Index.html，打开该文档，进入到文档的设计视图窗口中。
4,单击菜单View/Head Content，显示文档的头部区域。
5,单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，打开Inset Script对话框。在Language下拉列表框中选择JavaScript选项，并在Coctento文本框中输入“setTimeout("self.close()"，15000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。
6,在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“###”，将其设置为一个空链接。
7,在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标记模式。然后在“>”前输入“onclick="selfclose()"”。设置完毕，单击OK按钮，确认操作。这样在Index.html被作为子窗口打开后，单击该链接就可以立刻关闭该子窗口。
8,保存Index.html文件，并退出index.html的Dremweaver窗口。
9,现在开始设计fristpage.html页面。在本地站点的Smlple文件夹中，双击 fristpage.html，打开该文档，进入到文档的设计视图窗口中。
10,在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“###”，将之设置为空链接。
11,可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的 编辑标识模式。再在“>”前输入“onclick="window.open( index.html,null,width=200px，height=200px )"”。设置完毕，按下回车键，确认操作。
上机练习二、小结
1、网页中添加行为动作。
2、代码操作三、作业
1、上机作业：利用行为给网页添加自动关闭网页效果
2、书面作业：P247 （1）（2）
Dreamweaver MX2004教案 第14周 星期四 第3、4节课 题
制作反馈表单
教学目标
1、行为的应用；2、表单操作
教学重点
表单应用
教学难点
表单操作
教
学
过
程
复习：自动关闭网页效果制作过程 讲授新课：
本文介绍制作客户反馈表单的过程。主要内容是使用表格设计表单结构和设置form参数。
1.将插入点放在希望表单出现的位置。选择“插入”>“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标。
2.将插入点放在红色的表单中，单击“插入”栏“常用”类别中的“表格”按钮。
3.在“插入表格对话框中，设置行数11，列数2。
4.在表格中，左边一列的单元格中输入文字，右边一列中插入“文本字段”。
5.选中右边一列中的“文本字段”，在属性面板上，为“文本字段”输入和左边一列单元格中相同的文字。
6.重复输入文字和插入“文本字段”，给文本字段命名。按住ctrl键，选中最下面一行的两列，合并单元格。
7.在最下面一列，插入两个“按钮”。
8.选中右边一个按钮，在属性面板上，动作选择为“重设表单”。
9.选中文档左下角“标签选择器”上的form标签，在属性面板上，动作中输入mailto:网站管理员的电子信箱地址，在方法中选择POST。
10.继续选中form标签，打开“标签检查器”面板，在enctype属性中，单击右边的下拉箭头，选择text/plain类型。
11.全选左边一列，居右对齐，选中最下面一列的单元格，居中对齐。为表格和表单设置css，定义表格和表单中的文字大小，客户反馈表单就做好了。反馈表单在使用Outlook Express的电脑上，使用email方式发送，接收到的是一些文本。
购货单位：
地址：
联系人：
联系电话：
传真：
邮编：
电子信箱：
网址：
产品规格型号：
备注：
?
练习
小结作业
Dreamweaver MX2004教案 第14周 星期五 第3、4节课 题
网页应用技巧
教学目标
掌握Dreamweaver Mx2004插件的应用
教学重点
插件的应用
教学难点
插件的应用
教
学
过
程
复习：反馈表单制作过程讲授新课：
一、网页应用技巧：
1,让网页页面更有弹性用工具面版(Object palette)上的按钮开启网页，并且转换到 格式检视( Layout view)。这时可以看到文字方块的列宽,每一列的方框上方中间还有一个小小的下拉式箭头,选择想要设定弹性显示的列上方的小箭头，接着选择「将列设为弹性显示」( Make Column Autostretch)。 (设定自动调整列宽以一列为限)这时该列方框上方就会出现一条波浪形的线，而不是原本表示列宽的数字。 Dreamweaver 会自动制作出固定版面的空格图文件，这个空白图文件是以列上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设定。
2,创造个性化调色盘
Dreamweaver 新的 Assets panel(属性控制面板)是一种可以在编辑网站时根据档案型态，例如图片、样板等来管理档案的新工具，当你定义新站台时(选择Site · New Site)，所有类型的组件会自动增加到 Asset panel 里的适当表框中。这个加入新的Assets panel属性控制面版里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及连结的颜色等。这是一个为使用者量身定做的网站导向颜色盘。只要激活 Assets panel (先选择 Window · 再选择 Assets)，接着选择左方那个小小的色彩滚动条，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进制值的色彩浓淡度，和三色对应码(RGB)。如果想将调色盘工具列缩小一点，甚至可以仅加入某些颜色到调色盘的收藏夹里。只需将选取的颜色反白、选择窗口里一个叫做「添加到我的收藏夹」按钮(最下方靠右的按钮)，就完成了。
3,制作弹出式选单导览系统原本要制作弹出式选单导览系统(Pop-up Menu Navigation System)要用到好一些 JavaScript 的语法技巧，但是若你装了Dreamweaver/Fireworks Studio，轻轻松松即可快速办到。首先在 Fireworks 里开始，选择某个图片,然后在 Set Pop-Up Menu的对话框里选择 Insert· Pop-Up Menu，你可以输入项目(items)的名称并选择 Plus (加入)按钮，来新增该项目。你可以继续在跳出来的讯息框里进行细项设定，例如设定该项目所要用的文字及连结，当然也可以新增子选单、并重新安排下一层的设定。完成时，选择 Next (下一步)，继续设定偏好值，例如颜色、字体等等。这时选单完成后，可以预览 HTML 语法，也可预览影像。再选择 Finish (完成)。这时当鼠标移动到原来的图案时，会出现选单系统的内容一览。 接着将制作好的档案汇出时,Fireworks 会自动生产出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像档案。
4,让图档动起来如果你同时安装有 Dreamweaver/Fireworks Studio，这两种产品搭配的完美程度将使你赞不绝口。即使你不是专业的图档设计者，在设计网页时也多多少少想把一些 GIF 图片文件修改得活灵活现。Dreamweaver 可以让你制作动画不求人喔!在标准窗口里选择要进行修改的图片，然后在 Property Inspector 里选择编辑钮(Edit)。如果你安装的 Dreamweaver里附有 Fireworks,Fireworks 就是 Dreamweaver 预设图片编辑器，这时图片就会自动加载到 Fireworks
5,让按钮有闪动效果
6,制作流动文字二、小结作业
