动态网页制作教学案Word格式.docx
《动态网页制作教学案Word格式.docx》由会员分享，可在线阅读，更多相关《动态网页制作教学案Word格式.docx（45页珍藏版）》请在冰豆网上搜索。
运用HTML常见元素
难点：
一些特殊元素的运用
4、教学过程
1、引入
打开网页设计作品，让学生们欣赏评价
同学们，大家觉得刚刚展示的网页设计作品怎么样呢？
运用了什么软件制作的呢？
采用了哪些技巧呢？
可以从哪些方面做得更好呢？
（学生们随机回答）
2、讲授新课
（1）HTML基础
a．网页与HTML
HTML是HyperTextMarkupLanguage的缩写，中文翻译为“超文本标记语言”，
是制作网页的最基本语言。
b．编写及显示HTML文件
使用任何一种文本编辑器来编写，如记事本、写字板等，也可使用任何一种编辑HTML文件的工具软件，如DW和FrontPage。
c.标签、元素和属性
HTML标签是由一对尖括号<
>
和标签名称组成。
标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”。
HTML元素是组成HTML文档的最基本的部件，它是用标签来表现的，一般“起始标签”表示元素的开始，“结束标签”表示元素的结束。
在元素的起始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：
<
标签名称属性名=“属性值”>
（2）HTML常见元素
基本结构元素：
{HTML元素、head元素、body元素}
常用块元素：
1、标题类
2、段落类
●p（段落）元素
●pre（原样显示文字）元素
●div（通用块）元素
3、通用属性
最常用的段落块元素：
●id（元素标识）属性
●title（提示）属性
●style（CSS样式）属性
●class（CSS分类）属性
（3）常用列表元素
ul、ol、li
3、巩固练习
操练课本1.1-1.3案例
五、教具，课件及挂图
所用的教室为多媒体实验室，因此所要板书的容及使用的工具均在计算机上用PPT课件进行演示。
六、作业及辅导
完成案例1.1-1.3
七、课后小结：
本节比较重要，学生掌握情况良好
2014-2015学年第1学期第1周星期4第3、4节2014年9月18日
第1章html基础及实训1
1、了解常见表格、行、表单、特殊元素等
2、通过基础知识的学习完成实训项目1
（1）常见表格元素
table、tr、td、th（表头）
（2）常用行元素
（3）表单元素
（4）一些特殊元素
表格、行、表单、特殊元素
实训项目1
四、教学过程
（1）上节课已经学习了表格的一部分元素，相信同学们都掌握啦，这节课我们接着学习常见的元素和一些特殊元素。
●img（图像）元素
●a（）元素
●span（通用行）元素
●sub（下标）
●sup（上标）元素
●b（粗体）
●i（斜体）
br（换行）元素
行元素总是与其前后其他元素保持在同一行中
表单控件元素用于收集用户输入信息
●input（输入框）元素
●select（下拉框）元素
●textarea（多行文本输入框）元素
label（表单控件名称）元素
fieldset（表单控件组）元素
注释元素
meta（描述网页信息）元素
doctype（文档类型的定义）与HTML文档的检验
特殊字符
完成实训1
根据实训1的完成情况，课上辅导项目
2014-2015学年第1学期第2周星期3第3、4节2014年9月24日
第2章CSS基础
1、掌握css基本语法2、了解css特点
1.图解CSS
2.CSS定义
3.CSS的特点
4.css基本语法
css基本语法和css基本特点
样式表的应用
5、教学过程
通过实例导入css应用的好处：
2、新课讲授
（1）CSS的定义
CSS是CascadingStyleSheets的缩写，中文为“层叠样式表”。
（2）CSS的特点
CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页容的位置及大小尺寸等属性。
（3）css样式表的类型
部、外部、元素中的样式表三种
在网页的标记中应用“样式”，时采用的是“层叠式”原则。
样式是由成对的属性名和属性值以冒号“：
”相间组成。
一系列的“样式”以分号“；
”相间组成为“样式表”。
（4）CSS中的颜色和长度定义
CSS中的颜色是由红、蓝、绿3种颜色组合而成的，每一种颜色用数字0至255表示。
（5）常见的样式属性
（6）定义样式表
对象1,对象2……{样式表}
部样式表：
是将定义样式表的容放在style元素中，并且设置type属性为text/css。
然后将style元素放在HTML文档的head元素中。
外部样式表：
放在一个文本文件中，一般都是以.css作为扩展名，然后在HTML文档的head元素中插入link元素，通过下属格式将外部样式表文件连接到HTML文档中。
linkrel="
stylesheet"
type="
text/css"
href="
外部样式表文件.css"
>
练习示例2-1、2-2、2-3
根据本次练习，课上答疑和辅导
2014-2015学年第1学期第2周星期4第3、4节2014年9月25日
第2章CSS基础实训
1、根据css基本特点和语法规则，应用css练习
2、通过实训项目2，提升css应用水平
按照实训项目2的要求完成实训任务
认识HTML语法结构难点：
掌握HTML基本标记的使用方法
展示实训项目2的作品，激趣导入。
（1）调整页面边距、间距、背景色、颜色
（2）加入图片，并调整图片的尺寸等
3、操练
请同学们按照实训2的操作步骤，以及提供的素材，完成网页设计。
所用的教室为多媒体实验室，教师需要演示，学生需要操练。
练习过程中，课上答疑和辅导
本节课是学生操作课，操作效果还不错！
2014-2015学年第1学期第3周星期3第3、4节2014年10月1日
第3章CSS实用技巧
1、了解css的常用技巧和设计原则
2、运用css进行网页布局设计
1、CSS的常用技巧
2、CSS用于网页布局设计
3、CSS用于菜单设计
4、CSS其他设计原则
CSS常用技巧
CSS其他设计原则用于网页布局
通过上节课的学习，同学们掌握了哪些CSS设计技巧呢？
（问答）
这节课，我们接着学习CSS常见的实用技巧
（1）CSS常用技巧
1.网页容的居中对齐
2.网页容的隐藏与显示
3.方框长度的计算
4.圆角边框
5.图片
6.定义外部样式表的选项
（2）CSS用于菜单设计
菜单设计的原则：
1.简单的导向菜单条
2.简单的标签菜单
3.推拉门式图片标签菜单
（3）CSS其他设计原则
1．有效地定义样式名
2．尽量使用CSS的简写方式
3．有效地控制边距和间距
4．不要定义缺省值
5．尽量使用已有的HTML元素
6．尽量组合定义样式
7．使用正确的Doctype
8．验证CSS
练习使用CSS各种设计规则
所用的教室为多媒体实验室，学生在软件上进行练习
本节课是HTML语言的核心基础，学生掌握效果较好
2014-2015学年第1学期第3周星期4第3、4节2014年10月2日
第3章CSS实用技巧实训
综合使用HTML和CSS技术
1、编写第三章中的实例源文件，并在浏览器中进行调试
2、修改排版容
掌握CSS综合使用技巧
通过第三章实训项目作品展示导入。
2、实验教学
同学们，本次实训课的要求有以下几点：
（1）需要将菜单栏改成简单的导向菜单
（2）网页的主要容区在中间
（3）设计左导向和右导向栏，宽度、背景和颜色。
按照步骤，练习完成项目
CSS实用技巧具有调整型，学生们的练习热情高。
2014-2015学年第1学期第4周星期3第3、4节2014年10月8日
第4章JavaScript简介
1、认识什么是Javascript
2、通过DW或FrontPage软
升级会员 