《网页设计与制作教学课件作者第2版孙振业电子教案第6章网页布局new》由会员分享，可在线阅读，更多相关《网页设计与制作教学课件作者第2版孙振业电子教案第6章网页布局new（82页珍藏版）》请在金锄头文库上搜索。
1、第6章 网页布局,2014.11,网页设计与制作,第6章 网页布局,网页设计与制作,本章要点,在网页中，表格、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。 在“表格宽度”中，指定以像素为单位或占浏览器窗口百分比的表格宽度。例如，输入宽度为85，选择单位为百分比。 在“边框粗细”中，指定以像素为单位的表格边框
4、宽度，如果不需要边框可输入0。例如，输入1。 在“单元格边距”中，指定单元格内容与单元格边框之间的距离，单位是像素。默认边距为1像素，如果不需要边距可输入0。例如，输入1。 在“单元格间距”中，指定单元格之间的距离，单位是像素。默认间距为1像素，如果不需要间距可输入0。 单击“确定”按钮，网页中创建了一个16行4列的表格。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,1向表格中输入文字 操作实例6-2 按图6-1所示完成表格中的文字输入与设置 操作步骤： （1）向表格中输入文字 在指定单元格中单击鼠标，设置插入点。 在插入点输入文字。在表格中输入的信息如图6
5、-1所示。 （2）选中表格并设置表格的居中对齐 执行下列操作之一，选中整个表格。 单击表格的左上角。 单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。 在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。 在表格中单击一次，在文档窗口下方的标签选择器中单击标签。如图6-3所示。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,在表格“属性”面板的“对齐”下拉列表中选择“居中对齐”。 （3）选中行或列并设置行或列文本的居中对齐 执行下列操作之一，选中行或列
6、。 将鼠标移动到一行的左边界或一列的顶部，当出现选择箭头时单击鼠标左键。如图6-4、6-5所示。 在指定行或列，按住鼠标左键左右或上下拖动以选取行或列。 在行或列“属性”面板的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,（4）选中单元格并设置单元格文本的居中对齐 执行下列操作之一，选中一个或多个单元格。 在单元格中单击，上下或左右
7、拖动到另一个单元格。 在单元格中单击，然后按下Shift键并单击另一个单元格，以这两个单元格为顶点的矩形区域中的所有单元格被选中。 按下Ctrl键然后依次单击单元格、行或列，选中不相邻的单元格、行或列。按下Ctrl键并单击被选中的单元格、行或列可取消选中。 在单元格“属性”面板的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,2编辑表格 操作实例6-3 将图6-1所示的表格修饰为图6-6所示的形式 操作步骤： （1）插入列 如图6-6所示，在原第一列之前插入新的一列。 在需要添加新列的右侧列
8、单击任意的单元格。例如，单击“景点1”单元格。 执行下列操作之一，在原列的左侧插入新的一列。 在“修改”菜单中选择“表格”、“插入列”选项。 在“插入”菜单中选择“表格对象”、“在左边插入列”选项。 单击鼠标右键，在快捷菜单中选择“表格”、“插入列”选项。 在“布局”工具栏，单击“在左边插入列”按钮。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,（2）调整列的宽度 执行下列操作之一，可调整列宽。 将鼠标移到第一列的右边框，当鼠标指针变为双向箭头时，向左右拖动边框线，可使列的宽度缩
9、小或增大。 选中第一列，在列“属性”面板的“宽”文本框输入选中列的宽度。 （3）合并单元格 如图6-6所示，第一列第24行单元格合并，输入“第一游览区”；第58行单元格合并，输入“第二游览区”；第911行单元格合并，输入“第三游览区”；第1214行单元格合并，输入“第四游览区”。 选中需要合并的单元格。选中的单元格必须是连续的，并且形状应是矩形。例如，选中第一列的24行单元格。 执行下列操作之一，合并单元格。 在“修改”菜单选择“表格”、“合并单元格”选项。 单击鼠标右键，在快捷菜单中选择“表格”、“合并单元格”选项。 在单元格“属性”面板单击“合并所选单元格，使用跨度”按钮。如图6-7所示。
10、,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,在合并后的单元格中输入“第一游览区”。 参照步骤，将第一列第58行单元格合并，输入“第二游览区”；第911行单元格合并，输入“第三游览区”；第1214行单元格合并，输入“第四游览区”。 参照步骤，将第一行第12列单元格合并。 注意：如果合并前的单元格有内容，则所有合并前单元格的内容将被放置到合并后的单元格中，被选定的第一个单元格的属性将应用到合并后的单元格上。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,（4）插入行与移动行 如图6-6所示，在“第三游览区”与“第四游览区”之间
11、添加一行。由于已经纵向合并了单元格，直接在“第四游览区”行之上插入行可能得不到预期的效果。因此，采用如下的间接方法。 在第一行的第一个单元格内单击鼠标，设置插入点。 执行下列操作之一，在原第一行之上插入新行。 在“修改”菜单选择“表格”、“插入行”选项。 单击鼠标右键，在快捷菜单选择“表格”、“插入行”选项。 在“布局”工具栏，单击“在上面插入行”按钮。 选中新插入的行，在“编辑”菜单选择“剪切”选项，将该行剪切到剪贴板。 在“第四游览区”单元格中单击鼠标右键，在“编辑”菜单中选择“粘贴”选项，将所剪切的行插入到当前位置之前。 合并新添加行的第12列和第35列单元格，并分别输入“自行游览”、“
12、迪斯尼乐园、购物”。 注意：采用下述方法也能完成上述操作。在需要添加新行的上一行，单击任意的、非合并的单元格，在“布局”工具栏，单击“在下面插入行”按钮。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,3设置表格属性 首先通过“窗口”菜单的“属性”选项，打开“属性”面板。 操作实例6-4 按图6-8所示的格式修饰图6-6的表格 操作步骤： 选中表格。 查看表格“属性”面板，如图6-9所示。 命名表格操作：在“表格”文本框中，为表格输入一个名称。例如，输入“巴黎之旅”。,网页设计与制
13、作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,设置表格布局选项。 在“行”和“列”中，输入表格的行数和列数。编辑表格时，一般采用原表格的行列数。 在“宽”中，指定表格的宽度，一般采用浏览器窗口的百分比；也可采用以像素为单位的数值。通常情况下不需要设置表格的高度。 使用“对齐”下拉列表，设置同一段落中表格与其他元素的对齐方式。 使用“清除行高”和“清除列宽”按钮，可删除表格中所有的行高值和列宽值。 使用“将表格宽度转换成像素”按钮，可将占浏览器窗口百分比的宽度表达方式转换为像素数值的表达方式。 使用“将表格宽度转换成百分比”按钮，可将当前的像素数值表达方式转换为占浏览器窗口
14、百分比的宽度表达方式。 在“间距”中，指定单元格之间的距离，单位是像素。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,设置表格边框 在“边框”中，输入以像素为单位的表格边框的宽度。例如，输入4。 单击“快速标签编辑器” ，在弹出的标签内“id=“巴黎之旅“”后面输入空格，在弹出的列表中双击选择“bordercolor”，在双引号中输入“#D6D3CE”，即可给表格赋予“边框颜色”。如图6-10所示。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,在标签内输入空格，在弹出的列表中双击选择“bgcolor”，在双引号中输入六位颜
15、色编码，即可为表格赋予一种背景颜色。 在标签内输入空格，在弹出的列表中双击选择“background”，在双引号中输入图像文件名，即可为表格插入一幅背景图像。 设置行、列与单元格的属性 在表格中选取任何单元格的组合。例如，选中第一行的第26列。显示单元格“属性”面板，如图6-11所示。 使用“水平”下拉列表，设置单元格、行、列内容的水平对齐方式。 使用“垂直”下拉列表，设置单元格、行、列内容的垂直对齐方式。 在“宽”和“高”中，设置选中单元格的宽度和高度，单位是像素。使用百分比时，应在数值后面添加%号。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,使用“背景
16、”，可为单元格、行、列插入背景图像。 使用“背景颜色”，可为单元格、行、列设置背景颜色，可使用颜色拾取器或直接输入所需颜色的十六进制编码值。例如，输入“#CCCCFF”。 使用“边框”，可为单元格设置边框颜色。 单击“合并单元格”按钮，可将选中的单元格、行或列合并为一个单元格。 单击“拆分单元格” 按钮，可将一个单元格拆分为几个单元格。应在“拆分单元格”对话框中，选择是拆分为行还是列，并输入需要拆分的行数或列数。如图6-12所示。,网页设计与制作,6.1 应用表格布局网页,表格的基本操作与属性设置,6.1.2,选中“不换行”选项，可防止英文单词中间被截断换行。此时，单元格将自动扩展以容纳输入或粘贴的英文单词。通常单元
