网页)设计与制作教案_第1页
网页)设计与制作教案_第2页
网页)设计与制作教案_第3页
网页)设计与制作教案_第4页
网页)设计与制作教案_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

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

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

4、weaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体1. 设置背景颜色  <body bgcolor="red">2. 背景图片<body backgroud"bg9.gif">3. 背景音乐  背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部 <head></head>里， <bgsound src="background_sound.mid" loo

5、p="-1">4. 标题字体<h#> 文字 </h#>  # =1，2，3，4，5，6  比如：<h1>今天是星期三，今天天气晴，温度15°-23°</h1>5.字体的大小，用于一般文字。  <font size=#> 文字</font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#  例子：<font size=7>今天天气真好！</font>6. 字体颜色 指定颜色 <font colo

6、r=#> 文字 </font> # ="#rrggbb" 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua7. 客户端字体(Font Face)  <font face="#, #, ., #"> . </font> #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face="#

7、"就是从你的电脑获得的字体环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：html基础与应用2课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解html语言的跑马灯效果标签的运用，序列卷标标签的运用重 点Html语言的跑马灯效果标签及序列卷标的应用难 点Html语言的跑马灯效果标签及序列卷标的应用教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教

8、程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习HTML语言中设置背景颜色，背景图片，音乐等标签的知识，介绍HTML语言的编写规范要求。环节二：讲解html语言的跑马灯效果标记，序列卷标标记的使用1.跑马灯效果该标记能实现文字或图片的滚动效果。<MARQUEE direction="up" width="100" height="100" bgcolor="#ccffcc" scrollamount="2">滚动文字</MARQUEE> 主要参数：

9、direction: 控制移动方向,可取"left", "right", "up", "down"四个值 behavior: 移动方式,可取"scroll"(循环移动), "slide"(只走一圈)，"alternate"(来回移动) loop: 循环次数,不输入表示无限次循环 scrollamount: 移动快慢,数值越大越快 scrolldelay: 每移动一步之后的延时,单位是毫秒 height,width: 移动区域的高和宽,单位像素 bgcolo

10、r: 移动区域的背景色2.序列卷标该类型标记类似于Word软件中的项目符号及编号，主要分为两种（1）无序标记无序序列就是序列各条目间无顺序关系<UL><LI>姓名：吴小娟</LI><LI>生日：1993/6/16</LI><LI>星座：双子座</LI></UL>运行的效果如下：l 姓名：吴小娟l 生日：1993/6/16l 星座：双子座其中<UL>为无序序列标记，每增加一个条目，就要添加一个<LI>还可以通过设置<UL type=”属性”>来改变条目前面的图标，属

11、性可以是Disk（实心圆）,Square（方形）,Circle（空心圆）（2）有序标记无序序列就是序列各条目间有顺序关系<OL><LI>姓名：吴弘凯<LI>生日：1993/6/16<LI>星座：双子座</OL>运行的效果如下：1. 姓名：吴小娟2. 生日：1993/6/163. 星座：双子座其中<OL>为无序序列标记，每增加一个条目，就要添加一个<LI>还可以通过设置<OL type=”属性”>来改变条目前面的编号，属性可以设置为1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）

12、、i（小写罗马字母）等五种。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：html基础及应用3课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解Html语言的控制表格及其表项，框架重 点Html语言的表格及其表项的标记使用，超链接标记，框架标记的使用难 点掌握利用框架标记来设计页面教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英

13、慧 编著 清华大学出版社 教学过程环节一：复习HTML语言中跑马灯效果标记，序列卷标的使用方法。环节二：讲解html语言的表格标记，超链接标记，框架标记的使用1. 表格标记 <table>.</table> - 定义表格 <tr> .</tr>- 定义表行 <th> .</th>- 定义表头 <td> .</td>- 定义表元2.超链接标记超链接采用<a></a>标记来实现，链接文件的路径有以下两种：<a href="/

14、c|/www/text1.htm">绝对路径方式<a href="text1.htm">相对路径方式3.框架结构标记<HTML><HEAD><TITLE>框窗实作</TITLE></HEAD><FRAMESET COLS="120,*" > <FRAME SRC="a.htm" NAME="1"><FRAME SRC="b.htm" NAME="2">

15、</FRAMESET> </HTML> 在<FRAMESET>中，COLS表示左右分，ROWS表示上下分。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：运用表格设计页面布局课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解网页中表格布局模式设计的方法重 点了解网页中表格布局模式设计的方法难 点了解网页中表格布局模式设计的方法教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制

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

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

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

19、网页的方法，讲解上次课布置的作业。环节二：讲解CSS样式表的基础知识，通过实例说明其应用的方法。1. CSS基础知识CSS是用于控制网页样式的一种标记语言，它以HTML为基础，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过CSS，可以实现网页的样式信息与网页内容分离。2. CSS样式的建立在Dreamweaver软件中的CSS面板中新建CSS样式3. CSS样式的类型主要有四种：（1） 类选择器：可用于任何标签，名字需要自定义，以“.”开头。例子：通过CSS样式，设置字体大小与颜色。（2） ID选择器：针对设置了ID属性的HTML标记，与类选

20、择器类似，以“#”开头。例子：通过CSS样式，设置指定ID的表格边框（3） 标签选择器：标签也称标记，CSS标签选择器就是针对Html标签设置CSS样式。例如，h2选择器就用于声明页面中所有<h2>标记的样式风格。（4） 复合内容选择器：同时影响两个或多个标签、类或 ID 的复合规则，请选择“复合内容（基于选择的内容）”选项并输入用于复合规则的选择器。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：网页CSS样式基础菜单制作1课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握运用CSS样式设计网页菜单的方法重 点掌握运用CSS样式

21、设计网页菜单的方法难 点掌握运用CSS样式设计网页菜单的方法教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习CSS样式表的基础知识，讲解上次课布置的作业。环节二：通过一个网页菜单的制作实例，介绍CSS的设置技巧。1. 通过设置a标签的css样式实现菜单的基本显示。通过设置a标签选择器的宽度高度来实现。2. 通过设置鼠标经过的CSS样式，

22、来实现鼠标移动到某个菜单的背景颜色变化通过a:hover符合选择器来实现。3. 在不同的浏览器下运行这个网页，分析存在的问题。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：网页CSS样式基础菜单制作2课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法重 点掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法难 点掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别

23、辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习上节课介绍的网页菜单的制作方法，讲解上次课布置的作业。环节二：针对采用设置a标签CSS样式制作菜单的方法存在的问题，介绍采用UL，Li标签的CSS样式设计网页菜单的制作实例，介绍CSS的设置技巧。网页菜单的设计步骤：1. 通过UL，LI标签创建网页菜单的基本内容。<ul id="navigation"><li><a href="#&qu

24、ot;>首页导读</a></li><li><a href="#">推荐版面</a></li><li><a href="#">推荐文章</a></li><li><a href="#">人气排名</a></li><li><a href="#">新开讨论区</a></li><li><a

25、 href="#">休闲娱乐</a></li><li><a href="#">常见问题</a></li></ul>2. 通过设置UL，LI标签选择器的CSS样式实现网页菜单的基本显示效果。#navigation litext-align:center; width:80px; height:32px;background:url(button1.jpg) repeat-x;float:left;3. 通过设置a:hover复合内容选择器实现菜单的鼠标移动变换背景效果

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

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

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

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

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

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

32、计的网页在计算机上以图片形式绘制出来。2. 对于设计好的图片形式的网页，通过Photoshop软件的切片功能，将图片的网页分割为各个部分模块，再导出为web格式的文件。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：网页设计中的动画Flash动画课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握网页制作中Flash动画的设计方法技巧重 点掌握网页制作中Flash动画的设计方法技巧难 点掌握网页制作中Flash动画的设计方法技巧教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver

33、CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习Photoshop软件设计网页的方法，讲解上次课布置的作业。环节二：介绍Flash动画在网页中的应用，以网站首页光芒文字动画的制作为例，介绍Flash动画的设计方法。设计步骤：1. 创建动画文字内容，复制一份，并修改其颜色2. 添加遮罩所用的长方形条，设置其从第1帧到100帧移动的动画效果。3. 设置方形条为遮罩。4. 动画效果测试。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：网页设计实用工具介绍课堂类型：理论 实训 练习 测试学时安

34、排：2课时目的要求掌握几个常用的网页设计工具的使用方法重 点掌握几个常用的网页设计工具的使用方法难 点掌握几个常用的网页设计工具的使用方法教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习采用Flash制作网页动画的方法。环节二：介绍几个网页制作的实用工具，通过实例说明其应用的方法。1. Flashbannermaker软件。能利用简单的

35、设置，完成一个网页的Banner动画2. Firework软件利用该工具，可以设计网页中的图标。环节三：完成课堂讲解的练习例题，并疑难解答章节名称：Javascript语言基础1课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JavaScript程序设计的基础知识重 点能运用JavaScript语言实现网页中的特定功能难 点能运用JavaScript语言实现网页中的特定功能教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编

36、清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习网页设计几个常用工具的使用方法。环节二：讲解Javascript程序设计的基础知识，通过实例说明其使用的方法。1.Javascript程序的基本结构：在网页Html代码中添加如下代码<script type="text/Javascript"> <!- document.write("这是Javascript！采用直接插入的方法！"); /-Javascript结束-> </script>。2. Javascript基本语

37、法（1） 变量命名：字母或下划线开头，字母数字下划线的组合。（2） 变量定义方式：以var 变量名的方式定义。例如：var username;（3） 变量类型：整型，实型，布尔型，字符串等。（4） 运算符包括算术运算符、比较运算符，逻辑运算符等。（5） 分支结构程序IF，IF.Else语句的使用3. 以一个判断输入用户名和密码是否为空的Javascript程序为例，介绍其使用的方法。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：Javascript语言基础2课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JavaScript语言中循环程序

38、的编写重 点掌握JavaScript语言中循环程序的编写难 点掌握JavaScript语言中循环程序的编写教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习Javascript程序的基础知识，讲解上次课的作业。环节二：讲解Javascript程序设计的循环语句，通过实例说明其使用的方法。1. for 语句格式：for（初始表达式；条件表达

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

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

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

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

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

44、 教学过程环节一：复习上节课介绍的JavaScript设计案例。环节二：讲解一个基于Javascript库开发的在线文本编辑工具kindeditor的应用。应用步骤：1. 将kindeditor目录下的目录下的bin目录中的LitJSON.dll拷贝到整个项目的bin目录下。2. 点击项目的引用，右键，将LitJSON.dll添加到项目的引用中。3. 参考文件夹中的demo.aspx文件，将对应的内容添加到需要添加文本编辑器的aspx动态页面。4. 在页面中的HTML代码Body中添加一个TextBox控件，ID名称为editor_id。5. 接下来，在页面代码的第一行修改以下，添加Valid

45、ateRequest=”False”6. 在A文件夹中的file_manager_json.ashx和upload_json.ashx文件中修改图片，视频等文件的上传路径。7. 要使用editor_id控件的使用就跟普通TextBox的使用方法一致环节三：完成课堂讲解的练习例题，并疑难解答章节名称：JQuery程序设计基础课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JQuery程序的基础知识及使用方法重 点掌握JQuery程序的基础知识及使用方法难 点掌握JQuery程序的基础知识及使用方法教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自

46、主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社 教学过程环节一：复习上节课介绍的Kindeditor工具的使用方法。环节二：介绍JQuery库的基础知识及使用方法。1. JQuery是一个基于Javascript开发的库，代码简洁，功能强大。2. JQuery下载后，将其拷贝到网站目录下，在页面的HTML代码中添加如下引用：<script type="text/javascript" src="./scri

47、pt/jquery.js"></script>3. 页面载入载入方法：添加如下代码$(document).ready(function() );à简写$(function();4. 引用方式，有三种：（1）标记 语法：$(“p”)（2）类 语法：$(“.myclass”)（3）ID 语法：$(“#btnDemo”)环节三：介绍一个点击文字消失的案例说明JQuery的使用。<script type="text/javascript" src="jquery.js"></script><sc

48、ript type="text/javascript"> $(document).ready(function() $("p").click(function() $(this).hide(); ););</script><body><p>If you click on me, I will disappear.</p></body>环节四：完成课堂讲解的练习例题，并疑难解答章节名称：JQuery应用实例课堂类型：理论 实训 练习 测试学时安排：2课时目的要求掌握JQuery程序综合应用的

49、能力重 点掌握JQuery程序综合应用的能力难 点掌握JQuery程序综合应用的能力教法学法1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2. 练习采用学生自主安排，教师给与个别辅导的方式进行。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学出版社动态网页制作教程（第二版）刘梅彦 徐英慧 编著 清华大学出版社教学过程环节一：复习上节课介绍的JQuery的基础知识。环节二：通过一个窗口淡入淡出的案例，分析JQuery程序设计的流程与技巧。环节三：介绍JQuery UI库的基本情况，并通过一个日期选择器环节三：完成课堂讲解的练习例题，并

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

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论