《WEB设计方案》一教案.docx

《《WEB设计方案》一教案.docx》由会员分享，可在线阅读，更多相关《《WEB设计方案》一教案.docx（35页珍藏版）》请在冰点文库上搜索。

《WEB设计方案》一教案

封面

作者：

PanHongliang

仅供个人学习

第1章HTML概述

1.1HTML入门

教学目标：

1、了解什么是HTML

2、了解HTML标准的版本历史

3、了解HTML的基本结构

教学重点与难点：

1、什么是HTML

2、HTML标准的版本历史

3、HTML的基本结构

教学方法：

讲授法、探讨法、分组讨论。

教学资源：

机房、多媒体教学系统、案例素材

教学课时：

2课时

教学过程：

一、引导：

问：

WEB开发设计要学会什么？

学生回答。

教师归纳：

引出HTML

二、新课

1、什么是HTML

HTML（HyperTextMark-upLanguage）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

2、HTML标准的版本历史

超文本置标语言（第一版）——在1993年6月发为互联网工程工作小组（IETF）工作草案发布（并非标准）

HTML2.0——1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时

HTML3.2——1996年1月14日，W3C推荐标准

HTML4.0——1997年12月18日，W3C推荐标准

HTML4.01（微小改进）——1999年12月24日，W3C推荐标准

ISO/IEC15445:

2000（“ISOHTML”）——2000年5月15日发布，基于严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准

XHTML1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1,于2001年5月31日发布

（XHTML2.0,W3C工作草案）

3、HTML的基本结构

超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

实例：

--HTML代码开始-->

---->这是注释标记。

--头部信息-->

--表示编码字符集类型主要有：

us-ascii,iso-8859-1,x-mac-roman,iso-8859-2,x-mac-ce,iso-2022-jp,x-sjis,x-euc-jp,euc-kr,iso-2022-kr,gb2312,gb_2312-80,x-euc-tw,x-cns11643-1,x-cns11643-2,big5-->

--表示网页语言-->

wed,27july200811:

00:

00GMT">

--设置网页到期时间-->

20:

00GMT">

--cookie设定，如果网页过期，存盘的cookie将被删除。

必须使用GMT时间格式-->

--禁止从缓存中调用：

是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出-->

--强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用-->

--网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的-->

--设置网页过渡：

设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面-->

--表示刷新或跳转功能300毫秒-->

--限制搜索方式content的值有：

all，页面被检索，且页面上的链接可以被查询；none，页面不能被检索，且页面上的链接不可以被查询；index，页面将被检索，但页面上的链接却不可以被查询；follow，页面上的链接可以被查询；noindex，页面不能被检索，但页面上的链接可以被查询；nofollow，页面能被检索，但页面上的链接却不可以被查询；-->

--设置编辑工具-->

--收藏标识-->

--此处为CSS补充内容-->

--css调用-->

if（top.location!

=location）

top.location.href=self.location;

--头部JS调用-->

--全局控制：

基底网址，如果内容中出现相对路径时则会在前面加上述网址；如：

a/123.html则打开为：

a/123.html-->

--背景音乐loop指定循环次数-->

文档主体，正文部分

页面主题标记--BODY

bgcolor--背景色bgcolor="#000000"

background--背景图片，background="image-URL"bgproperties="fixed"

text--文字颜色；text="#ffffff"

link--链接文字属性；alinkvlink；link--可链接文字的色彩，alink--正被点击的可链接文字的色彩，vlink--已经点击（访问）过的可链接文字的色彩；

如：

bodybgcolor=#text=#link=#alink=#vlink=#

此处#=rrggbb色彩是用16进制的红－绿－蓝（red-green-blue,RGB）值来表示。

16进制的数码有:

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

margin--边距设置；上边距topmargin=10左边距leftmargin=20；css中表示为：

margin-right:

0px;margin-bottom:

0px;

显示特殊字符：

参考字符以&开始以;结束。

如：

<=<>=>&=&空格= 

1、单标签--<标签名称>

2、双标签--<标签名称>内容

3、标签属性--<标签名字属性1属性2属性3…>

三、小结

本节课我们主要学习了HTML的定义，以及HTML标准的版本历史；在了解的基础上我们进一步学习了HTML的基本结构。

四、练习

1、编写简单的网页代码。

1.2各种文本格式的使用

教学目标：

1、掌握文本格式标签的分类和使用

教学重点与难点：

1、文本格式标签的分类和使用

教学方法：

讲授法、探讨法、分组讨论。

教学资源：

机房、教室、多媒体教学系统、案例

教学课时：

2课时

教学过程：

一、复习：

回顾HTML基本结构，进一步学习各种文本格式的应用。

二、新课文本格式

1、段落标记符--（Paragraph）P；

2、换行标记符--BR；

登鹳雀楼
白日依山尽，
黄河入海流。

欲穷千里目，
更上一层楼。

取消换行:

取消换行...

3、水平线标记符--HR；

size=1整数像素；

width=像素或百分比；

（Alignment）对齐方式align=left,right,center；

noshade表示实心，无阴影；

4、标题标签

一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

这是一行普通文字

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

5、（Division）DIV标记符--DIV；如：

说明：

DIV和SPAN标记符主要用于CSS样式表。