《网页制作：经典表格应用实例》由会员分享，可在线阅读，更多相关《网页制作：经典表格应用实例（2页珍藏版）》请在金锄头文库上搜索。
1、第二章 静态网页制作第八节 经典表格应用实例一、制作细线表格以制作黑色细线表格为例：1、选中整个表格，设置表格间距为 1、背景颜色为黑色（该颜色即表格线的颜色） 。2、选中所有单元格，设置其背景为白色。保存，按 F12 预览。二、一像素分割条1、插入一个 1 行 1 列，宽为 360 像素，边框边距间距均为 0 的表格。2、把光标移到表格的单元格，设置单元格高为 1 像素，并设置一个背景色（即所要的线条颜色，如红色） 。3、切换到代码和设计窗口，将代码中的删除。保存，按 F12 预览。三、用表格构建完整的网站首页打开首页 index.html 文件。分别设置首页的顶部、中部和底部。下面以准备好
2、的“教学网站图片”素材为例进行讲解：（一）网页顶部（一般包括图标、广告、导航菜单）1、创建表格一：1 行 2 列，宽为 760 像素，边框及边距均为 0，间距为 1，背景颜色为绿色，居中对齐。选定表格一的各个单元格，设置背景色为白色，水平为居中对齐。2、将光标置于表格一左边单元格中，插入 logo.gif 图像。3、将光标置于表格一右边单元格中，插入 banner.gif 图像。4、将光标置于刚完成的表格之后，插入表格二：1 行 7 列，宽为 760 像素，边框及边距均为 0，间距为 1，背景颜色为绿色，居中对齐。5、选定表格二的各个单元格，设置背景色为白色，水平为居中对齐。6、在表格二 7
3、个单元格中依次插入1.gif、2.gif、3.gif、4.gif、5.gif、6.gif、7.gif 图像。（二）网页中部（左边栏目列表、中间网站新闻、右边栏目列表）1、在表格二后面，插入表格三：1 行 3 列，宽为 760 像素，边框及边距均为 0，间距为 1，背景颜色为绿色，居中对齐。选定表格三的各个单元格，设置背景色为白色，水平为居中对齐，垂直排列为顶端对齐。2、将光标置于表格三的左边单元格中，设置单元格的宽度为 18%，插入 8.gif 图像。3、将光标置于 8.gif 图像后，插入表格四：6 行 1 列，宽为 90%，间距为 1，背景色为绿色。4、将光标依次放在表格四第 1 个到第
4、6 个单元格中，设置单元格高为 25，水平居中，背景色为白色。在 6 个单元格中分别输入文字“知识点一、知识点二、知识点三、知识点四、知识点五、知识点六”。5、将光标置于表格三的中间单元格中，设置其宽度为 66%，插入 9.gif 图像。6、将光标置于 9.gif 图像后，插入表格五：5 行 1 列，宽为 95%，间距为 1，背景色为绿色。7、分别将光标置于表格五的第一个到第五个单元格中，设置高为 25，背景色为白色。8、将光标置于表格三右边的单元格中，设置其宽度为 16%，插入 10.gif 图像。9、将光标置于 10.gif 图像后另起一行，输入文本：友情链接。10、插入表格六：1 行 1
5、 列、宽为 90%，设置单元格高为 1 像素，背景色为红色，切换到源代码窗口，将单元格中的空格符号“”删除，使其变为一像素分割条。然后在后面录入 3-5 个网站名称。（三）网页底部（一般包括版权信息及其他相关内容）1、将光标置于表格三后，插入表格七：3 行 1 列，宽为 760 像素、边框及边距均为0、背景色为绿色的表格，设置排列方式为居中对齐。2、将光标置于表格第 2 行的单元格中，设置该单元格为水平居中对齐，然后输入作者单位、姓名（学号）、联系电话和电子邮箱，例如：“文学院：李明（0701010101），联系电话：13977188888，电子信箱：”。文本的颜色自主选择。（四）设置页属性。点击菜单【修改】【页面属性】 ，在标题一栏中输入标题为“新世纪课程教学网站” ，并选择背景图像 11.gif，将上边距设为 50 像素。保存网页，按 F12 预览。
