DreamweaverCC之表格学习教程.pptx

《DreamweaverCC之表格学习教程.pptx》由会员分享，可在线阅读，更多相关《DreamweaverCC之表格学习教程.pptx（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1.表格的简单操作2.简单表格的排版3.复杂表格的排版4.表格其它应用本章学习主要内容：第1页/共41页在一个表格中，横向称为行，纵向称为列，行列交叉部分称为单元格，单元格中的内容和边框之间的距离称为边距，单元格和单元格之间的距离称为间距，整张表格的边缘称做边框。6.1表格的简单操作第2页/共41页6.1.1表格的组成6.1.2插入表格6.1.3表格属性6.1.4表格单元格属性6.1.5在表格中插入内容6.1.6选择表格元素6.1.7合并和拆分单元格6.1表格的简单操作第3页/共41页一个完整的表格是由多个HTML表格标签组合而成的。和分别是表格的起始标签和终止标签，所有有关表格的内容均位于这

2、两个标签之间。和是表格的行标签，出现几对和，表格就包含几行。和是表格的列标签，位于和标签之间，出现几对和，该行就包含几列。6.1.1表格的组成第4页/共41页选择菜单【插入】|【表格】，或选择【插入】面板中的【布局】选项卡，单击【表格】按钮，也可使用组合键，打开【表格】对话框，设置表格相关属性后，单击【确定】按钮，即可在网页中光标所在位置上插入表格。6.1.2 插入表格第5页/共41页在页面中新建表格或选中表格，打开表格【属性】面板，在表格的【属性】面板中，可以设置表格属性，用来控制表格的外观特征。6.1.3表格属性第6页/共41页在对表格的操作过程中，如需设置行、列或者是某几个单元格的属性，

3、可选中一个或多个单元格，打开单元格【属性】面板进行设置。6.1.4表格单元格第7页/共41页根据需要可以在表格的某些单元格中插入文本、图像或各种多媒体对象。在表格中插入内容通常采用两种方法。（1）直接在【文档】窗口中插入。（2）利用剪贴板插入。6.1.5在表格中插入内容第8页/共41页1选择单元格2选择行/列3选择整个表格6.1.6选择表格元素第9页/共41页在绘制不规则表格过程中，经常要将多个单元格合并成一个单元格，或者将一个单元格拆分成多行或多列。在采用简单表格布局的网页中，根据网页布局情况合并和拆分单元格是网页布局的关键工作。1.单元格的合并2.单元格的拆分6.1.7合并和拆分单元格第1

4、0页/共41页简单表格排版就是在页面中插入一个边框宽度为0的表格，通过对行、列和单元格的设置和调整，实现网页元素的精确定位，完成页面排版。用于行列比较规整，结构比较简单的网页。6.2简单表格的排版第11页/共41页6.2.1课堂案例-融通室内装饰6.2.2复制、粘贴表格6.2.3删除表格和清除表格内容6.2.4增加和删除表格的行和列6.2简单表格的排版第12页/共41页案例学习目标：学会表格基本操作，体验简单排版过程。案例知识要点：选择菜单【修改】|【表格】，打开子菜单，选择相应菜单项，对表格进行编辑，实现简单表格的排版。在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外

5、观设计。素材所在位置：光盘/素材/ch06/课堂案例-融通室内装饰。案例布局如图6-11下所示，案例效果如图6-12所示。6.2.1课堂案例-融通室内装饰第13页/共41页第14页/共41页第15页/共41页1.利用菜单2.利用快捷键3.利用鼠标直接拖动6.2.2复制、粘贴表格第16页/共41页1.删除整个表格2.删除整行或整列3.清除表格中的内容6.2.3删除表格和清除表格内容第17页/共41页1.利用表格【属性】面板2.利用【修改】菜单6.2.4增加和删除表格的行和列第18页/共41页通过更多次的拆分合并，以及更多的表格嵌套，形成更加复杂的表格布局形式。由于浏览器下载网页是采取逐层下载的形

6、式，如果将整个复杂网页放在一个大中进行布局，会极大地影响网页的下载速度。如果表格超过了3层，搜索引擎就不再抓取。应尽量将一个大的表格，拆分成多个小的表格，由上至下排列，以最大地提高网页的浏览和检索效率。6.3复杂表格的排版第19页/共41页6.3.1课堂案例-江雨桥的博客6.3.2表格的嵌套6.3.3单元格与表格背景6.3复杂表格的排版第20页/共41页案例学习目标：学习复杂表格排版。案例知识要点：在页面中插入多个表格。在主表格中，通过嵌套表格和进一步拆分单元格，实现复杂表格的排版。在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计。素材所在位置：光盘/素材/ch0

7、6/课堂案例-江雨桥的博客。案例效果图如图6-38所示，案例布局如图6-39所示。6.3.1课堂案例-江雨桥的博客第21页/共41页第22页/共41页第23页/共41页1.嵌套表格的大小2.嵌套表格的位置6.3.2表格的嵌套第24页/共41页在Dreamweaver中，单元格【属性】面板中仅提供了单元格的背景颜色设置方法，设置表格的背景，或是设置单元格的背景图片，通常采用以下两种方法。1.直接修改代码2.通过添加CSS样式6.3.3单元格与表格背景第25页/共41页表格除了具备上述布局功能外，还具有数据管理的功能。通过设置表格和单元格的基本属性，我们可以将数据展示得更见美观清晰，细线表格和带状

8、表格是其中最常使用的两种形式。6.4表格其它应用第26页/共41页6.4.1课堂案例-远景苑小区6.4.2细线表格和带状表格6.4.3表格排序6.4表格数据功能第27页/共41页案例学习目标：学习使用表格表示数据。案例知识要点：使用菜单【插入】|【表格对象】|【导入表格式数据】，在页面指定位置插导入表格式数据。素材所在位置：光盘/素材/ch06/课堂案例-远景苑小区。案例效果图如图6-60所示。6.4.1课堂案例-远景苑小区第28页/共41页第29页/共41页在很多网页制作风格中，设置表格内框线的细线效果，可以强化表格的装饰性而使表格更加美观。但是，细线表格的设置方式不是简单地将表格边框宽度设

9、置为1px，因为此时表格边框宽度和形状都不是细线效果。创建细线表格的方法是，当单元格间距为1px时，分别对表格和单元格设置不同背景颜色，内框线的细线效果即可显示出来。带状表格效果可以令表格中数据显示更加清晰。间隔设置表格中各行的背景效果，即可形成带状表格，常见的带状表格与细线表格结合效果如图6-71所示。该种效果被广泛应用于office系列软件，通过软件自带的表格样式管理表格数据，在网页设计中可予以借鉴。6.4.2细线表格和带状表格第30页/共41页Dreamweaver还具有为表格中数据排序的功能6.4.3排序第31页/共41页6.5.1练习案例-爱丽丝家具6.5.2练习案例-鲜花速递网6.

10、5练习案例第32页/共41页案例练习目标：练习简单网页排版。案例操作要点：1创建名称为index.html的网页文档并存于站点根文件夹中。2设置页面属性：字体大小12px，颜色白色，加粗，背景颜色为#897715。3采用简单表格进行布局。插入6行2的布局表格，表格宽度为900px，单元格间距为5px，并根据案例布局图进行单元格合并。4插入单元格的图像用空格隔开。5创建名称为mystyle.css的CSS样式文档，并将所有样式存在该文档中。6.5.1练习案例-爱丽丝家具第33页/共41页6.建立标题文字样式：名称为.w1，字体为黑体，字号为16px，颜色为白色；部分正文文本样式：名称为.w2，字

11、体为宋体12px，颜色为#FF6，加粗。素材所在位置：光盘/案例素材/ch06/练习案例-爱丽丝家具，案例布局效果如图6-75所示，案例效果如图6-76所示。6.5.1练习案例-爱丽丝家具第34页/共41页第35页/共41页第36页/共41页案例练习目标：练习复杂表格布局。案例操作要点：1.创建名称为index.html的新文档并存于站点根文件夹中。2采用多表格和嵌套表格进行网页布局。自上而下分别插入：表格一为2行1列，表格二为1行2列，表格三为1行1列，宽度均为960px。3在表格二第1列中插入4行3列嵌套表格，宽度为93%，居中对齐，并进行适当的单元格合并；第2列中也插入3行1列嵌套表格，

12、宽度为90%，居中对齐。6.5.2练习案例-鲜花速递网第37页/共41页4创建名称为mystyle.css的CSS样式文档，并将所有样式存在该文档中。5建立表格二背景样式：名称为.t，背景图片为bg.gif，作用在整个表格二上。建立标题文字样式：名称为.w1，字体为黑体，字号为24px，颜色为白色；正文文本样式：名称为.w2，字体为宋体，字号为12px，颜色为白色。素材所在位置：光盘/案例素材/ch06/练习案例-鲜花速递网，案例布局效果如图6-77所示，案例效果如图6-78所示。6.5.2练习案例-鲜花速递网第38页/共41页第39页/共41页第40页/共41页感谢您的欣赏！第41页/共41页