第六讲-利用表格设计和制作网页.ppt

第5章利用表格设计和制作网页 表格是网页的一个非常重要的元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格是网页制作中最为重要的一个技巧，表格运用得好与坏，直接反映了网页设计师的水平。 1 网页布局方法 在制作网页前，可以先绘制出网页的草图。 网页布局的方法有两种： 纸上布局 许多网页设计人员不喜欢先绘制出页面布局的草图，而是直接在网页编辑工具里边设计边布局边加内容，这种不打草稿的方法不能设计出优秀的网页来，所以在开始制作网页时，首先应在纸上绘制出网页的布局草图，尽可能的多绘制几张草图，最后选定一个满意的来创作。 软件布局 可以利用Photoshop、fireworks等软件来绘制网页布局的草图，利用软件可以方便地使用颜色、图形。 常见的版面布局形式 网页的版面布局主要指网站主页的版面布局，其他的版面与主页风格应基本一致。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。 常见的网页布局形式有： “国”字型布局 也可称为“同”字型布局。这种结构是国内一些大中型网站最常见的布局方式。这种布局方式的优点是充分利用版面、信息量大，缺点是页面拥挤、不够灵活。 “厂”字型布局 结构与“国”字型布局很相近。它的优点是页面结构清晰、主次分明，是初学者最容易掌握的布局方法。缺点是规矩呆板，如果在细节色彩上不注意，很容易让人产生视觉疲劳。 “框架”型布局 “框架”型布局一般分为左右框架型、上下框型以及综合框架型等布局结构，其中一栏是导航栏目，一栏是正文信息，复杂的框架结构可以将页面分成许多部分，常见的是三栏布局，上部一栏放置图片广告，左边一栏显示导航栏，右边显示正文信息内容。 “封面”型布局 较常出现在一些网站的首页，大部分为一些精美的平面设计结合一些小动画，放上几个简单的链接或者仅一个“进入”的链接按钮，甚至直接在首页图片上做链接而没有任何提示。如果处理得当，这种布局形式会给人带来赏心悦目的感觉。 回顾：HTML中表格的标签及属性 利用表格的属性制作有立体感的表格 A 表格的参数：border=1 cellspacing=0 cellpadding=0 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CC B 表格的参数：border=1 cellspacing=2 cellpadding=0 bgcolor=#9999CC C 表格的参数：border=1 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CC 其实有一个技巧：把bordercolor设为浅色一点，表格就会凸起来了。 2 创建表格和表格的基本操作 2.1、创建表格 点击常用对象面板的 ： 宽度：表格的宽度，单位可以是像数（Pixels）或百分比（Percent）。按像素定义的表格大小是固定的，而按百分比定义的表格，会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别 边框：整个表格最外面四周边框线的宽度； 单元格间距：单元格之间的间距，单位为像素，默认间距为2，0表示没有间距； 单元格边距：单元格内容与单元格边框的间距大小，单位为像素，默认值为1，0表示没有间距。 所谓的单元格，就是表格里面的每一小格。 2.2 设置表格属性 使用鼠标拖放可改变表格大小、行高、列宽 使用表格属性面板设置 在Dreamweaver中，要改变表格或单元格的高度和宽度，尽量在属性面板中通过改变数值的方法进行，不要使用鼠标直接拖动表格边框来改变表格的尺寸，这种方法会导致Dreamweaver自动为表格加上不合适的尺寸限制使表格无法改变尺寸。 2.3 设置单元格属性 在编辑网页时除可以设置整个表格的属性外，还可以单独设置表格中某行、列或单元格的属性。 2.4 选择表格 选择整个表格 单击表格四周的任何一个地方（除了左边）。 将光标置于表格中的任何一个地方，在菜单栏中选择“修改/表格/选择表格” 利用标签选择器来选择。 选择多个单元格 连续选：先单击一个单元格，再按住Shift键的同时用鼠标单击另一个单元格。 间断选：按住Ctrl键的同时用鼠标依次单击所要选择的单元格。 2.5 合并和拆分单元格 合并单元格 合并单元格操作只能针对连续的单元格使用。 选中需要合并的单元格 在属性面板上单击 按钮。或者鼠标右键/表格/合并单元格。或者修改菜单/表格/合并单元格。 拆分单元格 表格中每一行中的单元格列数可能不等，这时就可根据需要使用拆分命令把一个单元格变为几个单元格。 选中需要拆分的单元格。 在属性面板上单击