htmlcss网设计与布局》教案.docx
- 文档编号:29653117
- 上传时间:2023-07-25
- 格式:DOCX
- 页数:37
- 大小:35.40KB
htmlcss网设计与布局》教案.docx
《htmlcss网设计与布局》教案.docx》由会员分享,可在线阅读,更多相关《htmlcss网设计与布局》教案.docx(37页珍藏版)》请在冰豆网上搜索。
htmlcss网设计与布局》教案
ThedocumentwaspreparedonJanuary2,2021
《HTMLCSS网设计与布局》教案
《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)网页文件命名:
首页文件名默认为:
index.htm或index.html;
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)名称:
index.html
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、提出问题:
网页中文字如何布局如何在网页中插入图像如何运用超级链接
八、告知学生课堂任务
本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。
九、逐步演示讲解分析教学内容
87、换行控制:
文字一
、文字二
88、不换行控制:
89、文字对齐:
align="#"、
90、设置段落:
段落一
、段落二
91、学生实训及辅导;
92、上周课外作业点评;
93、无序列表:
94、
- 表项一
- 表项…
95、
96、
97、有序列表:
98、
- 表项一
- 表项…
99、
100、
101、欲格式化文本:
文字、
102、计算机输出格式:
103、代码样式小型固定宽度字体显示的文本
104、代码样式固定宽度字体渲染
105、代码样式固定宽度字体渲染文本
106、代码样式斜体字渲染
107、学生实训及辅导;
108、在网页中插入图像:
109、图像无法显示时的提示信息:
110、控制图像的大小:
111、
112、设置边框:
113、
114、图像的链接:
115、学生实训及辅导;
116、图像映射图:
117、文本与图像对齐:
118、学生实训及辅导;
119、最简单的文字超链:
120、超链网页的打开方式:
_blank、_parent、_self、_top
121、链接的注释:
122、设置图片链接:
123、设置锚点:
124、邮箱地址链接:
125、相对路径:
相对路径是指这个文件在所在的位置与其他文件或文件夹的关系;
126、绝对路径:
127、HTML绝对路径(absolutepath)指带域名的文件的完整路径。
128、学生实训及辅导;
十、课外作业
十一、第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常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
十三、引入
6、回顾上周所学内容:
上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用;
7、提出问题:
什么是表单常见的表单有哪些如何在网页中使用表格
十四、告知学生课堂任务
本次课所学习的主要内容是HTML表单和表格的标记应用。
十五、逐步演示讲解分析教学内容
129、表单基本语法:
、属性action和method130、文本框:
131、密码框:
132、单选框:
133、复选框:
134、按钮设置:
135、学生实训及辅导;
136、上周课外作业点评;
137、下拉表:
138、
139、
—设置下拉表选项-->
140、
141、
142、
143、绝对路径
144、文本域:
145、表单应用实例讲解;
146、学生实训及辅导;
147、表格基本语法:
148、
149、
150、
151、
152、跨多行表元:
Rowspan
153、跨多列表元:
colspan
154、表格内设置文字对齐:
155、对齐语法用align表示,后面接的值是left、center和right,分别代表向左、居中和向右对齐复选框
156、表格在网页中对齐:
157、学生实训及辅导;
158、表格应用实例讲解;
159、学生实训及辅导;
十六、课外作业
十七、第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常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
十九、引入
8、回顾上周所学内容:
上周主要介绍了HTML表单和表格的标记应用方法,重点介绍了表单的应用实例;
9、提出问题:
框架网页如何创建如何使网页中的对象移动如何在网页中插入Flash、影片、声音
二十、告知学生课堂任务
本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。
二十一、逐步演示讲解分析教学内容
160、框架的基本语法:
161、
162、
163、
164、
165、
166、 167、 168、框架垂直分栏: 169、垂直分栏是在
170、框架水平分栏:
171、水平分栏的语法用rows表示
172、设置不可调节框架大小:
noresize
173、学生实训及辅导;
174、上周课外作业点评;
175、浏览器不支持框架:
176、设置框架边框:
177、设置滚动条:
178、设置滚动条在是里面,用scrolling属性
179、导航框架:
180、导航框架是在网页框架的中加入name属性,表示该的名称,然后通过用标记的链接,并用target的属性值等于的名称;
181、内联框架:
182、内联框架存在
的单个HTML文件中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容,叫做浮动框架也称内联框架;183、学生实训及辅导;
184、框架应用实例讲解;
185、学生实训及辅导;
186、移动属性基本语法:
187、文字的移动设置:
188、图片移动的设置:
189、文本移动的方向:
190、文本的滚动循环;
191、文本的移动速度:
scrollamount设置移动的速度
192、学生实训及辅导;
193、网页多媒体的基本语法:
194、隐藏面板的设置;
195、对齐方式:
196、align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom
197、学生实训及辅导;
198、移动对象应用实例讲解;
199、多媒体对象应用实例讲解;
200、学生实训及辅导;
二十二、课外作业
二十三、第11章上机实践。
二十四、课堂小结
本次课主要内容:
1、网页框架;
2、对象移动属性;
3、多媒体对象应用。
约10分钟
约20分钟
约30分钟
约30分钟
约10分钟
约20分钟
约20分钟
约40分钟
约20分钟
约20分钟
约10分钟
约20分钟
约30分钟
约40分钟
学生理解
学生实践
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师:
授课班级:
地点:
周课时:
5课时
章节
内容
CSS基础知识
CSS字体设置
教学
目标
9)使学生熟练掌握CSS常用样式的创建方法;
10)使学生掌握CSS常用样式各种属性的含义和设置方法。
重点
难点
9)掌握各种CSS常用样式的基本使用方法;
10)熟记各种CSS常用样式的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
二十五、引入
10、回顾上周所学内容:
上周主要介绍了HTML网页框架和多媒体对象标记,重点介绍了HTML对象移动属性设置方法;
11、提出问题:
什么是CSSCSS有什么用如何创建和使用CSS
二十六、告知学生课堂任务
本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。
二十七、逐步演示讲解分析教学内容
201、CSS相关基础知识;
202、CSS文件链接方式:
(1)内联定义:
内联定义即是在对象的标记内,使用对象的style属性定义适用其的样式表属性。
链入内部CSS:
(2)链接外部CSS:
203、CSS在浏览器兼容性:
现在浏览器市场的主流浏览器主要是InternetExplorer(简称IE)和MozillaFirefox(简称FF),网页中的CSS因两个浏览器支持不同,所以对同一代码会显示不同的效果,那么为了达到网页的风格,有时要注意哪个浏览器要写的CSS属性支持如何。
如果某一属性只有一个浏览器支持,那么另一浏览器对这属性代码就不起作用。
204、CSS选择符:
CSS选择符就是CSS样式的名字,选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头,选择符在CSS中可分成多种,在本小节中只介绍常用的CSS选择符:
HTML标签选择符、ID选择符和CLASS(类选择符)选择符。
205、CSS伪类和伪元素:
伪类:
伪类选择符是基于一组预定义性质的选择符,HTML元素可以占有这些预定义性质。
实际上这些性质与class属性的功能是相同的,因此在CSS术语中,它们被称作伪类。
在对应这些伪类的标记中,不存在真正的class属性,相反,它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态。
206、CSS常用单位:
207、em:
(em,元素的字体的高度)。
208、ex:
(x-height,字母"x"的高度)。
209、px:
(像素,相对于屏幕的分辨率)。
210、绝对长度单位:
211、in:
(英寸,1英寸=2.54厘米)。
212、cm:
(厘米,1厘米=10毫米)。
213、mm:
(毫米,1米=1000毫米)。
pt:
(点,1点=1/72英寸)。
pc:
(帕,1帕=12点)。
214、上周课外作业点评;
215、学生实训及辅导;
216、字体和字体颜色:
font:
font-style||font-variant||font-weight||font-size||line-height||font-family
217、字体大小:
Font-size,后面可接的参数值有:
xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length
218、字体重量:
Font-weight:
normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
219、行距:
line-height:
#;
220、字体类型:
Font-family:
fontname;
221、行距:
line-height:
#;
222、间距与间隔:
223、word-spacing:
normal|长度单位、letter-spacing:
normal|length
224、字体应用实例讲解;
225、学生实训及辅导;
二十八、课外作业
二十九、第16章上机实践。
三十、课堂小结
本次课主要内容:
1、CSS基础知识;
2、CSS文件链接方式;
3、CSS字体设置。
约10分钟
约40分钟
约40分钟
约60分钟
约50分钟
约40分钟
约80分钟
学生理解
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师:
授课班级:
地点:
周课时:
5课时
章节
内容
CSS文本设置
CSS背景设置
对象尺寸设置
教学
目标
11)使学生熟练掌握CSS常用样式的创建方法;
12)使学生掌握CSS常用样式各种属性的含义和设置方法。
重点
难点
11)掌握各种CSS常用样式的基本使用方法;
12)熟记各种CSS常用样式的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
三十一、引入
12、回顾上周所学内容:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- htmlcss 设计 布局 教案
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1