网页设计第3章..docVIP

第3章 设计网页布局 布局设计是网页制作中一项很重要的工作，涉及到网页在浏览器中所显示的外观，网页布局往往决定着网页设计的成败。一个完美的网页，不仅要有丰富、活泼的页面内容和信息，而且还要有清晰、美观的页面布局，这样才能给浏览者留下深刻的印象。在Dreamweaver中，有一个【布局】视图功能，利用布局视图功能可以方便地在一个空白网页上随心所欲地设计布局，并能自动转换为表格。 本章将介绍Dreamweaver 8中有关表格和框架的使用方法与技巧，以及在【布局】模式下，如何绘制用于页面布局的表格和单元格，并且设置其属性，为布局表格指定一个宽度等操作。只有在全面了解、掌握这些工具的使用方法后，才能更好地编辑网页以及定位页面中的元素。 本章学习目标： 掌握表格的基本使用方法 熟悉表格的编辑 运用表格布局网页 掌握框架的实际运用 3.1 创建表格 在日常生活中接触到的表格，多是用来组织数据、方便查询和浏览的，比如我们比较熟悉的Excel中的表格。在网页设计中，表格同样具有组织数据的功能，如图3-1所示。使用表格可以清晰地以列表的形式显示网页中的元素，使浏览者一目了然。另外，表格在网页定位上还有更重要的作用，就是布局页面，平时在网上浏览时看到的排列整齐的页面，在很大程 度上就是利用表格进行布局的，如图3-2所示。 3.1.1 插入表格 3.1.2 在表格中添加内容 3.1.3 选定表格元素并调整表格大小 3.1.4 导入表格数据 3.2 格式化表格 表格不仅用于查询浏览数据，而且还可以布局页面、美化网页。通过设置表格的属性，可以有效地改变表格的外观，从而充分发挥表格的布局作用。本节将在3.1节的创建表格的基础上，对表格做进一步的美化操作。 3.2.1 设置表格属性 表格属性面板中各按钮的名称及功能 图标 名称 功能 清除列宽 清除表格中已设置的列宽将表格将表格 单位 清除行高 清除表格中已设置的将表格将表格 单位 3.2.2 设置单元格属性 3.2.3 使用预先设计的格式化表格 3.3 课堂练习3-1：表格的导入、排序与导出 本练习主要讲述在Dreamweaver中导入一个Excel文档“学生情况登记表”，然后对“学生情况登记表”中的“专业课成绩1”进行排序，最后再将排序好的表格导出为文本文件的全部过程。通过该练习可以熟悉通过利用表格来导入与导出数据。学会如何把其他文档的数据导入到Dreamweaver中，并且利用了【排序表格】的功能对表格内的数据进行排序。同时，也学会了把Dreamweaver中的数据导出到记事本。 3.4 对表格的操作 在Dreamweaver中，可以对表格中的多个单元格进行复制、剪切、粘贴操作，并能保留原单元格的格式。还可以改变单元格大小，增加和删除表格的行或者列，根据需要拆分或合并单元格，下面就讲述这些操作的方法。 3.4.1 复制及粘贴单元格 3.4.2 增加和删除表格行与列 3.4.3 拆分、合并单元格 3.5 课堂练习3-2：利用表格制作产品报价单 本节主要讲述在Dreamweaver中利用表格来组织数据，从中可以体会到运用表格可以使得网页上的数据排列更有条理、更美观。在制作一个产品报价单的过程中，利用了前面讲到的一些对表格操作的方法。通过这个练习，有助于巩固前面学习的知识点。 3.6 应用【布局】模式设计网页 布局模式是另一种对页面进行布局的方式，布局模式主要是通过布局表格和布局单元格布局页面的。由于对于初学者来说，还没有表格的设计经验，要想使用表格设计出布局合理的页面，往往会适得其反。为了简化利用表格布局页面，Dreamweaver中就特意提供了一种新的【布局】模式。在这种模式下使用布局工具，可以避免在【标准】模式下使用表格的缺陷，可以轻松地在页面中绘制布局表格以及单元格。并且可以方便地设置其属性或者对其进行移动等操作，布局表格可以有一定的固定宽度，也可以占据整个浏览器窗口。 3.6.1 在【布局】模式中创建表格和单元格 3.6.2 添加布局单元格内容 3.6.3 调整布局表格和单元格 3.6.4 设置表格和单元格宽度格式 3.6.5 修改布局表格和单元格的属性 3.6.6 设置【布局】模式的参数 3.7 课堂练习3-3：制作导航栏 现在利用【布局】模式，来制作一个导航栏，然后再对页面进行整体布局。页面中的导航栏类似于图书中的目录，方便浏览网站信息，因此最好放在页面的左侧，并将其所在表格或单元格的宽度设置为固定宽度。导航栏一般包括边框、栏目和栏目细项，要安排下这些内容需要使用表格嵌套，在嵌套表格中还要绘制相应个数的单元格。通过本练习，将学习在【布局】模式下设计导航栏，体会了Drea