HTML+CSS网页设计与布局教案.docx
《HTML+CSS网页设计与布局教案.docx》由会员分享,可在线阅读,更多相关《HTML+CSS网页设计与布局教案.docx(38页珍藏版)》请在冰豆网上搜索。
![HTML+CSS网页设计与布局教案.docx](https://file1.bdocx.com/fileroot1/2022-12/14/7c7f3f38-2939-4370-9c6c-a3c0c18c34d5/7c7f3f38-2939-4370-9c6c-a3c0c18c34d51.gif)
HTML+CSS网页设计与布局教案
《HTML+CSS网页设计与布局》课程教案
授课教师:
授课班级:
地点:
周课时:
5课时
章节
内容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
HTML基础知识及常用标记
教学
目标
1)使学生了解网页设计的相关基础知识;
2)使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1)了解网页设计相关概念和网页的类型;
2)熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一、引入
1、相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用;
2、提出问题:
上过网吧?
有谁自学过网页设计?
听说过HTML或者CSS这两个概念吗?
3、
二、告知学生课堂任务
本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作;
三、逐步演示讲解分析教学内容
1、网站和网页的区别:
2、
(1)网页是Internet基本元素;
3、
(2)网站由网页组成;
4、静态网页和动态网页:
5、静态网页:
纯粹HTML语言格式的网页通常被称为静态网页,静态网页的后缀名通常为.htm、.html、.shtml、.xml。
6、动态网页:
许多人认为网页会动就是动态网页,这是个错误的观点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢了。
真正的动态网页是指实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。
也就是说,它是返回到了客户端上的网页。
例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
7、静态网页的特点:
8、
(1)内容相对稳定,容易被搜索引擎检索到;
9、
(2)没有数据库支持,在网站制作和维护方面工作量大;
10、(3)交互性差,在功能方面有很大的限制。
11、动态网页的特点:
12、
(1)以数据库技术为基础,可大大降低网站维护的工作量;
13、
(2)可实现更多的功能,如用户注册、新闻发布、在线留言等;
14、(3)不利于使用搜索引擎进行网站推广。
15、常见网页类型:
形象页、主页、栏目页、内页、新闻详细页等;
16、网页设计原则:
17、
(1)了解客户需求
18、
(2)遵循Web标准
19、(3)运用形式美法则
20、网页设计流程:
21、
(1)手绘效果图:
确定网页主题内容和风格
22、
(2)设计效果图:
搜集、整合设计所需素材
23、(3)版面编辑:
网页的制作与实现
24、(4)网页美化:
动画设计,网页测试和发布
25、网页设计的主要软件:
26、
(1)Photoshop
27、
(2)Dweamveawer
28、(3)Flash
29、(4)Firworks
30、HTML基础知识:
31、
(1)HTML概念:
HyperTextMarkupLanguage超文本标识语言;
32、
(2)HTML文档的编写方法:
用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成;
33、(3)网页文件命名:
首页文件名默认为:
或;
34、(4)HTML文件结构:
35、
36、
37、
38、
39、
40、HTML文件的正文
41、
42、
43、(5)用编辑器手工编写第一张网页;
44、学生实训及辅导;
45、Dreamweaver软件界面介绍:
46、
(1)软件面板组成及基本操作方法
47、
(2)软件首选参数设置
48、Dreamweaver站点创建:
49、站点->新建站点->设置站点名称->设置站点默认图像文件夹。
50、学生实训操作:
Dreamweaver站点创建与设置;
51、Dreamweaver创建第一个网页:
52、
(1)名称:
53、
(2)设置标题、输入文本、输入特殊字符
54、(3)页面属性设置
55、(4)预览网页
56、学生实训及辅导;
57、HTML常用标记:
58、
(1)标题标记:
主题文字
59、
(2)段落标记:
这里表示段落
60、(3)换行与注释:
、
--这里放注释-->
61、(4)粗体与斜体:
粗体、斜体
62、(5)删除线与下划线:
删除线、下划线
63、(6)上标与下标:
上标下标
64、学生实训及辅导;
65、字体标记:
66、
(1)字体大小:
字体大小
67、
(2)字体颜色:
字体颜色
68、(3)设置标题字体:
主题文字
69、(4)物理字体:
70、…,将字符设置成粗体。
71、…,将字符设置成斜体。
72、…,给字符增加下划线。
73、…,给字符增加删除线。
74、…,将字符设置成打字机字体。
75、…,将字符设置成上标字体。
76、…,将字符设置成下标字体。
77、(5)逻辑字体:
78、…强调文字。
79、…字体加重。
80、…
显示编程代码。
81、…显示示例文字。
82、…显示键盘按键文字。
83、…缩小文字。
84、…放大文字。
85、字体标记实例讲解;
86、学生实训及辅导;
四、课外作业
五、第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常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
八、引入
4、回顾上周所学内容:
上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作,重点介绍了HTML基础知识及常用标记;
5、提出问题:
网页中文字如何布局?
如何在网页中插入图像?
如何运用超级链接?
6、
九、告知学生课堂任务
本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。
一十、逐步演示讲解分析教学内容
87、换行控制:
文字一
、文字二
88、不换行控制:
89、文字对齐:
align="#"、
居中90、设置段落:
段落一
、
段落二
91、学生实训及辅导;
92、上周课外作业点评;
93、无序列表:
94、
98、有序列表:
99、
100、
- 表项一
101、
- 表项…
102、
103、欲格式化文本:
文字
、
文本104、计算机输出格式:
105、代码样式小型固定宽度字体显示的文本
106、代码样式固定宽度字体渲染
107、代码样式固定宽度字体渲染文本
108、代码样式斜体字渲染
109、学生实训及辅导;
110、在网页中插入图像:
111、图像无法显示时的提示信息:
112、控制图像的大小:
113、
114、设置边框:
115、
116、图像的链接:
117、
118、学生实训及辅导;
119、图像映射图:
120、文本与图像对齐:
121、学生实训及辅导;
122、最简单的文字超链:
文字链接
123、超链网页的打开方式:
_blank、_parent、_self、_top
124、链接的注释:
125、
126、设置图片链接:
127、设置锚点:
文章中的文字
128、邮箱地址链接:
129、
130、相对路径:
131、相对路径是指这个文件在所在的位置与其他文件或文件夹的关系;
132、绝对路径:
133、HTML绝对路径(absolutepath)指带域名的文件的完整路径。
134、学生实训及辅导;
一十一、课外作业
一十二、第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常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一十五、引入
7、回顾上周所学内容:
上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用;
8、提出问题:
什么是表单?
常见的表单有哪些?
如何在网页中使用表格?
9、
一十六、告知学生课堂任务
本次课所学习的主要内容是HTML表单和表格的标记应用。
一十七、逐步演示讲解分析教学内容
135、表单基本语法:
、属性action和method
136、文本框:
137、密码框:
138、单选框:
139、复选框:
140、按钮设置:
141、学生实训及辅导;
142、上周课外作业点评;
143、下拉表:
144、
145、
—设置下拉表选项-->
146、
147、
148、选项三
149、绝对路径
150、文本域:
151、表单应用实例讲解;
152、学生实训及辅导;
153、表格基本语法:
154、
155、
标签对表示表行156、
标签对表示表头 157、 | 标签对表示表元 158、跨多行表元: Rowspan 159、跨多列表元: colspan 160、表格内设置文字对齐: 161、对齐语法用align表示,后面接的值是left、center和right,分别代表向左、居中和向右对齐复选框 162、表格在网页中对齐: ; 163、学生实训及辅导; 164、表格应用实例讲解; 165、学生实训及辅导; 一十八、课外作业 一十九、第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常用标记的含义。 教学 方法 课堂讲授、案例讲解与指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 二十二、引入 10、回顾上周所学内容: 上周主要介绍了HTML表单和表格的标记应用方法,重点介绍了表单的应用实例; 11、提出问题: 框架网页如何创建? 如何使网页中的对象移动? 如何在网页中插入Flash、影片、声音? 12、 二十三、告知学生课堂任务 本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。 二十四、逐步演示讲解分析教学内容 166、框架的基本语法: 167、 168、 169、 170、 171、 172、 173、 174、框架垂直分栏: 175、垂直分栏是在 |