资源描述
网页设计与制作教程(第4版）,机械工业出版社同名教材配套电子教案,表格基本操作XHTML表格表格布局页面的综合应用四实训,第5章表格,5.1.1创建表格表格是页面布局极为有用的设计工具。在设计页面时，往往要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。在Dreamweaver中插入表格的方法如下。将光标放到要插入表格的位置。执行下列操作之一：执行“插入”“表格”命令。单击插入面板“常用”分类中的“表格”按钮。按Ctrl+Alt+T组合键。,5.1表格基本操作,5.1.2设置表格属性当用户创建了一个表格后，可以通过属性面板进一步设置表格及单元格的属性，美化表格的外观。1设置表格属性2设置单元格及行列属性,5.1表格基本操作,5.1.3表格的基本操作1向表格添加内容2选择表格元素3调整表格及行列的大小4添加及删除行和列5复制、粘贴和删除单元格,5.1表格基本操作,5.1.4案例一：制作曙光大学网站就业信息网页【案例综述】制作曙光大学网站就业信息栏目系列页面，使用表格技术制作就业信息展示页面。【案例展示】本案例中的素材包括8幅图片，案例效果如图5-22所示。,5.1表格基本操作,5.2.1简单表格最简单的表格仅包括行和列。表格的标记为，行的标记为，表项的标记为。其中，是单标记，一行的结束是新一行的开始。表项内容写在与之间。则必须成对使用。格式为：标题表头1表头2表头n表项1表项2表项n表项1表项2表项n,5.2XHTML表格,5.2.2表格内文字的对齐方式在默认情况下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。1水平对齐表项数据的水平对齐用标记、和的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。2垂直对齐表项数据的垂直对齐用标记、和的valign属性实现。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。,5.2XHTML表格,5.2.3表格在页面中的对齐方式前面介绍的是表格中的各个单元格的属性。现在，把表格作为一个整体，介绍表格在页面中的位置及背景的设置。与图像一样，表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用标记的align属性。格式为：当表格位于页面的左侧或右侧时，文本填充在另一侧；当表格居中时，表格两边没有文本；当align属性缺省时，文本在表格的下面。,5.2XHTML表格,5.2.4表格的色彩和图像背景在、标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图像，也可以为行和单元格改变色彩、添加背景图像。bgcolor：设置背景色彩。background：设置背景图像。bordercolor：设置表格边框的色彩。bordercolorlight：设置表格边框亮部的色彩。bordercolordark：设置表格边框暗部的色彩。rules=row,cols或none：设置表内线的显示方法，none为无内线。,5.2XHTML表格,5.2.5案例二：分析曙光大学网站就业信息栏目主页代码本案例通过分析曙光大学网站就业信息网页的代码，使读者能够熟练掌握使用代码视图分析与设计表格。打开前面制作的栏目主页work.html，切换到代码视图，下面就代码视图中关于表格标记的重要应用加以讲解。1定义表格时设置边框、单元格边距和单元格间距2定义单元格的宽度与使用的样式3定义单元格背景图像,5.2XHTML表格,5.3.1制作网站首页的技术要点网站首页一般都包含网站导航及重要的栏目，因此，制作首页时必然要大量地使用表格布局技术。下面讲述一下使用表格布局页面的一些技术要点。1确定网页的宽度2固定最外层表格的宽度3单元格垂直对齐方式的设置4不同栏目之间的表格布局时应预留一定的空隙5页面中正文字体大小的设置,5.3表格布局页面的综合应用,5.3.2案例三：制作曙光大学网站首页【案例综述】制作曙光大学网站首页，综合使用表格的基本操作和布局页面技术制作曙光大学首页展示页面。【案例展示】本案例的效果如图5-35所示。,5.3表格布局页面的综合应用,5.4.1实训一：制作爱家美食网站“美食图库”页面【实训综述】读者在学习了使用表格布局页面的基础上，进一步加强比较复杂的表格布局练习，积累更多的表格布局经验。【实训展示】本实训中的素材包括17幅图片，制作如图5-59所示的“美食图库”页面。,5.4实训,5.4.2实训二：制作爱家美食网站首页【实训综述】本实训通过制作爱家美食网站首页，使读者亲自构思并实现页面布局，系统完整地掌握好本章讲解的所有内容。【实训展示】本爱家美食网站首页的效果如图5-63所示。,5.4实训,1简答设置表格单元格背景图像与在单元格中插入图像的区别。2制作如图5-64所示的细线表格，该表格共有4行，每行单元格的高度从2个像素到5个像素逐渐增大。3使用图像和超链接制作一个汽车展示的页面，主页面显示汽车各种车型的缩略图，单击缩略图后打开一个新页面，使用表格和放大的图片介绍选择汽车的评分，如图5-65所示。4使用表格布局技术制作菜谱点击排行榜页面，单击菜谱链接后打开相应菜肴的制作方法介绍，如图5-66所示。,5.5习题,
展开阅读全文