DreamweaverCC之表格实用教案.ppt

•1.表格的简单操作(cāozuò)•2.简单表格的排版•3.复杂表格的排版•4.表格其它应用本章学习(xuéxí)主要内容：第1页/共41页第一页，共42页•在一个表格中，横向称为行，纵向称为列，行列交叉部分称为单元格，单元格中的内容(nèiróng)和边框之间的距离称为边距，单元格和单元格之间的距离称为间距，整张表格的边缘称做边框6.1表格的简单(jiǎndān)操作第2页/共41页第二页，共42页•6.1.1表格的组成•6.1.2插入(chā￿rù)表格•6.1.3表格属性•6.1.4表格单元格属性•6.1.5在表格中插入(chā￿rù)内容•6.1.6选择表格元素•6.1.7合并和拆分单元格6.1表格的简单(jiǎndān)操作第3页/共41页第三页，共42页•一个完整的表格是由多个HTML表格标签组合而成的•

和分别是表格的起始标签和终止标签，所有有关表格的内容均位于这两个标签之间和是表格的行标签，出现(chūxiàn)几对和，表格就包含几行和是表格的列标签，位于和标签之间，出现(chūxiàn)几对和，该行就包含几列。

6.1.1表格(biǎogé)的组成第4页/共41页第四页，共42页•选择菜单【插入】|【表格】，或选择【插入】面板(miàn￿bǎn)中的【布局】选项卡，单击【表格】按钮￿，也可使用组合键，打开【表格】对话框，设置表格相关属性后，单击【确定】按钮，即可在网页中光标所在位置上插入表格6.1.2￿插入(chā￿rù)表格第5页/共41页第五页，共42页•在页面中新建表格或选中表格，打开表格【属性】面板，在表格的【属性】面板中，可以设置(shèzhì)表格属性，用来控制表格的外观特征6.1.3表格(biǎogé)属性第6页/共41页第六页，共42页•在对表格的操作过程中，如需设置行、列或者是某几个单元格的属性，可选中一个(yī￿ɡè)或多个单元格，打开单元格【属性】面板进行设置6.1.4表格(biǎogé)单元格第7页/共41页第七页，共42页•根据需要可以在表格的某些单元格中插入文本、图像或各种多媒体对象在表格中插入内容通常采用两种方法•（1）直接在【文档】窗口(chuāngkǒu)中插入•（2）利用剪贴板插入6.1.5在表格中插入(chā￿rù)内容第8页/共41页第八页，共42页。

•1．选择(xuǎnzé)单元格•2．选择(xuǎnzé)行/列•3．选择(xuǎnzé)整个表格6.1.6选择表格(biǎogé)元素第9页/共41页第九页，共42页•在绘制不规则表格过程中，经常( jīngcháng)要将多个单元格合并成一个单元格，或者将一个单元格拆分成多行或多列•在采用简单表格布局的网页中，根据网页布局情况合并和拆分单元格是网页布局的关键工作•1.￿单元格的合并•2.￿单元格的拆分6.1.7合并(hébìng)和拆分单元格第10页/共41页第十页，共42页•简单表格排版就是在页面中插入一个边框宽度为0的表格，通过对行、列和单元格的设置和调整，实现网页元素的精确定位，完成页面排版•用于行列(háng￿liè)比较规整，结构比较简单的网页6.2简单(jiǎndān)表格的排版第11页/共41页第十一页，共42页•6.2.1课堂案例-融通室内装饰•6.2.2复制(fùzhì)、粘贴表格•6.2.3删除表格和清除表格内容•6.2.4增加和删除表格的行和列6.2简单表格(biǎogé)的排版第12页/共41页第十二页，共42页•案例学习目标：学会表格基本操作，体验简单排版过程。

•案例知识要点：选择菜单【修改】|【表格】，打开子菜单，选择相应(xiāngyīng)菜单项，对表格进行编辑，实现简单表格的排版在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计•素材所在位置：光盘/素材/ch06/课堂案例-融通室内装饰•案例布局如图6-11下所示，案例效果如图6-12所示6.2.1课堂案例(àn￿lì)-融通室内装饰第13页/共41页第十三页，共42页第14页/共41页第十四页，共42页第15页/共41页第十五页，共42页•1.利用(lìyòng)菜单•2.利用(lìyòng)快捷键•3.利用(lìyòng)鼠标直接拖动6.2.2复制、粘贴(zhāntiē)表格第16页/共41页第十六页，共42页•1.删除整个表格•2.删除整行或整列(zhěnɡ￿liè)•3.清除表格中的内容6.2.3删除表格和清除(qīngchú)表格内容第17页/共41页第十七页，共42页•1.利用表格【属性】面板(miàn￿bǎn)•2.利用【修改】菜单6.2.4增加和删除(shānchú)表格的行和列第18页/共41页第十八页，共42页•通过更多次的拆分合并，以及更多的表格嵌套，形成更加复杂的表格布局形式。

•由于浏览器下载网页是采取逐层下载的形式，如果将整个复杂网页放在一个(yī￿ɡè)大

中进行布局，会极大地影响网页的下载速度•如果表格超过了3层，搜索引擎就不再抓取•应尽量将一个(yī￿ɡè)大的表格，拆分成多个小的表格，由上至下排列，以最大地提高网页的浏览和检索效率6.3复杂(fùzá)表格的排版第19页/共41页第十九页，共42页•6.3.1课堂(kètáng)案例-江雨桥的博客•6.3.2表格的嵌套•6.3.3单元格与表格背景6.3复杂(fùzá)表格的排版第20页/共41页第二十页，共42页•案例学习目标：学习复杂表格排版•案例知识要点(yàodiǎn)：在页面中插入多个表格在主表格中，通过嵌套表格和进一步拆分单元格，实现复杂表格的排版在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计•素材所在位置：光盘/素材/ch06/课堂案例-江雨桥的博客•案例效果图如图6-38所示，案例布局如图6-39所示6.3.1课堂(kètáng)案例-江雨桥的博客第21页/共41页第二十一页，共42页第22页/共41页第二十二页，共42页第23页/共41页第二十三页，共42页。

•1.￿嵌套表格的大小(dàxiǎo)•2.￿嵌套表格的位置6.3.2表格(biǎogé)的嵌套第24页/共41页第二十四页，共42页•在Dreamweaver中，单元格【属性】面板中仅提供了单元格的背景颜色设置方法，设置表格的背景，或是设置单元格的背景图片，通常采用以下两种方法•1.直接修改代码(dài￿mǎ)•2.通过添加CSS样式6.3.3单元格与表格(biǎogé)背景第25页/共41页第二十五页，共42页•表格除了具备上述布局功能外，还具有数据管理的功能通过(tōngguò)设置表格和单元格的基本属性，我们可以将数据展示得更见美观清晰，细线表格和带状表格是其中最常使用的两种形式6.4表格其它(qítā)应用第26页/共41页第二十六页，共42页•6.4.1课堂(kètáng)案例-远景苑小区•6.4.2细线表格和带状表格•6.4.3表格排序6.4表格数据(shùjù)功能第27页/共41页第二十七页，共42页•案例学习目标：学习使用表格表示数据•案例知识要点：使用菜单【插入(chā￿rù)】|【表格对象】|【导入表格式数据】，在页面指定位置插导入表格式数据•素材所在位置：光盘/素材/ch06/课堂案例-远景苑小区。

•案例效果图如图6-60所示6.4.1课堂(kètáng)案例-远景苑小区第28页/共41页第二十八页，共42页第29页/共41页第二十九页，共42页•在很多网页制作(zhìzuò)风格中，设置表格内框线的细线效果，可以强化表格的装饰性而使表格更加美观但是，细线表格的设置方式不是简单地将表格边框宽度设置为1px，因为此时表格边框宽度和形状都不是细线效果创建细线表格的方法是，当单元格间距为1px时，分别对表格和单元格设置不同背景颜色，内框线的细线效果即可显示出来•带状表格效果可以令表格中数据显示更加清晰间隔设置表格中各行的背景效果，即可形成带状表格，常见的带状表格与细线表格结合效果如图6-71所示该种效果被广泛应用于office系列软件，通过软件自带的表格样式管理表格数据，在网页设计中可予以借鉴6.4.2细线表格(biǎogé)和带状表格(biǎogé)第30页/共41页第三十页，共42页•Dreamweaver还具有为表格中数据排序(pái￿xù)的功能6.4.3排序(pái￿xù)第31页/共41页第三十一页，共42页•6.5.1练习(liànxí)案例-爱丽丝家具•6.5.2练习(liànxí)案例-鲜花速递网6.5练习(liànxí)案例第32页/共41页第三十二页，共42页。

•案例练习目标：练习简单网页排版•案例操作要点：•1．创建名称为index.html的网页文档并存于站点根文件夹中•2．设置页面属性：字体大小12px，颜色白色，加粗，背景颜色为#897715•3．采用简单表格进行布局插入6行2的布局表格，表格宽度为900px，单元格间距为5px，并根据案例布局图进行单元格合并•4．插入单元格的图像用空格隔开•5．创建名称为mystyle.css的CSS样式文档，并将所有(suǒyǒu)样式存在该文档中6.5.1练习(liànxí)案例-爱丽丝家具第33页/共41页第三十三页，共42页•6.￿建立标题文字样式：名称(míngchēng)为.w1，字体为黑体，字号为16px，颜色为白色；部分正文文本样式：名称(míngchēng)为.w2，字体为宋体12px，颜色为#FF6，加粗•素材所在位置：光盘/案例素材/ch06/练习案例-爱丽丝家具，案例布局效果如图6-75所示，案例效果如图6-76所示6.5.1练习(liànxí)案例-爱丽丝家具第34页/共41页第三十四页，共42页第35页/共41页第三十五页，共42页第36页/共41页第三十六页，共42页。

•案例练习目标：练习复杂表格布局(bùjú)•案例操作要点：•1.￿创建名称为index.html的新文档并存于站点根文件夹中•2．采用多表格和嵌套表格进行网页布局(bùjú)自上而下分别插入：表格一为2行1列，表格二为1行2列，表格三为1行1列，宽度均为960px•3．在表格二第1列中插入4行3列嵌套表格，宽度为93%，居中对齐，并进行适当的单元格合并；第2列中也插入3行1列嵌套表格，宽度为90%，居中对齐6.5.2练习案例(àn￿lì)-鲜花速递网第37页/共41页第三十七页，共42页•4．创建名称为mystyle.css的CSS样式文档，并将所有样式存在该文档中•5．建立表格二背景样式：名称为.t，背景图片为bg.gif，作用在整个表格二上建立标题文字样式：名称为.w1，字体为黑体，字号为24px，颜色为白色；正文(zhèngwén)文本样式：名称为.w2，字体为宋体，字号为12px，颜色为白色•素材所在位置：光盘/案例素材/ch06/练习案例-鲜花速递网，案例布局效果如图6-77所示，案例效果如图6-78所示6.5.2练习案例(àn￿lì)-鲜花速递网第38页/共41页第三十八页，共42页。

第39页/共41页第三十九页，共42页第40页/共41页第四十页，共42页感谢您的欣赏(xīnshǎng)！第41页/共41页第四十一页，共42页内容(nèiróng)总结1.表格的简单操作6.2.3删除表格和清除表格内容案例学习目标：学习复杂表格排版表格除了(chú le)具备上述布局功能外，还具有数据管理的功能6.4.2细线表格和带状表格案例学习目标：学习使用表格表示数据带状表格效果可以令表格中数据显示更加清晰案例练习目标：练习简单网页排版2．采用多表格和嵌套表格进行网页布局感谢您的欣赏第四十二页，共42页。

点此查看常见问题