二、网页设计基础.ppt

《二、网页设计基础.ppt》由会员分享，可在线阅读，更多相关《二、网页设计基础.ppt（326页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第二部分第二部分网页设计技术网页设计技术第二部分网页设计技术主要内容第二部分网页设计技术主要内容一一七、七、HTML语言语言八八九、九、CSS十十十二、十二、JavaScript语言语言一、初识一、初识HTML1.1 HTML语言语言1.2 简单的简单的HTML实例实例1.3 本章思考本章思考1.4 本章小结本章小结n编辑与运行环境编辑与运行环境n基本语法结构及文件结构基本语法结构及文件结构n书写注意事项书写注意事项1.1 HTML语言语言1.1.1 1.1.1 编辑与运行环境编辑与运行环境运行环境运行环境直接运行在直接运行在Web浏览器上浏览器上编辑环境编辑环境记事本记事本网页设计三剑客：网

2、页设计三剑客：Dreamweaver、Fireworks、Flash1.1.2 1.1.2 基本语法结构及文件结构基本语法结构及文件结构n基本语法结构：基本语法结构：一个一个HTMLHTML文件是由一系列的元素和标签组成。文件是由一系列的元素和标签组成。n文件的基本结构：文件的基本结构：/文件开始 /文件头 网页标题 /网页标题 /文件头 /文件体 网页正文 /文件体 /文件结束n“”是所有标记的开始和结束。是所有标记的开始和结束。n标签和标签之间是可以互相嵌套的。标签和标签之间是可以互相嵌套的。n在源代码中不区分大小写。在源代码中不区分大小写。n回车键和空格键在源代码中不起作用。回车键和空格

3、键在源代码中不起作用。n属性值也可以直接书写。如：属性值也可以直接书写。如：图片的像素等的处图片的像素等的处理理n源代码中以源代码中以“!-”结束的代码结束的代码为注释代码。为注释代码。1.1.3 1.1.3 书写注意事项书写注意事项n网页的文字颜色属性网页的文字颜色属性text body text=text n网页背景颜色属性网页背景颜色属性bgcolor body bgcolor=bgcolor n网页背景图属性网页背景图属性backgroundbackground body background=n链接文字颜色属性链接文字颜色属性link,vlink,alinklink,vlink,al

4、ink body link=n上边距属性上边距属性topmargin body topmargin=topmargin n左边距属性左边距属性leftmargin body leftmargin=leftmargin 1.2 一个简单的一个简单的HTML实例实例n示例代码如下：示例代码如下：1.2.1 1.2.1 页面美化效果页面美化效果 欢迎来到我的个人网页 欢迎来到我的站点 n示例代码执行结果如下：示例代码执行结果如下：1.2.1 1.2.1 页面美化效果页面美化效果1.3 本章思考本章思考 请简单描述一下请简单描述一下HTML的语法结构和书写注意事的语法结构和书写注意事项。项。1.4 本

5、章小结本章小结n网页设计的一些相关概念。网页设计的一些相关概念。n网页设计的标识语言网页设计的标识语言HTML，内容包括：语法结构、，内容包括：语法结构、书写注意事项和简单的网页属性设置。书写注意事项和简单的网页属性设置。n推荐学习网站：推荐学习网站：清华大学图书馆清华大学图书馆 HTML 教程教程http:/ 文字编排文字编排2.2 文字美化文字美化2.4 本章思考本章思考2.5 本章小结本章小结2.3 插入图像插入图像n通过本章的学习，能够达到熟练运用本章所讲到通过本章的学习，能够达到熟练运用本章所讲到的标签，对网页进行文字编排、文字美化以及插的标签，对网页进行文字编排、文字美化以及插入图

6、像的操作。入图像的操作。教学基本要求教学基本要求n段落与换行段落与换行n居中对齐居中对齐n插入水平线插入水平线n插入特殊符号插入特殊符号2.1 文字编排文字编排n换行标签换行标签 实现换行功能实现换行功能 是定死的是定死的n分段控制标签分段控制标签 属性有属性有align,align,其属性可选值：其属性可选值：right,left,center.right,left,center.例如：例如：p align=此段居中显示此段居中显示2.1.1 2.1.1 段落与换行n居中对齐标签居中对齐标签 是一个双标签，其作用是进行居中控制是一个双标签，其作用是进行居中控制.例如：例如：居中文字居中文字2

7、.1.2 2.1.2 居中对齐居中对齐n水平分隔线标签水平分隔线标签 是一个单标签，其作用是在标签所在位置插入是一个单标签，其作用是在标签所在位置插入一条水平线，用以分割页面中的不同部分一条水平线，用以分割页面中的不同部分.属性有：属性有：align,size,widthalign,size,width（宽度）（宽度）,color,noshadecolor,noshade 例如：例如：hr align=2.1.3 2.1.3 插入水平线插入水平线2.1.4 2.1.4 插入特殊符号插入特殊符号nHTMLHTML常见特殊字符及其代码表常见特殊字符及其代码表特殊或专用字符特殊或专用字符数字代码数字

8、代码字符代码字符代码>>&&“""!!©©：;®®空格 标签小总结标签小总结换行标签 分段控制标签 居中对齐标签 水平分隔线标签 插入特殊符号2.1.5 2.1.5 文字编排小例子文字编排小例子n运用本节所讲的标签作小例子，用浏览器打开例子如图所示：运用本节所讲的标签作小例子，用浏览器打开例子如图所示：2.1.5 2.1.5 文字编排小例子文字编排小例子n此例子的代码如下：此例子的代码如下：例2-1 要在一段里换行请使用br这个Tag 用hr这个Tag可以在HTML文件里加一条横线。

9、村妇想像皇宫的生活：皇后得用金扁担挑水吧。设计 ©n字体设置字体设置n文字修饰文字修饰n列表与项目符号列表与项目符号2.2 文字美化文字美化n标题文字标签标题文字标签 h n=16 n=16是一个双标签，其作用是设置网页中的标题文是一个双标签，其作用是设置网页中的标题文字字.一共分为六级，由一共分为六级，由到到逐渐变小。逐渐变小。属性有：属性有：alignalign 例如：例如：h 标题文字标题文字/h 2.2.1 2.2.1 字体设置字体设置n文字格式控制标签文字格式控制标签 是一个双标签，其作用是设置文字的字体、大小和颜是一个双标签，其作用是设置文字的字体、大小和颜色色

10、.属性有：属性有：face,size,color.face,size,color.例如：例如：font face=正文文字正文文字2.2.1 2.2.1 字体设置字体设置2.2.2 2.2.2 文字修饰文字修饰n比较常用的文字修饰标签比较常用的文字修饰标签（与（与wordword中的快捷键一样）中的快捷键一样）标签标签显示效果显示效果粗体字文字将以粗体的方式显示斜体字文字将以斜体的方式显示加下划线文字将以加下划线的方式显示删除线文字将以加删除线的方式显示放大将文字以放大字体的方式显示缩小将文字以缩小字体的方式显示上标将文字以上标字体的方式显示下标将文字以下标字体的方式显示n无序列表标签无序列表

11、标签 是一个双标签是一个双标签.语法格式为：语法格式为：ul type=1编号编号1 1编号编号2 2编号编号n n type type用来设定控制符号，属性值有：用来设定控制符号，属性值有：discdisc（方块空心）（方块空心）,circle,circle（实行园）（实行园）,square.,square.2.2.3 2.2.3 列表与项目符号列表与项目符号n有序列表标签有序列表标签 是一个双标签是一个双标签.语法格式为：语法格式为：ol type=2 编号编号1 1编号编号2 2编号编号n n 的属性有的属性有type,start.type,start.startstart设定列表的符号

12、从第几项开始，设定列表的符号从第几项开始，type type 设定符号设定符号类型，属性值有类型，属性值有1,A,a,i,I.1,A,a,i,I.2.2.3 2.2.3 列表与项目符号列表与项目符号标签小总结标签小总结标题标题文字文字标签标签 文字格文字格式控制式控制标签标签 文字文字修饰修饰标签标签无序无序列表列表标签标签 有序有序列表列表标签标签 2.2.4 2.2.4 文字美化小例子文字美化小例子n运用本节所讲的标签作小例子，用浏览器打开例子如图所示：运用本节所讲的标签作小例子，用浏览器打开例子如图所示：2.2.4 2.2.4 文字美化小例子文字美化小例子n此例子的代码如下：此例子的代码

13、如下：例2-2 这是标题 这段文字的字体大小值为3。Type设为disc的列表，列表项前面的符号是圆黑点：网页课程网页代码魔兽世界 2.2.4 2.2.4 文字美化小例子文字美化小例子一个排序列表(Ordered List)：网页课程网页代码魔兽世界一个排序列表(Ordered List)：网页课程网页代码魔兽世界n图像插入图像插入n尺寸定位尺寸定位n文字说明文字说明n图像边框图像边框n图像布局图像布局2.3 插入图像插入图像n插入图像标签插入图像标签 是一个单标签是一个单标签.语法格式为：语法格式为：img src=的属性有的属性有src,alt,border,align,src,alt,b

14、order,align,height/width,vspace/hspaceheight/width,vspace/hspace等。等。2.3.1 2.3.1 图像插入图像插入nheight/width height/width 设定图形高度设定图形高度/宽度，以像素作单位，也宽度，以像素作单位，也可以是百分比作单位。可以是百分比作单位。若若标签没有设置标签没有设置height/widthheight/width属性时，网页中将属性时，网页中将以图片的原始宽度显示。以图片的原始宽度显示。例如：例如：2.3.2 2.3.2 尺寸定位尺寸定位nalt alt 设定图形的替代文字，将鼠标悬停在图片上

15、时，会设定图形的替代文字，将鼠标悬停在图片上时，会出现提示性的文字。当浏览器不能显示所指定的图片时，出现提示性的文字。当浏览器不能显示所指定的图片时，则显示一段说明该图片的文字，代替图文件。则显示一段说明该图片的文字，代替图文件。例如：例如：img src=yl.jpg alt=2.3.3 2.3.3 文字说明文字说明nborder border 设定图形的边框，单位为像素设定图形的边框，单位为像素(pixel)(pixel)。默认或。默认或取取0 0时为无边框。时为无边框。例如：例如：2.3.4 2.3.4 图像边框图像边框nalignalign设定图像的对齐方式，属性可选值：设定图像的对齐

16、方式，属性可选值：top,top,bottom,middle,right,leftbottom,middle,right,left等。等。2.3.5 2.3.5 图像布局图像布局img标签属性小总结标签属性小总结height/width 设定图设定图形高度形高度/宽度宽度alt 设设定图定图形的形的替代替代文字文字border 设定图设定图形的边形的边框框align设定设定图像图像的对的对齐方齐方式式2.3.6 2.3.6 图像插入小例子图像插入小例子n运用本节所讲的标签作例子，用浏览器打开例子如图所示：运用本节所讲的标签作例子，用浏览器打开例子如图所示：2.3.6 2.3.6 图像插入小例子

17、图像插入小例子n此例子的代码如下：此例子的代码如下：例2-3 你可以使用Height和Width属性来改变图片的大小。上下对齐方式:bottom 左右对齐方式:right2.4 本章思考本章思考 n如何进行文字的编排和美化？如何进行文字的编排和美化？n图像的插入和各种显示需要怎么设置标签？图像的插入和各种显示需要怎么设置标签？2.5 本章小结本章小结n本章介绍了如何进行文字的编排和美化。本章介绍了如何进行文字的编排和美化。n介绍了图像的插入和各种显示设置。介绍了图像的插入和各种显示设置。n试着在试着在Dreamweaver中实现本章所讲的例题。中实现本章所讲的例题。三、超链接的使用三、超链接的

18、使用3.1 路径的概念路径的概念3.2 超链接的建立超链接的建立3.4 本章思考本章思考3.5 本章小结本章小结3.3 超链接的应用超链接的应用n超链接是网页设计基础中必不可少的基础知识，超链接是网页设计基础中必不可少的基础知识，内容不是很多，但经常用到，所以一定要完全理内容不是很多，但经常用到，所以一定要完全理解并熟练掌握。解并熟练掌握。教学基本要求教学基本要求3.1 路径的概念路径的概念路径路径相对路径相对路径绝对路径绝对路径是以引用文件的是以引用文件的网页所在位置为网页所在位置为参考基础而建立参考基础而建立的目录路径的目录路径Relative PathAbsolute Path带域名的文

19、件的带域名的文件的完整路径，是以完整路径，是以webweb站点的根目录为参站点的根目录为参考基础的目录路径考基础的目录路径参照程序清单参照程序清单 3-1路径的概念路径的概念n创建创建HTMLHTML超链接示例：超链接示例：3.2 超链接的建立超链接的建立3.2 超链接的建立超链接的建立n点击点击“这是一个链接这是一个链接”链接，就可以链接到新浪网站上。具链接，就可以链接到新浪网站上。具体代码如下：体代码如下：链接示例 这是一个链接 3.3 超链接的应用超链接的应用站内链接站内链接站内链接站内链接 a href=#a href=#a href=#目录文字目录文字目录文字目录文字 其他站点链接其

20、他站点链接其他站点链接其他站点链接a href=http:/a href=http:/a href=http:/链接内容链接内容链接内容链接内容图像链接图像链接图像链接图像链接a href=a href=a href=邮箱链接邮箱链接邮箱链接邮箱链接a href=mailto:E-mail a href=mailto:E-mail a href=mailto:E-mail 描述文字描述文字描述文字描述文字n如果一个页面很长，寻找相应的内容比较困难，可以通如果一个页面很长，寻找相应的内容比较困难，可以通过在同一个文件中建立链接来实现。过在同一个文件中建立链接来实现。语法格式为：语法格式为：a h

21、ref=#目录文字目录文字 在链接的目标处在链接的目标处(通常我们称之为书签或锚通常我们称之为书签或锚)a name=)超链接目标超链接目标 3.3.1 3.3.1 站内链接站内链接参照程序清单参照程序清单 3-3-1站内链接站内链接 n超链接还有一种用法就是要链接到网上的某些页面，可超链接还有一种用法就是要链接到网上的某些页面，可以运用以运用httphttp协议。协议。语法格式为：语法格式为：a href=http:/链接内容链接内容3.3.2 3.3.2 其他站点链接其他站点链接n页面显示效果如图：页面显示效果如图：3.3.2 3.3.2 其他站点链接其他站点链接n示例代码如下：示例代码如

22、下：3.3.2 3.3.2 其他站点链接其他站点链接 新浪网站链接 n只需将只需将标签放在标签放在和和之间，那么这个图像将之间，那么这个图像将成为一个可单击的图像，并产生一个链接。成为一个可单击的图像，并产生一个链接。语法格式为：语法格式为：a href=3.3.3 3.3.3 图像链接图像链接n页面显示效果如图：页面显示效果如图：3.3.3 3.3.3 图像链接图像链接n示例代码如下：示例代码如下：3.3.3 3.3.3 图像链接图像链接 链接示例 你可以将一张图片作为一个链接，点击这个图片。n在网站中，经常会看到在网站中，经常会看到“联系我们联系我们”或者或者“给我写信给我写信”的链接，用

23、鼠标点击后会发现将启动本地机器的邮件服的链接，用鼠标点击后会发现将启动本地机器的邮件服务系统发送邮件，并且地址栏的内容已经填写完整。务系统发送邮件，并且地址栏的内容已经填写完整。其实现的语法格式为：其实现的语法格式为：a href=mailto:E-mail 描述文描述文字字3.3.4 3.3.4 邮箱链接邮箱链接n页面显示效果如图：页面显示效果如图：3.3.4 3.3.4 邮箱链接邮箱链接n点击写信给新浪链接后，效果如图：点击写信给新浪链接后，效果如图：3.3.4 3.3.4 邮箱链接邮箱链接n示例代码如下：示例代码如下：3.3.4 3.3.4 邮箱链接邮箱链接 邮箱链接示例 这个邮箱地址链

24、接写了to,cc,bcc,subject,body 的内容：写信给新浪 注:空格请用%20表示。3.4 本章思考本章思考 n路径的概念路径的概念n如何制作站内链接，其它站点的链接，图像链接和如何制作站内链接，其它站点的链接，图像链接和邮箱链接等。邮箱链接等。3.5 本章小结本章小结n本章介绍了路径的概念。本章介绍了路径的概念。n介绍了站内链接、其他站点的链接、图像链接和邮介绍了站内链接、其他站点的链接、图像链接和邮箱链接等。箱链接等。n试着用试着用Dreamweaver等网页编辑软件，实现本章所等网页编辑软件，实现本章所讲的知识点。讲的知识点。四、表格的使用四、表格的使用4.1 建立表格建立表

25、格4.2 表格修饰表格修饰4.5 本章思考本章思考4.6 本章小结本章小结4.3 表格行的控制表格行的控制4.4 单元格控制单元格控制n通过本章的学习，能够达到熟练运用本章所讲到通过本章的学习，能够达到熟练运用本章所讲到的表格的相关知识，对网页的表格进行编排及美的表格的相关知识，对网页的表格进行编排及美化，本章的知识在网页设计基础中占重要地位，化，本章的知识在网页设计基础中占重要地位，需重点掌握。需重点掌握。教学基本要求教学基本要求4.1 建立表格建立表格表头标签：表头标签：表行标签表行标签:表格标签：表格标签：单元格标签：单元格标签：n表格示例：表格示例：4.1 建立表格建立表格n表格示例代

26、码如下：表格示例代码如下：4.1 建立表格建立表格 表格示例 表格所用到的Tag：整个表格开始要用table；每一行开始 要用tr；每一单元格开始要用td。只有一行(Row)一列(Column)的表格 100 4.1 建立表格建立表格一行三列的表格 100 200 300 4.1 建立表格建立表格两行三列的表格 100 200 300 400 500 600 n表格边框表格边框n表格尺寸与背景表格尺寸与背景n表格间距与边距表格间距与边距n表格布局与标题表格布局与标题4.2 表格修饰表格修饰n标签的标签的borderborder属性属性其语法格式为：其语法格式为：table border=bor

27、der border属性的值是数字，表示表格边框宽度所占的像属性的值是数字，表示表格边框宽度所占的像素数。素数。4.2.1 4.2.1 表格边框表格边框n表格边框示例：表格边框示例：4.2.1 4.2.1 表格边框表格边框n表格边框示例代码如下：表格边框示例代码如下：4.2.1 4.2.1 表格边框表格边框 表格边界值示例 表格的边界值设为1：第一 行 第二 行 4.2.1 4.2.1 表格边框表格边框表格的边界值设为15，边界更粗：第一 行 第二 行 n标签的标签的widthwidth和和heightheight属性用来设置表格尺寸属性用来设置表格尺寸其语法格式为：其语法格式为：table

28、width=widthwidth属性用于设置表格的宽度；属性用于设置表格的宽度；heightheight属性用于设置属性用于设置表格的高度。这两个属性的参数值可以是数字，也可以表格的高度。这两个属性的参数值可以是数字，也可以是百分比。是百分比。4.2.2 4.2.2 表格尺寸与背景表格尺寸与背景n标签的标签的bgcolorbgcolor属性来设置表格的背景颜色，属性来设置表格的背景颜色，backgroundbackground属性用来设置表格的背景图像属性用来设置表格的背景图像其语法格式为：其语法格式为：其中，其中，“#”取值为十六进制的颜色代码。取值为十六进制的颜色代码。4.2.2 4.2.

29、2 表格尺寸与背景表格尺寸与背景n表格尺寸与背景示例：表格尺寸与背景示例：4.2.2 4.2.2 表格尺寸与背景表格尺寸与背景n表格尺寸与背景示例代码如下：表格尺寸与背景示例代码如下：4.2.2 4.2.2 表格尺寸与背景表格尺寸与背景 表格尺寸与背景示例 给表格设置背景颜色：第一 行 4.2.2 4.2.2 表格尺寸与背景表格尺寸与背景给表格加背景图片：第一 行 n标签的标签的cellspacingcellspacing属性用来设置表格的间距。属性用来设置表格的间距。其语法格式为：其语法格式为：table cellspacing=间距指的是表格的单元格与格之间的距离。该属性的间距指的是表格的

30、单元格与格之间的距离。该属性的参数值取像素值，默认值为参数值取像素值，默认值为2 2。4.2.3 4.2.3 表格间距与边距表格间距与边距n标签的标签的cellpaddingcellpadding属性用来设置表格的边距。属性用来设置表格的边距。其语法格式为：其语法格式为：table cellpadding=边距指的是表格的单元格的内容与单元格边界之间空边距指的是表格的单元格的内容与单元格边界之间空白距离的大小。该属性的参数值取像素值。白距离的大小。该属性的参数值取像素值。4.2.3 4.2.3 表格间距与边距表格间距与边距n表格间距与边距示例：表格间距与边距示例：4.2.3 4.2.3 表格间

31、距与边距表格间距与边距n表格间距与边距示例代码如下：表格间距与边距示例代码如下：4.2.3 4.2.3 表格间距与边距表格间距与边距表格的间距示例Cellspacing属性表示单元格之间的距离。Cellspacing属性值设为0的表格：第一 行 第二 行 4.2.3 4.2.3 表格间距与边距表格间距与边距Cellspacing属性值设为20的表格：第一 行 第二 行 n标签的标签的alignalign属性用来设置表格的位置。属性用来设置表格的位置。其语法格式为：其语法格式为：table align=align align属性的参数值为属性的参数值为left,center,rightleft,

32、center,right之一，分之一，分别表示表格位于其相邻文字的左侧、表格水平居中和表别表示表格位于其相邻文字的左侧、表格水平居中和表格位于其相邻文字的右侧。格位于其相邻文字的右侧。4.2.4 4.2.4 表格布局与标题表格布局与标题n标签用来设置表格的标题。标签用来设置表格的标题。它是成对出现的标签，其语法格式为：它是成对出现的标签，其语法格式为：caption align=表格标表格标题题 align align属性的参数值为属性的参数值为left,center,rightleft,center,right之一。之一。valignvalign属性的参数值为属性的参数值为toptop和和b

33、ottombottom之一。之一。4.2.4 4.2.4 表格布局与标题表格布局与标题n表格布局与标题示例：表格布局与标题示例：4.2.4 4.2.4 表格布局与标题表格布局与标题n表格布局与标题示例代码如下：表格布局与标题示例代码如下：4.2.4 4.2.4 表格布局与标题表格布局与标题表格的布局和标题示例表格的布局和标题示例这个表格有标题：这个表格有标题：表格标题表格标题 100 200 300 400 500 600 表格修饰属性小结表格修饰属性小结Border属性属性width属性属性Height属性属性bgcolor属性属性BackGround属性属性CellSpacing属性属性C

34、ellPadding属性属性Align属性属性n行高与布局行高与布局n边框与背景边框与背景4.3 表格行的控制表格行的控制n标签的标签的heightheight属性用来设置表格内某行的高度。属性用来设置表格内某行的高度。其语法格式为：其语法格式为：tr height=数值的设置值为一个整数，其单位为像素。数值的设置值为一个整数，其单位为像素。n标签的标签的alignalign属性用来设置表格中该行单元格内文字属性用来设置表格中该行单元格内文字的水平对齐方式。的水平对齐方式。其语法格式为：其语法格式为：tr align=其中，参数值为其中，参数值为left,center,rightleft,ce

35、nter,right之一。之一。4.3.1 4.3.1 行高与布局行高与布局n标签的标签的valignvalign属性用来设置表格中该行单元格内文属性用来设置表格中该行单元格内文字的垂直方向的对齐方式。字的垂直方向的对齐方式。其语法格式为：其语法格式为：tr valign=其中，参数值为其中，参数值为top,middle,bottomtop,middle,bottom之一。之一。ValignValign属属性的默认方式为性的默认方式为middlemiddle。4.3.1 4.3.1 行高与布局行高与布局n表格行高与布局示例：表格行高与布局示例：4.3.1 4.3.1 行高与布局行高与布局n表格

36、行高与布局示例代码如下：表格行高与布局示例代码如下：4.3.1 4.3.1 行高与布局行高与布局表格的行高与布局示例 分数 期中考试 期末考试 芙蓉姐姐 250.10 50000.20 n标签的标签的bordercolorbordercolor属性用来设置表格中某行内边框属性用来设置表格中某行内边框的颜色。的颜色。其语法格式为：其语法格式为：其中，其中，“#”取值为十六进制的颜色代码。取值为十六进制的颜色代码。n标签的标签的bgcolorbgcolor属性用来设置表格中该行单元格的背属性用来设置表格中该行单元格的背景颜色。景颜色。其语法格式为：其语法格式为：其中，其中，“#”取值为十六进制的颜

37、色代码。取值为十六进制的颜色代码。4.3.2 4.3.2 边框与背景边框与背景n边框与背景示例：边框与背景示例：4.3.2 4.3.2 边框与背景边框与背景n边框与背景示例代码如下：边框与背景示例代码如下：4.3.2 4.3.2 边框与背景边框与背景表格的边框与背景示例 第一 行 第二 行 表格行的修饰属性小结表格行的修饰属性小结height属性属性align属性属性Valign属性属性BorderColor属性属性Bgcolor属性属性n列宽与布局列宽与布局n边框与背景边框与背景n跨行跨列属性跨行跨列属性4.4 单元格控制单元格控制n的的widthwidth属性属性 widthwidth属性

38、用来设置表格中某单元格的宽度。属性用来设置表格中某单元格的宽度。语法格式为：语法格式为：td width=或或th width=此属性的参数值可以是数字或百分比。此属性的参数值可以是数字或百分比。n的的alignalign属性属性alignalign属性用来设置表格中某单元格内文字的水平对齐属性用来设置表格中某单元格内文字的水平对齐方式。其语法格式为：方式。其语法格式为：td align=或或th align=此属性的参数值可以为此属性的参数值可以为left,center,rightleft,center,right之一。之一。4.4.1 4.4.1 列宽与布局列宽与布局n的的valignva

39、lign属性属性 valignvalign属性用来设置表格中某单元格内文字的垂直对属性用来设置表格中某单元格内文字的垂直对齐方式。其语法格式为：齐方式。其语法格式为：td valign=或或th valign=valign valign属性的参数值为属性的参数值为top,middle,bottomtop,middle,bottom之一，之一，分别表示该单元格中的内容是上对齐、垂直居中、还是分别表示该单元格中的内容是上对齐、垂直居中、还是下对齐的。该属性的默认方式是下对齐的。该属性的默认方式是middlemiddle。4.4.1 4.4.1 列宽与布局列宽与布局n列宽与布局示例：列宽与布局示例：

40、4.4.1 4.4.1 列宽与布局列宽与布局n列宽与布局示例代码如下：列宽与布局示例代码如下：4.4.1 4.4.1 列宽与布局列宽与布局表格的列宽与布局示例 分数 期中考试 期末考试 芙蓉姐姐 250.10 50000.20 nbordercolorbordercolor属性属性 bordercolorbordercolor属性用来设置表格中某单元格的边框颜属性用来设置表格中某单元格的边框颜色。其语法格式为：色。其语法格式为：td bordercolor=或或th bordercolor=其中，其中，“#”取值为十六进制的颜色代码。取值为十六进制的颜色代码。nbgcolorbgcolor属性

41、属性 用来设置表格中某单元格的背景颜色。语法格式为：用来设置表格中某单元格的背景颜色。语法格式为：或或nbackgroundbackground属性属性 用来设置表格中某单元格的背景图像。语法格式为：用来设置表格中某单元格的背景图像。语法格式为：或或td background=URL 4.4.2 4.4.2 边框与背景边框与背景n边框与背景示例：边框与背景示例：4.4.2 4.4.2 边框与背景边框与背景n边框与背景示例代码如下：边框与背景示例代码如下：4.4.2 4.4.2 边框与背景边框与背景边框与背景示例单元格背景色：第一 行 第二 行 nrowspanrowspan属性属性 rowsp

42、anrowspan属性用来表示该单元格所跨的行数。默认值属性用来表示该单元格所跨的行数。默认值为为1 1。其语法格式为：。其语法格式为：td rowspan=或或th rowspan=ncolspancolspan属性属性 colspancolspan属性用来表示该单元格所跨的列数。默认值属性用来表示该单元格所跨的列数。默认值为为1 1。其语法格式为：。其语法格式为：td colspan=或或th colspan=4.4.3 4.4.3 跨行跨列属性跨行跨列属性n跨行跨列属性示例：跨行跨列属性示例：4.4.3 4.4.3 跨行跨列属性跨行跨列属性n跨行跨列属性示例代码如下：跨行跨列属性示例代码

43、如下：4.4.3 4.4.3 跨行跨列属性跨行跨列属性跨行跨列属性示例用colpsan属性，设置包含多列的单元格：姓名 联系方式 Bill Gates 555 77 854 555 77 855 4.4.3 4.4.3 跨行跨列属性跨行跨列属性用rowspan这个属性，设置包含多行的单元格：姓名 Bill Gates 联系方式 555 77 854 555 77 855 表格单元格修饰属性小结表格单元格修饰属性小结Width属性属性Align属性属性Valign属性属性BorderColor属性属性Bgcolor属性属性BackGround属性属性Rowspan属性属性Colspan属性属性4

44、.5 本章思考本章思考 n如何建立表格，以及对表格进行修饰。如何建立表格，以及对表格进行修饰。n如何进行表格行的控制和单元格的控制。如何进行表格行的控制和单元格的控制。4.6 本章小结本章小结n本章介绍了表格的建立，表格、行和单元格的控制。本章介绍了表格的建立，表格、行和单元格的控制。n介绍了表格背景及相关属性的一些设置。介绍了表格背景及相关属性的一些设置。n试着用试着用Dreamweaver等网页编辑软件，实现本章所等网页编辑软件，实现本章所讲的知识点。讲的知识点。五、框架的应用五、框架的应用5.1 建立框架建立框架5.2 窗口框架设置窗口框架设置5.5 本章思考本章思考5.6 本章小结本章

45、小结5.3 浮动窗口浮动窗口5.4 框架与超链接框架与超链接n通过本章的学习，能够达到熟练运用本章所讲到通过本章的学习，能够达到熟练运用本章所讲到的关于框架的基本知识，灵活自由地对框架进行的关于框架的基本知识，灵活自由地对框架进行分割，重点掌握框架的基本结构和分割方式。分割，重点掌握框架的基本结构和分割方式。教学基本要求教学基本要求n框架结构框架结构n框架分割方式框架分割方式5.1 建立框架建立框架n框架的基本结构包括两部分：框架集、框架框架的基本结构包括两部分：框架集、框架 主要是利用主要是利用标签和标签和标签来定义。标签来定义。n窗口框架文档窗口框架文档HTMLHTML的结构如下：的结构如

46、下：5.1.1 5.1.1 框架结构框架结构 n左右分割窗口左右分割窗口采用采用colscols属性，即在垂直方向上讲浏览器分割成多个属性，即在垂直方向上讲浏览器分割成多个窗口。结构如下：窗口。结构如下：frameset cols=frame src=frame src=cols cols后面的参数值可以用数字、百分比和剩余值及这后面的参数值可以用数字、百分比和剩余值及这三种方式的混合方式来表示。剩余值（三种方式的混合方式来表示。剩余值（*）表示当前所有）表示当前所有窗口设定之后的剩余部分。窗口设定之后的剩余部分。5.1.2 5.1.2 框架分割方式框架分割方式n列分的框架示例：列分的框架示例

47、：5.1.2 5.1.2 框架分割方式框架分割方式n列分的框架示例代码：列分的框架示例代码：5.1.2 5.1.2 框架分割方式框架分割方式 列分的框架示例 n上下分割窗口上下分割窗口采用采用rowsrows属性，即在水平方向上讲浏览器分割成多个属性，即在水平方向上讲浏览器分割成多个窗口。结构如下：窗口。结构如下：frameset rows=frame src=frame src=rows rows后面的参数值可以用数字、百分比和剩余值及这后面的参数值可以用数字、百分比和剩余值及这三种方式的混合方式来表示。剩余值（三种方式的混合方式来表示。剩余值（*）表示当前所有）表示当前所有窗口设定之后的剩

48、余部分。窗口设定之后的剩余部分。5.1.2 5.1.2 框架分割方式框架分割方式n行分的框架示例：行分的框架示例：5.1.2 5.1.2 框架分割方式框架分割方式n行分的框架示例代码：行分的框架示例代码：5.1.2 5.1.2 框架分割方式框架分割方式 行分的框架示例 n嵌套分割窗口嵌套分割窗口既左右分割又上下分割窗口。结构如下：既左右分割又上下分割窗口。结构如下：frameset rows=frame src=frameset cols=frame src=frame src=或者将或者将colscols属性和属性和rowsrows属性调换位置。属性调换位置。5.1.2 5.1.2 框架分割

49、方式框架分割方式n既有行分又有列分的框架示例：既有行分又有列分的框架示例：5.1.2 5.1.2 框架分割方式框架分割方式n既有行分又有列分的框架示例代码：既有行分又有列分的框架示例代码：5.1.2 5.1.2 框架分割方式框架分割方式 既有行分又有列分的框架示例 n框架集属性框架集属性n框架窗口属性框架窗口属性5.2 窗口框架设置窗口框架设置n水平水平/垂直分割窗口属性垂直分割窗口属性rows/colsrows/colsrowsrows和和colscols的值分别说明窗口横向和纵向的分割情况。的值分别说明窗口横向和纵向的分割情况。其语法格式如下：其语法格式如下：frameset rows=n

50、设置窗口框架宽度属性设置窗口框架宽度属性borderborder 通过通过borderborder属性，可以设定分割窗口的框架宽度。属性，可以设定分割窗口的框架宽度。其语法格式如下：其语法格式如下：frameset border=5.2.1 5.2.1 框架集属性框架集属性n设置边框颜色属性设置边框颜色属性bordercolorbordercolor 通过通过bordercolorbordercolor属性，可以设定框架边框的颜色。属性，可以设定框架边框的颜色。其语法格式如下：其语法格式如下：frameset bordercolor=n设置框架隐藏属性设置框架隐藏属性frameborderfr