第3章使用表格布局网页.ppt

《第3章使用表格布局网页.ppt》由会员分享，可在线阅读，更多相关《第3章使用表格布局网页.ppt（22页珍藏版）》请在三一办公上搜索。

1、1,第3章 使用表格布局网页,将文本与图像插入页面后，就形成了最简单的网页。在生成的网页中，发现其中的文本或者图像会随着IE窗口的放大或者缩小发生变化，这使得网页处于不稳定状态。要想改变这种情况，最简单的方法就是使用表格。表格不仅能够控制网页在IE窗口中的位置，还可以控制网页元素在网页中的显示位置，这样无论IE窗口如何变化，其中的网页都会保持默认的状态。,2,本章知识要点：,创建表格创建嵌套表格创建布局表格创建Spry框架,3,3.1 表格建立,日常生活中，最常见的表格是用来显示数据的，比如Excel中的表格。在Dreamweaver中，表格除了可以显示数据外，最主要的功能是定位与排版。这样才

2、能够将前面介绍过的文本与图像定位在网页中的任何想要显示的区域中。所以说，网页设计就是从创建表格开始的，先学习表格的创建可以为后来的网页设计奠定基础。,3.1.1 创建各种表格,表格在网页中是用来定位与排版的，而有时一个表格无法满足所有的要求，这时就需要运用到嵌套表格。嵌套表格，顾名思义就是在表格中插入表格。这样一来，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。各司其职，互不冲突。,4,3.1.2 在表格中插入网页元素,为了使网页中的元素能够有序地、按照要求显示在IE窗口中，在插入文本或者图像之前，插入表格是最好的解决方法。在表格中插入文本或者图像的方法

3、与直接在网页中插入方法是基本相同的，只是在插入之前，将光标放置在表格中即可。,5,3.1.3 设置表格属性,即使在网页中插入一个最简单的表格，也具有表格的几个重要的元素，那就是表格整体、行、列和单元格。所以插入表格后，【属性】面板中显示的是该表格的基本属性。,6,3.2 编辑表格,当创建的表格不符合要求时，可以通过对表格中的单元格进行拆分与合并，或者增加与删除表格的行或者列来完成所需的要求。在表格中还可以进行复制、剪切、粘贴等操作，因为它可以保留原单元格的格式。,7,3.2.1 选中表格元素,在设置表格属性时发现，将光标放置在表格中，【属性】面板中显示的是单元格属性，而是表格属性，这说明选中的

4、是单元格，而不是表格。创建一个表格，既包含其本身，还包含单元格、行与列元素，而这些元素的选择方法各不相同。,8,3.2.2 调整表格大小,当选中整个表格后，在表格右下角区域显示3个控制点，分别通过这3个控制点能够将表格横向、纵向或者整体放大。,9,3.2.3 合并及拆分表格元素,当创建的表格不符合要求时，可以通过删除或者增加表格的行与列，以及合并或者拆分单元格来实现。,10,11,3.2.4 复制及粘贴单元格,表格中的单元格就像文本、图片能够被复制与粘贴一样，单元格也可以复制与粘贴，并且可以在保留单元格格式化的情况下，复制并且粘贴多个单元格。表格中的单元格既可以覆盖现有的单元格，也可以生成新的

5、表格。,12,3.3 布局表格,在使用表格布局网页时发现，表格与单元格是有规律的创建。要想使用表格拼图，必须经过精密地计算，以及拆分或者合并单元格来实现。为了简化利用表格布局页面，Dreamweaver提供了一种【布局】模式。在这种模式下使用布局工具，设计者可以轻松地在页面中画出布局表格以及单元格，然后对其进行修改、移动等。,3.3.1 创建布局表格与单元格,要想在页面中创建布局表格与单元格，确切地说应该是绘制表格和单元格，首先要进入【布局】模式。方法是执行【查看】|【表格模式】|【布局模式】命令（快捷键AltF6），由【标准】模式切换到【布局】模式。,13,3.3.2 布局表格与单元格属性,

6、绘制布局表格与布局单元格后，既可以随意设置其属性，也可以在【属性】面板中精确地设置其各个选项。,14,3.4 Spry框架,Spry框架是一个可以用来构建更加丰富的Web页的JavaScript和CSS库。使用该框架，可以显示XML数据，并创建用来显示动态数据的交互式页面元素，而无需刷新整个页面。以前创建Spry框架是通过代码完成的，这需要有一定的JavaScript基础知识的用户使用。而Dreamweaver CS3在设计视图中新增了创建Spry框架的构件，使复杂的Spry框架建立变成了简单的可视化操作。,15,3.4.1 Spry框架概念,Spry框架支持一组用标准HTML、CSS和Jav

7、aScript编写的可重用构件。Spry构件是一个页面元素，通过启用用户交互来提供更丰富的用户体验。每一个Spry构件均由以下几个部分组成：构件结构 用来定义构件结构组成的HTML代码块。构件行为 用来控制构件如何响应用户启动事件的JavaScript。构件样式 用来指定构件外观的CSS。,16,3.4.2 Spry菜单栏构件,菜单栏构件是一组可导航的菜单按钮，当访问者将鼠标指向其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可以在紧凑的空间中显示大量可导航信息，并使访问者无需深入浏览即可了解网站中提供的内容。,17,3.4.3 Spry选项卡式面板构件,选项卡式面板构件是一组面板，用来将内

8、容存储到紧凑空间中。访问者可以通过单击要访问的面板上的选项卡，来隐藏或者显示在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。,18,3.4.4 Spry折叠构件,Spry折叠构件是可折叠的面板，可以将大量内容存储在一个紧凑的空间中。访问者可以通过单击该面板上的选项卡来隐藏或者显示在折叠构件中的内容。折叠面板分为两种：一种是多个面板的折叠式面板构件，一种是只有一个面板的可折叠面板构件。,19,3.5 课堂练习：一像素表格,一像素表格的制作方法多种多样，可以将11像素的图像以背景图片的形式插入到表格中，也可以直接在Dreamweaver中利用表格的属性制作一像素表格。同样，一像素表格可以是一像素细线效果，也可以是一像素边框效果，为了更好的显示效果，这里以一像素边框为例。,20,3.6 课堂练习：圆角相框,当浏览网页时，经常会看到带有相框的图片。具有相框的图片，使其在网页突出显示。下面介绍一种制作圆角相框的方法，它是通过在表格中插入图像和背景图像制作而成的。,21,3.7 课堂练习：可隐藏的说明书,可隐藏的说明书中同时准备了图片和相关的说明文字，但是后者放置在Spry可折叠面板构件中，这样在预览时，既可以同时查看图片与说明文字，还可以将说明文字隐藏只查看图片。,22,