当前位置:首页 >> 小学教育 >>

静态网页制作教程(入门级)


第1章

网页基础

一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释

一.www基础
www(world wide web,简称互联网),一直 被人们称作internet的“杀手应用程序”。它可 以显示普通文字和图像并访问其他页面,而信息 子页

则使得它成为internet上发展最快的部分。 你可能已经掌握了在web上如何探索信息世界, 但也有可能不太清楚如何向全世界发布你自己的 信息——有关你自己的信息,如你个人的兴趣、 你的工作等。 要创建自己的页面,最基础技术就是html (hypertext makeup language,超文本标记语 言),现在绝大多数web文档都是由html编写的。

www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。 要能在web上四处遨游,首先必须安装一个 访问者和网站有 不受地域的限制, 网站上的信息可 web浏览器。有了自己的web浏览器后,在web 交互的过程,提交 一台服务器,多 可以在www上发 不受操作系统平 只要互联网保持连 以随时随地进行更 新 通就可以 信息、反馈信息 上导航最简单的方法就是结合浏览器的各种性 台的限制,如 台客户机构成分布 布多媒体信息,如 式 windows、linnux等 图像和声音、视频 能在各页上移动。你可以通过选择指定的高亮 系统平台 等 度显示的文字、词或图像从一个页面移至另一 页面,也可以利用该页的地址或url(uniform resource locator)统一资源定位器来直接移至 该指定页。

Web浏览器的选用
现在可以得到许多web浏览器,他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口,它们在 internet上对特定的web页面和文档发出请 求,当它们接收到文件后,就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。

以下是常用的浏览器 1.Mosaic:最早开始web研究时使用的浏览器, 不过现在一般没人用了。 2.Lynx:基于文本的浏览器,是web访问中仅限 于文本访问的最佳选择。但无法通过该浏览器看到 web页面的图像。 3.Netscape navigator:曾一度是最流行的浏览器, 它通过开发html扩展来提高web页面的图形品质。 4.Internet explor:简称ie,已经拥有同netscape navigator基本相同的特性,更由于其方便快捷、免 费等特性而成了当今最流行的浏览器

寻找一个web编写工具
Html编辑器或编写工具是指不用进入html核心而为 web页面创建html文档的程序。这些程序所使用的格式 与允许人们在一页上输入文件或图形的字处理器或页面 设计程序相似。 许多字处理器,如microsoft word都具有html的编辑功 能。一般的,人们都使用windows自带的文本编辑器— —记事本程序来编写。还有一些软件,如microsoft frontpage和dreamweaver都内置一web编写工具,这使 得初学者在创建web页面时更简单。但是要学习更好的 网页设计制作(如动态网页等),必须要掌握html的基 本原理,所以这种情况下不宜使用frontpage和 dreamweaver等可视化的网页开发工具。

了解html的发展信息
要掌握html,就必须了解它的发展。大家可以 通过下面俩个链接了解html文档草案的现状、未 来html的发展已经url的工作原理的升级文档等。 1.http://www.w3.org/:提供一个链接指向描述 已被确认为internet标准及现在被所有浏览器支 持的html特性的文档。 2.http://www.w3.org/hypertext/www/addressin g/addressing.html:讲解url的各种类型和如何在 web文档中使用它们。

创建自己web页面的要点

有了上诉基本知识以后,就可以开始学习创建自己的 web页面了。不过,在创建自己的页面过程中,有一些 非常有用的技巧,必须好好的记住。 1.首先要搞清楚自己要说的东西。这看起来是很自然 的,但是许多页面的不成功就是由于它们缺少重点,因 为要展示给读者的观点一定要清楚明了。如果别人搞不 懂你想说什么,就不会有兴趣去读你的主页和其他页面。 2.确定好目标之后,就应该考虑页面应包括的内容。 此时就应该按内容分割材料。材料可以分布在几页上, 也可以组合在同一页面中,这取决于你的写作方式。 3.除非页面非常短,否则编写一个简单介绍web站点的 目标、可得到信息及途径的简单页面是很有帮助的。这 一页面应包括内容介绍及目录,它可以使读者能对继续 阅读哪一页做出迅速的判断。此外,这一页上还可包括 指向有关所述论题的、更多信息的页面链接。

4.如果可能,应该将每一页都设计的简短一 些,每一页的文本及图形不应该超过一到两个 屏幕。如果一页太长,则读者不得不来回滚动 屏幕以阅读整份页面,这样就会打断文档的流 畅性。如果页面必须很长,则应在文档中包括 目录和指向特殊位置的链接,以使读者便于找 到所需信息。 5.不要在页面上设置太多的图形。图形文件 很大,意味着浏览器装载一页包括图形的页面 会非常费时。尽管你的网络连接可能非常的迅 速,但是别人访问你网页可能相对很慢。 6.在决定将自己的页面推向世界之前,应仔 细检查一下是否有错误和不佳之处。

二.网站和网页
在我们开始学习网页制作之前呢,先 让我们了解一下关于网页的一些知识。 1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0

三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容: 1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面

文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始 标记和一个结束标记。一个起始标记是由 一个元素名和后面的一个在小于号(<)和 大于号(>)之间的属性/值对系列组成。 结束标记在元素前有一个斜杠(/),此外, 它并不包括属性/值列表。

1.Html标记
在html中,标记的语法如下: <标记名称>要控制的文字</标记名称> 当用一组html标记将一段文字夹在中间时,这段文字与夹文 字的标记被称为一个组件。如: <title>hehe</title> 这就是一个组件,其中的title即为元素名,<title>就是一个 标记,hehe为该元素的内容,有时在元素名后面还有属性。因 此,在html文件中某个组件的完整定义语法如下: <标记名称 属性1=“值1” 属性2=“值2” 属性3=“值3”……>组 件数据</标记名称> 由以上可知,标记元素有四种格式: 空元素(没有内容的元素) 带有属性的空元素 带有内容的元素 带有内容和属性的元素

注意:在html标记中,英文大小写字母 的意义是相同的,也就是说<html>和 <HTML>标记是一样的。 由于标记的存在和使用,html拥有层次 极为分明的基本结构。这对页面的制作有 很大的帮助。

2.Html的基本结构
由于在HTML语法中,每个由html标记与 文字所形成的组件还可以包括另一组组件, 因此,整个html文件就像一个大组件,还包 含了许多小组件。 其中,所有的html文件最外层的组件,是 由<html>标记所建立的,在<html>标记所建 构的组件中,还包含了两个主要的子组件, 这两个子组件是由<head>标记与<body>标记 建立的。

<head>标记:建立的组件的内容为文件 标题。其中并不放网页的任何内容,而是 放置有关有关html文件的信息,例如:文 件的标题、编辑方式……等等。这些信息 大部分是提供索引、辨认和其他应用之使 用。 <body>标记:建立的组件是html文件的 主体,也就是网页的主要内容。依照各种 html的控制,这些内容将呈现在浏览器的 窗口中。 因此,所有文件的最基本结构如下:

<html> <head> …… </head> <body> …… </body> </html>

Html

head body

从上图中,我们可以容易的了解到整个html文件 中所有的数据均被建立为一个一个组件,并组织为 一个层次化的结构。 当利用html标记来定义组件时,定义标记不可交 错,否则将造成错误。下面的语法中,<head>标记 与<body>标记彼此交错,这样是不对的,如果标记 交错时,我们无法区别两个组件的范围 <html> <head> …… <body> 错误 </head> …… </body> </html>

3.创建一个简单页面
创建一简单页面的基本步骤 1.打开一个html编辑器 2.编辑你的html文档 使用记事本程序 3.保存html文档 <html> 4.浏览你做的页面 <head> 文件扩展名为.html格式
<title>我终于会自己设计页面了</title> </head> 两种方法: <body> 1.打开ie浏览 我终于会自己设计页面了哈哈 </body> 可以通过ie的菜单选项打开.html文件 </html>

四.Web页面的颜色
通过<body>标记内属性的设置,来达到控制 web页面的颜色的效果,主要内容: 1.为web页面设置背景颜色 2.为web页面设置文本颜色 3.在web页面设置中为超文本链接设置颜色 4.利用图像作为web页面使得背景

1.为web页面设置背景颜色
Html允许编写者为其web页面选择各种各样 的颜色,包括背景、文本等等,这通过这种 <body>标记的常用属性 Bgcolor属性(用来控制页面的背景颜色) 语法:bgcolor=“颜色” 其中,颜色可以通过两种方式来表示,可以 直接指定颜色的英文名称,常用的基本颜色名 称如表:

英文名称 Black While Gray Sliver Red Green Blue Yellow

颜色 黑 白 灰 银灰 红 绿 蓝 黄

英文 Purple Olive Navy Aqua Lime Maroon Teal Fuchsia

颜色 紫 橄榄绿 深蓝 水蓝 青绿 茶色 墨绿 紫红

另外,也可以利用十六进制数值方式来指定颜色, 颜色的表示方法如下: #RRGGBB 其中,RR代表红色、GG代表绿色、BB代表蓝色, 我们以00到FF的值表示三种颜色成分的多少,以指定 出三种原色以多少的成分组成新颜色。语法如下: <body bgcolor=“#00ff00”> 另外,ie支持3位数的颜色表示方法。与六位数的表 示方法类似,不过就是位数少而已 #RGB分别表示红绿蓝的成分。 例如:绿色可以用“#0F0”表示 (实例)

2.为web页面设置文本颜色
Text属性 此属性用于控制网页中文字的颜色 Text=“颜色值” 有关颜色值的设定,与前面bgcolor属性 的说明一样。 (实例)

3.在web页面设置中为超文本链接 设置颜色
Link属性、alink属性、vlink属性 Link属性:控制的是网页中未被选择过的超链 接的颜色 vlink属性:控制的是网页中已经被选择过的超 链接的颜色 Alink属性:设置超链接在被选择时的颜色 它们的语法分别为: Link=颜色值 Vlink=颜色值 Alink=颜色值 有关颜色值的设定,与bgcolor的颜色值的设定 完全相同

4.利用图像作为web页面使得 背景
Background属性 指定作为html文件背景的图片,可以使 用的图文件格式为gif和jpg,其语法如下: Background=“文件名称与路径” 假如引用c:/html/sub/目录下的bg.gif图文 件作为html文件背景时,此属性的设置语 法如下: Background=“c:/html/sub/bg.gif”

五.给html文档加注释
和一般的程序语言一样,html编辑者也 可以对自己的语句进行注释。一般来说, 注释是用来标示html语句的作用的,对程 序的读写都有重要的作用。 注释的格式如下: <!—注释的内容-->或<!注释内容>

一般来说,注释有两个用途; 1.在创建文档时,为编辑文档设计提供 途径,此类注释将会对维护和修改极有帮 助 2.一些应用程序要利用注释在html中包 括额外应用程序的特定信息

注释的一般步骤如下: 1.打开一个html文档 2.确定要添加注释的位置 3.将插入点移至该位置,插入注释语句 4.保存文档为.html文档,在浏览器中查看显 示效果 (实例)

第1章

特殊字符、逻辑效果

一.特殊字符 二.字符的物理效果 三.字符的逻辑效果

一.特殊字符
在网页中会看到许多特殊的符号标记, 其中许多标记是不可能通过键盘直接输入 的,比如“<”和“>”是html的一种标记, 如果直接输入这些标记,就会产生意想不 到的错误。而一些ASCII之外的特殊字符 也是无法直接输入的。如果要显示这些字 符,就必须进行特殊符号的引用。

在html文档中可以指定任何iso latin1字符, 但是一般的编译环境却不一定包括这些字符。 Html提供两种引用类型来包含字符,这样可以 很方便地使用它们。(实例1.html) 1.字符引用:通过使用iso latin1字符代码可 以包含任何字符。 2.实体引用:一些常用的字符已经被指定了 助记符。可以通过指定恰当的助记符来包含这 些字符。 无论是字符的引用还是实体引用,都可在 html文档中输入任何一个iso latin1字符。只是 因为许多平台并不支持全部的iso latin1字符集, html才提供了这两种方法。

二.字符的物理效果
创建html页面时,我们有时需要强调或 将一个单词或词组同其他文本分开。这需 要给特定的字符或文本以特殊的效果。正 如字处理器提供了一些样式(如黑体或斜 体)来改变文本的显示一样,html也提供 了一套改变字符显示效果的手法,如黑体、 斜体、下划线以及替换文本的尺寸和颜色。 这样的效果被称为字符的物理效果。

字符显示效果有黑体、斜体、下划线等等,每种 效果对应一个标记(2.html) <b></b>:可使短至一个字母长至一整段的文本成 为黑体。 <i></i>:使其间的任何文本用斜体显示出来 <tt></tt>:任何位于<tt></tt>之间的文本均以固定 宽度的字体显示出来,从而保证字的准确定位。 <u></u>:给其间任意长的文本加下划线。 <s></s>:将位于<s></s>之间的文本以删除线格式 显示出来。 <sub></sub>和<sup></sup>: Sub标记将其间的文本放置在低于一行的位置上。 Sup标记之间的文本则比一行中的其他文本都要高 一些。

对于文字而言,我们除了可以使用以上标记 来控制其显示效果外,还可以通过<font>标记 控制字符的字体、大小与颜色等。 <font 属性=值1 属性=2 属性=3 ……> 要控制的文字</font> Font标记的属性 1.Face属性:控制字符使用字体的属性,其 语法如下: Face=“字体名称”,如果在所指定的字体名 称并不存在于用户的系统中,将使用默认的字 体。

2.Size属性:控制字符大小的属性。 语法如下: Size=“字符等级” 在ie中,字符的等级共有7级,7为最大的字 号。 3.Color属性:控制字符的颜色,语法如下: Color=“颜色” 颜色的设定可运用英文名称或十六进制数 值,与<body>标记中bgcolor的设定方法一样。 实例(4.html)

<basefont>标记 在文档的开头位置使用<basefont>标记来改 变整个文档的大小,利用size属性来改变默认 的字符大小。例如,要创建一个默认字符大小 为2的文档。 <basefont size=2> 其余同<font>标记 实例(9.html)

专门控制字符大小的标记 <big>和<small> 实例(3.html)

以上几种方法可以达到改变字符大小原理: 当浏览器遇到一个<big>或<small>标记时, 它就会将<big>和</big>(或<small></small>)之 间的文本按预定量放大或缩小。 当浏览器遇到一个<font>标记时,它读取其 属性并对字符的大小和颜色作出变动。 当浏览器遇到一个<base font>标记时,它按 size属性指定的字符大小调整这个页面上所有文 本。

三.字符的逻辑效果
除了字符的物理效果外,html还提供了一套称为 逻辑效果的标记,它们不仅可以指定在文档文本中 特定格式的效果,还能标出文本的含义。如标题样 式的使用、特别强调、制定引用等。 1.标题样式的使用 2.增加强调和特别强调 3.包含小段代码和变量 4.提供文字字符的样本 5.指示作为键盘输入的文本 6.指定一个地址

1.标题样式的使用
有时候,我们要给页面添加几个标题,有主 标题和副标题等,但是又不想使各个标题的字 号一样大。这时候,我们可以通过<hn>标记 来标识文档中包含不同大小字号的主标题和副 标题。 Hn标记标示的字符将以粗体的形式显示在 网页中,语法如下: <hn>标题字符</hn> 其中n是1至6的数字,表示标题的层次。 <h1>的标题最大,<h6>的标题最小

在<hn>标记中有一个较为常用的属性align, 用于控制标题的对齐方式。 语法如下: Align=left 或 Align=center 或 Align=right 这三个设定值依序把标题文字的对齐方式设为 靠左对齐、居中对齐、靠右对齐。 实例(6.html)

2.增加强调和特别强调
在页面中,我们可以不通过黑体或斜体的方法, 而达到强调页面中某些字词的目的,这需要使用 <em></em>和<strong></strong>标记。它们分别 用作一般性强调和特别强调,可以高亮度显示文本 的特定区域。 当浏览器遇到一个<em>标记时,它就使用浏览 器中强调文本的特殊指示来强调位于<em></em> 之间的文本。 当浏览器遇到一个<strong>标记时,它就强调位 于该标记之间的文本,如果再一次使用该标记,表 示特别强调文本的特殊指示。 实例(7.html)

3.包含小段代码和变量
有时候我们有一些程序代码样本和变量需要 放置在web页面上。我们想使其同其他文本有 所区别,但又不愿在物理形式处理上花费太多 时间。我们可以使用<code>和<var>标记来实 现这种效果。 <code>标记将程序代码段以固定宽度字符显 示。这是因为浏览器将位于<code>和</code> 标记之间的文本按其显示代码的样式显示。而 位于<var>和</var>之间的文本则按变量的样 式处理,所以<var>标记将程序或其他程序的 变量以斜体显示。

4.提供文字字符的样本
在html中,我们使用<samp>标记来将位于 <samp>和</samp>作为文字字符的样本显示。 当浏览器遇到一个<samp>标记时,它就根据 其内置的规则格式化位于<samp>和</samp>之间 的文本,通常,这种显示文本的字符是固定宽度 的。 另外,尽管<samp>标记的文本同用其他样式 标出的文本的显示看起来是一样的,但是最好还 是用<samp>来引用一个特殊的样本。

5.指示作为键盘输入的文本
有时候设计者想在web页中将一些输入 的样本包括在一段计算机程序中,且使这 些样本样式与格式化的标准文本不同。在 html中,我们使用html键盘样式标记 <kbd>来标记由用户自己输入的文本,还 可以使用它显示计算机命令、参数,尤其 是由用户输入的内容。 由<kbd>标记的文本通常是使用固定宽 度的字符。

6.指定一个地址
Html还运行用户使用<address>标记来指 导有关web页的创建者或维护者的信息。 这一信息可以包括姓名、电子邮件地址、 电话号码、信件地址或其他相关信息。 实例(8.html)

以上我们掌握了字符效果的基本样式,包括 字符的物理效果和逻辑效果。在实际应用中, 如何利用这些样式来美化自己的主页,提出几 点建议 1.只有越少使用它们,才能越有效果。如果 每隔一个词就用黑体表示或将一大段文本显示 为斜体,是不会引起读者任何注意的。 2.除了要少用强调外,频繁地把普通样式改 为黑体或斜体等样式也会使文档的阅读变得困 难,这是因为研究必须先停下来并调整到新的 类型样式之后才能继续的阅读下去。减少样式 的变换可以防止这个问题。

3.在www用户和文档创建者之间一直有很 多关于正确使用<b>与<strong>及<i>与<em> 的讨论。在大多数浏览器中,这些标记的功 能是相同且可互换的。这里并没有一条使用 这些标记的正确方法。但是作为一条普通规 律,我们应该考虑一下规则:在要强调一个 字或词时,使用<em>或<strong>。当某个字 或词要求一个特殊的样式时,例如书名或特 定名称,则使用<I>或<b>。当有疑问的适合, 则强调包含这些字词的句子,这时用<I>或 <b>。如果想格式化一个文档突出强调的字词 时,则用<em>或<strong>。

4.Html还提供了一些在大多数浏览器中显示时难以 区分的标记:<tt>、<code>、<samp>、<kbd>,它 们均可使文本以固定宽度字符样式显示。但实际上, 它们之间差别很大。当从一个程序中插入一些代码时, 使用<code>标记。当你想要显示用户输入程序的信息 时,请使用<kbd>标记。而利用<samp>标记就可以 显示文字字符的一个样本,其他需要用固定宽度字符 显示的情况则可用<tt>处理。这些区别不仅使浏览器 选用最佳方式来显示信息,还可使扫描web页的索引 程序通过标记的使用准确识别代码和键盘输入等等。 如果对于所有需要使用固定宽度字符的要求均只使用 <tt>,则大多数浏览器的输出看起来都是一样的,但索 引程序却很难找出web页面中的代码和键盘输入。

准确使用这些样式,可以为自己的新主页 添色不少,也可使它们更易阅读。如果小心 使用,物理样式可以提高web页的显示效果。 此外,正确使用内容样式可以使读者找到它 们感兴趣的东西,同时也便于索引程序更好 地做出web页内容的目录。

第3章

表格

表格在对web页上的信息格式和布局进行控制 的较好方法,它定义格式化信息有着强大的功 能,能够控制各种信息的位置,使得页面结构 协调一致。 一.创建一个简单表格 二.定义单元格的高度和宽度 三. 控制表格的边框及边框线 四.创建跨单元格的存储格

在网页中,表格的运用是非常重要的技巧。 在html中,表格的建立主要就运用<table>、 <tr>、<td>、<th>四种标记来显示完成的 1.<table>和</table>标记:用于表示一个表 格的组件。一个表格组件将由数个行<tr>、存 储格<td>、标题格<th>子组件所组成。 2.<tr></tr>:用于定义表格的一行,一组 <tr>标记内通常包含数组由<td>或<th>标记所 定义的存储格。 3.<td></td>用于定义表格的存储格。 4.<th></th>:用于定义表格的标题存储格, 此存储格中的文字将以粗体的方式显示。

在一个最基本的表格组件中,必须包含 一组<table>标记,一组<tr>标记与一组 <td>标记。语法如下: <table> <tr><td></td></tr> </table>

一.创建一个简单表格
1.创建一个简单的表格 2.给表格添加一个标题 3.如果需要,把表格的第一行设计为表头 4.给单元格和表格元素定义数据

1.创建一个简单的表格
输入<table>和</table>标记。如果要显示表格 单元格的边框,则需在<table>标记中添加 border属性。并为Border属性设置值。如: <table border=2> </table>

2.给表格添加一个标题
使用<caption>和</caption>标记来添加标 题,语法: <caption>表格标题</caption> 如果要添加的标题位于表格的上方,则将 <caption>表格标题</caption>置于<table>标 记下一行,如: <table> <caption>表格标题</caption> …… </table>

如果要将标题置于表格下方,则将 <caption>表格标题</caption>置于</table>标 记之前。如: <table> …… <caption>表格标题</caption> </table> 我们还可以像对待其他文本一样,格式化 <caption>和</caption>中的文本 <caption>表格标题</caption>

3.把表格的第一行设计为表头
通过<th>标记来指定表格中特殊表头单元格, <th>标记之后的文本作为表头单元格的一部分。 可以在表格的任意地方使用这个标记,表头也 不是必须要放在各列的顶部。 当表格的<table>标记和表格标题输入之后, 在表格的每一列中放置一个<th>标记和该列中 的文本。 <table> <caption>表格标题</caption> <th>第一列<th>第二列<th>第三列 </table>

4.给单元格和表格元素定义数据
使用<td>标记来建立单元格,并往其中添加 数据,它的用法与<th>标记的用法十分相似。 <table> <caption>个人资料</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>

<tr>标记的用法同<th>类似,表格是用来创 建表格中行的。如实例所示,表格的每一行都 是由<tr>标记来建立。 根据需要,可把某个单元格设置成空数据格, 即不输入数据到该格中,也就是在<td>标记之 后不输入数据。 <tr><td>李四<td><td>工程师</tr>

二.定义单元格的高度和宽度
表格的宽度由<table>标记的width属性来控制, 而高度则是由<table>标记的height属性来控制的。 语法分别为: Width=数值 Height=数值 数值的设定值若为一整数,则其单位为像素, 若设定值为n%,则代表表格的宽度为整个网页 宽度的百分之n。如: 将width属性设为50%,代表此表格宽度为整 个网页宽度的一半。

<table width=300 height=50> <caption>个人资料</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>

<table width=50% height=40%> <caption>个人资料</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>

两者设置宽度和高度的区别,当改变浏览 器窗口大小的时候,用百分比设置的表格 会随浏览器窗口的变化而变化,而通过像 素设定宽度和高度的表格的大小不会变化。 以上是对整个表格的所有单元格的高度和 宽度的控制,也可以在<tr>标记中添加 width和height属性来控制某一行的宽度和 高度。如: <tr width=300 height=100></tr> <tr width=40% height=20%></tr>

三. 控制表格的边框及边框线
通过<table>标记的属性可以控制整个表格组件的 格式。 1.Border属性:用来控制表格边框线的厚度,语法 如下: Border=数值,数值的设定若为整数,则其单位为 像素(pixel)。 2.Cellspacing属性:用于控制存储格边框到表格边 框的距离,框线的宽度。 Cellspacing=数值 3.cellpadding:用于控制存储格内文字的边缘到存储 格边框的距离。 cellpadding=数值

<table border=10 width=500 height=500> <caption>设置表格的边框</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>

4.设置表格背景颜色与边框厚度颜色 <table>标记还有两个属性 Bgcolor属性:控制表格的背景颜色 bordercolor属性:控制表格厚度的颜色 <table bgcolor=blue bordercolor=red>

5.设置表格的对齐方式 表格对齐方式有两种:水平方向和垂直方向 align(水平方向): Align=left(水平左对齐) Align=right(水平右对齐) Align=center(水平居中对齐) Valign(垂直方向) Valign=top(垂直顶部对齐) valign=bottom(垂直底部对齐) Valign=baseline(垂直一条公共基线对齐) valign=middle(垂直居中对齐)

(1).align属性可以放置于<table>标记中,控制整个表格在 网页中的对齐方式。 <html> <body> <table align=left> <tr><td>靠左对齐表格</tr> </table><br> <table align=center> <tr><td>居中对齐表格</tr> </table><br> <table align=right> <tr><td>靠右对齐表格</tr> </table><br> </body> </html>

(2).align和valign属性也可以在<tr>标记中控制对齐 方式 <html> <body> <table> <tr align=left valign=top><td>张三<td>北京<td>学 生</tr> <tr algin=center valign=bottom><td>李四<td>上海 <td>工程师</tr> <tr align=right valign=center><td>王五<td>深圳 <td>老师</tr> </table> </body> </html>

四.创建跨单元格的存储格
我们常常会看到有的表格里的某些存储 格跨了好几个单元格,这是通过colspan和 rowspan属性来控制而达到的。 Colspan属性:水平延伸存储格,语法: Colspan=n N为整数,代表此存储格水平延伸的存 储格数。 Rowspan属性:垂直延伸存储格数

<html> <body> <table border=3> <tr> <th colspan=3>个人资料</tr> <tr><th>姓名<th>居住地<th>职业</tr> </table> <br> <table border=3> <tr> <th rowspan=3>个人资料 <th>姓名 </tr> <tr><th>居住地</tr> <tr><th>职业</tr> </table> <br> <table border=3> <tr> <th rowspan=2>姓名 <th colspan=2>个人资料 </tr> <tr><th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table> <br> </body> </html>

第3章

列表

有些信息最好是以列表的形式表现出来,比如一个 菜谱的配料、最喜欢的10套唱片、一个演出大纲以及 一套术语的定义。虽然可以利用<p>和<br>之类的标记 来管理在文档中各项目的位置及创建列表,但是这些 标记使用起来很麻烦,而且对于最合适信息的列表类 型的创建也无多大的灵活性。所有html提供了一些标 记用来创建包括有数字编号、点或圈标志、缩进及其 他性能的列表:而且,html4.0还包含了一些为建立以 最佳形式表达数据的列表提供更多功能的属性。

将文字内容以条列的方式显示,对于阅读 者来说通常是比较清除而易读的。Html共提 供了三种用于条列文字的标记,它们是有序 条列与无序条列以及说明项目条列标记 1.有序号条列就是有一定顺序的列表,比如 有数字编号的列表和指定编号的列表等。 2.无序号条列就是有标志但不管顺序的列表, 如点圈标志等。 3.说明项目条列就是没有标志,且排列内容 无一定次序的列表。

1.建立一个有数字编号的列表 2.指定编号的格式和顺序 3.创建一个带有点或圈标志的列表 4.创建一个无标志列表 5.建立一个菜单列表 6.建立目录列表 7.建立术语列表 8.嵌套列表 9.利用列表使主页更有活力

1.建立一个有数字编号的列表
在html中可以创建一个在各项目之前自动生成数字编 号的排序类别。项目之前的数字取决于该项目在列表中 的位置:若第一项是1,则第二项是2,以此类推。 这是通过<ol>和<li>标记来实现的 语法如下: <ol> <li>条列1 <li>条列2 <li>条列3 …… </ol>

建立一个有数字编号的列表的一般步骤如下: <html> <body> <ol> <li>红色 <li>绿色 <li>蓝色 <li>紫色 </ol> </body> </html> 实例:1.html

一些浏览器允许将列表做的更紧凑一些 来节省空间。在一个紧凑的列表中列表项 目间通常空格很小,且会使用更小更紧缩 的字体。如要指定一个压缩的列表,只需 用<ol compact>标记代替列表开头的<ol> 标记。

2.指定编号的格式和顺序
有时候编号不一定是数字,或者是数字 也不一定是从1开始。如果是这样,我们可 以通过<ol>标记的属性start和type来控制。 如果不是以数字1开始,则在列表的开始 处的<ol>标记中放置一个start属性,其后 是等号(=)及第一个数字的值。例如要创建 一个以100为开头的列表如下:

<html> <body> <ol start=100> <li>红色 <li>绿色 <li>蓝色 <li>紫色 </ol> </body> </html>

可以在<li>标记中使用value属性来改变列表内的标 号顺序。例如要从3开始,但是列表后部的值更大一 些,下面的html语句创建的列表首先从3开始,到了 蓝色这一栏将从10开始。(实例:13.html) <html> <body> <ol start=3> <li>红色 <li>绿色 <li value=10>蓝色 <li>紫色 </ol> </body> </html>

利用type属性来控制序号的种类,语法如下: Type=1 type=A type=a type=i type=I

属性值
1 A a I i

定义
使用标准数字,此为默认值(1、2、3等) 使用大写字母(A、B、C等) 使用小写字母(a、b、c等) 使用罗马大写字母(I、II、III等) 使用罗马小写字母(i、ii、iii等)

例如要在列表中使用大写字母,则输入: <ol type=A> <li>红色 <li>绿色 <li>蓝色 <li>紫色 </ol> 我们还可以在<li>标记中使用type属性来更 改列表中的编号体系。例如将标准数字改为罗 马大写数字,则输入:

<html> <body> <ol > <li>红色 <li>绿色 <li type=I>蓝色 <li>紫色 </ol> </body> </html> 实例:2.html 3.html

当一个html浏览器遇到一个带有等于某值的 start属性编号列表时,它可用这个值开始为列 表编号。类似的,当它遇到一个等于某值的 type属性时,它就用此数值匹配编号类型的预 定义列表,并使用恰当类型为列表编号。当浏 览器在一列表元素中遇到一个type或value标记 时,它就根据标记中设置的值改变列表编号系 统。

3.创建一个带有点或圈标志的列表
Html可以用来创建带有圈标志的或称为无序的列 表,其中的点圈能够自动生成并置于每一个列表项之 前。这一技术极像编号列表中使用的技术,其唯一区 别仅在于使用的标记不同。 这里使用的标记是<ul>和<li>。用法与<ol>和<li> 基本相同。不同的地方在于type属性的不同,此标记 的语法如下: <ul> <li>条列1 <li>条列2 <li>条列3 …… </ul>

这里type属性用于设定项目符号,用法为: Type=circle Type=disc Type=square 其中,三种type值所代表的条列符号分分 别为圆圈○、实心圆●、实心正方体■。 实现步骤与前面有数字编号的列表的建立 步骤完全一样,只不过是要把<ol>和</ol>换 成<ul>和</ul>。 实例:4.html

4.创建一个无标志列表
在html中,我们可以创建一个没有任何标志 的列表,这个通过使用<dl>和<dt>标记来完成。 建立无标志列表步骤与有数字列表建立步骤 一样。不过要把<ol>和</ol>换成<dl>和</dl>, 同时把<li>换成<dt>。如果要创建的是不同于 普通文本的缩进式列表,则不用<dt>而用 <dd>代替<li> 实例:5.html 上例中缩进式列表原理是<dd>标记在列表项 之前又加了一个制表符。不过,缩进量是由浏 览器设置的,而不能由文档控制。

5.建立一个菜单列表
使用<menu>标记和<li>标记可以使列表 各项以菜单的形式显示。用法与<ol>和<li> 基本相同。用<menu>标记替换<ol>标记。 实例:6.html

6.建立目录列表
使用<dir>标记和<li>标记可以使列表各 项以一个相关条目的形式显示。用法与 <ol>和<li>基本相同。 实例:6.html

7.建立术语列表
通过前面的学习,我们已经了解<dl>、 <dt>、和<dd>标记。在那里,<dd>和<dt> 标记是分开使用的。但是它们却可以共同 使用来创建一个术语列表。也就是说,以 带有术语及其带有的列表形式显示处理, 并且强调指出这些词语及其定义。 实例:7.html

8.嵌套列表
我们经常可以看到这样的列表,既有主标题, 每个主标题下又有子标题,并能以此类推。这就 叫嵌套式列表。 在html中,嵌套是很容易实现的 1.数字编号列表(实例:8.html) 2.点圈标志列表(实例:9.html) 3.菜单列表(实例:10.html) 4.无标志列表(实例:11.html) 5.混合列表(实例:12.html)

9.利用列表使主页更有活力
列表的使用有利也有弊。用的好,读者通过它能很 快地找到所需的信息。通过将相关信息分组并使用平 行结构,用户可以很容易地根据提供信息进行分类。 但是,如果用得不好,反而会有很差的效果。 在使用html创建列表时,要注意以下几点: 1.避免列表太长。太长的列表会令人生厌并不易阅 读,而且读者也很难找到所需的特定信息。在这种情 况下,应该把它拆成小的列表,并标以不同的题目。 这也就是嵌套式列表的有用之处。 2.保持列表的一贯性,在一个列表中间不要更换动 词时态或做其他形式上的改动。 3.在各行中,使各项保持相同的长度。列表可以做 成只有一个词的短表,也可以做成包括成段句子的长 表;但是这两种类型不能混用。

第4章

超级链接

只需少量的标记就可以格式化文本文件并使 其在world wide web上高效地显示出来,它使 html和www成为在internet上发表文档的好方法。 但这仅仅是利用了world wide web的极少量的 能力。文档阅读者可以设想只需通过简简单单 的键盘敲击和鼠标摁动,就可移至该文档的其 他位置上、本台计算机的其他文档上,或者是 全世界的internet资源上。 www提供了一种工具来完全地实现上述功能。 它就是超级链接。

1.url介绍 2.创建链接 3.创建一个简单的链接 4.创建一个指向页面特定部分的链接 5.在表格和列表中使用链接

1.url介绍
url(uniform resource locator,全球资源定位器), 是world wide web浏览器用来定位在internet上文件的 工具,为使用各种协议访问信息提供了一个简单连贯 的方法。一个url包括3部分:一个协议代码、一个装有 所需文件的计算机地址(或一个电子邮件地址或是新 闻组名称),以及包含所需信息的文件地址和文件名。 如: http://www.263.net/main.html 当浏览器遇到一个url时,它首先检查其协议以决定 程序获取信息必须使用的方法。之后浏览器取得计算 机的地址,然后访问站点,并使用url中的路径信息找 到文件并将它的一个拷贝返回到浏览器所在的计算机 上。

1.解释一个url url包括3个部分,第一部分是协议,协议表明 应使用何种方法获得所需信息。现在world wide web上共有7个主要协议。
协议 ftp Gopher http mailto News Telnet wais 描述 文本传输协议(ftp) Gopher 超文本传输协议(http) 电子邮件 Usenet 新闻 telnet 广义信息服务器(wais)

在这7种协议中的5种(ftp、gopher、http、telnet和 wais)协议后均需接一个冒号和两个斜杠(//),斜杠 之后则是相关信息的主机地址。如: http://www.microsoft.com http://ftp.tsinghua.edu.cn 而在mailto协议之后紧跟一个冒号,其后就是e-mail 地址了。如: mailto:john@263.net 在news协议中,协议后跟一个冒号,其后是usenet 新闻的名称。如: News:alt.widgets 对于除了mailto和news之外的协议,计算机地址之 后都接着所需文件或目录的路径。如: http://www.sina.com.cn/pub/teams/yankees.html ftp://ftp.zixia.net/incoming/fjm/1.doc

2.理解相对的url 有时候url只是一个文件或某种路径,并不包 括任何种类的协议。此时可以利用路径名来寻 找各个目录中的文件,如: C://my documents/my doc/2.doc 同时,web浏览器会假设给出的位置与当前 页面的位置相关,它将使用路径信息在目录中 上移或下移以达到该位置并检索此文件。也就 是说,不用写出完整的路径名就能指定页面和 其他文件的位置 如下目录结构图

如要访问一个与当前页面所处目录相同的文 件,则只需将该文件的名称作为url。如:现在 是在page1.html中,想要到page2.html中,则 只需输入:page2.html

如果要访问的文件位于当前页面所在目录的子目 录中,则需包括子目录名,并将其余文件名用一个斜 杠(/)分开,如由page1.html到page3.html中,则输 入: flash/page3.html 如果对于父目录(高于当前目录所在目录的目录) 中的文件,则在两个句号(..)和文件名之间用一个 斜杠分隔开。例如,想由page3.html到page1.html中, 则输入: ../page1.html 由上两步综合起来使用,可由一个目录转移到任 何一个其他目录。例如要从page3.html到page4.html 中,则输入: ../image/page4.html 实例:1.html

2.创建链接

要将你的文档或信息与别的资源连接起来,就必须 创建它们之间的链接。 创建链接的方式有两种: 1.可以使用<link>来指定一个文档同其他资源的关系, 包括之前和之后的文档、表格内容、索引以及其他文 档部分。浏览器阅读和存储包含在<link>元素中的信息, 并将其作为相关文件的位置。 2.使用<a></a>标记可以创建各种各样的链接,如指 向本地页面的链接、指向其他页面的链接、指向页面 特定部分的链接以及指向服务器或站点的链接等。 当用户选择建立于页面中的链接后,浏览器便会浏 览该超级链接位置的网页。建立超级链接所使用的标 记为<a></a>,其语法为: <a href=“链接位置”>超级链接名称</a>

此语句的各个部分 1.超级链接名称 此字符串将显示于网页中,代表此超级链 接,并供用户选择超级链接之用。除了可以 使用字符串外,在<a></a>标记中,也可以插 入图像文件,这样该图像文件便可代表该超 级链接。当用户把鼠标移到代表该超级链接 的文字或图片上时,光标的形状将变成手状, 表示该用户可选择该链接。

2.链接位置 用于指定href属性中超级链接的目标位置,这可使用url来指 定。url的格式由使用的通讯协议、链接地址与文件位置所组成 下面列举一些常见的链接位置的设定方式 (1).通过http协议链接至其他网页 <a href=http://www.263.net/main.html> (2).指定通过ftp协议链接至网络上的ftp服务器 <a href=ftp://ftp.zixia.net> (3)telnet链接: <a href=“telnet://bbs.tsinghua.edu.cn”?> (4)电子邮件 <a href=mailto:hehe@263.net> (5)链接至同一服务器上的其他网页 <a href=“c:\index.html”>

3.创建一个简单的链接
创建简单链接的一般步骤: 1.打开或创建一个需要使用链接的文档,并 定位要用于链接的字或词。 2.通过在锚点文本的前后放置<a>和</a>标记 来标出用作链接的文本。 3.在<a>标记中放置href属性并使其等于要链 接的对象的url 4.保存文档,查看效果 实例:2.html

5.创建一个指向页面特定部分的链接
通过上面的学习,我们能够创建从一个页面到另 外一个页面的链接,但有时候你只需从一个页面到 另一个页面的一个指定位置之间的链接,例如链接 到第二个页面的第四部分,这应该怎么达到呢? 方法就是在第二个页面的html文档中建立一个锚。 所谓锚,就是链接到文档内部的指定位置。在第一 个页面建立的链接将包含链接的文件名和锚的名字。 然后,当浏览器按这个链接查找时,就把第二个页 面装入,然后向下滚动到锚的指定位置。

如果第二个页面就是第一个页面,这也 是可行的。也就是说,进行的是从一个页 面到该页面本身某个位置的链接。这种链 接常用在web页面较长,无法在一页中显 示的情况下。 实例:first.html

6.在表格和列表中使用链接
设计者可以将表格或列表与超级链接联 合起来使用,比如建立一个菜单用以组织 一套指向不同页面的链接。可以像为普通 页面添加链接一样在列表和表格中添加链 接。 实例:2.html

第3章

分节分栏、html扩展

1.在web页中创建分节 2.利用表格进行web页面的布局控制 3.给滚动的文本添加滚动的文本框 4.控制页面的显示效果的一些方法

1.在web页中创建分节
在web页中创建分节是由<div>和</div> 标记来实现的。当浏览器遇到<div>标记时, 它取出<div>和<div>之间的所有文本,并 根据<div>标记中的属性所包含的指示格式 化该文本。 <div>标记的属性主要有align,设置文本 的定位,可设置为left、right和center。 实例1

2.利用表格进行web页面的布局控制
表格的应用非常广泛且灵活,为控制 web页的图像、文本和其他对象提供了极 有力的途径。我们可以在表格单元格中插 入文本、图像及其他对象,并控制它们在 浏览器窗口中的确切位置。 1.安排图像、嵌入对象和文本 2.创建分栏文本,将文本分为若干列, 在屏幕上一个挨一个地排列

1.安排图像、嵌入对象和文本
实例1

2.创建分栏文本,将文本分为若干 列,在屏幕上一个挨一个地排列
所谓在web页中分栏,就是说将文本分 为若干列,在屏幕上一个挨一个地排列。 在html中,我们可以利用表格来达到。 实例1

由于www的迅猛发展,计算机技术更新速 度越来越快。浏览器的升级速度更是如此,随 着浏览器的不断升级,可供web页的创建者使 用的技术范围越来越广。 3.给滚动的文本添加滚动文本框 4.控制页面的显示效果的一些方法

3.给滚动的文本添加滚动的文本框
让文本在一个页面滚动是吸引读者注意 力的一个独特的技巧。通过<marquee>标 记可以达到此效果。主要语法如下: <marquee>要控制的文本</marquee> 我们还可以使用它的各种属性来控制滚 动文本框的尺寸、滚动行为和颜色等。 <marquee>标记的属性主要有: 1.Behavior属性:用来控制滚动类型。 它支持3种值,如下表,默认为scroll

设置值 alternate scroll

描述 文本在屏幕的两端来回滚动 从屏幕的一边开始显示文本,并 在文本框中不断的移动直到屏幕 的另一端 从屏幕的一边开始显示文本,并 在滚动文本框中移动文本直到文 本碰到屏幕另一边的界面

slide

2.Direction属性:控制文本在滚动文本框中移动的 方向。有两个设定值:left和right。分别代表文本从 右向左滚动和从左向右滚动。默认值为left。 3.Scrollamount属性:用来设置滚动文本框每次重 画间隔的像素数,也就是说,控制的是在滚动文本 框下一次显示时,滚动文本框的内容将要向下移动 的像素数。 4.Scrolldelay控制重画间的延迟,也就是重画之间 的间隔时间,一微秒为单位。 5.Loop属性:用来设置滚动文本框滚动的次数。 Loop=n N代表滚动的次数。如果n=-1或infinite,则此时代 表滚动文本框将连续不停的滚动。

6.Bgcolor属性:用来设置滚动文本框的背景 颜色。与以前学过的bgcolor的设置完全相同。 7.Height属性:控制滚动文本框的高度。 8.Width属性:控制滚动文本框的宽度。 9.Align属性:控制滚动文本框周围的文本对 齐方式。有3个设定值:top、middle和bottom。 分别代表文本与滚动文本框的顶部、中部和底 部对齐。 10.Hspace属性:用于调整滚动文本框的水平 边界。设定值单位为像素。 11.Vspace属性:用于调整滚动文本框的垂直 边界。设定值单位为像素。 实例1

第3章

管理文档空间

Web页的布局或空间设计对于使页面的结构紧 凑且易懂是十分重要的。在设计页面时,设计 者通常不太注意空间的布置,而这恰恰是错误 的。一个空间布局合理的页面是很容易阅读的, 因此人们也就会经常的访问它。一个空间布置 不当的页面会因为其结构过于松散或拥挤不堪 而使读者错过了应注意的信息。

1.在文档中添加水平线 2.利用表格将文本与一条线对齐、居中对 齐文本 3.分段与换行

1.在文档中添加水平线
使用<hr>标记来实现,它没有关闭标记,只在页面 上创建一条水平线,将文档页面中一部分信息同其他 信息分隔开。例如,标题在前,或从一个项目列表中 分离出文本主体,都可使用水平线来实现。 <hr>标记注意主要属性有: Width属性:控制表现的长度,单位为像素 Width=n或width=n% Size属性:控制标线的宽度 Size=n N为数字,代表以像素为单位的该线的粗细程度, 默认为2 Align属性:控制标线的对齐方式。 Align=left right center 实例1

2.利用表格将文本与一条线对齐
表格可以将文本与一表格行的顶部或底部对齐, 这是格式化文本的一个有用的性能。这是通过 <valign>标记来实现的。 <valign>属性的语法如下: <valign>=top <valign>=center <valign>=bottom 当浏览器在一个表格单元格中遇到<valign>标 记时,它将单元格的内容与单元格的顶部、中部 或底部对齐。单元格的大小由该行中所有单元格 的内容决定。 实例2

3.分段与换行
分段使用<p>,而换行使用的是<br>标记。 实例1 同其他的标记使用的方法相同,即在不想有 行中断的位置放置<nobr>标记,在保持不中断 的文本片段末尾放置</nobr>标记。 浏览器遇到<nobr>标记且当前行中没有足够 的空间来放置<nobr>标记和</nobr>标记之间的 文本时,它就将文本移至新的一行中。如果当 前行有足够的空间放置,则仍位于此行中。

4.在web页面中包含预先格式化的文本
同其他的标记使用的方法相同,即在预 先设置了格式的文本的开头放置<pre>标记, 末尾放置</pre>标记。 浏览器以固定的字体显示<pre></pre>标 记之间的所有文本,且不忽略回车符和制 表符等。 实例1

第六章

样式表

Html可以定义文档的结构,但是有些具体的内容 并不能被精确的定义。从前面我们所学的各种标记 和属性的应用可以看出,到目前为止没有一种方式 能够精确指定某一元素的绝对位置,元素的位置随 着浏览器窗口的变化而不断地变化。 利用样式表可以精确地定义如何表达元素、方便 地改变文档的风格。一个很经典的样式表能为开发 web网页起到事半功倍的作用。多个样式表可以精 确地控制html文档在浏览器中的显示效果,并能创 造出更多的效果,同时还可以表达某些特定页面的 内容。

样式表提供了增强、扩展和改进浏览器显示web页面的 方法,所以它已经成为html功能最为强劲的特性之一。 样式表的各种长度单位如下表
缩写 Cm Em Ex In Mm Pc Pt Px 单位类型 厘米 Ems Exes 英寸 毫米 Picas 点 像素 描述 M 字母的宽度 X 字母的高度

1 pica=12 点 1 点=1/172 英寸 显示单元

样式表可以分为级联样式表css(cascading style sheets)和动态样式表。后者是由级联式样式表和 javascript组合在一起的,它具有级联式样式表的 功能,所以它的功能要比前者强大得多。 我们所要学习的是级联样式表,一般来讲,样式 表是级联式样式表的简称,而不包含动态样式表。 样式表主要是通过把各种样式属性按照要求组合 在一起,从而形成对指定元素的样式修饰。而这 些放在一起的样式属性就构成了样式规则,因为 它们规定了指定元素在页面中的显示样式。下面 主要介绍有关样式表的基本内容和应用样式表的 常用标记。

1.级联样式表的基本规则 样式表实际上是由一些具体的样式属性所组成的, 如颜色属性、文本属性、以及位置属性等,并由这些 样式属性来精确、详细地格式化文档显示。尤其是样 式表中可以应用位置属性,主要就可以控制元素在页 面中的具体位置,如元素在页面中的绝对位置等。 显示在页面上的元素样式可能很复杂,样式表可以 根据具体的要求,通过添加相关的样式属性来描述指 定的样式,所以这就使得样式表的使用及其灵活、多 样。在实践的基础上可以创建各种经典的样式表应用 与各种html文档中的描述元素,同时主要做还可以使 不同的页面达到比较一致的显示效果。总之,样式表 是由<style>标记及其属性来实现的,使用标记或者属 性可以指定任意的样式属性来组成样式表。

级联样式表主要分为内部级联和外部级联。内部级联是 指在html文档代码中直接使用样式标记或者样式属性来描 述元素的样式,而外部级联是指通过引用在html文档以外 建立的样式表来描述文档元素。现在大部分情况下所谓的 样式表或者级联样式表都是指内部级联样式表。 级联样式表的一般语法格式为: <style type=“text/css”> 样式标记名1 {样式规则1} …… 样式标记名n {样式规则n} </style> 或 <标记 style=“样式规则”>

这里使用的“text/css”属性值所表示的是级联式样式表, 而不是“text/javascript”形式的动态样式表。 在样式表的应用中,只要语法格式正确,浏览器就可以 自动识别是哪种样式表,所以在html文档中不标志级联样 式表也是允许的。 在上面两种形式中,第一种是用标记来进行样式表处理 的,它的样式标记名就是前面涉及到的标记名称。在这里, 标记不能包含两边的尖括号(“<”和“>”),例如,表 格标记<table>在样式表中作为样式名称只能写出table, 而不能包含尖括号。 样式规则的格式为: 属性名1:属性值1;属性名2:属性值2;…… 属性名和属性值之间用一个:分开,不同的属性之间用; 分开,而其中最后一个属性值后可以不加;所以的属性都 使用{}包含起来。

例如: <style type=text/css> P {font-family:’宋体’;font-size:10pt;font-color:yellow} p.Isleft {text-align:left} p.Isright {text-align:right} p.Iscenter {text-align:center} </style> 上面的代码将所有段落标志的字体都设置为宋体,大小为 10pt,颜色为黄色。另外,由于排版的需要又分成了3个样式类, 它们分别具有不同的排版属性。

第二种形式就是直接在标记内使用属性style, 其中的样式规则和第一种一样: 属性名1:属性值1;属性名2:属性值2;…… 这种方法比较常见,又很灵活,可以在任何位 置直接使用。例如: <p style=“font-size:24;font-style:italic;fontcolor:red;”> 这样就设置<p>标记的样式为:段落内的字符 大小为24,颜色为深蓝色,字符为斜体。

2.级联式样式表的属性 级联式样式表共有8种属性,如下表
属性类别 字体和文本属性 属性 Font-family、font-sytle、font-variant、font-weight、font-size、font-face、 font、 letter-spacing、 line-height、 text-decoration、 text-transform、 text-align、 text-indent、vertical-align Color 、 background-color 、 background-image 、 background-repeat 、 background-attachment、background-position、background Margin:margin-top、margin-right、margin-bottom、margin-left、margin Padding:padding-top、padding-right、padding-bottom、padding-left Border : border-top-width 、 border-right-width 、 border-bottom-width 、 border-left-width、border-width、border-top-color、border-right-color、 border-bottom-color、border-left-color、border-color、border-top-style、 border-right-style、border-bottom-style、border-left-style、border-style、 border-top、border-right、border-bottom、border-left Float、clear Display、list-style-type、list-style-image、list-style-position、list-style Clip、height、left、overflow、position、top、visibility、width、z-index Page-break-before、page-break-after Filter 和 Active、hover、import、cursor、link、vis ited

颜色和背景属性 布局属性

分级属性 位置属性 打印属性 过滤器属性 Pseudo-classes 其他属性

应用样式表的两个常用标记<div>和<span> 在html文档中经常会用到样式表的两个标记 <div>和<span> <div>标记表示分界,通过这个标记可以对文 本的元素进行分界格式化的处理。 <span>标记则定义了html文档的间隔,使用 <span>标记可以限定标记范围内元素的背景范 围(这也是应用样式表的结果)

创建一个级联样式表
创建一个级联样式表的一般步骤: 1.选择想要插入的元素和属性。 2.在文本编辑器中打开样式单 3.如果要修改已有的条目或为其增添一个属性, 则移到表单中的那个条目上,并按步骤(4)进 行处理。否则指定要修改的html元素选项 4.在“{”和“}”之间插入该选项的声明。例如 下面的声明至少浏览器用绿色显示特定的元素。 {color:green} 5.返回到步骤(3)继续编辑,否则保存样式 表

级联样式表的创建方式
上面介绍了样式表的一般创建步骤。实际上, 样式表的创建方法有很多种。可以在html中之间 创建,也可以通过文本编辑器或者专门的样式表 编辑器以外部文件的形式创建。 样式表的创建方式大体上分为五类 1.声明方式 2.限定范围方式 3.归类引用方式 4.联合声明方式 5.使用id方式

1.声明方式

声明方式可以把单个标记元素或者多个元素放 在一起,以同一类别的方式进行声明。所谓声明, 就是指直接对标记进行样式的定义。它的语法格 式为: 声明{样式规则} 或 声明1,声明2,……声明n{样式规则} 前面的表达式是对单独的标记元素进行样式设 定,样式规则就是内部级联样式表中所讲的以分 号分割各种属性和属性值的联合体,即“属性: 属性值;……”的形式。

后面一种是把多种标记做相同的样式规则处 理,即把它们当作样式相同的同一类。每两个 (标记声明)之间都要逗号“,”分隔开,它 的样式规则也是“属性:属性值;……”的形式。 这两种表达方式在级联式样式表种比较常用, 用法也相对简单。 例如对于单独的样式声明: P {font-size:18pt;margin-left:50px} 上面的样式声明设定了段落标记<p>的样式表 样式为:段落中字符大小为18pt,左边距50px。

而对于多种标记的样式声明,如果是同一类 的声明,样式规则将它们设定相同的样式。 例如: P,ul,ol{color:red;text-decoration:underline; Font-style:italic;font-weight:bold} 该段代码表示所有的标记<p>、<ul>、和 <ol>都应该遵守背景红色,字符加下划线,其 字体为斜体和粗体的样式规则。 实例:1.html

2.限定范围方式
这种样式表的创建方法是根据声明的某一标记, 把它的作用范围放到指定的标记元素之内。 语法格式为: 指定标记元素 产生样式标记元素{样式规则} 指定元素和产生样式标记元素之间要有空格,这 样按照样式规则产生的样式表就只在指定元素标 记范围内起作用了。 例如: P em{font-size:30pt;color:red;font-weight:bold} Ul li{font-weight:bold;color:yellow} Ol li{font-style:italic;color:yellow}

此段html代码可解释为: <em>标记内的样式为:字符大小为30pt,粗 体,字符的颜色为红色。但是它的的作用范围是 <p>和</p>标记,也就是说,只在两者之间有效, 放在其他地方则该样式表将失效,只按默认效果 显示。 对于无序列表中的每一个条目<li>标记所限定 的样式为:字符字体为粗体,字符颜色为黄色。 这种样式只在无序列表中有效。 同样的,有序列表中的每一个条目<li>标记所 限定的样式为:字符字体为斜体,字符颜色为黄 色,这种样式只在有序列表中有效。 实例:2.html

3.归类引用方式
该方式可以把不同的样式表描述为不同的类,这样 可以组合成任意的类供不同标记的引用。这种创建方法 极大地提高了样式表的灵活性和可扩充性。 语法规则: .类名称{样式规则} 在引用的时候,只需要使用标记的class属性来引用类 名称就可以了,即: <标记名 class=类名称> 需要注意的是,类名称前面的句点“.”符号一定不能 丢掉,而且这个符号不能写成与句号容易混淆的符号。 如: .11{font-weight:bold;color:red}

这个语句描述了红色粗体的字符。所有的标记属性 class都能够标志该标记所属的类别。在这里定义了样式 类名称class1,同样也可以定义成其他任意的名称。 大部分标记都有class属性,例如<p>标记、<span>标 记等,这样就可以引用样式表中创建的样式类来描述元 素的样式。例如: <p class=11>使用class属性</p> <span class=11>使用class属性</span> 这样就完成了样式引用。其中有一点需要注意:在 创建样式类时样式类名称前面一定要加上句点,而在标 记中引用时却不能在样式类名称前面加句点。 实例:3.html

4.联合声明方式
这种方式是对标记进行类声明,使得该标记只有使用相 应的类时才改变样式效果。 标记名称.类名称{样式规则} 标记名称和类名称之间一定要加上句点”.“,而不能添 加句点之类的相似符号。 例如: p.class1{font-size:15pt;font-weight:bold;color:purple} 此句代码表示对于<p>标记的class1类样式表描述了字 符大小为15pt,字符为粗体,字符颜色为紫色的样式。只 有当class1类被标记<p>引用的时候,<p>标记所指定范围 内的字符才能以类所标记的样式显示。和上面的归类引用 方式一样,class1也可以被定义成其他任意的名称,同时 也应该保证类名称容易理解。 实例:4.html

5.使用id方式
这种创建方法是利用了html文档中每一个标记元素都有惟一的 标志号”id“的特性,为样式表创建一个标志名称,标记就可以进 行惟一的引用来应用样式了。 语法格式如下: #id名称{样式规则} 在id名称前一定要加上“#”。Id名称可以是字母组合、数字组合 或者数字和字母的组合,只有“#”和id名称完整才能构成一个标准 的标准名称,而且“#”和id名称之间不能有空格,如果有空格则标 记即使引用了id名称也不能显示样式表定义的样式效果。 由于这里的id名称可以是任意的合法字符,所以灵活性就体现出 来了,即用户可以定义大量的带有不同id名称的样式表来描述元素 的样式。一般也要求id名称具有一定的意义而且比较简短,这样比 较容易理解。 #font1{font-style:italic;color:red} 实例:5.html

应用样式的两个常用标记—— <div>和<span>标记
<span>标记和<div>标记便于在html文件的某一部分中 应用样式,他们可以和class、id等属性连用。 例如: <span class=idname>网页元素</span> 可以应用样式表中idname类的样式。 Span和div的区别在于:div是一个块级元素,div可以 包含段落、标题、表格甚至其他部分,这使得div便于建 立不同集成的类,如章节、摘要或备注;而span是个行内 元素,如同<a>标记一样,span前后都不会换行。 Span没有结构的意义,它的存在纯粹是应用样式。当 其他的行内元素都不适用时,可以命名为span。 实例:6.html

第六章

样式表的继承和冲突

继承是css中一个非常重要的概念。 通过前面的学习,我们已经学会了怎么去创建一 个样式表,它们只是单独在html文档中的应用。这 种情况比较简单。Html还提供了样式表的嵌套,即 在一个标记范围内又有另一个标记而两种标记又使 用了不同的样式表,那么就可能出现内部标记所修 饰的元素具有外部标记所引用的样式表所描述的样 式,这就是样式表的继承,也就是,除了自身的样 式之外,这些被修饰的元素遗传了上一层标记所引 用样式表的样式。例如: <h1>这个标题<em>文本</em>很重要。</h1>

在上面的代码中,<h1>标记中包含了<em>标 记。现在假设把<h1>的颜色设置为蓝色,而不 去设置<em>颜色,那么<em>标记中的“文本” 将“继承”上级元素<h1>的样式设置,仍为蓝 色。这就是继承。 对于样式表的继承,其中的内部标记引用的样 式表与外部引用的一样。如果他们引用的 样式 表的定义不一样,那么对于内部的标记而言,它 将采用哪一种样式定义呢?例如对于上面的例子 <h1>这个标题<em>文本</em>很重要。</h1> 如果<h1>的颜色设置为蓝色,而<em>的颜色 色设置为红色,浏览器将显示什么呢? 这就是样式表的冲突。

样式表的继承
当子元素没用被定义样式的情况下,它将继承 上级元素的样式定义。 实例:1.html 通过1.html实例,可以看出,数字编号的列表 的每个条目除来自自身的粗体形式外,还继承了 无序列表斜体样式。

样式冲突的解决
对于样式冲突,在html文档中,样式表规则的最具体描述占 了优势,也就是说,浏览器会将最内层的样式作为当前显示的 样式,外层的规则(最广泛的规则)不如内层的规则(最具体 的规则)优先级高。 实例:2.html 由显示效果可以看出,对于嵌套在里面的数字编号列表而言, 有<ol>标记自己的样式 Ol{font-weight:bold;font-size:10pt},也有从它上一级继承而 来的样式 ul{font-size:20pt;font-style:iatlic;},而对于<li>刘德华下面的 <ol>标记而言,还有它自己定义的样式 <ol style=color:blue;text-decoration:underline>,最终显示结 果就是遵循内层规则优先级高的规则。 有了统一的规则解决样式冲突问题,就可以按照自己的喜好 设计样式表和网页了。

应用样式表
前面两个实例介绍了样式表的创建方法 以及发生样式冲突时的解决方法。下面介 绍如何在hmtl应用样式表。所谓应用样式 表,也就是指使用样式属性来改变标记元 素。使用普通的标记不能对元素进行精确 定义,现在可以使用样式表来解决这些问 题。

1.字体和文本属性 2.颜色和背景属性 3.布局属性 4.分级属性 5.位置属性

一.字体和文本属性
1.字体属性 与文字有关的属性描述如表所示
说明 Font-family 描述 描绘使用的字体优先级序列

Font-style
Font-variant Font-weight Font-size

指定选定字体的样式
选择正常或小写字体 指定所用字体的浓度 指定所用字体的大小

Font

提供多个字体属性的组合

(1).font-family 语法格式如下: {font-family:[[family-name|generic-family1],]*[familyname2|generic-famliy2]……} 浏览器通常决定web页面的默认字体族,它指定了某一范围 内可能应用的字体并以优先级排列。这样做主要是当不知道用 户所使用的计算机究竟安装了包含哪些字体的字库时,可以使 得该用户的浏览器自动根据font-family属性给定的字体优先顺 序来安排浏览器以何种字体显示文字。可以取famliy-name或者 generic-family两种形式中的一种。 字体族名称中间如果有空格则用半字线代替或者把整个名称 用引号进行标记,比如times new roman变成times-new-roman, 或者“times new roman” 例如: P{font-family:helvetica,new-century-schoolbook,cursive} 表示了使用<p>标记时,字体的优先级是helvetica,new centruy schoolbook、cursive。

(2).font-style 其语法格式如下: {font-style:normal|italic|oblique} 其中italic和oblique区别不是很大,都是表示字符为 斜体。本属性在前面介绍样式表的创建时已经使用过了。 (3).font-variant(变形) 其语法格式如下: {font-variant:normal|small-caps(小型大写字母)} 它可以使字符变得比标准字符小,而小的程度取决 于不同浏览器或者操作系统的默认值。这种方法对于上 标或者下标的显示有修饰的作用,因为上标或者下标都 是以小字符显示的。

(4).font-weight 其语法格式如下: {fontweight:normal|bold|bolder|lighter|100|200|300|400|500|6 00|700|800|900} 默认值为normal或者400,其中文字名称値表示了相 对的粗或细,而数值就表示了具体大小的粗细程度値。 Bold表示普通加粗,lighter表示细一些,而bolder则表 示更粗一些。使用方法与font-family相同。 (5).font-size 其语法格式如下: {font-size:关键字或数值或百分比値}

其中关键字可以取表示绝对大小的关键字:xx-small、x-small、 small、medium(中等的)、large、x-large、xx-large。这7种规 格与在html中设置字符大小的规格相似。如在ie中x-small所表示 的字符尺寸为24pt(点)。 关键字的默认值为medium。 在使用绝对长度(用pt(点)或in(英寸)等0)时,应考虑 到其不能很好的适应不同的浏览环境的弱点。 另外,还可以使用父元素字符大小的百分比来指定字符大小。 H1{font-size:large} P{font-size:12pt} Li{font-size:80%} H2{font-size:larger}

(6).font 使用font属性可以很方便地为字体设置多种属 性。语法格式如下: {font:字体属性} 字体的属性可以按字体风格(style)、字体变 形(variant)、字体加粗(weight)、字体大小 (size)、字体族的顺序(family)进行设定。 实例:3.html

2.文本属性 文本是网页中最常见的元素,上面已经讲了文字风 格的控制,而将文字集合在一起就成了文本。级联式 样式表提供的文本属性见下表
属性 Letter-spacing Line-height Text-align Text-decoration Text-indent Text-transform Vertical-align 描述 在文本的字母间加空格 指定目标选项内文本的行高 选择目标选项内文本的对齐方式 对文本施加修饰效果 按指定数值缩进文本 对文本进行大小写转换 将所选元素竖直放置

(1).letter-spacing(在文本的字母间加空格) 其语法格式如下: Letter-spacing:normal|长度 该属性的默认値为normal。长度应按下表的单元为单 位。实际指派的値决定了字符间距(除去默认距离外)
缩写 Cm Em Ex In Mm Pc Pt Px 单位类型 厘米 Ems Exes 英寸 毫米 Picas 点 像素 描述 M 字母的宽度 X 字母的高度

1 pica=12 点 1 点=1/172 英寸 显示单元

只要浏览器允许,还可以使用负值。此外, 如果字母间距被设置为0,则浏览器抑制调整整 行文本。如: <h3 style=“letter-spacing:10pt”>将文本间距设 置为10pt</h3> <h3 style=“letter-spacing:-5pt”>将文本间距设 置为-5pt</h3> 分别把字间距设置成10pt和-5pt。当设置成-5 时,文本不换行,字与字之间将发生叠加。 (2).line-height 用来指定的是相邻两行的基准线之间的垂直 距离,基准线指的是英文小写字母的下阶线。

本属性的语法结构为: Line-height:关键字和数值 这里的关键字可以是normal 使用数值时,有三种表示方法: ●用字符的倍数来设置行高,计算的方法是行高由 元素字符大小的量与所设的数字相乘所得。如果事先没 有设置字符的大小,则浏览器将利用字符的默认值来计 算行高的大小。 ●也可以用单位数值来设置行距。用这种方法设置 行距,可以得到一个绝对的行距,单位如前表所示。 ●当取百分比値时,是相对于元素字符的大小而定。 使用百分比値往往是网页的显示更安全的一个好选择。

<p style=“font-size:10pt;line-height:1.5”> <p style=“font-size:10pt;line-height:200%”> (3).text-align 表示文本的横向对齐设置,语法格式如下: Text-align:left|right|center|justify 其中justify表示从左及右对齐。 (4).text-decoration 使用此属性可以方便地为网页上的文本加上一些有趣的修饰, 如下划线、上划线、中划线甚至文字的闪烁效果。语法格式如 下: Text-decoratin:关键字 关键字的取值有: Underline:下划线 Overline:上划线 Line-through:删除线 Blink:闪烁 None:默认时表示无修饰

如: <h3 style=“text-decoration:underline”>给文 本添加下划线</h3> <h3 style=“text-decoration:overline”>给文本 添加上划线</h3> (5)text-indent 应用于块级元素(如p和h1等),以定义该元 素第一行可以接受的缩进的数量。语法如下: Text-indent:数值或百分比 属性的取值必须是一个长度值或一个百分比 数值。若取百分比数值,则根据上级元素的宽 度而定。通用的文本缩进用法是用于段落的缩 进。

(6).text-transform 此属性可以轻而易举地控制字母的大小写 语法格式:text-transform:关键字 其中关键字的取值有: None:不进行文本的换行,所有的字符效果将 被忽略,字符正常显示。这是关键字的默认值。 Capitalize:使每个单词的第一个字母大写显示 Uppercase:使所有字母大写 Lowercase:使所有字母小写 实例:4.html

(7).vertical-align 用于控制元素的纵向排列,即对象的垂直对齐方式。在 将垂直对齐的时候,一般是参照物的相对位置而言的,这 里的参照物可以是文字或者图像等等。语法格式如下: Vertical-align:关键字或者百分比値 这里关键字的取值有: Baseline:将所选的元素与参照物对象的基准线对齐。 Sub:使所选的元素以下标形式显示。 Super:使所选的元素以上标形式显示。 Top:使所选的元素与参照物对象的顶部对齐。 Text-top:使所选的元素与参照物对象的文字的顶部对 齐。 Bottom:使所选的元素与参照物对象的底部对齐。 Text-bottom:使所选的元素与参照物对象的文字的底 部对齐。

关键字在默认状态下取值为baseline 另外,该値还可以取作一个相对于元素行高属性 的百分比値,它会在上级基线上增高元素基线的 指定数量。 在操作垂直排列时,要明确哪一个是所选对象, 哪一个是参照对象,这样才能真正的达到预期的 效果。 综合实例:5.html

二、颜色和背景属性

级联式样式表在颜色使用上为网页制作者提供了很大的自由度。 事实上,你可以随意的创建自己的颜色体系并加到你的网页的背景、 文本、图像以及链接中去。只要有足够的想象力,样式表就可以提 供足够的手段。
颜色 黑色 银色 灰色 十六进制三元 组 #000000 #c0c0c0 #808080 颜色 水鸭绿色 蓝色 藏青色 十六进制三元组 #008080 #0000ff #000080

白色
绿色 石灰色

#ffffff
#00ff00 #008000

紫色
红褐色 红色

#800080
#800000 #ff0000

橄榄绿色
红色

#808000
#ffff00

紫红色
浅绿色

#ff00ff
#00ffff

1.颜色属性 样式单提供了color属性来指定特定类、html元 素和元素的特定类的前景色。语法如下: Color:颜色値 下面的html语句: H1{color:red} H1{color:1.0.0.0.0.0} H1{color:255.0.0} H1{color:#f00} H1{color:#ff0000} 均将<h1>标记的文本设置为红色

2.背景属性 样式单还提供了background属性来控制页面的背景颜 色,基本语法如下:
Background-color:transparent|<color>||<url>||<repeat>||<attchment>||<position>

其中默认值为transparent,将背景设置为透明。也就 是说,无论背景色原来是什么颜色,都会以透明的颜色显 示。同时,我们还可以将其设置为color属性的颜色値或 者url指定的背景填充模式。例如,下面的html语句分别 对有序列表<ol>和无序列表<ul>设定了背景:
Ol<background-color:#f00> Ul<background:url(http://263.net/pictures/1.gif)>

Background属性不能被包含的元素所继承。然而,由 于默认背景为透明,指定的背景可能仍会起作用。

若使用url指定一个图像背景,可使用下列几种 修饰符。 <repeat>:该选项可设置为下列文字:repeat、 repeat-x、repeat-y或no-repeat。如果未选择 <repeat>修改符,浏览器会以repeat作为默认值。 这些文字分别指定了背景图像是水平和垂直方向 都平铺、仅在水平方向上平铺、仅在垂直方向上 平铺以及两个方向都不平铺。如: Background:url(back001.gif) Background-repeat:repeat-y 说明了以back001.gif文件的图像为背景,且使该 图像在垂直方向上平铺。

<position>:通过该选项修改符可以指定图像背景与被修 改元素之间的相对位置。可以取值为top、bottom、left、 right和center。分别表示背景图像和它们的前景内容的顶 部、底部、左边、右边及中部对齐。另外,backgroundposition还可设定为长度单位或者百分比数值,采用坐标 的形式来定位。如: Background-position:top center Background-position:100 10 Background-position:100% 50% Background-position:20% bottom <attachment>(附着):该选项的修饰符为fixed或scroll。 其中scroll是默认值。该修饰符指示了背景图像固定不动 还是随网页一起滚动。 实例:6.html

三、布局属性
上面我们学习了在网页中加入颜色及如何控制网 页背景。这里我们学习网页的布局属性,以控制 你的网页布局,使它更加合理,看上去更整洁美 观。 所有布局属性见表

属性

描述 指定元素的清除请求 指定元素在何处漂浮

Border-properties
Clear Float

Height
Margin Margin-bottom Margin-left Margin-right Margin-top Padding

指定元素的高度
指定边界限定的简捷方式 设置底端边界 设置左端边界 设置右端边界 设置顶端边界 指定填充限定的简捷方式

Padding-top
Padding-left Padding-right Padding-bottom Width

设置顶端填充
设置左端填充 设置右端填充 设置底端填充 指定元素的宽度

在使用css样式表来设计网页时,其实是假设所有的元 素都被放置在一个个“矩形框架”中,也就是容器。容器 的中心是元素,它的周围依次是margin(边界)、border (边框)、padding(填充距),如下图
Margin(边界) border(边框) padding(填充区) content(元素主体)

布局属性 1.边界属性: 边界属性包括margin-top(上边界)、margin-bottom (下边界)、margin-left(左边界)、和margin-right (右边界),这四个属性的设置方法完全相同,所以只要 掌握了一个属性的设置方法,其他的完全相同。 以margin-top为例,它是用来设置对象的上边界的。语 法如下: Margin-top:关键字|数值 关键字设置为auto,表示由浏览器自动设置上边界。如 果设置为数值,则可以是指定的长度和百分比値,其中百 分比値参考上级元素的宽度。默认值为0. 如:margin-top:1cm; margin-left:2cm; margin-right:3cm; margin-bottom:-1cm

即分别将上、下、左、右边界设置为1cm、-1cm、 2cm、3cm,其中下边界被设置为负值,背景图片 就不能被完整的显示,图像的下部会被其他元素 切掉一部分。 按照上面的方法,必须同时指定四个相似的値来 设定对象的四个边界,这样做的效率极低。Css为 本属性提供了一套简写的约定:如果在设定的时 候四个边界值都给出了,那么他们分别代表了上 边界、右边界、下边界、左边界;如果只给出了 一个値,那么它被用于四个边界;如果只给出了 两个或三个边界值,那么被省略的一边就与其对 边的値相等;如果两个对象在垂直的方向发生了 重叠,则会以其中最大的那个边界为准。

如: Margin:10cm Margin:10cm 20cm Margin:10cm 20cm 30cm 第一句将所有的边界设置为10cm。第二句将上、 下边界设为10cm,左、右边界设置为20cm。第三 句将按照上、右、下、左的顺序来设置,故上边 界10cm、下边界30cm、左、右边界均为20cm。 实例:7.html 通过实例可知,上面边框是使用一般的方法即把 四个边界都设置出来,下面的规则是使用简捷方 法设置的边界。

2.边框属性 所有的边框属性见表
属性 Border Border-bottom Border-left Border-right Border-top Border-bottom-width 描述 简单指定填充限定 指定边框底边 指定边框左边 指定边框右边 指定边框顶边 设置边框底边的宽度

Border-left-width
Border-right-width Border-top-width Border-width Border-color Border-style

设置边框左边宽度
设置边框右边的宽度 设置边框顶边的宽度 设置边框整体的宽度 设置边框的颜色 设置边框的样式

所有的网页元素都有边框,只是默认时没有显示 出来,使用边框属性除了可以设定边框的宽度外, 还可以设定边框的颜色和样式。 (1).设定宽度 同边界的margin属性一样,css也提供了四个属 性对边框的宽度进行控制。这四个属性的用法也 完全相同。 以border-top-width为例,语法结构如下: Border-top-width:none|thin|medium|thick|数值 其中,none表示无边框,thin表示较细宽度, medium表示中等宽度,thick表示较粗,默认为 medium。

如果设置为数值,则可以设置为前面所讲的通用 长度单位,如pt、in、px等。 同margin属性一样,css也提供了border-width 属性用于设置边框的宽度。语法结构如下: Border-width:关键字|数值 简写约定为:如果在设定的时候四个边框的値都 给出了,那么它们一次代表上边框、右边框、下 边框和左边框的宽度;如果只有一个値,则被用 于四个边框;如果只给出了两个或者三个边框的 値,则省略的一边与其对边的边框値相等。基本 用法与margin属性相同。 (2).为边框加颜色 使用border-color来设置。语法结构如下: Border-color:颜色値

(3).给边框设置样式 使用border-style来设置。语法结构如下: Border-style:关键字 关键字有none(不设边框样式)、dotted(点虚 线)、solid(实心线)、double(双重线)、 groove(凹型线)、ridge(凸型线)、inset(嵌 入式)和outset(嵌出式),默认值为none。 这里关键字可以指定一个、两个、三个或者四个。 基本约定与前面的几个属性相同。 实例:8.html

3.填充距属性 Margin属性控制的是相对于其他元素的空间, 而padding属性控制的则是在元素的周边和内部所 空的空间,也就是元素的边框和元素本身之间的 间隔。 可以使用padding-left、padding-right、paddingtop和padding-bottom来分别控制左、右、上、下 的元素内部的周边空间。 以padding-left为例,语法结构为: Padding-left:数值 这里的数值可以是前面所述的长度单位,也可以 是百分比値,但不能是负值。 其余的几个属性的语法与padding-left完全相同。

4.高度和宽度属性 使用width和height属性来控制元素的高度和宽度,与 以前所学的使用方法相同。 5.图文编排属性 在很大场合中,需要同时对文字和图像进行操作。合理 的布局,加上图像的直观的表达,可以使你的页面更具有 吸引力和说服力。 Css提供了float属性来将文字安排在图片的周围以突出 文字的主题,也就是我们常说的文字环绕效果。其语法结 构如下: Float:关键字 关键字可以设置为none、left、right,分别代表对象元 素周围不突出、左边突出以及右边突出 实例:9.html

6.鼠标属性显示 鼠标是windows操作系统必不可少的工具。当打开程序 并等待启动时,鼠标随之变成了流沙计时器;当调整窗口 大小时,它变成了双箭头;当把鼠标放在文本区时,它又 变成了闪烁的光标。 Css提供了一种在网页上使用鼠标特技的属性—— cursor,可以用来轻松的改变鼠标的形状。它的基本语法 机构: Cursor:关键字 这里的关键字可以是auto(自动,按鼠标默认状态根据 页面元素自行改变形状)、crosshair(精确定位十字形)、 default(默认箭头)、hand(手形)、move(移动)、 e-resize(右方向箭头)、ne-resize(右上方向箭头)、 nw-resize(左上方箭头)、n-resize(上方向箭头)、wresize(左方向键头)、text(文本“I”形光标)、wait (沙漏形箭头)、help(带问好的箭头)。其实就是根据 “上北下南、左西右东”的形式定义方向。

四、分级属性
在css中,也可以使用分级属性来达到项目符号和编号 的功能 1.Display属性 用于设置一个网页元素是否在页面上显示出来,或者以 怎样的形式显示出来。这里的页面主要指浏览器屏幕上显 示的网页。本属性的语法结构: Display:关键字 关键字的取值共有四个:none、block、list-item和 inline。其中,none表示被作用的网页元素不显示;block 表示在页面上定义了一个新的容器。这个容器被定位于相 邻的容器;list-item和block一样,也是定义了一个新的容 器,不过这个容器前要加上一个项的html标记;inline用 于定义一个行内容器,页面在当前行内添加新容器。

2.list-style-type属性 本属性的目的是给每一个列表项目添加符号或者编号, 以便更好的区别各个列项。语法结构: List-style-type:关键字 有九个关键字可以使用,如表
样式 Disc Circle 描述 默认值:实黑点 空心圆圈

Square
Lower-roman Decimal

方形黑块
小写罗马数字 十进制数字

Upper-roman
Lower-alpha Upper-alpha None

大写罗马数字
小写字母 大写字母 无

3.list-style-image属性 有时需要图片代替简单的项目符号,以达到更好的视觉 效果,这时就需要使用list-style-image属性。语法结构如 下: List-style-image:图片的url 和其他的图片的指定地址一样,这里可以使用绝对地址, 也可以使用相对地址。 4.list-style-position属性 本属性用来决定列项第二行文字的对齐方式,即第二行 文字的起始位置。语法结构如下: List-style-position:关键字 关键字取值:outside(默认值),代表列项第二行文 字的左边距与列项的第一行项目的第一个字符对齐; inside,代表第二行文字的左边距与列项第一行项目的项 目符号对齐。

5.list-style属性 为例方便地一次性设定项目列表的全部样式, css还给出了list-style属性。语法结构如下: List-style:关键字1|关键字2|关键字3| 这里可以添加三个关键字,分别指定“list-styleimage”、“list-style-position”和“list-style-type”。 可以同时指定一个或三个关键字,而且添入的値 只要以空格分开即可,无需考虑它们之间的顺序。 实例:11.html

五、位置属性
Css的位置属性有:position、left、top、width、clip、 visibility、float、clear、overflow以及z-index等。通过这 些属性,我们可以对网页元素进行精确地定位和控制。 1.Position属性 语法结构如下: Position:absolute|relative|static 它们分别表示绝对定位、相对定位以及静态定位 2.Left和top属性 这两个属性比较容易理解,它们分别用来设置元素对象 距离上级元素左侧和上部的距离,语法结构如下: Left:数值|比例|auto;top:数值|比例|auto 这两个属性的默认值都是auto

例如: Div{position:absolute;left:100px;top: 40px} 将<div>标记的起始位置精确地定位在距离浏览 器左边100像素,距离其顶部40像素的位置上。 H3{position:relative;left:100px;top:30px} 则以上一个元素的左上角为坐标原点,将<h3> 标记的元素的位置移到左边100像素,下30像素的 位置。 3.Width和height属性 这两个属性决定了网页元素所在空间的大小。将 width和height属性以及left和top属性放在同一个示 意图中,以显示它们之间的关系,如图:

top

Left

元素

height

width

4.Clip属性 Clip属性一般被称为剪切属性,可以用来剪切网 页元素,只显示定义的那一部分,而剩余的部分 则被切除。语法结构为: Clip:rect(top,right,bottom,left) 具体来说,剪切是通过建立一个所谓的剪切区域 来实现的。这个剪切区域由rect(top,right, bottom,left)来定义,在这个矩形剪切区域之内 的任何东西都是可见的,矩形之外的任何东西都 不剪切掉,且不可见。 另外,clip属性必须是在display属性被设置为 absolute时才能起作用。 实例:12.html

5.Visibility属性 利用visibility属性可以隐藏网页元素,使其在页面上看不见。这 条属性对于采用定位和为定位的元素都适用。其语法结构为: Visibility:visible|hidden|inherit 这三个属性值分别表示使元素可以被看见、被隐藏以及继承上 级元素的可见性设置。默认值为inherit。 6.Overflow属性 如果所定义的元素内容超过了它的高度和宽度限制,我们可以 使用overflow属性来看着其内容的显示。语法结构如下: Overflow:visible|hidden|scroll|auto 默认值为visible。这四个属性值分别代表可见、隐藏、滚动条、 自动。 7.z-index属性 用来定义网页元素在立体方向(z轴)上的数值,对于显示器而 言,就是定义网页元素的层叠顺序。语法结构: Z-index:整数|auto

默认值为auto。若取值为auto,网页中的元素将 会按照它们在html源代码中出现的顺序,从底层 到顶层堆砌起来,即最后出现的元素将会显示在 页面的最外层。

表单的使用
通过前面所讲述的各个实例的学习,我们已经掌 握了制作一份精美主页的方法,它可以链接到遍布 www的许多页面。但是这里却存在一个问题:这些 制作网页或网站的绝大部分内容都是单方面的,也 就是说。只能是网页的制作者或者上网的用户进行 单方面的浏览,从中接受或者下载一些信息,但是 用户却无法向页面的作者反馈信息。他们无法让作 者了解到他们是如何喜欢他的页面,或是想给他提 点什么意见,比如要做些什么修改或者增加什么内 容等等。

Html提供了一种工具——表单,可以让用户和 页面作者之间能够更好的交流。通过表单,用户 浏览信息并发送信息到服务器,服务器则在得到 这些信息并处理完他们之后再返回给用户。 伴随着网络的发展,网上聊天、各种论坛、留言 板以及形式多样的用户信息登记随处可见。表单 在传递这种大量信息中发挥了至关重要的作用。 只有相互交流信息才能掌握最新的动态,而网上 交流就自然成了集思广益很多最好方式,因为所 有在网上的用户都可以一展自己的智慧。所有这 一切都和表单有关,表单内的信息可以通过服务 器发送到指定的位置。

表单的创建过程其实是双向的,第一部分是在要 建立表单的文档中添加html标记,这一部分通常 被称作前端。第二部分涉及到用诸如perl、java、 服务器方面的javascript或c语言创建一个处理表单 中所含信息的脚本,这一部分称为后端。我们平 时经常能听到诸如“后台管理”之类的名词,指 的就是这个。 表单中用到的标记主要有两个<form>和<input> 1.<form>标记 创建表单主要是通过<form>标记来实现 我们可以使用<form>……</form>标记和与之相 关的标记来建立

(1)文本域: (2)复选框: (3)单选按钮: (4)弹出菜单: 创建表单的基本格式为: <form action=“url” method=“” style=“css1”> 表单中的主题内容 </form> <form>标记的各属性说明如下: (1)action属性 用来处理表单数据,其属性值url用来指定处理 表单的应用程序。

(2)method属性 向服务器发送表单数据,其属性值为get(接收)或 (发送),用于通知以何种方式发送浏览器表单。Get可 将表单的内容作为查询url中的串(数据表现形式)来传 递,服务器使用querytstring集合来存储这些内容。Post 可通过action所指定的服务器程序对表单进行处理。 (3)style属性 指定使用的样式表,应用样式表来改变标记元素的样式。 (4)class属性 声明标记所定义的类 (5)id属性 标号属性,主要应用于样式表,可用来引用某一特定的 样式表,以描述标记元素的样式。它的值必须是惟一的, 否则此属性不起作用。

(6)name属性 为表单命名,这样服务器可以依据表单名称对其 数据进行处理。 (7)target Target=window_name|_blank|_parent|_self|_top 与前面框架实例中介绍的target属性用法一样。 它声明了目标窗口或者框架的位置。 (8)title属性 用来提供一些提示性的信息,当鼠标移动事件发 生时该提示信息将在标题栏中显示。 上面的八个属性,实际上常用的就是前面的三个 属性action、method、style属性。

2、<input>标记 <input>标记在表单中也占用重要的地位,它主 要用于产生表单中的具体元素,如文本框、密码 框和单选框等,这些元素实际上才构成了一个完 整的表单。所以,只有详细的理解了<input>标记, 才能创建一个比较完善的表单。 应用<input>标记的形式为: <input type=“*” maxlength=**> <input>标记的各属性说明如下: Type后面接的属性用于设定元素值,比如文本 的文字内容或者单选框的选项为第几个等。

当*=text时,表示为文本框,它可以输入提示文字或者 留言。 当*=password时,表示口令输入框,它为表单增加密 码对话框。 当*=submit时,表示提交按钮,用于把表单的内容提 交到服务器。 当*=reset时,表示为重置按钮,它可以使表单中的所 有元素数据为空或者回到初始状态。 (2)name属性 为type属性指定的元素提供了一个标志,以便引用它。 (3)maxlength属性 限制了输入字符的长度,主要用于<input>标记的type 设置为password和text时的情况。

一、创建一个简单表单实例 <html> <head> <title>学习表单的创建方法</title> </head> <body> <form method="get"> 请输入你的身份证号: <input type="text" name="cardnumber" size=50> <input type="submit" name="submit_button"> <input type="reset" name="reset_button"> </form> </body> </html> 实例:1.html

二、在表单中添加文本框、复选框、按钮、下拉 菜单、口令域 1.文本框 文本框用来使读者输入更多内容。要添加文本框, 在<form>……</form>标记中增加 <textarea>……</textarea>标记。 其基本语法为: <textarea name=“文本框名字” rows=行数 cols= 列数></textarea> 如要创建一个3行20列的名字叫textarea1的文本 框,则输入: <textarea name=“textarea1” rows=3 cols=20> 实例:2.html

2.复选框 复选框可以使用户在一个列表中选择多个选项。 它在表单中的添加方式同文本框一样,基本步骤 也一样,不同的是复选框是由<input>标记的type 属性来得到的,只有当type=“checkbox”才能建立 一个复选框。 基本语法如下: <input type=“checkbox” name=“”>选项文本 实例:3.html

3、单选按钮 与复选框的用法极为相似,惟一不同的就是这里 <input>标记中的type属性不是设置为checkbox, 而是radio。 基本语法: <input type=“radio” name=“”>选项文本 显示的效果也基本与checkbox相同。 在单选按钮中,一次只能选择任何一组单选按钮 中的一个按钮,因此整个一个组的按钮只能被赋 予一个名称,而复选框一次可以选多个按钮。 实例:4.html

4.口令域 用法同单选按钮和复选框基本相同,这里type属 性被设置为password。 基本语法为: <input type=“password” name=“名字” value=“值”> 其中name属性中的变量用来以后引用输入的内 容,以便检查。Size属性是口令文本域。Value属 性表示该域最初的设定值。 实例:5.html 当用户单击“提交查询按钮”时,包含在表单中 的信息就发送到http服务器中。为了查看该域中输 入的内容,可以使用赋给name属性的名字。

5、下拉菜单 在<form>……</form>标记之间使用 <select>……</select>标记可以建立一个下拉菜单, 而且可以使用<option>标记来标出每个可独立选用 的项。 创建下来菜单的基本步骤: (1)创建一个基本表单 (2)在<form>……<form>标记之间使用 <select>……</select>标记,然后在<select>标记间 增加几个<option>标记(有多少个下拉项,就需几 个<option>标记): 实例:6.html

6、选择文件的对话框 与复选框的用法类似,这里将<input>标记中的 type属性设置为file。基本语法如: <input type=“file” name=“” size= value > 实例:7.html 7、利用一个可单击的图像作为提交按钮 上面介绍的表单的sumit按钮都是文本按钮,看 起来很呆板。我可以通过<input>标记中的type属 性设置为image。其基本语法: <input type=“image” src=“url” name=“sumbit_button”> 实例:9.html

8、隐藏域表单 有时候要建立两个表单,而且由第一个表单的内 容决定第二个表单中的有些内容。由于不能访问 一个已提交的表单,这就需要使用的到隐藏域在 表单之间传递信息。这使用的是在<input>标记中 把type属性设置为hidden。其基本语法如下: <input type=“hidden” name=“” value=“”> 当创建了这样一个隐藏的域后,你就创建了一个 可以存放信息的空间,读者不会看到和使用这个 空间,但是脚本可以使用它。我们可以像对待其 他任何域一样访问这个域。

三、向服务器发送数据 建立一个表单后,它怎么向http服务器发送信息 呢?这里用的是method属性的get和post方法。 基本步骤如下: (1)考虑要在表单中包含什么,以及如何布局 表单。 (2)考虑用来发送信息的两个方法:get和post。 最常用的是post。 Get方法将表单的内容作为查询url中的一个串来 传递。服务器将该串放在环境变量query_string中。 Post方法通过由action命名的cgi脚本的标准输入 流将内容作为一个数据块发送出去。该串的长度 存储在环境变量content_length中。

页面的分框显示

如果要做一个很大的页面,所有的页面元素不可 能放在一个页面中,这样让人总有种凌乱和没有层 次的感觉,而如果将不同的内容放在不同的窗体中, 效果会如何呢?另外,在某些时候,当我们需要将 几个文档进行比较时,总是很烦于在几个窗口之间 换来换去,如果将其放置于同一个大窗口的几栏中 进行直接比较,就很方便了。如果要做到这一效果, 我们必须使用框架技术。框架将画面分成数个小窗 口,而各个小窗口中,又可以显示不同的页面,达 到在浏览器中同时浏览不同网页的效果。

当用户将一个浏览器画面分割成数个窗口后,各窗口将 扮演不同的功能。举例来说,分割后的窗口,可以运用其 中一个作为主要显示网页内容的主画面,而另一个则作为 菜单,控制主画面中显示的网页。这样的设计显然比起单 一个窗口的网页设计来得人性化,用户也可以在数个网页 间任意切换。 将整个浏览器分割的窗口框架,主要利用<frameset>标 记和<frame>标记来定义。其中<frameset>标记用于定义 一个窗口框架组件,而<frame>标记用于定义窗口框架中 某个子窗口组件。因此,一组窗口框架的标准格式如下: <frameset> <frame> <frame> …… </frameset>

但是注意,有<frameset>标记所定义的窗口框架 组件,相当于<body>标记所定义的文件主题组件, 因此<frameset>标记不可包含在<body>标记中, 否则,<frameset>标记将会无法正常作用。因此, 运用<frameset>标记建立窗口框架时,仅可包含于 <html>标记中。而用于定义窗口的<frame>标记, 并没有结束标记,该标记的使用方式,仅为在标 记中通过各种属性的设定,以控制所代表的窗口 框。

1.<frameset>标记 2.<frame>标记 3.创建一个简单的框架 4.框架的特殊效果

一、<frameset>标记
<frameset>标记的属性有: 1.Cols属性 cols=像素值 以像素值表示此框架的宽度。或: Cols=n% N为整数,表示将所列页面按纵向窗口排列,各个窗口按所设定 的百分之n比例在页面上排列。 2.Rows属性 与cols的用法完全一致,有两种方式表示。 Rows=像素值 以像素值表示此框架的高度。 Rows=n% N为整数,表示将所列页面按横向窗口排列,各个窗口按所设定 的百分之n比例在页面上排列。

3.Bordercolor属性 Bordercolor=#rrggbb 属于窗口的外部属性,表示窗口框架的颜色。其 中颜色设置与以前学习的设置方法一样。 4.Framespacing属性 Framespacing=n N为整数,属于窗口的外部属性,表示所以窗口 的边界所设定的整数(即n)个空白间隔符。 使用<frameset>标记的属性值,可以将窗口横向 分成几部分,也可以纵向分成几部分,还可以混 合分框。

二、<frame>标记
1.Name属性 Name是一个可选项,它给框架指定一个名字, 使得框架能被其他的文档或链接所使用。所有的 名字都必须由一个字母或数字开始。另外,也可 以设置成下述名字: Blank:总是将这个链接载入新的未命名的窗口 Self:总是将这个链接载入它自身。 parent:总是将这个链接载入到它的父窗口,若 没有父窗口,则载入其自身。 top:通常装载这个链接到最高水平,若已在最 高水平,则装载到它自身。

2.Marginwidth属性 Marginwidth=n(n为整数) 3.Marginheight属性 Marginheight=n(n为整数) 窗口的内部属性,与marginwidth一样,只是它 控制的是框架上、下的页边距。 4.Frameborder属性 Frameborder=yes/no

属性窗口的内部属性,表示窗口是否需要边框 (1为yes,0为no)。 5.Scrolling属性 Scrooling=yes/no/auto

属于窗口的内部属性,表示窗口是否需要滚动条 (默认为auto)。当设置为yes时,表示框架始终 都有滚动条,值no则表明不要滚动条,而值auto则 意味着当需要时自动添上滚动条。 6.Noresize属性 如果此属性出现在标记语句中,那么用户将不可 能再改变框架的大小。如果缺省,则框架的大小 可以改变。

三、创建一个简单的框架

横向分框显示效果

混合分框显示效果

以混合框架为例,创建框架的一般步骤 1.为各个窗口框架准备好要显示的页面 2.创建框架集文件 实例:1.html

四、框架的特殊效果
1.去掉框架 使用target可以建立一个从某个框架到一个框架上的页的链接。 此属性附属于<a href=“”>……</a>标记。其中target是一个框架的 名字(像在标记<frame>中使用的name属性一样),或者可以设置 成如下表中的值。
值 _top _parent _self _blank 意义 使用href中指定的url装载入整个浏览器窗口,因而将去掉任何框架 使用href中指定的url装载入框架集的父框架中 使用href中指定的url装载到当前窗口 使用href中指定的url装载入一个新的未命名的浏览器窗口

建立从框架到不在框架的文档上的链接的一般步 骤: 1.建立一个包含框架的文档。 2.在其中的框架中加入<a href=“”>标记 3.设置target属性。 <a href=“url” target=“_top”>显示文本</a> 4.保存文档查看效果 实例:1.html

2.使用一个框架索引另一个显示详细信息的框架 在上面创建一个简单框架的实例中,我们学习了 将web页分成3部分的技术。平时我们常常能看到 一些网页使用框架将浏览器分成两部分,其中一 部分包含一个索引或一张表,给养护一些选项, 另一部分则根据用户在前一部分的选择显示相应 的信息。 实例:2.html(本例采用最简单的两个框架的布 局,左边的框架拥有一个索引,右边的框架则是 显示用户在左边框架中选择的结果)

3.如何在页面中建立一个浮动的框架 所谓浮动的框架,就是能像对待一个图像一样去对待框 架,即可以将之内嵌到文档中去。 在html中,这是通过<iframe>……</iframe>标记来实 现的。当浏览器遇到一组<iframe>……</iframe>标记时, 它建立一个框架并将src中指定的文件装载到框架中。 <iframe>标记的属性如下: Align=left|center|right Frameborder=1|0(1表示有边框) height、width、marginheight、marginwidth、 name=“在target要用的名字”、src=“url” Scrolling=“yes|no” 实例:iframe.html(使用iframe)

4.框架边框的控制 对于框架边界而言,既可以不要它,也可以设置 它的大小等属性来改善显示效果。控制框架边界 的基本步骤: 1.设计好文档布局,建立拥有该框架的文档。 2.在<frameset>标记中将framespacing属性设置 为有效数值,表示框架之间的距离,其单位像素。 设置frameborder为0,则显示效果没有边框。 <frameset cols=“30%,*” frameborder=0 framespacing=20>

使用层

理解层
通过 Dreamweaver,用户可以使用层来设计页面的布局。用户可以 将层前后放置,隐藏某些层而显示其它层,以及在屏幕上移动层。 用户可以在一个层中放置背景图像,然后在该层的前面放置第二个 层,它包含带有透明背景的文本。 利用层可以非常灵活地放置内容。但是,Microsoft Internet Explorer 4.0 和 NetscapeNavigator 4.0 之前版本的 Web 浏览 器无法显示层,而这两种第 4 版的浏览器显示层的方式并不完全 一致。 当用户在文档中放置层时, Dreamweaver 将在代码中插入该层的 HTML 标签。用户可以选择让Dreamweaver 将 div 标签或 span 标 签用于用户的层。默认情况下, Dreamweaver 会使用 div标签创 建层。

插入层
Dreamweaver 使用户可以方便地在页面上创建层并精确地将层定位。 当插入一个层时,“设计”视图中会显示层代码标记。Dreamweaver 将默认显示该层的边框,并在指针滑过该块时高亮显示该块。

若要连续绘制一个或多个层,执行以下操作:
1 在“插入”栏的“布局”类别中单击“绘制层”按钮。 2 在“文档”窗口的“设计”视图中,执行下列操作之一:

? 拖动以绘制一个层。
? 通过按住 Control 键并拖动来连续绘制多个层。只要不松开 Control,就可以继续绘制新的层。

若要在文档中的特定位置插入层,执行以下操作:
? 将插入点放置在“文档”窗口中,然后选择“插入” > “层”。 若要在层中放置插入点,执行以下操作:

? 在该层边框内的任意位置单击。该层的边框会高亮显示,并将出现 选择柄,但该层本身尚未选定。

嵌套层
嵌套层是其代码包含在另一个层中的层。嵌套通常用于将层组织在一 起。嵌套层随其父层一起移动,并且可以设置为继承其父级的可见性。 可以打开“嵌套”选项,这样,当用户从另一个层内开始绘制层时将 实现层的自动嵌套。

若要绘制嵌套层,执行以下操作: 1 在“插入”栏的“布局”类别中单击“绘制层”按钮。 2 在“文档”窗口的“设计”视图中,拖动以在现有层中绘制层: 如果已经在层首选参数中关闭了“嵌套”功能,通过按住 Alt 键 并拖动在现有层中嵌套一个层。 提示:在不同的浏览器中,嵌套层的外观可能会有所不同。当创 建嵌套层时,在设计过程中频繁地检查它们在不同浏览器中的外 观。 若要插入嵌套层,执行以下操作: ? 在“文档”窗口的“设计”视图中将插入点放置在一个现有层中, 然后选择“插入”>“层”。

查看和设置单个层的属性
当用户选择一个层时,属性检查器将显示层的属性。

若要查看和设置层属性,执行以下操作:
1 选择一个层。 2 在属性检查器(“窗口” > “属性”)中,单击右下角的扩 展箭头(如果它尚未展开),以查看所有属性。 3 根据需要设置属性来更改层的属性。

管理层
用户可以选择层,然后对层进行处理。可以更改层的堆叠顺序和可见 性。“层”面板为管理层提供了方便的方法。 使用“层”面板 通过“层”面板可以管理文档中的层。使用“层”面板可防止重叠, 更改层的可见性,将层嵌套或堆叠,以及选择一个或多个层。 层显示为按 z 轴顺序排列的名称列表;首先创建的层出现在列表的 底部,最新创建的层出现列表的顶部。

若要打开“层”面板,执行以下操作:

? 选择“窗口” > “层”。
若要显示或隐藏嵌套层,执行以下操作: ? 单击层名称旁边的加号或减号按钮 。嵌套的层显示 为连接到父层的名称。

选择层
用户可以选择一个或多个层进行操作或更改它们的属性。 要在“层”面板中选择一个层,执行以下操作:

? 在“层”面板(“窗口” > “层”)中,单击该层的名称。
若要在“文档”窗口中选择一个层,执行以下操作之一: ? 单击一个层的选择柄。如果选择柄不可见,在该层中的任意位 置单击以显示该选择柄。 ? 单击一个层的边框。 ? 在一个层中按住 Ctrl-Shift 键并单击 。 如果已选定多个层,此操作会取消选定其它所有层而只选择用户 所单击的层。 ? 单击层代码标记(在“设计”视图中),该标记表示该层在 HTML 代码中的位置。

若要选择多个层,执行以下操作之一: ? 在“层”面板(“窗口” > “层”)中,按住 Shift 键并单击两个或更多的层名称。 ? 在“文档”窗口中,在两个或更多个层的边框内(或边 框上)按住 Shift 键并单击。当选定多个层时,最后选 定层的大小调整柄将以黑色突出显示。其它层的大小调整 柄则以白色显示。

更改层的堆叠顺序
使用属性检查器或“层”面板可更改层的堆叠顺序。“层”面板列 表顶部的层将位于堆叠顺序的顶部,并且会出现在其他层之前。 在 HTML 代码中,层的堆叠顺序或 z 轴确定层在浏览器中的绘制顺 序。用户可以使用“层”面板或属性检查器来更改每个层的 z 轴。 若要在“层”面板中更改层的堆叠顺序,执行以下操作: 1 选择“窗口” > “层”,打开“层”面板。 2 执行下列操作之一: ? 将层向上或向下拖至所需的堆叠顺序。当用户移动层时会出现一 条线,它指示该层将出现的位置。当放置线出现在堆叠顺序中的所 需位置时,松开鼠标按钮。 ? 在 Z 列中,单击要更改的层的编号;然后键入一个更高的编号, 沿着堆叠顺序向上移动该层,或者键入一个更低的编号,沿着堆叠 顺序向下移动该层。

若要用属性检查器更改层的堆叠顺序,执行以下操作: 1 选择“窗口” > “层”,打开“层”面板以查看当前堆叠 顺序。 2 在“层”面板或“文档”窗口中选择一个层。 3 在层的属性检查器(“窗口” > “属性”)中,在 Z 轴 文本框中键入一个编号。 ? 键入一个较大的数字可将该层在堆叠顺序中上移。 ? 键入一个较小的数字可将该层在堆叠顺序中下移。

更改层可见性
当处理文档时,可以使用“层”面板手动显示和隐藏层,以 查看页在不同条件下的显示方式。 注意:当前选定层总是可见的,它在被选定时会出现在其他 层的前面。 若要更改层可见性,执行以下操作: 1 选择“窗口” > “层”,打开“层”面板。

2 在层的眼形图标列内单击可以更改其可见性。 ? 眼睛睁开表示该层是可见的。 ? 眼睛闭合表示该层是不可见的。 ? 如果没有眼形图标,该层通常会继承其父级的可见性。(如果 层没有嵌套,父级就是文档正文,而文档正文始终是可见的。) 另外,如果未指定可见性,则不会显示眼形图标(这在属性检查 器中表示为“默认”可见性)。 若要同时更改所有层的可见性,执行以下操作: ? 在“层”面板(“窗口” > “层”)中,单击该列顶部的标题眼 形图标。

操作层
当处理页面布局时,可以对层进行选择、移动、大小调整和对 齐。在对一个层进行移动、大小调整或对齐之前,必须先选择 该层。 若要防止在对层进行移动和大小调整时使层相互重叠,使用 “防止重叠”选项

调整层大小
用户可以调整单个层的大小,也可以同时调整多个层的大小以 使它们具有相同的宽度和高度。

若要调整层的大小,执行以下操作: 1 在“设计”视图中,选择一个层。 2 执行以下操作之一以调整层的大小:

? 若要通过拖动来调整大小,拖动该层的任一大小调整柄。
? 若要一次调整一个像素的大小,在按箭头键时按住 Ctrl 键 (Windows) 。

箭头键可以移动层的右边框和下边框;对于此方法,不能使用 上边框和左边框来调整大小。
? 若要按网格靠齐增量来调整大小,在按箭头键时按住 Shift-Ctrl 键 。 ? 在属性检查器(“窗口” > “属性”)中,键入宽度 (W) 和高度 (H) 的值。

若要同时调整多个层的大小,执行以下操作: 1 在“设计”视图中,选择两个或更多个层。 2 执行下列操作之一: ? 选择“修改”>“对齐”>“设成宽度相同”或“修改”>“对 齐”>“设成高度相同”。首先选定的层符合最后一个选定层(黑色 突出显示)的宽度或高度。

? 在属性检查器(“窗口” > “属性”)中的“多个层”下输入宽 度和高度值。这些值将应用于所有选定层。

移动层 用户可以按照在大多数图形应用程序中移动对象的方法在“设计”视图 中移动层。如果已启用“防止重叠”选项,在移动层时将无法使层相互 重叠。 若要移动一个或多个选定的层,执行以下操作: 1 在“设计”视图中,选择一个或多个层。 2 执行下列操作之一:

? 若要通过拖动来移动,拖动最后一个选定层(的选择柄。
? 若要一次移动一个像素,使用箭头键。 对齐层

使用层对齐命令可按最后一个选定层的边框来对齐一个或多个层。当对 层进行对齐时,未选定的子层可能会因为其父层被选定并移动而移动。 若要避免这种情况,不要使用嵌套层。
若要对齐两个或更多个层,执行以下操作:

1 在“设计”视图中,选择该层。
2 选择“修改” > “对齐”,然后选择一个对齐选项。

把层转换为表格 执行下列的步骤 1.选择菜单修改-转换-层到表格 2.在弹出的对话框中,选择想要表格布局的选项。 I、最精确:为每一层建立一个表格,以及为保持层与层之间的间隔必须 的附加单元格。 II、最小:合并空白单元格 使用透明的gif:用透明的gif图像填充表格的最后一行。这样可以确保表 格在所有浏览器中的显示相同。如果选择本项,将不可能通过拖拽生成的表格的 列来改变表格的大小。不选择本项,转换成的表格中不包含透明的gif图像,但 在不同的浏览器中,它的外观可能稍有不同。 在页面居中:生成的表格在页面上居中对齐。如果不选择本项,表格左 对齐 III、放在层重叠:选择本项可以防止层重叠 IV、显示层面板:选择本项,在转换后显示层面板 V、显示网格:转换后显示网格 VI、对齐网格:选择本项,启用对齐网格的功能。

css的应用

认识css样式 随着网站内容的不断丰富,网页上的图像、动画、字幕以及其他控件也不断 增加,这时就提出了一个问题,如何实现这些元素在网页中的准确定位?传统的 网页工具已经显得力不从心。1996年,css应运而生,它很好的解决了这个问题。 css是一种样式表(stylesheets)的技术。它的全称应该是级联样式表,即 cascading style sheet的缩写,又常称之为风格样式单(style sheet ),顾名思义, 就是用来进行网页风格设计的。

比如,我想让我链接字末端单击时是蓝色的,当鼠标移上去后字变成红色且 有下划线,这就是一种风格。通过设立样式表,可以统一的控制html中各标志的 显示属性。它将对布局、字体、颜色、背景和其他图文效果实现更加精确的控制。 通过只修改一个文件就可以改变一批网页的外观和格式,保证在所以浏览器和平 台之间的兼容性,用于更少的编码、更少的页数和更快的 下载速度。
除了能全面支持常用的大多数浏览器外,css在实现其他承诺方面做得相当出 色。Css在改变制作样式表的方法,并为大部分的网页创新奠定了基石。

Css的作用 1.可以将格式和结构分离 html从来没有打算控制网页的格式或外观。这种语言定义了网页的结构和个 别要素的功能,而让浏览器自己决定应该让各要素以何种摸样显示。但是随便的 使用html样式会导致代码乱七八糟,编码变得越来越臃肿不堪。

串接样式表解决了这个问题,它通过将定义结构的部分和定义格式的部分分 离。能够对页面的布局施加更多的控制,这样,代码可以保持简单明了的初衷。 也就是把css代码独立出来从另一个角度控制页面外观。
2.以前所未有的能力控制页面的布局 <font size>能调整字号,表格标签可以生成边距,但是,对html总体上的控 制却很有限。不可能精确地生成80像素的高度,不可能控制行间距或字间距,不 能在屏幕上精确定位图像的位置,但是现在,样式表使这一切都成为可能。

3.可以制作出体积更小下载更快的网页
样式表只是简单的文本,就像html那样。它不需要图像,不需要执行程序, 不需要插件。有了css之后,以前必须求助于gif的事情现在通过css就可以实现。 还有,使用串联样式表可以减少表格标签及其它加大html体积的代码,减少图像 用量从而减少文件尺寸。

4.可以更快更容易的维护及更新大量的网页 没有样式表时,如果想要更新整个站点中所有主体文本的字体,必须一页一 页地修改每张网页。即便站点用数据库提供服务,仍然需要更新所有的模板,而 且更新每一模板中每一个实例的<font face>。样式表的主旨就是将格式和结构分 离。利用样式表,可以将站点上所以的网页都指向单一的一个css文件,只要修改 css文件中某一行,那么整个站点都会随之发生变动。

5.浏览器成为更友好的界面
不像其它的网络技术,样式表的代码有很好的兼容性,也就是说,如果用户 丢失了某个插件时不会发生中断,或者使用老版本的浏览器时代码不会出现杂乱 无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。

Css分类 就css应用的形式来说,css一般分为两类,嵌入式和外部链接式

●嵌入式:就是在独立的文档应用css样式。
●外部链接式:应用于多个文档,生成专门的*.css文件 创建新css样式 Css最大的有点就是它的自动更新功能。当应用css格式之后,如果不满意,仅修 改css样式即可更新所有的应用,而不用像设置html样式那样还哟啊一个一个地修 改。 1、单击菜单窗口→css样式面板,打开css style面板。 2、单击样式面板中的新建样式表按钮。 3、单击确定,出现css设置对话框

4、设置相应的属性。单击确定。

编辑现有的样式
●内部css样式的修改:双击要编辑的样式即可。 ●外部链接的css样式的修改,则执行以下步骤: 1.打开css样式面板,选择要编辑的样式。 2.单击css样式面板右下角的编辑样式按钮,打开编辑样式编辑列表。 3.选择要编辑的外部样式,从菜单中选择编辑,这时会打开css样式设置对话框。 4.在对话框中进行相应的修改,修改完毕,按下ok按钮,确定操作。 应用css样式

I、应用嵌入式css样式表
1.如果要设置段落格式,可以将插入点放置于段落中,如果要设置多个段落的格式,则需 要选中这些段落;如果要设置字符格式,则需要选中这些字符。 2.在css样式面板中,选中某个样式。 II、应用外部链接式css样式 1.打开css样式面板 2.单击css样式面板右下角的附加样式表

3.此时出现链接外部样式表对话框,选取保存过的外部css样式表,单击确定按钮。

删除样式表 1.在css样式面板中,选中要删除的样式。 2.单击css样式面板右下角的删除样式按钮,或者从面板菜单中选择删除命令。 3.这时有时间即被删除,同时从样式列表中删除。

定义css
8个css样式面板 1.类型面板

(1)、功能介绍:可以定义样式的基本类型设置
(2)、参数设置: 1.字体:为样式设置字体类型 2.字号:定义文本字体的大小。可以通过选择数字和单位来指定字体大小,也可 以选择相对的字体大小。 3.样式:指定样式为普通、斜体、偏斜体。 4.行高:设置文本所在位置的行高。选择普通将自动计算字体的行高,否则可以 输入一个精确值并选择其计算单位。 5.装饰线:使用上划线、下划线、删除线装饰文本。

6.粗细:对字体应用指定的或相对的粗细程度。普通等于400,粗体等于700. 7.变量:它可以使字符变得比标准字符小,而小的程度取决于不同浏览器或者操 作系统的默认值。 8.大小写:首字母大写、大写、小写。 9.颜色:定义文本颜色。

2、背景面板 (1)、功能介绍:可以定义样式的背景设置 (2)、参数设置: 1.设置元素的背景颜色。 2.背景图像:设置元素的背景图像。 3.重复:当背景图像不足以填满页面时,决定是否重复和如何重复背景图像。 4.附件:最初的位置,还是同内容一起滚动。请注意有些浏览器可能会将固定选 项作为滚动选项看待。 5.水平位置和垂直位置:指定背景图像相对于文档窗口而不是相对于元素。

3.区块面板 (1):功能介绍:可以定义样式的空格和对齐方式。 (2):参数设置: 1.单词间距:在文字之间添加空格。 2.字母间距:在字符之间添加空格。

3.垂直对齐:指定元素的垂直对齐方式。通常是相对于上一级而言的。
4.文本对齐:决定文本如何在元素内对齐。 5.文字缩进:指定首行缩进的距离,指定为负值时则等于创建了文本的凸出,但 是其显示则取决于浏览器。 6.空格:设置在应用样式的元素中出来空格的方式。

4.方框面板 (1)、功能介绍:可以定义样式设置以控制页面上的元素布局 (2)、参数设置: 1.宽度和高度:决定元素的大小尺寸,只有在被应用于图像或层时,窗口中才会 显示该属性。 2.浮动:移动元素(但是页面并不移动)并将其放置在页面边缘的左侧或右侧。 其他环绕移动元素则保持正常。只有在被应用与img标签时,才会显示该属性。

4.清除:定义元素的那一边不允许有层。如果层出现在被清除的那一边,则(设 置了清除属性的)元素将移动到层的下面。只有在被应用于img标签时,才会显示该属性。

5.边界:定义元素的边框(如果没有边框则为填充)和其他元素的空间大小,只 有在被应用于文本块一类的元素(例如段落、标题、列表等)时,才会显示该属性。

5.边框面板 (1)、功能介绍:可以定义样式设置以控制围绕元素的边框。 (2)、参数设置: 1.样式:决定边框样式,其显示则取决于浏览器,该选项可以设置边框的每条边 的样式。 2.宽度:设置元素边框的粗细。 3.颜色:设置边框对应位置的颜色。可以分开设置边框每条边的颜色,显示取决 于浏览器。

6.列表面板 (1)、功能介绍:可以定义样式的空格和对齐方式。

(2)、参数设置:

1.类型:决定项目符号或编号的外观。 2.项目符号图像:允许指定项目符号的自定义图像。 3.位置:决定列表项换行时是缩进还是边缘对齐。

7.定位面板

(1)、功能介绍:可以改变选定文本的标签或文本块,文本块变为新层,并且使用在层 参数中设置的默认标签。
(2)、参数设置: 1.类型:在该下拉列表框中选择设置浏览器放置分层的方式。 2.显示:在该下拉列表框中选择设置分层的初始化位置。 3.宽和高:设置分层的宽度和高度。 4.z轴:设置分层的重叠顺序。 5.溢出:在该下拉列表框中选择设置浏览器对分层中的内容超出分层边界的处理 方式。 6.定位:设置分层的位置。

7.扩展面板 (1)功能简介: (2)参数设置: 1.分页:设置在打印页面时强制分页的设置。其中,之前下拉列表框设置的是分 页前的位置,之后下拉列表框设置的是分页后的位置。两者都有自动、始终、左对齐和右 对齐4种方式。需要注意的是,该区域设置的样式只有在高版本的浏览器中才能正确显示。 2.视觉效果:主要设置一些视觉效果。其中,光标下拉列表框设置鼠标指针指到 应用样式的元素时的形状,过滤器下拉列表框设置应用样式的元素的一些特殊效果。需要 注意的是,该区域设置的样式只有在高版本的浏览器中才能正确显示。 3.滤镜:对由样式控制的对象应用特殊效果,包括模糊和反转。

8.滤镜介绍 一: alpha (1)、功能简介:把一个目标元素与背景混合。通俗的说就是一个元素的透明度。 (2)、参数说明: 1.opacity:代表透明度水平。默认的范围是从0到100,0代表完全透明,而100代 表完全不透明。 2.finishopacity:是一个可选参数,如果想要设置渐变的透明效果,就可以使用它 来指定结束使得 透明度。范围也是0到100.

3.sytle:指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放 射状、3代表长方形。

4.startx和starty代表渐变透明效果的开始x和y坐标。
5.finishx和finishy代表渐变透明效果的结束x和y坐标。 二:blur

(1)、功能介绍:产生模糊的效果
(2)、参数说明: 1.add:是一个布尔判断true(默认)或者false。它指定图片是否被改变成印象派 的模糊效果。 2.direction:模糊效果是按照顺时针的方向进行的,其中0代表垂直方向,然后每 45度为一个单位。 3.strength:它代表有多少像素的 宽度将受到模糊影响。默认值是5个像素。 三:chroma (1)、功能介绍:设置一个对象中指定的颜色为透明色。 (2)、参数说明: 1.color:想要设置为透明色的值。可以使用#rrggbb的形式。 四:dropshadow:

(1)功能介绍:投影效果 (2)参数说明: 1.color:代表投射阴影的颜色。指定的方法可以使用#rrggbb。 2.offx和offy:是x方向和y方向阴影的偏移量。偏移量必须用整数值指定。如果指 定正数值,那么代表x轴的右方向和y轴的向下方向。负值则正好相反。

3.positive:是一个布尔值。如果值为true(非0),那么就为任何的非透明像素建 立可见的投影。如果值为false(0),那么就为透明的像素部分建立可见的投影。
五:fliph和flipv (1)功能介绍:建立水平和垂直翻转的效果。 六:glow (1)、功能介绍:对象的边缘产生类似发光的效果。通过定义数值可以指定这种效果的 颜色和力度等级。 (2)、参数说明: 1.color:指定发光的颜色,可以使用#rrggbb的形式。 2.strength:强度的表现,可以使用从1到255之间的任何整数值来指定这个力度值。 七、grayscale

(1)功能介绍:把一张图片转变为灰度图。 (2)参数说明: 1.gray:当使用gray属性时,就可以降低图片的颜色信息,使其转变为灰度图, 俗称黑白图。 八、invert

(1)功能介绍:可以把对象的可视化属性全部翻转,其中包括色彩、饱和度和亮度值。 这就是平时说的底片或者负片效果。
九、mask (1)功能介绍:可以为对象建立一个覆盖于表明的膜。 (2)参数说明: 1.color:添加颜色。 十、shadow

(1)功能介绍:可以在指定的方向建立物体的投影。
(2)参数说明: 1.color:指定投影的颜色。 2.direction:设置投影的方向。0代表垂直向上,然后45°为一个单位。它的默认 值为270°

十一、wave (1)功能介绍:把对象安装垂直的波形样式打乱。 (2)参数说明: 1.add:表示是否要把对象按照波形样式打乱。这个参数的默认值为true(非0), 也就是打乱对象。也可以设置它的值为false(0)。

2.freq:是波纹的频率,也就是指定在这个对象上面一共需要产生多少个完整的
波纹。 3.lightstrength:可以对于波纹增强光影的效果。它的参数值范围是从0到100的整 数值。

4.phase:设置正弦波开始的偏移量。这个偏移量的通用值为0,但是可以改变它。 Phase的值从0到100之间,这个值代表开始时的偏移量取自波长的百分比值。
十二、xray (1)功能介绍:可以让对象反映出它的轮廓并把这些轮廓增量。


相关文章:
学习网页制作基础入门教程
网页制作入门教程 27页 1下载券 静态网页制作教程(入门级... 265页 免费 Dreamweaver...学习网页制作基础入门教程(1)网页编写 http://www.webjx.com 更新日期:20...
网页制作学习入门教程
网页制作学习入门教程从(一)入门概念(二)设置主题(三)工具使用(四)上传网页(五)宣传 与维护网页五个方面详细的介绍了网页新手必须了解的入门教程。言简意赅。...
静态网页制作基础
贡献者等级:蜻蜓点水 一级 格式:doc 关键词:暂无1/2 相关文档推荐 ...网页制作教程_静态Web页面... 74页 2财富值 第7章 静态网页制作 24页 免费...
学习网页制作基础入门教程
学习网页制作基础入门教程_计算机软件及应用_IT/计算机_专业资料。学习网页制作...种写法:<FONT SIZE=+1> 文字內容 </FONT>,其意思就是说:比预设字大一级。...
网页制作教程,网页制作入门教程
网页制作教程,网页制作入门教程_IT/计算机_专业资料。网页制作教程,网页制作入门教程...静态网页制作教程(入门级... 265页 1下载券 Dreamweaver8网页制作基... 4页...
教你制作静态网页的方法
教你制作静态网页的方法_电脑基础知识_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 教你制作静态网页的方法_电脑基础知识_IT/计算机_专业资料。教制作...
《静态网页设计与制作》课程标准
静态网页设计与制作》课程标准_教学案例/设计_教学研究_教育专区。《静态网页设计...2.推荐教材 1、 网页设计与制作教程 机械工业出版社 刘瑞新 张兵义 赵子江等...
极海网细说静态网页制作的基础知识
极海网细说静态网页制作的基础知识 什么叫静态网页呢,简单点说,就是静态网页就是纯粹 HTML 格式的网页,早期的网站一 般都是如此的。静态网页本质是指没有后台...
静态网页制作
静态网页制作_互联网_IT/计算机_专业资料。 默认显示选项 CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。 ***middle 不行,应为 center** 默认显...
更多相关标签:
网页制作入门教程 | 静态网页制作教程 | dw静态网页制作教程 | html静态网页制作教程 | ppt制作入门教程 | 网页制作入门 | 网页设计入门教程 | 网页游戏开发入门教程 |