《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第十四章

第14章网站的调试与发布14.1常见错误14.2HTML中的常见错误14.3CSS中的常见错误14.4验证代码14.5测试网页14.6发布网站14.7综合实例返回14.1常见错误现将如何检查这些常见的错误归纳如下:(1)对代码进行验证，对代码语法的相关错误进行排查。(2)确认需要测试的文件已经上传。(3)确认上传的文件的位置是正确的。(4)确认输入的URL与需要测试的文件是对应的，如果查看的页面是从另一个页面中跳转过来的，就需要确认链接中的URL与页面的文件名和位置是否完全匹配。(5)确认上传的文件已经保存过了。(6)确认上传了所有的辅助文件，包括CSS文件、图像文件、音频文件以及视频文件。下一页返回14.1常见错误(7)确认URL的大小写没有问题，确认文件名中没有使用空格。(8)确认测试时禁用的功能是否已经重启。(9)换个浏览器进行测试，确认浏览器是否有问题。上一页返回14.2HTML中的常见错误下面介绍HTML中的常见错误。(1)输入错误。输入错误是很容易出现的，也是比较难检查出来的，因为人们容易进入思维定式。但是拼写和属性值的设置必须确保正确。使用HTML验证器可以查出这种错误。(2)元素的嵌套。由于HTML代码都是由元素组成的，元素的嵌套是非常容易出错的，需要特别注意。(3)属性值引号的使用。当属性值内容里面需要用到引号的时候，那么引用属性值使用引号的时候就需要注意，当属性值是用双引号包围的时候，则属性值中间可上一页下一页返回14.2HTML中的常见错误以使用单引号。(4)元素的开始标记和结束标记。一般的元素都有开始标记和结束标记，使用的时候需要注意正确使用，不要对空元素使用分开的开始标记和结束标记。虽然对于网页的显示来说，对空元素添加结束标记，浏览器也能正确显示，但是我们需要的严谨的编码习惯。上一页返回14.3CSS中的常见错误虽然CSS的语法非常简单，但是在书写CSS代码的时候也会出现一些常见错误。CSS的错误也可以使用验证器来查找。下面我们来看看这些常见错误。(1)属性和属性值的分隔。在CSS中，属性和属性值是通过冒号分隔开来的，而在HTML代码中，属性和属性值是通过等号分隔的，所以在书写的时候要注意不要因为习惯HTML代码而将CSS代码写错。(2)分号的使用。在CSS代码中，每个声明结束后都应该有一个分号，不要多也不要少。想更清晰地检查分号的使用，最好的方法就是让每个声明都单独占一行，这样错误就更容易发现了。下一页返回14.3CSS中的常见错误(3)注意单位的使用。在有些声明中需要使用单位，在单位前面出现的是数值，数值和单位之间是不允许出现空格的。(4)属性和属性值的匹配。在使用属性和属性值的时候，要注意它们之间的匹配。(5)使用样式表时，不要丢掉了</style>结束标记。(6)建立正确的HTML文档指向CSS文件，而且保证URL地址正确。(7)使用选择器时应注意空格和符号的使用。(8)确认浏览器是否支持编写好的CSS代码，特别注意新的语法。(9)确认括号的配对。上一页返回14.4验证代码1.安装FirebugFirebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑,JavaScript控制台、网络状况监视器于一体，是开发JavaScript,CSS,HTML和Ajax的得力助手。Firebug的界面如图14-2所示。Firebug包含了7个标签:控制台HTML,CSS、脚本、DOM、网络、Cookies。2.HTML代码验证使用HTML验证器可以在浏览器解析文档结构之后对结构进行检查，将它与预期的元素嵌套进行比较，这可以帮助我们快速定位标记格式不正确、元素为闭合或者过早闭合等错误。下一页返回14.4验证代码HTML标签是Firebug中的第二个标签，它分两个视图，左边的视图可以查看HTML代码，右边的视图又分为4个子面板:样式、计算出的样式、布局和DOM。“代码视图”面板位于HTML标签的左边，它以层次结构展示HTML代码，而且将不同的关键字标以不同的颜色，相当人性化。它还允许我们随意地将元素进行折叠或展开，这样就很容易使我们快速掌握一个web页面的大致结构。“代码视图”面板还有一个相当不错的功能，就是可以对即时打开的web页面中的各种元素进行删除、增加、属性修改等操作，而且操作后的效果将立即在浏览器上展现出来，如图14-3所示。在Firebug中审查段落时，Firefox在遇到有错的代码时会将HTML按上一页下一页返回14.4验证代码照语法理解成其他的代码。Firefox浏览器在解析HTML时，会试着修复错误，并在显示页面时改变文档的底层结构。3.CSS代码验证Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。用户可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并可在当前页面中直接看到修改后的结果。如果总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看，如图14-4所示。上一页下一页返回14.4验证代码4.验证代码验证代码的步骤如下:(1)使用http;//htm15.validator.nu或http;//validator.w3.org对HTML进行检查。在http;//htm15.validator.nu中，将需要检查的URL粘贴到Address字段(如果没有发布到网络中，就选择FileUpload选项，也可以选择TextField，直接手动输入代码)，选择ShowSource选项，这样HTML源代码就会出现在验证器找到的错误的下方，有错误的HTML片段会突出显示，如图14-6所示。(2)修复标出来的HTML错误，保存修改，再将文件上传到服务器，重复步骤(1)中的操作。上一页返回14.5测试网页测试HTML页面的步骤如下。(1)按照验证代码的方式对HTML和CSS进行验证，对里面提出的问题作出相应修改。(2)在浏览器中打开需要测试的页面，检查整个页面，确保其和期望的一样。(3)在不关闭浏览器中页面的情况下，打开有关的HTML和CSS文档，作出相应修改并保存，然后刷新页面查看修改的结果。(4)重复步骤(2),(3)，直到达到预期结果为止。(5)在其他浏览器中重复步骤(2)~(4)，确认在其他浏览器中也能达到预期目标。(6)测试完毕。下一页返回14.5测试网页在测试的过程中，检查代码是否达到了预期目标主要考虑以下几点(1)格式是否和预期的一致;(2)链接的URL是否指向了正确的页面或资源;(3)CSS文件是否引用正确;(4)插入页面的图像能否正确显示。上一页返回14.6发布网站1.获得域名获得域名的步骤如下(1)首先查看一下域名注册商的信息(详见~w.internic.net/alpha.html)，首先看一下自己设计的域名是否可以用，另外也可以在服务商的网站上查询一下域名是否可用。(2)当找到一个合适的域名以后，接下来就是注册了，可以自己注册也可以通过服务商代为注册。不同域名注册商的价格是不一样的。(3)注册以后，就可以使用了。2.为网站寻找主机除非自己有服务器，一般都需要寻找为网站提供服务的服务商。在考虑服务商时，除了考虑价格问题，还应该考虑下面的问题:下一页返回14.6发布网站(1)提供使用的磁盘空间有多大。(2)允许每个月使用的数据传输量有多大。(3)当网站崩溃时是否有应急措施。(4)使用域名可以创建多少邮箱，可以提供的技术支持有哪些，应隔多久备份服务器上的数据。(5)是否提供Web分析报告，通过这些报告我们可以分析访问网站的情况。3.将文件传送至服务器(1)新建站点。(2)设置站点服务器。上一页返回14.7综合实例根据本章介绍的网站调试与发布的知识，完成如下步骤。具体操作步骤如下:(1)准备好需要进行调试和发布的