网页制作：经典表格应用实例.docx

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