html教案.docx

《html教案.docx》由会员分享，可在线阅读，更多相关《html教案.docx（30页珍藏版）》请在冰豆网上搜索。

html教案

兄弟连PHP视频教程

Mysql视频

javascript视频

Html与CSS部分

共10天40学时2周

web技术教程学习资料

授课方式

（1）.基础灌输

（2）.项目串接

（3）.引导自学

（4）.视频重复

注：

强烈建议记录讲义重点和知识点

第一天HTML简介（涉及第一、二章）

第一节课概念介绍

万维网是我们这个时代最重要的信息传播手段。

几乎任何人都可以创建自己的网站，然后把它发布在因特网上。

一些网页属于企业，提供销售服务；另一些网页属于个人，用来分享信息。

你可以自己决定网页的内容和风格。

所有网页都要用某种形式的HTML来编写。

HTML可以对文本进行格式化，添加图形、声音和视频，并且可以将它保存为所有计算机都可以读取的文本文件。

学习和掌握HTML并不困难。

编写HTML并不是一个令人头昏的复杂过程，只需仔细输入并保持一致性。

可以在几分钟内建立一个简单的HTML页面并让它运行起来。

另外，尽管有许多软件可以替你编写HTML代码，但自己编写HTML的好处是不必学习新的软件，也不会受到这些软件特性的限制。

1.1因特网、Web和HTML

你肯定听说过因特网（Internet），但是因特网究竟是什么？

简单的说，因特网是相互连接的计算机的集合。

许多人拥有不间断的高速带宽连接（通过DSL、线缆或卫星），而另外一些人只在每天的某段时间内通过调制解调器用家庭计算机上网。

无论是什么类型的连接，只要你联网了，你的计算机就成为因特网的一部分，并且与当前联网的其他所有计算机连接。

万维网（web）是虚拟的。

它无数不断变化的、种类不同的文档的集合，这些文档驻留在因特网的某个地方，都是用某种形式的HTML编写的。

HTML（超文本标记语言）有两个基本特性——超文本和普适性。

超文本意味着可以在网页中创建一个链接，从而将访问者链接到其他任何网页，实际上可以链接到因特网上的任何东西。

这意味着可以通过许多不通的路径访问Web上的信息。

Web的创建者TimBerners-Lee希望Web能像人的大脑那样在信息之间建立广泛的联系，而不是像书籍那样只是静

态数据源。

普适性的意思是：

因为HTML文档保存为纯文本文件，所以实际上任何计算机都可以读取网页。

无论访问者是使用Macintosh、Windows还是UNIX计算机，甚至是Palm这样的手持设备，都可以打开网页。

Web对所有计算机都是开放的。

1.2能够打开网页并不意味着有相同的效果

尽管HTML对于所有计算机都是可用的，但是这并不意味着每个人都能以相同的方式体验它。

实际上任何计算机都可以显示网页，但是这些页面的实际显示效果取决于计算机的类型、显示器、连接的速度以及用来查看页面的软件（浏览器）。

当今最流行的浏览器是IE、Firefox，Opera和Safari，同时，用手持设备和PDA上网正在逐渐流行起来。

不幸的是，这些浏览器显示网页的方式不完全相同。

所以，仅仅设计一个漂亮的外形是不行的，人们用来查看页面的系统设置会差异很大，因此，要以适当的方式创建页面，让尽可能多的访问者能够以尽可能接近预期的方式查看页面。

1.3浏览器之争

1994年，网景通信公司（NetscapeCommunications）在Web上建起了第一道栅栏，

所谓的“浏览器战争”开始了。

为了吸引用户，他们抛弃了普适性，创建了一套只有Netscape能够处理的HTML扩展。

例如，使用Netscape的Web冲浪者可以查看具有彩色文本、照片和其他改进的页面，而使用其他任何浏览器的冲浪者都会得到错误和古怪的结果，或者根本没有任何结果。

但是，很多人喜欢这些扩展，所以他们蜂拥进了“Netscape饭店”。

到了1996年，它成了世界上最流行的计算机程序。

微软也开始在Web上圈出自己的区域。

同样，为了吸引用户，他们增加了只有微软的IE浏览器能够识别的非标准扩展。

根据WebStandardProject（，这是一个由第一流的设计人员组成的团体，它致力于使破碎的Web重新联合起来）的统计，在浏览器战争的高潮时期，Web设计者要浪费高达25%的时间来应付专有的标记，编写页面的多个版本来满足每种浏览器，并且只能向客户说明创建适用于所有浏览器的某些效果是不可能的。

这真是一团糟。

1.4标准的推出

Web的联合国是一个称为万维网联盟（，缩写为W3C）的组织，由Web的创建者TimBerners-Lee领导。

它的目标是使Web社区意识到普适性的重要意义，同时尽可能满足开发优美页面的愿望，努力拆除现有的栅栏并防止出现新的栅栏。

W3C的成员列表（）看起来像Web行业

大公司的“全家福”，其中包括老牌公司，比如苹果（Apple）公司（它提供iTunes和iPod等产品）、Adobe公司（Photoshop等重要的Web设计工具的开发商）、美国在线（AmercaOnline）公司（它在1998年收购了网景通信公司）、Opera（用于桌面计算机和手持设备的Opera浏览器的开发商）和微软公司（它的IE浏览器从Netscape手中夺取了第一位的市场份额，而且一直保持至今）；还包括更现代的公司，比如Google公司（最流行的搜索引擎）和Mozilla公司（流行的开放源码Firefox浏览器的开发商，这种浏览器近年来是IE的主要竞争对手）。

W3C的意图是将这些公司聚集在一起，让它们在标准上达成一致，而依靠速度、使用的简便性、价格或其他特性来体现产品的差异，从而避免Web回到分崩离析的状态。

1.5攻打象牙塔

最近（2006年年中），对于W3C的缓慢步调、过分强调抽象性以及缺乏具体结果产生了许多抱怨。

许多Web设计人员，包括领导标准化过程的设计人员，感觉被W3C及其成员公司忽视了。

HTML4.01和XHTML成为正式推荐标准已经差不多7年了，但是W3C对于未来的方向还没有形成一致的结果。

CSS2成为正式推荐标准已经差不多8年了，但是还没有任何浏览器完全支持它，尽管每种主流浏览器都是由W3C成员开发的。

CSS3仍然处于工作草案阶段，离完成可能还有好几年，更不用说实现了。

一些设计人员已经等得不耐烦了，他们决定自己动手创建可扩展的标准化解决方案（ht

tp:

//）。

更多信息请参见JeffreyZeldman的文章“AnAngryFix”（）和JohnOxton的“NoIamnotbloodysorry”（）。

在这个时期，你应该怎么做呢？

我的建议一直是“适度”。

要符合标准，但是不要成为标准的奴隶。

第二节课准备工作

2.1浏览网络上的网页

在因特网上，每一个网站都有自己特定的地址，只有把网站的地址输入正确，才能打开相应的网页，才能浏览网页中的信息。

以”网易”为例,

首先打开IE浏览器，在地址栏里htto:

//

2.2浏览本地网页

打开硬盘，进入自己存放网页的路径，双击后缀为.htm或者.html的文件即可

2.3查看源代码

点击浏览器窗口的菜单栏---查看----源代码，或者点击页面空白区-----右击----源代码

Firfox：

查看---页面源代码，或者点击页面空白区-----右击----源代码

2.4学会使用ultraedit（或者记事本）

在XX或者Google搜索这个软件，按照“下一步”理论完成后，选择注册，努力查找相对应的注册号，就可以使用了。

使用这个软件要注意的几个问题：

1.要注册，对应版本寻找注册号；

2.在菜单栏空白区选择增强版的选项；（记住是菜单栏空白区右击，切记）

3.一定要去掉备份；（菜单栏——高级——配置——文件处理——备份），点选不备份;

4.选择自己最适应的字体;（在快捷栏有A这个字体图标，选择你最喜爱的）

（在这里我上课使用的是Fixedsys）,我自己使用的是MSReferenceSansSerif,而且是粗体3号字，你可以自己选择喜爱的。

2.5多种浏览器并存

检测当前版本：

运行IE-----点击“帮助”----关于IE

1）安装IETester：

这是个相当神奇的小软件，可以帮我们模拟网页在IE5.5、IE6、IE7与IE8等浏览器的相容性，可以看一下辛苦作好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。

2）Firfox（debug）

练习安装

见软件包

2.6必备手册

CSS2.0样式表中文手册.chm

CSS完全参考手册3.0.chm

样式表滤镜手册.chm

第三节课HTML、CSS、Javascript综述

以本书课件做辅助

3.1代码片段

HTML、CSS、Javascript这三种语言都是与网页设计相关的，那么他们各自在网页中所扮演的角色是什么呢？

下面看一段代码1-1.html

1）未作修饰，纯粹Html

-----------------------------------开头

//标题部分

//文档内容显示区

标题

第一个Html文件

.---------------------------------结束

双击该文档，在IE中查看效果；

说明：

设计网页内容

2）在该文档内容中加上CSS进行修饰后

在….中间

h2{font-size:

42px;font-family:

宋体}样式简单介绍，后面会有详细讲解

点击IE，浏览变化后的效果

说明：

设计网页样式

3）加上javascript后

说明：

增加动态效果。

简单提示，后面会做详细介绍

第四节课Html基础介绍

4.1文档结构

---------------------根控制标记

---------------------头控制标记

-------标题标记

--------------头控制标记（尾）

-----------------------------网页显示区域

--------------根控制标记（尾）

（1）.…根控制标记

开头和结尾成对出现，双标签

（2）.…头控制标记

1.设置浏览器的视窗标题

（4）.…页面可见内容

4.2基本语法

标记：

用于描述功能的符号：

如“Html”

必须用尖括号：

<>

大小写作用相同：

建议：

按照习惯来写

类型：

单标记：

有属性值

无属性值

双标记：

-----------------功能开始

-----------------功能结束

有属性值

无属性值

注意：

标记可以嵌套，但不可交叉

属性：

标记属性。

如：

线条的粗细、对齐方式等；

属性语法：

<标记名字属性1属性2…….>

如：

4.3文件命名

1）文件扩展名：

.htm或者.html

2）名称：

英文字母、数字、下划线

3）不能包含特殊符号：

如空格、$等

4）区分大小写；

5）首页文件默认：

index.html或index.htm

4.4注意事项

作业：

1、课本中习题全部测试一遍；

2、P22课后作业；

3、上传资料

4、布置日志

了解htm的发展，标准；

多个浏览器环境

了解Html文件的结构；

文件名字

Html标签：

内容

Css：

修饰

Javascript：

动态

第二天提纲：

常用标签（涉及第三、四章）

第一、二、三节课

HTML文件的整体结构（简单概述一下，前面已经提到），马上进入最常用的控制标记使用

（1）.跳行

格式：

无属性设置

（2）.段落

格式：

…

属性名称属性值说明

Align

Left往左靠（默认）

center往中靠

right往右靠

（3）.水平直线

格式：

属性名称属性值说明

size像素绝对设置，以数字表示，属性值越大，线越粗

百分比相对设置，以%表示，属性值越大，线越粗

width像素绝对设置，长度不会应视窗的改变而改变

百分比相对设置，长度会随着视窗宽度而改变

noshade实体线

（4）.向中对齐

…

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心