|
|
|
| 第3课 用表格布局留言板站点主页面 |
| www.study51.com |
| 【字体：大 中 小】【打印】【关闭】 |
|
|
本次课开始我们要设计留言板的主页面了。复杂的页面一般都要先用表格布局，我们就从留言板主页面的表格布局开始学习。除了表格布局，利用层布局页面也是一种选择。但层的兼容性和可控制性就比表格差多了，本次课也要讨论Dreamweaver MX中有关层布局，以及层和表格相互转换的知识。
首先让我们先看看留言板站点主页面将来大概是个什么摸样。单击这里打开页面效果，具体设计步骤如下：
1、创建主页面新文档（main.asp）
这个主页面将来是个包含ASP脚本的动态页面。所以它的类型是动态脚本页面文档，文件扩展名是asp。你可以选择以下两种方法中的任意一种创建它：
●执行“文件/新建”命令，在弹出的新建文档对话框中做如图1所示的操作。保存文档时，文件命名为main。
图1 新建ASP VBScript动态文档
●打开站点面板，在留言板站点本地视图下面的窗口中右键单击站点名，在弹出的快捷菜单中执行“新建文件”命令，然后将文件名的主文件名改为main。
2、创建表格
在Dreamweaver MX中创建表格有两种模式，一种是在标准视图下插入表格，一种是在布局视图下直接画表格。
▲在标准视图下插入表格：
“标准”视图是默认的 Dreamweaver MX设计视图。若要在“标准”视图中创建表格，可以使用“插入表格”命令。Dreamweaver将根据您在“插入表格”对话框中选择的选项创建一个表格，如图2所示。
图2 插入表格和定义表格
在本例中我们插入两个表格：一个是1行1列，宽度是755像素。另一个是3行3列，宽度是600像素。
▲在布局视图下绘制表格：
在“布局”视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。这给了我们更大的灵活性，想一想在页面上画表格的滋味吧！
我们需要在插入栏中切换到布局标签下，并单击布局视图，如图3所示。单击绘制布局表格或单元格按钮以后就可以用鼠标直接绘制了。
图3 布局视图
3、编辑表格
通过合并和拆分单元格以及插入行和列，可以很容易地修改初始表格结构以创建更复杂的设计。我们还可以使表格的边框变得不可见，然后用表格单元格（在表格中每一行与列的交叉处所创建的框）来控制 Web页中文本和图像的位置。当观众在浏览器中查看页面时就不会看到设计的基础结构。这些都是对表格的编辑。通常情况下，表格编辑在标准视图下进行。
●关于表格和单元格的选中常有两种方法：
①用鼠标直接指向表格选中它们。用鼠标指向表格的边框或者是内部，根据鼠标的状态来判断选中整个表格、某一行还是某个单元格。
②在表格中的任意一个单元格单击鼠标，然后在标签检查器选择相应的标签，以实现选中表格或者单元格的目的，如图4所示。
图4 通过标签检查器选择表格
●关于表格的尺寸基于百分比还是基于像素：
◇基于百分比的表格会根据浏览器窗口宽度的变化而伸展或收缩。（例如，如果您指定表格使用 75% 的宽度，则不管浏览器窗口有多大，表格都会伸展以填充 75% 的水平间距。这在某些情况下会很有用，例如，在调整窗口大小时确保导航菜单总能显示。
◇基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。一般我们在用表格布局页面时，喜欢采用基于像素的表格，这样设计出来的页面更精确。本课实例就是用基于像素的表格布局页面的。
●关于调整布局单元格大小有两种方法：
◇用鼠标直接移动到单元格的边框，拖动鼠标调整单元格的大小。
◇在属性面板直接输入单元格的宽和高，来精确的控制调整单元格的大小。
●表格和单元格的其它属性的设置都可以在属性面板中完成。
4、使用层进行布局
◇用层进行页面布局，给设计者更大的灵活性。因为可以这样说，你可以将层放在页面上你想让它占据的任何位置。如图5是创建层和在层面板管理层的示意图。
图5 创建层和在层面板管理层
◇虽然用层进行布局给设计者更大的灵活性，但用层布局缺乏更大的兼容性，在不同的浏览器中看到的结果可能是不一样的，甚至在一些浏览器中根本就不支持你的层。当然我们可以将层转换为表格（表格是最兼容的页面元素了），但是我还是建议不用层布局为好，比如重叠的层就不能转换为表格。我们可以这样进行层和表格之间的互相转换：执行“修改/转换/层到表格”或者“修改/转换/表格到层”就可以实现层和表格之间的互换了。
▲用表格布局页面是设计网页的基础，表格的布局是很灵活的，大家要多练习，尝试不同的布局变化，这样才能找到和掌握更多的规律。 |
|
|
| 【字体：大 中 小】【打印】【关闭】 |
|
|
|
