《网站优化与开发》教案.docx
《《网站优化与开发》教案.docx》由会员分享，可在线阅读，更多相关《《网站优化与开发》教案.docx（71页珍藏版）》请在冰豆网上搜索。
《网站优化与开发》教案
教
师
工
作
本
《网站优化与开发》教案
2014-2015-2
教学进度表
专业：
多媒体技术课程：
网站优化与开发
班级：
2013级多媒体、印刷学期：
2014-2015-2任课教师：
周别
课时
课题及主要内容
课型
备注
1
2
1、HTML基础
2、HTML基本标记
讲授和实训
1
2
1、文字与段落
2、使用图像
讲授和实训
2
2
1、使用列表
2、使用表格
讲授和实训
2
2
1、建立超链接
2、添加多媒体
讲授和实训
3
2
1、框架的基本概念
2、设置框架集的属性
3、设置窗口属性
讲授和实训
3
2
1、浮动框架
2、创建框架链接
讲授和实训
4
2
1、表单标记
讲授和实训
4
2
1、插入表单对象
讲授和实训
5
2
1、菜单和列表
2、文本域标记、ID标记
讲授和实训
5
2
1、使用XHTML
讲授和实训
6
2
1、认识CSS
2、使用CSS
讲授和实训
6
2
1、字体属性
讲授和实训
7
2
1、颜色和背景属性
讲授和实训
7
2
1、段落属性
讲授和实训
8
2
1、外边距与内边距属性
讲授和实训
8
2
1、边框属性
复习串讲
周别
课时
课题及主要内容
课型
备注
9
2
1、定位属性
讲授和实训
9
2
1、列表属性
讲授和实训
10
2
1、光标属性
2、滤镜属性
讲授和实训
10
2
1、WEB标准与CSS布局
2、DIV+CSS布局
讲授和实训
11
2
1、使用CSS设计网站导航栏
讲授和实训
11
2
1、使用CSS设计表单样式
讲授和实训
12
2
1、字体及段落样式设计
讲授和实训
12
2
1、使用CSS设计图片样式
讲授和实训
13
2
1、使用CSS控制链接样式
讲授和实训
13
2
1、JavaScript简介
讲授和实训
14
2
1、JavaScript基本语法
讲授和实训
14
2
1、JavaScript的事件
讲授和实训
15
2
1、JavaScript内部对象
讲授和实训
15
2
复习知识点串讲
讲授
综合作业
1.第一次课教学设计：
XHTMLCSS基础知识与体验
1-1教案头
课次名称：
DIV+CSS+JavaScript
授课班级
2011级多媒体技术
课时
4
上课地点
机房
教学目标
能力目标
知识目标
1.能看懂Doctype和Head区代码含义；
2.能给HTML标签添加CSS样式
1.了解XHTML和CSS基础知识；
2.理解CSS基本思想与格式
2.熟悉在HTML中引入CSS的方式；
学生任务
任务1：
在页面中引入CSS样式；
任务2：
编写第一个HTML+CSS页面；
资料
参考教材：
网上相关教程。
资料：
◆图书馆相关书籍；
◆练习所需要的素材及源文件；
◆网上其它材料。
1-2教学设计
步骤
教学内容
教学方法手段
学生活动
时间分配
告知
1.本门课程的课程标准、授课计划及考核标准；
2.职业素质训导（纪律、座姿、课前准备工作及课后整理工作）
3.三大约定：
（1）上课不迟到早退，有事请假。
（2）不在教室内吃零食。
（3）上课不睡觉，不玩游戏，未经同意不上网。
4.本次课基本教学内容及成果展示
讲授法、演示法;
多媒体广播、网络
听讲、观看相关材料，授受并理解本单元项目的内容。
10分钟
讲授
一、XHTML和CSS基础知识
1.关于HTML和XHTML
HTML和XHTML都是由W3C组织（全球万维网联盟）制定的，它们是同一种标签语言的不同阶段。
HTML标准较宽松，易混乱，不符合标准化的发展趋势；XHTML是HTML的“严谨版”，对格式要求更规范。
主要区别：
（1）在XHTML中标记名称和属性名称必须小写；
（2）在XHTML中标记必须严格嵌套；
（3）在XHTML中标记必须封闭；
（4）在XHTML中空元素的标记也必须封闭；
（5）在XHTML中属性值用双引号括起来；
（6）在XHTML中属性值必须用完整形式；
2.文档类型
因为存在着HTML和XHTML的区别，所以在创建文件之初就应该选择对应的文档类型。
现在一般使用XHTML文档类型，包括“严格类型”和“过渡（transitional）类型”两种，其中“过渡类型”能兼容以前版本定义而在新版本已经废弃的标签和属性，一般建议使用“过渡类型”。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
以上语句声明了使用过渡类型文档。
3.语言编码
它标示文档的语言编码，这里的gb2312告诉浏览器，本文档采用简体中文gb2312编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。
不管采用哪种编码，页面包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码
4.HTML标签（标记）
（X）html是一种标签语言，标签在页面中都必须结束。
成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。
成对的标签：
{...}
{...}
{...}
{...}
{...}
......
单一的标签：
.......
按xhtml规范，标签必须用小写。
5.CSS基本思想和格式
CSS全称是CascadingStyleSheet，层叠样式表。
它是一种用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS出现的根本原因，就是解决HTML中内容与表现代码混杂在一起的情况，使HTML内容与表现形式分开来。
（X）HTML与CSS的关系就是“内容结构”与“表现形式”的关系，由（X）HTML确定网页的结构内容，由CSS来决定页面的表现形式。
h2{
font-family:
宋体;
font-size:
10pt;
color:
red;
}
CSS的基本思想就是首先指定对什么“对象”进行设置，然后指定对此对象的那个方面的“属性”进行设置，最后给出该设置的“值”。
的怪CSS样式表由3个基本部分组成，即：
对象（标签名称）、属性和属性值。
6.初试牛刀-Hello，Class
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
HelloClass
p{
color:
blue;
font-family:
Arial,宋体,sans-serif；
font-size:
10pt;
}
Hello,Class!
Welcometomyclass
Ihopeyousucceed