第6章 网页页面布局的设计.ppt

第6章 网页页面布局设计 教学目的 掌握表格的创建方法 掌握表格和单元格属性的设置 学会在网页中灵活使用表格 学会如何利用布局表格进行页面的布局设计 教学重点 使用表格进行页面布局 教学难点 使用布局表格进行页面布局 6.1 页面布局的概念 6.1.1 页面布局设计 设计页面布局的一般步骤。 （1）设计草案 新建的HTML文档是一个空白的文档，相当于一张白纸，可以任由设计者在上面发挥想象，将所要设计的页面的大概框架构思好，最好能够先在纸上或是使用软件如photoshop把自己的构思画出来，只需画出整体布局，打下草稿，不必考虑细节问题。可以设计多份草案，以供选择。 设计页面布局的一般步骤 （2）粗略布局 在设计好的草案的基础上，确定好各个功能模块的摆放，合理安排它们的结构，需要达到主次分明，层次突出。 （3）具体布局 对网页粗略布局了之后就是具体布局，给粗略布局添枝加叶，使之具体化，精确化。 6.1.2 页面布局的方法 （1）表格布局 （2）层布局 （3）框架布局 6.2 表格的创建及编辑 表格是网页设计中最常用的工具，它既可像字处理软件中的表格一样，用来显示表格式数据，也可以用作页面布局的一个强有力工具。表格是由“行”和“列”构成的，利用“行”和“列”的分隔，可以更方便灵活的在适合的位置插入和排列文本、图像等网页元素，从而使页面更具条理性、更加美观。 6.2.1 创建表格 表格的功能这么强大，就需要掌握如何应用它，在Dreamweaver CS3中可以很方便地创建表格，下面介绍如何创建表格。 创建表格可以执行下列方法之一，都会弹出一个“表格”对话框，根据需要在该对话框中设置相关的参数。 方法一：选择菜单“插入记录”→“表格”命令。 方法二：单击“常用”工具中的“表格”按钮 。 “表格”对话框参数说明 6.2.2 表格的选定 1．选定表格 选定表格的方法有以下几种： （1）单击表格的边框线。 （2）将光标定位在表格内部任意位置，选择“修改” →“表格” →“选择表格”命令。 （3）将光标定位在表格内部任意位置，单击“标签”选择器中的如图6-3所示的table标签。 2．选定单元格 单元格的选定包括选定一个单元格、选定连续的多个单元格和选定不连续的多个单元格。 （1）选定一个单元格的方法有以下几种： A.按下Ctrl键的同时，在单元格内单击即可选中该单元格。 B.将光标定位在所要选定的单元格内，单击“标签”选择器中的如图6-5所示的td标签。 2．选定单元格 （2）选定连续的多个单元格的方法： A.用鼠标左键在连续的多个单元格中拖动。 B.将光标定位在所选单元格的第一个单元格中，按住Shift，单击最后一个单元格。 （3）选定不连续的多个单元格的方法是按住Ctrl键，同时单击要选定的单元格。 3．选定行或列 在Dreamweaver中，可选择单个行或列也以及多个行或列，被选中的行或列的边框线都是以黑色粗线显示。 6.2.3 表格的编辑 对表格的编辑包括修改表格的属性、调整表格的结构。 （1）表格属性的修改 选定了表格之后，就可以在相应的“属性”面板中查看或修改属性值。表格的属性包括表格的大小、背景颜色、表格间距等。 表格“属性”面板的参数 表格“属性”面板的参数(续) （2）单元格属性的修改 为了对放置在表格的文本进行排版，有时也需要对单元格进行属性设置。选定了单元格之后，就可以在相应的“属性”面板中查看或修改属性值。单元格的属性包括单元格对齐方式、高度、宽度和背景等。 单元格“属性”面板参数 2．调整表格的结构 新创建好的表格的结构都是有一定规则的，但在制表时，有时会需要一个不规则的行列来安排的表格，此时，可以对表格的结构进行相关的调整，如插入和删除行或列、合并和拆分单元格等 （1）插入和删除行或列 为了符合网页的布局需要，可以对表格中的行或列进行插入或删除。插入的行按照选定行的格式插入，但是插入列时会根据表格宽度压缩列宽。使用下列方法之一可以插入行或列。 （2）合并和拆分单元格 合并单元格是将选中的多个连续单元格合并成一个单元格，拆分单元格即根据需要将一个单元格拆分成由多行多列组成的多个单元格。合并和拆分单元格在表格操作中非常重要，利用合并和拆分单元格，使表格的布局更符合要求。 6.2.4 利用表格进行页面布局 表格既可像字处理软件中的表格一样，用来显示表格式数据，也可以用作页面布局的一个强有力工具，合理的使用表格来对页面进行排版，可以更方便的定位页面中的各种元素。如果需要利用表格来进行布局，则将其边框隐藏起来，在表格“属性”面板中的“边框”设置为0即可。 6.3 使用布局表格进行页面布局设计 Dreamweaver CS3提供了几种不同的表格模式，包括标准模式、扩展表格模式和布局模式。 在布局模式