第十四讲使用CSS美化网页.docx
- 文档编号:10670638
- 上传时间:2023-02-22
- 格式:DOCX
- 页数:6
- 大小:17.37KB
第十四讲使用CSS美化网页.docx
《第十四讲使用CSS美化网页.docx》由会员分享,可在线阅读,更多相关《第十四讲使用CSS美化网页.docx(6页珍藏版)》请在冰豆网上搜索。
第十四讲使用CSS美化网页
第十四讲使用CSS美化网页
授课日期
班级名称
授课地点
教学课题
第十四讲使用CSS美化网页
课 时
6学时
教学目的
(1)掌握CSS样式表的基本语法和定义位置。
(2)掌握标签样式、高级样式、类样式的定义方法。
(3)掌握样式的编辑方法。
(4)掌握如何使用CSS样式表美化页面。
知识目标
(1)CSS样式表的基本语法和定义位置。
(2)标签样式、高级样式、类样式的定义方法。
(3)样式的编辑方法。
(4)使用CSS样式表美化页面。
能力目标
(1)利用CSS更好来美化页面
素质目标
培养学生的创新能力与独立思考能力,并使其具有分析问题、解决问题的能力。
重 点
(1)标签样式、高级样式、类样式的定义与应用
难 点
(1)使用CSS样式表美化页面
课 型
讲授型+操作型
教学方法
任务驱动法、分组讨论法、理论实践一体化
教学手段
多媒体教学
教 参
中国青年出版社《DreamweaverMX2004完美网页设计》
教学环节
时间安排
1.复习提问:
常用表单对象有哪些?
分别实现什么功能?
5
2.情境设置,项目引入
情境设置:
BZ旅行社新推出了“山岳游”的旅游项目,请你为其设计制作一个宣传“山岳游”的网页,并使用CSS布局与美化。
通过具体情境引入本次课要学的“使用CSS美化网页”,并展示项目最终效果网页。
5
3.教学目标说明:
介绍本次课的项目要求、项目目标、项目重点难点。
10
4.项目资讯,发放资料
简要介绍项目制作所需的主要知识及操作方法;
将学习资料以PPT及视频动画的形式发给学生。
20
5.角色扮演,形成方案
每组学生既模拟客户又模拟网站设计公司,既负责向下一组提出客户需求,又负责为上一组设计制作网页;
组长(项目经理)负责向组员(网页设计师)讲述客户需求,组员集思广益,产生完成项目的初步方案。
30
6.方案展示,确定目标
各项目经理将讨论后的方案进行展示,各组组员可做补充说明;
教师与其他组成员点评,经改进后最终确定可实施的、能够达成知识和技能目标的工作方案。
30
7.任务分解,实战操练
教师将项目分解为多个任务:
任务1:
使用Div+CSS布局网页
任务2:
创建页面布局样式
任务3:
美化页面元素
任务4:
插入Div标签对页面进行布局
任务5:
新建导航栏代码片段、表单代码片段和表格代码片段
任务6:
在页面各个区块中输入文字或插入页面元素
每组成员按照客户需求分步进行设计制作,教师巡视指导。
针对学生中普遍存在的问题利用教学广播讲解演示;针对个别问题,进行个别指导。
110
8.成果展示,考核评价
由小组观摩评选出一个优秀设计作品进行成果展示。
介绍过程中要求说明设计思路及制作过程中遇到的问题,如何解决问题,同时其他组成员也可提出问题,让设计者解释设计所用的相关技术及特点;
依据项目评价表对作品进行自我评价、小组评价和教师评价,挖掘作品优点,并指出问题所在,给出具体改进及修改意见;
评选出“最佳美工设计”、“最佳网页制作”、“最佳组织协作”、“最佳员工”等奖项。
35
9.总结归纳,引申提高
首先提问学生总结,让学生谈本项目的收获;
教师对本次课的实际意义、重点、难点、容易出错处等及时进行总结。
并针对项目的不足之处,进行引申和提高。
小结:
Div+CSS是当前非常流行的符合WEB标准的布局方式,它的优点很多。
本章通过“泰山游”网页的实际布局讲述了Div+CSS布局方式的使用。
重点要掌握各种选择器的使用场合、常用的CSS规则属性和DIV+CSS布局方法。
今后还要通过不断的实践掌握DIV+CSS布局方式的使用技巧。
20
10.布置作业,举一反三
(1)基础作业:
继续改进作品;
填写项目总结报告;
布置下次课任务。
(2)提高作业:
使用CSS布局与美化“泰山游”网页
5
总计
270
新授内容
1.CSS的概念
2.CSS样式表的应用举例
3.CSS样式表的基本语法
(1)CSS样式表的定义位置
CSS样式定义在HEAD内
CSS样式嵌入BODY内部
在独立的外部文件中定义
(2)CSS样式表的定义形式
定义标签样式、定义高级样式、定义类样式
4.使用CSS美化页面
(1)新建网页
(2)建立标签样式
建立样式、应用样式
(3)建立用于表格标题文本的类样式
建立样式、应用样式、保存网页
(4)建立实现图文混排效果的样式
建立样式1、应用样式、建立样式2
(5)建立实现特殊表格边框效果的样式
建立样式、应用样式
5.建立高级样式
6.应用CSS滤镜制作文字特效
7.编辑样式
8.使用范例样式
9.应用外部样式
课堂实践
1.操作要求
(1)打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13.html”。
(2)在该网页的HEAD部分添加以下定义CSS样式的代码。
--
.STYLE1{font-family:
"隶书";
font-size:
36px;}
.STYLE2{font-family:
"楷体";
font-size:
16px;
color:
#0000FF;}
-->
然后在标题文字和介绍文字中分别应用CSS样式STYLE1、STYLE2,代码如下所示。
浏览网页13.html,观察其效果。
(3)定义一个名为“mystyle1.css”的CSS样式文件,该样式文件的属性设置与前述的内部样式表相同。
(4)打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13_1.html”,在该网页文档中链接外部样式文件“mystyle1.css”。
浏览网页13_1.html,观察其效果。
2.效果展示
疑难解析
问题1:
如何使网页具有“首行缩进”功能
问题2:
CSS的三种用法在同一个网页文档中可以混用吗?
课外拓
展实践
为“快乐e游”网站使用CSS布局与美化“庐山游”网页
课后评析
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第十四 使用 CSS 美化 网页
![提示](https://static.bdocx.com/images/bang_tan.gif)