基于工作过程的网页设计与制作教程-海南软件职业技术学院.PPT

必备知识四：web标准测试 Web标准测试有两种方法：一种是利用火狐浏览器直接验证，另一种是把文件上传到W3C提供的测试网址上进行测试。 测试网址为：/ 根据检测给出的警告与错误进行优化。 2. 教师示范 必备知识四：测试浏览器兼容性 由于有些浏览器对web标准兼容性不是很好，也是在火狐上显示很好的页面，在IE6.0浏览器上则显示不出来，因此在页面完成后要进行多个浏览器测试，再修改代码直到大多数常用浏览器都很好支持为止。 如下是两个常见的兼容性问题： 2. 教师示范 必备知识四：测试浏览器兼容性 （1）单独的选择器 id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用： #sidebar {border: 1px dotted #000;padding: 10px;} 根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素： div#sidebar {border: 1px dotted #000;padding: 10px;} 2. 教师示范 必备知识四：测试浏览器兼容性 （2）一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。 2. 教师示范 3.学生设计 1、分析任务 2、小组讨论 3、模范制作 4、任务整合 课堂模仿制作： 4.展示评价 学习目标 评价项目 代码调整和优化 对整体代码调整优化 W3c标准检测 检测本网站的HTML和CSS是否符合标准 1. 整体代码调整和优化 2. W3c标准检测 3.大多数常用浏览器兼容 任务小结 基于工作过程的 Web国际标准教程 5.知识扩展 1、更多HTML和CSS代码优化； 2、更多浏览器兼容问题。 6.课外实践：优化课外完整的站点 完成小组网站——企业网站 包含：企业名称、企业logo、企业理念等信息。 谢谢大家 * * * 1. 任务分析 显示公司新闻分为四列显示，主要是以表格来显示数据，再用CSS控制表格的隔行变色。 必备知识一：表格标记 表格的基本结构： table……/table 　定义表格　caption……/caption　定义标题　th 　定义表头：默认样式为加粗、居中（相当于td）　tr 　定义表行　td 　定义表元(表格的具体数据) 2. 教师示范：表格部分 必备知识一：表格标记 2. 教师示范：表格部分 行 (tr) 单元格 td 第一季度 边框(boder) 单元格内容与单元格边框之间的距离(Cellpadding) 表格(table) 单元格间距(CellSpacing) 表格标签： table cellspacing=“0” cellpadding=“0” tr…/tr /table 必备知识一：表格标记 2. 教师示范：表格部分 设置标题位于表格上方： caption align=“top” ... /caption 设置标题位于表格下方： caption align=“bottom” ... /caption 必备知识一：表格标题 2. 教师示范：表格部分 设置整个表格的边框：即最外面的边框 table{ border:1px solid red;} 设置单元格的边框：表格内部的边框 td{ border:1px solid red;} 必备知识一：表格表框 2. 教师示范：表格部分 table id=t1 cellspacing=0 ...... /table 必备知识一：表格cellspacing 2. 教师示范：表格部分 tr:行 th:标题栏（相当于单元格） td:单元格 必备知识一：表格—行、单元格 2. 教师示范：表格部分 跨多列： colspan（写在td里） td colspan=“2”/td 表示两个单元格横合并，合并后该行的单元格比其他行的单元格少一对td/td标签。 table trth星期一/th th星期二/th th星期三/th /tr