第四章 利用表格布局网页

第四章利用表格布局网页本章要点表格的基本操作插入表格、选择表格、设置表格、调整大小利用表格进行布局的方法插入表格在网页制作中，对页面进行布局是非常重要的，表格就是页面布局中常用的方式。Dreamweaver8不仅支持在表格中有序地排列数据，还可用表格对网页中的文本、图像及其他元素进行定位。输入表格内容手动添加表格内容将表格插入到文档后即可向表格添加文本或图像等内容。向表格添加内容的方法很简单，只需将插入点定位到要输入内容的单元格中，再输入文本或插入图像即可。从其他文档导入表格式数据Dreamweaver8可以将创建在另一个应用程序（如文本文件）中的数据导入到网页中并设置为表格的格式，而且各数据之间不可以制表符、逗号、冒号、分号或其他分隔符分隔开来。表格数据的导出因为语言原因，导出的文件只能用写字板打开才能正确显示其中的数据，在其他程序中打开会乱码。选择表格选择整个表格选择整行或整列选择单元格选择整个表格选择整行或整列将鼠标光标移到要选择行或列的左侧或上方，当需要选择的行或列边框线呈红色时单击鼠标即可。选择单元格单元格的选择分为选择单个单元格和选择多个单元格区域。合并及拆分单元格合并单元格拆分单元格合并单元格合并单元格操作只能针对连续的单元格使用。拆分单元格表格中每一行中的单元格列数可能不等，这时就可根据需要使用拆分命令把一个单元格变为几个单元格。插入或删除行或列插入单行或单列插入多行或多列删除行或列插入单行或单列插入多行或多列删除行或列将插入点定位到要删除行或列的任意一个单元格中，然后选择[修改][表格][删除行]菜单命令或选择[修改][表格][删除列]菜单命令。选择表格要删除的行或列，然后选择[编辑][清除]菜单命令或按【Delete】键。设置表格、单元格属性和表格模板设置表格属性设置单元格属性套用表格模板设置表格属性“表格”属性面板中显示了插入表格的所有特性，通过修改面板中的参数可快速地编辑表格外观。设置单元格属性在编辑网页时除可以设置整个表格的属性外，还可以单独设置表格中某行、列或单元格的属性。套用表格模板在Dreamweaver8中提供了多个表格模板供用户选择使用，还可以通过设置模板的参数来调整表格的外观。表格嵌套嵌套表格是表格布局中一个十分重要的环节，它是指在一个表格的单元格中再插入一个表格，嵌套表格的宽度受所在单元格的宽度限制，其编辑方法与表格相同。利用表格进行简单页面布局表格的高级应用技巧1、利用表格制作水平线和垂直线2、制作圆角表格3、制作细线表格在布局视图中对网页进行布局网页布局的基本概念1.页面尺寸：由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。2.整体造型：什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。3.页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。4.文本：文本在页面中出现都以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。5.页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。6.图片图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。7.多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。二、网页布局的方法网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：1.纸上布局法许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。*尺寸选择：目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。*造型的选择：先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。2.软件布局法如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。常用到的版面布局形式（1）“厂型布局（2）口型布局（3）对称对比布局（4）POP布局优秀网页布局鉴赏三、网页布局的技术1.表格布局表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。2.层叠样式表的应用在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。3.框架布局从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。