使用表格布局网页分析
•
为了使网页中的元素能够有序地、按照要求
显示在IE窗口中,在插入文本或者图像之前,插入表
格是最好的解决方法。在表格中插入文本或者图像的
方法与直接在网页中插入方法是基本相同的,只是在
插入之前,将光标放置在表格中即可。
5
3.1.3 设置表格属性
•
即使在网页中插入一个最简单的表格,也具
有表格的几个重要的元素,那就是表格整体、行、
访问者可以通过单击该面板上的选项卡来隐藏或者
显示在折叠构件中的内容。折叠面板分为两种:一
种是多个面板的折叠式面板构件,一种是只有一个
面板的可折叠面板构件。
19
3.5 课堂练习:一像素表格
•
一像素表格的制作方法多种多样,可以将1×1像
素的图像以背景图片的形式插入到表格中,也可以直
接在Dreamweaver中利用表格的属性制作一像素表格。
填充
用于设置单元格内容和边框的距离。
间距
用于设置表格内单元格之间的距离。
清除行高
按钮 :对行高进行清除
使单元格宽度一致
按钮 :表格内的单元格宽度自动随着单元格的内容宽 度变化。
删除所有间隔图像 按钮 :清除表格中的所有间隔图像。
删除嵌套
按钮 :清除嵌套表格,只有当存在嵌套表格时,该选 项才显示。
类
可以将CSS规则应用于对象
格属性,而是表格属性,这说明选中的是单元格,
而不是表格。创建一个表格,既包含其本身,还包
含单元格、行与列元素,而这些元素的选择方法各
不相同。
8
3.2.2 调整表格大小
当选中整个表格后,在表格右下角区域显示3个 控制点,分别通过这3个控制点能够将表格横向、纵 向或者整体放大。
9
3.2.3 合并及拆分表格元素
建Spry框架的构件,使复杂的Spry框架建立变成了简
单的可视化操作。
15
3.4.1 Spry框架概念
•
Spry框架支持一组用标准HTML、CSS和
JavaScript编写的可重用构件。Spry构件是一个页面
元素,通过启用用户交互来提供更丰富的用户体验。
每一个Spry构件均由以下几个部分组成:
• 构件结构 用来定义构件结构组成的HTML代码块。
14
3.4 Spry框架
•
Spry框架是一个可以用来构建更加丰富的
Web页的JavaScript和CSS库。使用该框架,可以显示
XML数据,并创建用来显示动态数据的交互式页面元
素,而无需刷新整个页面。以前创建Spry框架是通过
代码完成的,这需要有一定的JavaScript基础知识的用
户使用。而Dreamweaver CS3在设计视图中新增了创
入浏览即可了解网站中提供的内容。
选项
菜单栏名称
禁用样式 菜单栏目 文本
链接
目标 标题
作用 默认菜单栏名称为MenuBar1,该名称不能以汉字命名,可以使用字母或者数 字。 单击该按钮,菜单栏变成项目列表,并且按钮名称更改为【启用样式】。 在【属性】面板中包括主菜单栏目、一级菜单栏目与二级菜单栏目 在该选项文本框中设置栏目名称。 该选项可以为菜单栏目添加链接文件,默认情况下为空链接。单击【浏览】 按钮 可以选择链接文件。 该选项指定要在何处打开所链接的页面。 该选项为菜单栏目提示文本
12
3.3.1 创建布局表格与单元格
•
要想在页面中创建布局表格与单元格,确
切地说应该是绘制表格和单元格,首先要进入【布局】
模式。方法是执行【查看】|【表格模式】|【布局模
式】命令(快捷键Alt+F6),由【标准】模式切换
到【布局】模式。
13
3.3.2 布局表格与单元格属性
•
绘制布局表格与布局单元格后,既可以
1
本章知识要点:
•
创建表格
• 创建嵌套表格
• 创建布局表格
• 创建Spry框架
2
3.1 表格建立
•
日常生活中,最常见的表格是用来显示数据
的,比如Excel中的表格。在Dreamweaver中,表格
除了可以显示数据外,最主要的功能是定位与排版。
这样才能够将前面介绍过的文本与图像定位在网页中
的任何想要显示的区域中。所以说,网页设计就是从
随意设置其属性,也可以在【属性】面板中精确地
设置其各个选项。
选项
作用
有【固定】和【自动伸展】两个选项:当选中【固定】
宽
单选按钮时,可以直接在右侧的文本框中输入表格的宽 度值。当选中【自动伸展】单选按钮时,则表格的宽度
可以根据插入的内容自动进行调整。
高
在其后的文本框中输入表格的高度。
背景颜色
用于设置表格的背景颜色。
无
对表不启用列或行标题,默认情况下此项被选中。
左侧
将表的第一列作为标题列,便于为每一行输入一个标题。
顶部
将表的第一行作为标题行,便于为每一列输入一个标题。
两者
在表中输入列标题和行标题。
标题 对齐标题
指定在表格外显示的标题。 指定表格标题相对于表格的显示位置,采用默认方式。
4
摘要
用于说明表格。
3.1.2 在表格中插入网页元素
表格的相应位置中。各司其职,互不冲突。
选项
作用
行数
用于确定表格的行数。
列数
用于确定表格的列数。
表格宽度
以像素或者百分比为单位确定表格的宽度。
边框粗细
以像素为单位指定表格边框的宽度。
单元格边距
指定单元格边框和单元格内容之间的像素数,如果不希望显示边框时,设置 为0像素。
单元格间距
指定相邻的单元格之间的像素数。
•
可隐藏的说明书中同时准备了图片和相关
的说明文字,但是后者放置在Spry可折叠面板构件中,
这样在预览时,既可以同时查看图片与说明文字,还
可以将说明文字隐藏只查看图片。
22
第3章 使பைடு நூலகம்表格布局网页
将文本与图像插入页面后,就形成了 最简单的网页。在生成的网页中,发现其中的文本 或者图像会随着IE窗口的放大或者缩小发生变化, 这使得网页处于不稳定状态。要想改变这种情况, 最简单的方法就是使用表格。表格不仅能够控制网 页在IE窗口中的位置,还可以控制网页元素在网页 中的显示位置,这样无论IE窗口如何变化,其中的 网页都会保持默认的状态。
6
3.2 编辑表格
•
当创建的表格不符合要求时,可以通过
对表格中的单元格进行拆分与合并,或者增加与删
除表格的行或者列来完成所需的要求。在表格中还
可以进行复制、剪切、粘贴等操作,因为它可以保
留原单元格的格式。
7
3.2.1 选中表格元素
•
在设置表格属性时发现,将
光标放置在表格中,【属性】面板中显示的是单元
•
当创建的表格不符合要求时,可以通过删
除或者增加表格的行与列,以及合并或者拆分单元
格来实现。
10
3.2.4 复制及粘贴单元格
•
表格中的单元格就像文本、图片能够被复
制与粘贴一样,单元格也可以复制与粘贴,并且可
以在保留单元格格式化的情况下,复制并且粘贴多
个单元格。表格中的单元格既可以覆盖现有的单元
格,也可以生成新的表格。
11
3.3 布局表格
•
在使用表格布局网页时发现,表格与单元格
是有规律的创建。要想使用表格拼图,必须经过
精密地计算,以及拆分或者合并单元格来实现。
为了简化利用表格布局页面,Dreamweaver提供
了一种【布局】模式。在这种模式下使用布局工
具,设计者可以轻松地在页面中画出布局表格以
及单元格,然后对其进行修改、移动等。
同样,一像素表格可以是一像素细线效果,也可以是
一像素边框效果,为了更好的显示效果,这里以一像
素边框为例。
20
3.6 课堂练习:圆角相框
•
当浏览网页时,经常会看到带有相框的图
片。具有相框的图片,使其在网页突出显示。下面介
绍一种制作圆角相框的方法,它是通过在表格中插入
图像和背景图像制作而成的。
21
3.7 课堂练习:可隐藏的说明 书
17
3.4.3 Spry选项卡式面板构件
•
选项卡式面板构件是一组面板,用来将内容存储
到紧凑空间中。访问者可以通过单击要访问的面板上
的选项卡,来隐藏或者显示在选项卡式面板中的内容。
当访问者单击不同的选项卡时,构件的面板会相应地
打开。
18
3.4.4 Spry折叠构件
•
Spry折叠构件是可折叠的
面板,可以将大量内容存储在一个紧凑的空间中。
创建表格开始的,先学习表格的创建可以为后来的网
页设计奠定基础。
3
3.1.1 创建各种表格
•
表格在网页中是用来定位与排版的,而
有时一个表格无法满足所有的要求,这时就需要运
用到嵌套表格。嵌套表格,顾名思义就是在表格中
插入表格。这样一来,由总表格负责整体的排版,
由嵌套的表格负责各个子栏目的排版,并插入到总
• 构件行为 用来控制构件如何响应用户启动事件的 JavaScript。
• 构件样式 用来指定构件外观的CSS。
16
3.4.2 Spry菜单栏构件
•
菜单栏构件是一组可导航的
菜单按钮,当访问者将鼠标指向其中的某个按钮上
时,将显示相应的子菜单。使用菜单栏可以在紧凑
的空间中显示大量可导航信息,并使访问者无需深
列和单元格。所以插入表格后,【属性】面板中
显示的是该表格的基本属性。
表格Id 行/列
宽
填充 间距
参数