资源描述

网页设计HTML教程.docx

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

网页设计HTML教程.docx

网页设计HTML教程

作者：

梅老师文章来源：

本站原创点击数：

2850更新时间：

2007-4-49:

54:

【实验目的】

1、掌握HTML语言基本语法。

2、掌握框架页面的制作。

3、掌握表单页面的制作

【实验性质】

设计性实验

【实验导读】

一、基本页面的制作

1、简单的HTML文件

HTML是一种描述文档结构的标注语言，用ASCII码写的，包括文件的内容及对文件的格式、特性进行描述的HTML标记两个部分，一般用字符编辑器就可编写，在DOS中扩展名是htm，在UNIX中则是html。

大多数HTML标记的书写格式是：

<标记名>文件内容

常用的标记有以下几个：

...本标记包含了整个文档。

...用来说明这是文档的标题，并包含了向用户和搜索引擎提供信息的其它元素。

...用来指明自己Web页面的名字。

这个元素放在HEAD元素之中，显示在浏览器窗口的标题栏中。

...本标记包含了文档的内容。

...

到

...

用来标注文件的子标题，这六个标题（H1是最上面的，也是最重要的）是用来在BODY中把信息部分以分级的方式组织起来。

...

用来显示预先被格式化的文本。

2、在HTML文件中建立超级链接

链接是指通过标记符号的作用，把并不连续的两段文字或两个文件联系起来。

要建立一个链接，必须具备两个条件：

⑴确认被连接的文件的名称或URL；

⑵在文件中确定链接点，使用户可以在浏览器中看到一个高亮度的文字，在高亮度处选择这个链接。

HTML文件的链接是通过链接标记...来实现的，具体结构形式为：

链接点高亮显示的文本

对同一个文件中的链接，主要采用锚，其形式为：

对不同文件的链接，又分为本地链接和网络链接。

在本地链接中，如果被链接的文件不在同一目录下，则在链接时必须写明文件路径，路径名的写法有相对路径和绝对路径。

以下给出了相对路径名及其含义：

HREF=“file.html”----file.html是本地当前路径下的文件

HREF=“files/file.html”----file.html是本地当前路径下被称作“files”的子目录下的名为file.html的文件。

HREF=“../file.html”----file.html是本地当前目录的上一级子目录下名为file.html的文件。

HREF=“../../file.html”----file.html是本地当前目录的上两级子目录下名为file.html的文件。

以下给出绝对路径名及其含义：

HREF=“

HREF=“d|files/sys/file.html”----file.html放在D盘的sys目录下（仅在本机上使用）。

至于网络链接，它的实现方法与本地链接相同，只是在被链接的文件名处应写上文件在网络上的URL。

3、在HTML文件中使用图象

在HTML网页中加入图象是通过标记来实现的，其书写格式为：

，属性SRC的作用是指出严格图象文件名，或是指出URL的路径名。

标记有一个ALIGN属性可以调整图象与文本的相对位置：

ALIGN=top图象的顶部与其他文本或图象的底部对齐

ALIGN=middle图象的中间与其他文本或图象的底部对齐

ALIGN=bottom图象的底部与其他文本或图象的底部对齐

ALIGN项缺省图象的底部与其他文本或图象的底部对齐

ALIGN=left图象放置在屏幕左边

ALIGN=right图象放置在屏幕右边

另外，标记还有可对图象进行修饰的属性：

HIGHT取象素值，用来确定一个图象的高度

WIDTH取象素值，用来确定一个图象的宽度

BORDER取象素值，用来给图象加一个边框

VSPACE取象素值，用来调整图象与上下文本的距离

HSPACE取象素值，用来调整图象与左右文本的距离

ALT在图象不显示时，加入关于图象的文字说明

现在有越来越多的人使用动画来提高网页的观赏性，实现动画最简单的就是采用GIF89A格式的动态图象，它是把多幅GIF图象存储在一个文件中，浏览器在下载这种特殊格式的文件后将连续播放这些图象，从而实现动画的效果，插入动画的方法与插入图片相同。

二、多窗口的应用

多窗口顾名思义，就是在同一屏幕上出现多个窗口，每个窗口上可以显示不同的网页内容，并且可以独立变化。

使用多窗口技术可以使屏幕的信息量增大，使WEB网页更加吸引读者。

1、了解多窗口

举一个例子说明多窗口的概念。

在一个屏幕上有三个窗口，分别位于上、左、右，每个窗口均有滚动条，它们的内容具有一定的联系，上窗口列出了各个班级的名称，当点击班级的超链接后，在左边的窗口中显示了班级里的学生名称，当点击学生的超级链接后，在右边的窗口中显示了当前学生的信息内容。

由此可见，多窗口和单窗口相比，多窗口的信息量增加了，并且很直观。

2、分割窗口

在窗口上分割多个窗口是如何实现的呢？

在HTML中，横向分割窗口的格式为：

%，?

%”>

其中，ROWS用来分割窗口，后面的数字可以用象素值、百分比或剩余值以及这三种方式的混合使用，上面即是用百分比分割窗口，标记用来指定每一个窗口的内容。

纵向分割窗口的格式为：

%，?

%”>

横向、纵向同时分割窗口：

...

例如：

用ROWS和COLS两个属性可以设置这样的窗口，将屏幕纵向分成左右两部分，左边分成上下两个窗口，右边分成上中下三个窗口。

3、窗口修饰

用FRAMESET分割窗口之后，需要在窗口内加入内容以及对窗口加以修饰，这里就用到了标记的属性，它是一个单向标记，有六个属性，下面分别加以讨论：

⑴FRAME的六个属性

①SRC属性：

用来链接一个HTML文件。

格式：

SRC=“URL”

如果一个中没有SRC属性，则该窗口显示为空。

②NAME属性：

表示该窗口的名字，该属性是可选的。

格式：

NAME=“窗口名称”

③MARGINWIDTH属性：

用来控制窗口内显示内容与窗口左右边缘的距离，该属性是取一个象素值，默认为1，若设定值小于1，则各个窗口与窗口之间的内容距离太近，显示效果不好，该属性是可选的。

格式：

MARGINWIDTH=n

④MARGINHEIGHT属性：

用来控制窗口内显示内容与窗口上下边缘的距离，该属性是取一个象素值，默认为1，若设定值小于1，则各个窗口与窗口之间的内容距离太近，显示效果不好，该属性是可选的。

格式：

MARGINHEIGHT=n

⑤SCROLLING属性：

用来描述该窗口是否设有滚动条。

格式：

SCROLLING=YES或NO或AUTO

⑥NORESIZE属性：

一个标志，说明用户是否可以用鼠标自动调整窗口的大小。

⑵