Dreamweaver网页设计与制作教程课件第5章 表格的设计与制作_第1页
Dreamweaver网页设计与制作教程课件第5章 表格的设计与制作_第2页
Dreamweaver网页设计与制作教程课件第5章 表格的设计与制作_第3页
Dreamweaver网页设计与制作教程课件第5章 表格的设计与制作_第4页
Dreamweaver网页设计与制作教程课件第5章 表格的设计与制作_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章表格的设计与制作第5章表格的设计与制作第5章表格的设计与制作内容提要表格的创建、编辑表格的属性设置特效表格的制作布局表格的基本操作表格和布局表格的应用5.1表格的创建5.1.1在HTML代码中创建表格1.表格的组成行、列、单元格2.表格的基本标签

在HTML文档中，创建表格使用的基本标签有<table></table>、<tr></tr>、<td></td>和<th></th>，这些标签的具体含义及用法如表5-1所示：第5章表格的设计与制作5.1表格的创建第5章表格的设计与制作标签说明<table></table>定义一个表格，成对出现<tr></tr>定义表格中一行，成对出现，嵌套在table标签内<td></td>定义表格中一列，成对出现，嵌套在tr标签内<th></th>定义表头单元格，成对出现，嵌套在tr标签内，文本黑体居中表5-1创建表格使用的基本标签5.1表格的创建例5-1：用html语言实现定义一个如图5-1所示的2行2列的表格。图5-12行2列基本表格网页效果第5章表格的设计与制作5.1表格的创建代码如下：<html><head><title>表格的基本标记</title></head><body><table> <!定义表格开始><tr> <!表格第一行开始><th>第一行第一列</th><th>第一行第二列</th></tr> <!表格第一行结束><tr> <!表格第二行开始><td>第二行第一列</td><td>第二行第二列</td></tr> <!表格第二行结束></table> <!定义表格结束></body></html>第5章表格的设计与制作5.1表格的创建3.表格的属性

表格标记也有一些常见的属性，应用它们可以设置表格的边框、宽度、高度、背景等，常用的表格属性的含义及用法如下：（1）border：此属性定义表格的边框。（2）cellspacing：单元格间距。（3）cellpadding：单元格边距。（4）width：表格的宽度。（5）height：表格的高度。（6）bgcolor：表格的背景色。（7）bordercolor：表格的边框颜色（8）bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。第5章表格的设计与制作（9）bordercolordark：暗边框颜色，当border值不为0时设置有效。（10）align：设定表格在窗口中的对齐方式，也可以用来为某一行或某一个单元格内容设置水平对其方式，其值有left（左对齐，默认）、center（居中）以及right（右对齐）。（11）valign：指定某一行或某一个单元格内容的垂直对齐方式，值由top、middle、bottom和baseline4个值，分别代表顶端对齐，居中对齐，底部对齐和基线对齐。（12）colspan：设定当前单元格跨越的列数。（13）rowspan：设定当前单元格跨越的行数。第5章表格的设计与制作5.1表格的创建第5章表格的设计与制作（9）bordercolordark：暗边框颜色，当border值不为0时设置有效。（10）align：设定表格在窗口中的对齐方式，也可以用来为某一行或某一个单元格内容设置水平对其方式，其值有left（左对齐，默认）、center（居中）以及right（右对齐）。（11）valign：指定某一行或某一个单元格内容的垂直对齐方式，值由top、middle、bottom和baseline4个值，分别代表顶端对齐，居中对齐，底部对齐和基线对齐。（12）colspan：设定当前单元格跨越的列数。（13）rowspan：设定当前单元格跨越的行数。5.1表格的创建5.1表格的创建例5-2：使用html语言编程实现下列网页效果。第5章表格的设计与制作5.1表格的创建<html><head><title>表格的属性</title></head><body><tableborder=”1”align=”center”cellspacing=”0”bordercolor=”#000000”> <tr> <tdheight=”99”colspan=”4”align=”center”valign=”middle”background=”p1.jpg”><fontsize=”6”color=”#ffffff”>青春历程</font></td></tr> <trbgcolor=”#ffcc99”> <tdwidth=”124”align=”center”>专辑</td><tdwidth=”152”align=”center”>照片</td><tdwidth=”168”align=”center”>历程</td><tdwidth=”138”align=”center”>档案</td></tr>

<tr>

<tdheight=”99”colspan=”4”align=”center”><imgsrc=”p2.jpg”width=”422”height=”313”></td></tr></table> </body></html>第5章表格的设计与制作题5-3：使用表格的边框和间距属性实现如图5-3所示带有相框效果的网页第5章表格的设计与制作5.1表格的创建5.1表格的创建<html><head><title>表格的属性</title></head><body><tableborder="10"align="center"cellpadding="15"bordercolor="#0000ff"> <tr> <tdwidth="300"><imgsrc="p3.jpg"width="300"height="400"></td></tr></table></html>第5章表格的设计与制作5.1.2在Dreamweaver中创建表格1.创建一般表格在文档窗口的“设计视图”中通常通过以下方法插入表格。（1）在主菜单中选择【插入】——【表格】命令，或在插入工具栏中选择“常用”类别，单击其中的表格按钮，如图5-4所示。图5-4“插入”工具栏的“常用”类别（2）在弹出的“表格”对话框进行表格行数、列数等相关参数的设置，然后单击“确定”按钮，就会在文中的当前位置插入一个表格。第5章表格的设计与制作5.1表格的创建5.1表格的创建2.创建嵌套表格表格的单元格中再插入表格即构成表格的嵌套。有时候网页的排版很复杂，这时候引入嵌套表格，由总表格负责整体排版，将嵌套的表格插入到总表格的相应位置当中负责各个子栏目的排版，各司其职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到不同于总表格的效果。第5章表格的设计与制作5.1表格的创建3.导入表格数据在表格中也可以添加各种网页元素。添加表格内容的方法很简单，只需将光标定位到要添加内容的单元格中，然后按照添加网页元素的方法操作就行了。在Dreamweaver中，还可以将其他软件制作完成后的表格数据导入到网页文档中。能够导入的数据有EXCEL文档（.xls文件）和其他应用软件制作的文本格式（.txt文件）的表格数据两种。导入EXCEL表格数据导入文本格式的表格数据第5章表格的设计与制作5.2表格的编辑5.2.1选择表格对象1.选择整个表格：2.选择单元格：选择单个单元格和选择多个单元格3.选择整行/整列：（1）选择整行：（2）选择整列：5.2.2合并与拆分单元格1.合并单元格：2.拆分单元格：第5章表格的设计与制作5.2表格的编辑5.2.3调整表格的行数与列数1.添加行或列（1）添加行（2）添加列（3）添加多行或多列2.删除行或列第5章表格的设计与制作5.3表格的属性设置5.3.1设置表格属性1.通过“表格属性“面板设置表格属性2.格式化表格在Dreamweaver中，可以通过使用系统自带的表格模板格式化表格，省去很多繁琐的设置表格的步骤，提高工作效率。第5章表格的设计与制作5.3表格的属性设置5.3.2设置单元格属性

单元格的“属性”面板中，上半部分与选中文本时的“属性”面板相同，主要用于设置单元格中文本的属性；下半部分主要用于设置单元格的属性。5.3.3表格应用实例第5章表格的设计与制作5.3表格的属性设置使用Dreamweaver制作如图所示的网页效果第5章表格的设计与制作5.4特效表格的制作5.4.1打造细线表格要实现这种细线边框表格效果，需要用到单元格的间距属性，具体操作步骤如下：1.创建一个表格。设置表格的行数、列数（如2行1列），边框为0，间距为1.根据需要调整表格的大小。2.选择表格，为表格添加一种背景色，即边线颜色（如黑色）。3.选中所有单元格，为单元格添加与页面背景相同的颜色（如白色）。4.保存文件，按下F12键，在浏览器中显示效果。第5章表格的设计与制作5.4特效表格的制作5.4.2制作立体表格立体表格制作步骤如下：1.创建一个表格。设置表格的行数、列数（如1行4列），边框为1，间距为0.根据需要调整表格的大小。2.选择表格，为表格添加一种背景色（如灰色#CCCCCC）。此时保存，在浏览器中看到的是一个普通网页第5章表格的设计与制作5.4特效表格的制作3.在Dreamweaver编辑状态下切换到拆分视图，在<table>标签内填写如下属性代码。bordercolorlight="#CCCCCC"bordercolordark="#FFFFFF"，该网页主要代码变为：bordercolorlight="#CCCCCC"bordercolordark="#FFFFFF">按下F12键，在浏览器中显示的即为立体表格效果，第5章表格的设计与制作5.4特效表格的制作5.4.3打造圆角表格网页上的圆角表格第5章表格的设计与制作5.4特效表格的制作制作圆角表格的步骤（1）插入表格新建文档，然后在新建的文档中插入一个3行3列的表格，在“表格”对话框中设置表格宽度400像素，边框粗细为0，单元格边距为0，单元格间距为0。（2）插入图片(3）设置单元格宽度和高度（4）设置页面背景颜色（5）设置表格背景色（6）调整中心单元格的高度（8）按F12保存并预览网页5.4特效表格的制作2.宽度固定的圆角表格5.4特效表格的制作（1）插入表格新建文档，然后在新建的文档中插入一个3行1列的表格，在“表格”对话框中设置表格宽度140像素，边框粗细为0，单元格边距为0，单元格间距为0。（2）插入图像在表格的上下两行分别插入图所示的图片（top.gif，bottom.gif），此时表格如图在中间的单元格中插入一个1行1列的表格，将这个表格的间距设置为1，边框粗细为0，宽度为100%，背景颜色与图片颜色相同（#0080ff）。把刚插入表格的唯一的单元格的背景设置为白色，并将这个单元格的高度设置为100像素。按F12保存并在浏览器中预览，效果如图5-38所示。5.5布局表格5.5.1Dreamweaver的布局模式

由于最初表格并不是为布局设计的，而是用于显示数据的，所以使用它进行页面布局时操作会比较复杂。为简化使用表格进行页面布局的过程，Dreamweaver提供了布局模式。在布局模式下可以方便的绘制布局表格，布局单元格，并对页面进行合理布局。5.5.2创建布局表格和布局单元格1.布局模式切换（1）从标准模式切换到布局模式第5章表格的设计与制作5.5布局表格（2）从布局模式切换到标准模式单击“布局模式”文档工具栏中的“退出”

按钮单击“布局”工具栏中的“标准按钮”

回到标准视图模式选择主菜单中的【查看】——【表格模式】——【标准模式】命令回到标准模式。2.创建布局表格3.创建布局单元格4.在布局单元格中添加内容第5章表格的设计与制作5.5布局表格5.5.3调整布局表格和布局单元格1.调整布局表格和布局单元格的大小（1）调整布局表格的大小（2）调整布局表格的大小2.移动布局单元格3.布局表格和布局单元格的属性（1）通过属性面板修改布局表格的属性（2）使用下拉菜单修改布局表格的属性（3）通过属性面板修改布局单元格的属性第5章表格的设计与制作5.5布局表格5.5.4布局模式排版实例第5章表格的设计与制作5.5布局表格该网页的设计思想是，首先新建空白网页，指定图像素材作为跟踪图像，然后进入“布局模式”，依照跟踪图像绘制布局表格和布局单元格。返回标准模式后，在布局表格基础上再插入标准表格进一步布局页面，接着分别插入图像或设置图像作为背景，输入文本并设置项目列表，从而完成图示网页的主页设计。具体操作步骤为：

1.新建网页：2.保存网页：3.设置跟踪图像：4.进入布局模式：5.绘制布局表格：6.绘制其他布局表格：5.5布局表格7.单击文档窗口上方的“退出”按钮，返回“标准”模式，根据跟踪图像手动调整表格。8.取消跟踪图像：9.设置单元格背景：

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论