《HTML+CSS网设计与布局》教案 2Word文件下载.docx

《HTML+CSS网设计与布局》教案 2Word文件下载.docx

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

网页的制作与实现

（4）网页美化:

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

6、网页设计的主要软件：

ﻫ（１）Phoｔoshopﻫ

（2）Dweａmvｅaｗeｒﻫ（３）Flashﻫ（4）Ｆirｗorｋs

7、HＴMＬ基础知识:

（１）HTML概念:

HyperＴextMarkupＬａnｇuａge超文本标识语言；

ﻫ

（2）ＨTML文档的编写方法：

用记事本手工直接编写、使用可视化HＴML编辑器Ｄｒeaｍweaver、由Ｗeb　服务器动态生成;

ﻫ（3）网页文件命名：

首页文件名默认为:

index.hｔｍ或index.htｍｌ;

（4）ＨTＭL　文件结构：

　<

ＨTML>

ﻫ　<

HＥAＤ>

ﻫ　<

title＞<

／ｔitle>

/HEAD>

　　<

BODY＞

　　HTＭL文件的正文ﻫ　　　<

/BODＹ>

／ＨTML>

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

8、学生实训及辅导；

9、Ｄreamweaveｒ软件界面介绍：

ﻫ

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

（2）软件首选参数设置

10、Ｄreａｍweaver站点创建:

ﻫ站点->

新建站点->

设置站点名称->

设置站点默认图像文件夹。

11、学生实训操作:

Dｒeａmｗeaver站点创建与设置;

12、Dreamwｅaver创建第一个网页：

ﻫ（１）名称：

index．html

（2）　设置标题、输入文本、输入特殊字符

（3）页面属性设置ﻫ（4）预览网页

13、学生实训及辅导;

14、HTML常用标记：

ﻫ

（1）标题标记:

<

h#>

主题文字<

/h#>

（2）段落标记：

p>

这里表示段落<

／p>

ﻫ（3）换行与注释:

bｒ>

、＜！

－-这里放注释-->

ﻫ（4）粗体与斜体:

＜b>

粗体<

/b>

、<

i>

斜体<

/i＞ﻫ（5）删除线与下划线：

s＞删除线<

／s>

u>

下划线＜/ｕ>

（６）上标与下标:

＜sup＞上标<

/sup＞<

suｂ>

下标<

/ｓub>

15、学生实训及辅导;

16、字体标记：

（１）字体大小:

＜fonｔsｉｚｅ＝＂1"

>

字体大小<

/fｏnt>

ﻫ

（2）字体颜色：

＜fontcolor="

"

字体颜色＜/fｏnt>

ﻫ（３）设置标题字体:

（4）物理字体:

ﻫ　<

B＞…<

/B>

将字符设置成粗体。

<

I>

…＜/I>

，将字符设置成斜体。

U>

…<

/U>

，给字符增加下划线。

Ｓ＞…<

/S>

，给字符增加删除线。

ﻫ<

TT>

/TT＞,将字符设置成打字机字体。

＜SＵＰ>

/ＳUP>

，将字符设置成上标字体。

ﻫ　　<

SUＢ>

/SUB>

将字符设置成下标字体。

（5）逻辑字体:

　<

EＭ＞…<

/ＥM＞强调文字。

ＳTＲＯＮG>

/STＲONG>

字体加重。

ﻫ　　<

CODE>

/COＤE>

显示编程代码。

　＜ＳAMP>

…＜/SAMP>

显示示例文字。

ﻫ＜KBD＞…＜/KBD>

显示键盘按键文字。

ＳMALＬ>

/ＳＭALL＞缩小文字。

ＢＩG>

/BIＧ＞放大文字。

17、字体标记实例讲解；

18、学生实训及辅导；

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

五、课堂小结

本次课主要内容:

1、网页设计基础知识；

2、Drｅamwｅａver基本使用方法；

3、HTML基础知识及常用标记；

约15分钟

约35分钟

约2０分钟

约30分钟

约20分钟

约２0分钟

约4０分钟

学生理解

学生熟记

学生实践

总结

后记

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

授课教师:

ﻩ授课班级：

　　　地点:

　　　周课时：

　5课时

文字布局

插入图像

超级链接

3）使学生熟练掌握ＨＴML常用标记的基本使用方法;

4）使学生掌握HTML常用标记各种属性的含义和设置方法。

3）掌握各种ＨTＭL常用标记的基本使用方法；

4）熟记各种HＴＭL常用标记的含义。

六、引入

3、回顾上周所学内容：

上周主要介绍了网页设计和HTMＬ相关基础知识及Dｒeamweavｅr软件基础操作,重点介绍了ＨTML基础知识及常用标记；

4、提出问题:

网页中文字如何布局？

如何在网页中插入图像？

如何运用超级链接?

七、告知学生课堂任务

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

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

19、换行控制：

文字一<

、文字二<

br/>

20、不换行控制:

nｏbr>

／nobr>

21、文字对齐：

ａlｉgn="

＃"

ｃｅｎter＞居中<

／cenｔｅr>

22、设置段落：

p＞段落一＜/p>

段落二＜/p＞

23、学生实训及辅导;

24、上周课外作业点评;

25、无序列表:

ul>

＜li>

表项一<

/ｌｉ>

li>

表项…<

/li>

／ul＞

26、有序列表:

ol>

ﻩ<

表项一＜/li＞

ｌi＞表项…<

/li＞

/ol>

27、欲格式化文本：

ｐrｅ>

文字<

/ｐｒｅ＞、<

xmp>

文本<

/xmｐ>

28、计算机输出格式：

＜cｏdｅ>

代码样式小型固定宽度字体显示的文本<

／ｃode＞

kbｄ>

代码样式固定宽度字体渲染<

／kbd>

ｔt>

代码样式固定宽度字体渲染文本<

/ｔｔ>

ｖａr>

代码样式斜体字渲染<

/vaｒ＞

29、学生实训及辅导;

30、在网页中插入图像:

＜img　sｒc="

cｎ．jpg"

31、图像无法显示时的提示信息：

imgsrc＝"

cn．jpg"

alt="

风景"

＞

32、控制图像的大小：

ﻫ<

ｉｍgｓrc="

cn.jpｇ"

alt=＂风景"

widｔｈ＝"

400px"

ｈeｉght="

３00px＂＞

33、设置边框:

iｍgｓｒc="

ｃｎ.jpｇ＂alt="

　border＝"

0px"

34、图像的链接：

ａhreｆ="

iｍgｓｒｃ="

cｎ.ｊpｇ"

＞<

/a＞

35、学生实训及辅导;

36、图像映射图：

map>

/mａp＞

37、文本与图像对齐：

ｉmgsｒc="

cｎ.jpg"

aｌｉgn="

midｄle"

38、学生实训及辅导；

39、最简单的文字超链：

ahｒef="

文字链接＜/a>

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

_ｂlａnｋ、_ｐarｅnt、_sｅｌｆ、＿tｏp　

41、链接的注释:

＜ahrｅf="

＂　tiｔle＝"

网易网站＂>

163网站＜／a＞

42、设置图片链接：

ahref="

＂>

imgsｒc="

／ａ＞

43、设置锚点：

＜a　ｎame="

锚点名"

文章中的文字＜/a＞

44、邮箱地址链接：

ａ　href＝"

ｍailto:

leｉnｉｎｇcn@163.cｏm"

作者的邮箱＜/ａ>

45、相对路径:

相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；

46、绝对路径:

ﻫHＴML绝对路径（abｓｏlutepaｔh）指带域名的文件的完整路径。

47、学生实训及辅导;

九、课外作业

第6章上机实践。

一十、课堂小结

1、HＴML文字布局；

２、ＨTML插入图像；

3、ＨTML超级链接。

约10分钟

约3０分钟

约３0分钟

约３０分钟

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

　　　授课班级:

　　　　地点:

　　　　周课时:

　５课时

表单的使用

插入表格

5）使学生熟练掌握HTＭＬ常用标记的基本使用方法；

6）使学生掌握ＨTML常用标记各种属性的含义和设置方法。

5）掌握各种HＴML常用标记的基本使用方法；

6）熟记各种ＨTML常用标记的含义。

一十一、引入

5、回顾上周所学内容：

上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用;

6、提出问题:

什么是表单?

常见的表单有哪些?

如何在网页中使用表格?

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

本次课所学习的主要内容是HＴＭＬ表单和表格的标记应用。

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

48、表单基本语法：

＜form>

/foｒm＞、属性actiｏn和methｏd

49、文本框：

inpｕttypｅ="

teｘt＂>

50、密码框:

＜inｐuｔtｙpｅ＝"

ｐaｓsｗoｒd"

51、单选框：

input　ｔyｐe=＂radiｏ＂>

52、复选框:

input　tｙpe="

ｃheｃｋｂox＂>

53、按钮设置：

inｐｕttype＝"

subｍiｔ＂value="

按钮提交"

54、学生实训及辅导；

55、上周课外作业点评；

56、下拉表：

seｌeｃｔ>

!

—设置下拉表选项--＞

＜optioｎ>

选项一<

／optiｏn＞

ｏpｔiｏn>

选项二<

／oｐtion>

＜optｉonselected＞选项三＜/option>

/seｌｅｃｔ>

绝对路径

57、文本域:

＜ｔｅxtarea>

—文本域内容-－>

＜/ｔeｘtａｒｅa>

58、表单应用实例讲解；

59、学生实训及辅导；

60、表格基本语法:

ﻫ＜table>

＜／taｂlｅ>

ｔr>

标签对表示表行ﻫ<

tｈ＞标签对表示表头ﻫ<

td>

标签对表示表元

61、跨多行表元：

Ｒowspan

62、跨多列表元：

colｓpan

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

ﻫ对齐语法用align表示,后面接的值是leｆt、ceｎtｅr和rigｈt，分别代表向左、居中和向右对齐复选框　

64、表格在网页中对齐：

＜taｂle　aｌiｇn=#>

/tabｌe>

;

65、学生实训及辅导;

66、表格应用实例讲解；

67、学生实训及辅导；

一十四、课外作业ﻫ第8章上机实践。

一十五、课堂小结

１、表单的使用;

2、插入表格;

3、表格应用实例;

约４0分钟

约４０分钟

约40分钟

ﻬ《HTML+CＳS网页设计与布局》课程教案

ﻩ　　　　　授课班级：

　　周课时：

5课时　

网页框架

对象移动属性

多媒体对象应用

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

8）使学生掌握HTML常用标记各种属性的含义和设置方法。

7）掌握各种HTＭL常用标记的基本使用方法；

8）熟记各种ＨＴML常用标记的含义。

一十六、引入

7、回顾上周所学内容:

上周主要介绍了HTML表单和表格的标记应用方法，重点介绍了表单的应用实例;

8、提出问题:

框架网页如何创建?

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

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

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

本次课所学习的主要内容是HTMＬ网页框架和对象移动属性、多媒体对象的标记应用。

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

68、框架的基本语法：

framｅsｅｔ>

/frａmｅset＞

frame>

/frame>

frａmeｓeｔcolｓ="

２5%，5０%，25％＂>

ｆｒａmesｒc=＂"

＞ﻫ　　＜ｆｒamesｒc＝"

ﻫ　　＜frameｓｒc="

＜/framesｅt>

69、框架垂直分栏:

ﻫ垂直分栏是在<

fｒamesｅｔ>

中用ｃols表示跨多列表元,colｓpan

70、框架水平分栏:

水平分栏的语法用roｗs表示

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

norｅsize

72、学生实训及辅导;

73、上周课外作业点评；

74、浏览器不支持框架:

＜nｏｆraｍes>

＜／ｎoframeｓ>

75、设置框架边框：

frameseｔ　　frameｂorder=#＞

76、设置滚动条:

设置滚动条在是<

fraｍｅ>

里面,用scroｌｌing属性

77、导航框架：

ﻫ导航框架是在网页框架的<

ｆrａｍe＞中加入nａmｅ属性,表示该<

ｆrame>

的名称,然后通过用<

a＞标记的链接,并用taｒget的属性值等于<

fraｍe>

的名称;

78、内联框架：

ﻫ内联框架存在＜ｂｏdy>

＜/ｂody>

的单个HTＭL文件中，可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容,叫做浮动框架也称内联框架;

79、学生实训及辅导；

80、框架应用实例讲解；

81、学生实训及辅导;

82、移动属性基本语法:

marquee>

要移动的对象＜/ｍaｒquee>

83、文字的移动设置：

ｍaｒqueｅｄirｅctiｏｎ=#>

/ｍarquｅｅ>

84、图片移动的设置:

＜ｉmgｓrｃ＝"

仙境.giｆ＂＞<

/marquee>

85、文本移动的方向：

maｒｑｕeedｉrectioｎ=up>

向上移动<

/ｍarquee>

86、文本的滚动循环；

87、文本的移动速度:

scrollaｍouｎt设置移动的速度

88、学生实训及辅导；

89、网页多媒体的基本语法：

＜emｂedｓｒc＝urlｌoop＝＂true|faｌse"

90、隐藏面板的设置;

91、对齐方式：

ﻫalｉgn=top、bottom、cenｔeｒ、ｂaseｌine、lｅｆt、ｒiｇht、texttoｐ、middle、ａｂsmiddle、ａbsbottom

92、学生实训及辅导；

93、移动对象应用实例讲解;

94、多媒体对象应用实例讲解；

95、学生实训及辅导;

一十九、课外作业ﻫ第1１章上机实践。

二十、课堂小结

本次课主要内容：

１、网页框架;

2、对象移动属性;

3、多媒体对象应用。

约1０分钟

《HＴMＬ+CＳS网页设计与布局》课程教案

ﻩ　授课班级：

地点：

　　　周课时:

CSＳ基础知识

CSS字体设置

9）使学生熟练掌握CＳＳ常用样式的创建方法;

10）使学生掌握CSS常用样式各种属性的含义和设置方法。

9）掌握各种ＣＳS常用样式的基本使用方法；

10）熟记各种CＳＳ常用样式的含义。

二十一、引入

9、回顾上周所学内容:

上周主要介绍了HＴML网页框架和多媒体对象标记,重点介绍了HTML对象移动属性设置方法；

10、提出问题：

什么是ＣSS?

CSS有什么用?

如何创建和使用CＳS?

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

本次课所学习的主要内容是CSＳ基础知识和ＣSS字体样式设置方法和技巧。

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

96、CSS相关基础知识；

97、CSS文件链接方式：

（1）内联定义:

内联定义即是在对象的标记内,使用对象的ｓtyle属性定义适用其的样式表属性。

ﻫ链入内部CSS:

stｙｌeｔype="

teｘｔ/css＂>

/*这里写ＣSS内容＊/<

/stｙlｅ>

ﻫ

（2）链接外部CＳS:

＜liｎktyｐe=＂teｘｔ／ｃss＂rｅｌ＝"

styｌeshｅet"

src="

ｓtｙle.ｃsｓ"

98、CSS在浏览器兼容性:

现在浏览器市场的主流浏览器主要是Internet　Eｘｐlorer（简称ＩＥ）和Mｏzilla　Fｉrｅfox（简称ＦＦ），网页中的CSS因两个浏览器支持不同,所以对同一代码会显示不同的效果，那么为了达到网页的风格,有时要注意哪个浏览器要写的CSS属性支持如何。

如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用。

99、CSS选择符：

CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头，选择符在CSＳ中可分成多种，在本小节中只介绍常用的CＳS选择符:

HTML标签选择符、ＩD选择符和CLASS（类选择符）选择符。

100、ＣSS伪类和伪元素:

伪类：

伪类选择符是基于一组预定义性质的选择符,HＴMＬ元素可以占有这些预定义性质。

实际上这些性质与clａss属性的功能是相同的，因此在CSＳ术语中，它们被称作伪类。

在对应这些伪类的标记中，不存在真正的ｃlaｓs属性，相反,它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态。

101、CＳS常用单位:

eｍ：

（em,元素的字体的高度）。

ﻫeｘ：

（x-height,字母　"

ｘ＂的高度）。

pｘ：

（像素,相对于屏幕的分辨率）。

绝对长度单位:

in:

（英寸,1英寸=2.５4厘米）。

ﻫｃm:

（厘米,1厘米＝１０毫米）。

ﻫmm:

（毫米,1米=10０0毫米）。

pt:

（点,1点=1／７2英寸）。

pc:

（帕，１帕=１2点）。

102、上周课外作业点评；

103、学生实训及辅导；

104、字体和字体颜色：

ｆoｎt　:

foｎt-sｔylｅ　|｜fｏnｔ-vaｒiａnt　||font－weighｔ｜｜　fonｔ-sｉｚｅ||liｎe-heｉght　｜|fｏｎt-faｍily

105、字体大小：

Fonｔ-size，后面可接的参数值有：

ﻫxx-sｍａll｜x-small|ｓmall|medium|ｌargｅ|x-large|xx-large｜ｌarger|smaller｜lengｔh

106、字体重量:

ﻫＦoｎt-weight:

noｒmal｜bolｄ|bｏldｅr|liｇhtｅr｜100|200|300|４00｜500|60０|700｜8０0|900

107、行距:

linｅ-heiｇｈt:

#;

108、字体类型：

Fｏｎt-fａmiｌy:

fontname；

109、行距:

ｌｉnｅ－height：

110、间距与间隔:

word-ｓpaciｎg:

normａｌ|长度单位、letter-spacinｇ:

normaｌ｜length

111、字体应用实例讲解；

112、学生实训及辅导；

二十四、课外作业

第1６章上机实践。

二十五、课堂小结

１、CSS基础知识；

２、CSS文件链接方式；

3、CSS字体设置。

约１0分钟

约60分钟

约50分钟

约80分钟

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

ﻩ授课班级:

　　　地点：

　　　　　　周课时:

ＣSS文本设置

ＣＳS背景设置

对象尺寸设置

11）使学生熟练掌握CSS常用样式的创建方法;

12）使学生掌握ＣＳS常用样式各种属性的含义和设置方法。

11）掌握各种CSＳ常用样式的基本使用方法;

12）