网页设计与制作教程 教学课件 作者 杨帆 严耀伟 王方 网页设计第三章.ppt

《网页设计与制作教程 教学课件 作者 杨帆 严耀伟 王方 网页设计第三章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第三章网页色彩和布局的控制3.1表格应用表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具，虽然HTML代码中通常不明确指定列，但Dreamweaver允许操作列、行和单元格。表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。Dreamweaver提供了两种查看和操作表格的方式，即“标准”模式和“布局”模式。3.1.1表格基础日常生活中，最常见的表格是用来显示数据的，比如Excel中的表格。在Dreamweaver中，表格除了可以显

2、示数据外，最主要的功能是定位与排版。这样才能够将前面介绍过的文本与图像定位在网页中的任何想要显示的区域中。1.表格建立网页设计就是从创建表格开始的，先学习表格的创建可以为后来的网页设计奠定基础。(1)创建各种表格选项作用行数用于确定表格的行数。列数用于确定表格的列数。表格宽度以像素或者百分比为单位确定表格的宽度。边框粗细以像素为单位指定表格边框的宽度。单元格边距指定单元格边框和单元格内容之间的像素数，如果不希望显示边框时，设置为0像素。单元格间距指定相邻的单元格之间的像素数。创建各种表格无对表不

3、启用列或行标题，默认情况下此项被选中。左侧将表的第一列作为标题列，便于为每一行输入一个标题。顶部将表的第一行作为标题行，便于为每一列输入一个标题。两者在表中输入列标题和行标题。标题指定在表格外显示的标题。对齐标题指定表格标题相对于表格的显示位置，采用默认方式。摘要用于说明表格。1.表格建立(2)在表格中插入网页元素(3)设置表格属性即使在网页中插入一个最简单的表格，也具有表格的几个重要的元素，那就是表格整体、行、列和单元格。所以插入表格后，【属性】面板中显示的是该表格的基本属性。表格的基本属性如

4、表3.2所示。表3.2表格的基本属性参数含义表格Id设置表格的名称，也就是表格的Id。行/列在文本框中分别输入表格中行和列的数目宽在文本框中输入表格宽度，以像素为单位或按占浏览器窗口宽度的百分比进行计算。填充在文本框中输入单元格内容和单元格边框之间的像素数。间距在文本框中输入相邻单元格之间的像素数。表格的基本属性对齐用于确定表格相对于同一段落中其他元素（例如文本或图像）的显示位置。包括左对齐、右对齐和居中对齐。当对齐方式为【默认】时，其他内容不显示在表格的旁边。边框用于指定表格边框的宽度（以像素

5、为单位）。类可以将CSS规则应用于对象。背景颜色设置表格的背景颜色。边框颜色设置表格边框的颜色。背景图像为表格添加背景图像。2．编辑表格(1)选中表格元素(2)调整表格大小2．编辑表格(3)合并及拆分表格元素当创建的表格不符合要求时，可以通过删除或增加表格的行与列，以及合并或者拆分单元格来实现2．编辑表格(4)复制及粘贴单元格3．布局表格(1)创建布局表格与单元格(2)布局表格与单元格属性选项作用宽有【固定】和【自动伸展】两个选项：当选中【固定】单选按钮时，可以直接在右侧的文本框中输入表格的宽度

6、值。当选中【自动伸展】单选按钮时，则表格的宽度可以根据插入的内容自动进行调整。高在其后的文本框中输入表格的高度。背景颜色用于设置表格的背景颜色。布局表格与单元格属性填充用于设置单元格内容和边框的距离。间距用于设置表格内单元格之间的距离。清除行高按钮：对行高进行清除使单元格宽度一致按钮：表格内的单元格宽度自动随着单元格的内容宽度变化。删除所有间隔图像按钮：清除表格中的所有间隔图像。删除嵌套按钮：清除嵌套表格，只有当存在嵌套表格时，该选项才显示。类可以将CSS规则应用于对象4．表格制作实例（1）一像

7、素表格（2）圆角相框4．表格制作实例（3）可隐藏的说明书3.1.2修饰网页各种元素（1）网页各种元素标签（2）HTML信息（3）文本标签（4）图像标签（5）表格标签（6）链接标签（5）表格标签标签类型译名或意义作用备注表格标记