网页设计与制作教学全套课件第2版 孙振业电子教案 第6章 网页布局new.ppt

《网页设计与制作教学全套课件第2版 孙振业电子教案 第6章 网页布局new.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章网页布局2014.11《网页设计与制作》第6章网页布局应用框架布局网页6.2应用Div+CSS布局网页6.3应用表格布局网页6.1《网页设计与制作》本章要点在网页中，表格、Div+CSS与框架主要用于网页的布局定位。表格用于精确定位，Div+CSS可以灵活定位，框架在定位的基础上，可以引入多个HTML文件。创建表格与嵌套表格编辑表格与设置表格的属性创建框架与框架集设置框架与框架集的属性插入Div绝对定位与相对定位浮动定位应用表格、Div+CSS与框架设计网页《网页设计与制作》6.1应用表格布局网页表格是一种在HTML页面上布局数据与图像的工具。表格为网

2、页设计者提供了向网页添加垂直与水平结构的方法。例如，使用表格安排表格数据，在网页上布局文本与图像等。表格由三个基本组件构成：行（水平空间）列（垂直空间）单元格（行和列交汇的空间）《网页设计与制作》6.1应用表格布局网页创建表格6.1.1操作实例6-1在网页中按图6-1所示建立表格《网页设计与制作》6.1应用表格布局网页创建表格6.1.1·操作步骤：①在本地站点html文件夹下新建网页blzl.html。②在文档头将网页“标题”设置为“巴黎之旅”。③设置标题：在“文档”窗口的第一行输入标题文字“巴黎之旅”，并在属性面板设置为“隶书”、大小为“xx-large”

3、、水平为“居中对齐”。④设置表格插入点。在文档窗口，将表格插入点设置在标题文字的下方。⑤执行下列操作之一，打开“表格”对话框。·单击“常用”工具栏的“表格”按钮。·从“常用”工具栏将“表格”按钮拖动到表格插入点，即标题文字的下方。·在“插入”菜单选择“表格”选项。《网页设计与制作》6.1应用表格布局网页创建表格6.1.1⑥在对话框中默认当前值或重新输入新值。如图6-2所示。“表格”对话框显示的默认数据是最近一次创建表格时使用的数据。·在“行数”中，指定表格的行数。例如，输入16。·在“列数”中，指定表格的列数。例如，输入4。·在“表格宽度”中，指定以像素为单

4、位或占浏览器窗口百分比的表格宽度。例如，输入宽度为85，选择单位为百分比。·在“边框粗细”中，指定以像素为单位的表格边框宽度，如果不需要边框可输入0。例如，输入1。·在“单元格边距”中，指定单元格内容与单元格边框之间的距离，单位是像素。默认边距为1像素，如果不需要边距可输入0。例如，输入1。·在“单元格间距”中，指定单元格之间的距离，单位是像素。默认间距为1像素，如果不需要间距可输入0。⑦单击“确定”按钮，网页中创建了一个16行4列的表格。《网页设计与制作》6.1应用表格布局网页表格的基本操作与属性设置6.1.21．向表格中输入文字操作实例6-2按图6-1所

5、示完成表格中的文字输入与设置操作步骤：（1）向表格中输入文字①在指定单元格中单击鼠标，设置插入点。②在插入点输入文字。在表格中输入的信息如图6-1所示。（2）选中表格并设置表格的居中对齐①执行下列操作之一，选中整个表格。·单击表格的左上角。·单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。·在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。·在表格中单击一次，在文档窗口下方的标签选择器中单击

6、表格布局网页表格的基本操作与属性设置6.1.2②在表格“属性”面板的“对齐”下拉列表中选择“居中对齐”。（3）选中行或列并设置行或列文本的居中对齐①执行下列操作之一，选中行或列。·将鼠标移动到一行的左边界或一列的顶部，当出现选择箭头时单击鼠标左键。如图6-4、6-5所示。·在指定行或列，按住鼠标左键左右或上下拖动以选取行或列。②在行或列“属性”面板的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。《网页设计与制作》6.1应用表格布局网页表格的基本操作与属性设置6.1.2《网页设计与制作》6.1应用表格布局网页表格的基本操作与属性设置6.

7、1.2《网页设计与制作》6.1应用表格布局网页表格的基本操作与属性设置6.1.2（4）选中单元格并设置单元格文本的居中对齐①执行下列操作之一，选中一个或多个单元格。·在单元格中单击，上下或左右拖动到另一个单元格。·在单元格中单击，然后按下Shift键并单击另一个单元格，以这两个单元格为顶点的矩形区域中的所有单元格被选中。·按下Ctrl键然后依次单击单元格、行或列，选中不相邻的单元格、行或列。按下Ctrl键并单击被选中的单元格、行或列可取消选中。②在单元格“属性”面板的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。《网页设计与制作》6.

8、1应用表格布局网页表格的基本操作与属性设置6.1.2