网页设计教程 教学课件 作者 裴献第6章 网页页面布局设计.ppt

《网页设计教程 教学课件 作者 裴献第6章 网页页面布局设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章网页页面布局设计教学目的掌握表格的创建方法掌握表格和单元格属性的设置学会在网页中灵活使用表格学会如何利用布局表格进行页面的布局设计教学重点使用表格进行页面布局教学难点使用布局表格进行页面布局6.1页面布局的概念6.1.1页面布局设计设计页面布局的一般步骤。（1）设计草案新建的HTML文档是一个空白的文档，相当于一张白纸，可以任由设计者在上面发挥想象，将所要设计的页面的大概框架构思好，最好能够先在纸上或是使用软件如photoshop把自己的构思画出来，只需画出整体布局，打下草稿，不必考虑细节问题。可以设计多份草案，以供选择。设计页面布局的一般步骤（2）粗略布局在设计好的草案的基础上

2、，确定好各个功能模块的摆放，合理安排它们的结构，需要达到主次分明，层次突出。（3）具体布局对网页粗略布局了之后就是具体布局，给粗略布局添枝加叶，使之具体化，精确化。6.1.2页面布局的方法（1）表格布局（2）层布局（3）框架布局6.2表格的创建及编辑表格是网页设计中最常用的工具，它既可像字处理软件中的表格一样，用来显示表格式数据，也可以用作页面布局的一个强有力工具。表格是由“行”和“列”构成的，利用“行”和“列”的分隔，可以更方便灵活的在适合的位置插入和排列文本、图像等网页元素，从而使页面更具条理性、更加美观。6.2.1创建表格表格的功能这么强大，就需要掌握如何应用它，在Dreamwe

3、averCS3中可以很方便地创建表格，下面介绍如何创建表格。创建表格可以执行下列方法之一，都会弹出一个“表格”对话框，根据需要在该对话框中设置相关的参数。方法一：选择菜单“插入记录”→“表格”命令。方法二：单击“常用”工具中的“表格”按钮。“表格”对话框参数说明参数说明行数和列数确定表格的具有多少行和列，直接输入数目。表格宽度以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。边框粗细以像素为单位的表格边框的宽度。设置为0时，将在浏览器中不显示边框。单元格边距用来指定单元格内容与边框的距离。如不明确指定，则大多浏览器按1显示。单元格间距相邻的两个单元格之间的距离。如不明确指定，则大多

4、浏览器按2显示。页眉指定表格标题显示方式，有“无”、“左”、“顶部”、和“两者”4种。标题指定表格标题，显示在该表格外面。对齐标题如果设置有表格标题，则用来指定表格标题相对于表格的对齐方式。主要有“默认”、“底部”、“顶部”、“左”和“右”5种，“默认”为“顶部”。摘要用来说明表格信息，不会显示在浏览器上。6.2.2表格的选定1．选定表格选定表格的方法有以下几种：（1）单击表格的边框线。（2）将光标定位在表格内部任意位置，选择“修改”→“表格”→“选择表格”命令。（3）将光标定位在表格内部任意位置，单击“标签”选择器中的如图6-3所示的

5、选定一个单元格、选定连续的多个单元格和选定不连续的多个单元格。（1）选定一个单元格的方法有以下几种：A.按下Ctrl键的同时，在单元格内单击即可选中该单元格。B.将光标定位在所要选定的单元格内，单击“标签”选择器中的如图6-5所示的