《网页设计实用教程》第05章

《《网页设计实用教程》第05章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、21世纪计算机系列教程网页设计实用教程电子教案退出第5章表格应用网页设计的概念标准视图与布局视图标准视图下表格的应用技巧布局视图下表格的应用技巧学习目的：本章概述：本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。通过本章学习，读者可利用表格在排版时按自己意愿来对网页素材进行有机组织，从而设计出具有专业水准的网页。在此基础上，可进一步了解标准视图模式与布局视图模式的基本概念及表格在两种模式下的基本应用知识。表格，以其边框的值是否为0，可分为有形表格和无形表格。有形表格：如果表格边框值为非0，则绘制的表格在预览时能被

2、看见，可以在有形的表格中填写数据，可以对数据进行升序或降序的排列，可以对表格进行各种格式的套用，使其变得更加美观，这些功能通常是表格最基本的功能。无形表格：如果表格边框值为0，则表格在预览时不可见，在网页设计时，常利用表格的这一重要属性来对网页进行排版。本章将以一个网校主页的设计为例，来说明表格在网页设计排版时所起的重要作用。网校主页如图5-1所示。5.1用表格实现一个系部主页的设计间距(单元格)：单元格与单元格的距离，单元格背景色不包括覆盖间距边距(单元格)：单元格内容与单元格边界（四周）的距离。在本例中设计的系部主页是一种在互联网上较

3、为常见的网页设计方式，其框架应用如图5-2所示，整个版面可以分为装饰区、标题区、导航栏区、信息区、版权区共5个区域。5.1.1网页结构分析5.1.2设计页眉区在设计之前，先来看看页眉区完成后的效果图，如图5-3所示。5.1.2设计页眉区5.1.3设计导航栏区导航栏区完成后效果图如图5-8所示。其制作方法比较简单。图5-8导航栏区完成后效果图5.1.3设计导航栏区。主页•校友联络•班级留影•蒙公学堂•系部联系•免费资源•友情链接信息区，一分为三，是网页设计常见方式。一般在两边可放置一些常见信息如天气预报、用户登录信息、友好链接、搜索引擎、动

4、态新闻等。中间是网站主要栏目区。在各信息区，为排版需要，用到了表格的嵌套。1.设计左信息区5.1.4设计信息区2.设计主信息区两次插入如上表格5.1.4设计信息区3.设计右信息区5.1.4设计信息区版权区的设置效果如图5-21所示。图5-21设置完成版权栏后的效果5.1.5设计版权区预览效果5.2知识要点在上一节里，学习了一个系部主页设计的详细过程，应用到了表格的基本功能。表格应用基本有两种，一种边框线为0，一种边框线不为0，前者主要起排版作用，后者获得的是一个实实在在的表格，如上一例中“关注高考”栏目中的例子。其实，在Dreamweav

5、erMX中文版中，使用表格实现排版的功能远不限于上述知识，在利用表格实现排版方面，DreamweaverMX中文版独家引入了“布局视图”的概念，使用“布局视图”，使排版变得更加方便自由。接下来将对表格在网页设计中应用的这些知识要点作一简要介绍。在DreamweaverMX中文版的“插入”面板中，可以在“常规”、“布局”和“表格”三个选项卡中都有表格工具。1.常规选项卡2.表格选项卡3.布局选项卡图5-25布局视图图5-23“表格”工具图5-22“常规”工具5.2.1标准视图中的表格与布局视图中的表格5.2.2标准视图模式下表格的应用技巧操

6、作方法：方法一：菜单：修改表格方法二：右击表格1.选定表格的操作选定整个表格选定表格的行与列选定一个单元格选定不相邻的行、列或单元格2.表格的缩放操作用鼠标拖放实现用表格属性面板实现3.编辑表格增加行列删除行列合并单元格拆分单元格5.2.2标准视图模式下表格的应用技巧4.格式化表格菜单：命令格式化表格第五章格式化表格-课程表（制作）表格在布局视图中的应用技巧，主要包括布局单元格与布局表格的绘制、移动、缩放大小、属性定义等几个方面。1.绘制布局单元格布局视图布局单元格按钮5.2.3布局视图模式下表格的应用技巧如果要绘制多个单元格

7、，不必每次都点击布局单元格按钮，只需要在绘制过程中按住Ctrl键即可.图5-382.绘制布局表格布局视图布局表格按钮5.2.3布局视图模式下表格的应用技巧如果要绘制多个表格，不必每次都点击布局表格按钮，只需要在绘制过程中按住Ctrl键即可.如果页面中没有包含内容，在布局视图下绘制第一个表格时，会被自动放置在页面的（左上方），否则，绘制的表格只能出现在内容的下方。图5-393.移动布局单元格布局单元格可以在布局表格自由移动，是“布局视图”灵活性的最大体现可以与标准视图对比，后者只能靠调整行高和列宽来实现方法一：鼠标拖动法，详见教材P73方

8、法二：也可使用键盘上的箭头来操作，每次移动1个象素，如果同时按住Shift键，每次可移动10个象素最外层的表格不可移动。移动布局表格（不可移动）5.2.3布局视图模式下表格的应用技巧图5-40