您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 管理学资料 > 三DreamweaverCS4网页设计
第1页第2页任务一表格的设计任务二图片视频的插入任务三超链接任务四布局任务五框架任务六表单任务七CSS样式项目二DreamweaverCS4网页设计任务一表格的设计第4页任务一表格的设计●表格基本概念表格是网页制作中使用最多的工具之一,它不仅可以将相关数据有序的排列起来,还可以精确地定位文字、图像等网页元素在页面中的位置,使得页面在形式上丰富多彩又条理清楚,在组织上井然有序又不显单调。第5页任务一表格的设计●任务实施–案例1表格的设计——主页面main.asp的整体设计•新建页面main.asp•查看表格属性面板进行表格属性设置•插入或删除行和列•单元格的拆分和合并第6页任务一表格的设计图片宽:204,高:231图片宽:204,高:263图片宽:486,高:263图片宽:204,高:263将单元格拆分为1列7行插入内嵌表格,1行7列第7页任务一表格的设计●表格基本概念表格是网页制作中使用最多的工具之一,它不仅可以将相关数据有序的排列起来,还可以精确地定位文字、图像等网页元素在页面中的位置,使得页面在形式上丰富多彩又条理清楚,在组织上井然有序又不显单调。表格由行、列和单元格3部分组成,一般通过表格标记table、行标记tr、单元格标记td来创建。第8页任务一表格的设计行列列标题在HTML文档中,广泛使用表格来存放网页上的文本和图像单元格表格标题第9页任务一表格的设计table元素:定义一个表格。–每一个表格只有一对table和/table,一张页面中可以有多个表格。tr元素:定义表格的行–一个表格可以有多行,所以tr/tr对于一个表格来说不是唯一的。td元素:定义表格的一个单元格。–每行可以有不同数量的单元格,在td和/td之间是单元格的具体内容。需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。第10页任务一表格的设计%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title表格的基本构成/title/headbodytableborder=1trtd第1行第1列单元格/tdtd第1行第2列单元格/td/trtrtd第2行第1列单元格/tdtd第2行第2列单元格/td/tr/table/body/html第11页任务一表格的设计第12页任务一表格的设计–caption设置表格标题:•caption设置表格的标题,一般位于整个表格之前,一个table表格只能有一个表格标题•语法:caption表格标题/caption–th表头:•表格的表头th是td单元格的一种变体,实质上仍然是一种单元格。一般位于第一行和第一列,用来表明这一行或列的内容类别。在一般情况下,浏览器会以粗体和居中的样式显示th元素中的内容。•语法:th……./th第13页任务一表格的设计htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title表格的表头/title/headbodytableborder=1caption考试成绩表/captionth姓名/thth语文/thth数学/thth副科/thtrtd张三/tdtd95/tdtd76/tdtd80/td/trtrtd李四/tdtd88/tdtd90/tdtd85/td/trtrtd三毛/tdtd80/tdtd89/tdtd90/td/tr/table/body/html第14页任务一表格的设计●表格的属性–width属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。–height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。–align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。属性值含义Left左对齐Center居中对齐right右对齐第15页任务一表格的设计%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title表格的基本属性/title/headbodytablewidth=500height=130border=1align=centercaption考试成绩表/captionth姓名/thth语文/thth数学/thth副科/thtrtd张三/tdtd95/tdtd76/tdtd80/td/trtrtd李四/tdtd88/tdtd90/tdtd85/td/trtrtd三毛/tdtd80/tdtd89/tdtd90/td/tr/table/body/html第16页任务一表格的设计–border属性:表格边线粗细,可以使用border设置表格的边框效果,包括边框的宽度、变宽的颜色等。•语法:tableborder=“边框宽度”–border属性设置的表格边框职能影响表格四周的边框宽度,而不能影响单元格之间的边框尺寸。–bordercolor表格边框颜色•默认情况下边框颜色是灰色,设置边框颜色的前提是边框的宽度不能为0,否则无法显示出边框的颜色。•语法:–tableborder=“边框宽度”bordercolor=“边框颜色”第17页任务一表格的设计%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title表格的边框颜色/title/headbodytablewidth=200border=5bordercolor=#66CCFFtrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table/body/html第18页任务一表格的设计–内框宽度cellspacing(间距)•用于设置表格内部每个单元格之间的间距,单位是像素;•语法:–tablecellspacing=“内框宽度值”–表格内文字与边框间距cellpadding(填充)•在默认情况下,单元里的内容会紧贴着表格的边框,这样看上去非常拥挤。可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离;•语法:–tablecellpadding=“文字与边框距离值”第19页任务一表格的设计%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title表格内文字与边框距离/title/headbodytablewidth=200border=1cellpadding=10cellspacing=5bordercolor=#66CCFFtrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table/body/html第20页第21页任务一表格的设计●表格的属性–bgcolor属性:指定表格或某一个单元格的背景颜色。–background属性:指定表格或某一个单元格的背景图片。其属性值为一个URL地址。第22页任务一表格的设计●单元格属性–width属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。–height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。–bordercolordark属性:单元格的暗边框就是单元格边框背光的部分。通过bordercolordark可以设置单元格暗边框的颜色。–bordercolorlight属性:单元格的两边框就是单元格边框向光的部分。通过bordercolorlight可以设置单元格亮边框的颜色。第23页任务一表格的设计%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title单元格的暗、亮边框颜色/title/headbodytablewidth=406border=1align=centercellpadding=5cellspacing=2trtdwidth=83bordercolordark=#FF9900白羊座/tdtdwidth=83金牛座/tdtdwidth=83双子座/tdtdwidth=92bordercolordark=#9900CC巨蟹座/td/trtrtd射手座/tdtd魔羯座/tdtd水瓶座/tdtd双鱼座/td/tr·trtdbordercolorlight=#FF9900狮子座/tdtd处女座/tdtd天秤座/tdtdbordercolorlight=#9900CC天蝎座/td/tr/table/body/html第24页任务一表格的设计●单元格属性–align属性:指定表格或某一个单元格里的内容(文本、图片等)的水平对齐方式。–valign属性:指定表格或某一个单元格里的内容(文本、图片等)的垂直对齐方式。属性值含义Left左对齐Center居中对齐right右对齐属性值含义top对内容进行上对齐middle对内容进行居中对齐bottom对内容进行下对齐baseline与基线对齐第25页任务一表格的设计●单元格属性•baseline值基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同的基线。该值的效果常常与bottom值相同。不过,如果文本的字号各不相同,那么baseline的效果会更好。第26页任务一表格的设计●单元格属性–colspan属性:水平跨度–rowspan属性:垂直跨度第27页BODYTABLEBORDER=2ALIGN=CENTERCAPTION创建表格/CAPTIONTHCOLSPAN=3第一学期/THTHCOLSPAN=3第二学期/THTRTD数学/TDTD科学/TDTD英语/TDTD数学/TDTD科学/TDTD英语/TDTRTD98/TDTD95/TDTD80/TDTD95/TDTD87/TDTD88/TD....COLSPAN=“n”属性表示跨多少列1第28页BODYTABLEBORDER=1,align=centerCAPTIONb创建表格b/CAPTIONTRTH/THTH/THTH螺母/TH
本文标题:三DreamweaverCS4网页设计
链接地址:https://www.777doc.com/doc-5554 .html