网页制作基础教程 第2版 教学课件 作者 邓振杰 第4章.ppt

《网页制作基础教程 第2版 教学课件 作者 邓振杰 第4章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第4章　利用表格设计和制作网页本章学习目标4.1表格网页实例4.2利用DreamweaverCS3编辑网页表格4.3利用HTML编辑网页表格4.4表格的应用技巧本章学习目标●利用DreamweaverCS3创建表格的方法。●编辑表格的方法。●设置表格属性的方法。●利用HTML编辑表格的方法。●使用表格和布局视图进行页面布局的方法。第4章　利用表格设计和制作网页4.1表格网页实例DreamweaverCS3提供了强大的制表功能，使得在制作网页的过程中插入表格的操作变得简便、快捷，并可以在表格中插入图片、文字、Flash等各种元素。表格还可以转换成层，当作层来使

2、用（层的知识将在第9章学习）。对已经建立好的表格，可以很容易地修改表格的外观，改变表格中行、列的数量，对表格添加颜色，改变表格对齐方式等操作。下面以制作“天使部落”主页为例介绍创建表格、编辑表格、在表格中添加文字和图片、删除表格等内容，并结合此例介绍设置表格和单元格的属性等方法。4.2利用DreamweaverCS3编辑网页表格4.2.1创建表格1.执行主菜单中的“插入记录”→“表格”命令。2.按组合键“Ctrl+Alt+T”。3.单击插入面板上“常用”选项卡中“插入表格”按钮。。大多数浏览器按边框粗细为1，单元格边距为1，单元格间距为2来显示表格。若确保浏

3、览器不显示表格中的边距和间距，需将“元格边距”和“单元格间距”设置为0。4.2利用DreamweaverCS3编辑网页表格4.2.2表格的编辑1．修改表格（1）调整表格的大小。（2）选择表格。（3）调整行高、列宽。（4）添加/删除行列。（5）合并单元格。（6）拆分单元格。（7）表格的嵌套。（8）表格的复制。（9）删除表格。（10）增加或减少行、列跨度2．在表格中输入文字和图像（1）在表格中输入文字。（2）在表格中插入图像。（3）导入表格数据文件。4.2.3设置表格属性1．表格整体属性设置2．行、列和单元格属性设置4.2利用DreamweaverCS3编辑网页

4、表格通常不需要设置表格的高度；若要在其他内容旁边显示表格，请使用“左对齐”或“右对齐”。可以按占表格总高度的百分比指定一个高度，但是浏览器中行可能不以指定的百分比高度来显示。4.2利用DreamweaverCS3编辑网页表格4.2.4表格的排序按数字排序按字母排序不能对有合并单元格的表格内容进行排序操作。4.3利用HTML编辑网页表格4.3.1利用HTML制作示例网页表格利用HTML同样可以制作网页表格。对于初学者直接使用HTML代码编制网页表格是件很困难的事，但是，可以通过DreamweaverCS3提供的“文档”面板来查看已经设计好的网页表格的HTML代

5、码，以帮助用户学习和掌握HTML代码的编写规则及方法。4.3利用HTML编辑网页表格4.3.2表格的基本构成（1）TABLE。（2）TITLE。（3）CAPTION。（4）TR。（5）TD和TH。（6）META。HTML并没有规定用户最多可以在头部加入多少个标记符，只要认为必要，用户可以添加任意数量的标记符。4.3利用HTML编辑网页表格4.3.3表格的编辑及属性设置1．合并单元格2．边框与分隔线3．表格的对齐4．控制表格和单元格的大小5．设置表格和单元格的背景6．控制单元格空白4.4表格的应用技巧4.4.1利用表格制作水平线与垂直线

6、在对网页布局排版时，有时候会需要一条细线作为分隔线，用一些线型的图像可以完成这项功能，但既费事又占据存储空间。其实，这个小问题用表格就可以很好地解决，只需对表格属性、单元格属性及其源代码稍作修改即可。细线分隔线具体的制作过程如下。4.4表格的应用技巧4.4.1利用表格制作水平线与垂直线（1）插入一个一行一列的表格。（2）在表格“属性”面板中，按照下图所示来设置表格的属性，即行、列数设为1；宽设为200像素（根据实际需要来设置其值）；填充、间距设为0；边框设为0。4.4表格的应用技巧4.4.1利用表格制作水平线与垂直线（3）按下图所示设置单元格的属性，即高设为

7、1；宽不设或设为0；背景颜色设为黑色（即为细线的颜色，也可以设置为其他颜色）。4.4表格的应用技巧4.4.1利用表格制作水平线与垂直线（4）查看源代码，如下图所示，将标记符中的“ ”（半个空格位）彻底删除，就可以得到一条水平细线。没有插入元素的单元格中都自动填充半个空格（其代码为“ ”），只要去掉这半个空格，设置的单元格高（宽）度才起作用。4.4表格的应用技巧4.4.2利用表格进行页面布局1．切换视图DreamweaverCS3为设计制作表格提供了两种视图：标准视图（StandardView）和布局视图（LayoutVie

8、w），前面介绍的表格创建及编辑过程都是在标准视图下进