网页设计与制作教案

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

2、英慧 编著 清华大学教学过程环节一：结合PPT课件的容，讲解网络和网页的根本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。环节二：介绍网页的构成，并对一个进展实例分析说明。编写最简单的html代码。 环节三：了解网页设计的流程 主要有以下几个步骤：一. 规划二. 素材资源收集三. 选择开发工具四. 站点建立与规划五. 分模块进展网页设计六. 网页源代码测试与特效添加七. 申请域名与空间八. 网页源代码上传九. 定期的维护环节四： 对本节课的容进展复习，让学生练习html的代码。并进展疑难解答章节名称：html根底与应用1课堂类型：理论 实训 练习 测试学时安排：2课

3、时目的要求了解html语言的根底知识，构造，掌握html语言设置网页的背景音乐，背景图片，字体的方法。重 点Html语言设置网页的背景音乐，图片，字体难 点Html语言设置网页的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习网页设计的根底知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创立及考前须知。环节二：

4、讲解html语言的构造，特点，设置网页页面的背景音乐，图片，字体1. 设置背景颜色 2. 背景图片3. 背景音乐 背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部 里， 4. 标题字体 文字 # =1，2，3，4，5，6 比方：今天是星期三，今天天气晴，温度15-235.字体的大小，用于一般文字。 文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例子：今天天气真好！6. 字体颜色 指定颜色 文字 # =#rrggbb 16 进制数码，或者是以下预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, L

5、ime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua7. 客户端字体(Font Face) . #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face=#就是从你的电脑获得的字体环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：html根底与应用2课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解html语言的跑马灯效果标签的运用，序列卷标标签的运用重 点Html语言的跑马灯效果标签及序列卷标的应用难 点Html语言的跑马灯效果标签及序列卷标的应用教法学法1.采用教授法进展

6、教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习HTML语言中设置背景颜色，背景图片，音乐等标签的知识，介绍HTML语言的编写规要求。环节二：讲解html语言的跑马灯效果标记，序列卷标标记的使用1.跑马灯效果该标记能实现文字或图片的滚动效果。滚动文字 主要参数： direction: 控制移动方向,可取left, right, up, down四个值 behavior: 移动方式

7、,可取scroll(循环移动), slide(只走一圈)，alternate(来回移动) loop: 循环次数,不输入表示无限次循环 scrollamount: 移动快慢,数值越大越快 scrolldelay: 每移动一步之后的延时,单位是毫秒 height,width: 移动区域的高和宽,单位像素 bgcolor: 移动区域的背风光2.序列卷标该类型标记类似于Word软件中的工程符号及编号，主要分为两种1无序标记无序序列就是序列各条目间无顺序关系：吴小娟生日：1993/6/16星座：双子座运行的效果如下：吴小娟生日：1993/6/16星座：双子座其中为无序序列标记，每增加一个条目，就要添加一

8、个还可以通过设置来改变条目前面的图标，属性可以是Disk实心圆,Square方形,Circle空心圆2有序标记无序序列就是序列各条目间有顺序关系：吴弘凯生日：1993/6/16星座：双子座运行的效果如下：吴小娟生日：1993/6/16星座：双子座其中为无序序列标记，每增加一个条目，就要添加一个还可以通过设置来改变条目前面的编号，属性可以设置为1数字、A大写英文字母、a小写英文字母、I大写罗马字母、i小写罗马字母等五种。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：html根底及应用3课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解Html语

9、言的控制表格及其表项，框架重 点Html语言的表格及其表项的标记使用，超标记，框架标记的使用难 点掌握利用框架标记来设计页面教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习HTML语言中跑马灯效果标记，序列卷标的使用方法。环节二：讲解html语言的表格标记，超标记，框架标记的使用1. 表格标记. - 定义表格 .- 定义表行 .- 定义表头 .- 定义表

10、元2.超标记超采用标记来实现，文件的路径有以下两种：绝对路径方式相对路径方式3.框架构造标记框窗实作 在中，COLS表示左右分，ROWS表示上下分。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：运用表格设计页面布局课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解网页中表格布局模式设计的方法重 点了解网页中表格布局模式设计的方法难 点了解网页中表格布局模式设计的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DI

11、V+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习HTML语言中表格标记，超，框架的相关知识，讲解上次课布置的作业。环节二：以一个蓝色空间网页的设计为例，讲解采用表格布局模式设计网页的方法。设计规要求：多采用表格嵌套方式设计页面，少采用表格拆分的设计方法环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：运用框架构造设计页面布局课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解网页中框架布局模式设计的方法重 点掌握网页中框架布局模式设计的方法难 点掌握网页中框架布局模式设计的方法教法学法

12、1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习采用表格工具设计网页的方法，讲解上次课布置的作业。环节二：介绍框架构造在网页设计中的应用，以一个诗人作品简介网页的设计为例，讲解采用框架布局模式设计网页的方法。设计技巧：框架中每个页面要单独保存命名，需要在超属性中设置显示在主框架：target:blank。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次

13、课容，步骤课后作业。章节名称：网页CSS样式根底 课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握CSS样式的建立及使用的方法重 点掌握CSS样式的创立及使用的方法难 点掌握CSS样式的创立及使用的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习采用表格布局模式设计网页的方法，讲解上次课布置的作业。环节二：讲解CSS样式表的根底知识，通过

14、实例说明其应用的方法。CSS根底知识CSS是用于控制网页样式的一种标记语言，它以HTML为根底，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过CSS，可以实现网页的样式信息与网页容别离。CSS样式的建立在Dreamweaver软件中的CSS面板中新建CSS样式CSS样式的类型主要有四种：类选择器：可用于任何标签，名字需要自定义，以.开头。例子：通过CSS样式，设置字体大小与颜色。ID选择器：针对设置了ID属性的HTML标记，与类选择器类似，以#开头。例子：通过CSS样式，设置指定ID的表格边框标签选择器：标签也称标记，CSS标签选择器就是针对

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

16、导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习CSS样式表的根底知识，讲解上次课布置的作业。环节二：通过一个网页菜单的制作实例，介绍CSS的设置技巧。通过设置a标签的css样式实现菜单的根本显示。通过设置a标签选择器的宽度高度来实现。通过设置鼠标经过的CSS样式，来实现鼠标移动到*个菜单的背景颜色变化通过a:hover符合选择器来实现。在不同的浏览器下运行这个网页，分析存在的问题。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章

17、节名称：网页CSS样式根底菜单制作2课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法重 点掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法难 点掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习上节课介绍的网页菜单的制

18、作方法，讲解上次课布置的作业。环节二：针对采用设置a标签CSS样式制作菜单的方法存在的问题，介绍采用UL，Li标签的CSS样式设计网页菜单的制作实例，介绍CSS的设置技巧。网页菜单的设计步骤：通过UL，LI标签创立网页菜单的根本容。首页导读推荐版面推荐文章人气排名新开讨论区休闲娱乐常见问题通过设置UL，LI标签选择器的CSS样式实现网页菜单的根本显示效果。#navigation lite*t-align:center; width:80p*; height:32p*;background:url(button1.jpg) repeat-*;float:left;通过设置a:hover复合容选择

19、器实现菜单的鼠标移动变换背景效果。#navigation li a:hovercolor:#FFFFFF;background:url(button2.jpg) no-repeat;环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：网页CSS样式应用实例课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握CSS样式综合运用方法重 点掌握CSS样式综合运用方法难 点掌握CSS样式综合运用方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5

20、网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习采用UL，LI设计网页菜单的方法，讲解上次课布置的作业。环节二：讲解CSS样式表的两个应用实例，通过实例说明其中CSS的设置技巧。无边框输入表格案例通过为表格单元格添加css样式，设置样式的边框属性为无边框来实现。table.formdata inputwidth:100p*;padding:1p* 3p* 1p* 3p*;margin:0p*;border:none;/* 输入框不要边框 */font-family:Arial;鼠标经过行变色效果。这个效果需要结合

21、Javascript代码来实现。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：DIV+CSS设计实例花店页面设计上课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握DIV+CSS设计网页的模式与技巧重 点掌握DIV+CSS设计网页的模式与技巧难 点掌握DIV+CSS设计网页的模式与技巧教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著

22、清华大学 教学过程环节一：复习上节课介绍的CSS样式表的应用案例，讲解上次课布置的作业。环节二：通过一个花店网页设计案例，讲解如何采用DIV+CSS的布局模式来设计网页。设计步骤：采用Div创立网页的整体构造在每个模块中再添加独立的Div模块，完善网页容通过对每个模块分别设置CSS样式表完成网页显示效果的设置。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：DIV+CSS设计实例花店页面设计下课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握DIV+CSS设计网页的模式与技巧重 点掌握DIV+CSS设计网页的模式与技巧难 点掌握DIV+CSS设

23、计网页的模式与技巧教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习采用DIV+CSS模式设计网页的方法，讲解上次课布置的作业。环节二：让学生完成花店网页设计练习，疑难解答。章节名称：Photoshop设计网页课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握Photoshop软件在网页设计中的运用重 点掌握使用Photoshop软件设计网页的方

24、法难 点利用切片工具对网页进展分割教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习采用表格布局模式设计网页的方法。环节二：介绍Photoshop软件在网页设计中的应用，通过一个产品介绍网页的实例说明设计的方法。Photoshop设计网页的方法：通过布局，色彩搭配，将草图设计的网页在计算机上以图片形式绘制出来。对于设计好的图片形式的网页，通过Photosh

25、op软件的切片功能，将图片的网页分割为各个局部模块，再导出为web格式的文件。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：网页设计中的动画Flash动画课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握网页制作中Flash动画的设计方法技巧重 点掌握网页制作中Flash动画的设计方法技巧难 点掌握网页制作中Flash动画的设计方法技巧教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦

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

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

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

29、实例说明其使用的方法。1.Javascript程序的根本构造：在网页Html代码中添加如下代码 。Javascript根本语法变量命名：字母或下划线开头，字母数字下划线的组合。变量定义方式：以var 变量名的方式定义。例如：var username;变量类型：整型，实型，布尔型，字符串等。运算符包括算术运算符、比拟运算符，逻辑运算符等。分支构造程序IF，IF.Else语句的使用以一个判断输入用户名和密码是否为空的Javascript程序为例，介绍其使用的方法。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：Javascript语言根底2课堂类型：理论 实

30、训 练习 测试学时安排：2课时目的要求掌握JavaScript语言中循环程序的编写重 点掌握JavaScript语言中循环程序的编写难 点掌握JavaScript语言中循环程序的编写教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习Javascript程序的根底知识，讲解上次课的作业。环节二：讲解Javascript程序设计的循环语句，通过实例说明其使用的

31、方法。for 语句格式：for初始表达式；条件表达式；增量表达式 语句集；功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体.while 语句格式： while条件 语句集；说明： while语句不断的测试一个条件，如果条件始终成立，则这个循环会一致持续下去，直到条件不再成立为止。do while 语句格式： do 语句集； while条件；说明： dowhile语句首先不管while中的条件是否成立，总是先执行一次循环。完成第一次循环后，dowhile语句才试图判定while中的条件，如果成立，就继续循环；如果条件不成立，就跳到循环后的第一条语句去执行。 环节三：完成课堂讲解的练习

32、例题，并疑难解答环节四：复习本次课容，步骤课后作业。章节名称：Javascript应用实例跑马灯效果与时钟显示效果课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握运用JavaScript语言实现特定功能的能力重 点掌握运用JavaScript语言实现特定功能的能力难 点掌握运用JavaScript语言实现特定功能的能力教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大

33、学 教学过程环节一：复习JavaScript语言循环语句的知识，讲解上次课布置的作业。环节二：通过网页设计中一个跑马灯效果和一个时钟显示效果的例子说明如何根据需求设计JavaScript程序。跑马灯效果。功能效果：实现图片的滚动显示。时钟显示效果。功能效果：将系统的时间以特定的格式显示在一个输入文本框中。扩展练习：考试倒计时功能的设计。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：Javascript应用实例2在线考试网页设计课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JavaScript程序综合设计的能力重 点掌握JavaScript程序综合设计的能力难 点掌握Java

34、Script程序综合设计的能力教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习上节课介绍的JavaScript设计案例。环节二：通过一个考试系统页面的设计案例，分析JavaScript程序设计的流程与技巧，提高学生编写JavaScript程序的熟练度。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：Javascript应用实例3kindeditor文

35、本编辑器的应用课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握基于JavaScript开发的工具的使用方法重 点掌握基于JavaScript开发的一个kindeditor文本编辑工具的使用方法难 点掌握基于JavaScript开发的一个kindeditor文本编辑工具的使用方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习上节课介绍的Jav

36、aScript设计案例。环节二：讲解一个基于Javascript库开发的在线文本编辑工具kindeditor的应用。应用步骤：将kindeditor目录下的目录下的bin目录中的LitJSON.dll拷贝到整个工程的bin目录下。点击工程的引用，右键，将LitJSON.dll添加到工程的引用中。参考文件夹中的demo.asp*文件，将对应的容添加到需要添加文本编辑器的asp*动态页面。在页面中的HTML代码Body中添加一个Te*tBo*控件，ID名称为editor_id。接下来，在页面代码的第一行修改以下，添加ValidateRequest=False在A文件夹中的file_manager_

37、json.ash*和upload_json.ash*文件中修改图片，视频等文件的上传路径。要使用editor_id控件的使用就跟普通Te*tBo*的使用方法一致环节三：完成课堂讲解的练习例题，并疑难解答章节名称：JQuery程序设计根底课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JQuery程序的根底知识及使用方法重 点掌握JQuery程序的根底知识及使用方法难 点掌握JQuery程序的根底知识及使用方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作

38、DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学 教学过程环节一：复习上节课介绍的Kindeditor工具的使用方法。环节二：介绍JQuery库的根底知识及使用方法。JQuery是一个基于Javascript开发的库，代码简洁，功能强大。JQuery下载后，将其拷贝到目录下，在页面的HTML代码中添加如下引用：页面载入载入方法：添加如下代码$(document).ready(function() );简写$(function();引用方式，有三种：1标记 语法：$(p)2类 语法：$(.myclass)3ID 语法：$(#btnDemo)环节三：介

39、绍一个点击文字消失的案例说明JQuery的使用。 $(document).ready(function() $(p).click(function() $(this).hide(); ););If you click on me, I will disappear.环节四：完成课堂讲解的练习例题，并疑难解答章节名称：JQuery应用实例课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JQuery程序综合应用的能力重 点掌握JQuery程序综合应用的能力难 点掌握JQuery程序综合应用的能力教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安

40、排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学教学过程环节一：复习上节课介绍的JQuery的根底知识。环节二：通过一个窗口淡入淡出的案例，分析JQuery程序设计的流程与技巧。环节三：介绍JQuery UI库的根本情况，并通过一个日期选择器环节三：完成课堂讲解的练习例题，并疑难解答章节名称：表单处理课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握网页设计中表单的使用方法重 点掌握网页设计中几种常用的表单控件的使用难 点掌握表单的使用技巧教法学法1.采用

41、教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版梅彦 徐英慧 编著 清华大学教学过程环节一：复习上节课介绍的JQuery的应用案例。环节二：通过一个用户注册的页面设计案例，介绍表单及文本框、单项选择按钮、复选框、下拉框、按钮等控件的使用。表单的数据提交方式：1post方式：通过Request.Form方式接收数据 2get方式：通过Request.QueryString方式接收页面传递的数据环节三：完成课堂讲解的练习例题，并疑难解答章节名称：Spry控件创立选项卡式网页课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握Spry控件创立选项卡式网页的方法重 点掌握Spry控件创立选项卡式网页的方法难 点掌握Spry控件创立选项卡式网页的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导