2022年网站建设实训教案 .pdf

石家庄计算机职业学院教案（实训教案）编写格式与基本要求一、概念实训教案又称课程实训指导，是任课教师实训教学的实施方案。任课教师应遵循专业教学计划制订的培训目标，以教学大纲为依据，在熟悉教材、了解学生的基础上，结合教学实践经验，提前编写设计好课程的实训指导。实训教案一般以独立的实训内容为单位设计编写。二、基本格式1、教案封面如表一2、每次课教案包含的内容如表二（1）教案首页主要包括课次，学时，实训题目，实训目的，实训重点，实训难点，实训仪器或实训环境，实训方法。（2） 、续页主要包括实训内容和步骤，补充内容和时间分配。（3） 、尾页主要包括思考题、作业题、讨论题，课后总结和分析。三、印制教案要求用 A4型纸张；字体用五号宋体，标题加黑；边距（mm ） ：上 20、下 15、左 20、右 15。页码居中、格式为“ 1” 。三、编写要求1、明确教学目标。2、将课程内容及其结构与教学对象的认识结构有机对应，构架教学内容的逻辑路线，设计讲述策略。3、科学安排进度，突出重点，讲清难点，注重启发。4、精心选用教学手段，注明其使用时机。5、详略得当，书写工整，项目齐全。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 45 页 - - - - - - - - - 石家庄计算机职业学院电子商务网站建设（实训）教案系部：电子商务任课教师：孙悦教师职称：授课对象：06 电子商务 1 班、 2 班课程学时：24学年学期：2007-2008 学年第二学期名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 45 页 - - - - - - - - - 第1 次课，学时2 教案编写时间实训题目Dreamwerver 的安装和启动，安装IIS ，实训目的：学生掌握IIS 的安装与调试，能建设站点，制作简单的页面实训重点：IIS 的安装与调试站点的建设实训难点：实训器材或实训环境：机房，系统安装盘，dreamweaver 软件环境实训方法：上机练习名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配一、 IIS 的安装调试添加 Internet 信息服务组件，插入安装盘，安装。调试：在浏览器地址栏输入http:/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） 页面的背景图片为bg0000.jpg；（2） 在合适的位置插入图片earth.gif ；（3） 在网页中输入横排带阴影的文字“BusinesstoCustomer” 和“ 欢迎访问电子商务网站 ” ；（4） 将网页用welcome.htm 为名保存在本地站点My site 中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 45 页 - - - - - - - - - 第2 次课，学时2 教案编写时间实训题目网页文档的格式化、网页元素的插入、超级链接的设计方法、实训目的：学生掌握网页文档的格式化、网页元素的插入、超级链接的设计方法、实训重点：网页元素的插入，超级链接的设计实训难点：实训器材或实训环境：机房， Dreamweaver 软件环境实训方法：实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 45 页 - - - - - - - - - 一、制作一个符合下列要求的网页文件，（1） 将 ch04 文件夹中Word 文件 “ 新书精选 .doc ” 转换成 HTML 文件 newbook.htm 。（2） 在新的 Web 页面中导入HTML 文件 newbook.htm ， 并设置页面背景图片为img文件夹中的bg0003.jpg。（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 格式的文件，文件会自动导入当前的网页中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配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） 设置【缩略图大小】的参数，每张缩略图片可选择3636、7272、100100、144144、200200 像素 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） 单击【确定】按钮，便在网页中插入了鼠标经过图像。五、超级链接的设置名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 45 页 - - - - - - - - - 第3 次课，学时2 教案编写时间实训题目创建导航条、创建跳转菜单、创建映射图、实训目的：利用以上所讲的知识创作揖个网页实训重点：实训难点：实训器材或实训环境：实训方法：实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 45 页 - - - - - - - - - 1、创建导航条（1） 在网页上选择插入导航条的位置。（2） 选择【插入】 | 【交互式图像】| 【导航条】命令，或者在【插入】浮动面板的【常用】选项卡中，单击【导航条】按钮，此时在网页编辑窗口中会弹出【插入导航条】对话框，如图4-36 所示。（3） 在【项目名称】文本框中输入导航条元素的名称，名称对中文不支持。所输入的名称将在【导航条元件】列表框里显示。可用按钮、调整导航条中元素的次序。（4） 分别单击【状态图像】 、 【鼠标经过图像】 、 【按下图像】 、 【按下时鼠标经过图像】 4 个文本框右侧的【浏览】按钮，选择图像。（5） 在【替换文本】的文本框中，输入该【导航条】按钮的替换文字。（6） 在【按下时，前往的URL 】文本框中，输入要链接的网页地址，并在右侧的下拉列表框中，选择在何处打开要链接的网页。（7） 如果要在打开网页时先将图像装载到内存中，应选中【预先载入图像】复选框。（8） 如果要在导航条上显示【按下时鼠标经过图像】的图像，可选中【页面载入时就显示“鼠标按下图像”】复选框。（9） 在【插入】下拉列表框中选择【水平】或【垂直】选项，在网页上水平或垂直放置导航条。（10） 如果要将导航条插入表格中，则选中【使用表格】复选框。（11） 单击、按钮，可将该【导航条】按钮加入导航条中或从导航条中移去。（12） 重复第 (3) (11) 步，插入导航条中的其他按钮。（13） 完成后，单击【确定】按钮，并返回网页编辑窗口。（14） 按 F12 键预览网页2、创建跳转菜单（1） 在网页的合适位置插入光标，选择【插入】| 【表单对象】| 【跳转菜单】命令。或者在【插入】浮动面板的【表单】选项卡中，单击【跳转菜单】按钮，也可以拖曳【跳转菜单】按钮到当前网页的光标处（2） 网页编辑窗口弹出【插入跳转菜单】对话框，如果要在跳转菜单中创建一个提示选项，可在【文本】框中输入提示内容的文字，然后【选项】区域里选中【更改 URL后选择第一个项目】复选框。这一选项是菜单提示性质的说明，单击按钮添加这个提示项。（3） 在【文本】文本框中，输入跳转菜单其他选项的名字。（4） 单击【选择时，前往URL 】文本框中右侧的【浏览】按钮，输入该菜单选项所链接的页面文件和路径。（5） 在【打开URL于】下拉列表框中，选择链接页面文件的显示方式。（6） 要想继续添加菜单选项，可单击按钮，然后重复第(3) (6) 步的操作。（7） 如果在跳转菜单右边添加一个提交按钮，可选中【菜单之后插入前往按钮】复选框。 如果要在选择了某个菜单选项后重新返回再选择第一个菜单项，可选中【更改 URL后选择第一个项目】复选框（8） 完成设置后，单击【确定】按钮。（9） 按 F12 键预览网页，30 分钟20 分钟20 分钟实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 45 页 - - - - - - - - - 3、创建映射图连接（1） 在网页编辑窗口中插入一幅图像，并选中这幅图像。（2） 此时在图像的【属性】面板左下方有一个名为【地图】的文本框，如图4-43所示，可在其中输入映射链接的名称。若不输入内容，Dreamweaver MX将会自动加上一个映射链接的名字（3） 在【地图】文本框下面有4 个图标按钮，分别是选择编辑箭头、矩形、圆形和多边形，这些图标的功能分别是调整热点区域，创建矩形、圆形和不规则多边形的热点区域。（4） 单击创建多边形热点区域的图标，然后用鼠标依次在选作映射图链接的几何图形外部轮廓线上依次单击，可定义一个多边形的热区，如图4-44 所示。（5） 如果用鼠标单击矩形或圆形图标，然后在选作映射图形的外部轮廓线上拖曳鼠标，可定义矩形或圆形的热区，（6） 当一个热区被选定后，图像的【属性】面板变成图像热点的【属性】面板，如图 4-44 所示。（7） 单击图像热点的【属性】面板中【链接】文本框右边的图标，选择当前热区链接的文件。或者直接在【链接】文本框中输入链接文件的路径和名称。（8） 在【目标】下拉列表框中设置链接的目标对象的显示方式。（9） 在【替代】文本框中输入所定义的热区的说明文字。在浏览网页时，鼠标指在热区上将会显示【替代】文本框中的说明文字。4、网页实例制作（1） 网页名为exa4.htm ，网页的背景图片为bg0040.gif，网页保存在My site文件夹中。（2） 在网页的合适位置上插入1 条水平线，这条水平线将网页分成两个部分。（3） 在网页的顶部区域输入标题文字“人生的伴侣知识的源泉”，用 HTML样式【标题 1】对其格式化，预览页面效果。（4） 在网页的中部区域插入导航条，导航条的6 个按钮对应的图片是a1.gif、a2.gif、a3.gif、, 、f2.gif、 f3.gif、f4.gif共 24 个。每个按钮可以链接一个 My site文件夹中的HTML文件（5） 在网页的合适位置上插入图片t4_1.gif、t4_2.gif、t4_3.gif。（6） 在网页的底部区域插入图片wyfy.jpg，并为该图片建立电子邮件链接。（7） 预览页面效果后，保存网页文件10 分钟20 分钟名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 45 页 - - - - - - - - - 第4 次课，学时2 教案编写时间实训题目使用表格、布局表格布局单元格、层、框架实训目的：使用表格、布局表格布局单元格、层、框架实训重点：实训难点：实训器材或实训环境：机房，软件环境实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配1、使用表格布局2、使用布局视图（1）创建网页名为exa51.htm 的文件，网页的背景图片为bg0040.gif ，网页文件保存在My site 文件夹中。（2） 在网页中创建800600 像素的布局表格，在网页顶部位置上插入1 个 80080 像素的布局单元格，在网页左边合适的位置上插入4 个 7979 像素的布局单元格，在网页右边合适的位置上插入1 个 170170 像素的布局单元格。（3）在网页的顶部区域的布局单元格中插入ch05 文件夹中的Flash 文件 shu.swf。（4）在网页左边插入的4 个布局单元格中，分别插入ch05 文件夹中的图片文件t5_1.gif 、t5_3.gif 、t5_4.gif 、t5_6.gif。每个图片与My site 文件夹中的一个HTML 文件建立超链接，被链接的HTML 文件在新窗口中打开。（5）在网页右边的布局单元格中，插入ch05 文件夹中的逐帧动画文件shu_1.gif 。（6）预览页面效果后，保存网页文件3、使用层制作具有下列要求的网页（1）页面的背景图片为bg0040.gif。（2）在页面合适的位置上插入4 个层，层的大小为150150 像素。（3） 在层中插入【鼠标经过图像】 ， 原始图片分别是文件夹img 中的 ps1.jpg、 ps4.jpg、ps7.jpg、ps8.jpg，翻转图片分别是文件夹img 中的 p1.jpg、p4.jpg、p7.jpg、p8.jpg。（4）创建【名称】为【标题1】的 HTML 样式，【应用到】为 “ 段落” 选项，【当应用时】 为“ 清除现有样式 ” ， 【字体】 为“ 方正舒体 ” ， 【大小】 为 7， 【颜色】 为#FFFF00，【样式】为 “ 粗体 ” 。（5）创建 2 个层，层中输入文字“ 书 精神的粮食 ” ，用 HTML 样式【标题1】分别格式化层中文字，并将下面1 个层中文字由黄色改为黑色。（6）将 2 个文字层略微错开叠放在一起，设计出文字阴影效果，（7）网页文件以exa52.htm 为名保存在本地站点My site 中。4、框架制作一个的网页页面，页面是框架结构，浏览时用鼠标单击页面左边的按钮时，在主框架 （MainFrame ）中显示不同网页页面，文件用 exa53.htm 为名保存在My site 文件夹中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 45 页 - - - - - - - - - 第5 次课，学时2 教案编写时间实训题目实训目的：实训重点：实训难点：实训器材或实训环境：实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配1、行为的应用设计制作一个符合下列要求的网页文件。（1） 在网页中创建2 个大小为10490 像素的层，在层Layer1 中插入 ch06 文件夹中的图片camp1.jpg，在层Layer2 插入ch06 文件夹中的带有说明文字的图片m1.jpg，如图 6-5 所示。（2） 隐藏层 Layer2。（3） 在浏览该页面时，只显示层Layer1 的图片 camp1.jpg。当鼠标指向该图片时，显示带有说明文字的图片m1.jpg； 移开鼠标时，隐藏带有说明文字的图片m1.jpg 2、时间轴的使用1、制作一个使图片文件bird.jpg 从屏幕左边移动到右边的动画2、用时间轴控制层的可见性：在 6.3.3 节小鸟动画的实例中，要在第 15 帧处隐藏动画对象，在第36 帧处显示对象，动画对象循环播放5 次后停止3、用时间轴控制图片替换制作一个Web 页面，页面上的四幅图片轮流显示，每隔2/3s 显示其中一幅图片4、用时间轴改变层的叠放次序制作一个Web 页面，页面上的3 幅图片轮流显示，每隔2/3s 显示其中一幅图片5、用时间轴改变层的大小制作一个网页页面，在页面的左边缓慢地画出红色线条，线条的宽度为5 像素3、综合实例在网页中创建一个2 行 2 列的布局表格，每个布局单元格的大小为150100 像素，4 个布局单元格中设置了4 幅【鼠标经过图像】 ，在网页中插入一个带有anniu.gif 图片的层，这个层围绕4 幅【鼠标经过图像】组成的矩形运动，当这个层在矩形的某一条边上运动时，相对应的1 幅【鼠标经过图像】就发生翻转。预览网页后，以exa6-8.htm 为文件名将文件保存在My site 文件夹中4、表单的制作在网页上创建一个网上书店服务问卷调查的表单，表单包含单选按钮、复选框、单行文本框、多行文本框、下拉式列表等表单元素，表单中的表单元素用表格定位，表单中的标题及标识文字名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 45 页 - - - - - - - - - 第6 次课，学时2 教案编写时间实训题目表单的制作实训目的：制作表单实训重点：实训难点：实训器材或实训环境：机房、软件环境实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配1、综合实例在网页中创建一个2 行 2 列的布局表格，每个布局单元格的大小为150100 像素，4 个布局单元格中设置了4 幅【鼠标经过图像】 ，在网页中插入一个带有anniu.gif 图片的层，这个层围绕4 幅【鼠标经过图像】组成的矩形运动，当这个层在矩形的某一条边上运动时，相对应的1 幅【鼠标经过图像】就发生翻转。预览网页后，以exa6-8.htm 为文件名将文件保存在My site 文件夹中2、表单的制作在网页上创建一个网上书店服务问卷调查的表单，表单包含单选按钮、复选框、单行文本框、多行文本框、下拉式列表等表单元素，表单中的表单元素用表格定位，表单中的标题及标识文字名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 45 页 - - - - - - - - - 第7 次课，学时2 教案编写时间实训题目VBScript 脚本语言基本应用实训目的：掌握 VBScript 脚本语言的应用实训重点：实训难点：实训器材或实训环境：机房， IIS ，网页制作软件实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 24 页，共 45 页 - - - - - - - - - 1、创建一个简单的ASP 页面 简单动态页面实例 2、求圆的面积 3、输入输出函数 输入、输出函数应用实例 !- Dim name name=InputBox( 您的正确的用户名是:,输入用户名 ) MsgBox 您是本网站的正式用户：&name 4、日期时间函数应用 日期和时间函数应用实例 为回车名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 25 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配 以下 4 句为显示数组d(i)的内容 5、条件循环语句 求分段函数的应用实例 =50 Then y=2*x+15 Response.Write 当 X=&CStr(x)&时，函数值Y=&CStr(y) Else y=2*x-19 Response.Write 当 X=&CStr(x)&时，函数值Y=&CStr(y) End If % 6、循环语句实例 判别随机数的奇偶性的应用实例 设置背景颜色 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 26 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 27 页，共 45 页 - - - - - - - - - 第8 次课，学时2 教案编写时间实训题目过程、对象实训目的：学生掌握过程和对象的使用实训重点：实训难点：实训器材或实训环境：实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 28 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配1、sub 过程实例 Sub 子程序应用实例 显示 Output 的值 2、Function 过程海伦公式求三角形面积 Function函数应用实例 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 29 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配3、对象的使用% Response.Redirect http:/ Response.Redirect mainmenu.asp theURL=http:/ Response.Redirect theURL % Session 用法举例 Dim Use_name,sex,age User_ name=卓群 字符串直接赋值给变量Sex=男 Session( name)=User_name 给 Session赋值Seasion(age)=age Response.Write 显示欢迎信息 % 4、表单传送数据名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 30 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 31 页，共 45 页 - - - - - - - - - 第9 次课，学时2 教案编写时间实训题目创建数据库、建立数据库连接实训目的：掌握数据库的创建和连接实训重点：数据库的连接实训难点：实训器材或实训环境：机房、网页制作软件、IIS 、数据库实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 32 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 33 页，共 45 页 - - - - - - - - - 数据库的设计连接实例在页面上显示数据库中的记录设计数据库，用ACCESS 创建数据库和表连接数据库 打开数据库 读取数据库%if rs.EOF and rs.BOF then EOF(表示光标在最后一条记录的后边）BOF（表示光标在第一条记录的前面) response.write( 暂时无文章 ) else response.write( 编号： &rs(bh) response.write( 名称 :&rs(mc) response.write( 价格 :&rs(zz) response.write() rs.movenext loop end if% 关闭数据库 读取部分信息%if rs.EOF and rs.BOF then EOF( 表示光标在最后一条记录的后边）BOF（表示光标在第一条记录的前面) response.write( 暂时无文章 ) else for i=1 to 3 response.write( 编号： &rs(bh) response.write( 名称 :&rs(mc) response.write( 价格 :&rs(zz) response.write() rs.movenext next end if% 50 分钟名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 34 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配用表格显示 编号： 名称： 用一个表格显示 编号： 名称： 50 分钟名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 35 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 36 页，共 45 页 - - - - - - - - - 第10 次课，学时2 教案编写时间实训题目建立用户登录系统实训目的：掌握建立用户登陆系统得制作方法实训重点：实训难点：实训器材或实训环境：机房实训方法：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 37 页，共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配系统功能与组成数据库设计实现用户登录功能实现新用户注册功能实现密码修改功能名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 38 页，共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析第11 次课，学时2 教案编写