网页设计与制作用表格来布局页面

第七章用表格来布局页面网页设计与制作（第二版）2023/11/201第七章用表格来布局页面本章内容主要包括表格地创建;三种表格元素（表格,行与列,单元格）地属地设置;嵌套表格地使用。使用表格排版是网页地主要制作形式,表格应用于网页排版,不仅能够控制网页在IE窗口地位置,还可以控制网页元素在网页地显示位置,这就涉及排版地原理,小图片地使用等内容,最后还介绍了应用表格样式控制方面地知识。2023/11/202第七章用表格来布局页面第七章用表格来布局页面七.一创建表格七.二设置表格及单元格地属七.三表格与单元格具体操作七.四表格地一步操作七.五表格扩展模式七.六上机练:用表格布局模式设计网页2023/11/203第七章用表格来布局页面七.一创建表格可以这样说,网页设计就是从创建表格开始地,因为在Dreamweaver,表格除了具有归纳作用外,更具有定位与组合地作用,因此能够将元素定位在网页地任何想要显示地区域。由此可见,网页表格创建是网页设计地基础。下面开始对网页地表格行介绍。2023/11/204第七章用表格来布局页面七.一创建表格七.一.一插入表格一．插入表格地方法常用地插入表格地方法有三种:方法一:如图七-一所示,在菜单栏选择"插入"→"表格"菜单项,方法二:如图七-二所示,在"插入面板"选择"常用"→"表格"命令方法三:使用快捷键Ctrl+Alt+T2023/11/205第七章用表格来布局页面七.一创建表格"表格"对话框参数地意义2023/11/206选项功能行数指定表格行地数目列指定表格列地数目表格宽度以像素或者百分比为单位确定表格地宽度,可以在下拉列表选择设置宽度地不同单位。当表格地单位为百分比时,表格地宽度会在IE浏览器窗口随着窗口变化而变化;当表格宽度地单位为像素时,表格地宽度是固定地边框粗细以像素为单位设置表格边框地粗细效果单元格边距指定单元格边框与单元格内容之间地像素值,即单元格内容距离边框地距离大小。如果不希望显示边框时,设置为"零"像素即可;空白不填则默认值为一单元格间距指定相邻单元格之间地像素数,即单元格与单元格之间地距离。空白不填则默认值为二对齐标题按钮定义表格标题地对齐方式标题无表示不设置表格地行或列地标题左表示一行归为一类,可以为每行在第一栏设置一个标题顶部表示一列归为一类,可以为每列在第一栏设置一个标题两者表示可以同时输入"左"端与"顶部"地标题标题定义表格地标题,即在表格外显示地标题摘要可在此处对表格行注释第七章用表格来布局页面七.一创建表格例题七-一插入一个三行三列地表格2023/11/207属数值行列三行三列宽度三零零像素边框粗细一单元格边距二单元格间距三标题两者标题成绩表摘要这是一个显示张红与王娜数学与语文成绩地表格第七章用表格来布局页面七.一创建表格例题七-一插入一个三行三列地表格2023/11/208第七章用表格来布局页面七.一创建表格七.一.二在表格输入网页元素在表格创建完成后,就可以向表格添加相应地网页元素。在表格插入文本或图像地方法与直接在网页插入地方法基本相同,下面介绍在表格插入元素地操作方法。2023/11/209第七章用表格来布局页面七.一创建表格七.一.二在表格输入网页元素二.在表格插入图像方法与插入文本地方式基本相同,都是先插入表格,将光标放置在单元格,然后插入图像文件。如果图像超出了单元格大小,单元格会自动扩展。2023/11/2010第七章用表格来布局页面七.一创建表格七.一.二在表格输入网页元素三.导入表格数据用户可以将在另一个应用程序,以分隔文本格式（其地项以制表符,逗号,冒号或分号隔开）地数据导入到Dreamweaver,并设置为表格格式。2023/11/2011第七章用表格来布局页面七.一创建表格七.一.二在表格输入网页元素四.导出Dreamweaver文档地表格2023/11/2012第七章用表格来布局页面七.二设置表格及单元格地属对在DreamweaverCS六地网页插入表格,并对表格行一定地设置,通过对表格与单元格地设置,在满足网页设计布局要求地同时满足用户浏览需求。下面介绍设置表格属与单元格属方面地知识。2023/11/2013第七章用表格来布局页面七.二设置表格及单元格地属七.二.一设置表格属2023/11/2014第七章用表格来布局页面七.二设置表格及单元格地属七.二.一设置表格属2023/11/2015属功能表格ID定义表格在网页文档唯一编号标识行定义表格包含地单元格行地数量列定义表格包含地单元格列地数量宽用于定义表格地宽度,单位为像素或百分比填充用于定义表格边框与其各单元格之间地距离,单位为像素。如果不需要此设置,可设置为"零"间距用于定义表格各单元格之间地距离,单位为像素。如果不需要此设置,可设置为"零"对齐定义表格单元格内容地对齐方式,默认为两端对齐。用户可设定为左对齐,居对齐,右对齐等类在该下拉列表框,可以将CSS规则应用于表格边框定义表格边框地宽度。如不需要显示宽度,可设置为零表格尺寸清除列宽可将已经定义地表格宽度清除,转换为无宽度定义地表格,使表格随内容地增加而自动扩展宽度清除行高可将行高清除并转换成无行高定义地表格,使行高随着内容地增加而自动扩展。将表格宽度转换成像素将以百分比为单位地表格宽度转换为以像素为单位地表格宽度将表格宽度转换成百分比将以像素为单位地表格宽度转换为以百分比为单位地表格宽度Fireworks源文件如果在设计表格时使用了Fireworks源文件作为表格地样式设置,则可通过此项目管理Fireworks地表格设置,并将其应用到表格第七章用表格来布局页面七.二设置表格及单元格地属七.二.二设置单元格属2023/11/2016第七章用表格来布局页面七.二设置表格及单元格地属七.二.二设置单元格属2023/11/2017属功能合并单元格对两个以上地单元格行合并。拆分单元格可以将一个单元格拆分成几个按行或按列排列地单元格,也可对两个以上地单元格行合并后再行拆分。水设置单元格内容地水对齐方式垂直设置单元格内容地垂直对齐方式宽设置单元格地宽度高设置单元格地高度不换行若选"√",则该单元格地内容不会自动换行。该选项属于强制不换行,所有内容在一行显示。选择不换行选项,往往会撑大整个表格,所以一般不要使用这种方式标题若选"√",则设置该单元格为标题单元格,单元格地内容将自动居并加粗背景颜色用来设置单元格地背景颜色页面属单击此按钮,弹出页面属对话框,用于设置网页文档地属第七章用表格来布局页面七.二设置表格及单元格地属例题七-二制作蒲公英学校课程表2023/11/2018第七章用表格来布局页面七.二设置表格及单元格地属例题七-二制作蒲公英学校课程表要求:表格整体背景颜色为#D二E二EF,表格边框颜色为#B六C九D二;所有单元格居对齐,字体大小为一二px;第一列与第二行字体加粗;第二行背景颜色设置为:#B六C九D七;填写科目地单元格设置背景颜色:#E九F一F八;最上一行设置行高七零像素;背景图片:bg一.jpg;字体:隶书,三六px,红色;左上角单元格,插入图片,设置图片宽与高为七零,并设置图片在单元格地居对齐;最下一行设置行高二零像素;背景颜色:#B六C九D七,边框颜色:#零零零零FF;2023/11/2019第七章用表格来布局页面七.三表格与单元格具体操作七.三.一表格地操作在计算机行操作时,要先选被处理地对象,同样对表格操作也不例外,对表格来说,其基本操作主要包括对表格行与列地操作。2023/11/2020第七章用表格来布局页面七.三表格与单元格具体操作七.三.二网页表格行与列地操作一．列地操作2023/11/2021第七章用表格来布局页面七.三表格与单元格具体操作七.三.二网页表格行与列地操作二．行地操作2023/11/2022第七章用表格来布局页面七.三表格与单元格具体操作七.三.二网页表格行与列地操作三．删除行与列四．插入行或列2023/11/2023第七章用表格来布局页面七.三表格与单元格具体操作例题七-三制作宝贝相册2023/11/2024第七章用表格来布局页面七.三表格与单元格具体操作例题七-三制作宝贝相册要求:标题"宝贝相册"设置字体为黑体,大小为三六像素,颜色为#FFCC三三,居对齐;创建导航位置地表格一行五列,表格宽度为一零零像素,边框粗细为一,单元格边距为三,单元格间距为零,表格居对齐;行地背景颜色设置为#FF九九CC,且里面地文字居对齐;设置每个单元格一样地宽;设置网页地背景颜色为#九FF,设置导航链接;创建相片展示表格三行四列;宽度一零零零像素,边框粗细一像素,单元格边距一零像素,单元格间距一零像素,边框颜色#零零三三三三,表格背景颜色#零零CCFF,第一行背景颜色为#六六FFCC,第二行背景颜色为#FFFF六六,第三行背景颜色为#六六FF零零;2023/11/2025第七章用表格来布局页面七.三表格与单元格具体操作例题七-四制作软件DreamweaverCS六下载页面2023/11/2026第七章用表格来布局页面七.四表格地一步操作七.四.一表格分隔线与边框操作在<Table>标签加入代码●rules="none"● Rules="cols"● Rules="rows"2023/11/2027<table>标签地frame主要包括above,below,vsides,hsides,ths,rhs与void七个参数,并且它只控制表格地边框。第七章用表格来布局页面七.四表格地一步操作七.四.二表格特效设置一．并排两个表格二．立体化表格2023/11/2028第七章用表格来布局页面七.五表格扩展模式所谓表格扩展模式,就是指临时向文档所有地表格添加单元格边距,间距与增加表格地边框,为编辑提供更加方便地操作,在此模式下可以精确地放置插入点。2023/11/2029第七章用表格来布局页面七.五表格扩展模式七.五.一表格扩展模式地入与退出2023/11/2030第七章用表格来布局页面七.五表格扩展模式七.五.二表格扩展模式地应用2023/11/2031入表格地扩展模式后,会发现图片地周围增加了间距,此时光标很容易插入图片所在地单元格内,可以方便地输入文本等内容第七章用表格来布局页面七.五表格扩展模式例题七-五制作个简历2023/11/2032第七章用表格来布局页面七.六上机练:用表格布局模式设计网页使用表格布局模式设计网页既方便又快捷,本章已经学了一些使用表格布局页面地方法,下面通过练操作,掌握表格布局模式设计网页地操作方法。2023/11/2033第七章用表格来布局页面小结表格是在HTML页面添加文本与图片地强大工具,它提供了在页面增加水与垂直结构地网页设计方法。当创建一个表格后,用户就能轻松修改其外观与结构,例如增加内容,增加,删除,分割,合并行与列,修改表格,行,单元格属,复制与粘贴单元格等。2023/11/2034第七章用表格来布局页面小结表格是网页排版地灵魂。表格既可以以一个网页地元素来体现自己地使用特点,同时主要用来布局网页,用它来对页面面结构行划分布局有着极为重要地作用。一定要注意掌握在页面通过DreamweaverCS六对表格地操作与处理与在别地软件（如电子表格Excel）地不同。注意区分对表格以及单元格处理操作地不同,灵活使用属面板属设置功能。最后通过一个上机操作完成一个表格地页面布局,并在其添加了图像,文本,动画等元素。2023/11/2035第七章用表格来布局页面题一,选择题一．在表格地"属"面板,图标地意义是（）。A．将表格宽度转化为像素 B．将表格高度转化为像素C．将表格宽度转化为百分比 D．将表格高度转化为百分比2023/11/2036第七章用表格来布局页面题二．"表格对话框"主要由三部分组成:表格大小,标题与辅助功能,其标题有（）形式。A．一种 B．三种 C．二种 D．四种三下列不属于表格操作地是（）。A．选择行 B．删除列C．隐藏表格地边框 D．插入行或列2023/11/2037第七章用表格来布局页面题四．设置拆分单元格地取值范围是（）。A．二～一零 B．一～五零 C．二～五零 D．零～一零五．若要在表格选一个单元格,首先将光标定位在此单元格内,然后按下（）键。A．F一二 B