1、网络与远程教育第三章 网络与远程教育一、 项目目标：通过语句的学习，让学生使用HTML语言进行网页设计。二、 教学目标： 1、专业能力：（1）掌握HTML的结构特点。（2）了解网站的建立过程。（3）知道通过HTML语言如何设计网页。2、方法能力：通过学习能够独立完成远程教育系统开发软件使用的实验。3、社会能力：提高学生审美能力和信息处理能力，培养与人合作、沟通的能力。三、组织形式：1、全班共同实施2、小组讨论四、时间安排：本项目总共6课时。其中，第一课时讲：第一节 关于网站的建立、第二节 HTML概述与基本结构、第三节 HTML主体标签及属性、颜色的设定、第四节 文字版面的编辑；第二课时讲：第
2、五节 建立超链接、第六节图像的处理、第七节 网页的动态、多媒体效果、第8节 表单标签、第9节 ASP编程。其余四课时为实验课，要求学生完成实验二 远程教育系统开发软件使用。五、过程设计：第一课时（一）设计内容与要求第一节 关于网站的建立一、安装IIS（Internet Information Server ）Microsoft IIS 是允许在公共Intranet或Internet上发布信息的Web服务器。 图3-1图3-2二、设置IIS（按照以下步骤完成即可）图3-3图3-4图3-5和图3-61、 网站设置：图3-（1）IP地址、TCP端口图3-2、 主目录设置图3-93、文档设置图3-10
3、 图3-11第二节 HTML概述与基本结构一、HTML的概述1、 定义：HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。2、 概述：超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是
4、用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。 二、 HTML的基本结构： 1、一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置， 2、HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。例1：下面是一个最基本的html文档的代码:11.html - 开始标签 - 一个简单的HTML示例 | 头部标签 - -| 欢迎光临我的主页| |文件主体 | 这是我第一次做主页 | | | - - 结尾标签说明：1）在文档的最外层， 文档中的所有文本和html
5、标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。 2）是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。3）title和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 4） 标记一般不省略，标签之间的文本是正文，是
6、在浏览器要显示的页面内容。 三、HTML的标签与属性: 1、用“”括起来的句子，称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项。 2、HTML的标签分单标签和成对标签两种。成对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于这对标签中 的文档。单独标签的格式，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下： 内容作为一般的
7、原则，大多数属性值不用加双引号。但是包括空格、号，号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如： 字体设置注意事项：输入始标签时，一定不要在“”与标签名之间输入多余的空格，否则浏览器将不能正确的识别括号中的标志命令，从而无法正确的显示你的信息。第三节 HTML主体标签及属性、颜色的设定 一、 html的主体标签 在和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。1、标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方式。标签的属性：表3-12、格式： 例2：bady的属性实例设定不同的连接颜色测试body标签a href=正在按下
8、的连接颜色,a href=实例说明：的属性设定了页面的背景颜色，文字的颜色，链接的颜色为#3300ff，单击的连接颜色为#ff00ff，单击过后的颜色为#9900ff。 二、 颜色的设定 1、颜色值是一个关键字或一个RGB格式的数字。2、颜色是由 “red” “green” “blue ” 三基色组合而成的，在 HTML 中对颜色的定义是用十六进位的，对于三基色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成16777216种颜色。例如：白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为ffffff红色的组成是 re
9、d=ff, green=00, blue=00, RGB值即为ff0000绿色的组成是 red=00, green=ff, blue=00, RGB值即为00ff00蓝色的组成是 red=00, green=00, blue=ff, RGB值即为0000ff黑色的组成是 red=00, green=00, blue=00, RGB值即为000000 应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor=”#336699” 用英文名字表示颜色时直接写名字。如 bgcolor=green 。3、Windows VGA(视频图像阵列)形成了16个关键字: aqua，black， b
10、lue，fuchsia, gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white， yellow 。第四节 文字版面的编辑一、换行标签 换行标签是个单标签，也叫空标签，不包含任和内容，在html文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。 例3：无换行示例无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 有换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 二、换段落标签及属性： 由标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连
11、续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个的开始就意味着上一个的结束。良好的习惯是成对使用。格式说明：其中,ALIGN是标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.例4: 3-2html测试分段控制标签花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。 而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲。 三、原样显示文字标签 要保
12、留原始文字排版的格式,就可以通过标签来实现,方法是把制作好的文字排版内容前后分别加上始标签和尾标签.例5: 3-3html原样显示文字标签 白日依山尽，黄河入海流。 欲穷千里目， 更上一层楼。四、居中对齐标签 文本在页面中使用标签进行居中显示，是成对标签，在需要居中的内容部分开头处加，结尾处加例6：3-4html居中对齐标签送孟浩然之廣陵故人西辭黃鶴樓，煙花三月下揚州。孤帆遠影碧山盡，惟見長江天際流。五、水平分隔线标签标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置标签的属性值，可以控制水平分隔线的样式。例7：测试水平分隔线标签春
13、晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？表3-2六、特殊字符在HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如等，为防止代码混淆，必须用一些代码来表示它们。表3-3例8：特殊字符<赋得古原草送别>离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。白居易 ©七、注释标签在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。注释标签的格式有如下：八、字体属性1、标题文字标
14、签标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标题标签的格式：hn align=参数标题内容说明：标签是成对出现的，标签共分为六级，在.之间的文字就是第一级标题，是最大最粗的标题；.之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为 left（左）， enter（中)， right (右）。标签本身具有换行的作用，标题总是从新的一行开始。例9：设定各级标题一级标题。二级标题。三级标题。四级标题。五级标题。六级标题。2、文字格式控制标签标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。表3-4格式：fon
15、t face=值1 size=值2 color=值3文字 说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体。size属性的取值为17。也可以用“+”或“-”来设定字号的相对值。color属性的值为：rgb颜色“#nnnnnn”或颜色的名称。（二）课上巩固练习：1、网站是如何建立的？2、HTML的基本结构有什么？（三）作业布置：1、 填空： HTML的标签分_和_两种。_是由首标签 和尾标签组成的，_的作用域只作用于这对标签中 的文档。_的格式，_在相应的位置插入元素就可以了。2、 问答：如何设计字体样式、颜色和大小？（四）课后反思：第二课时（一）设计内容与要求第五节 建立超链
16、接HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画。 一、建立超链接的标签为和 格式为：超链接名称说明：标签表示一个链接的开始，表示链接的结束；属性：“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问。TITLE：该属性用于指定指向链接时所显示的标题文字。 TARGET:该属性用于指定打开链接的目标窗口，其默
17、认方式是原窗口。表3-5二、链接路径每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。URL(Uniform Resourc Locator)中文名字为“统一资源定位器”。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个连接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此，链接可以分以下三种：绝对路径，如：；相对路径，如：news/index.html；根路径，如：d/web/news/index.html1、绝对路径绝对路径：包含了标识INT
18、ERNET上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称其格式为 ： 通讯协议 ：/服务器地址：通讯端口/文件位置./文件名。表3-62、相对路径相对路经是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。1）如果链接到同一目录下，则只需输入要链接文件的名称。2）链接到下
19、级目录中的文件。只需先输入目录名，然后加/，再输入文件名。3）要链接到上一级目录中文件，则先输入./，再输入文件名。表3-73、根路径根路径目录地址同样可用于创建内部链接，但大多数情况下，不建议使用此种链接形式。根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。 如果根目录要写盘符，就在盘符后使用,而不用:，这点与DOS的写法不同。如：/web/highight/shouey.html；d/web/highight/shouey.html 三、在站点内部建立链接所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链
20、接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。在前面介绍链接路径时，已经给大家介绍了内部链接概念，内部链接一般采用相对路径链接比较好。下面我们根据如图示，来看看相对路径的具体的链接方法:图3-12表3-8 表3-9四、外部链接所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径，要有完整的URL地址，包括协议名，主机名，文件所在主机上的的位置的路径以及文件名。最常用的外部链接格式是：a href=“http:/网址。例10：链接到http:/绝对路径链接清 华 大 学北 京 大 学上海外国语学院 第六节图像的处
21、理图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有jpeg，bmp，gif。其中bmp文件存储空间大，传输慢，不提倡用，常用的jpeg和gif格式的图像相比较，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，gif图像仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点。因此使用图像美画页面可视情况而决定使用那种格式。一、背景图像的设定 在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。 设置背景图像的格式：其中 “image-url” 是图像的位置。例11：设置背景图像 盼望着，盼望着，东风来了，春天脚步近了.二、网页中插入图片标签网页中插入图片用单标签，当浏览器读取到标签时，就会显
