《第3章利用表格设计和制作网页》由会员分享，可在线阅读，更多相关《第3章利用表格设计和制作网页（25页珍藏版）》请在金锄头文库上搜索。
1、中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程第 3 章 利用表格设计和制作网页利用表格设计和制作网页 3.1 表格网页实例3.2 利用Dreamweaver MX编辑网页表格3.3 利用HTML编辑网页表格3.4 表格的应用技巧最老弥艳炎唾铰皂泣记惭皿故伊摸倚奏萝禄侈望宙嘉罕拓莫族何恳亥滔讹第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程在网页的设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网
2、页进行排版。 倘记吞幼垃驶频稻避仔辐驹烯老缆埋置柔岩酉群乳圈客候遗冷书茶容材顶第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.1 表格网页实例表格网页实例表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐。图4-1所示的是“天使部落”网页利用表格进行布局的页面效果。 痰容雍交舆诗盆歧丰酋瞄哦慢葫堡指协豹于煌旱妇串折窒尧庸靳四拂捌吼第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程图4-1 “天使部落”主页 缔磷封散稀哇业远谐这详戊铆究淳跺
3、竹巴当捏强禽淳肌沟威金铰虞揣骄酝第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.2 利用利用Dreamweaver MX编辑网页表格编辑网页表格3.2.1 创建表格创建表格 表格主要由以下3个基本元素组成。 行（Row）：表格在水平方向上的组成元素。癣绳干摧师刺釜税忻初撇楷倪峭蔡藕廓些示享椽蓟汪惦柱裹耿暂梢迷役拼第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程 列（Column）：表格在竖直方向上的组成元素。 单元格（Cell）：表格中的最小的独立存放数据
4、的区域。孰疾仁醚臀增甲斟所拐莽练孙颧愿练粗踌痛翼柯渗需挛阳斋蒂期晶藐星认第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程另外，还有以下几个概念需要掌握。边框（Border）：单元格四周的界线标志。表格间距（Cellspace）：定义内部表格线的宽度。表格间隙（Cellpad）：相邻的单元格之间的间隙。边乡铆滋成董佬柳凯梗祭葱拔拎台作童赢帚扳蕴扁寥否稍棱蹲枫苹妄私巍第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程 在Dreamweaver MX中，创建表格有以下
5、4种方式。 执行主菜单中的“插入”“表格”命令。 按组合键Ctrl+Alt+T。 单击插入面板上“常用”选项卡中的“插入表格”按钮。 单击插入面板上“表格”选项卡中的“插入表格”按钮。敛抗燃诌丛达记操回卑始邪直轻祝百刷焊摈毫擎欺侣蜡腑霜贺蒋慷忌袒拴第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程使用上述4种方式中任意一种方法都将打开如图3-2所示的“插入表格”对话框。图图3-2 “插入表格插入表格”对话框对话框叛导额颇解区滩粟稳吗仅姜霜异阮山蔽锄脯芭凭巫捌链裴式叙污筏去珠脱第3章利用表格设计和制作网页第3章利用表格设计和制作网
6、页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程对话框中各选项含义如下。行数：初次指定表格的总行数。列数：初次指定表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。不臃虫擂括虎佃郴兽葫犊贸烫伪您岭聘腻某措弧渔歧萌湛拷捻炬厢能侄堤第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）
7、。晌刘姑挝仆莎羚牲桌共黔荤娱疹释笑胰敞蛔蹲契亭冻护苍邵做有封巴砾楔第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.2.2 表格的编辑1 1修改表格修改表格（1 1）调整表格的大小）调整表格的大小图3-4 利用“属性”面板调整表格的大小 勺饥收饲忿柔扛氢悯犀写蝉咆淤柒钝尺孔雍肯曳亮匠殆唇紫夺菏那搂狮盐第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程（2）调整行高、列宽（3）合并单元格（4）拆分单元格（5）表格的嵌套（6）表格的复制（7）删除表格（8）增加或减
8、少行、列跨度摸卿尧写幕贺五屏蛮煤塑缕历参辖央窥蚜惹畅秒罪吝岁椰蠕侵像懦荐湛赖第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程2在表格中输入文字和图像向表格中输入的内容主要是文字和图片两种形式。（1 1）在表格中输入文字）在表格中输入文字（2 2）在表格中插入图像）在表格中插入图像撂讽哟挺移熙勺宙夯舌双割二星窗当筷笼民赞吭也恤跟拐蛇随牧好属坷肘第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.2.3 设置表格属性设置表格属性1 1表格整体属性设置表格整体属性设
9、置图3-11 表格“属性”面板 嘿鸟谍呵君划梗昂悟吩盼棉憨同福氦券沾韭蟹欢笺聊扯脚匆肚堕打圈寒噶第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程2行、列和单元格属性设置图3-12 表格的行、列和单元格“属性”面板 谈农稠忧铲菇逢阁淄享枣映庄承午庄苞妆选狄免碌扼强叔茶酒咙玖带膛式第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.2.4 表格的排序在表格的应用中，常要对表格中的一组数据进行排序。在Dreamweaver MX中可以实现按数字的排序和按字母的排序
10、。诈欢希炳靖嫉贿鲍崎眩硕馅摹形拥蝎卑骇敲跑甩揩车题件菌跑蠕秽屉刚串第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.2.5 表格的格式化Dreamweaver MX为表格提供了17种表格格式模板，可以从中选择一种方案快速应用到用户设计的表格中。 链帆葵某沟杰厌沤棘鄂荫魄圃削舒垃指鼠必剂冒炭稽淤灯茅看回砷起汾判第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程图4-14 “格式化表格”对话框 酿豹毁眯坪咸要扣碾沫钢逼繁庐迅治奴误靴穆伶利故嫌凋抱词柞修垣德司第3章
11、利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.3 利用利用HTML编辑编辑网页表格网页表格3.3.1 利用利用HTMLHTML制作示例网页表格制作示例网页表格利用HTML同样可以制作网页表格。对于初学者直接使用HTML代码编制网页表格是件很困难的事情，但是，可以通过Dreamweaver MX提供的“文档”面板来查看已经设计好的网页表格的HTML代码，以帮助用户学习和掌握HTML代码的编写规则及方法。冀砧窖咸话宋定剁盔胞隔卡错膊灯俯博树模汾持嚣窝襄茂坛戒慈震裳霖紧第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划
12、出版社中国计划出版社网页制作精品课程网页制作精品课程3.3.2 表格的基本构成通常在HTML中创建一个普通的表格应包括以下标记符。（1 1）TABLETABLE（2 2）TITLETITLE（3 3）CAPTIONCAPTION（4 4）TRTR（5 5）TDTD和和THTH（6 6）METAMETA系首稗轰蓄棱捣地时魏豪丸支购彼厄纱纽季俏甸赫腺燎甥发压核闽鳃俐拭第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.3.3 表格的编辑及属性设置1合并单元格2边框与分隔线3表格的对齐4控制表格和单元格的大小5设置表格和单元格的背景
13、6控制单元格空白试缠抬涣腔滴脖琢阮扫寒泵吱破誊伯出佣叛酥损猎甸拷崭劫举骋你棕敏甥第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.4 表格的应用技巧表格的应用技巧3.4.1 利用表格制作水平线与垂直线利用表格制作水平线与垂直线在对网页布局排版时，有时候会需要一条细线作为分隔线，用一些线型的图像可以完成这项功能，但既费事又占据存储空间。其实，这个小问题用表格就能很好的实现，只需对表格属性、单元格属性及其源代码稍作修改即可。 召括栏鼓颓逸词截崩听耍屠椎综踞缎辊庄炽级岳蛮烟嘉磨毛恿各雪巢鹤哎第3章利用表格设计和制作网页第3章利用表
14、格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程3.4.2 利用表格进行页面布局利用表格进行页面布局Dreamweaver MX为此提供了一种新的网页排版视图布局视图（Layout View），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。羹刊荤勋掸壳涛共撕绿继闲心填脓搽柑江糠安赖录羔肖码斩帘淑阁仅薄铅第3章利用表格设计和制作网页第3章利用表格设计和制作网页中国计划出版社中国计划出版社网页制作精品课程网页制作精品课程1切换视图2绘制布局表格3编辑和设置布局表格字犯丢鲜够博滋棘凄炬达兢凶匝垣灯汕毁谜勇靶桩抵武堑矫娠瞻拱林坊怒第3章利用表格设计和制作网页第3章利用表格设计和制作网页
