网站设计疑难解答
Zac
Web360编辑
有很多朋友反映，他们在上传网站后，或在不同地方浏览自己的网站时，会出现各种各样的错误：字体不能展示或显示错乱、图片显示不出来。
这节课我们将介绍，一些常见的网站设计疑难解答。
我的字体在其他人的电脑上显示错乱！
使用某些特殊字体的方法（超出了本课的范围），首先你要在本地电脑，安装该字体的文件，才能在网页上显示出来。同理，其他人的电脑，也安装了这个字体文件才能显示。
值得庆幸的是，一些标准的字体，几乎在所有的操作系统里已经预装，你可以安心的使用以下这些字体，并且确保你的用户都能够看到：
Arial,ArialBlack,CourierNew,ComicSans,Impact,Georgia,Verdana,TimesNewRoman,Trebuchet MS
如果你要尝试一些特殊字体，可以设定替代字体，防止你的用户不能显示出来。
例如：
h1 {font-family: Futura, Arial, Helvetica, Verdana, Sans-serif;}
这是一个显示字体列表，首选字体是Futura，但是如果访问者没有Futura字体，那么下一个选择是Arial，其次是Helvetica，Verdana，最后的字体选项是sans-serif。
如果你执意要使用特殊字体，并且确保所有用户都能看到，可以把这段文字制作成一张图片插入到内容里。
上传网站后但是图片不能展示！
如果你在本地计算机上预览网页（最好使用浏览器，而不是HTML编辑器的预览页面）的图片可以正常显示，那么还要检查以下两个步骤。
1. 图片没有上传成功，或者上传到错误的地方。
在上传网页的同时，还需要上传所有网页相关的图片和文件。如果你确定已经上传了图片，还要检查图片的地址是否正确，如下所示：
http://www.yourdomain.com/yourimage.jpg
如果图片没有保存在相应的文件夹中，重新上传。
2. 插入图片时，引用的是绝对路径不是相对路径。
如果你使用的诸如Dreamweaver、Frontpage或Nvu之类的WYSIWYG编辑工具，编辑图片时，软件会引用图片的完整路径，而不是相对路径。
正确的引用地址是：
<img src =“/img/yourimage.jpg”>
错误的引用地址是：
<img decoding="async" src="C:\\Documents and settings\Owner’s documents\Desktop\website\img\yourimage.jpg">
很显然，这个地址在你的网站上不存在，所以无法在网页中显示。
在网页编辑软件里，检查每一个图片引用地址，如果网页源代码里包含了类似：
<img decoding="async" src="C:\\Documents and settings\Owner’s documents\Desktop">
这样的地址。你可以手动编辑这些地址，将绝对路径改为相对路径。
上传了网站但是通过域名无法访问！
首先要检查的是，你的网站文件是否上传到正确的Web服务器文件夹。正确的Web服务器文件夹是“www”，“httpdocs”或“public_html”这样的文件名字，只有上传到这个文件夹，你的网站才能正常访问。
第二个要检查的是，网站的索引页-“index.html”或“index.php”。当你输入域名时，访问的一个页面被称为索引页，常用的文件名为“index.html”或“index.php”。如果你在设计网站时，命名的主页是其它页面，比如”somethingelse.html”，只有在浏览器地址栏，手动输入完整网址才能访问。
www.example.com/somethingelse.html
所以，你要确定“index.html”页面，才能正常访问网站。
为什么我添加的CSS样式表在一个网页生效，在另一个网页无法生效？
如果CSS样式表在一个网页生效，但在其它网页无法生效，原因可能是，没有正确的引用相关的文件。通常情况下，我们编辑一个网页使它正常工作，然后复制这个页面的代码，到第二个网页，但是第二个网页引用的文件夹/目录，仍然是以前的路径。
解决这个问题的方法是，使用网页编辑软件，重新插入图片或者重新编辑CSS文件。
或者你可以编辑HTML源文件，插入或删除图片CSS文件目录前的点和斜杠。
- ../表示“上一个目录”
- /（没有点的斜线）表示“转到网站的顶部/根目录
- 没有任何点或斜杠的文件名，意味着此文件夹/文件与此HTML文档在同一文件夹中。
例如：
- =“../ style.css”表示“上升一个目录，才会发现style.css”
- =“../ css / style.css”表示“上升一个目录，才会找到CSS目录，进入目录后会发现style.css”
- =“../../ css / style.css”表示“上升两个目录，然后进入到CSS目录中查找style.css”
- =“/ style.css”表示“跳转到网站的根目录，才能找到style.css文件。”
- =“/ images / icons / delete.gif”表示“跳转到网站根目录，然后进入图像文件夹，然后进入图标文件夹，然后找到delete.gif图像片。”
我的网页在不同电脑上显示错乱 – Firefox、Internet Explorer、Chrome、Safari、Opera
理想的情况是，无论你使用哪个浏览器或操作系统，所有网页都看起来一样。但不幸的是，在一个浏览器上看起来完美无缺的网页，在另一台机器上看起来是错乱的。
通过以下几个步骤来避免这个问题：
1）使用DOCTYPE声明
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。除非你的HTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。也就是说，如果没有这个DOCTYPE声明，将会导致CSS失效。特别是没有声明或声明不正确，在标准浏览器下，更是不能正常显示。
DOCTYPE声明
开始制作符合标准的站点，第一件事情就是，声明符合自己需要的DOCTYPE。
查看很多使用HTML标准开发的网站，第一行就是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，会发现同样的代码。
而另一些符合标准的站点的代码则如下：
<!doctype html>
那么这些代码有什么含义？一定要放置吗？
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档规则，浏览器根据你定义的DTD来解释，你页面的标识，并展现出来。
2）使用跨平台HTML编辑软件
如果你使用的是古董般的HTML编辑软件，可能会发现，它生成的不是标准的HTML代码。 特别是微软的FrontPage软件，生成的是只有IE浏览器才能显示的HTML，在任何其它浏览器中都不起作用。
如果你为页面声明了doctype，那么你应该通过HTML验证器，检查自己的页面，发现是否有无效的标记。 可以使用W3C验证器服务：http://validator.w3.org/，该网站会“验证”你的网站，并提供修复HTML的建议。
课程总结
在这节课中，我们解答了一些困扰网页设计者的常见问题。
- 在不同浏览器中，显示不正确的字体
- 图片不显示
- 上传网站后无法访问
- CSS样式表在某些网页显示，在其他网页不显示
- 网页在不同的电脑上显示错乱