Cha03外观、图形样式和图层总汇.pptVIP

本章主要讲解页面的布局，Dreamweaver提供了表格网页定位技术，这些都是网页制作技术的精髓。表格是在HTML页面中排列数据与图像的非常强有力的工具。使用表格可以对列表数据进行布局。CSS样式可以一次对若干个文档所有的样式进行控制。 CSS样式表的主要优点是提供方便的更新功能，在更新CSS样式时，使用该样式的所有文档格式都自动更新为新样式。 3.1 使用表格布局页面 3.2 表格基本操作 3.3 什么是CSS 3.4 【CSS 设计器】面板 3.5 设置CSS属性 3.6 链接到或导出外部CSS设计器表 3.7 使用CSS布局模板 3.8 上机练习——网页布局 3.9 思考与练习  3.1 使用表格布局页面 3.1.2 设置表格属性 如果创建的表格不能满足需要，我们可以重新设置表格的属性。比如：表格的行数、列数、表格高度、宽度等。修改表格属性一般在【属性】面板中进行。 首先选中要修改属性的表格，在窗口界面下方的【属性】面板中即可切换到表格的属性面板中，如图3.5所示。 3.1.3 插入嵌套表格 3.2 表格基本操作 3.2.1 选择表格 1. 选择整个表格 选择表格，是编辑表格的第一步，下面为选择表格的几种方法： 单击表格上的任意一条边框线，即可选择整个表格，如图3.9所示。 将光标置于表格内的任意位置上，在菜单栏中选择【修改】|【表格】|【选择表格】密令，如图3.10所示。 将光标置于表格的任意位置，单击文档窗口左下角的teble标签，如图3.11所示。 3.2.1 选择表格 2. 选择表格的行或列 当用户想要选择表格中的某一行或列时，可以使用以下几种方法： 当鼠标位于行首或列时，此时鼠标会处于 或 的形状，单击鼠标左键即可以选中行或列，如图3.12、3.13所示。 3.2.2 改变表格和单元格的大小 3.2.2 改变表格和单元格的大小 3.2.3 添加或删除行或列 3.2.3 添加或删除行或列 使用同样的方法插入列，我们还可以在菜单栏中选择【修改】|【表格】|【插入行或列】命令，打开【插入行或列】对话框。在该对话框中可设置要插入的行数或列数以及插入行或列的位置，单击【确定】按钮，即可插入行或列，如图3.21所示。 3.2.4 合并、拆分单元格 3.2.4 合并、拆分单元格 3.3.1 CSS的概念 3.3.2 CSS的特点 3.3.2 CSS的特点 3.4 【CSS 设计器】面板 在Dreamweaver中，使用【CSS设计器】面板可以查看文档所有的CSS规则和属性，也可以查看所选择的页面元素的CSS规则和属性。在CSS面板中科研创建、编辑和删除CSS设计器，还可以添加外部样式到文档中。 在菜单栏中选择【窗口】|【CSS设计器】命令，如图3.33所示。打开【CSS设计器】面板。在【CSS设计器】面板中会显示已有CSS设计器，如图3.34所示。 3.5.1 设置CSS类型属性 在【类型】选项中具体参数如下： Font-family：用户可以在下拉菜单中选择需要的字体。如果系统安装了某种字体，但在下拉菜单中没有显示，可以在下拉列表中选择【管理字体】命令，如图3.36所示。在打开的【管理字体】对话框中选择【自定义字体堆栈】选项，在【可用字体】窗口中选择需要添加的字体，单击按钮即可添加到【选择的字体】窗口中，然后单击左上角的按钮可继续添加下一个字体。单击【完成】确定添加并关闭【管理字体】对话框，如图3.37所示。 Font-size：用于调整文本的大小。用户可以在列表中选择字号，也可以直接输入数字，然后在后面的列表中选择单位，如图3.38所示。 3.5.1 设置CSS类型属性  3.5.1 设置CSS类型属性 3.5.2 设置CSS背景属性 3.5.2 设置CSS背景属性 3.5.2 设置CSS背景属性 3.5.3 设置CSS区块属性 3.5.3 设置CSS区块属性 3.5.4 设置CSS方框属性 Padding：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选中【全部相同】复选框可设置元素各个边的填充；选中【全部相同】复选框可将相同的填充属性设置为应用于元素的【上】、【右】、【下】和【左】侧。 Margin：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，Dreamweaver才在文档窗口中显示该属性。取消选中【全部相同】复选框可设置元素各个边的边距；选中【全部相同】复选框可