《本科网页设计与制作实例教程9787307103795教学全套课件资源包06案例库案例七用表格构建完整的页面》由会员分享，可在线阅读，更多相关《本科网页设计与制作实例教程9787307103795教学全套课件资源包06案例库案例七用表格构建完整的页面（2页珍藏版）》请在金锄头文库上搜索。
1、用表格构建完整的页面一、网页顶部（一般包括图标、广告、导航菜单）1、创建一个1行2列，宽为760像素，边框及边距均为0的表格。2、选中表格，设置排列方式为居中对齐，背景色为#3366CC。3、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入一张图像，一般在此插入的是网站的图标，即logo。4、将光标置于右边单元格中，设置其宽度为500，水平排列为居中对齐，垂直排列为中间，然后插入图像，一般是网页广告，即banner。5、将光标置于刚完成的表格之后，插入/表格，创建一个1行1列，宽为760像素，边框及边距均为0的表格。6、选中刚创建的表格，设置排列方式为居中对齐，背景
2、色为#005173。7、在该表格中依次插入多个图像，作为导航条菜单。二、网页中部（左边栏目列表、中间网站新闻、右边栏目列表）1、在导航条表格后面，插入/表格，创建一个1行3列，宽为760像素，边框及边距均为0的表格。并设置排列方式为居中对齐，背景色为#FFFFFF。2、将光标置于左边单元格中，设置其宽度为18%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入一张图像，插入一个导航条。3、将光标置于刚插入的图片后，插入/表格，插入一个12行1列，宽为90%的表格。设置其单元格间距为1，背景色为#CCCCCC。4、将光标放在表格第一个单元中，设置其高为20，背景色为#FFFFFF。插入/图像，插
3、入一个导航文字前面的小点。同样设置其他11个单元格，这样左边的栏目分类列表就完成了。5、将光标置于主体表格的中间单元格中，设置其宽度为66%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入/图像，插入一个导航条。6、将光标置于图像后，插入/表格，插入一个4行1列，宽为95%的表格。设置其单元格间距为1，背景色为#CCCCCC。7、将光标置于表格的第一个单元格中，拖动鼠标，将4个单元格都选中，设置高为60，背景色为#FFFFFF。8、将光标置于主体表格右边的单元格中，设置其宽度为16%，水平排列为居中对齐，垂直排列为顶端对齐，插入/图像，插入一个导航条。9、将光标置于图像后，插入/表格，插入一
4、个7行一列，宽为90%的表格。设置其间距为1，背景色为#CCCCCC。10、按住Ctrl键，用鼠标点击刚插入的表格的第1、3、5、7单元格，然后设置它们的高为55，背景色为#FFFFFF。11、选中第2、4、6单元格，设置其高为6，背景色为#FFFFFF。12、切换到源代码窗口，将第2、4、6单元格中的空格符号“”删除。三、网页底部（一般包括版权信息及其他相关内容）1、将光标置于主体表格后，插入/表格，创建一个2行2列，宽为760像素，边框及边距均为0的表格。2、选中表格，设置排列方式为居中对齐，背景色为#3366CC。3、将光标置于表格第1行的左边单元格中，设置其宽度为50%，水平排列为默认，垂直排列为基线，背景色为#FFFFFF，然后输入版权信息，内容颜色随便。4、将光标置于表格第1行右边单元格中，插入/图像，插入一个圆角图像，在它后面输入Email字样，设置其大小和颜色为1和#FFFFFF。5、插入/表单对象/文本域，插入一个文本域，宽度可以随意。6、插入/图像，插入一个GO的图像。7、设置页属性。点击菜单修改/页面属性，在标题一栏中输入标题，并选择背景图像，将顶部边界设为0。将整个网页分部分放到不同的表格中组合而成，还可以加快浏览器读取页面的时间。因为浏览器是读完整表格后才显示内容的，所以最好不要框在一个表格中。
