《HTML+CSS网页设计与布局》教案.docx
- 文档编号:5238893
- 上传时间:2022-12-14
- 格式:DOCX
- 页数:32
- 大小:27.27KB
《HTML+CSS网页设计与布局》教案.docx
《《HTML+CSS网页设计与布局》教案.docx》由会员分享,可在线阅读,更多相关《《HTML+CSS网页设计与布局》教案.docx(32页珍藏版)》请在冰豆网上搜索。
《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》课程教案
授课教师:
授课班级:
地点:
周课时:
5课时
章节
内容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
HTML基础知识及常用标记
教学
目标
1)使学生了解网页设计的相关基础知识;
2)使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1)了解网页设计相关概念和网页的类型;
2)熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一、引入
1、相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用;
2、提出问题:
上过网吧?
有谁自学过网页设计?
听说过HTML或者CSS这两个概念吗?
二、告知学生课堂任务
本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作;
三、逐步演示讲解分析教学内容
1、网站和网页的区别:
(1)网页是Internet基本元素;
(2)网站由网页组成;
2、静态网页和动态网页:
静态网页:
纯粹HTML语言格式的网页通常被称为静态网页,静态网页的后缀名通常为.htm、.html、.shtml、.xml。
动态网页:
许多人认为网页会动就是动态网页,这是个错误的观点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢了。
真正的动态网页是指实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。
也就是说,它是返回到了客户端上的网页。
例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
静态网页的特点:
(1)内容相对稳定,容易被搜索引擎检索到;
(2)没有数据库支持,在网站制作和维护方面工作量大;
(3)交互性差,在功能方面有很大的限制。
动态网页的特点:
(1)以数据库技术为基础,可大大降低网站维护的工作量;
(2)可实现更多的功能,如用户注册、新闻发布、在线留言等;
(3)不利于使用搜索引擎进行网站推广。
3、常见网页类型:
形象页、主页、栏目页、内页、新闻详细页等;
4、网页设计原则:
(1)了解客户需求
(2)遵循Web标准
(3)运用形式美法则
5、网页设计流程:
(1)手绘效果图:
确定网页主题内容和风格
(2)设计效果图:
搜集、整合设计所需素材
(3)版面编辑:
网页的制作与实现
(4)网页美化:
动画设计,网页测试和发布
6、网页设计的主要软件:
(1)Photoshop
(2)Dweamveawer
(3)Flash
(4)Firworks
7、HTML基础知识:
(1)HTML概念:
HyperTextMarkupLanguage超文本标识语言;
(2)HTML文档的编写方法:
用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成;
(3)网页文件命名:
首页文件名默认为:
index.htm或index.html;
(4)HTML文件结构:
HTML文件的正文
(5)用编辑器手工编写第一张网页;
8、学生实训及辅导;
9、Dreamweaver软件界面介绍:
(1)软件面板组成及基本操作方法
(2)软件首选参数设置
10、Dreamweaver站点创建:
站点->新建站点->设置站点名称->设置站点默认图像文件夹。
11、学生实训操作:
Dreamweaver站点创建与设置;
12、Dreamweaver创建第一个网页:
(1)名称:
index.html
(2)设置标题、输入文本、输入特殊字符
(3)页面属性设置
(4)预览网页
13、学生实训及辅导;
14、HTML常用标记:
(1)标题标记:
(2)段落标记:
这里表示段落
(3)换行与注释:
、
--这里放注释-->
(4)粗体与斜体:
粗体、斜体
(5)删除线与下划线:
删除线、下划线
(6)上标与下标:
上标下标
15、学生实训及辅导;
16、字体标记:
(1)字体大小:
(2)字体颜色:
(3)设置标题字体:
(4)物理字体:
…,将字符设置成粗体。
…,将字符设置成斜体。
…,给字符增加下划线。
…,给字符增加删除线。
…,将字符设置成打字机字体。
…,将字符设置成上标字体。
…,将字符设置成下标字体。
(5)逻辑字体:
…强调文字。
…字体加重。
…
显示编程代码。
…显示示例文字。
…显示键盘按键文字。
…缩小文字。
…放大文字。
17、字体标记实例讲解;
18、学生实训及辅导;
四、课外作业
第3章上机实践。
五、课堂小结
本次课主要内容:
1、网页设计基础知识;
2、Dreamweaver基本使用方法;
3、HTML基础知识及常用标记;
约15分钟
约35分钟
约20分钟
约30分钟
约20分钟
约20分钟
约20分钟
约30分钟
约20分钟
约30分钟
约20分钟
约20分钟
约40分钟
学生理解
学生熟记
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师:
授课班级:
地点:
周课时:
5课时
章节
内容
文字布局
插入图像
超级链接
教学
目标
3)使学生熟练掌握HTML常用标记的基本使用方法;
4)使学生掌握HTML常用标记各种属性的含义和设置方法。
重点
难点
3)掌握各种HTML常用标记的基本使用方法;
4)熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
六、引入
3、回顾上周所学内容:
上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作,重点介绍了HTML基础知识及常用标记;
4、提出问题:
网页中文字如何布局?
如何在网页中插入图像?
如何运用超级链接?
七、告知学生课堂任务
本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。
八、逐步演示讲解分析教学内容
19、换行控制:
文字一
、文字二
20、不换行控制:
21、文字对齐:
align="#"、
22、设置段落:
段落一
、段落二
23、学生实训及辅导;
24、上周课外作业点评;
25、无序列表:
- 表项一
- 表项…
26、有序列表:
- 表项一
- 表项…
27、欲格式化文本:
文字、
28、计算机输出格式:
代码样式小型固定宽度字体显示的文本
代码样式固定宽度字体渲染
代码样式固定宽度字体渲染文本
代码样式斜体字渲染
29、学生实训及辅导;
30、在网页中插入图像:
31、图像无法显示时的提示信息:
32、控制图像的大小:
33、设置边框:
34、图像的链接:
35、学生实训及辅导;
36、图像映射图:
37、文本与图像对齐:
38、学生实训及辅导;
39、最简单的文字超链:
40、超链网页的打开方式:
_blank、_parent、_self、_top
41、链接的注释:
42、设置图片链接:
43、设置锚点:
44、邮箱地址链接:
">作者的邮箱 45、相对路径: 相对路径是指这个文件在所在的位置与其他文件或文件夹的关系; 46、绝对路径: HTML绝对路径(absolutepath)指带域名的文件的完整路径。 47、学生实训及辅导; 九、课外作业 第6章上机实践。 一十、课堂小结 本次课主要内容: 1、HTML文字布局; 2、HTML插入图像; 3、HTML超级链接。 约10分钟 约30分钟 约30分钟 约40分钟 约20分钟 约20分钟 约30分钟 约30分钟 约20分钟 约30分钟 约30分钟 约30分钟 学生理解 学生实践 学生实践 学生实践 学生实践 总结 后记 《HTML+CSS网页设计与布局》课程教案 授课教师: 授课班级: 地点: 周课时: 5课时 章节 内容 表单的使用 插入表格 教学 目标 5)使学生熟练掌握HTML常用标记的基本使用方法; 6)使学生掌握HTML常用标记各种属性的含义和设置方法。 重点 难点 5)掌握各种HTML常用标记的基本使用方法; 6)熟记各种HTML常用标记的含义。 教学 方法 课堂讲授、案例讲解与指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 一十一、引入 5、回顾上周所学内容: 上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用; 6、提出问题: 什么是表单? 常见的表单有哪些? 如何在网页中使用表格? 一十二、告知学生课堂任务 本次课所学习的主要内容是HTML表单和表格的标记应用。 一十三、逐步演示讲解分析教学内容 48、表单基本语法:
49、文本框:
50、密码框:
51、单选框:
52、复选框:
53、按钮设置:
54、学生实训及辅导;
55、上周课外作业点评;
56、下拉表:
—设置下拉表选项-->
绝对路径
57、文本域:
58、表单应用实例讲解;
59、学生实训及辅导;
60、表格基本语法:
61、跨多行表元:
Rowspan
62、跨多列表元:
colspan
63、表格内设置文字对齐:
对齐语法用align表示,后面接的值是left、center和right,分别代表向左、居中和向右对齐复选框
64、表格在网页中对齐:
65、学生实训及辅导;
66、表格应用实例讲解;
67、学生实训及辅导;
一十四、课外作业
第8章上机实践。
一十五、课堂小结
本次课主要内容:
1、表单的使用;
2、插入表格;
3、表格应用实例;
约10分钟
约30分钟
约40分钟
约30分钟
约20分钟
约20分钟
约40分钟
约30分钟
约40分钟
约20分钟
约40分钟
学生理解
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师:
授课班级:
地点:
周课时:
5课时
章节
内容
网页框架
对象移动属性
多媒体对象应用
教学
目标
7)使学生熟练掌握HTML常用标记的基本使用方法;
8)使学生掌握HTML常用标记各种属性的含义和设置方法。
重点
难点
7)掌握各种HTML常用标记的基本使用方法;
8)熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一十六、引入
7、回顾上周所学内容:
上周主要介绍了HTML表单和表格的标记应用方法,重点介绍了表单的应用实例;
8、提出问题:
框架网页如何创建?
如何使网页中的对象移动?
如何在网页中插入Flash、影片、声音?
一十七、告知学生课堂任务
本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。
一十八、逐步演示讲解分析教学内容
68、框架的基本语法:
69、框架垂直分栏:
垂直分栏是在