网页设计与制作.ppt

1、网页设计与制作三峡大学图书馆信息技术部 王 军2007年9月1日当前的技术现状n简单、静态的页面对用户没有太大的吸引力，动态的、有条理的简单、静态的页面对用户没有太大的吸引力，动态的、有条理的数据加上友好的、交互性强的界面、丰富的内容才能够吸引用户数据加上友好的、交互性强的界面、丰富的内容才能够吸引用户对页面的访问，数据的自动更新是非常重要的。对页面的访问，数据的自动更新是非常重要的。n现在的页面创作与现在的页面创作与WindowsWindows应用程序非常类似，完全可以在页面应用程序非常类似，完全可以在页面内创建应用程序，访问数据库等功能。内创建应用程序，访问数据库等功能。n页面已经不简单的

2、是一个单纯的宣传媒体，而是一个交互性很强页面已经不简单的是一个单纯的宣传媒体，而是一个交互性很强的应用平台，并实施一些在线的服务类的商业活动（网上购物、的应用平台，并实施一些在线的服务类的商业活动（网上购物、网上订单、网上就医等）网上订单、网上就医等）n客户端对客户端对ActiveXActiveX的支持、服务器端的的支持、服务器端的ASPASP技术、数据库的操作、技术、数据库的操作、VbscriptVbscript、JavaScriptJavaScript编程语言形成了编程语言形成了Internet/IntranetInternet/Intranet的解的解决方案。决方案。n任何一个技术都不是

3、独立的，它需要其它许多技术的支持。任何一个技术都不是独立的，它需要其它许多技术的支持。HTML总体结构n总体结构nnn网页标题nnn网页主体部分nn网页开始标记网页结束标记标记头部内容页面正文部分Html示例 望江南多少恨，昨夜夢魂中。還似舊時遊上苑，車如流水馬如龍，花月正春風！一个例子望江南多少恨，昨夜夢魂中。還似舊時遊上苑，車如流水馬如龍，花月正春風！示例二空山不見人但聞人語響反景赴山林復照清苔上Html示例Body属性bgcolor-背景色彩 text-非可链接文字的色彩 link-可链接文字的色彩 alink-正被点击的可链接文字的色彩 vlink-已经点击(访问)过的可链接文字的色彩

4、#=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.如果将背景设为图像 页面左边的空白 页面上方的空白#为给定一数值，单位是像素Html约定1、html文件扩展名为:htm或html2、列宽不受限制，文件在文本中可以写成一行例：在上面的例子中我们可以写成以下的形式：示例二空山不見人但聞人語響反景赴山林復照清苔上3、标记用括起来，大小写作用相同与一样，除汉字以外其它必须用半角表示4、注释语句组成：示例二空山不見人但聞人語響反景赴山林復照清苔上标尺线标尺线#=left,r

5、ight#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua .#=1,2,3,4,5,6今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今

6、天天气真好！今天天气真好！标题字体标题字体字体大小字体大小.#=1,2,3,4,5,6,7 or+#,-#=1,2,3,4,5,6,7今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！例：今天 天气 真好！今天今天 天气 真好！指定颜色指定颜色 .#=rrggbb 16 进制数码，或者是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,

7、Silver,Yellow,Aqua White&White 字体颜色字体颜色Arial.Arial-ABCdef123 Comic Sans MS.Comic Sans MS-ABCdef123 Courier.Courier-ABCdef123 Courier New.Courier New-ABCdef123 Modern.Modern-ABCdef123 MS Sans Serif.MS Sans Serif-ABCdef123 MS Serif.MS Serif-ABCdef123 MS-DOS CP 932.MS-DOS CP 932-ABCdef123 Roman.Roman-A

8、BCdef123 Script.Script-ABCdef123 Small Fonts.Small Fonts-ABCdef123 客户端字体客户端字体物理字体物理字体(Physical Style)今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！物理字体物理字体逻辑字体逻辑字体(Logical Style)今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！

9、今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！逻辑字体逻辑字体正文字体即我们要在页面中字符显示格式：表示字体为粗体 表示字体为大字体 表示字体为斜体 为字体加删除线 为字体加删除线 字体表示为小字休 下标字符 上标字符 固定宽度字符 为字体加下划线特殊字符的说明见P90上下标字的示例上標字的測試X2+Y2下標字的測試H2O逻辑样式逻辑样式（即可以表示文本格式，还可以表示文本的含义）用于强调的文本，以斜体表示 用于特别强调的文本，以粗体表示 用于举

10、例、引证的文本，以斜体表示 用于说明此段文本是代码 用于说明此段是由用户输入的文本，用较粗的宽体字 用于表示文本中的变量，以斜体表示 表示文本中的定义或说明，以斜体表示正文布局（即页面的显示布局）段落标记：在页面上产生一空行行继续输入，保持对齐属性ALIGN换行标志：不产生一空行水平线标志：用于在页面上产生一条水平线，以分隔文档。有ALIGN、SIZE、WIDTH、NOSHADE（使水平线产生一黑线，默认三维文体线条）、COLOR等属性段落对齐标志1）使在.之间的文本居中显示2）用于文档分节，使各文档的不同部分对应不同的段落格式，此时要应用到align属性来控制段落对齐格式，有right、ce

11、nter、justify(二端对齐)三个值。1、预格式化标志：平时用户输入的文档不加格式符时，无论换行、空格、回车等在页面中都看不到，当加了此标志后，则完全按照源文件中的编排格式输出。WORD是一个比较典型的例子。2、引言标志符：自动设置引言格式，以论文格式中总存在引言的格式一样。格式嵌套的说明：当不同的格式设置作用于同一内容时，若设置的格式为相容，则效果叠加；若冲突，则取最靠近的标记效果（如对齐效果二个冲突时，取最近的一个标志）。行的控制行的控制 段段你好吗？很好。你好吗？很好。换行换行 你好吗？很好。你好吗？很好。不换行不换行一行的内容 行的控制、文字的对齐及文字的分区显示行的控制、文字的

12、对齐及文字的分区显示文字的对齐文字的对齐.#=left,center,rightHelloHello.Hello 文字的分区显示文字的分区显示 .Can you feel happiness without unpleasant?Please show me your smile.预格式化文本.Please use your card.VISA MasterHere is an order form.FaxAir Mail Please use your cardVISA MasterHere is an order form.Here is an order form.Fax Air Mai

13、l.Please use your card.VISA MasterHere is an order form.FaxAir Mail Please use your card.VISA MasterHere is order form.Here is order form.Fax Air Mail.Please use your card.VISA MasterHere is an order form.FaxAir Mail Please use your card.VISA Master Here is order form.Fax Air Mail 有序列表（自动加顺序编号（自动加顺序

14、编号）第一项 第二项(OL)TYPE：说明编号类型(OL)START：序号从何开始。(LI)TYEP:说明编号类型，在顺序列表中改变数字样式。(LI)VALUE:新的数字序号起始值，以获得非连续性数字序列。例：起始数字为5的列表 第一项 第二项 第三项例：非连续性的数字列表 第一项 第二项 第三项例：改变数字样式的列表第一项第二项第三项无序列表（无编号的一种列表）标志符：属性TYPE=DISK(实心圆)CIRCLE(空心圆)SQUARE(方块)有序列表与无序列表可以混合使用例：第一项 子列表项一 子列表项二 第二项子列表项一子列表项二 第三项子列表项一子列表项二 定义式列表（用于定义术语）定义

15、式列表项前无任何前导符号和数字，它主要用于定义一些术语而使用列表定义：术语定义：术语描述：例：计算机硬件从电器角度描述计算机的一种方法计算机软件从计算机应用角度描述计算机的一种方法插入图像插入图像标志符：属性：SRC:指定图像文件的URL ALT:图像位置所显示的文字 WDTH:指定图像的宽度 HEIGHT:指定图像的高度 BORDER:为图像添加边框，“0”表示无边框，默认为0 ALIGN:说明文字与图像的对齐方式（TOP、MIDDLE、BOTTOM、LEFT、RIGHT）HSPACE:设置图像与文本、图像与图像之间水平方向的空白像素点 VSPACE:设置图像鲺文本、图像与图像之间垂直方向的

16、空白像素点特别说明：可以解除文本环绕例：表单基本语法：.表单中提供给用户的输入形式文字输入和密码输入文字输入和密码输入 您的姓名:您的主页的网址:密码:例子：P107页、108页、109页一个完整的表单例子示例二 您的姓名:您的主页的网址:密码:复选框复选框(Checkbox)和和 单选框单选框(RadioButton)复选框 Banana Apple Orange 单先框 Banana Apple Orange 复选框和单选框复选框和单选框示例一：Banana Apple Orange 示例二：Banana Apple Orange Peach 下拉列表是用是用 Ctrl Ctrl 键配合鼠

17、标实现多选键配合鼠标实现多选 文本区域wrap=hard 参数表示“硬回车”换行wrap=soft 参数表示“软回车”换行创建超级链接和图像映射创建超级链接标志：文字或图片描述1、指向本地的链接2、指向其他网站的链接3、指向页面中特定部分的链接（首先在页面中建立一个“锚点”，然后再设立“超级链接”）4、指向电子邮件的链接（文字或图片描述）URL：全球资源统一定位器（Universal Resource Locator）由协议、服务器地址、文件名组成。分为绝对URL和相对URL绝对URL：WWW.CUMT.EDU.CN 相对URL：IMAGES/INDEX.HTM组合引用：在头文件中即中写入则在

18、页面中引用相对URL时自动以此基地址为准，组合为一个引用地址。图像映射：即在一张图片中创建不同的超级链接。（大写为关键字，小写为选项）。创建完成后，在中用USEMAP来引用该图像映射即完成图像映射表格表格的作用不仅仅是在组织数据，更重要的是在页面布局上表格标志：表格标题：表 头：行 定 义：列 定 义：属 性：ROWSPAN、COLSPAN表示行、列合并，ALIGN表示对齐方式例：示例平均其他类号性能数据一数据二MAXMIN甲种（高级）1.90.030.343.30.3乙种1.78668988表格修饰表格边框FRAME：void无、above顶、below底、hsides顶和底、vsides左

19、右、lhs左、rhs右、box四边BORDER=0则表示无边框，否则表示为边框的宽度单元格边框RULES：none无、groups行组和列组之间有、rows有行分隔线、cols列分隔线、all所有分隔线表格及单元格的对齐 ALIGN=left、center、right、单元格(justify两端对齐、char特定字体对齐)垂直对齐：VALIGN=top、bottom、middle、baseline(同行单元格一致)单元格之间的间隔：CELLSPACING调节单元格之间的间隔、CELLPADDING调节数据与单元格之间或间隔（单位为像素）。例：P102框架技术框架：即在一个页面开辟几个窗口上显示

20、几个不同网页的效果框架的基本结构如下：.文档中FRAMESET代替了BODY，而每一个FRAME表示每一个子窗口中的内容。属性：COLS，ROWS垂直和水平方向分隔，FRAMEBORDER是否显示框架边框（1或0）MARGINWIDTH，MARGINHEIGHT设置左右、上下边框的空白(单位为像素)SCROLLING设置是否加入滚动条（yes,no,auto）NORESIZE属性用来固定边框线的位置（设置完成后无法用鼠标进行调节）例：框架技术的应用在框架中运用超级链接时，应指定框架名，否则就在当前框架中显示文字或图像例子见P105会移动的文字技巧.移动的文字！文字从右向左移动！文字从左向右移动

21、！文字一圈一圈绕着走！文字只走一次就歇了！啦啦啦，我来回走耶！文字只移走 3 趟 文字只走 3 趟 文字只走 3 趟 改变文字移动速度 scrolldelav设置停顿的时间，scrollamount设置文字移动速度bgcolor设置移动文字的背景色 height和width设置背景色的面积 网页上多媒体的实现在页面中嵌入多媒体文本在页面中嵌入多媒体文本基本语法#=URL本标记可以用来在主页中嵌入多媒体文本，如：电影(movie),声音(sound),虚拟现实语言(vrml).在页面中嵌入背景音乐在页面中嵌入背景音乐#=WAV 文件的 URL#=循环数例：插入视频剪辑插入视频剪辑 “start=

22、用 url.avi 这一 AVI(Video for MSWINDOWS)文件来播放视频；用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。start=Fileopen:当文件打开时播放start=mouseover：用鼠标在播放区域点击一下后播放controls：视频窗口下附加 MSWINDOWS 的 AVI 播放控制条 CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的

23、，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。对CSS的设计要求我们对HTML标志有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每个标志表示了某种信息的表示，如标志表示一个段落，表示一个大标题，表示一个表格.，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是你好,一个是欢迎你，我想使前一个呈现出蓝色，另一个是红色，效果如下:你好你好欢迎你欢迎你 当我们面对一个页面的网站设计时,无需考虑CSS技术。但现在的网站页面绝不可能用几个页面就可以满

24、足一个建站的需要。这样我们就需要给我们建立的站点统一一个风格（包括颜色、字体、对齐方式、字体大小等）。如果我们为每一个页面做一次风格设计，这样的工作量完全是一种重复也是不可以容忍的。这就是CSS技术诞生的理由和原因。CSS技术样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：HTML标志标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；）下面我们分别讲述：HTML标志标志：如 P,Div、Table等而不是、以及。标志属性标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即

25、属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以“-”隔开，比如，背景颜色属性background-color,而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写。下面看一个具体的例子，比如我们对一个段落建立一个样式表：Pbackground-color:#0000ff;font-size:12pt;color:#ffff00，效果如下：我可以欢迎你；我可以欢迎你；我可以欢迎你；我可以欢迎你；上面我们分别设置了背景色，字体大小，以及字体颜色等。为了看起来直观一些，上边的例子还可以写成:Pbackg

26、round-color:#0000ff；font-size:12pt；color:#ffff00有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,如:H2font-size:15pt；font-family:宋体宋体；font-style:italic 可直接用 H2font:15pt 宋体宋体 italic来表示，层叠样式单的使用方法：有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风

27、格使用的范围不同。一、外部文件方式一、外部文件方式 外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建，相对说来，在DreamWeaver下创建比较简单；当然了，如果你熟悉CSS属性，可直接在记事本里写，最后的文件扩展名为CSS。CSS文件的引用是在HTML的标志之间写下列语句：,如当前文件目录下有一CSS 文件名为myStyle.css，内容如下:Pfont-family:宋体宋体font-s

28、ize:9pt;color:blueH2font-family:宋体宋体font-size:13pt;color:red则在引用时，用下列语句，当然，如果你在DreamWeaver中用styles功能可直接连接(Link)一个CSS文件，这些语句会自动生成的。二、内部文档头方式二、内部文档头方式这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头之间，而不是形成文件。这种风格定义产生作用的范围也只局限于本文件，其格式如下(套用上边的CSS)如果在DreamWeaver中用Styles来书写，以上一些代码会自动生成的。这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行

29、具体调整。这两种方式并不相排斥，而是相互结合，比如在CSS文件中定义了P标志的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;而在另一个HTML文件中定义颜色为Green，从这里，你也可能明白为什么风格样式单叫层叠式样单了。三、直接插入式三、直接插入式直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。综上所述，这几种方式各有用途，在统一整个站点风格上，用第一种方式；

30、在整个页内风格统一上，用第二种方式；而在页内某个标志的具体微调上，第三种方式也有用武之地，所以各有千秋吧！前两种的目的在于一是统一风格，二是减少繁琐的标志属性设置，所以CSS的功能是非常强大的。关键在于正确的应用！应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，当然了，HTML文件一直引用最近更新的样式单，而不必每个每个HTML文件进行整，你说是不是挺方便的呀！特别提醒一下，如果你想建立自己的网站，这方面不可忽视，如

31、果在建站之初没有网站风格的统一规划并形成CSS文件，以后内容一多，想调整一下风格会累死你的。创建并引用样式类创建并引用样式类 在用CSS进行网站设计时，会遇到一种情况：相同的标志可能在不同的地方显示的效果不一样。怎么办呢，有一种办法即是采用上节所讲的直接插入式，逐个逐个地进行属性设置，如果该类标志比较少，这倒还可以；如果多了，可就有点令人厌烦了。解决的办法就是采用样式类。样式类的例子在CSS文件中输入如下的代码:Pfont-family:宋体宋体；font-size:10pt；font-color；RedP.isLefttext-align:leftP.isRighttext-align:ri

32、ghtP.isCentertext-align:center在网页中引用:你好，欢迎你浏览我的网页你好，欢迎你浏览我的网页在CSS中设置字体例子例子:P font:italic bold 12pt/14pt Times,serif 指定该段为指定该段为bold(粗体粗体)和和italic(斜体斜体)Times或或serif字体，字体，12点点大小，行高为大小，行高为14点。点。font-family功能：用于改变HTML标志或元素的字体，你可设置一个可用字体清单。浏览器由前向后选用字体。语法：font-family:字体1,字体2,.,字体nfont-style功能：使文本显示为扁斜体或斜体等

33、表示强调。数值：normal-正常；italic-斜体；oblique-偏斜体语法：font-style:normalfont-variant功能：用于在正常与小型大写字母字体间切换。数值：normal-如果该标志继承父元素的 small-caps 设置，则关键字 normal 将 font-variant 设置为正常字体。small-caps-把小写字母显示为字体较小的大写字母。font-weight功能：用于设置字体灰度，生成字体的深，浅版本。数值：正常灰度-normal相对灰度-bold,bolder,light,lighter梯度灰度-取值如下：100,200,300,400(相当于n

34、ormal),500,600,700(相当于bold),800,900。font-size功能：用各种度量单位控制文本字体大小。数值：有四种数值方式绝对尺寸-用具体字号表定义字体大小，可以取下列数值之一：xx-small,x-small,small,medium,large,x-large,xx-large。不同字体有不同的数值。相对尺寸-larger,smaller，产生的尺寸是相对于父容器字号而言的。长度-用毫米(mm)，厘米(cm)，英寸(in)，点数(pt)，象素(px)，pica(pc)，ex(小写字母x的高度)或em(字体高度)作为度量单位。百分比-相对于其父元素字体大小的百分比。

35、font功能：简写属性，提供了对字体所有属性进行设置的快捷方法。语法：font:字体属性1 字体属性2.字体属性n数值：字体属性值为前面已列出的值，此外还可以设置行间距属性 line-height(见文本属性)，内容的顺序为：font-style;font-variant;font-weight;font-size;line-height;font-family。可省略部分属性，属性值间用空格分开。letter-spacing功能：控制文本元素字母间的间距，所设置的距离适用于整个元素。数值：normal-正常间距，将字符间的间距复位为所有字体和字号的正常间距。长度-设置字间距长度，正值表示加进

36、父元素中继承的正常长度，负值则減去正常长度。在数字后指定度量单位如下：mm,cm,in,pt(点数),px(象素),pc(pica),ex(小写字母x的高度),em(大写字母M的宽度)。line-height功能：设置元素中文本的行间距。数值：normal-正常高度，通常为字体尺寸的 1-1.2倍，这是缺省设置。数字-设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点，设置line-height为2，则间距20点。长度-用标准度量单位设置间距，有些是绝对的，有些是相对的，详见letter-spacing中的説明。百分比-也字体尺寸的百分比设置间距。text-align功能：在

37、元素框中水平对齐文本。数值：left-左对齐right-右对齐center-居中justify-均匀分布，生成等长的行text-decoration功能：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。数值：none-无文本修饰，缺省设置。underline-下划线。overline-上划线。line-through-删除线。blink-闪烁。同一语句中可以组合多个关键字。text-indent功能：文本缩排，用于段落的第一行缩排上。数值：长度-设置首行缩排的尺寸为指定度量单位，有些单位是相对的，有些则是绝对的，祥见 letter-spacing 属性的说明部分

38、。百分比-以行长的百分比设置首行缩排量。text-transform功能：设置一个或几个元素的大写标准。数值：none-不改变文本的大写小写。capitalize-元素中毎个单词的第一个字母用大写。uppercase-将所有文本设置为大写。lowercase-将所有文本设置为小写。vertical-align功能：垂直对齐。数值：baseline-对准两个元素的小写字母基准线。sub-下标。super-上标。top-顶部对齐。text-top-文本顶对齐。middle-中线对齐。bottom-底线对齐。text-bottom-字母底线对齐。百分比-将线上元素基准线在父元素基准线基础上升降一定的

39、百分比，和元素的 line-height 属性组合使用。word-spacing功能：控制文本中元素单词间的间距。设置的间距适用于整个元素，不能在某个单词间插入更大或更小的间距。数值：normal-正常间距。长度-如果长度为正，则加进从父元素继承的正常长度，如果是负值，则减去。颜色与图像属性颜色与图像属性 color功能：设置前景或元素的颜色。数值：使用颜色关键字或RGB值。background-color功能：设置页面或页面元素的背景颜色。数值：颜色-可用颜色名或RGB值，transparent-透明，使页面背景为缺省背景。background-image功能：定义背景图形。数值：none-

40、不用图形作背景url-提供图形文件的URL地址说明：也可以包括background-color属性以便在找不到图形时代用background-repeat功能：控制图形背景是否重复排列。数值：repeat-垂直和水平重复，缺省值repeat-x-水平重复repeat-y-垂直重复no-repeat-不重复说明：这个属性和 background-image 和 background-position 属性一起使用。background-attachment功能：指定元素的背景是随元素一起滚动还是固定在页面某个位置上。数值：scroll-随元素一起滚动fixed-固定说明：缺省值是 scroll，

41、这个属性和 background-image 属性一起使用。background-position功能：用于在空间中定位元素背景数值：长度-相对或绝对单位设置元素框边缘的起点，并给出单位下的坐标。百分比-用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点垂直位置-设置竖直方向的起点，关键字为 top,center,bottom水平位置-设置水平方向的起点，关键字 left,center,right例如：top left,left top和0%0%都表示图形左上角从元素框左上角开始background功能：简写属性，可以设置所有背景属性。数值：background-at

42、tachment background-color background-image background-position background-repeat有关上述数值的细节，见各个属性部分。display功能：改变元素的显示值，可以将元素类型线上，块和清单项目相互变换。数值：none-不显示元素block-块显示，在元素前后设置分行符inline-删除元素前后的分行符，使其并入其它元素流中list-item-将元素设置为清单中的一行说明：可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。边框属性边框属性 框填充属性padding-bottompadding-left

43、padding-toppadding-right功能：毎个容器都有边框，这些属性设置边框与框內元素间的距离。数值：长度-设置相对或绝对值。在数字后指定度量单位如下：mm,cm,in,pt,px,pc,ex,em。em 和 ex 设置产生相对于父字体的字体尺寸。百分比-以父元素的百分比设置边框。说明：填充值不能使用负值，但可以是小数。框填充属性-padding功能：是个简写属性，用于设置上，下，左，右各个方向边框和内容元素的间距。数值：同前。说明：用单一值可以让毎边等距填充；如果用两个值，则第一个值用于上下填充，第二个值用于左右填充；如果用三个值，则赋于上边填充，左右填充和下边填充；如果用四个值

44、，则分别用于上，右，下，左填充。可以混合数值类型。框边框属性border-topborder-bottomborder-rightborder-left功能：这四个属性都是简写属性，分别设置上，下，右，左的边框属性。缺省情况下，边框没有样式设置。数值：共有三个边框属性border-width:取值为 thin,medium,thick或指定长度。border-style:设置用于修饰边框的底纹。可以设置下列样式：none,dotted,doshed,solid,double,groove,ridge,inset,outset。border-color:设置边框颜色。框边框属性border-to

45、p-widthborder-bottom-widthborder-right=widthborder-left-width功能：分别设置各个边框的厚度。数值：thin-细边框。medium-中等线宽。thick-粗线。长度-用相对或绝对单位设置边框宽度。框边框属性border-color功能：简写属性，设置四个边框的颜色值。数值：可以用颜色名或RGB值。如果指定单个颜色，则四个边框都显示为这个颜色；如果指定两个颜色，则顺序为上下，左右；如果指定三种颜色，则顺序为上，左右，下；如果指定四种颜色，则顺序为上，右，下，左。说明：颜色名如下aqua,black,blue,fuchsia,gray,gr

46、een,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow.对于RGB值，可用三种方法指定#rrggbb;rgb(r,g,b);rgb(r%,g%,b%)框边框属性border功能：简写属性，设置所有边框属性。数值：border-width-取值 thin,medium,thick 或指定长度。border-style-取值 none,dotted,dashed,solid,double,groove,ridge,inset,outsetborder-color-可用颜色名或RGB值。说明：与其它简写属性不同的是，每个设置只能取

47、一个值，这个属性均匀作用于框的各边。框边框属性border-style功能：用于显示边框和指定边框样式。数值：none-不显示边框，为缺省值 dotted-点线，dashed-虛线，solid-实线，double-双线，groove-3D陷入线 ridge-3D山脊狀线，inset-使页面有沉入感，outset-使页面有浮出感说明：并非所有浏览器都能显示ridge,inset,outset 之类的样式，有些浏览器将所有边框都绘制成实线。框边界属性margin-bottommargin-leftmargin-rightmargin-top功能：这四个属性用来设置元素与其相邻元素间的距离，可以用长

48、度或相对于其父文本的宽度的百分比来定义，也可以自动处理。数值：长度-设置元素相应边与框边缘之间的相对或绝对距离，有效单位为：mm,cm,in,px,pt,pica,ex,em.百分比-以父元素宽度的百分比设置边界尺寸。auto-自动，这个设置取浏览器的缺省边界。框边界属性margin功能：简写属性，用于設置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。这个区总是透明的，可以看到下面的页面背景。数值：长度-同前 百分比-以父元素宽度的百分比设置边界尺寸。auto-自动，这个设置取浏览器的缺省边界。框位置属性height功能：设置元素高度，浏览器按照这个高度调整图形。数值：长度-m

49、m,cm,px,pt,.auto-自动。框位置属性width功能：设置元素宽度，浏览器按照这个宽度调整图形。数值：长度-mm,cm,in,px,pt,.百分比-将图形尺寸设置为父元素宽度的百分比。auto-自动调整数据类型：VBScript只存在Variant的一种数据类型，这种数据类型可以包含所有的信息。它能够按照所包含的信息内容进行处理（如果它包含的是数字，则它在上下文中做数字处理）。子数据类型：即Variant所包含的数据信息。共有十三种，分别是NULL（空值）、EMPTY（零）、BOOLEAN（布尔）、BYTE（字节）、INTEGER（整数）、LONG（长整数）、SINGLE（单精度）

50、、DOUBLE（双精度）、CURRENCY（货币）、DATE（日期）、STRING（字符串）、OBJECT（对象）、ERROR（错误号）变量的定义：Dim myname,top,bottom,left 可以连续定义多个变量，中间用逗号分隔。然而在实际的应用中，我们很少去定义变量而直接使用。这是VBScript的一个特性：即不声明而直接使用。变量数组：定义方法Dim mylist(5),从“0”开始计数，所以实际包含六个值。数组的维数可以达到60维，而不局限于一维数组Dim mylist(5)Dim myarray()Redim myarray(25)Redim preserve myarray