网页第3章.pptVIP

第三章  使用表格布局页面 本章要点 一个成功的网页，不仅要有丰富、有趣的内容，而且还要有清晰、美观的页面布局，这样才能吸引网民的注意。 表格是很有用的网页设计工具。利用表格可以控制文本和图像在页面上出现的位置。为了简化用表格进行布局的过程，Dreamweaver提供了【布局】模式。在这种模式下，可以很轻松地使用表格作为基本结构进行页面布局，同时可以避免传统文式下使用表格进行布局的缺陷。 第三章  使用表格布局页面 第三章  使用表格布局页面 　　本节主要讲述在Dreamweaver中导入一个Excel文档”学习成绩表”，然后对“学习成绩表”中的“总分”进行排序，最后再将排序好的表格导出为文本文件的全部过程。具体的操作步骤如下： 　（1）单击【文件】︱【导入】︱【Excel文档】命令，在弹出的对话框中，选择Excel文档“学习成绩表”，然后单击【打开】按钮，即可导入如图3-24所示的表格。 第三章  使用表格布局页面 　（2）选中该表格，然后单击【命令】︱【排序表格】选项，打开如图3-25所示的对话框。在该对话框的【排序按】列表框中选择【列7】，因为表格中的“总分”为第7列。在【顺序】列表框中选择【按数字顺序】并且按【升序】排列，勾选【完成排序后所有行颜色保持不变】复选框，然后单击【确定】按钮，即可得到如图3-26所示的表格。 　（3）如果要将该表格导出为文本文件，首先将鼠标置于表格的任意单元格中 。 第三章  使用表格布局页面 　　（4）然后单击【文件】︱【导出】︱【表格】命令，打开如图3-27所示的对话框。在该对话框的【定界符】列表框中，根据需要选择一种分隔符，接着在【换行符】列表框中，选择将要导出文件的操作系统，有Windows、Mac和UNIX三个选项。 　　（5）然后单击【导出】按钮，即可打开如图3-28所示的对话框。 第三章  使用表格布局页面 （6）在该对话框中，为导出的表格确定目标位置以及文件名，在【文件名】中输入xuexicjb.txt，单击【保存】按钮即可得到如图3-29所示的文本文件。 第三章  使用表格布局页面 现在利用【布局】模式，完成本章开头的实例。首先制作一个导航栏，然后在对页面进行整体布局。页面中的导航栏用于引导用户在网上寻找有效信息，因此最好放在页面的左侧，并将其所在表格或单元格的宽度设置为固定宽度。导航栏一般包括边框，栏目和栏目细项，要安排下这些内容需要使用表格嵌套，在嵌套表格中还要绘制相应个数的单元格。具体的操作步骤如下： （1）在【插入】工具栏的【布局】选项卡中，单击【布局】按钮，将【文档】窗口切换到【布局】模式下。 第三章  使用表格布局页面 　　（2）单击【布局】选项卡中的【布局表格】按钮，在【文档】窗口绘制一个表格，指定表格的宽度为200像素，然后在表格的四周分别绘制一个像素值为2的单元格，并设置其颜色为黑色，如图3-48所示。 　　（3）切换到【拆分】视图，将4个单元格对应源代码中的“nbsp；”删除，然后在中间灰色区域中插入一个宽度为186像素的表格，如图3-49所示。 第三章  使用表格布局页面 　　（4）在新插入的表格中，绘制10个单元格，使1、5、8行的高度为20像素，背景颜色为黄色，其余行为15像素，背景颜色为粉红色，如图3-50所示。 　　（5）然后在单元格中插入文本、图片，设置好字体后，导航栏就制作完成了，如图3-51所示。 第三章  使用表格布局页面 （6）创建一个新表格，在第一行插入两个单元格，第二行插入六个单元格，第三行插入三个单元格，左侧的单元格用来粘贴导航栏。设计好后，可以切换到【标准】模式进行显示，如图3-52所示。 　　（7）参看例中的文本与图像，用户可以根据需要进行输入。至此，利用【布局】模式设计网页就介绍完成了。 第三章  使用表格布局页面 专家指南 　———利用Fireworks的切片布局页面 现在专业的网页设计都是先由美工根据站点的主旨、风格和内容进行站点页面设计，通常是使用图像制作软件来设计页面的样式，这样可以自由地摆放页面中各个板块的内容，也可以非常方便地进行页面色彩设计。设计完毕后利用图像分割软件（Fireworks）把图片按照合理的页面布局进行页面分割，并生成相应的HTML代码，这样就可以很轻松地完成页面的布局、定位和修饰。在Dreamweaver中，可以利用Fireworks图像导出的表格进行页面布局，相关知识，可以参看第14.6节。 * 制作表格 在表格中添加内容 设置表格属性 使用布局模式布局页面 使用表格布局页面 预备知识 网页制作基本操