教你从0开始学习制作网页1课件

第一章：

HTML入门基础邱江涛1.1.HTML的基本概念HTML的英文全称是HyperTextMarkupLanguage，即超文本标记语言。它是用于制作网页的基础。通过HTML语言可以将文本、表格、图片等组织成一个网页。由HTML语言编写的文件称为HTML文件，即以.htm或者.html为扩展名的文件（知道文件命名规则吗？），也即一篇网页。可以使用任意的文本编辑器（举例文本编辑器）编写HTML文件，然后以html和htm的扩展名来存储该文件。编写好的文件可以在浏览器中查看效果（知道怎样查看吗？）练习：使用记事本创建文件，另存文件。2.2.一个简单的HTML案例1.在记事本中新建一个文件。写入右边的文字，然后将该文件另存为一个html文件。双击该文件看看效果2.将右边的代码拷贝粘贴到一个html文件中。保存后，双击该文件试一试。<HTML><HEAD><TITLE>我的第一个网页</TITLE></HEAD><BODY><center><fontsize=5>欢迎来到计科系！<p>这是我的第一个网页</font></center></BODY></HTML>欢迎来到计科系这是我的第一个网页两个html文件运行后有什么不同的效果？说明了什么？3.3.HTML文件中的标记参考上面的例子，可以看到HTML语言中有很多<…>符号，如<html>、<head>。它们称之为标记。标记是HTML语言的控制语句，HTML语言的本质就是使用这些标记对文本、图片、多媒体等信息组织，形成网页。我们可以从前面的例子中发现标记有些什么特点？4.3.HTML文件中的标记大部分标记是成对出现的，一对标记中<标记名称>成为开始标记，</标记名称>称为结束标记。在一对标记之间的内容受标记控制。标记字母大小写无关。由标记控制的在浏览器中显示的内容称为HTML元素，例如<h1>hello</h1>,中的hello标记可以嵌套使用<HTML><HEAD><TITLE>我的第一个网页</TITLE></HEAD><BODY>

<center><fontsize=5>欢迎来到计科系！<p>这是我的第一个网页</font></center></BODY></HTML>5.标记可以带有属性参数，格式如下注释标记<!--注释内容-->，注释内容不出现在浏览器中显示。（试一下）<标记名称属性1=“属性值1”属性2=“属性值2”…>内容</标记名称>例如：<fontsize=5>helloworld</font>6.4.HTML文件的结构HTML文件是有一定结构的:HTML文件总是以<html>开始，以</html>结束。用标记<head></head>与<body></body>把文档分为两部分。<head></head>之间的是文件头，文件头包含关于文件的说明信息，他们不和文件一起显示。<body></body>之间是文件要显示的内容。<HTML><HEAD><TITLE>我的第一个网页</TITLE></HEAD><BODY> ……</BODY></HTML>文件体文件头HTML文档7.实验：创建自己的第一个HTML文档8.第二章：

HTML基本标记邱江涛9.1.头部标记--<head>HTML语言的头元素中，一般需要包括标题，元信息等。HTML的文件头以标记<head>开始以</head>结束。头部信息不会在网页上直接显示。，它用于包含当前文档的相关信息。文件头中包含的几种重要标记如下：1.1标题标记<title>标题标记以<title>开始，以</title>结束。标记之间的内容就是标题内容，它显示在浏览器的标题栏中。试一试：10.1.2.元标记--<meta>meta标记用于定义页面信息的名称关键字等。meta标记不是成对出现的。它通过属性方式来定义页面信息，例如：meta标记中的属性设置可以完成不同功能：1.2.1设置页面关键字：设置页面关键字的属性是“keyword”，它是为了向搜索引擎说明该网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，它可以提高被搜索到的几率。一般可以设置多个关键词，之间用逗号隔开。见上例。<metaname=“keyword”content=“搜索，java”>11.1.2.2设置页面描述设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题。其属性是“description”1.2.3设置网页的文字及语言浏览器可以根据此设置正确的选择语言。对于内容是中文的html文档，有时在浏览器中显示乱码，此时需要正确设置网页的语言<metaname=“description”content=“关于html学习的网页”><metahttp-equiv=“content-type”content=“text/html;charset=字符集类型”>中文常用的字符集是GBK或gb_231212.1.2.4设置网页的定时跳转经常会在网页上看到一些欢迎信息的界面，在经过一段时间后，会自动跳转到其他页面。（见例子）语法如下：<metahttp-equiv=“refresh”content=“跳转时间;url=链接地址”>跳转时间的单位是秒实验：注：当上述自动跳转的语法中，将链接地址省略时，就变成了刷新页面本身。这在一些不断更新数据的页面中经常会遇到。13.当上述自动跳转的语法中，将链接地址省略时，就变成了刷新页面本身。这在一些不断更新数据的页面中经常会遇到。1.2.5设置页面的过渡效果(例子)从一个网页切换到另一个网页时，使用过渡效果可以使网页更生动。通过在meta标记的属性中设置，就可以实现。语法如下：<metahttp-equiv=“过渡事件”content=“revealtrans(duration=过渡效果持续时间，transition=过渡方式)”>14.其中过渡事件有两个选项：enter,进入页面时出现过渡效果exit,退出页面时出现过渡效果过渡效果持续时间的单位是秒。过渡方式的编号见下表例子：<metahttp-equiv=“exit”content=“revealtrans(duration=4，transition=12)”>表示该页面在退出时出现过渡效果，持续时间4秒，过渡效果方式是溶解方式（下页）15.效果Transition效果Transition盒状收缩0溶解12

盒状展开1左右向中部收缩13

圆形收缩2中部向左右展开14

圆形展开3上下向中部收缩15

向上擦除4中部向上下展开16

向下擦除5阶梯状向左下展开17

向左擦除6阶梯状向左上展开18

向右擦除7阶梯状向右下展开19

垂直百叶窗8阶梯状向右上展开20

水平百叶窗9随机水平线21

横向棋盘式10随机垂直线22

纵向棋盘式11随机2316.实验大家修改我给的三个文件（t1.html、t2.html和t3.html）中，关于过渡效果的设置。来体会一下过渡效果。账户：swufeqjt密码：swufe201017.2.页面主体标记--body网页的主体部分以<body>标记开始，以</body>标记结束。在网页的主题标记中可以设置很多属性，包括页面的背景设置、链接设置、文字属性设置、边距等。2.1设置页面背景颜色–bgcolor设置整个页面的背景需要用到bgcolor属性，它使用#加上6位的16进制值来表示颜色，其中#FFFFFF为白色，#000000为黑色。#FF0000为红色，#00FF00为绿色，#0000FF为蓝色。例子：<bodybgcolor=“#3399cc”>实验：将一个网页的背景演示更改为任意颜色18.2.2设置背景图片：网页可以以一些图片作为背景。这时需要使用background属性。语法如下：<bodybackground=“文件链接地址”>补充：文件的链接地址有相对地址和绝对地址之分。绝对地址：一个文件所在的目录的完全路径+文件名d:\test\html\1.jpg相对地址：是一个文件相对于当前运行的这个文件（例如：我们在创建一个html文件1.html）所在的位置。假设当前文件在目录d:\test\html，图片文件1.jpg与1.html在同一个文件夹下。那么我们在1.html文件中的body标签可以是<bodybackground=“1.jpg”>如果图片是在d:\test\html\test\1.jpg文件夹下，那么body标签可以是<bodybackground=“test\1.jpg”>19.2.3设置文字的颜色对于文字的默认颜色可以通过text属性来设置。语法：<bodytext=“颜色代码”>20.2.4设置链接文字属性–link此部分内容在后面讲超链接时再讲。2.5设置边距在网页的制作过程中，还可以定义页面的空白，也就是内容与浏览器边框之间的距离。其中包括上边框和左边框。（见例子）语法：<bodytopmargin=上边距leftmargin=左边距>21.实验：创建一个html文档，要求1.标题为“我的第一个网页”，网页的字符集为GBK2.设置网页10秒中后自动跳转到财大主页。3.以蓝色为网页背景颜色。4.网页中写入下面的文字，设置网页