实训
第14章 网站的调试与发布
本章导读
有时编写好了全新的页面，却发现它们在浏览器中并没有像预期的那样显示，或者显示得并不完全，或者在有的浏览器中显示得很好，但是在其他浏览器中打开的时候却不一样。在HTML和CSS以及众多浏览器平台中，很容易产生这样一些问题。
在完成了网页并准备在网络中展示的时候，需要将这些页面传送到Web服务器上，才能使网页在公众网络中被访问。
本章列举了一些常用错误并解决这些错误，并讲解在解决了这些错误后如何将网页发布到网络上。
14.1 常见错误
浏览器的差异可能是由一些不明显的浏览器漏洞造成的，也可能是由使用新技术造成的，但是比这些更常见的则是由一些简单的问题造成的。现将检查这些常见错误的方法归纳如下：
（1）对代码进行验证，对代码语法的相关错误进行排查。
（2）确认需要测试的文件已经上传。
（3）确认上传文件的位置是正确的。
（4）确认输入的URL与需要测试的文件是对应的，如果查看的页面是从另一个页面中跳转过来的，就需要确认链接中的URL与页面的文件名和位置是完全匹配的。
（5）确认上传的文件已经保存过了。
（6）确认上传了所有的辅助文件，包括CSS文件、图像文件、音频文件以及视频文件。
（7）确认URL的大小写没有问题，确认文件名中没有使用空格。
（8）确认测试时禁用的功能是否已经重启。
（9）换个浏览器进行测试，确认浏览器是否有问题。
14.2 HTML中的常见错误
如果问题不是常见的一般问题，通常检查问题是否出在HTML中。下面介绍HTML中的常见错误。
1.输入错误
输入错误是很容易出现的，而且是比较难检查出来的，因为人们容易进入思维定式。使用HTML验证器可以查出这种错误。看看下面这段代码：
在上面例子中，并没有严重的语法错误，只是图像的元素标签拼写错误，即将img拼写成了igm，这些错误并不是很容易发现的，如果没有注意到这些错误，可以使用HTML验证器来帮助。HTML验证器可以很快发现这些输入错误，从而节省时间。
2.元素的嵌套
HTML代码由元素组成，元素的嵌套是非常容易出错的，需要特别注意。如果在上面的这段代码中在div元素中嵌套ul元素，就需要注意先使用＜div＞再使用＜ul＞，注意在使用＜/div＞之前需要确保＜/ul＞已经出现，不然会出现嵌套错误。
3.属性值引号的使用
当属性值内容里面需要用到引号的时候，那么引用属性值的时候使用引号就需要注意，当属性值是用双引号包围的时候，则属性值中间可以使用单引号；如果属性值本身包含双引号，则应使用字符引号，见以下代码：
4.元素的开始标签和结束标签
一般的元素都有开始标签和结束标签，使用的时候需要注意正确使用，不要对空元素使用分开的开始标签和结束标签。虽然对于网页的显示来说，对空元素添加结束标签，浏览器也能正确显示，但是需要的严谨的编码习惯，见以下代码：
虽然这样写浏览器可以正确显示，但是对于HTML验证器来说还是会将这个地方记为错误。
14.3 CSS中的常见错误
上一节介绍了HTML代码中的常见错误，本节介绍CSS中的常见错误。
虽然CSS的语法非常简单，但是在书写CSS代码的时候也会出现一些常见错误。CSS的错误可以使用CSS验证器来查找。下面看这些CSS中的常见错误。
（1）属性和属性值的分隔。
在CSS中，属性和属性值是通过冒号分隔的，而在HTML代码中，属性和属性值是通过等号分隔的，所以在书写的时候要注意不要因为习惯HTML代码而错写CSS代码。下面就是一个典型的CSS错误：
以上代码中等号的使用是完全错误的（虽然要改变用等号分隔属性和属性值的习惯是比较难的），代码修改如下：
属性和属性值之间应该使用冒号隔开，在冒号之前或之后添加额外的空格不会产生错误，也不会影响显示，但习惯上通常在冒号之后加上一个空格。
（2）分号的使用。
在CSS代码中，每个声明结束后都应该有一个分号，不要多也不要少。想更清晰地检查分号的使用，最好的方法就是让每个声明都单独使用一行，这样错误就更容易发现了。看以下代码：
在上面这段代码中，多写了一个分号，每个声明后面有且仅有一个分号，并且所有的声明在一行书写，这样的习惯并不好。代码修改如下：
（3）注意单位的使用。
在有些声明中需要使用单位，在单位前面出现的是数值，数值和单位之间是不允许出现空格的。看以下代码：
上面代码width宽度的设置中，数值和单位之间出现了空格，这样是错误的。代码修改如下：
（4）属性和属性值的匹配。
在使用属性和属性值的时候，要注意它们的匹配。例如text-align属性的取值只能是left、right、center、justify和inherit，则语句“text-align：top；”是无效的，因为top不是text-align属性可以取的值。
（5）使用样式表时，不要丢掉＜/style＞结束标签。
（6）建立正确的HTML文档指向CSS文件，而且URL地址正确。
（7）使用选择器时注意空格和符号的使用。
（8）确认浏览器是否支持编写的CSS代码，特别是新的语法。
（9）确认括号的配对。
14.4 验证代码
对于前面提到的常见错误，发现它们的一个重要方法就是使用验证器。HTML验证器可以对代码和语言规则进行比较，并将其发现的不一致的情况显示为错误或警告。它还可以提示语法错误，无效的元素、属性和属性值，以及错误的元素嵌套。但是HTML验证器并不能判断出语义上的问题，所以有关语义方面还是需要自己判断。CSS验证器的工作原理和HTML验证器的工作原理一致。
下面首先介绍如何使用HTML验证器。
1.安装Firebug
Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和AJAX的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果担心它占用太多系统资源，也可以方便地关闭这个插件，甚至针对特定的站点开启这个插件。
首先进入下载网址https：//addons.mozilla.org/zh-CN/firefox/search？q＝firebug＆cat＝all（确保之前已经安装了最新版的Firefox浏览器），然后单击“添加到Firefox”按钮。出现图14-1所示的对话框。
图14-1 安装Firebug
安装完成后，需要重新启动Firefox浏览器。
在安装好插件之后，在Firefox浏览器的“查看”菜单栏下将会出现“Firebug”菜单项，也可使用快捷键F12唤出Firebug插件。
Firebug界面如图14-2所示。
Firebug包含7个标签：控制台、HTML、CSS、脚本，DOM、网络、Cookies。
（1）“控制台”标签：用来显示各种日志信息，同时可以结合Firebug给定的API进行各种测试和跟踪。
（2）“HTML”标签：可以用来视察，编辑网页中的各种HTML元素。
（3）“CSS”标签：可以用来检查网页中和CSS有关的内容。
（4）“脚本”标签：可以设置断点调试JavaScript代码，也可以用来监控JavaScript代码。
（5）“DOM”标签：展示DOM树。
（6）“网络”标签：可以观察从服务器端下载的js文件、图片、Flash等资源的大小，下载所花费的时间等，这也是一个非常有用的功能。
图14-2 Firebug界面
（7）“Cookies”标签：用来调整和修改Cookies。
2.HTML代码验证
使用HTML验证器可以在浏览器解析文档结构之后对结构进行检查，将它与预期的元素嵌套进行比较，可以帮助快速定位标签格式不正确、元素为闭合或者过早闭合等错误。
“HTML”标签是Firebug中的第二个标签。它分两个视图：左边的视图可以查看HTML代码，右边的视图又分为4个子面板——样式、计算出的样式、布局和DOM。灵活运用“HTML”标签中的各种功能，很容易了解一个特定网页的组织结构，包括它的CSS文件，js文件，图片等。
“代码视图”面板位于“HTML”标签的左边，它以层次结构展示HTML代码，不同的关键字标以不同的颜色，相当人性化，而且还允许人们随意将元素进行折叠或展开，这样就很容易使人们快速掌握一个Web页面的大致结构。“代码视图”面板还有一个相当不错的功能，就是可以对即时打开的Web页面中的各种元素进行删除、增加、属性修改等操作，操作后的效果立即在浏览器上展现出来，如图14-3所示。
图14-3 “HTML”标签
在Firebug中审查段落时，Firefox在遇到有错的代码时会将HTML按照语法理解成其他代码，如下面的代码所示：
上面代码中的中＜h1＞和＜p＞嵌套不对，Firefox将它理解成：
Firefox浏览器在解析HTML时，会试着修复错误，并在显示页面时改变文档的底层结构。
3.CSS代码验证
Firebug的CSS验证器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。可以在CSS查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。
一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个像素。这时候用CSS调试工具可以轻易地编辑它的位置——可以根据需要随意挪动像素。
如果总记不住常用的样式表有哪些值，可以尝试在CSS验证器中选中一个样式表属性，然后用上、下方向键来改变它的值，它会把可能的值逐个遍历显示，如图14-4所示。
图14-4 CSS验证器
使用Firebug对代码“＜p＞background属性设置背景色，color属性设置字体颜色，即前景色。＜/p＞”进行审查，应用于该元素的CSS显示在右侧。color设置有两个，一个是p元素中的设置，一个是body元素中的设置，其中body元素中的设置被覆盖了。可以跟踪查找样式没有按照预期进行的原因，也可以在CSS中对样式进行编辑，以达到预期的效果，如图14-5所示。
将页面放到公共网站上之前，不需要确认它们已通过验证器的检查。实际上，大多数网站都有一些错误。浏览器可以处理很多类型的错误，从而以它们能实现的最佳方式将页面显示出来。所以即使页面在验证时有错误也可能看不出来。不过，有时错误会直接影响页面的显示，这时就应该使用验证器尽可能排除代码中的错误。下面介绍验证代码的步骤。
4.验证代码
验证代码的步骤如下：
（1）使用http：//html5.validator.nu或http：//validator.w3.org对HTML进行检查。
在http：//html5.validator.nu中，将需要检查的URL粘贴到Address字段（如果没有发布到网络中，就选择“File Upload”选项。也可以选择“Text Field”选项，直接手动输入代码），选择“Show Source”选项，这样HTML源代码就会出现在验证器找到的错误的下方，有错误的HTML片段会突出显示，如图14-6所示。
图14-5 CSS代码错误
图14-6 HTML代码验证
输入上一实例中的错误代码，验证中在第10行发现了错误。
也可以使用http：//validator.w3.org对代码进行验证，W3C的错误消息更易读懂，但不会对HTML源代码的错误部分进行突出显示。
（2）修复标出来的HTML错误，保存修改，再将文件上传到服务器，重复步骤（1）中的操作。
14.5 测试网页
即使代码通过了验证，页面也仍然有可能不像预期那样工作，或者在某些浏览器中可以正常工作，在另一些浏览器中却存在问题。在不同的浏览器和平台对页面进行测试其实是很重要的。测试HTML页面的步骤如下：
（1）按照验证代码的方式对HTML和CSS进行验证，对提出的问题作出相应修改。
（2）在浏览器中打开需要测试的页面，确保整个页面和期望的一样。
（3）在不关闭浏览器中页面的情况下，打开有关的HTML和CSS文档，作出相应修改并保存，然后刷新页面查看修改的结果。
（4）重复步骤（2）～（3），直到实现预期结果。
（5）在其他浏览器中重复步骤（2）～（4）的步骤，确认在其他浏览器中也能达到预期目标。
（6）测试完毕。
在测试的过程中，检查是否达到了预期目标主要考虑以下几点：
①格式是否和预期一致；
②链接的URL是否指向了正确的页面或资源；
③CSS文件是否引用正确；
④插入页面的图像能否正确显示。
网页的测试是在其上传到服务器之前最后的步骤，推荐在上传之前对网站的本地文件进行完全测试。上传之后针对服务器上的版本对网站再次进行完全测试，以保证浏览者看到的版本显示没有问题。代码如下：
这个HTML文件通过了验证，但是它的显示效果和预期是不同的。这时检查代码发现问题指向CSS文件的链接，CSS文件的文件名为“style.css”，但是引用的时候却写成了“styles.css”，所以浏览器根本无法找到相应的CSS文档，所以预期的显示效果才没有出现，修改后页面会按照CSS文件的格式显示。正确效果如图14-7所示。
图14-7 正确效果
14.6 发布网站
当完成了整个网站以后，最后一个步骤就是将页面上传到Web服务器，以提供给人们访问。有关上传的方式可以联系Web服务商，它们会提供相应上传文件的说明。发布网站的步骤如下。
1.获得域名
要想人们在网络上能访问到网站，需要为网站关联一个域名，并找到一个Web主机存放的网站，让任何人都可以通过在浏览器中输入这个域名去访问网站。当然如果考虑换一个Web供应商，或者原来选择的主机提供商倒闭了，那么应该让域名指向另一个Web主机的服务器，而原有的URL保持不变。
获得域名的步骤如下：
（1）查看一下域名注册商的信息（详见www.internic.net/alpha.html），看自己设计的域名是否可以用。另外也可以在服务商的网站上查询域名是否可用。
（2）找到一个合适的域名以后即可注册。可以自己注册，也可以通过服务商代为注册。当然不同域名注册商的价格是不一样的。
（3）注册好域名以后，就可以使用。
2.为网站寻找主机
除非自己有服务器，一般都需要寻找为网站提供服务的服务商。在考虑服务商时，除了考虑价格问题，还应该考虑以下问题：
（1）提供使用的磁盘空间有多大。虽然HTML文件本身占用的空间很小，但是里面插入的图像、音频和视频占用的空间是非常大的。
（2）允许每个月使用的数据传输量有多大。当人们访问网站时，会发送给访问者HTML、CSS、图像以及其他的一些多媒体文件，如果访问者从网站上访问大量的文件，这时就需要比较大的数据传输量。
（3）当网站崩溃时是否有应急措施。当网站访问量增加以后会增加网站崩溃的可能性，这时需要比较好的措施去解决。
（4）使用域名可以创建多少邮箱，可以提供的技术支持有哪些，备份服务器上数据的频率是多少。
（5）是否提供Web分析报告。通过Web分析报告可以分析访问网站的情况。
3.将文件传送至服务器
为了将文件传送至服务器，最简单的方法就是使用FTP上传。可以使用Dreamweaver完成这个任务，当然很多其他的软件也包含FTP功能，也可以在其他编辑器中发布页面。
1）新建站点
选择“站点”→“新建站点”命令，弹出“站点设置对象”对话框，在该对话框的“站点名称”文本框中输入站点的名称，单击“本地站点文件夹”文本框后的“浏览”按钮，弹出“选择根文件夹”对话框，浏览本地站点的位置。单击“选择”按钮，确定本地站点的位置，单击“保存”按钮，即可完成本地站点的创建，如图14-8所示。
2）设置站点服务器
在“站点设置对象”对话框中单击“服务器”选项，可以切换到“服务器”选项卡，在该选项卡中可以指定远程服务器和测试服务器，单击“添加服务器”按钮，弹出“服务器设置”窗口，如图14-9所示。
在“服务器名称”文本框中可以指定服务器的名称。在“FTP地址”文本框中输入FTP服务器的地址。端口21是接收FTP连接的默认端口，可以通过编辑修改。分别在“用户名”和“密码”文本框中输入用于连接到FTP服务器的用户名和密码。完成“FTP地址”“用户名”和“密码”选项的设置后，可以通过“测试”按钮测试与FTP服务器的连接。在“根目录”文本框中输入远程服务器上用于存储站点文件的目录。在“Web URL”文本框中输入Web站点的URL地址，可以使用Web URL创建站点根目录相对链接。在“高级设置”选项卡中，如果希望自动同步本地站点和远程服务器上的文件，应该选择“维护同步信息”复选框。如果希望在本地保存文件，Dreamweaver自动将该文件上传到远程服务器站点，可以选择“保存时自动将文件上传到服务器”复选框。
图14-8 新建站点
图14-9 设置站点服务器
14.7 综合实例
根据本章介绍的网站调试与发布知识，调试和发布网站。
具体操作步骤如下：
（1）准备好需要进行调试和发布的网站——博客，如图14-10所示。
图14-10 博客首页
（2）使用Firebug对页面中的HTML和CSS代码进行验证，直到显示没有错误为止。
（3）使用Dreamweaver检查浏览器的兼容性。在Dreamweaver中打开博客首页，执行“窗口”→“结果”→“浏览器兼容性”命令，打开“浏览器兼容性”面板。单击“浏览器兼容性”面板上方的绿色三角按钮，弹出下拉菜单，在弹出的下拉菜单中选择“设置”命令，选择不同的浏览器版本，然后选择“检查浏览器兼容性”命令，如图14-11所示。
图14-11 检查浏览器兼容性
（4）测试完成后，设置站点的远程服务器信息，连接到远程服务器，上传网站。
测试后的代码如下：
要点回顾
本章介绍了网页中的常见错误、HTML代码错误以及CSS代码错误。了解这些常见错误以后，应针对这些常见错误进行验证、测试。测试后确认没有问题就可以将网页上传到Web服务器，形成真正的网站，以供世界各地的用户浏览，这就是站点上传。完成了这些操作一个网站的构建才算真正完成。
习题三
一、选择题
1.可以通过（ ）上传网站。
A.Dreamweaver的站点窗口 B.记事本
C.浏览器 D.Flash
2.文件传输协议的英文缩写是（ ）。
A.FTP B.TFTP C.FDDI D.TCP/IP
3.下列选项中，（ ）不是Dreamweaver中链接检查器的作用（ ）。
A.更新链接 B.查找断开的链接
C.修复断开的链接 D.添加新链接
4.在向服务器上传网站内容的过程中，（ ）不是设置FTP服务器的参数。
A.FTP主机地址 B.FTP主机目录
C.FTP端口设置 D.FTP登录的用户名和密码
二、填空题
1.在使用FTP方式发布网页时，不但可以批量地上传文件，而且可以将整个________上传。
2.开始使用Dreamweaver时必须先定义一个站点，至少设置一个本地文件夹。选择“站点”→“________”命令可以打开“站点设置对象”对话框。
实训
“个人简历”网页如图14-12所示，通过代码验证和测试修改其中的错误。
1.训练要点
（1）HTML的常见一般错误；
（2）HTML代码错误；
图14-12 “个人简历”网页
（3）CSS代码错误；
（4）网页的验证；
（5）网页的测试。
2.操作提示
（1）查找页面中是否有常规错误；
（2）对页面中的HTML和CSS代码进行验证；
（3）验证页面的浏览器兼容性。