DreamweaverCS3教案.docx

《DreamweaverCS3教案.docx》由会员分享，可在线阅读，更多相关《DreamweaverCS3教案.docx（69页珍藏版）》请在冰豆网上搜索。

DreamweaverCS3教案

Dreamweaver-CS3教案

第1章基础知识（5课时）

教学目标

1．掌握HTML的基本知识及作用；

2．掌握安装和配置IIS的方法；

3．熟悉DreamweaverCS3的工作界面；

4．掌握创建和设置DreamweaverCS3站点的方法。

教学重点

1．HTML语言

2．熟悉DreamweaverCS3的工作界面

3．创建本地站点

教学难点

HTML的基本知识

教学方法

任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。

学生上机操作完成实例与实训。

任务1认识网页

教学目标：

1．理解掌握网页的概念

2．HTML的概念

3．掌握HTML的基本知识及作用

Html是HypertextMarkupLanguage的缩写，其中文含义是“超文本标记语言”。

2、Html的概念

它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。

3、网页文档的组成

一个HTML文档通常分为文档头和文档主体两部分。

三、标记

1、标记的格式

在HTML中定义了许多标记，这些标记用来描述文档。

这些标记使用“<”和“>”括起来。

标记通常分为开始标记和结束标记。

其格式为：

<标记名属性名=属性值>标记内容

注意：

若一个标记有多个属性，属性和属性之间要用空格隔开。

示例：

简单的网页文档

—文档头部—>

—文档主体—>

这是我的第一个网页

欢迎大家

第2课时

2、常用标记

v…标记一个HTML文档的开始和结束。

Html文档的所有内容就书写在这两个标记之间。

v…用于标记文当首部的开始和结束，首部通常包括网页标题、创作信息等内容，在浏览网页时不会在浏览器窗口内显示。

v用于设置网页的标题。

该标记中不能包含其它标记，且只能在标记中出现一次。

当浏览网页时，网页的标题会出现在浏览器窗口的标题处。

v和标记是主体标记，该标记包含在Html标记内。

文档主体包括了网页显示的内容，如文字、链接、图像、表格和其它对象。

v

和

标记一个段落的开始和结束。

v

和

v

--注释内容-->注释标记。

说明：

（1）每个标记在标识名以外还可以包含一个或多个“属性”，用于控制标记内容的大小、颜色、位置、边框等。

例如：

“bgcolor=blue”就是body标记的一个属性，进一步说明网页的背景色为蓝色。

（2）如果一个标记有多个属性，中间要用空格隔开。

3、标记的常用属性

属性名

作用

Background

用图像设置网页背景

Bgcolor

设置网页的背景颜色

Text

设置网页中所有文本的颜色

Link

设置超文本链接尚未访问时文本的颜色，默认为蓝色

Vlink

设置超文本链接已经访问后

四、网页的基本元素

网页中包括的元素主要有文本、图像、视频、声音、动画、表格、表单等。

（1）网站LOGO

Logo的中文含义是标志、标识，在网页设计中，Logo常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。

（2）网站Banner

Banner的中文含义是横幅、标语，通常被称为网络广告。

（3）导航栏

导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。

（4）文本

文本作为人类最重要的信息载体的交流工具，是最重要的网页元素之一。

与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。

（5）图像

图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。

（6）动画

动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。

（7）表单

表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，从而实现了用户与网站之间的交互。

教学小结：

主要介绍了网页的概念、标记的应用及书写格式还有网页的基本组成元素。

课堂作业：

1、总结网页的概念及网页的实质？

2、列举DreamweaverCS3中常用标记及其含义？

板书设计：

任务2让别人通过网络访问你的网页

教学目标

1．理解和掌握网站的概念

2．掌握安装IIS的步骤

3．掌握在IIS中配置站点的方法

教学重点

1．网站的含义

2．IIS的含义及功能

教学难点

IIS的配置

教学方法

演示法，任务驱动法

教具准备

多媒体教学

教学内容

一、网站

网站是许多相关网页有机结合而形成的一个信息服务中心。

网站的设计者将要提供的内容和服务制作成许多个网页，并且经过组织规划，让网页互相链接，然后把相关文件存放在WEB服务器的一个文件夹中。

这样一个文件夹就是一个网站。

二、主页

当用户没有指定网页文件名时，网站的默认显示的网页。

主页文件名通常为index.htm、index.html、default.htm

三、IIS

1、IIS的含义

IIS（InternetInformationServer，互联网信息服务）是一种Web（网页）服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。

2、IIS的运行环境

IIS通常运行在WINDOWS的SERVER版本上，可支持大量用户的访问。

在WINDOWSXPprofessional中，IIS组件主要用于开发测试，不适宜大量用户的访问。

另外，在WINDOWSXP的家庭版中未提供IIS组件。

教学小结：

介绍了网页中常用术语的含义及IIS的含义和站点的配置。

任务3、初识DreamweaverCS3

教学目标

1．掌握启动DreamweaverCS3的方法

2．认识DreamweaverCS3的工作界面

3．掌握DreamweaverCS3界面中常用部分的用途

教学重点

熟悉DreamweaverCS3界面各部分的名称及作用

教学难点

熟悉DreamweaverCS3界面各部分的名称及作用

教学方法

多媒体演示法、任务驱动法、挂图法

教具准备

教学内容

一、启动DreamweaverCS3的方法

1、从“开始”菜单

2、双击桌面上的快捷方式

二、DreamweaverCS3的工作界面；

文档窗口：

v“文档”窗口显示当前文档。

v可以选择设计视图、代码视图、拆分代码视图、代码和设计视图之一进行网页的编辑和开发。

v当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。

v如果尚未保存已做的更改，则DreamweaverCS3会在文件名后显示一个星号。

若要切换到某个文档，单击其选项卡即可。

三、网页开发平台

早期的网页制作，网页设计师要通过手工编写HTML代码来实现，开发效率非常低。

网页开发平台的出现，使得这些复杂代码的编写变得十分容易。

在这些网页开发平台中，只需要点点鼠标，软件就能帮助用户书写出相应代码，即使不懂得HTML，也能制作出漂亮的网页来。

Dreamweaver就是一种网页开发平台，其最新版本就是AdobeDreamweavecs3。

该软件同时适用于初学者和专业网页设计师，是一款优秀的“所见即所得”的可视化网页编辑软件。

另外，FrontPage也是一款常用的网页开发平台，它是由微软公司开发的，适合于初学者。

四、网页制作辅助工具

1、图像处理工具-Photoshop

Photoshop软件一直是图像处理软件的龙头老大，它不仅能创造出不朽的计算机图形艺术，而且为网页图像制作提供了强大的支持，现在已经成为使用最为广泛的网页图像处理软件。

2、动画制作工具-FLASH

FALSH是目前网络上最为流行的矢量动画设计制作软件，在网页动画制作中有广泛应用。

教学小结：

介绍了DreamweaverCS3的启动方法，认识并掌握了界面的组成及常用部分的含义。

课外作业：

尝试使用菜单对面板组进行设置。

任务4、创建DreamweaverCS3站点

教学目标：

1．理解并掌握站点的含义

2．掌握在DreamweaverCS3中设置本地站点的步骤

教学重点：

设置本地站点

教学难点：

本地站点的设置

教学内容：

一、站点

1．站点的含义

在DreamweaverCS3中，术语“站点”指属于某个Web站点的文档的本地或远程存储位置。

DreamweaverCS3站点提供了一种方法，使您可以组织和管理您所有的Web文档，将您的站点上传到Web服务器，跟踪和维护您的链接以及管理和共享文件。

应定义一个站点以充分利用DreamweaverCS3的功能。

2．站点的类型

DreamweaverCS3站点由三个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型：

（1）本地根文件夹

存储您正在处理的文件。

DreamweaverCS3将此文件夹称为“本地站点”。

此文件夹可以位于本地计算机上，也可以位于网络服务器上。

如果您直接在服务器上工作，每次您保存文件时DreamweaverCS3都会将文件上传到服务器。

（2）远程文件夹

存储用于测试、生产和协作等用途的文件。

DreamweaverCS3在“文件”面板中将此文件夹称为“远程站点”。

远程文件夹通常位于运行Web服务器的计算机上。

3．本地根文件夹和远程文件夹的关系

本地文件夹和远程文件夹使您能够在本地硬盘和Web服务器之间传输文件；这使您可以轻松管理DreamweaverCS3站点中的文件。

二、创建本地站点的步骤

1、创建本地站点的注意事项：

（1）第一步必须先在本地计算机的磁盘上建立一个文件夹。

（作为本地站点的根文件夹）

提示：

为了方便以后管理站点上的文件，先在本地文件夹中创建几个目录：

htm、img、others，分别存放网页设计中用到的资源及网页文件。

（2）建立本地站点，选择主菜单中的“站点”→“新建站点”命令，在弹出的新建站点对话框进行设置。

2、新建站点的操作步骤：

第一步：

选择菜单中的“站点”→“新建站点”命令，如图所示：

在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：

第二步：

单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项（表示目前该站点是一个静态站点，没有动态页即不使用Web应用程序：

如ASP、JavaServerPageJSP）

第三步：

单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选项，然后指定本地机磁盘上的一个文件夹储存站点文件（包括网页文件及设计网页用到的其它资源）

第四步：

单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择“无”。

如下图所示：

第五步：

单击“下一步”按钮，弹出如下图设置概要。

单击“完成”按钮，完成设置。

思考：

如何使用高级模式创建或设置站点？

教学小结：

给大家介绍了使用向导及高级模式两种创建站点的方法步骤。

第2章创建简单网页（6学时）

教学目标

1．掌握输入空格、普通文本、特殊字符、日期、列表等项目的操作方法

2．掌握文本的断行

3．掌握设置文本的属性及滚动文字的制作

4．掌握设置网页的属性

5．了解网页图像的格式

6．掌握图像插入、编辑的方法

7．掌握网站相册的建立

教学重点

1．文本段落的编辑

2．文本属性的设置

3．网页中图像的应用及属性的设置

教学难点

1．图像的编辑为难点

2．滚动文字的制作

教学方法

教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训。

任务1制作文本网页

教学目标

1．掌握建立网站站点；

2．掌握制作简单的文本网页；

3．掌握输入普通文本及设置文本属性；

4．掌握插入水平线的方法；

5．掌握滚动文字的制作方法；

6．掌握预览网页的方法；

教学重点

1．文本的输入与属性设置

2．水平线的插入与应用

3．滚动文字的制作

教学难点

1．水平线的应用及属性设置

2．滚动文字的应用

教学内容

一、新建网页文件

1、方法一：

启动了DreamweaverCS3软件，如同启动Word等其它应用软件一样打开了一个新的空的网页文档，就可以在这个新的文档中进行网页设计编辑；或者单击“文件”菜单中的“新建”命令，或直接按Ctrl+N键，打开一个新页面，在该页面中也可以进行网页的设计编辑。

网页设计编辑完毕后，保存网页文件：

保存的位置在战点根目录下，新文件取名为“index.html”即建立了主页文件。

2、方法二：

打开站点管理窗口，在站点管理窗口右边的本地文件夹列表框中建立新文件，新文件取名为“index.html”按回车键，即建立了主页文件。

双击“index.html”文件，进入编辑“index.html”的网页文件窗口，进行主页设计。

二、输入普通文本

1、输入文本

（1）“文件”→“导入”

（2）复制已有的文本：

“复制”→“粘贴”

（3）直接输入：

在文档编辑窗口中直接输入

2、输入网页中的空格

汉字输入状态下输入

“属性”面板→“格式”→“预先格式化的”

Shift+Ctrl+空格

“编辑”→“首选参数”→“常规”→“允许多个连续的空格”

3、文本换行

Enter→分段（隔一行）

Shift+Enter→换行（不分段）

4、文本的属性设置

（1）选用字体

     在“字体”下拉表框中找到字体。

如果在“字体”下拉表框中，没有找到字体。

“字体”下拉表框中找到字体。

单击“文本”→“字体”→“编辑字体列表”命令。

或者在“属性”面板中选择“字体”下拉列表中选择“编辑字体列表选项”。

      要添加字体组合，可单击对话框中的加号按钮，若要删除字体组合，可单击减号按钮。

在该对话框中的“可用字体”列表中选择所要添加的字体。

（2）设置字号

字号指的是相对缺省字体而言的字体的大小。

我们可以在浏览器中使用缺省字号，可在“属性”在面板的“大小”下拉列表框中选择。

（3）设置颜色

颜色是网页外观的一个重要因素，要改变文本的颜色，可选中要设置的文本，单击“文本”→“颜色”命令。

三、插入水平线

1．插入水平线

（1）将光标置于“我的简历”后面

（2）执行菜单“插入记录”中的“HTML”中的“水平线”命令

2．水平线的属性面板

可以通过水平线的“属性”面板设置水平线的宽度、高度、类型、对齐方式及是否有阴影。

水平线的“属性”面板如下：

四、时间日期

在DreamweaverCS3系统中可以插入页面的制作日期和时间。

将光标置于要插日期和时间的位置，选择“插入”→“日期”命令，可以在页面上插入插日期和时间，还可以设置日期和时间的格式。

五、滚动文字的应用

1．基本格式

...

示例：

啦啦啦，我会移动耶！

2．属性

（1）方向#=left,right,up,down

举例：

啦啦啦，我从右向左移！

啦啦啦，我从左向右移！

（2）方式#=scroll,slide,alternate

举例：

啦啦啦，我一圈一圈绕着走！

啦啦啦，我只走一次就歇了！

啦啦啦，我来回走耶！

（3）循环#=次数；若未指定则循环不止

举例：

啦啦啦，我只走3趟哟！

啦啦啦，我只走3趟哟！

啦啦啦，我只走3趟哟！

（4）速度

举例：

啦啦啦，我走得好快哟！

（5）对齐方式（Align）#=top,middle,bottom对齐上沿、中间、下沿

举例：

啦啦啦，我会移动耶！

（6）。

六、预览网页

1．执行“文件”菜单下的“保存”命令，保存网页

2．按快捷键F12预览网页

教学小结：

介绍了简单文本网页的制作方法。

课外作业：

1．试写出网页中空格字符的输入方法？

2．试写出使用Enter键与Shift+Enter键在网页中的效果有什么不同？

板书设计：

任务2插入图像

教学目标

1．掌握网页“页面属性”的设置；

2．掌握网页中图像的插入与属性设置；

3．掌握鼠标经过图像的设置；

教学重点

1．“页面属性”的设置；

2．图像的插入与属性设置；

教学难点

图像的应用与属性设置

教学内容

一、“页面属性”设置

使用DreamweaverCS3创建了空白网页后可以对页面进行属性设置。

执行“修改”→“页面属性”命令，打开“页面属性”对话窗口：

使用“页面属性”对话框，可以设置页面的整个外观，如页面的字体、大小、颜色、背景颜色、背景图象，还可以设置链接的样式、页面的标题等。

虽然页面的属性有很多，并不是一个页面要将所有的属性全部都设置，用户在使用过程中根据自己的需要进行设置。

二、插入图像

1．步骤：

（1）光村定位；

（2）执行菜单“插入记录”下的“图像”命令。

2．设置属性

（1）在“属性”面板的“替代”列表中输入替代文字；

（2）在“属性”面板的“对齐”列表框中对齐方式。

三、鼠标经过图像

步骤：

（1）执行菜单“插入记录”中的“图像对象”中的“鼠标经过图像”命令；

（2）在“原始图像”文本框中选取图像文件；

（3）在“鼠标经过图像”文本框中选取图像文件；

（4）单击“确定”按钮。

提示：

该效果只有在网页预览时才能看到。

教学小结：

讲述了网页中页面属性的设置、图片的应用及鼠标经过图像的设置与应用，这使得网页效果更加美观，突出显示了图文并茂的效果。

课外作业：

1．鼠标经过图像的含义是什么？

2．制作鼠标经过图像的步骤有哪些？

任务3制作网站相册

教学目标：

1．掌握网站相册的含义；

2．掌握网站相册的制作及应用；

教学重点：

1．网站相册的制作及应用

教学难点：

网站相册的制作

教学方法：

示例演示法

教学内容：

一、创建网站相册

步骤：

（1）执行菜单“命令”→“创建网站相册”命令；

（2）根据对话框设置参数。

二、美化网站相册

步骤：

（1）设置标题文字的大小、颜色；

（2）设置标题文字所在的表格的背景颜色。

提示：

在创建网站相册时，应把照片事先存在一个文件夹中，然后创建一个文件夹在创建网页时应用。

教学小结：

介绍了网页中网站相册的创建与应用。

板书设计：

课外作业：

1．网站相册的含义？

2．写出制作网站相册的步骤？

第3章网页布局（8学时）

本章教学目标

1．理解表格与层的概念及特点

2．掌握表格的创建与编辑

3．掌握表格与单元格的属性设置

4．掌握通过表格进行网页页面布局的方法

5．掌握层的创建、编辑

6．掌握层属性的设置

7．时间轴的基本操作

教学重点

1．表格和层的布局

2．表格和单元格属性的设置

3．时间轴的应用

教学难点

表格的嵌套，时间轴的使用

教学方法

教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训。

任务1制作“班级课程表”网页

教学目标：

1．掌握创建表格的方法；

2．掌握表格和单元格属性设置的方法；

3．掌握表格的编辑；

4．掌握嵌套表格的应用；

教学重点：

1．表格和单元格的属性设置；

2．掌握嵌套表格的应用；

教学难点：

表格和单元格的应用及属性设置

教学方法：

任务驱动法，示例讲解法，讲练法

教具准备：

多媒体教学环境

教学内容：

第1课时

一、表格

1．表格

（1）表格的含义

表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。

表格由一行或多行组成；每行又由一个或多个单元格组成。

（2）表格的两种模式

DreamweaverCS3提供了两种查看和操作表格的方式：

“标准”模式（在该模式下，表格显示为行和列的网格）和“布局”模式（允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框）。

（3）表格的标记

在HTML语言中，表格标签用

行标签为，单元格标签为。

2．布局

网页布局是根据网站主题和所需的栏目，对网页上的内容进行精确定位。

可使用表格、层和框架布局。

一般以800×600像素和1024×768像素下全屏显示时的网页宽度来确定网页的大小。

一般来说，除去浏览器的边框，800×600像素下全屏显示时的网页宽度是778或776像素；1024×768像素下全屏显示时的网页宽度为1002或1000像素。

用户也可以根据设计效果指定所需的宽度。

网页高度一般不受限制，可以向下适当延展。

3．嵌套表格

在使用表格对网页进行布局时，嵌套表格使用得十分广泛。

嵌套表格是指在表格的单元格中再插入表格来放置网页元素。

一般而言，一个网页中嵌套表格的层次不能超过3层。

层次越多，文件越大，因此，应尽量采用较少的嵌套层次来进行网页布局。

第2课时

二、表格基本操作

1.表格的创建：

选择菜单“插入记录”→“表格”命令，或在插入工具栏中单击“常用”→“表格”按钮。

2．表格元素的选择：

（1）表格的选择

方法一：

鼠标指向表格右框线或下框线，当指针变成双向箭头时单击鼠标左键。

方法二：

将