网页设计教案

第7讲

课时：2节

内容：第四章超级链接

第一节文档路径的基本表示方法

第二节如何创建超级链接

第三节链接的修改、查看和管理

目的：掌握文档路径的表示方法；掌握超级链接的创建以及超链接的设

置。

重难点：文档路径的表示方法和超级链接的创建以及超链接的设置是教

学的重点和难点。

教学方法：多媒体教学法、演示法

教学过程：

一、文档路径的表示方法

1、绝对路径

2、相对路径

二、超级链接

超级链接（L）,简称链接，是页面与页面之间一个单向的关联关系。通

过点击链接，我们可以从一个页面跳到另一个页面。我们可以在文字、

图片建立链接。

1、文字链接

在页面中选取需要建立链接的文字，如下图:

欢迎来来品味人生网站

在属性面板的链接(L)一项，填写链接地址，当浏览者点击该链接的时候,

浏览器就回跳转到该页面，例如这里填写的是：

http:〃www.tastelife,net/

如果你希望该页面是在一个新窗口打开，可以在目标(T)中选择

“_balnk”。

如果要链接到网站内的文件，可以点击□：

上图中，我们是将文字链接到dwmx04.htm这个文件，特别注意的是最底

的〃相对于〃的选项，意思是选择相对路径的形式，默认是文件，也可以

选择根目录，区别在于，文件是指相对路径是从本页开始计算，而根目

录是从根目录开始计算(即"/”)

另外，如果使用站点根目录的模式做成的链接，在本地硬盘直接打开页

面浏览通常会出错，但在Dreamweaver的预浏模式和上传上服务器后，

都不会有问题。

2、图片链接

图片链接的建立过程与文字链接相似，就不多作介绍了。但特别要提出

的是，某些图片，在加上链接后，会出现一个蓝色的边框，要将边框去

掉，将边框（B）设为0即可。

3、热区链接

前面介绍的图片链接，一张图只能对应一个链接，能不能一张图对应多

个链接呢？答案是可以的，选取一张图片后，可以在属性面板（⑥区）看

到地图（M）选项：

地图®

飞□O0

其中：2创建矩形热区，O创建原形热区，区创建多边形热区。例如

我们现在点2,光标变成一个十字，此时可以在图片上画出一个蓝色矩

形的热区：

此时对应的属性面板为:

同样地，在链接（L）输入链接地址（“〜表示一个空链接），而替代（T）

则为当鼠标指向热区时所显示的文字，与图片的替代⑴相似。我们可以

通过用选择不同的热区，并通过调整热区四个角的控制点调整热度的大

小。通过热区，我们可以在图片的任何地方做一个链接，当然可以在一

张图片画很多热点，做很多链接，分别链接到不同的页面。

关于链接的提示：

1、如果要链接到一个E-mail地址,则在链接（L）处填写：“mailto:地

址”，例如mailto:webmaster@tastelife.net,或者点②区为常用时

③区中的目，填上文本和E-Mail。那么点击该链接的时候，就回打开

默认的E-mail程序,例如Outlook,发送E-mail到

webmaster@tastelife.net这个地址。

2、如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏

览者在点击这个链接的时候，就会弹出对话框，询问是将文件保存到硬

盘的什么地方，这就实现了文件下载的功能。

［思考：何为相对链接和绝对链接？］

绝对链接指示文件的完整路径，如：

htttp://www.tastelife,net/homepage/homepage.asp或者：D:、草原孤

星一新版\homepage\dw\dw4\dw42.htm

相对链接指示文件的相对路径,如：文件index.htm和defaule.htm在

同一目录下，从index,htm链接到default,htm只需要在链接处填上：

default,htm就可以了，如果default,htm在index,htm的上级目录

则：../default.htm,用于返回上级目录。

一般将链接做为相对的，因为这样兼容性比较好，可移植。如果做成绝

对的链接，当把网站换了目录后，所有链接将要重新做过。

［目标（T）的说明：_blank为打开新窗口；.parent为父窗口（使用框

架时）；_seft为本窗口；_top为上级窗口（使用多级框架时）］

三、小结

P74总结文本路径的表示方法和超级连接的创建方法。

作业：

二、问答题(1、2、3)

课后录：

第8讲

课时：2节

内容：实验四

(1)创建超级链接

(2)设置链接属性

目的：掌握文档路径的表示方法；掌握超级链接的创建以及超链接的设

置。

重难点：文档路径的表示方法和超级链接的创建以及超链接的设置是实

验的重点和难点。

教学方法：实验法

实验过程：

1、学生自己建立一个空白网页：index,htm

2、输入相应的文本和插入图片。

3、选定文本创建超级连接。

4、选定图片创建超级连接。

5、创建图片的热点连接。

1、按F12预览效果。

2、教师总结：小结实验过程中出现的问题进行总结。

课后录：

第9讲

课时：2节

内容：第五章图象的使用

第一节网页图象简述

第二节插入图象

第三节设置图象属性

第四节创建图象映射

目的：了解网页支持的图象格式；掌握创建图象以及图象的设置；掌握

图象的映射方法。

重难点：创建图象以及图象的设置和图象的映射方法是教学的重点和难

点。

教学方法：多媒体教学法、演示法

教学过程：

一、图形的格式

.png.eps.ped.bmp.pcx.

tiff.wmf.ras

二、向网页中添加图形

1.从当前站点或web上插入图形：单击插入点单击“插入”

菜单今选择“图片”命令玲选择“图片”文件玲“确定”

2.插入本地计算机上的图形文件：单击常用工具栏上的“插

入文件中图片”按钮玲单击URL栏最右图标玲选择文件今单

击“确定”

3.插入剪帖画

三、图形的处理

1.图片透明化处理：使用“图片”工具栏上的“设置透明的

颜色”按钮

2.剪栽所需的图形：选中图形少单击“图片”工具栏上的“剪

栽”按钮玲拖动选择图片区域今再单击“剪栽”按钮即可

3.设置图形的效果：

4.重新对图形取样

5.还原图片设置：单击“还原”按钮

四、设置图形的属性

1.设置GIF、JPEG格式图片的属性：单击图形-右击玲图片

属性少属性设置令单击“确定”

2.调整图形的大小和间距：选中图形令右击今选择“图片属

性”T单击“外观”选项卡分设置好单击“确定”

3.设置图形的对齐方式和间距：选中图形少右击玲选择“图

片属性”玲单击“外观”选项卡T设置T单击“确定”

五、小结

总结图片的插入方法及其处理

作业：P87一、填空与选择

课后录：

第10讲

课时：2节

内容：实验五

(1)插入图象

(2)设置图象属性

(3)创建图象映射

目的：了解网页支持的图象格式；掌握创建图象以及图象的设置；掌握

图象的映射方法。

重难点：创建图象以及图象的设置和图象的映射方法是实验的重点和难

点。

教学方法：实验法

一、实验过程：

1.向网页中添加图形

2.图形的处理

3.设置图形的属性

4.myweb站点上创建pictares网页

5.插入图形

6.设置图形属性

7.处理图形设置

8.预览效果

9.保存网页

二、小结

总结学生实验过程中出现的问题进行归纳，并给予指正。

课后录：

第11讲

课时：2节

内容：第六章CSS

第一节设置CSS样式的格式参数

第二节创建CSS样式

第三节css样式定义对话框

第四节管理CSS样式

目的：掌握CSS样式的格式参数设置；掌握创建CSS样式以及CSS的属

性设置。

重难点：CSS样式的格式参数设置以及CSS的属性设置是教学的重点和难

点。

教学方法：多媒体教学法、演示法

教学过程：

一、CSS是什么？

CSS是CascadingStyleSheets（层叠样式表单）的简称。它允许

作者在HTML文档中加入样式（如字体类型、颜色、大小等等）。对于设

计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文

档结构中，可以将所有有关于文档的样式指定内容全部脱离出来，在行

内定义、在标题中定义，甚至作为外部样式文件供HTML调用。

二、CSS的基本特性及运用

1、分组：通常我们需要同时改变几种样式的属性，CSS允许声明通过使

用分号分隔其内容的方式来进行分组。例如：body,td,p

{color:#000000,text-align:left}

2、继承：通过继承，CSS设置可以被应用到多个标识中。绝大部分（但

不是全部）的CSS声明可以通过封闭CSS选择器中的HTML标识来被继承。

例如通过一个CSS设置来改变整个页面的字体：

body{font-family:"Arial”;font-size:14px;line-height:18px;

color:#000000}

这种形式的定义之所以可能，是因为＜body＞标识被认为是页面上所有元

素的父标识。

3、层叠：Cascading描述了覆盖通用样式的局部样式的能力。在相同的

方式中，一个普遍地应用到某一块文本上的CSS规则可以被其他应用到

相同文本中某个更为特殊的部分的规则所覆盖。例如你所看到的本文中

的所有英文字体均属特别定义。

4、样式表的使用有三种方式：连接、导入、嵌入。其中连接和导入可用

于多个页面共用一个样式表文件（在这两种方式中，通常Link方式在浏

览器中等到更好的支持）；嵌入则仅对单一页面起作用。在Dreamweaver3

及以前版本中，用户可以选择使用哪种方式设置CSS,但在Dreamweaver4

以来，默认的是使用LINK方式，即只要用户设置CSS,那么就自动将其

设置保存为一个CSS文件，以便在站点文件中调用。

下面以嵌入式定义本页的样式。按下Shift+Fll打开CSS面板（CSS面板

面于DREAMWEAVERMX的右边，和行为，HTML样式均在设计窗口），点击

CSS面板上的到新建一个样式表，如下图：

选中重新定义HTML标签（R）和仅对该文档两项，标签这里选取〈body〉,按

确定后，出现：

body的CSS样式定义

分类类型www.tastelife,net

R氤

区

块字体9：|宋体v

盒

子

边

框大小⑹：,印僮素0X)回触®)：|]

列

表

定

位样式d)：|W变量也)：|后

扩

展

行高®:礴11大小写⑥:|v|

修饰也):□下划线(U)颜色(C):星J#990000

□上划线Q)

□删除线⑪

□闪烁⑥

口无®

1取消应用国)帮助01)

具体设定如上图，设好后按确定。

说明：

上面的定义选择了＜body＞标签，也就是说＜body＞标签内的文字都将会是

宋体，大小为9像素(PX),颜色为#990000。

＜body＞是网页的主体，也就是说网页内的所有文字都如上定义。

你还可以定义边框，背景，有无上、下划线等。

再次点击CSS面板上的坦I,这次选中使用CSS选择器和仅对该文档两项,

选择器哪里，选a:link,确定后的参数设定如下：(字本装饰那里选无,

表示无下划线)

a:link的CSS样式定义

分类类型www.tastelife,net

岗

F9区

块字体CF）:

盒

子

边

框大小⑤）：

表

列

位

定样式复）：

展

扩

行高⑥：

修饰①）：口下划线包）颜色C）：国#990000

□上划线地）

□删除线©

口闪烁（S）

&］无®

确定取消应用（A）帮助也）

<a>是指有链接的文字，下面详细解说：

a:link：表示已经链接；

a:hover：表示鼠标移上链接时；

a:active：表示链接激活时；

a:visited：表示己点击过的链接。

然后重复几次上面步骤，按你的喜欢分别定义好上面几个标签，就可以

使你作的网页中的链接有无下划线了。

下面使用Class选择器定义一个表格，在新建样式表的对话框里选中创

建自定义样式（CLASS）（M）和仅对该文档两项，名称那里把.unnamedl改

为：.table（注意：前面是有个小圆点的）设定参数如下：

,table的CSS样式定义

类

分背景

盒子

边框

列表

定位

扩展

附件Q）：

水平位置国）：I

垂直位置期）:

[确定J[取消][应用@））[帮助国）

,table的CSS样式定义

分类I边框www.tastelife,net

蔻往

扩展

|确定取消应用⑥帮助国）J

插入一个一行一列的表格，边框为0,宽为100像素，右键点击刚插入的

表格，在弹出的菜单里选CSS样式（C）,然后再选table,看看下面的效

果吧：

三、小结

总结css的定义

作业：P106二、问答方

课后录：

课时：2节

内容：实验六

(1)创建CSS

(2)CSS属性i

目的：掌握CSS样式|

CSS样式以及C

重难点：CSS样式的格:

设置是实验白

教学方法：实验法

一、实验过程：

1、

2、

3、

4、

5、

二、小结

总结实验出现的问题

课后录：

元格”。••表格标题：•选中要删除的标题，然

后按DELETE键。••合并或拆分单元格

•行：•选中要删除的行，单击鼠标右键，然后单

击快捷菜单中的“删除单元格”。••列：•选中

要删除的列，单击鼠标右键，然后单击快捷菜单

中的“删除单元格”。••表格标题：•选中要删

除的标题，然后按DELETE键。••合并或拆分单

元格

行：•选中要删除的行，单击鼠标右键，然后单击

快捷菜单中的“删除单元格”。••列：•选中要

删除的列，单击鼠标右键，然后单击快捷菜单中

的“删除单元格”。••表格标题：•选中要删除

的标题，然后按DELETE键。••合并或拆分单元

格

选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

•列：•选中要删除的列，单击鼠标右键，然后单

击快捷菜单中的“删除单元格”。••表格标题:

•选中要删除的标题，然后按DELETE键。••合并

或拆分单元格

列：•选中要删除的列，单击鼠标右键，然后单击

快捷菜单中的“删除单元格”。••表格标题：•

选中要删除的列，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••表格标题：•选中

要删除的标题，然后按DELETE键。••合并或拆

分单元格

•表格标题：•选中要删除的标题，然后按DELETE

键。••合并或拆分单元格

表格标题：•选中要删除的标题，然后按DELETE

键。••合并或拆分单元格

选中要删除的标题，然后按DELETE键。••合并

或拆分单元格

•合并或拆分单元格

03▼■2S0■

在这里，每一个表格，单元格的大小都可以随意

的调整。最后切换标准视图，你会发现，刚才画

的“布局表格”已经全部转化为表格了。如下图:

LJ二I标准视图布局视用1

；OgfflDISi«fl无痴收档UMC<?>ILV

另外，在布局视图上的表格上有一个数字，表示

的是表格的宽度，单击数字，可以看到以下菜单:

.1183■»1

列设置为自动伸展支)

添加间隔图像@)

清除单元格高度©

使单元格宽度一致@)

移除所有分隔符图像国)

酬控曲有rvi

移到左边或右边设计网页了。

值得注意的就是链接问题了，比如，在左边填上

“链接测试”几个字，并加上链接：

髓颤圆

在属性面板的目标（T）处，将看到:

在以前的链接里，只是看到：_blank,_parent,

_self>_top儿项的，现在多了mainFrame和

leftFrame

mainFrame指的是主框架，也就是右边的，如果链

接的目标选了mainFrame,则点击链接时内容将

在右边出现；leftFrame指左边，链接目标为

leftFrame则内容在左边出现；如果选_seft刚在

本窗口出现；选_parent则在框架窗口出现了（也

就是替换整个框架了）；选_top将在上级窗口出

现，在本例子和选_parent无差别，因为上级窗口

就是_parent。

二、小结

总结框架网页的创建及其属性设置方法。

作业：P144二、操作题（1、2、3）

课后录：

第13讲

课时：2节

内容：第七章表格

第一节创建表格

第二节格式化表格

第三节在表格中排版

目的：掌握表格创建方法；熟悉表格的基本操作;

掌握在表格中进行排版。

重难点：表格创建方法］表格的基本操作以及在表

格中进行排版是教学的重点和难点。

教学方法：多媒体教学法、演示法

教学过程：

一、创建表格

方法一：使用工具按钮创建简单表格

1.单击工具栏上的“插入表格”按

钮

2.拖动鼠标左键选定行、列数

3.释放鼠标即可

方法二：使用命令创建表格

1.确定表示插入点

2.单击“表格”今“插入”

3.单击“表格”选项

4.输入行、列数以及相关设置

5.单击“确定”

二、将文本转换为表格

1.选定“文本”

2.单击“表格”玲“转换”玲”文

本到表格”

3.设置文本分隔符

4.单击“确定”

三、表格的基本操作

1.改变表格行宽和列高：方法用拖

动法

6.合并或拆分单元格

(1)合并单兀格：

选择要合并单元格玲“表格”玲“合

并单元格”

(2)拆分单元格：

选择要拆分单元格令“表格”玲“拆

分单元格”

7.平均分配行高和列宽

方法：(1)选择行或列或整个表格

(2)单击“表格”少“平均

分配行高”或“平均分配列宽”

四、设置表格的属性

1.设置背景颜色或图片：

单击“表格”菜单玲“属性”今设

置

2.设置表格、单元格的布局：

右击“表格”9“表格属性”或选

定单元格令右击今单元格属性

3.设置表格边框的间距、颜色

单击“表格”菜单玲“属性”玲"表

格”，设置相应的间距、颜色。

五、小结：

小结表格的创建方法以及基本操作

作业：补充

题目：表格的创建有哪些方法？

课后录：

第14讲

课时：2节

三、表格与层

表格与层可以相互转换：修改(M)＞转换(C)＞转

换图层为表格(L)

四、小结

总结单元格的对齐方式和在布局视图下的表格和

单元格的绘制方法。

作业：P130问答题：4

课后录：

第16讲

课时：2节

内容：实验八

1、单元格中的布局

2、使用布局视图设置表格

3、表格与层

目的：掌握设置单元格内容的对齐方式；掌握运

用布局视图设置表格；了解表格之间的混

合使用。

重难点：设置单元格内容的对齐方式；运用布局

视图设置表格是实验的重点和难点。

教学方法：实验法

一、实验要点

1、创建一个Web页：

index,htm

2、在index.htm中插入表

格，并在单元格中输入文

本。

3、设置单元格的对齐方式。

4、在index.htm中，在布局

视图下绘制表格和单元

格。

5、切换到标准视图下，观察

以及框架的设置；框架链接方法是实验

的重点和难点。

教学方法：实验法

一、实验步骤：

1.启动DW

2.完成综合练习七

3.标题框架

4.目录框架

5.目标框架

6.预览效果

7.保存框架网页

8.预览效果

二、小结

总结实验过程中出现的问题。

第19讲

课时：2节

内容：第九章使用层

第一节概述

第二节创建新层

第三节编辑层

第四节设置层的属性

第五节层的对齐方式

第六节用层来设计表格

目的：掌握层的基本操作:层的创建方法、层的各

种编辑、层的相关属性设置、层与表格间

的转换方式。

•选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

表格：•选中要删除的表格，然后按DELETE键。

••单元格：•选中要删除的单元格，单击鼠标右键,

然后单击快捷菜单中的“删除单元格"。••行:

•选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

选中要删除的表格，然后按DELETE键。••单元

格：•选中要删除的单元格，单击鼠标右键，然后

单击快捷菜单中的“删除单元格”。••行：•选

中要删除的行，单击鼠标右键，然后单击快捷菜

单中的“删除单元格”。••列：•选中要删除的

列，单击鼠标右键，然后单击快捷菜单中的“删

除单元格”。••表格标题：•选中要删除的标题,

然后按DELETE键。••合并或拆分单元格

•单元格：•选中要删除的单元格，单击鼠标右键,

然后单击快捷菜单中的“删除单元格"。••行:

•选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

单元格：•选中要删除的单元格，单击鼠标右键，

然后单击快捷菜单中的“删除单元格"。••行:

•选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

选中要删除的单元格，单击鼠标右键，然后单击

(1)居中对齐

(2)左对齐

(3)右对齐

(4)默认

2、垂直

(1)中间

(2)基线

(3)底部

(4)顶端

(5)默认

二、使用布局视图设置表格

工具栏:

:二"标准视图I布局视图I国Q

此两项不可用此两项可用

其中：

同绘制布局表格：象画图一样在页面里面排版表

格；

口绘制布局单元格：在表格中画单元格。

现在我们尝试利用以上的工具排版一个新页面：

新建一个页面，点同在页面上画出表格，再点国,

在表格中画出单元格，其中表格会以绿色框表示,

单元格会以蓝色表示，未确定的单元格会以灰色

表示，如下图：

［布局表格1

中间的细线是可以拉动的，以便调整左右窗口的

比例，点一下中间的细线，在属性面板将看到：

其中边框（B）处可以选：是、否和默认（即是否显

示边框），如果你选显示边框的话，还可以设边

框的颜色（C）和边框的宽度（W）

还有是左右框架的比例，在上图，我选了80像素,

也就是说，左框架为80像素，剩下的是右边框的

宽度，当然还可以选百分比和相对的，如下图：

www.tasteli

边框®否V边框颜色©口

边框宽度®）0

框架的参数就说完了，接着你就可以把鼠标光标

移到左边或右边设计网页了。

方法一：使用工具按钮创建简单表格

1.单击工具栏上的“插入表格”按

钮

2.拖动鼠标左键选定行、列数

3.释放鼠标即可

方法二：使用命令创建表格

1.确定表示插入点

2.单击“表格”)“插入”

3.单击“表格”选项

4.输入行、列数以及相关设置

5.单击“确定”

二、将文本转换为表格

1.选定“文本”

2.单击“表格”好“转换”好“文

本到表格”

3.设置文本分隔符

4.单击“确定”

三、表格的基本操作

1.改变表格行宽和列高：方法用拖

动法

2.选择表格元素

(1)选定多个表格：菜单法或鼠标

指向表格左侧，双击鼠标

(2)选择单元格：菜单法或先按住

“alt”键，再单击“单元格”

(3)选择行：指到左侧变黑色后，

单击

(4)选择列：在表格上边框，鼠标

批针变黑色，单击

3.插入表格标题

(1)置光标于表格内

(2)单击“表格”今“插入”今

“标题”

(3)输入标题文本

4.添加单加单元格、行或列

⑴添加单元格

右击“表格”玲“表格属性”或选

定单元格玲右击今单元格属性

3.设置表格边框的间距、颜色

单击“表格”菜单分“属性”玲"表

格”，设置相应的间距、颜色。

五、小结：

小结表格的创建方法以及基本操作

作业：补充

题目：表格的创建有哪些方法？

课后录：

第14讲

课时：2节

内容：实验七

(1)创建表格

(2)表格的基本操作

目的：掌握表格创建方法；熟悉表格的基本操作;

掌握在表格中进行排版。

重难点：表格创建方法］表格的基本操作以及在表

格中进行排版是实验的重点和难点。

教学方法：实验法

一、实验步骤：

1.启动DW

2.打开网页newpage.htm

3.分别用三种方法创建表格一、表格

二、表格三

4.表格元素的基本操作：

3、表格与层

目的：掌握设置单元格内容的对齐方式；掌握运

用布局视图设置表格；了解表格之间的混

合使用。

重难点：设置单元格内容的对齐方式；运用布局

视图设置表格是实验的重点和难点。

教学方法：实验法

一、实验要点

1、创建一个Web页：

index,htm

2>在index.htm中插入表

格，并在单元格中输入文

本。

3、设置单元格的对齐方式。

4^在index.htm中，在布局

视图下绘制表格和单元

格。

5、切换到标准视图下，观察

在布局视图下绘制表格和

单元格的效果。

二、小结

总结实验过程中出现的问题。

课后录：

第17讲

课时：2节

内容：第八章使用框架

第一节建立框架页面

第二节框架的基本操作

第三节设置框架集与框架的属性

第四节创建无框架内容

第五节在框架使用链接

三、小结

总结css的定义以及运用。

作业：P106二、问答题(1、2)

课后录：

第12讲

课时：2节

内容：实验六

(1)创建CSS样式，并应用CSS样式

(2)CSS属性设置

目的：掌握CSS样式的格式参数设置；掌握创建

CSS样式以及CSS的属性设置。

重难点：CSS样式的格式参数设置以及CSS的属性

设置是实验的重点和难点。

教学方法：实验法

一、实验过程：

1、创建两个Web页：

index,htm和sports.htmo

2、创建CSS,分别定义文本字

体、大小、颜色；超级连接

的下划线、颜色等。

3、分别运用运用当前WEB和

导入连接。

4、浏览效果。

5、教师总结实验过程。

二、小结

总结实验出现的问题

课后录：

单击鼠标右键，然后单击快捷菜单中的“删除单

元格”。••表格标题：•选中要删除的标题，然

后按DELETE键。••合并或拆分单元格

•行：•选中要删除的行，单击鼠标右键，然后单

击快捷菜单中的“删除单元格”。••列：•选中

要删除的列，单击鼠标右键，然后单击快捷菜单

中的“删除单元格”。••表格标题：•选中要删

除的标题，然后按DELETE键。••合并或拆分单

元格

行：•选中要删除的行，单击鼠标右键，然后单击

快捷菜单中的“删除单元格”。••列：•选中要

删除的列，单击鼠标右键，然后单击快捷菜单中

的“删除单元格”。••表格标题：•选中要删除

的标题，然后按DELETE键。••合并或拆分单元

格

选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

•列：•选中要删除的列，单击鼠标右键，然后单

击快捷菜单中的“删除单元格”。••表格标题:

・选中要删除的标题，然后按DELETE键。••合并

或拆分单元格

列：•选中要删除的列，单击鼠标右键，然后单击

快捷菜单中的“删除单元格”。••表格标题：•

选中要删除的列，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••表格标题：•选中

要删除的标题，然后按DELETE键。••合并或拆

分单元格

•表格标题：•选中要删除的标题，然后按DELETE

键。••合并或拆分单元格

表格标题：•选中要删除的标题，然后按DELETE

键。••合并或拆分单元格

选中要删除的标题，然后按DELETE键。••合并

或拆分单元格

03▼■2S0■

在这里，每一个表格，单元格的大小都可以随意

的调整。最后切换标准视图，你会发现，刚才画

的“布局表格”已经全部转化为表格了。如下图:

LJ二I标准视图布局视用1

；OgfflDISi«fl无痴收档UMC<?>ILV

另外，在布局视图上的表格上有一个数字，表示

的是表格的宽度，单击数字，可以看到以下菜单:

.1183■»1

列设置为自动伸展支)

添加间隔图像@)

清除单元格高度©

使单元格宽度一致@)

移除所有分隔符图像国)

酬控曲有rvi

移到左边或右边设计网页了。

值得注意的就是链接问题了，比如，在左边填上

“链接测试”几个字，并加上链接：

髓颤圆

在属性面板的目标（T）处，将看到:

在以前的链接里，只是看到：_blank,_parent,

_self>_top儿项的，现在多了mainFrame和

leftFrame

mainFrame指的是主框架，也就是右边的，如果链

接的目标选了mainFrame,则点击链接时内容将

在右边出现；leftFrame指左边，链接目标为

leftFrame则内容在左边出现；如果选_seft刚在

本窗口出现；选_parent则在框架窗口出现了（也

就是替换整个框架了）；选_top将在上级窗口出

现，在本例子和选_parent无差别，因为上级窗口

就是_parent。

二、小结

总结框架网页的创建及其属性设置方法。

作业：P144二、操作题（1、2、3）

课后录：

至所选行的上面，或者，一个新的

行便会被插入至所选行的左方。若

要插入多重的行或列，请选择您想

要插入的行数或列数-您所选择

的行数或列数就会被插入至表格

中

5.删除表格元素

删除操作•在网页视图模式下，完成下列操作••表

格：•选中要删除的表格，然后按DELETE键。••

在网页视图模式下，完成下列操作••表格：•选中

要删除的表格，然后按DELETE键。••单元格：•

•表格：•选中要删除的表格，然后按DELETE键。

••单元格：•选中要删除的单元格，单击鼠标右键,

然后单击快捷菜单中的“删除单元格"。••行:

•选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

表格：•选中要删除的表格，然后按DELETE键。

••单元格：•选中要删除的单元格，单击鼠标右键,

然后单击快捷菜单中的“删除单元格"。••行:

•选中要删除的行，单击鼠标右键，然后单击快捷

菜单中的“删除单元格”。••列：•选中要删除

的列，单击鼠标右键，然后单击快捷菜单中的

“删除单元格”。••表格标题：•选中要删除的

标题，然后按DELETE键。••合并或拆分单元格

选中要删除的表格，然后按DELETE键。••单元

格：•选中要删除的单元格，单击鼠标右键，然后

单击快捷菜单中的“删除单元格”。••行：•选

中要删除的行，单击鼠标右键，然后单击快捷菜

单中的“删除单元格”。••列：•选中要删除的

列，单击鼠标右键，然后单击快捷菜单中的“删

除单元格”。••表格标题：•选中要删除的标题,

然后按DELETE键。••合并或拆分单元格

•单元格：•选中要删除的单元格，单击鼠标右键,

第四节单元格中的布局

第五节使用布局视图设置表格

第六节表格与层

目的：掌握设置单元格内容的对齐方式；掌握运

用布局视图设置表格；了解表格之间的混

合使用。

重难点：设置单元格内容的对齐方式；运用布局

视图设置表格是教学的重点和难点。

教学方法：多媒体教学法、演示法

教学过程：

一、单元格中的布局

1、水平

(1)居中对齐

(2)左对齐

(3)右对齐

(4)默认

2、垂直

(1)中间

(2)基线

(3)底部

(4)顶端

(5)默认

二、使用布局视图设置表格

工具栏：

连寸标濯视图I布局视图1国巴

此两项不可用此两项可用

其中：

同绘制布局表格：象画图一样在页面里面排版表

格；

在插入面板（②区），选中框加，将看到:

▼我入常用布局文本表格框架表单字符媒体3

口口口口［BB］口口5］口比|

点击需要的框架样式就可以插进去了（你还可以

从菜单栏的文件（F）,选择新建（N）,建一框架页

面），比如点一下第一个，就出现了一个左右式

的框架：

中间的细线是可以拉动的，以便调整左右窗口的

比例，点一下中间的细线，在属性面板将看到：

，显性

算架姐边框（2）用*边推88色©匚工

I」列：2边框宽度®）o

值9单位国）

www.tastelife,net列丽像素vj

其中边框（B）处可以选：是、否和默认（即是否显

示边框），如果你选显示边框的话，还可以设边

框的颜色（C）和边框的宽度（W）

还有是左右框架的比例，在上图，我选了80像素,

也就是说，左框架为80像素，剩下的是右边框的

宽度，当然还可以选百分比和相对的，如下图：

“alt”键，再单击“单元格”

(3)选择行：指到左侧变黑色后，

单击

(4)选择列：在表格上边框，鼠标

批针变黑色，单击

3.插入表格标题

(1)置光标于表格内

(2)单击“表格”今“插入”今

“标题”

(3)输入标题文本

4.添加单加单元格、行或列

⑴添加单元格

将光标移至单元格中玲“表格”

玲“插入”f单击“单元格”。

新的单元格会插入该单元格左侧。

⑵添加行

选择一行玲“表格”今“插

入”今单击“行或列”玲

“行”，键入要插入的行数，

⑶添加列

选择一列玲“表格”玲“插

入”今单击“行或列”

“列”，键入要插入的列数,并

指定其插入位置。

a：也可以通过选择一个栏或列，

然后单击“表格”工具栏上的

“插入行”或“插入行”，以插

入行或列。一个新的行便会被插入

至所选行的上面，或者，一个新的

行便会被插入至所选行的左方。若

要插入多重的行或列，请选择您想

要插入的行数或列数-您所选择

的行数或列数就会被插入至表格

中

5.删除表格元素

删除操作•在网页视图模式下，完成下列操作••表

目的：掌握表格创建方法；熟悉表格的基本操作;

掌握在表格中进行排版。

重难点：表格创建方法］表格的基本操作以及在表

格中进行排版是实验的重点和难点。

教学方法：实验法

一、实验步骤：

1.启动DW

2.打开网页newpage.htm

3.分别用三种方法创建表格一、表格

二、表格三

4.表格元素的基本操作：

行、列宽调整、插入单元格、行、称

等

5.保存网页

6.预览网页中的表格效果

二、小结

总结实验中出现的问题。

课后录：

第15讲

课时：2节

内容：第七章表格

第四节单元格中的布局

第五节使用布局视图设置表格

第六节表格与层

目的：掌握设置单元格内容的对齐方式；掌握运

用布局视图设置表格；了解表格之间的混

合使用。

重难点：设置单元格内容的对齐方式；运用布局

第17讲

课时：2节

内容：第八章使用框架

第一节建立框架页面

第二节框架的基本操作

第三节设置框架集与框架的属性

第四节创建无框架内容

第五节在框架使用链接

目的：掌握创建框架页面的方法；熟悉框架的基

本操作以及框架的设置；掌握框架色链接

方法。

重难点：创建框架页面的方法；框架的基本操作

以及框架的设置；框架链接方法是教学

的重点和难点。

教学方法：多媒体教学法、演示法

教学过程：

一、框架使用

上网时候，经常看到点击左边，内容从右边出来

之类的网页，其实就是框架的应用了。

在插入面板(②区)，选中框加，将看至I」：

▼插入常用布局文本表格［框祠俵垂董J锢瓯^

口□©口［00］目口目后印

点击需要的框架样式就可以插进去了(你还可以

从菜单栏的文件(F),选择新建(N),建一框架页

面)，比如点一下第一个，就出现了一个左右式

的框架：

1.确定表示插入点

2.单击“表格”9“插入”

3.单击“表格”选项

4.输入行、列数以及相关设置

5.单击“确定”

二、将文本转换为表格

1.选定“文本”

2.单击“表格”今“转换”今“文

本到表格”

3.设置文本分隔符

4.单击“确定”

三、表格的基本操作

1.改变表格行宽和列高：方法用拖

动法

2.选择表格元素

(1)选定多个表格：菜单法或鼠标

指向表格左侧，双击鼠标

(2)选择单元格：菜单法或先按住

“alt”键，再单击“单元格”

(3)选择行：指到左侧变黑色后，

单击

(4)选择列：在表格上边框，鼠标

批针变黑色，单击

3.插入表格标题

(1)置光标于表格内

(2)单击“表格”玲“插入”今

“标题”

(3)输入标题文本

4.添加单加单元格、行或列

⑴添加单元格

将光标移至单元格中玲“表格”

玲“插入”玲单击“单元格”。

新的单元格会插入该单元格左侧。

⑵添加行

选择一行玲“表格”玲“插

入”T单击“行或列”玲

小结表格的创建方法以及基本操作

作业：补充

题目：表格的创建有哪些方法？

课后录：

第14讲

课时：2节

内容：实验七

(1)创建表格

(2)表格的基本操作

目的：掌握表格创建方法；熟悉表格的基本操作;

掌握在表格中进行排版。

重难点：表格创建方法］表格的基本操作以及在表

格中进行排版是实验的重点和难点。

教学方法：实验法

一、实验步骤：

1.启动DW

2.打开网页newpage.htm

3.分别用三种方法创建表格一、表格

二、表格三

4.表格元素的基本操作：

行、列宽调整、插入单元格、行、称

等

5.保存网页

6.预览网页中的表格效果

二、小结

总结实验中出现的问题。

视图设置表格是实验的重点和难点。

教学方法：实验法

一、实验要点

1>创建一个Web页：

index,htm

2^在index.htm中插入表

格，并在单元格中输入文

本。

3、设置单元格的对齐方式。

4、在index,htm中，在布局

视图下绘制表格和单元

格。

5、切换到标准视图下，观察

在布局视图下绘制表格和

单元格的效果。

二、小结

总结实验过程中出现的问题。

课后录：

第17讲

课时：2节

内容：第八章使用框架

第一节建立框架页面

第二节框架的基本操作

第三节设置框架集与框架的属性

第四节创建无框架内容

第五节在框架使用链接

目的：掌握创建框架页面的方法；熟悉框架的基

本操作以及框架的设置；掌握框架色链接

方法。

重难点：创建框架页面的方法；框架的基本操作

以及框架的设置；框架链接方法是教学

(3)选择行：指到左侧变黑色后，

单击

(4)选择列：在表格上边框，鼠标

批针变黑色，单击

3.插入表格标题

(1)置光标于表格内

(2)单击“表格”玲“插入”9

“标题”

(3)输入标题文本

4.添加单加单元格、行或列

⑴添加单元格

将光标移至单元格中玲“表格”

玲“插入”玲单击“单元格”。

新的单元格会插入该单元格左侧。

⑵添加行

选择一行玲“表格”玲“插

入”玲单击“行或列”玲

“行”，键入要插入的行数，

⑶添加列

选择一列玲“表格”玲“插

入”少单击“行或列”玲

“列”，键入要插入的列数，并

指定其插入位置。

a：也可以通过选择一个栏或列，

然后单击“表格”工具栏上的

“插入行”或“插入行”，以插

入行或列。一个新的行便会被插入

至所选行的上面，或者，一个新的

行便会被插入至所选行的左方。若

要插入多重的行或列，请选择您想

要插入的行数或列数-您所选择

的行数或列数就会被插入至表格

中

5.删除表格元素

删除操作•在网页视图模式下，完成下列操作••表

格：•选中要删除的表格，然后按DELETE键。••

目的：掌握表格创建方法；熟悉表格的基本操作;

掌握在表格中进行排版。

重难点：表格创建方法］表格的基本操作以及在表

格中进行排版是实验的重点和难点。

教学方法：实验法

一、实验步骤：

1.启动DW

2.打开网页newpage.htm

3.分别用三种方法创建表格一、表格

二、表格三

4.表格元素的基本操