项目三用表格构建网布局.pptVIP

项目三 用表格构建网页布局 布局主页index.html——表格的基本应用 布局子页——表格的高级应用 任务一 布局主页index.html ——表格的基本应用 相关知识 一、插入表格 二、选择表格和单元格 三、设置表格属性 四、设置单元格属性 实施步骤 一、构建网页整体结构 二、嵌套表格 任务二 布局子页——表格的高级应用 相关知识 二、在表格中添加或删除行与列 实施步骤 一、构建网页整体结构 二、制作圆角表格 三、制作细线表格 四、制作商品展示板块 知识拓展 一、表格单位为百分比和像素时的比较 二、单元格没有按照指定的大小显示 三、珠宝首饰饰品行业网站欣赏 * * 所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以tr标签开始，/tr标签结束），垂直的多个单元格称为列（以td标签开始，/td标签结束）。行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。 此处表示未明确设置单元格的宽度 此处显示了表格的宽度。如果只显示一个“▼”符号，表示未明确设置表格宽度 Dreamweaver CS3提供了非常完善的表格编辑功能，本节我们首先来看一下如何在网页文档中插入表格。 在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。 选择表格 选择列 选择行 选择单元格区域 选择表格 选中表格后，可利用“属性”面板查看或修改表格的行、列、宽，以及填充、间距、背景图像、背景颜色等属性。 在表格的某个单元格中单击，“属性”面板中将显示水平、垂直、宽、高等单元格属性，此时可通过“属性”面板设置其属性。 在学习了表格的基本知识后，本节通过为饰品网站主页构建布局来练习表格在实际网页制作中的应用。 为便于读者学习和理解，我们将主页的布局分为两部分来讲，本节首先来构建网页的整体结构（具体操作见视频1-1）。 所谓嵌套表格，就是在一个表格的某个单元格里插入一个新表格。我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的。本节通过在前面制作的表格中嵌套表格来完成网站主页的布局（具体操作见视频1-2）。 一、拆分与合并单元格 拆分单元格就是将一个单元格拆分成多个单元格；合并单元格就是将相邻的几个单元格合并成一个单元格。 在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。 在学习了表格的高级应用后，下面通过为网站子页构建布局来看看这些知识在实际网页制作中的应用。 为便于读者学习和理解，我们将子页的制作分为四部分来讲，本节首先构建子页的整体结构（具体操作见视频2-1）。 适当地使用圆角表格，可以使整个网页看起来更加柔和、美观。本节通过制作网站中的“登录”模块，来看看圆角表格的制作方法（具体操作见视频2-2）。 在Dreamweaver中制作细线表格的方法有很多，其中最简单、常用的方法就是为表格和单元格设置背景颜色，下面通过制作子页中的“商品分类”板块来看看细线表格的制作方法（具体操作见视频2-3）。 商品展示板块是指网页中商品图片和简介的结合（具体操作见视频2-4）。 如果希望固定表格的大小，使之不受浏览器大小的影响，应以像素为单位设定表格的大小。反之，如果希望表格大小随浏览器变化而变化，则要以百分比为单位设定表格大小，这里的百分比实际上是相对浏览器而言的。 有时候在“属性”面板中指定了单元格的高度，按【Enter】键后却发现单元格并没有按照指定的高度显示。发生这种情况的原因可能是由于与该单元格相邻的单元格中存在高度比指定高度值更大的单元格，此时可以选择整行后指定大小。 对于珠宝首饰行业网站，产品展示相当重要，尤其是照片的效果，最好能展现珠宝那种晶莹、璀璨或熠熠生辉的感觉。产品图片能直接反映出网站的层次，所以在这方面一定要下大力量。另外，网站风格要与自己产品的风格相符，否则会显得不伦不类。 * * *