网页设计与制作教案29840

1、章节名称：网页设计入门基础课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求1. 了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及 技术2. 了解网页的基本构成及最简单的 html 代码3. 了解网页设计的流程重点了解网页设计的流程，掌握最基本的网页的构成及最简单的网页 html 代码难点掌握最基本的网页的构成及最简单的网页 html 代码教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版

2、社动态网页制作教程（第二版）刘梅彦 徐英慧 编著清华大学出版社教学过程环节一：结合 ppt 课件的内容，讲解网络和网页的基本知识。了解网页的分类， 网页运行的原理，介绍网页设计的工具，动态网页的技术。环节二：介绍网页的构成，并对一个网站进行实例分析说明。编写最简单的 html 代码。环节三：了解网页设计的流程主要有以下几个步骤：1. 网站规划2. 素材资源收集3. 选择开发工具4. 站点建立与规划5. 分模块进行网页设计6. 网页源代码测试与特效添加7. 申请域名与空间8. 网页源代码上传9. 定期的维护环节四： 对本节课的内容进行复习，让学生练习 html 的代码。并进行疑难解答章节名称：h

3、tml 基础与应用 1课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求了解 html 语言的基础知识，结构，掌握 html 语言设置网页的背景音乐，背景图 片，字体的方法。重点html 语言设置网页的背景音乐，图片，字体难点html 语言设置网页的方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习网页设计的基础知识，介

4、绍如何利用 dreamweaver 开发工具，记事 本编辑网页的源程序，介绍网页站点的创建及注意事项。环节二：讲解 html 语言的结构，特点，设置网页页面的背景音乐，图片，字体 1. 设置背景颜色2. 背景图片3. 背景音乐背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部 里，4. 标题字体 文字 # =1，2，3，4，5，6比如：今天是星期三，今天天气晴，温度 15-23 5.字体的大小，用于一般文字。 文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -#例子：今天天气真好！6. 字体颜色指定颜色 文字 # =#rrggbb 16 进制数码，或者是下 列预定义

5、色彩：black, olive, teal, red, blue, maroon, navy, gray, lime,fuchsia, white, green, purple, silver, yellow, aqua7. 客户端字体(font face) . #=客户端可获得的字体， 什么是客户端，通俗的讲，就是你的电脑，face=#就是从你的电脑获得的字体环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：html 基础与应用 2课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求了解 html 语言的跑马灯效果标签的运用，序列卷标标签的运用重

6、点html 语言的跑马灯效果标签及序列卷标的应用难点html 语言的跑马灯效果标签及序列卷标的应用教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习 html 语言中设置背景颜色，背景图片，音乐等标签的知识，介绍 html 语言的编写规范要求。环节二：讲解 html 语言的跑马灯效果标记，序列卷标标记的使用1.跑马灯效果该标记能实现

7、文字或图片的滚动效果。滚动文字主要参数：1 direction: 控制移动方向 , 可取 left, right, up, down 四个 值2 behavior: 移动方式,可取scroll(循环移动), slide(只走一圈)， alternate(来回移动)3 loop: 循环次数,不输入表示无限次循环4 scrollamount: 移动快慢,数值越大越快5 scrolldelay: 每移动一步之后的延时,单位是毫秒 height,width: 移动区域的高和宽,单位像素 bgcolor: 移动区域的背景色2.序列卷标该类型标记类似于 word 软件中的项目符号及编号，主要分为两种 （1

8、）无序标记无序序列就是序列各条目间无顺序关系姓名：吴小娟生日：1993/6/16星座：双子座运行的效果如下：lll姓名：吴小娟 生日：1993/6/16 星座：双子座其中为无序序列标记，每增加一个条目，就要添加一个还可以通过设置来改变条目前面的图标，属性可以是 disk（实 心圆）,square（方形）,circle（空心圆）（2）有序标记无序序列就是序列各条目间有顺序关系姓名：吴弘凯生日：1993/6/16星座：双子座运行的效果如下：1. 姓名：吴小娟2. 生日：1993/6/163. 星座：双子座其中为无序序列标记，每增加一个条目，就要添加一个还可以通过设置 来改变条目前面的编号，属性可以

9、设置为 1 （数字）、a（大写英文字母）、a（小写英文字母）、i（大写罗马字母）、i（小写 罗马字母）等五种。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：html 基础及应用 3课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求了解 html 语言的控制表格及其表项，框架重点html 语言的表格及其表项的标记使用，超链接标记，框架标记的使用难点掌握利用框架标记来设计页面教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设

10、计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习 html 语言中跑马灯效果标记，序列卷标的使用方法。 环节二：讲解 html 语言的表格标记，超链接标记，框架标记的使用 1. 表格标记. - 定义表格 .- 定义表行 .- 定义表头 .- 定义表元2.超链接标记超链接采用标记来实现，链接文件的路径有以下两种：绝对路径方式相对路径方式3.框架结构标记框窗实作在中，cols 表示左右分，rows 表示上下分。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。章节名称：

11、运用表格设计页面布局课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求了解网页中表格布局模式设计的方法重点了解网页中表格布局模式设计的方法难点了解网页中表格布局模式设计的方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习 html 语言中表格标记，超链接，框架的相关知识，讲解上次课布置 的作业。环节二：以一个蓝色空间网页

12、的设计为例，讲解采用表格布局模式设计网页的方 法。设计规范要求：多采用表格嵌套方式设计页面，少采用表格拆分的设计方法 环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：运用框架结构设计页面布局课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求了解网页中框架布局模式设计的方法重点掌握网页中框架布局模式设计的方法难点掌握网页中框架布局模式设计的方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰

13、,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习采用表格工具设计网页的方法，讲解上次课布置的作业。环节二：介绍框架结构在网页设计中的应用，以一个诗人作品简介网页的设计为 例，讲解采用框架布局模式设计网页的方法。设计技巧：框架中每个页面要单独保存命名，需要在超链接属性中设置显示在主 框架：target:blank。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：网页 css 样式基础课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握 css 样式的建立及使用的方法重点掌握 cs

14、s 样式的创建及使用的方法难点掌握 css 样式的创建及使用的方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习采用表格布局模式设计网页的方法，讲解上次课布置的作业。 环节二：讲解 css 样式表的基础知识，通过实例说明其应用的方法。1.css 基础知识css 是用于控制网页样式的一种标记语言，它以 html 为基础，扩展了 h

15、tml 的功能， 提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过 css，可以实现网页的样式信息与网页内容分离。2.css 样式的建立在 dreamweaver 软件中的 css 面板中新建 css 样式3.css 样式的类型主要有四种：（1）类选择器：可用于任何标签，名字需要自定义，以“.”开头。例子：通过 css 样式，设置字体大小与颜色。（2）id 选择器：针对设置了 id 属性的 html 标记，与类选择器类似，以“#”开 头。例子：通过 css 样式，设置指定 id 的表格边框（3） 标签选择器：标签也称标记，css 标签选择器就是针对 html 标签设

16、置 css 样 式。例如，h2 选择器就用于声明页面中所有标记的样式风格。（4） 复合内容选择器：同时影响两个或多个标签、类或 id 的复合规则，请选择 “复合内容（基于选择的内容）”选项并输入用于复合规则的选择器。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：网页 css 样式基础菜单制作 1课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握运用 css 样式设计网页菜单的方法重点掌握运用 css 样式设计网页菜单的方法难点掌握运用 css 样式设计网页菜单的方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1

17、. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习 css 样式表的基础知识，讲解上次课布置的作业。 环节二：通过一个网页菜单的制作实例，介绍 css 的设置技巧。1.通过设置 a 标签的 css 样式实现菜单的基本显示。通过设置 a 标签选择器的宽度高度来实现。2. 通过设置鼠标经过的 css 样式，来实现鼠标移动到某个菜单的背景颜色变化 通过 a:hover 符合选择器来实现。3. 在不同的浏览器下

18、运行这个网页，分析存在的问题。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：网页 css 样式基础菜单制作 2课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握运用 ul，li 标签及它们的 css 样式来设计网页菜单的方法重点掌握运用 ul，li 标签及它们的 css 样式来设计网页菜单的方法难点掌握运用 ul，li 标签及它们的 css 样式来设计网页菜单的方法 教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计

19、与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习上节课介绍的网页菜单的制作方法，讲解上次课布置的作业。 环节二：针对采用设置 a 标签 css 样式制作菜单的方法存在的问题，介绍采用 ul， li 标签的 css 样式设计网页菜单的制作实例，介绍 css 的设置技巧。网页菜单的设计步骤：1.通过 ul，li 标签创建网页菜单的基本内容。首页导读推荐版面推荐文章人气排名新开讨论区休闲娱乐常见问题2.通过设置 ul，li 标签选择器的 css 样式实现网页菜单的基本显示效果。 #navigation li

20、text-align:center; width:80px; height:32px;background:url(button1.jpg) repeat-x;float:left;3.通过设置 a:hover 复合内容选择器实现菜单的鼠标移动变换背景效果。#navigation li a:hovercolor:#ffffff;background:url(button2.jpg) no-repeat;环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。章节名称：网页 css 样式应用实例课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握 css 样

21、式综合运用方法重点掌握 css 样式综合运用方法难点掌握 css 样式综合运用方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习采用 ul，li 设计网页菜单的方法，讲解上次课布置的作业。环节二：讲解 css 样式表的两个应用实例，通过实例说明其中 css 的设置技巧。 1.无边框输入表格案例通过为表格单元格添加 css 样式，

22、设置样式的边框属性为无边框来实现。 table.formdata inputwidth:100px;padding:1px 3px 1px 3px;margin:0px;border:none; /* 输入框不要边框 */font-family:arial;2.鼠标经过行变色效果。这个效果需要结合 javascript 代码来实现。环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。章节名称：div+css 设计实例花店页面设计上课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握 div+css 设计网页的模式与技巧重点掌握 div+css 设计网页的

23、模式与技巧难点掌握 div+css 设计网页的模式与技巧教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习上节课介绍的 css 样式表的应用案例，讲解上次课布置的作业。 环节二：通过一个花店网页设计案例，讲解如何采用 div+css 的布局模式来设计 网页。设计步骤：1. 采用 div 创建网页的整体结构2. 在每个模块中再添加独立

24、的 div 模块，完善网页内容3. 通过对每个模块分别设置 css 样式表完成网页显示效果的设置。 环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：div+css 设计实例花店页面设计下课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握 div+css 设计网页的模式与技巧重点掌握 div+css 设计网页的模式与技巧难点掌握 div+css 设计网页的模式与技巧教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作

25、div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习采用 div+css 模式设计网页的方法，讲解上次课布置的作业。 环节二：让学生完成花店网页设计练习，疑难解答。章节名称：photoshop 设计网页课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握 photoshop 软件在网页设计中的运用重点掌握使用 photoshop 软件设计网页的方法难点利用切片工具对网页进行分割教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行

26、。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习采用表格布局模式设计网页的方法。环节二：介绍 photoshop 软件在网页设计中的应用，通过一个产品介绍网页的实 例说明设计的方法。photoshop 设计网页的方法：1.通过布局，色彩搭配，将草图设计的网页在计算机上以图片形式绘制出来。 2.对于设计好的图片形式的网页，通过 photoshop 软件的切片功能，将图片的网 页分割为各个部分模块，再导出为 web 格式的文件。环节三：完成课堂讲解的练习例题

27、，并疑难解答章节名称：网页设计中的动画flash 动画课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握网页制作中 flash 动画的设计方法技巧重点掌握网页制作中 flash 动画的设计方法技巧难点掌握网页制作中 flash 动画的设计方法技巧教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习 photoshop 软

28、件设计网页的方法，讲解上次课布置的作业。 环节二：介绍 flash 动画在网页中的应用，以网站首页光芒文字动画的制作为例， 介绍 flash 动画的设计方法。设计步骤：1. 创建动画文字内容，复制一份，并修改其颜色2. 添加遮罩所用的长方形条，设置其从第 1 帧到 100 帧移动的动画效果。3. 设置方形条为遮罩。4. 动画效果测试。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：网页设计实用工具介绍课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握几个常用的网页设计工具的使用方法重点掌握几个常用的网页设计工具的使用方法难点掌握几个常用的网页设计工具的使用方法教法学法1. 采

29、用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著清华大学出版社教学过程 环节一：复习采用 flash 制作网页动画的方法。环节二：介绍几个网页制作的实用工具，通过实例说明其应用的方法。 1.flashbannermaker 软件。能利用简单的设置，完成一个网页的 banner 动画2.firework 软件利用该工具，可以设计网页中的图标。环节三：完成课堂讲解的练习例题，并疑难解答章

30、节名称：javascript 语言基础 1课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握 javascript 程序设计的基础知识重点能运用 javascript 语言实现网页中的特定功能难点能运用 javascript 语言实现网页中的特定功能教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 环节一：复习网页设计几个常用工具的使用方法。清

31、华大学出版社环节二：讲解 javascript 程序设计的基础知识，通过实例说明其使用的方法。 1.javascript 程序的基本结构：在网页 html 代码中添加如下代码。2.javascript 基本语法（1） 变量命名：字母或下划线开头，字母数字下划线的组合。（2） 变量定义方式：以 var 变量名的方式定义。例如：var username;（3） 变量类型：整型，实型，布尔型，字符串等。（4） 运算符包括算术运算符、比较运算符，逻辑运算符等。（5）分支结构程序if，if.else 语句的使用3.以一个判断输入用户名和密码是否为空的 javascript 程序为例，介绍其使用 的方法。

32、环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：javascript 语言基础 2课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握 javascript 语言中循环程序的编写重点掌握 javascript 语言中循环程序的编写难点掌握 javascript 语言中循环程序的编写教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦

33、 徐英慧 编著 教学过程 清华大学出版社环节一：复习 javascript 程序的基础知识，讲解上次课的作业。环节二：讲解 javascript 程序设计的循环语句，通过实例说明其使用的方法。 1.for 语句格式：for（初始表达式；条件表达式；增量表达式） 语句集；功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体. 2.while 语句格式：while（条件） 语句集；说明：while 语句不断的测试一个条件，如果条件始终成立，则这个循环会一致持续 下去，直到条件不再成立为止。3.do while 语句格式：do 语句集； while（条件）；说明：dowhile 语句首先不管

34、 while 中的条件是否成立，总是先执行一次循环。完 成第一次循环后，dowhile 语句才试图判定 while 中的条件，如果成立，就继续 循环；如果条件不成立，就跳到循环后的第一条语句去执行。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：javascript 应用实例跑马灯效果与时钟显示效果课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握运用 javascript 语言实现特定功能的能力重点掌握运用 javascript 语言实现特定功能的能力难点掌握运用 javascript 语言实现特定功能的能力教法学法1. 采用教授法进行教

35、学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著清华大学出版社教学过程 环节一：复习 javascript 语言循环语句的知识，讲解上次课布置的作业。 环节二：通过网页设计中一个跑马灯效果和一个时钟显示效果的例子说明如何根 据需求设计 javascript 程序。1.跑马灯效果。功能效果：实现图片的滚动显示。2.时钟显示效果。功能效果：将系统的时间以特定的格式显示在一个输入文本框中。扩展练习：考试

36、倒计时功能的设计。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：javascript 应用实例 2在线考试网页设计课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握 javascript 程序综合设计的能力重点掌握 javascript 程序综合设计的能力难点掌握 javascript 程序综合设计的能力教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编

37、著 教学过程 清华大学出版社环节一：复习上节课介绍的 javascript 设计案例。环节二：通过一个考试系统页面的设计案例，分析 javascript 程序设计的流程与 技巧，提高学生编写 javascript 程序的熟练度。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：javascript 应用实例 3kindeditor 文本编辑器的应用课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握基于 javascript 开发的工具的使用方法重点掌握基于 javascript 开发的一个 kindeditor 文本编辑工具的使用方法难点掌握基于 javascript 开发的一个

38、 kindeditor 文本编辑工具的使用方法 教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习上节课介绍的 javascript 设计案例。环节二：讲解一个基于 javascript 库开发的在线文本编辑工具 kindeditor 的应 用。应用步骤：1. 将 kindeditor 目录下的 目录下的 bin 目录中的 litj

39、son.dll 拷贝到整 个项目的 bin 目录下。2. 点击项目的引用，右键，将 litjson.dll 添加到项目的引用中。3. 参考 文件夹中的 demo.aspx 文件，将对应的内容添加到需要添加文本 编辑器的 aspx 动态页面。4. 在页面中的 html 代码 body 中添加一个 textbox 控件，id 名称为 editor_id。 5.接下来，在页面代码的第一行修改以下，添加 validaterequest=”false” 6.在 a 文件夹中的 file_manager_json.ashx 和 upload_json.ashx 文件中 修改图片，视频等文件的上传路径。7.

40、要使用 editor_id 控件的使用就跟普通 textbox 的使用方法一致环节三：完成课堂讲解的练习例题，并疑难解答章节名称：jquery 程序设计基础课堂类型：理论 实训 练习 测试学时安排：2 课时目的要求掌握 jquery 程序的基础知识及使用方法重点掌握 jquery 程序的基础知识及使用方法难点掌握 jquery 程序的基础知识及使用方法教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编 清华大学出版社动态网页制作教

41、程（第二版）刘梅彦 徐英慧 编著 教学过程 清华大学出版社环节一：复习上节课介绍的 kindeditor 工具的使用方法。环节二：介绍 jquery 库的基础知识及使用方法。1. jquery 是一个基于 javascript 开发的库，代码简洁，功能强大。2. jquery 下载后，将其拷贝到网站目录下，在页面的 html 代码中添加如下引用： 3. 页面载入载入方法：添加如下代码$(document).ready(function() ); 4.引用方式，有三种：（1）标记语法：$(“p”)（2）类语法：$(“.myclass”) （3）id语法：$(“#btndemo”)简写$(func

42、tion();环节三：介绍一个点击文字消失的案例说明 jquery 的使用。 $(document).ready(function()$(p).click(function()$(this).hide();););if you click on me, i will disappear.环节四：完成课堂讲解的练习例题，并疑难解答章节名称：jquery 应用实例课堂类型：理论 实训 练习 测试 学时安排：2 课时目的要求掌握 jquery 程序综合应用的能力重点掌握 jquery 程序综合应用的能力难点掌握 jquery 程序综合应用的能力教法学法1. 采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。1. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料dreamweaver cs5 网页设计与制作div+css 版 吴丰,丁欣 主编清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著清华大学出版社教学过程环节一：复习上节课介绍的 jquery 的基础知识。环节二：通过一个窗口淡入淡出的案例，分析 jquery 程序设计的流程与技巧。 环节三：介绍 jquery ui 库的基本情况，并