第4章网页的布局
第4章 网页的布局
在添加具体的网页内容之前，首先应该对网页进行合 理的版面布局，确定什么地方要安放什么内容，或什么地 方要实现什么效果。网页的版面布局是网页设计中需要最 先考虑的步骤，同时也是最重要的步骤。只有合理进行版 面布局，才能制作出美观的页面，而且便于日后的维护和 修改
• 在添加具体的网页内容之前，首先应该对网页进行合 理的版面布局，确定什么地方要安放什么内容，或什么地 方要实现什么效果。网页的版面布局是网页设计中需要最 先考虑的步骤，同时也是最重要的步骤。只有合理进行版 面布局，才能制作出美观的页面，而且便于日后的维护和 修改
● 4.1 页面规划 ● 页面设计是网站建设中非常重要的一部分 Macromedia Dreamweaver MX至少提供了三种方法 来创建和设计页面。 种方法是针对显示出来的文字和图像等进行综合考 虑，用标准的表格来创建页面，但是表格这种方法比较费 力，又难于控制，如果是要生成一个比较复杂的表格，往 往需要耗费太量的时间，因此使用时比较困难，尤其是对 宇非专亚人员来说。 另一种方法是使用层来实现页面的创建，然后再将层 转换成表格。但是它生成的表格过于复杂，代码也不够精 练，而且E4.0版本以下的浏览器不支持层，层还很难实 现网页及其元素的居中。 从Dreamweaver4开始，提供了构建页面最简单的 方法，即布局模式
• 4.1 页面规划 • 页面设计是网站建设中非常重要的一部分。 Macromedia Dreamweaver MX至少提供了三种方法 来创建和设计页面。 • 一种方法是针对显示出来的文字和图像等进行综合考 虑，用标准的表格来创建页面，但是表格这种方法比较费 力，又难于控制，如果是要生成一个比较复杂的表格，往 往需要耗费大量的时间，因此使用时比较困难，尤其是对 于非专业人员来说。 • 另一种方法是使用层来实现页面的创建，然后再将层 转换成表格。但是它生成的表格过于复杂，代码也不够精 练，而且IE4.0版本以下的浏览器不支持层，层还很难实 现网页及其元素的居中。 • 从Dreamweaver 4开始，提供了构建页面最简单的 方法，即布局模式
布局模式中有两种工具可以使用：自由表格工具和自由 单元格工具，实际上也是表格和单元格，这是Macromedia 公司提出的创新，是表格使用的一种新思路。它的特点是能 够使初级用户轻松完成网贡设计任务，但是也有很明显的缺 陷，表格过于复杂 在布局模式中，可以像使用层一样在页面上直接画出 个或多个自由表格或自由单元格，并且可以轻松的在页面上 任意拖动单元格，按照需要的效果移动单元格位置；，自由表 格具有很多特性，能够满定员面布置的多种需要：对学宜由 表格的宽度和高度，可以设置成固定大小，这样即使改变 浏览器窗口的大小，.单元格中的内容在页面中的位置也能保 持不变，从而实现内容的绝对定位；还可以将其宽度和高度 设置为百分比的形式，在改变浏览器窗口大尔时，单元格的 天尔也随之变花，便于实现内容的相对定位
• 布局模式中有两种工具可以使用：自由表格工具和自由 单元格工具，实际上也是表格和单元格，这是Macromedia 公司提出的创新，是表格使用的一种新思路。它的特点是能 够使初级用户轻松完成网页设计任务，但是也有很明显的缺 陷，表格过于复杂。 • 在布局模式中，可以像使用层一样在页面上直接画出一 个或多个自由表格或自由单元格，并且可以轻松的在页面上 任意拖动单元格，按照需要的效果移动单元格位置；自由表 格具有很多特性，能够满足页面布置的多种需要；对于自由 表格的宽度和高度，可以设置成固定大小，这样即使改变了 浏览器窗口的大小，单元格中的内容在页面中的位置也能保 持不变，从而实现内容的绝对定位；还可以将其宽度和高度 设置为百分比的形式，在改变浏览器窗口大小时，单元格的 大小也随之变化，便于实现内容的相对定位
与传统绘制表格方法的差别是：使用布局模式绘制的表 格，可以在页面上绘制任意数量和大小的表格，而且在表格 中的任意位置上也可以绘制任意数量和大小的单元格。 Dreamweaver会在幕后生成相应的代码，根据操作，完成 整个表格的生成任务。 查看的)插入)修改侧)文本①命令C)站点S)窗口图)事 进入布局视图 代码) 1ash元收藏夹运目，设计 √设计①) CSs样式 代码和设计4) 的方法有两种： 朱定 切换视图⑤) Ctrl+ 剧新设计视图)5 司× 文件头内容) Ctrl+Shift+H 方法一：打开“查 ment √无脚本的内容 ，应用 表格模式) 标准模式⑤) 看”菜单，选择 可视化助理) 扩展表格模式您)阳 代码视图选项Q) 布局模式L Ctr1+F6 “表格模式”，再 右要任 标尺⑧) 网格@) 选择“布局模式” 跟踪图像圆) 插件) 代码 命令，如图4-1所 792 文件 隐藏面板心) F4 文件 工具栏⑧) 示。 图4-1从“查看”菜单中进入布局模式
• 与传统绘制表格方法的差别是：使用布局模式绘制的表 格，可以在页面上绘制任意数量和大小的表格，而且在表格 中的任意位置上也可以绘制任意数量和大小的单元格。 Dreamweaver会在幕后生成相应的代码，根据操作，完成 整个表格的生成任务。 图4-1 从“查看”菜单中进入布局模式 进入布局视图 的方法有两种： 方法一：打开“查 看”菜单，选择 “表格模式”，再 选择“布局模式” 命令，如图4-1所 示