网页设计第3章

第3章设计网页布局布局设计是网页制作中一项很重要的工作，涉及到网页在浏览器中所显示的外观，网页布局往往决定着网页设计的成败。一个完美的网页，不仅要有丰富、活泼的页面内容和信息，而且还要有清晰、美观的页面布局，这样才能给浏览者留下深刻的印象。在Dreamweaver中，有一个【布局】视图功能，利用布局视图功能可以方便地在一个空白网页上随心所欲地设计布局，并能自动转换为表格。本章将介绍Dreamweaver8中有关表格和框架的使用方法与技巧，以及在【布局】模式下，如何绘制用于页面布局的表格和单元格，并且设置其属性，为布局表格指定一个宽度等操作。只有在全面了解、掌握这些工具的使用方法后，才能更好地编辑网页以及定位页面中的元素。本章学习目标：掌握表格的基本使用方法熟悉表格的编辑运用表格布局网页掌握框架的实际运用第3章第3章设计网页布局713.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-1表格属性面板中各按钮的名称及功能图标名称功能清除列宽清除表格中已设置的列宽将表格宽度转换成像素将表格当前宽度单位转换为像素单位72网页设计三剑客（Studio8）标准教程将表格宽度转换成百分比将表格当前宽度单位转换为以表格占【文档】窗口的百分比为单位清除行高清除表格中已设置的行高将表格高度转换成像素将表格当前高度单位转换为像素单位将表格高度转换成百分比将表格当前高度单位转换为以表格占【文档】窗口的百分比为单位3.2.2设置单元格属性3.2.3使用预先设计的格式化表格3.3课堂练习3-1：表格的导入、排序与导出本练习主要讲述在Dreamweaver中导入一个Excel文档“学生情况登记表”，然后对“学生情况登记表”中的“专业课成绩1”进行排序，最后再将排序好的表格导出为文本文件的全部过程。通过该练习可以熟悉通过利用表格来导入与导出数据。学会如何把其他文档的数据导入到Dreamweaver中，并且利用了【排序表格】的功能对表格内的数据进行排序。同时，也学会了把Dreamweaver中的数据导出到记事本。3.4对表格的操作在Dreamweaver中，可以对表格中的多个单元格进行复制、剪切、粘贴操作，并能保留原单元格的格式。还可以改变单元格大小，增加和删除表格的行或者列，根据需要拆分或合并单元格，下面就讲述这些操作的方法。3.4.1复制及粘贴单元格第3章第3章设计网页布局733.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设置表格和单元格宽度格式74网页设计三剑客（Studio8）标准教程3.6.5修改布局表格和单元格的属性3.6.6设置【布局】模式的参数3.7课堂练习3-3：制作导航栏现在利用【布局】模式，来制作一个导航栏，然后再对页面进行整体布局。页面中的导航栏类似于图书中的目录，方便浏览网站信息，因此最好放在页面的左侧，并将其所在表格或单元格的宽度设置为固定宽度。导航栏一般包括边框、栏目和栏目细项，要安排下这些内容需要使用表格嵌套，在嵌套表格中还要绘制相应个数的单元格。通过本练习，将学习在【布局】模式下设计导航栏，体会了Dreamweaver独有的绘制表格的功能使用，该功能既具有表格的准确定位的特点，又具有层的可移动性的特点。善加利用这些特点，便可在布局网页时更加得心应手。3.8框架在网页设计中，框架可以划分Web页面，将整个窗口分割成几个不同的小窗口，各窗口可以包含不同的网页，而且在替换窗口中的网页文件时，各个窗口之间没有影响。最典型的框架应用就是在顶部或者左侧的框架窗口中设置链接标题，而链接的内容部分出现在右侧的框架窗口中。3.8.1创建框架集3.8.2创建嵌套框架集第3章第3章设计网页布局753.8.3保存框架3.8.4选中框架和框架集3.8.5为框架添加内容3.9设置框架和框架集属性框架的背景颜色要在页面属性中进行设置，而框架的其他属性，如确定框架集内各个框架的名称、源文件、链接、边距、滚动、边框和能否调整大小，要在自己的属性面板来进行设置。框架集属性控制着框架的大小和框架之间边框的颜色和宽度，以及打开链接的目标框架窗口等。3.9.1设置框架背景颜色3.9.2设置框架的属性表3-2框架属性面板的参数含义选项名称选项含义框架名称在此输入框架名，将被超链接和脚本引用。框架名称必须是一个以字母开头的单词，允许使用下划线，但不能使用横杠（-）、句号（。）和空格，以及JavaScript的保留字（例如top或navigator）源文件用来指定在当前框架中打开的源文件。可以直接输入文件名或者单击文件夹图标，浏览并选择一个文件滚动单击其中文本框后的向下箭头，可以选择“是”、“否”、“自动”和“默认”来决定显示滚动条和不显示滚动条，其中的“自动”为没有足够的空间来显示当前框架的内容时自动显示滚动条，“默认”为采用浏览器的默认值不能调整大小选择此复选框，可以防止浏览时拖动框架边框来调整当前框架的大小边框决定当前框架是否显示边框，有三种选择：是、否和默认。大多数浏览器默认为【是】，可以覆盖框架集的边框设置边框颜色设置与当前框架相邻的所有边框的颜色，此项选择覆盖框架集的边框颜色设置边界宽度以像素为单位设置左右边距边界高度以像素为单位设置上下边距76网页设计三剑客（Studio8）标准教程3.9.3设置框架集的属性表3-3框架集属性面板的参数含义选项名称选项含义边框设置文档在浏览器中被浏览时是否显示框架边框边框宽度输入一个数字以指定当前框架集的边框宽度，输入0，指定无边框边框颜色输入颜色的十六进制值，或者使用拾色器为边框选择颜色行设置行高，其后面的单位可以选择像素、百分比和相对3.10使用链接控制框架的内容要在一个框架内使用链接打开另一个框架中的文档，必须设置链接目标。可以使用属性面板的【目标】列表框，在弹出的菜单中指定被链接的文件，设置链接的方法如下所述。3.11课堂练习3-4框架制作实例利用框架制作一个个人站点的首页，从中体会利用框架制作页面的特点，并利用了在框架中插入表格，以及设置框架的背景颜色等知识。在该练习中，将用到插入框架、命名框架、保存框架、为框架设置链接等操作，其中要注意到在框架集中，每一个框架都是独立的，对其中的设置不影响其他的框架。3.12思考与练习