网站建设 实训教案

石家庄计算机职业学院

教案（实训教案）编写格式与基本要求

一、概念

实训教案又称课程实训指导，是任课教师实训教学的实施方案。任课教师应遵循专业教学

计划制订的培训目标，以教学大纲为依据，在熟悉教材、了解学生的基础上，结合教学实践经

验，提前编写设计好课程的实训指导。实训教案一般以独立的实训内容为单位设计编写。

二、基本格式

1、教案封面

如表一

2、每次课教案包含的内容

如表二

（1）教案首页

主要包括课次，学时，实训题目，实训目的，实训重点，实训难点，实训仪器或实训环境，

实训方法。

（2）、续页

主要包括实训内容和步骤，补充内容和时间分配。

（3）、尾页

主要包括思考题、作业题、讨论题，课后总结和分析。

三、印制教案要求

用A4型纸张；字体用五号宋体，标题加黑；边距（mm）：上20、下15、左20、右15。

页码居中、格式为“1”。

三、编写要求

1、明确教学目标。

2、将课程内容及其结构与教学对象的认识结构有机对应，构架教学内容的逻辑路线，设计

讲述策略。

3、科学安排进度，突出重点，讲清难点，注重启发。

4、精心选用教学手段，注明其使用时机。

5、详略得当，书写工整，项目齐全。

石家庄计算机职业学院

（实训）教案

电子商务网站建设

系 部： 电子商务

任课教师： 孙悦

教师职称：

授课对象： 06电子商务1班、2班

课程学时： 24

学年学期： 2007-2008学年第二学期

第 1 次课， 学时 2 教案编写时间

Dreamwerver的安装和启动，安装IIS，

实训题目

实训目的：

学生掌握IIS的安装与调试，能建设站点，制作简单的页面

实训重点：

IIS的安装与调试

站点的建设

实训难点：

实训器材或实训环境：

机房，系统安装盘，dreamweaver软件环境

实训方法：

上机练习

实 训 内 容 和 步 骤 补充内容和时间分配

一、IIS的安装调试

添加Internet信息服务组件，插入安装盘，安装。

调试：在浏览器地址栏输入localhost/

二、建立站点

步骤：

（1） 选择【站点】｜【新建站点】命令，打开【站点定义】对话框，在【基本】

选项卡的【您打算为您的站点起什么名字?】文本框中输入站点名称，本例输入My

site。

（2） 单击【高级】标签，在【高级】选项卡中设置本地站点的参数，

（3） 在对话框左侧的【分类】列表中显示了站点设置的多种类型选项，从中选定

不同选项后，其右侧选项卡中将显示不同的设置内容，选择【本地信息】选项可设

置本地站点。

（4） 在【站点名称】文本框中输入当前编辑的站点名称。本例用My site作为站点

的名称。设计者可能会创建多个站点，站点名称是站点的标识，便于Dreamweaver MX

对各个站点分别管理。站点名称不能含有“”、“/”、“： ”、“；”、“*”、“？”、“〉”、

“〈”、“｜”符号。

（5） 在【本地根文件夹】文本框中输入本地站点所对应的本地根文件夹，指明当

前创建的网页所在的位置。单击文本框右侧的按钮，可用浏览的方式输入本地站点

的路径。若在文件列表区域右击，可利用快捷菜单新建一个文件夹，并可将其指定

为本地根文件夹。

（6） 选中【自动刷新本地文件列表】复选框后，当设计者将文件复制到站点有关

的文件夹中时，系统会自动更新站点文件列表。如果不选该复选框，则要单击站点

管理器窗口中的【刷新】按钮，才能自动更新站点的文件列表。

（7） 在【默认图像文件夹】文本框中输入本地站点所对应的图像文件夹，指明当

前创建的网页所用图片的位置。单击文本框右侧的按钮，可用浏览的方式输入本地

站点的路径。

（8） 在【HTTP 地址】文本框中，输入当前网页将要使用的网址。如果设计者已

经申请了域名，可在此文本框中输入申请好的域名。例如网站的网址是http:

//202.121.160.100，可将此网址输入到【HTTP 地址】的文本框中。

（9） 选中【缓存】复选框后，Dreamweaver MX会给这个本地站点设置一个缓存，

以提高站点管理的速度。

（10） 完成以上设置后，单击【确定】按钮，新的本地站点就创建完毕。

三、制作一个网页，设置其背景，图片和文字

制作要求如下：

（1） 页面的背景图片为；

（2） 在合适的位置插入图片 ；

（3） 在网页中输入横排带阴影的文字“BusinesstoCustomer”和“欢迎访问电子

商务网站”；

（4） 将网页用为名保存在本地站点My site中。

第 2 次课， 学时 2 教案编写时间

实训题目

网页文档的格式化、网页元素的插入、超级链接的设计方法、

实训目的：

学生掌握网页文档的格式化、网页元素的插入、超级链接的设计方法、

实训重点：

网页元素的插入，超级链接的设计

实训难点：

实训器材或实训环境：

机房，Dreamweaver软件环境

实训方法：

实 训 内 容 和 步 骤 补充内容和时间分配

一、制作一个符合下列要求的网页文件，

（1） 将ch04文件夹中Word文件“新书精选.doc”转换成HTML文件。

（2） 在新的Web页面中导入HTML文件，并设置页面背景图片为img

文件夹中的。

（3） 添加标题“书海指南”，将其格式设置为： 【标题1】“华文行楷”、“红色”、“居

中”、“加粗”

（4） 用HTML标记【标题2】、【标题3】……【标题6】分别格式化后5段文字，

并给这些文字设置不同的颜色。

（5） 将网页用newbook..htm为名保存在本地站点的根文件夹My site中。

二、

1. 插入水平线

（1） 在网页中选择水平线插入点的位置。

（2） 单击【插入】面板中【常用】选项卡的【水平线】按钮，或选择【插入】|【水

平线】命令在网页中插入一条水平分隔线。

（3） 选中水平线，在【属性】面板上可编辑其属性，改变水平线的形状，如图4-8

所示。

（4） 单击属性面板中按钮，在编辑标签框中给水平线设置颜色，如图4-9所示。

（5） 按F12键预览水平线的效果。

2. 插入日期

（1） 在网页中选择日期插入点的位置。

（2） 单击【插入】面板中【常用】选项卡的【日期】按钮，或选择【插入】|【日

期】命令，此时系统将打开【插入日期】对话框，如图4-10所示，此时可在网页的

当前插入点上插入日期。

（3） 在插入日期对话框中设置了各项参数后，单击【确定】 按钮，即可在指定位

置插入时间和日期对象。

3. 插入Flash按钮和Flash 文字

插入Flash按钮的操作步骤如下:

（1） 在网页中选择Flash按钮插入点的位置。

（2） 单击【插入】面板中【媒体】选项卡的【Flash按钮】，或在网页编辑窗口中

选择【插入】|【交互式图像】|【Flash按钮】命令，此时系统将打开【插入Flash按

钮】对话框，如图4-11所示。

（3） 单击【确定】按钮后，就会产生一个.swf格式的文件，文件会被自动导入当

前正在编辑的网页中。

（4） 单击网页中做好的Flash按钮，在Flash按钮的【属性】面板中单击【播放】

按钮，无须打开浏览器便可预览按钮的动态效果，如图4-12所示。

（5） 可在Flash按钮的【属性】面板中，给该按钮命名，设置大小、对齐方式、

品质、比例、背景颜色等参数。

制作Flash动态文字操作步骤如下:

（1） 在网页中选择Flash文字要插入的位置。

（2） 单击【插入】面板中【媒体】选项卡的【Flash 文本】按钮，或在网页编辑

窗口中选择【插入】|【交互式图像】|【Flash 文本】命令，此时系统将打开【插入

Flash文本】对话框，如图4-13所示。

（3） 单击【确定】按钮，就会产生一个.swf格式的文件，文件会自动导入当前的

网页中。

实 训 内 容 和 步 骤 补充内容和时间分配

4. 插入Java Applet 程序

（1） 将要使用的Java Applet程序复制到本地站点的相关文件夹中。

（2） 在网页中选择Java Applet程序插入点的位置。

（3） 单击【插入】面板中【媒体】选项卡的【Applet】按钮，或选择【插入】|

【媒体】|【Applet】命令，此时系统将打开【选择文件】对话框。选择目标文件和

路径并单击【确定】按钮，Java Applet便被插入到网页中。

（4） 与其他插入的对象一样，只要在网页中选中Java Applet对象，【属性】面板

中就会显示Java Applet所有属性设置

5、文本的查找和替换

三、建设网站相册

（1） 选择【命令】|【创建网站相册】命令，在打开的【创建网站相册】对话框中

输入各类参数，如图4-19所示。

（2） 将需要制作成相册的图片放在一个单独的文件夹（即源图像文件夹）中。同

时建立一个新的空文件夹（即目标文件夹），用来存放系统生成的图片和文件。

（3） 在【相册标题】、【副标信息】、【其他信息】文本框中输入相册的标题、副标

题和其他补充信息。

（4） 在【源图像文件夹】和【目标文件夹】文本框中，指定图片的源文件夹和目

标相册的位置。

（5） 设置【缩略图大小】的参数，每张缩略图片可选择36×36、72×72、100×

100、144×144、200×200像素5种选项。在【列】文本框中设置每行放置几张图

片，选中【显示文件名称】复选框，则在网站相册的缩略图下方显示文件名称。

（6） 设置【缩略图格式】和【相片格式】为【JPEG-品质较高】，并为每张图片创

建导览页面。

（7） 单击【确定】按钮后，Dreamweaver MX自行启动Fireworks MX为网站相册

完成批处理操作。Fireworks MX自动将【源图像文件夹】中所有图片按指定的大小

处理成缩略图，并在【目标文件夹】中存放制作完成的缩略图和相片。

（8） 当Fireworks MX将网站相册制作完成后，在Dreamweaver MX的窗口中弹出

【相册已经建立】对话框。

（9） 单击【确定】按钮后，Dreamweaver MX将自动创建并打开网站相册的页面，

按F12键可浏览网站相册的页面。

四、鼠标经过图像

（1） 在网页中选择鼠标经过图像插入点的位置。

（2） 选择【插入】|【交互式图像】|【鼠标经过图像】命令，打开【插入鼠标经

过图像】对话框，如图4-28所示。

（3） 单击【原始图像】文本框右边的【浏览】按钮，选择一幅主图像。

（4） 单击【鼠标经过图像】文本框右边的【浏览】按钮，选择一幅翻转图片。

（5） 选中【预载鼠标经过图像】复选框，使翻转图片预先装入浏览器的高速缓存

中

（6） 在【按下时，前往的URL】文本框中，输入单击图片时链接文件的URL地址。

（7） 单击【确定】按钮，便在网页中插入了鼠标经过图像。

五、超级链接的设置

第 3 次课， 学时 2 教案编写时间

实训题目 创建导航条、创建跳转菜单、创建映射图、

实训目的：

利用以上所讲的知识创作揖个网页

实训重点：

实训难点：

实训器材或实训环境：

实训方法：

实 训 内 容 和 步 骤 补充内容和时间分配

1、创建导航条

（1） 在网页上选择插入导航条的位置。

（2） 选择【插入】|【交互式图像】|【导航条】命令，或者在【插入】浮动面板

的【常用】选项卡中，单击【导航条】按钮，此时在网页编辑窗口中会弹出【插入

导航条】对话框，如图4-36所示。

（3） 在【项目名称】文本框中输入导航条元素的名称，名称对中文不支持。所输

30分钟

入的名称将在【导航条元件】列表框里显示。可用按钮、调整导航条中元素的次序。

（4） 分别单击【状态图像】、【鼠标经过图像】、【按下图像】、【按下时鼠标经过图

像】4个文本框右侧的【浏览】按钮，选择图像。

（5） 在【替换文本】的文本框中，输入该【导航条】按钮的替换文字。

（6） 在【按下时，前往的URL】文本框中，输入要链接的网页地址，并在右侧的

下拉列表框中，选择在何处打开要链接的网页。

（7） 如果要在打开网页时先将图像装载到内存中，应选中【预先载入图像】复选

框。

（8） 如果要在导航条上显示【按下时鼠标经过图像】的图像，可选中【页面载入

时就显示“鼠标按下图像”】复选框。

（9） 在【插入】下拉列表框中选择【水平】或【垂直】选项，在网页上水平或垂

直放置导航条。

（10） 如果要将导航条插入表格中，则选中【使用表格】复选框。

（11） 单击、按钮，可将该【导航条】按钮加入导航条中或从导航条中移去。

（12） 重复第(3)～(11)步，插入导航条中的其他按钮。

（13） 完成后，单击【确定】按钮，并返回网页编辑窗口。

（14） 按F12键预览网页

2、创建跳转菜单

（1） 在网页的合适位置插入光标，选择【插入】|【表单对象】|【跳转菜单】命

令。或者在【插入】浮动面板的【表单】选项卡中，单击【跳转菜单】按钮，也可

以拖曳【跳转菜单】按钮到当前网页的光标处

（2） 网页编辑窗口弹出【插入跳转菜单】对话框，如果要在跳转菜单中创建一个

20分钟

提示选项，可在【文本】框中输入提示内容的文字，然后【选项】区域里选中【更

改URL后选择第一个项目】复选框。这一选项是菜单提示性质的说明，单击按钮添

加这个提示项。

（3） 在【文本】文本框中，输入跳转菜单其他选项的名字。

（4） 单击【选择时，前往URL】文本框中右侧的【浏览】按钮，输入该菜单选项

所链接的页面文件和路径。

（5） 在【打开URL于】下拉列表框中，选择链接页面文件的显示方式。

（6） 要想继续添加菜单选项，可单击按钮，然后重复第(3)～(6)步的操作。

（7） 如果在跳转菜单右边添加一个提交按钮，可选中【菜单之后插入前往按钮】

20分钟

复选框。如果要在选择了某个菜单选项后重新返回再选择第一个菜单项，可选中【更

改URL后选择第一个项目】复选框

（8） 完成设置后，单击【确定】按钮。

（9） 按F12键预览网页，

补充内容和时间

分配

3、创建映射图连接 10分钟

（1） 在网页编辑窗口中插入一幅图像，并选中这幅图像。

（2） 此时在图像的【属性】面板左下方有一个名为【地图】的文本框，如图4-43

所示，可在其中输入映射链接的名称。若不输入内容，Dreamweaver MX将会自动加

上一个映射链接的名字

（3） 在【地图】文本框下面有4个图标按钮，分别是选择编辑箭头、矩形、圆形

和多边形，这些图标的功能分别是调整热点区域，创建矩形、圆形和不规则多边形

的热点区域。

（4） 单击创建多边形热点区域的图标，然后用鼠标依次在选作映射图链接的几何

图形外部轮廓线上依次单击，可定义一个多边形的热区，如图4-44所示。 20分钟

（5） 如果用鼠标单击矩形或圆形图标，然后在选作映射图形的外部轮廓线上拖曳

鼠标，可定义矩形或圆形的热区，

（6） 当一个热区被选定后，图像的【属性】面板变成图像热点的【属性】面板，

如图4-44所示。

（7） 单击图像热点的【属性】面板中【链接】文本框右边的图标，选择当前热区

链接的文件。或者直接在【链接】文本框中输入链接文件的路径和名称。

（8） 在【目标】下拉列表框中设置链接的目标对象的显示方式。

（9） 在【替代】文本框中输入所定义的热区的说明文字。在浏览网页时，鼠标指

在热区上将会显示【替代】文本框中的说明文字。

4、网页实例制作

（1） 网页名为，网页的背景图片为，网页保存在My site文

件夹中。

（2） 在网页的合适位置上插入1条水平线，这条水平线将网页分成两个部分。

（3） 在网页的顶部区域输入标题文字“人生的伴侣·知识的源泉”，用HTML样式

【标题1】对其格式化，预览页面效果。

（4） 在网页的中部区域插入导航条，导航条的6个按钮对应的图片是、

、、„„、、、共24个。每个按钮可以链接一

个My site文件夹中的HTML文件

（5） 在网页的合适位置上插入图片t4_、t4_、t4_。

（6） 在网页的底部区域插入图片，并为该图片建立电子邮件链接。

（7） 预览页面效果后，保存网页文件

第 4 次课， 学时 2 教案编写时间

使用表格、布局表格布局单元格、层、框架

实训题目

实训目的：

使用表格、布局表格布局单元格、层、框架

实训重点：

实训难点：

实训器材或实训环境：

机房，软件环境

实训方法：

实 训 内 容 和 步 骤 补充内容和时间分配

1、使用表格布局

2、使用布局视图

（1） 创建网页名为exa5的文件，网页的背景图片为，网页文

件保存在My site文件夹中。

（2） 在网页中创建800×600像素的布局表格，在网页顶部位置上插入1个800×

80像素的布局单元格，在网页左边合适的位置上插入4个79×79像素的布局单元

格，在网页右边合适的位置上插入1个170×170像素的布局单元格。

（3） 在网页的顶部区域的布局单元格中插入ch05文件夹中的Flash文件。

（4） 在网页左边插入的4个布局单元格中，分别插入ch05文件夹中的图片文件

t5_、t5_、t5_、t5_。每个图片与My site文件夹中的一个HTML文

件建立超链接，被链接的HTML文件在新窗口中打开。

（5） 在网页右边的布局单元格中，插入ch05文件夹中的逐帧动画文件shu_。

（6） 预览页面效果后，保存网页文件

3、使用层

制作具有下列要求的网页

（1） 页面的背景图片为。

（2） 在页面合适的位置上插入4个层，层的大小为150×150像素。

（3） 在层中插入【鼠标经过图像】，原始图片分别是文件夹img中的、、

、，翻转图片分别是文件夹img中的、、、。

（4） 创建【名称】为【标题1】的HTML样式，【应用到】为“段落”选项，【当应

用时】为“清除现有样式”，【字体】为“方正舒体”，【大小】为7，【颜色】为#FFFF00，

【样式】为“粗体”。

（5） 创建2个层，层中输入文字“书——精神的粮食”，用HTML样式【标题1】

分别格式化层中文字，并将下面1个层中文字由黄色改为黑色。

（6） 将2个文字层略微错开叠放在一起，设计出文字阴影效果，

（7） 网页文件以exa5为名保存在本地站点My site中。

4、框架

制作一个的网页页面，页面是框架结构，浏览时用鼠标单击页面左边的按钮时，

在主框架（MainFrame）中显示不同网页页面，文件用exa5为名保存在My

site文件夹中。

第 5 次课， 学时 2 教案编写时间

实训题目

实训目的：

实训重点：

实训难点：

实训器材或实训环境：

实训方法：

实 训 内 容 和 步 骤 补充内容和时间分配

1、行为的应用

设计制作一个符合下列要求的网页文件。

（1） 在网页中创建2个大小为104×90像素的层，在层Layer1中插入ch06文件

夹中的图片，在层Layer2插入ch06文件夹中的带有说明文字的图片

，如图6-5所示。

（2） 隐藏层Layer2。

（3） 在浏览该页面时，只显示层Layer1的图片。当鼠标指向该图片时，

显示带有说明文字的图片； 移开鼠标时，隐藏带有说明文字的图片

2、时间轴的使用

1、制作一个使图片文件从屏幕左边移动到右边的动画

2、用时间轴控制层的可见性：在6.3.3节小鸟动画的实例中，要在第15帧处隐藏动

画对象，在第36帧处显示对象，动画对象循环播放5次后停止

3、用时间轴控制图片替换

制作一个Web 页面，页面上的四幅图片轮流显示，每隔2/3s显示其中一幅图片

4、用时间轴改变层的叠放次序

制作一个Web 页面，页面上的3幅图片轮流显示，每隔2/3s显示其中一幅图片

5、用时间轴改变层的大小

制作一个网页页面，在页面的左边缓慢地画出红色线条，线条的宽度为5像素

3、综合实例

在网页中创建一个2行2列的布局表格，每个布局单元格的大小为150×100像素，

4个布局单元格中设置了4幅【鼠标经过图像】，在网页中插入一个带有图

片的层，这个层围绕4幅【鼠标经过图像】组成的矩形运动，当这个层在矩形的某

一条边上运动时，相对应的1幅【鼠标经过图像】就发生翻转。预览网页后，以

为文件名将文件保存在My site文件夹中

4、表单的制作

在网页上创建一个网上书店服务问卷调查的表单，表单包含单选按钮、复选框、单

行文本框、多行文本框、下拉式列表等表单元素，表单中的表单元素用表格定位，

表单中的标题及标识文字

第 6 次课， 学时 2 教案编写时间

表单的制作

实训题目

实训目的：

制作表单

实训重点：

实训难点：

实训器材或实训环境：

机房、软件环境

实训方法：

实 训 内 容 和 步 骤 补充内容和时间分配

1、综合实例

在网页中创建一个2行2列的布局表格，每个布局单元格的大小为150×100像素，

4个布局单元格中设置了4幅【鼠标经过图像】，在网页中插入一个带有图

片的层，这个层围绕4幅【鼠标经过图像】组成的矩形运动，当这个层在矩形的某

一条边上运动时，相对应的1幅【鼠标经过图像】就发生翻转。预览网页后，以

为文件名将文件保存在My site文件夹中

2、表单的制作

在网页上创建一个网上书店服务问卷调查的表单，表单包含单选按钮、复选框、单

行文本框、多行文本框、下拉式列表等表单元素，表单中的表单元素用表格定位，

表单中的标题及标识文字

第 7 次课， 学时 2 教案编写时间

实训题目 VBScript脚本语言基本应用

实训目的：

掌握VBScript脚本语言的应用

实训重点：

实训难点：

实训器材或实训环境：

机房，IIS，网页制作软件

实训方法：

实 训 内 容 和 步 骤 补充内容和时间分配

1、创建一个简单的ASP页面

<%=now()%>

2、求圆的面积

<％

Const PI=3.1415926

R=50

S=PI*R^2' 求半径R为50的圆面积

％>

3、输入输出函数

<script Language="VBScript">

本文word下载地址：网站建设 实训教案.doc

本文 PDF 下载地址：网站建设 实训教案.pdf