《HTML+CSS网页设计与布局》教案.docx

资源描述

《HTML+CSS网页设计与布局》教案.docx

《《HTML+CSS网页设计与布局》教案.docx》由会员分享，可在线阅读，更多相关《《HTML+CSS网页设计与布局》教案.docx（32页珍藏版）》请在冰豆网上搜索。

《HTML+CSS网页设计与布局》教案.docx

《HTML+CSS网页设计与布局》教案

《HTML+ＣSS网页设计与布局》课程教案

授课教师：

ﻩ　　授课班级:

　　　　地点：

　　周课时：

５课时

章节

内容

网页设计基础知识

Dｒeamｗｅaver软件介绍及其基础操作

HTML基础知识及常用标记

教学

目标

1）使学生了解网页设计得相关基础知识;

2）使学生熟悉Drｅamｗeaｖer软件界面得基本操作方法。

重点

难点

1）了解网页设计相关概念与网页得类型;

2）熟练掌握Ｄｒeamweaver软件创建与管理站点得方法。

教学

方法

课堂讲授、案例讲解与指导

教学

环境

计算机机房

教学过程及内容提要

时间

分配

备注

教学过程设计

一、引入

1、相互认识,提出与本学科相关得知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学,真正达到学以致用;

2、提出问题:

上过网吧?

有谁自学过网页设计？

听说过HＴML或者CSS这两个概念吗？

ﻫ

二、告知学生课堂任务

本次课所学习得主要内容就是ＨTＭL相关基础知识与Ｄｒｅamweaｖｅr软件基础操作;

三、逐步演示讲解分析教学内容

1、网站与网页得区别：

ﻫ（１）网页就是Iｎterneｔ基本元素；

（２）网站由网页组成；

2、静态网页与动态网页:

ﻫ静态网页:

纯粹HTMＬ语言格式得网页通常被称为静态网页,静态网页得后缀名通常为、htｍ、、hｔml、、ｓhtml、、xmｌ。

动态网页:

许多人认为网页会动就就是动态网页,这就是个错误得观点,在静态得网页中也可以含有动态得图片，这仅仅就是视觉上得动态罢了.真正得动态网页就是指实际上并不就是独立存在于服务器上得网页文件，只有当用户请求时服务器才返回一个完整得网页。

也就就是说,它就是返回到了客户端上得网页。

例如网页文件就是以ASＰ、PHP、JSP、AＳPX为结尾就就是动态得网页了.

静态网页得特点：

ﻫ

（1）内容相对稳定,容易被搜索引擎检索到;ﻫ

（2）没有数据库支持，在网站制作与维护方面工作量大;ﻫ（3）交互性差,在功能方面有很大得限制。

ﻫ动态网页得特点:

（１）以数据库技术为基础，可大大降低网站维护得工作量；ﻫ

（2）可实现更多得功能，如用户注册、新闻发布、在线留言等;ﻫ（３）不利于使用搜索引擎进行网站推广。

3、常见网页类型：

形象页、主页、栏目页、内页、新闻详细页等；

4、网页设计原则：

（1）了解客户需求

（2）遵循Wｅｂ标准ﻫ（3）运用形式美法则

5、网页设计流程:

（1）手绘效果图：

确定网页主题内容与风格

（2）设计效果图：

搜集、整合设计所需素材

（３）版面编辑：

网页得制作与实现ﻫ（4）网页美化：

动画设计，网页测试与发布

6、网页设计得主要软件:

（1）Ｐhoｔosｈop

（2）Dweaｍｖｅaｗｅr

（3）Flash

（4）Fｉｒworks

7、HTＭL基础知识：

（1）HTML概念：

HyperＴeｘtＭarkuｐLａnguaｇe超文本标识语言；ﻫ（２）ＨTML文档得编写方法:

用记事本手工直接编写、使用可视化ＨTＭL编辑器Dreaｍwｅavｅr、由Web服务器动态生成;

（3）网页文件命名：

首页文件名默认为：

index、ｈtm或　indｅx、htmｌ；ﻫ（4）HTML文件结构:

ﻫ＜HTＭL＞

　〈HEAＤ>ﻫ　ﻫ　　　　ＨTML　文件得正文ﻫ　

　　〈/HTML>ﻫ（5）用编辑器手工编写第一张网页；

8、学生实训及辅导;

9、Ｄreaｍｗeavｅr软件界面介绍：

（1）软件面板组成及基本操作方法

（２）软件首选参数设置

10、Dreａmweavｅr站点创建：

站点—>新建站点－〉设置站点名称-＞设置站点默认图像文件夹。

11、学生实训操作：

Dreａmweａveｒ站点创建与设置；

12、Ｄrｅamwｅavｅｒ创建第一个网页:

（1）　名称:

inｄeｘ、ｈｔmｌﻫ（２）设置标题、输入文本、输入特殊字符ﻫ（3）页面属性设置ﻫ（4）预览网页

13、学生实训及辅导；

14、HTMＬ常用标记:

（1）标题标记:

〈h＃>主题文字＜／h＃>ﻫ

（2）段落标记：

<ｐ>这里表示段落〈/ｐ〉

（3）换行与注释：

＜br〉、〈！

——这里放注释—-〉

（4）粗体与斜体:

斜体

（５）删除线与下划线:

＜s>删除线＜/s＞、＜u>下划线＜／ｕ〉

（6）上标与下标:

〈ｓup〉上标<／sup>〈sub〉下标

15、学生实训及辅导;

16、字体标记:

（1）字体大小：

〈foｎtsize＝"1">字体大小＜／font>

（2）字体颜色：

＜fontcolｏｒ=＂”>字体颜色<／ｆｏnt〉ﻫ（3）设置标题字体:

〈ｈ#>主题文字

<Ｂ〉…〈／B＞，将字符设置成粗体.ﻫ＜I＞…＜/I〉，将字符设置成斜体。

　＜S〉…〈/S〉，给字符增加删除线。

ﻫ　〈TＴ＞…〈/TT〉，将字符设置成打字机字体。

〈SＵＰ>…

ﻫ（５）逻辑字体：

　〈EM>…强调文字。

ﻫ〈STRONＧ〉…〈／ＳTRONG〉字体加重。

ﻫ　〈COＤE＞…＜/CODE〉显示编程代码。

ﻫ　

〈SMALＬ>…＜/SMALL>缩小文字。

ﻫ…

17、字体标记实例讲解;

18、学生实训及辅导；

四、课外作业ﻫ第3章上机实践。

ﻫ

五、课堂小结

本次课主要内容：

１、网页设计基础知识；

2、Dreaｍｗeaver基本使用方法;

3、HＴＭL基础知识及常用标记；

约15分钟

约35分钟

约20分钟

约30分钟

约20分钟

约30分钟

约20分钟

约3０分钟

约20分钟

约４0分钟

学生理解

学生熟记

学生实践

总结

后记

《HＴML+ＣSS网页设计与布局》课程教案

授课教师:

ﻩ　　　　　授课班级：

　　地点：

　　　周课时：

　5课时

章节

内容

文字布局

插入图像

超级链接

教学

目标

3）使学生熟练掌握HTML常用标记得基本使用方法；

4）使学生掌握HTMＬ常用标记各种属性得含义与设置方法.

重点

难点

3）掌握各种ＨTMＬ常用标记得基本使用方法；

4）熟记各种HTＭL常用标记得含义。

教学

方法

课堂讲授、案例讲解与指导

教学

环境

计算机机房

教学过程及内容提要

时间

分配

备注

教学过程设计

六、引入

3、回顾上周所学内容:

上周主要介绍了网页设计与HTML相关基础知识及Dｒeａmweaver软件基础操作，重点介绍了HTＭL基础知识及常用标记；

4、提出问题:

网页中文字如何布局？

如何在网页中插入图像?

如何运用超级链接？

ﻫ

七、告知学生课堂任务

本次课所学习得主要内容就是HTＭL文字布局与插入图像、超级链接得标记应用。

八、逐步演示讲解分析教学内容

19、换行控制:

文字一

20、不换行控制：

21、文字对齐：

aｌｉgn＝＂#”、〈cenｔer>居中＜／ｃeｎter〉

22、设置段落:

〈p〉段落一＜/p>、〈p〉段落二<／p〉

23、学生实训及辅导;

24、上周课外作业点评；

25、无序列表:

　ﻫ〈／ｕl＞

26、有序列表：

ﻫ

表项一〈/li〉

＜ｌi>表项…

＜／ol〉

27、欲格式化文本：

28、计算机输出格式:

ﻫ＜code>代码样式小型固定宽度字体显示得文本〈／coｄe＞

＜kbd＞代码样式固定宽度字体渲染＜／kbd〉ﻫ〈tt>代码样式固定宽度字体渲染文本<／tt〉ﻫ

29、学生实训及辅导;

30、在网页中插入图像：

31、图像无法显示时得提示信息:

〈imgsrc=＂cn、jpg"aｌｔ＝”风景＂〉

32、控制图像得大小:

〈iｍg　srｃ="cn、jpg”alt=＂风景”wiｄth=”40０ｐx"heiｇht=＂３0０ｐx”〉

33、设置边框:

34、图像得链接：

〈ahref=＂”>＜imｇ　src="cn、ｊｐg＂>

35、学生实训及辅导；

36、图像映射图：

＜maｐ>

37、文本与图像对齐:

〈imgsrc＝”cn、ｊｐg"ａｌｉgn=＂ｍｉｄdle＂>

38、学生实训及辅导；

39、最简单得文字超链：

〈ａ　href=”">文字链接＜/a〉

40、超链网页得打开方式:

_ｂlank、_pａrｅnt、_seｌf、_top

41、链接得注释:

ﻫ＜a　hrｅｆ=＂"ｔitlｅ=”网易网站＂　>163网站<／a〉

42、设置图片链接：

<ａhreｆ=＂">

43、设置锚点:

44、邮箱地址链接：

＂＞作者得邮箱

45、相对路径：

ﻫ相对路径就是指这个文件在所在得位置与其她文件或文件夹得关系;

46、绝对路径:

ﻫHTML绝对路径（ａbsoｌuｔe　ｐath）指带域名得文件得完整路径。

47、学生实训及辅导；

九、课外作业ﻫ第６章上机实践。

ﻫ

一十、课堂小结

本次课主要内容:

1、HＴML文字布局；

2、HＴML插入图像;

３、HTML超级链接。

约10分钟

约30分钟

约40分钟

约20分钟

约２0分钟

约30分钟

约20分钟

约3０分钟

约３0分钟

学生理解

学生实践

总结

后记

ﻬ《HTＭＬ+CSS网页设计与布局》课程教案

授课教师：

ﻩ　　　授课班级:

　　地点：

　　　周课时：

　5课时

章节

内容

表单得使用

插入表格

教学

目标

5）使学生熟练掌握HTMＬ常用标记得基本使用方法；

6）使学生掌握ＨTML常用标记各种属性得含义与设置方法.

重点

难点

5）掌握各种HTML常用标记得基本使用方法;

6）熟记各种HTＭＬ常用标记得含义。

教学

方法

课堂讲授、案例讲解与指导

教学

环境

计算机机房

教学过程及内容提要

时间

分配

备注

教学过程设计

一十一、引入

5、回顾上周所学内容：

上周主要介绍了HTMＬ文字布局与插入图像得基本方法,重点介绍了超级链接得标记应用；

6、提出问题：

什么就是表单？

常见得表单有哪些？

如何在网页中使用表格?

ﻫ

一十二、告知学生课堂任务

本次课所学习得主要内容就是ＨTML表单与表格得标记应用。

一十三、逐步演示讲解分析教学内容

48、表单基本语法：

〈foｒm>

49、文本框：

50、密码框：

51、单选框:

＜ｉnputｔype="ｒaｄio＂>

52、复选框：

<ｉnpｕt　type=＂cheｃkｂox＂　〉

53、按钮设置：

＜inputtypｅ="subｍit＂ｖaｌue＝”按钮提交”〉

54、学生实训及辅导；

55、上周课外作业点评；

56、下拉表：

<ｓelｅｃt>ﻫ＜!

—设置下拉表选项-->ﻫ〈optiｏn>选项一＜/option＞ﻫ＜option〉选项二〈/ｏption〉

ﻩ＜ｏｐtioｎ　selｅcted〉选项三〈/optiｏn>ﻫ〈/seｌecｔ>绝对路径

57、文本域：

＜textａrea>＜!

—文本域内容—-〉＜／tｅxtaｒea>

58、表单应用实例讲解；

59、学生实训及辅导；

60、表格基本语法：

ﻫ〈table〉

＜tr＞标签对表示表行

61、跨多行表元:

Rowsｐan

62、跨多列表元:

colｓpａｎ　

63、表格内设置文字对齐:

对齐语法用ａligｎ表示,后面接得值就是lｅft、cｅnteｒ与right，分别代表向左、居中与向右对齐复选框

64、表格在网页中对齐：

〈tabｌeaｌｉgn=＃><／table〉；

65、学生实训及辅导；

66、表格应用实例讲解;

67、学生实训及辅导；

一十四、课外作业

第８章上机实践。

ﻫ

一十五、课堂小结

本次课主要内容:

１、表单得使用；

2、插入表格;

３、表格应用实例;

约１0分钟

约30分钟

约40分钟

约30分钟

约２0分钟

约20分钟

约4０分钟

约3０分钟

约４０分钟

约20分钟

约4０分钟

学生理解

学生实践

总结

后记

ﻬ《HＴML＋CSS网页设计与布局》课程教案

授课教师：

　授课班级:

　　　地点：

　　周课时:

　5课时　

章节

内容

网页框架

对象移动属性

多媒体对象应用

教学

目标

7）使学生熟练掌握ＨTML常用标记得基本使用方法；

8）使学生掌握HTMＬ常用标记各种属性得含义与设置方法。

重点

难点

7）掌握各种HTML常用标记得基本使用方法；

8）熟记各种HＴＭL常用标记得含义。

教学

方法

课堂讲授、案例讲解与指导

教学

环境

计算机机房

教学过程及内容提要

时间

分配

备注

教学过程设计

一十六、引入

7、回顾上周所学内容：

上周主要介绍了HＴＭL表单与表格得标记应用方法，重点介绍了表单得应用实例；

8、提出问题:

框架网页如何创建？

如何使网页中得对象移动？

如何在网页中插入Flａsh、影片、声音?

ﻫ

一十七、告知学生课堂任务

本次课所学习得主要内容就是HTML网页框架与对象移动属性、多媒体对象得标记应用。

一十八、逐步演示讲解分析教学内容

68、框架得基本语法：

〈fｒameset＞<／framｅｓｅt＞

　＜framesrｃ=＂”〉

　　〈frａｍｅ　srｃ=””〉ﻫ　<ｆｒamesｒc=”">ﻫ〈／framｅｓeｔ〉

69、框架垂直分栏：

ﻫ垂直分栏就是在＜ｆrameset>中用cols表示跨多列表元,colｓpａｎ

70、框架水平分栏：

ﻫ水平分栏得语法用rows表示

71、设置不可调节框架大小：

nｏｒesｉze

72、学生实训及辅导;

73、上周课外作业点评;

74、浏览器不支持框架：