九、创建拼贴画和画廊
静态拼贴和图库是显示多幅图像的流行方式(除了在第二章中描述的翻转图库)。拼贴画更具装饰性，通常没有标题。画廊图像通常需要标题；这些可以使用 CSS 或者使用新的 HTML5 <figure>标签来添加。然而，最后一种方法需要使用一些 JavaScript 来使 IE 7 和 IE 8 能够理解<figure>标签。
在 1998 年推出 CSS 之前，图片组排列在一个表格中。这导致了大量的 HTML 标记。表格现在已经被弃用，CSS 被用来轻松地创建图片的行和列，而 HTML 标记要少得多。网页设计者自然倾向于立即想到代码或图形软件来创建拼贴画。一些低技术含量的方法是可用的，它们在某些场合是有用的。本章从其中的两种方法开始。
制作一个纸糊拼贴画，然后扫描它
一些客户给了我一堆从他们的贸易小册子上剪下的东西，并让我用它们做一个拼贴画放在他们的主页上。
这可能会相当混乱，因为它涉及到纸、剪刀和浆糊。与其他布局相当死板的技术相比，这种方法允许以有趣的方式排列图像。
当混乱的部分完成后，剪贴拼贴被扫描，生成的图像保存在你的网站文件夹中。使用图像处理包用颜色填充空白的角落空间，以匹配您的网页的背景颜色。或者，您可以将其保存为带有透明背景的.gif或.png文件。
使用文字处理器
客户有时会在文字处理器上设计拼贴画，然后把文件交给我。我可以向他们索要原始图片，然后根据这些图片创作拼贴画，但他们可能会感到不快，因为这暗示着他们的作品不够好。
文字处理器似乎不太可能是制作拼贴画的方式；但是，如果您熟悉在页面上插入和排列图像，这个过程会很容易。尽可能避免使用桌子；但是如果您应该使用表格，请在边框和底纹选项中选择无。
图 9-1 说明了这样一个事实，即使用文字处理器创建的拼贴画不必局限于一个矩形。本章中使用的教堂照片由威廉·卢埃林善意许可。
***图 9-1。*用微软 Word 制作的拼贴画
文字处理器方法如下:
- 将图像插入文字处理文档，并将其排列成拼贴画。
- 使用 Shift+单击选择图片的组。
- 将该组复制并粘贴到 Microsoft Paint 或其他画图程序中。
- 将群组保存为
.tif文件，并根据需要进行编辑。 - 将其导出为压缩的
.jpg文件或.png文件。
这在白色背景下效果最好。如果放在纯色背景上，在将拼贴画插入网页之前，必须用背景色填充构成图 9-1 中拼贴画四个角的矩形空间。
你可以下载一个 MS Word 拼贴模板，但是我个人觉得这些模板限制太多了一点。试试[www.microsoft.com/canada/home/memories-and-crafts/articles/-photo-collage.aspx](http://www.microsoft.com/canada/home/memories-and-crafts/articles/create-a-digital-photo-collage.aspx)的模板。
使用 CSS 在页面上定位不同的图像
可以使用 HTML 和 CSS 构建一个拼贴来定位图像(见图 9-2 )。
***图 9-2。*图像间有小缝隙的拼贴画
大多数拼贴软件只会产生一个长方形的拼贴。要制作出像图 9-2 那样的布局，最好的方法是使用 CSS2 和一些<div>(见清单 9-2a 和 9-2b )。这个项目有小间隙，一些业主更喜欢这样，因为每个图像都被清晰地定义。
清单 9-2a 。创建一个图像之间的默认间隙拼贴(collage-churches-gaps.html)
`<!doctype html>
**
**
除了 Opera 之外，所有主要浏览器中的图像排列良好且一致；在 Opera 中，图像的下一行与上一行重叠大约三个像素。注意换行<br>；插入它是为了将两个图像向下推，以创建第二行图像。
清单 9-2b。【collage-churches-gaps.html】清单 9-2a的 CSS 样式表
body { width:960px; min-width:780px; margin:auto; } img { border:0; margin:0; padding:0; } #container { text-align:center; margin:10px auto 0 auto; } #collage { margin:0 auto 0 auto; text-align:center; }
消除差距
尽管没有边界或空白，但在图 9-2 的中，每幅图像之间都有两个像素的间隙。一些客户更喜欢这样，但是那些希望图片相互对接的客户怎么办呢？在 IE 6、IE 7 和 IE 8 中，以及除 Opera 之外的所有其他浏览器中，使用负边距可以很好地缩小差距。下一个项目，清单 9-3 ，展示了使用负边距作为一种精确定位图像的方式，从而消除了空白。
图 9-3 显示了同样的拼贴画，通过使用 CSS 标记来闭合缝隙。
***图 9-3。*使用负边距消除图像之间的间隙
这链接到一个不同的样式表(churches-style2.css)，它包含闭合间隙的负边距(以粗体显示)。标记还包含一个 IE 条件(见清单 9-3a )。
清单 9-3 a .使用负边距消除间隙(collage-churches.html)
`<!doctype html>
**
**
***清单 9-3b。*清单 9-3a 的样式表(churches-style2.css)
`/position body and table at horizontal centre of screen/
body {width:960px; font-family:“times new roman”; font-size:medium; 
color:navy; margin:auto; min-width:780px;
}
img { border:0; margin:0; padding:0;
}
#container { text-align:center; margin:10px auto 0 auto;
}
#collage { margin:0 auto 0 auto; text-align:center;
}
#collage img { margin-top: -3px; margin-bottom:-2px; margin-left:-2px; 
margin-right:-2px;
}`
在 IE 6、IE 7 和 IE 8 中，图像的底部行现在与顶部行重叠一个像素，因此 IE 条件位于 HTML5 标记的头部。IE 的条件样式表是collage-ie.css，它只包含一行，如下所示:
#collage img { margin:-2px; }
IE 6、IE 7、IE 8、Mozilla Firefox、Safari 和 Chrome 现在可以无重叠地对接在一起。在 Opera 中，底行与顶行重叠三个像素。因为 Opera 在浏览器市场的份额非常小，所以这个解决方案是一个合理的妥协。
合并图像
一个客户可能会要求我模糊单个图像的边缘，以制作一幅图片相互融合的拼贴画。我觉得这给人一种整体混乱的感觉，但客户永远是对的。花几个小时修饰边缘并试图重叠它们不是我的乐趣所在，尤其是最终结果可能会让客户失望。如果客户坚持合并图像，有三种解决方案:
- 如果客户希望使用其销售手册中的合并拼贴画，扫描手册图像并在网页上使用。
- 用纸粘贴，然后扫描结果。然而，这看起来并不专业；示例如图图 9-4 和图 9-5 所示。
- 使用专有软件。
***图 9-4。*裁剪出比最终图像应该大的图像。把它们大致摆好。
如图 9-4 所示，在边缘重叠的地方，将其中一个图像的边缘切割成弯曲的形状或制作一个锯齿边缘。将所有图像粘贴在一起，扫描组装好的拼贴画。然后，在绘画程序中使用克隆画笔(或模糊工具)，柔化锯齿或曲线的边缘。
最终结果应该类似于图 9-5 。
***图 9-5。*使用纸张、粘贴和扫描合并图像
图 9-5 是一个糟糕的例子，因为它有复杂的图像和花哨的颜色。如果你使用不那么杂乱的照片，选择柔和的颜色，合并后的图像就不会那么杂乱。
使用专有软件
一些绘画/照片处理程序允许将几幅图像合并成一幅大图像；然而，我发现这个过程比 MS Word 方法或 CSS 方法更费时，也更受限制。
我在本节中介绍的程序并不直观，所以请准备好花一些时间来探索它们。所有的程序产生一个矩形拼贴画。如果您需要像图 9-3 、 9-4 和 9-5 这样的非矩形图像，请使用 MS Word 方法或 CSS 方法，放弃模糊邻接区域的所有希望。
微软贴牌
微软自动拼贴程序产生类似于图 9-6 所示的拼贴画。对于 Windows XP，Vista 和 Windows 7，30 天免费试用版是有用的，但它是带水印的。售价 20 美元(英国 18 英镑)。
***图 9-6。*使用微软自动拼贴的拼贴画
该程序适合拼贴风格的横幅标题，但该软件有以下两个缺点:
- 拼贴画中使用的最少图片数量是七张。对于打印的拼贴画来说，这可能是可以接受的，但是在电脑屏幕上，超过六张图片看起来就像蔬菜店里的爆炸。
- 放置照片需要大量的反复试验。
要下载 Microsoft AutoCollage，请转到[explore.live.com/windows-live-photo-gallery](http://explore.live.com/windows-live-photo-gallery)。选择一种语言，然后单击“立即下载”按钮。双击下载的文件wlsetup-web.exe安装程序。打开程序，在菜单栏的右侧找到标有 Extras 的项目。单击向下的小箭头并选择自动充值 2008。将打开一个网页；单击立即下载。在左侧面板上，单击下载 30 天试用版。主页上的一个视频解释了如何使用该软件，但评论不是很清晰。
提示在使用任何这些程序或项目之前，准备好将图像的副本放在一个新的文件夹中，这样你就可以很容易地找到它们。
形状拼贴
形状拼贴的免费试用版有局限性，但您可能希望研究它。如果您掌握了试用版并发现它很有用，则可以以合理的价格获得完整版。网站位于[www.shapecollage.com](http://www.shapecollage.com)。
提示Shape Collage 的免费试用版水印严重。在撰写本文时，无水印的 Pro 版本价格约为 75 美元。形状拼贴也适用于 iPhone 和 iPad。
Picasa 3.0
Picasa 3.0 是制作各种拼贴格式的免费软件；但是它不支持如图图 9-6 所示的合并图片。这个程序的工具栏很不寻常，因为它位于屏幕的底部。在工具栏上，您可以找到拼贴图标。
Picasa 最大的秘密是如何保存完成的拼贴画。奇怪的是，你不用保存图像。当您单击创建拼贴时，它会自动将其保存在 Picasa 项目文件夹中。Picasa 3.0 只为偶数张照片制作拼贴画，完成的拼贴画始终是一个长方形。
其他资源
以下程序提供了类似的功能:
- Photo visit (
[www.photovisi.com](http://www.photovisi.com)): Free of charge. Some color changes may occur when using this program.- Smilebox (
[smilebox.com](http://smilebox.com)): Free of charge. Mute your speakers before the interview to avoid disco-style noise.- IFoxSoft photo collage
www.ifoxsoft.com): Free trial, then 26 dollars (23.50 pounds).- Phoix (
www.photomix.com): Free trial, then 29 dollars (26 UK).- Picture collage maker (
www.picturecollagesoftware.com): Free trial, then 30 dollars (27 UK).
使用图形程序创建拼贴画
大多数图形包可以创建一个拼贴画，但是很难找到说明，这个过程有时会比使用 HTML5 或 CSS 花费更长的时间(例如清单 9-3a 和 ?? b)。然而，更微妙的效果往往可以通过使用图形包来实现；图像可以移动到其他图像的后面或前面，允许重叠。此外，通过降低每层的不透明度，重叠的图像可以相互融合，并且每个图像可以具有模糊的边缘以增强融合。下一个项目告诉你如何用 GIMP，一个免费的图形程序制作基本的拼贴画。最终结果如图图 9-7 所示。
***图 9-7。*用 GIMP 创建的拼贴画
用 GIMP 创建拼贴画
对于这个项目，准备好图片，把它们放在一个新的文件夹里，这样你就可以很容易地找到它们。对于图 9-7 ，这五张图片的尺寸被调整为 200 像素宽。顶行中的三幅图片将给出 600 像素的水平总数。因此，拼贴需要一个至少 600 像素宽(3 × 200)和大约 400 像素高(2 × 200)的背景层。注意，在 GIMP 中,“单词对话”是按照欧洲的方式拼写的。这些阶段如下:
- 打开 GIMP，点击 Windows
可停靠对话框
图层。这将把层对话面板放在屏幕上。点击文件
新建。 - 在下一个对话框中，单击横向图标，选择 640 像素宽× 400 像素高，然后单击确定。在工具箱面板上，单击交叉的双箭头选择“移动”。
- 在菜单上，单击文件
打开
作为新层打开。导航到文件夹，按住 Ctrl 键选择图像，同时单击所有图像。然后点击打开按钮，自动将它们全部复制到新图层。 - 现在你会看到层对话框面板中列出的层。第一幅图像将出现在图像窗口中。您可以将图像移动到窗格的左侧和顶部。单击“层”对话框中的下一层。一个虚线框将出现在第一个图像的顶部。向右滑动虚线矩形，您将看到下一个图像出现。
- 点击图层对话框中的下一个图层，将生成的虚线矩形从上一个图像移开。现在，您将在顶行看到三个可见图像。对剩下的两个图像重复此操作，并将它们移动到顶行下面的位置。
- 从现在开始，要滑动图像，首先你需要在图层对话框面板中点击它的图层。您将能够滑动它们，并选择是重叠它们还是保持它们彼此相邻。如果它们重叠，并且您希望切换重叠的图像，使其位于另一个图像之上，请在“层”对话框中单击该图像的层。在“层”对话框中，单击绿色向上箭头(或绿色向下箭头，如果您希望将其移动到另一个图像下方)。
- 你现在可以保存拼贴画了。在另存为对话框面板中点击文件
另存为，在面板顶部输入文件名。一定要给它加上一个后缀，比如.png。 - 导航到要存储拼贴画的文件夹，然后单击“保存”按钮。将出现一个导出对话框；确保选中“合并可见层”单选按钮。单击导出按钮。
- 在下一个 PNG 对话框中，接受默认设置并单击保存。
提示你可以在[www.gimp.org/downloads/](http://www.gimp.org/downloads/) *下载 GIMP 及其图解手册。*我还推荐阅读《GIMP 入门:从新手到专业人士》一书，作者是 Akkana Peck (Apress，2008)。
带标题的图片库
标题可以极大地增强图片库的效果；添加的文本可以提供关于图片的有用信息，并提供更有趣的网页。图 9-8 显示了一个设置为图库的页面。每张图片都有说明。尽管字幕很少，信息也不丰富，但它们起到了演示技术的作用。
图 9-8 。使用 CSS2 给图片添加标题的图片画廊
我要感谢肖像艺术家安·罗·琼斯，她友好地允许我使用她令人印象深刻的肖像照片，以及我为她设计的网页的一部分。在[www.annroejones-artist.co.uk](http://www.annroejones-artist.co.uk)访问她的网站。
第一章描述了 HTML5 是如何让图片拥有标题的，无论图片被移动到哪里，标题都会附着在图片上。这也可以通过在没有语义标签的 HTML5 页面中使用 CSS2 来实现，如下一个项目所示。这意味着 IE 7 和 IE 8 的用户可以查看图库，网页设计师不必将 Remy Sharp 的 JavaScript 片段插入代码，如清单 9-8a 所示。
提示此时，HTML5 纯粹主义者会惊恐地喘息。不要害怕。我在清单 9-8c 中展示了一个纯 HTML5 版本。无论是使用列表 9-8a 和列表 9-8b 还是列表 9-8c 和列表 9-8d ，拼贴画的外观都是一样的。
清单 9-8a。【portraits.html】显示带字幕的图片集(??)
`<!doctype html>
Ann L Roe SWAc
SOME PORTRAITS BY ANN ROE (JONES) SWAc
Professor Robert Clements OBE
***清单 9-8b。*清单 9-8a 的 CSS 样式表
body { min-width:980px; font-family:"times new roman"; font-size:medium;  color:black; margin:auto; max-width:1000px; } #hdr { width:100%; margin:auto; height:60px; text-align:center; } /* use display:inline to remove IE6 double margin bug from side menu*/ #leftcol { float:left; margin-left:0; width :135px; display:inline; padding:0; zoom:1; } img { border:none; } #midcol-portraits {margin-left:175px; margin-right:15px; zoom:1; } div .figure { float:left; margin-right:5px; display:inline; } .figure p { font-size:80%; height: 15px; margin:0 auto 0 auto; text-align:center;  width:200px; } #gallery img { margin-right:20px; margin-top:5px; } #aside { float:left; width:260px; } #ftr {clear:both; text-align:center; } /* set side menu position */ ul#menu { float:left; margin-left:0; width:120px; } /* set general side button styles */ li.btn { margin-bottom: 4px; text-align: center; list-style:none; } /* set general anchor styles */ li.btn a { display: block; color: white; background:#D20B0D; font-weight: bold;  text-decoration: none } /* specify state styles */ /* mouseout (default) */ li.btn a { background: #D20B0D; border: 4px outset #FFAAAA; } /* mouseover */ li.btn a:hover { background: maroon; border: 4px outset maroon; } /* onmousedown */ li.btn a:active { background:#AECBFF; border: 4px inset #AECBFF; } h1 {font-size:300%; font-weight:bold; color:#D20B0D; margin-top:0; margin-bottom:0;  font-family:"Calligraph421 BT"; font-style:italic; text-align:center; } span.swac {font-size:x-large; font-weight:bold; color:#D20B0D; font-style:italic;  text-align:center; } h3,h4 { margin-top:0; margin-bottom:0; } h2 {font-size:x-large; font-weight:bold; margin-top:0; margin-bottom:0; }
对于 HTML5 纯粹主义者来说
现在对于纯 HTML5。清单 9-8c 使用语义标签和 JavaScript 片段，允许 IE 8 用户查看页面。包含 HTML5 标题；这些使用标签<figure>和<figcaption>。
***清单 9-8c。*使用 HTML5 标签显示带有标题的图片画廊(肖像-html 5-标题)
`<!doctype html>
Ann L Roe SWAc
SOME PORTRAITS BY ANN ROE (JONES) SWAc
清单 9-8d 展示了 HTML5 图库的 CSS。
***清单 9-8d。*清单 9-8c 的 CSS 样式表
/*set attributes for consistent appearance in all browsers*/ p, ul, li, h1, h2 { margin:0; padding:0; } img { border:0; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } #wrapper{min-width:980px; font-family:"times new roman"; font-size:medium; color:black;  margin:auto; max-width:1000px; } header {width:100%; margin:auto; height:60px; text-align:center; } #midcol-portraits {margin-left:165px; margin-right:15px; zoom:1; } div .figure { float:left; margin-right:5px; display:inline; } .figure p { font-size:80%; height: 15px; margin:0 auto 0 auto; text-align:center; width:200px; } #gallery img { margin-right:20px; margin-top:5px; } aside { float:left; width:260px; } footer {clear:both; text-align:center;} /* set side menu position */ nav {float:left; margin-left:0; width :135px; padding:0; zoom:1;} /* set general side button styles */ nav ul li{ margin-bottom: 4px; text-align: center; list-style:none; } /* set general anchor styles */ nav ul li a { color: white; background:#D20B0D; font-weight: bold; text-decoration: none } /* specify state styles */ /* mouseout (default) */ nav li a { background: #D20B0D; border: 4px outset #FFAAAA; display:block; } /* mouseover */ nav li a:hover { background: maroon; border: 4px outset maroon;} /* onmousedown */ nav li a:active { background:#AECBFF; border: 4px inset #AECBFF } h1 {font-size:300%; font-weight:bold; color:#D20B0D; margin-top:0; margin-bottom:0;  font-family:"Calligraph421 BT"; font-style:italic; text-align:center; } span.swac {font-size:x-large; font-weight:bold; color:#D20B0D;  font-family:"Calligraph421 BT"; font-style:italic; text-align:center; } h3,h4 { margin-top:0; margin-bottom:0;} h2 {font-size:x-large; font-weight:bold; margin-top:0; margin-bottom:0;}
总结
在这一章中，你发现了几种创建拼贴画的方法和两种制作带标题图片库的方法。你可能想探索给图库图片添加阴影的可能性，这是你在第八章中学到的技巧。或者也许你可以尝试在第二章中描述的翻转图库。现在，您有几种方法来呈现图像集合。
在下一章，你将学习如何在网站上添加 PayPal 支付系统。
十、添加 PayPal
支付商品和服务的 PayPal 系统非常受欢迎，非常安全，受到大多数用户的信任。自从 PayPal 增加了使用信用卡/借记卡的功能，这项服务蓬勃发展，现在它是最被接受的支付和接收付款、订阅或捐款的方法之一。
PayPal 支付系统可以很容易地集成到网页中，这样人们就可以支付商业网站上提供的商品和服务。起初，你可能会对建立一个 PayPal 账户感到紧张，因为你在和钱打交道，尤其是你可能在和你客户的钱打交道。然而，贝宝已经使这一过程，你可以很容易地回溯，甚至取消，并重新开始。你在 PayPal 表格中输入的几乎所有内容都可以在以后更改。
PayPal 是如何运作的？
PayPal 是银行吗？PayPal 虽然不是传统银行，但却是互联网银行。其实就是一家只做线上操作的银行；它没有分支。由于没有分支机构或分支人员，PayPal 可以为网站所有者和网站用户提供非常经济的现金处理服务。PayPal 甚至处理货币兑换，这在处理国际商务时非常有用。此外，通过 PayPal，商家可以接受多种形式的支付，包括所有主要的信用卡。
PayPal 对每笔交易收取少量费用。这只适用于网站所有者，不适用于客户。在撰写本文时，典型的收费是 0.32 美元(在英国是 0.20 美元)，外加 3%的交易成本。例如，如果你卖 16 美元(10 英镑)的东西，总费用可能是 0.80 美元(0.50 英镑)。这些费用现在可能已经过时了，但它们确实表明 PayPal 的费用非常实惠。此外，费用因国家、账户类型和交易而异；在美国，这一比例从总额的 1.9%到 2.9%不等，外加 0.30 美元。
货币兑换是要收费的。从小额的月销售额的 3.4%到超过 93，000 美元(55，000 英镑)的月销售额的 1.4%不等。
PayPal 从您的 PayPal 账户向您的个人银行账户转账时扣除非常少的费用。
好吧，PayPal 实际上是免费的，那么它是如何生存的呢？2.2 亿 PayPal 账户拥有者在 PayPal 账户中有存款。这些钱大部分是由付费客户存到那里的。这笔钱为贝宝赚取利息。此外，广告商向 PayPal 付费，让它偶尔向你发送广告。
要从您的 PayPal 帐户向您的个人银行帐户转账，您必须访问您的 PayPal 帐户，并告知 PayPal 要转账的金额(参见本章末尾的“管理 PayPal 帐户”一节)。
小心贝宝非常安全，但要提防声称来自贝宝的电子邮件。当 PayPal 给你发邮件时，它会注明你的全名，并且永远不会询问你的 PayPal 个人信息。伪造的 PayPal 电子邮件发送给“亲爱的会员”或“亲爱的 PayPal 会员”,它们是针对您的帐户信息的网络钓鱼。将伪造的电子邮件转发给spoof@paypal.com以帮助追踪这些罪犯。
设置 PayPal 账户
一旦你知道要寻找什么，一点常识将指导你安全地通过注册和配置步骤。此外，PayPal 在[www.paypal.com/help](https://www.paypal.com/help)有一个帮助中心网站。在[www.paypal.com/webapps/mpp/merchant](https://www.paypal.com/webapps/mpp/merchant)中简要描述了设置商业账户和下载支付按钮的步骤。在那里，您可以找到五种可供下载的支付按钮。对英国读者来说，最好的起点可能是[www.paypal-business.co.uk/pdf/website-payments-standard.pdf](https://www.paypal-business.co.uk/pdf/website-payments-standard.pdf)的一份 PDF 文档。
该过程假设您的客户需要一个商业帐户。仔细记下您输入的所有详细信息，包括商家帐户 ID。仔细地把细节归档，这样你就能很快很容易地找到它们。第一步是为网站所有者建立一个 PayPal 账户。本节将指导您完成这一过程。
-
美国读者应该去
[www.paypal.com/webapps/mpp/merchant](https://www.paypal.com/webapps/mpp/merchant)。 -
英国读者应该访问
[www.paypal.co.uk/uk](http://www.paypal.co.uk/uk)并点击注册按钮*。在主页上为您的企业选择 PayPal，然后点击开始按钮。* -
美国读者应该点击“开始”按钮。在下一个屏幕上，您可以升级；选择升级或单击“不，谢谢”按钮。
-
在下一个屏幕上，美国读者会看到对接下来三个步骤的解释。单击创建新帐户按钮。
-
在下一个屏幕上，美国和英国的读者都可以注册一个商业帐户。单击“开始”按钮。
-
在注册屏幕中单击相应的开始按钮后，您将进入另一个注册屏幕，再次显示三个步骤。在这里，您可以从下拉菜单中选择国家和语言，然后单击“创建新帐户”按钮。使用下拉列表选择业务类型。在接下来的三个步骤中，您将添加客户的初步信息以设置帐户，并确认客户的电子邮件地址。PayPal 将向您的客户发送一封包含简单说明的电子邮件。
-
On the next screen you will find a drop-down menu where you must choose a Payment Solution. No advice is provided by PayPal, but the choices are explained at the HomeBusinessWiz.com web site at
[www.homebusinesswiz.com/2010/04/paypal-business-accounts-standard-or-pro.html](http://www.homebusinesswiz.com/2010/04/paypal-business-accounts-standard-or-pro.html)网站建议您选择网站支付标准*。*使用这种支付解决方案，客户可以通过 PayPal 或借记卡/信用卡支付。当顾客付款时，他们来到 PayPal 托管的支付页面。标准付费方案是免费的，但专业方案有月租费。选择付款方式后，点击继续。
-
填写下一张表格，然后单击继续。提供所需信息的下一项以完成注册。您将收到一封给出最终指示的电子邮件。然后你将有一个贝宝帐户。
-
要链接到您的银行帐户，请访问您的 PayPal 帐户并设置您的个人银行信息。作为一种帐户验证方法，PayPal 会将少量资金存入您的银行帐户，然后要求您验证这笔钱是否已存入。
现在帐户设置好了，下一步就是登录帐户，调整客户的 PayPal 档案，以反映客户的偏好。
使用个人资料调整您客户的账户详情
档案是你微调客户的个人和付款细节。PayPal 帐户设置了默认的个人资料。您可能需要对此进行调整。例如，您可能希望添加增值税/销售税详细信息。要修改您的个人资料，请访问 PayPal 主页并登录您的帐户或您客户的帐户。
- 在蓝色标签行的正下方，找到 Profile 并单击它。
- 对于美国帐户，单击个人资料，然后找到销售税，并单击屏幕最右侧的更新链接。销售税选项允许您按州创建销售税，也可以按国家创建国际交易的销售税。单击添加新销售税，选择地区，然后输入销售税的百分比。使用美国的国际销售税选项，输入邮政编码并选择州。如果邮费也要缴纳销售税，请勾选标记为“将费率应用于邮费金额”的框。
- 在英国，查找 VAT，然后单击屏幕最右侧的更新链接。在下一个屏幕中，输入增值税的百分比。如果邮资也要缴纳增值税，请勾选标记为“将费率应用于邮资金额”的框。
- 单击黄色的继续按钮并注销。
现在您已经有了一个帐户并设置了客户端的个人资料偏好设置，您可以选择并下载安全支付按钮。
下载加密的支付宝按钮
曾经，流氓买家可以侵入贝宝支付按钮代码，输入降价信息。PayPal 提供了一种加密方法，但是非常复杂，无法编辑。现在 PayPal 有一个按钮加密程序，非常简单，账户持有人可以轻松编辑。按钮的代码现在安全地存放在 PayPal 网站上，而不是网页上。黑客们再也买不起这些价格了。如果你的网站有旧的、易受攻击的按钮，它们将需要被重新创建。
PayPal 提供两种下载托管安全按钮的方法:
- The new button is used to create a new website page.
- Add a new button to a web page where one or more buttons have been saved and hosted.
第一步:访问 PayPal 按钮工厂
要访问 PayPal 按钮工厂，请按照以下步骤操作:
- 访问
[www.paypal.co.uk](http://www.paypal.co.uk)(在英国)或[www.paypal.com](http://www.paypal.com)(在美国)。 - 登录您的 PayPal 帐户。
- 单击英国帐户中的个人资料。对于美国帐户，请转到商家服务选项卡和我的已保存按钮。
- 寻找 PayPal 按钮
管理我的支付按钮。单击最右侧的相关更新链接。 - 在下一个屏幕上，单击右侧相关项目框中的新建按钮。
- 在下一个屏幕上，从下拉菜单中选择一个按钮类型。当您选择一个按钮时，图像将出现在标题为“您的客户视图”的框中。按钮列表包括“立即购买”、“购物车”、“礼券”、“捐赠”、“订阅”、“自动结算”和“分期付款”。如果您单击“我应该选择哪个按钮”项，您将会看到每个按钮的插图以及对其用途的解释。请务必选择标题“商家帐户 ID”*下的“使用我的安全商家帐户 ID”。*这会屏蔽您客户的电子邮件地址，防止垃圾邮件发送者找到它。
- 在标有“自定义按钮”的框中，您可以修改按钮，甚至添加您自己的图像。
- 填写剩余的详细信息。当你感到满意时，点击创建按钮，然后你就可以将代码复制并粘贴到你的网页中。
如果您对按钮感到满意，您可以通过单击页面底部的 Create Button 为它生成 HTML 代码。
第二步:跟踪库存、利润和损失(可选)
你会在屏幕底部找到这个可选项目。它为按钮提供跟踪和库存选项。要使用此功能，请勾选标记为跟踪库存、利润和损失的框。
- You can now choose whether to track the inventory level by project or by option. In both cases, you must enter the previously entered project ID.
- For Inventory Quantity, enter the item quantity that you currently stock. If you select the inventory level option under “Reminder Quantity”, PayPal will send an e-mail to inform you that the product is out of stock.
您将被要求指定是否允许客户购买缺货的商品。如果您选择“是”，客户可以照常购买缺货商品。如果您选择“否”,他们将无法购买该商品。您可以选择将客户重定向到一个网页，通知他们该商品缺货；当用户单击“继续购物”时会出现这种情况。
在这个屏幕上，PayPal 还提供了一个报告系统来跟踪利润和损失。
第三步:定制按钮的高级功能
在此步骤中，您可以执行以下操作:
- Allow your customers to add messages to the order.
- Let you get the customer’s postal address.
- Set up a webpage for your customer to return after completing or canceling the checkout procedure.
- Experienced designers can add other advanced variables to buttons. Advanced variables provide many useful functions for more complicated ordering process, including sending information back to your website (if you want a special after-sales page).
复制并保存按钮
完成前面的步骤后，您可以单击页面底部的“创建”按钮。
代码出现在下一个窗口中。单击选择代码按钮。然后使用 Ctrl+C 将代码复制到内存中。或者，如果您希望进行一些更改，请单击“返回编辑此按钮”链接。
注意将每个按钮的代码粘贴到记事本等文本编辑器中。用容易识别的名称保存。这是一个安全预防措施，以防你弄乱了网页，不得不重新开始。你不会想要从头再下载所有按钮的麻烦。
在页面中嵌入 PayPal 按钮
提示我建议你先练习使用默认按钮。熟悉 PayPal 界面后，尝试更复杂的按钮。请记住，您可以通过创建按钮、嵌入按钮、然后删除按钮来练习。
嵌入 PayPal 按钮只需从 PayPal 网站下载生成的代码，并将其粘贴到您的页面上。
- 设计您的 PayPal 订单页面并保存。这将是一个基于您网站上其他页面样式的页面。留下空白区域，当你下载了 PayPal 按钮后，你将最终粘贴它们。
- 在“代码”视图中将页面加载到 web 设计程序中。然后将按钮代码复制并粘贴到页面代码中。
- 如果您有添加到购物车按钮，您还需要下载查看购物车按钮。选择它的代码并将其复制到网页 HTML。您可以在页面上添加第一个按钮后执行此操作，它将适用于该页面上所有后续添加的按钮。在一个页面上，您只需要一个查看购物车按钮。“查看购物车”按钮在您所在国家的界面上可能不太明显；它可能无法从主菜单中获得。在这种情况下，要创建一个查看购物车按钮，您需要在单击购物车按钮的 Create Button 之后转到代码页。您可以选择创建一个查看购物车按钮(代码窗口下面的第二个项目)。
注图 10-1 中的截图是离线创建的；因此，PayPal 按钮尚不可见。
图 10-1 。未连接到互联网的页面
PayPal 按钮在图 10-1 中不可见，因为它们是由 PayPal 动态加载的。在一个离线运行的所见即所得程序中，你的页面会出现如图 10-1 所示。当你上网时，按钮出现，如图图 10-2 所示。
图 10-2 。连接到互联网时的页面。这些按钮是由贝宝动态插入的。
我非常感谢艺术家安·罗·琼斯允许我使用图 10-1 和图 10-2 中的图片。这个网页可以在我为她设计制作的网站上看到
([www.annroejones-artist.co.uk](http://www.annroejones-artist.co.uk))。
注意出于安全原因，本例中的 PayPal 代码块被故意改动。下载的 PayPal 代码以粗体显示。
清单 10-1a 创建如图图 10-1 和图 10-2 所示的页面。该清单显示了粘贴到页面中的四个 PayPal 按钮。它们用粗体表示。第一个按钮是“查看购物车”按钮，接下来的三个是“添加到购物车”按钮。
清单 10-1a。用加密的贝宝按钮创建网页(【pay-cards.html】??)
`<!doctype html>
注意每个按钮的 PayPal 代码通常包含属性border="0" *。*这个边框最好用 CSS 标记去掉；因此，请从列表中删除边框属性，以便您的页面可以验证。
这个清单 10-1b 是清单 10-1a 的 CSS 样式表。它为图像和 PayPal 按钮创建框，而不使用废弃的表格。
***清单 10-1b。*清单 10-1a 的 CSS 样式表( pay-cards.css)
/*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } body {font-family:"times new roman"; font-size:medium; color:black;  background:white url('img/yellowgradient2.gif') repeat-x; } #container {min-width:960px; max-width:1100px; padding:0; margin:auto; } header {width:100%; margin:auto; height:60px; text-align:center; } nav { float:left; margin:0; width :125px; display:block; padding:0; border:0 zoom:1; } #rightcol {float:right; width:120px; text-align: left; display:inline; margin:0; border:0 } /* set general side button styles */ nav ul { margin-left:30px; padding-left:0;width:120px; list-style-type:none; } nav ul li { margin-bottom: 4px; text-align: center; } /* set general anchor styles */ nav li a { display: block; color: white; background:#D20B0D; font-weight: bold; text-align:center; } /* specify state styles. */ /* mouseout (default) */ nav li a { background: #D20B0D; border: 4px outset #FFAAAA; text-decoration: none; } /* mouseover */ nav li a:hover { background: maroon; border: 4px outset maroon; } /* onmousedown */ nav li a:active { background:#AECBFF; border: 4px inset #AECBFF } p.redarrow {text-align:center; padding-top: 250px; } .box { margin:0 150px 0 190px; padding:5px; text-align:center; border:1px solid black;  border-bottom:0; } .box-bottom { margin:0 150px 0 190px; padding:5px; text-align:center; border:1px solid black; } img { border:0; } footer {clear:both; text-align:center; } h1 {font-size:xx-large; color:red; margin-top:10px; margin-bottom:5px; text-align:center; } h2 {font-size:x-large; font-weight bold; margin-top:5px; margin-bottom:5px;  font-weight:bold; } span.tiny {text-align: center; font-family: Arial; font-size: xx-small; color: #000; } p {margin-top:5px; margin-bottom:5px; } p.cntr {text-align:center; } p.lft {text-align:left; }
添加捐赠按钮
捐赠按钮允许用户向您的组织捐赠。在这种情况下，用户指定他们希望捐赠的金额。按钮代码从 PayPal 网站下载；和“立即购买”按钮一样，它是加密的，完全安全。使用标题下给出的说明访问 PayPal 按钮工厂。遵循这些步骤，但是选择捐赠按钮*。填写表格，并确保勾选 PayPal 保存按钮旁边的方框(这将保护按钮免受欺诈性更改)。点击创建按钮。*
PayPal 捐款按钮代码将会出现；将它复制并粘贴到您的文本编辑器中，并用一个容易记住的名称保存它。然后将代码粘贴到您希望按钮出现的网页中。
提示使用相同的过程，可以下载订阅按钮并设置各种选项，如金额和续订日期。
安全捐赠按钮如图 10-3 所示。
图 10-3 。我的免费电脑帮助网站上的捐赠页面。贝宝捐款按钮是加密的，以防止黑客篡改。
对于图 10-3 ，PayPal 代码被下载并插入到 HTML 代码中。当在线查看该页面时，它会动态加载一个黄色按钮以及借记卡/信用卡标志。
下载的按钮代码如下所示(为安全起见，该值已改为1234567ABC):
`
<input type=“image” src=“https://www.paypal.com/en_US/GB/i/btn/btn_donateCC_LG.gif” 
border=“0” name=“submit” alt=“PayPal - The safer, easier way to pay online.”>
请付款按钮
当客户需要在处理订单之前获得商品报价时，可以使用捐赠按钮。如果报价可以接受，客户可以通过捐赠按钮付款。捐赠按钮可以使用您自己的图像和文本进行定制。
图 10-4 所示的请付款按钮是使用图形程序定制的；代码是从贝宝下载的。
***图 10-4。*支付与报价相符的金额
设计一个自定义按钮，如下所示:
- 在图形程序中设计一个
.gif格式的请付款按钮，并把它放在网站根文件夹的 images 文件夹中。记下按钮图像的 URL。 - 登录客户的帐户，对于英国，点击个人资料中的我的销售偏好。美国帐户进入我的销售工具，然后贝宝按钮更新。或者更简单地，尝试商家服务标签。
- 单击创建新按钮，并从下拉列表中选择捐赠按钮。
- 填写字段。
- 在标题“自定义按钮”下，单击“使用您自己的按钮图像”。
- 输入您设计的按钮的 URL。
- 单击创建按钮，然后将代码复制并粘贴到您的网页中。
当客户同意供应商的报价时，客户在点击“请付款”按钮后输入金额。在清单 10-4 中，定制下载支付按钮的代码以粗体显示(出于安全考虑，PayPal 参考号已改为12345ABC)。
(此列表没有可下载的文件)
***清单 10-4。*在网页上添加一个定制的贝宝按钮
`<!doctype html>
Thank you for accepting our quotation
You can pay by one of two methods:-1\. Click CHECK. A form will appear. Please
fill it out and mail it with your check
OR
2\. By PayPal or Debit/Credit card,click the Please Pay button **** **** **** **** **
** ****
测试您的 PayPal 按钮
一旦下载的代码被添加到您的网站，一些支付过程可以进行测试。然而，由于 PayPal 不允许会员向自己付款，因此无法使用单一账户测试完整的支付流程。
注会员可以同时拥有一个个人账户和一个企业/卓越理财账户。出于测试目的，会员可能希望开立一个单独的个人 PayPal 账户。
进入您的网站，找到您想要测试的 PayPal 支付按钮页面。
- 点击按钮。
- 如果按钮功能正常，您将进入 PayPal 支付页面。您的电脑将启用 cookies，因此您可以看到自己的 PayPal 用户名。但是，当你的买家点击“立即购买”时，如果他们有 PayPal 帐户，他们会看到自己的 PayPal 用户名。
- 如果客户不是 PayPal 会员，他们可以点击“点击此处”按钮，按钮上会显示“如果您没有 PayPal 帐户，请点击此处”。
顾客可以使用贝宝或借记卡/信用卡
如果客户没有 PayPal 帐户，他们可以使用替代支付链接输入他们的姓名和送货地址。然后会提示他们输入详细信息，如支付金额、借记卡/信用卡类型和号码、电子邮件地址和电话号码。他们可以选择通过创建一个 PayPal 帐户来保存信息，以简化未来的交易。
客户受到 PayPal 防欺诈功能的全面保护。Premier 和 business 帐户持有者可以打开或关闭该功能，方法是登录 PayPal，转到个人资料，单击销售首选项列下的网站支付首选项，并勾选 PayPal 帐户选项下的是/否框。
管理 PayPal 账户
要访问帐户以便所有者可以管理它，请前往[www.paypal.co.uk](http://www.paypal.co.uk)(在英国)或[www.paypal.com](http://www.paypal.com)(在美国)*。*然后遵循以下步骤:
- 使用左侧的按钮登录。
- 将显示您的电子邮件地址。输入您的密码，然后单击登录按钮。
- 点按“历史记录”以查看您的帐户中发生了什么。
- 完成后，单击注销。
- 要从您的 PayPal 帐户向您的个人银行帐户转账，您必须访问您的 PayPal 帐户，然后指示 PayPal 要转账的金额。
- 进入您的 PayPal 帐户，然后点击取款。
- 点击提取资金到您的银行账户。
- 输入要转账的金额。
- 在金额字段下方，确保显示您的个人银行账户。
- 单击继续。
- 在下一页上，确认详细信息是正确的，然后单击提交按钮。
- 这项交易大约需要三天时间才能完成。
- Request Money 允许您从 190 个接受 PayPal 的国家和地区中拥有电子邮件地址的任何人那里接收或请求资金。若要为拍卖的物品请求付款，请向客户请求付款，或通过输入收件人的电子邮件地址和您请求的金额来发送个人付款请求。
提示 PayPal 提供了一个完整的 API 来进一步控制你的购物车和其他按钮。在[cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/](https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/)尝试使用有用的网站支付标准概述页面。它介绍了许多高级功能，开发者可以使用这些功能来使用 PayPal，包括对所有 PayPal 变量的引用。PayPal 还有一个运费计算器，可能会对你有用。
总结
本章向您展示了将 PayPal 添加到网站的一步一步的过程并不神秘，而是相对简单和符合逻辑的。您已经学会了如何为各种 PayPal 按钮嵌入下载的代码，并且对安全性感到放心。您还学习了网站所有者如何转账和查看 PayPal 帐户的余额。
在下一章中，您将了解更多关于安全性的知识，以及它如何影响电子邮件地址和反馈表单。将提供安全的解决方案，虽然使用了一点 JavaScript，并描述了 PHP 表单过滤器，但不需要任何脚本语言的知识。
十一、安全反馈方法
电子邮件和反馈表格是最受欢迎的联系方式，让用户可以轻松地与网站所有者沟通。不幸的是，这两种联系方式都可能被滥用。黑客可以劫持一个表单，并用它向网站所有者发送恶意软件。电子邮件地址被收集并出售给垃圾邮件发送者。这两种行为都会给网站所有者带来困扰和垃圾邮件的涌入；它们也不能提高网页设计师的声誉。本章讨论了防止这些风险的一些选项。
加密电子邮件地址，防止垃圾邮件
Escrambler 是一款免费的反垃圾邮件设备。它最初是作为一个普通的、可点击的链接产生的，后来由于 InnerPeace.org 添加了一个电子邮件地址的图像而得到了增强。他们在[innerpeace.org/escrambler.shtml](http://innerpeace.org/escrambler.shtml)的网页会很快为你生成代码。或者您可以修改下面的 JavaScript 代码片段。
将下面的 JavaScript 片段插入到您希望电子邮件地址出现的部分。JavaScript 还在页面上放置了电子邮件地址的图片，以便用户可以点击它或记下它以供将来使用。但是，如果用户禁用了 JavaScript，电子邮件地址图像就没有帮助了；因此，图片(没有链接)也应该以通常的方式显示在页面的某个地方。
JavaScript 会伪装电子邮件地址，这样垃圾邮件蜘蛛就看不到了。JavaScript 将传统的电子邮件地址分解成小块，然后重新组合。垃圾蜘蛛阅读 JavaScript 和图片有很大困难；即使他们能读懂 JavaScript，电子邮件地址也是支离破碎的，以至于他们无法理解。对于你自己的电子邮件加扰器，只需更改粗体项目。
以下示例隐藏了地址fredbloggs@aol.com
`
`
注意变量f后面是两个单引号，不是双引号。第g='<img src=\"'行以双引号结尾，后跟单引号。
JavaScript 代码允许以下两种情况:
完整的电子邮件地址以可点击的图像形式出现在屏幕上，但垃圾邮件蜘蛛看不见。* If there are no pictures available, a link with the words “email me” will appear on the webpage.
点击图片或文字“给我发邮件”,用户的默认电子邮件程序将打开，其中已经填写了电子邮件地址。用户可能需要被告知电子邮件可能会进入他们的发件箱，因此需要通过单击发送/接收按钮来发送。
创建电子邮件地址的图像
大多数画图程序可以创建包含邮件地址的.png或.gif图像。使背景透明，以便页面的背景颜色显示出来。但是，使用画图程序创建文本可能不会产生令人满意的结果。这也很耗时，有时甚至令人沮丧，尤其是当你需要匹配页面的彩色背景时。下面是一种方法，它总是能给出一个好的结果，并且没有用画图程序添加文本复杂:
- In your WYSIWYG fckeditor, copy a webpage with appropriate background color.
- In the blank space of the page, type the email address with the preferred font size and color.
- Use Alt+ Print Screen (or use the screenshot tool in Windows 7) to take a screenshot of the page.
- Open your drawing program and paste the screenshots into it.
- Crop the picture and save the result as
.jpgor .pngfile (see Figure 11-1 ).
图 11-1 。使用此方法的彩色背景示例图像
一个小问题解决了
你的客户可能决定不把她的电子邮件地址放在网站上。相反，她可能更喜欢使用反馈表。但是，没有什么可以阻止某人忽略表格，通过猜测她的电子邮件地址直接与她联系。这种情况很少发生，而且发件人不是垃圾邮件发送者，所以告诉你的客户不要惊慌。十年来，我个人只收到过几封这样的邮件。这是个小问题，可以忽略。
那他怎么知道你客户的邮箱地址？他知道是因为他找到了她的网站。他为什么试图联系她？他想要建立从她的网站到他的网站的对等链接。她的安全反馈表(在下一节中描述)防止发送者提供他的 URL 细节。他必须使用普通的电子邮件，所以他做出了明智的猜测。他尝试info@clientswebsite.co.uk或sales@clientswebsite.co.uk，等等。如果你的客户有一个“包罗万象”的电子邮件地址，这个人也可以输入类似于postmaster@clientswebsite.co.uk的东西，它可能会到达你的客户。他的电子邮件将能够包含他的真实网址。他不会包括一个可疑的网址，因为可以通过他的电子邮件追踪到他。
通过建立一个互惠链接，他希望通过尽可能多的外部链接来提高他在搜索引擎中的排名。你的客户应该看看这个人的网站；她通常会发现他的内容与她的网站毫无关系，所以她应该而不是同意互惠链接。此外，她很可能会发现他的链接页面上有 40 到 100 个链接。如果她同意互惠链接，搜索引擎会认为她在使用链接农场，因此他们可能会惩罚她的网站。
如果您的客户正在接收这种类型的电子邮件，最简单的解决方案是在处理程序中使用不同的电子邮件地址，例如她的家庭宽带地址，clientsemailaddress@herisp.co.uk。没有人能够猜出她的家庭电子邮件地址，但缺点是她的商业回复无法与她的私人邮件区分开来。
安全反馈表格
在设计反馈表时，我们需要考虑以下三点:
- Because layout tables are deprecated, CSS must be used to align input fields neatly.
- And blind and severely visually impaired users can use their screen readers to read and reply to forms. Accessibility rules must be observed; These are all included in Chapter 14 of . A filter must be built into the form handler to prevent the form from being maliciously hijacked.
虚假回复
关于第三点，当我第一次开始设计网站时，我在我的许多客户的网站上添加了反馈表格，所有这些网站都被那些使用表格向网站所有者发送虚假回复的人所困扰。这些回复包含了官样文章和不可靠的网址。劫机者利用机器人每周发送一到两次虚假回复。网站所有者自然感到失望和困惑，因为他们认为他们收到了订单。幸运的是，他们没有点击这些虚假回复的链接，但他们立即联系我寻求解决方案。
虚假回复看起来像什么？下面的方框显示了一个典型的虚假回复。为了安全起见，我修改了网址和电子邮件地址。这些回复包含官样文章以及指向可疑网站的链接。不熟悉黑客怪异行为的网站所有者可能会试图点击一个链接，这可能会导致各种各样的混乱。
内容类型:文本/html；charset = " iso-8859-1 "
From:ezrxsk@xyzvjox.com
X-anti virus:AVG E-mail 8 . 0 . 100【270 . 4 . 1/1510】
From:Damon Rosario
super obligation hoyboyish forered minaway wips taenioid chancellor ism unsocket
3sy 6 rl<a href = \ " http://qmuxlytwkukt . com/\ ">qmucuk
以下是从安全表单收到的真实电子邮件:
此信息发自:
http://www.theowners-website.co.uk/form.html
发件人姓名:安德鲁·伊斯曼
发件人电子邮件:aeastman@myisp.co.uk
电话:01390 5233726
W98，me，2000？:没有
XP？:没有
Vista？:没有
窗口 7？:是
笔记本电脑？:是
桌面？；不
-消息-
我怎样才能说服我的电脑做出一杯像样的咖啡？
防黑客反馈表示例
虚假反馈可以通过 PHP、ASP.NET 或其他服务器端处理程序来阻止。在这一章中，我选择使用 PHP 处理程序，因为这种语言更容易理解和实现。如果在任何文本字段中输入 URL，该处理程序会弹出一条错误消息。这完全阻止了任何情况下的虚假回复。黑客不会劫持表格来发送伟哥广告；他们希望网站所有者点击 URL 链接，打开发送者的可疑网站。这些网站可能是色情网站，或者更有可能包含恶意软件，例如可以控制网站所有者计算机的特洛伊木马。图 11-2 显示了本项目中使用的表格。
***图 11-2。*一个使用 CSS 布局的表单
您可以从位于[www.apress.com](http://www.apress.com)的配套网站下载示例表单、处理程序和相关文件。在清单 11-2a 、 11-2b 和 11-2c 中粗体显示的项目处插入您自己的详细信息。
注意 HTML5 对表单有了新的标签和属性。这些将在本章后面提到。同时，这个例子使用 HTML4 标签，因为表单的 HTML5 建议仍在开发中。此外，浏览器支持目前是不完整的，不幸的是，新的控制不阻止网址的输入。
提示如果没有其他页面需要表单样式说明，可以使用内部 CSS 样式表。或者，您可以使用单独的外部样式表来指定表单元素的布局。这个链接语句必须是<head>部分中一系列链接语句的最后一个。这将是对外部样式表的链接的补充，用于设计页面的其余部分(如导航按钮)。如果你不想在表单上有导航按钮，你至少应该在表单上放一个返回按钮(见第二十章)。
通过反复试验确定样式表中的宽度和填充。由于一些网页设计程序不是真正的所见即所得，所以总是在各种浏览器中测试布局。接下来的几组代码描述了典型表单的元素。
典型文本字段的代码片段采用以下形式:
`<div id**=**“name”>
<label for=“username”>Your Name:
<input id=“username” name=“username” size=“30”>
对于表单上的每个文本字段，<label>…</label>和<input>…</input>，标签必须与两个属性for和id一起使用，如代码片段所示。这对于使用屏幕阅读器的人来说非常重要。
对于文本字段和文本区域，<label>标签必须位于<input>标签之前，这样标签就位于字段的左侧。
对于复选框和单选按钮，必须使用相反的顺序；<input>标签必须在<label>标签之前，这样标签就位于字段的右边。
下面是 复选框的 CSS 代码片段(通过使用 CSS，复选框被很好地排列起来，每个复选框都有相同的类/标识符):
/*The CSS for positioning the checkboxes on the page*/ .chk1 {text-align:left; padding-left:30%; }
复选框的 HTML 的代码片段如下:
`
`
……等等。
两个单选按钮通过 CSS 样式定位在页面上，CSS 样式的目标是名为rad的id。
/*Position the radio buttons on the page*/ #rad {text-align:left; padding-left :30%; }
以下是单选按钮的 HTML 的代码片段:
`
清单 11-2a 中没有使用语义标签为了避免为 IE 7 和 IE 8 用户添加 JavaScript，该表单可以在所有浏览器中工作，包括 IE 7 和 IE 8。
清单 11-2a。【feedback-form.html】创建如图所示的安全表单图 11-2
`<!doctype html>
Send me a content suggestion or a message
Required items *
Please select your operating system *
Please select your computer*
注意当点击提交按钮时，清单 11-2a 中粗体显示的项目将被发送到表单处理程序(清单 11-2c )进行处理。
清单 11-2a 中的表单链接到下面的样式表。这将创建各种表单域的布局。
***清单 11-2b。*为清单 11-2a 创建 CSS 样式表 (feedback.css)
/*FEEDBACK.CSS*/ /*reset browsers for cross-client consistency*/ html,body,h1,h2,h3,h4,h4,h5,h6,p {margin:0; padding:0 } img {border-style: none; float: none; margin-left: 0; margin-right: 0; } body {text-align:center; background-color:#D7FFEB; color:black;  font-family: "times new roman"; max-width:1024px; min-width:800px;font-size: medium;  color: #000; margin: auto; width:95%; } /*The h1 heading is not used on the form shown; its inclusion is for a probable h1  heading on your own form*/ h1 {padding: 110px 0 0 12%; font-family :"times new roman"; font-size: 250%;  color: #000; font-weight:bold;} h2 { margin-top:15px; } span.red { font-size:medium; color:red; font-weight:bold; } /*center the back button on the thankyou page*/ #back-button { margin:auto; text-align:center; width:200px; height:25px; padding:5px;  background-color:brown; color:white; font-size:110%; font-weight:bold; } #back-button a { text-decoration:none; color:white; } #back-button a:hover { color:red; } /*set heading details*/ h1,h2 , h3, h4, h5 { margin-top:0; margin-bottom:10px; } h2 { font-size:130%; font-weight:bold; } h3 { font-size:110%; font-weight:bold; text-align:center; } /*PARAGRAPHS*/ p {margin-bottom:10px; margin-top:0; } /*FORM. Position the form elements on the page*/ #form {width :500px; margin:auto; text-align:center; } .label { float:left; width: 400px; text-align:right; clear:left; } .chk1 { text-align:left; padding-left :30%; } #rad { text-align:left; padding-left :30%; } #sug { text-align:center; margin:auto; } #submit { text-align:center; }
如前所述，当单击表单上的 Submit 按钮时，用户的详细信息被发送到表单处理程序。表单处理程序将在清单 11-2c 中描述。
表单处理程序及其反黑客过滤器
您可以从相应的网站下载表单、样式表和表单处理程序，网址为 ` `www.apress.com`` 。这个处理程序是一段 PHP 代码，但是你不需要学习 PHP 来使用它。该处理程序包含逻辑操作符，可以过滤出错误和 URL。URL 过滤器将激怒并阻止人类劫机者，并将导致机器人设备神经崩溃。
注意要开始测试，设置你自己的电子邮件地址，这样你就是收件人，然后测试表格。当您对该表格向您发送测试电子邮件感到满意，并且生成的电子邮件令人满意时，请注释掉您自己的电子邮件地址，并删除客户电子邮件地址中的注释斜线，以便客户(网站所有者)代替您接收电子邮件。当然，如果网站是你自己的，这就不适用了。
注意在清单 11-2c 中，单行注释前面有一个双斜杠//，多行注释使用/*……*/，就像 CSS 注释一样。同样，一个 PHP 文档以<?php开始，以?>结束，这些标签不能包含空格。
出于好奇，本节末尾解释了更奇怪的代码。
注意处理程序必须保存为 PHP 文档，上传处理程序后，在 FTP 客户端的服务器窗格中右键单击它，在那里就可以将 CHMOD 设置为 644。这将阻止未经授权的人访问它。如果他们尝试使用处理程序的文件名打开它，他们将看不到处理程序；他们将立即被定向到表单。确保您的服务器启用了 PHP，如果没有启用，请联系主机并指示他们启用服务器。
在处理程序清单 11-2c 中用您自己的详细信息替换 粗体斜体 中显示的项目，因为发送消息的人将输入他自己的详细信息(姓名、电子邮件地址和电话号码)；它们不会以粗体斜体显示。
清单 11-2c。【form-handler.php 创建 PHP 表单处理程序
<?php /* FORM-HANDLER.PHP Feedback Form PHP Script Ver 5.0 */ // set the email address for the recipient, this setting sends it to your client for example //$mailto = "***webmasters-mailaddress@your-isp.com***" ; $mailto = "***yourclient@clients-isp.com***" ; //choose the subject so that you can recognize emails sent from this form $subject = "***Help query***" ; /*The next block of code tells the handler where to find the various documents  associated with it. In this case the documents and the form are all in the same root  folder.*/ // list the pages to be displayed, $formurl = "http://www.***clients-website.com***/feedback-form.html" ; $errorurl = "http://www.***clients-website.com***/error.html" ; $thankyouurl = "http://www.***clients-website.com*** /thankyou.html" ; $emailerrurl = "http://www. ***clients-website.com*** /emailerr.html" ; $errorphoneurl = "http://www. ***clients-website.com*** /phonerror.html" ; $errorsuggesturl = "http://www. ***clients-website.com*** /suggesterror.html" ; $errorboxurl = "http://www. ***clients-website.com*** /error.html" ; $uself = 0; // ------- Set the information received from the form as $ values --------------- $headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ; /*The following code receives the items from the HTML form and converts them to formats  that can be used by the handler, for example, *username* is converted to *$username*.*/ $username = $_POST['username'] ; $useremail = $_POST['useremail'] ; $phone = $_POST['phone']; $***w98me2000*** = $_POST['***w98me2000***']; $***xp*** = $_POST['***xp***']; $***vista*** = $_POST['***vista***']; $w7=$_POST['***windows7***']; $computer=$_POST['***computer***']; $suggestion = $_POST['***suggestion***'] ; $http_referrer = getenv( "HTTP_REFERER" ); if (!isset($_POST['useremail'])) { header( "Location: $formurl" ); exit ;} //Check that all three essential fields are filled in if (empty($username) || empty($useremail) || empty($***suggestion***)) { header( "Location: $errorurl" ); exit ; } //Check that at least one box has been ticked if ((!$***w98me2000*** and !$***xp*** and !$***vista*** and !$***w7***)) { header( "Location: $errorboxurl" ); exit ; } //check that no urls have been inserted in the username text area if (strpos ($username, '://')||strpos($username, 'www') !==false){ header( "Location: $errorsuggesturl" ); exit ; } //Check that no urls haves been entered in the phone field if (strpos ($phone, '://')||strpos($phone, 'www') !==false){ header( "Location: $errorphoneurl" ); exit ; } //check that no urls have been inserted in the suggestion text area if (strpos ($***suggestion***, '://')||strpos($suggestion, 'www') !==false){ header( "Location: $errorsuggesturl" ); exit ; } if ( ereg( "[\r\n]", $username ) || ereg( "[\r\n]", $useremail )) { header( "Location: $errorurl" ); exit ; } #remove any spaces from beginning and end of email address $useremail = trim($useremail); #Check for permitted email address patterns $_name = "/^[-!#$%&\'*+\\.\/0-9=?A-Z^_{|}~]+“;
$_host = “([-0-9A-Z]+.)+”;
t
l
d
s
=
"
(
[
0
−
9
A
−
Z
]
)
2
,
4
_tlds = "([0-9A-Z]){2,4}
tlds="([0−9A−Z])2,4/i”;
if(!preg_match(
n
a
m
e
.
"
@
"
.
_name."@".
name."@"._host.
t
l
d
s
,
_tlds,
tlds,useremail)) {
header( “Location: KaTeX parse error: Expected 'EOF', got '}' at position 32: … exit ; }̲ if (get_magic_…message = stripslashes( KaTeX parse error: Expected 'EOF', got '}' at position 12: message ); }̲ if(!w98me2000) {KaTeX parse error: Expected 'EOF', got '}' at position 24: …2000*** = "No";}̲ if(!xp) {KaTeX parse error: Expected 'EOF', got '}' at position 17: …**xp*** = "No";}̲ if(!vista) {KaTeX parse error: Expected 'EOF', got '}' at position 20: …ista*** = "No";}̲ if(!w7) {KaTeX parse error: Expected 'EOF', got '}' at position 17: …**w7*** = "No";}̲ if(computer !=null) {$computer = $computer;}
//-- SET UP THE EMAIL’S CONTENT, FORMAT IT, SEND IT. THEN SHOW A THANK YOU PAGE –
KaTeX parse error: Undefined control sequence: \n at position 53: … was sent from:\̲n̲" . "http_referrer\n” .
“------------------------------------------------------------\n” .
“Name of sender: $username\n” .
“Email of sender: $useremail\n” .
“Telephone No: $phone\n” .
“W98,ME,2000?: $w98me2000\n” .
“XP?: $xp\n” .
“Vista?: $vista\n” .
“Windows7?: KaTeX parse error: Undefined control sequence: \n at position 9: ***w7***\̲n̲" . "**…laptop\n” .
“Computer?;KaTeX parse error: Undefined control sequence: \n at position 14: ***desktop***\̲n̲" . "--…suggestion .
“\n\n------------------------------------------------------------\n” ;
mail($mailto, $subject, KaTeX parse error: Expected group as argument to '\"' at end of input: …oper, "From: \"username” <$useremail>" . KaTeX parse error: Expected group as argument to '\"' at end of input: …. "Reply-To: \"username" <$useremail>" .
$headersep . “X-Mailer: feedback4.php 5.0” ); header( “Location: $thankyouurl” ); exit ;
?>`
好奇者:一些 PHP 代码的解释
(如果太忙或者不感兴趣，可以跳过这一节。)
**!isset function**检查以确保发送者电子邮件的值已经在$_POST数组中设置。感叹号(!)表示NOT。
if (!isset($_POST['useremail'])) { header( "Location: $formurl" ); exit ; }
**if(!preg.match**完成测试，查看电子邮件地址的格式是否正确。 reg 部分代表正则表达式(这是美国的翻译，其中 regular = standard，不是英国的意思，其中 regular 的意思是“以相等的间隔”)。如果电子邮件地址不符合公认的标准，则会显示一条错误消息。
**magic_quotes**是一个 PHP 过滤器，如果打开，它将插入一个转义斜杠来保留用户输入的消息中的任何单引号或双引号。
if (get_magic_quotes_gpc()) { $message = stripslashes( $message ); }
当检查基本字段是否已填写时，双垂直线(||)表示OR)。
下一段代码是这样翻译的:如果username字段为空，或者useremail字段为空，或者suggestion字段为空，那么显示一个名为errorurl的错误消息，说明一个关键字段没有填写。
if (empty($username) || empty($useremail) || empty($suggestion)) { header( "Location: $errorurl" ); exit; }
在 HTML 表单中，复选框和单选按钮的默认值设置为“是”。
如果一个框或单选按钮没有被点击，那么该值可以被处理器改变为"No"，如下所示:
if(!$xp) {$xp = "No";}
这意味着如果$xp未被选择，则将值"No"分配给$xp。
测试以确保至少勾选了一个复选框(注意本语句中and的使用)。
if ((!$w98me2000 and !$xp and !$vista and !$w7)) { header( "Location: $errorboxurl" ); exit ; }
如果消息发送成功，需要通知用户。他还需要知道他在填写表格时是否犯了错误。以下部分给出了建议的反馈页面，这些页面将通知用户，如果用户提供了错误或不可接受的数据，还会提供帮助。
感谢页面和错误信息
“谢谢”页面向用户确认电子邮件已成功发送。为了保持一致性,“谢谢”页面应该看起来像网站上的所有其他页面。尝试将你的导航菜单包含在“谢谢”页面中(或者至少包含一个返回按钮)。失去访客将是一件憾事。在每个错误页面上添加一个返回按钮也会很有帮助。“谢谢”页面如图 11-3 所示，代码为清单 11-3 。这个页面有一个返回按钮，上面写着“返回主页”，但是你可以用主导航菜单替换这个按钮。按钮的样式包含在样式表feedback.css中。
图 11-3 。一个“谢谢”页面
***清单 11-3。*创建感谢页面(thankyou.html)
`<!doctype html>
Thank you for your suggestion or question
If it is of general interest, I will add it to the website and let you know where to find it.
If it is not of general interest I will email an answer to you within a couple of days.
如果电子邮件未成功发送，将会出现一条解释性错误消息。
为什么要使用错误页面而不是将一段文本回显到屏幕上？我的客户更喜欢页面提供的独特信息和帮助，而不是常见的红色小错误信息，这些信息可能会被忽略或者过于简短。
清单 11-4 中的样式表用于所有五个错误消息(清单 11-5 到清单 11-9 )。
清单 11-4。 (error.css)
body { text-align:center; font-size: large; font-weight:bold; } span.red {color:red; font-size:xlarge; font-weight:bold; }
清单 11-5 提供了缺失要素错误信息的代码。
清单 11-5 。(error.html)
`<!doctype html>
One or more of the essential items in the form has not been filled in.
Essential items have a red asterisk like this *
Please click the Back button on your internet browser and then supply the  missing information.
`清单 11-6 显示了电子邮件错误信息的代码。
清单 11-6。【emailerr.html】
`<!doctype html>
Your email address has an incorrect format.
Please click the Back button on your internet browser
and then correct your  email address.
清单 11-7 提供了电话错误信息的代码。
清单 11-7。【phonerror.html】
`<!doctype html>
The telephone number must be numbers and spaces only, with no letters or punctuation>
Please click the Back button on your internet browser
and then correct your  telephone number.
清单 11-8 提供了勾选框错误信息的代码。
清单 11-8。【boxerror.html】
`<!doctype html>
Please tick one of the boxes to say which Operating System your  have on your computer.
Essential items have a red asterisk like this*
Please click the Back button on your Internet browser and then supply the  missing information.
`清单 11-9 提供了禁止输入 URL 的消息代码。
清单 11-9。【suggesterror.html】
`<!doctype html>
This is to prevent low-life  scumbags from inserting links which lead to dodgy websites.
Please click the Back button on your internet browser
and then remove any  website addresses from the form.
新的 HTML5 表单控件在第一章的中进行了解释。我们现在需要考虑这些控件是否会最终取代本章提供的 PHP 表单处理程序中的输入过滤器。
新的 HTML5 表单控件
HTML5 对表单的推荐几乎是完整的，但是不同的浏览器有不同的解释。HTML5 表单并不简单，因为其他因素会影响它们。
一个防黑客的表单需要一个 PHP、ASP.NET 或 Perl 服务器端代码的处理程序。处理程序必须匹配新的 HTML5 表单标签。除非非常小心地将新的 HTML5 元素与屏幕阅读器的需求相集成，否则可访问性将会受到损害。在一段时间内，IE 条件句和替代样式表将不得不被使用，以便使用最常用浏览器的冲浪者可以看到和使用你的表单。* At the time of writing, IE 9 did not support HTML5 forms. IE 10 will probably support them.
注只有 Opera 9.5 +支持编写时的所有新表单元素。其他新浏览器支持一些表单功能。要查看当前哪些浏览器支持 HTML5 表单控件，请访问[wufoo.com/html5/](http://wufoo.com/html5/)
即使 HTML5 控件内置在 HTML5 表单中，机器人和人类仍然可以输入危险的 URL。因此，对于某些字段，您仍然需要防黑客表单处理程序的保护。
当使用前面描述的 PHP 反馈处理程序时，您可以针对机器人添加进一步的保护；例如，您可以在页面上放置一些文本的图像，以便文本必须正确输入，或者您可以提出一个问题，在表单处理程序发送电子邮件之前必须回答该问题。另一种解决方案是使用验证码，如下所述。
使用验证码
验证码是使反馈表单更加安全的一种方式。我们都很熟悉 CAPTCHA 图像的波动脚本，如图 11-4 所示。
***图 11-4。*验证码图片
它被设计来阻止机器人使用表单。不幸的是，这并不能阻止一个不道德的人给你的客户发送一条包含令人不快的或危险的链接或可疑网址的反馈信息。PHP 处理程序是做到这一点的唯一方法。也许最安全的解决方案是将 CAPTCHA 与安全反馈表单及其 PHP 处理程序结合使用。
使用 CAPTCHA 时，每次访问表单时，都会出现不同的图像。这可以由提供验证码服务的组织来执行，或者可以在表单上编程和调用随机生成器。一些验证码方法结合了字符的口语版本，以便盲人或弱视者可以使用这种形式。
验证码被下载并嵌入到包含表单的页面中。验证码可以是一项免费服务，可以在商业网站上使用。访问[captchas.net](http://captchas.net)(注意 URL 中验证码后面的字母“s ”)了解更多信息并下载代码。
下载最简单的代码版本是 PHP。它可以直接嵌入到 HTML5 页面中。必须下载三个文件并安装到您的服务器上。这个解决方案需要 JavaScript 和 PHP 的知识。要想知道你是否足够熟练使用captchas.net方法，请看一下[captchas.net/sample/php/](http://captchas.net/sample/php/)的示例代码
提示其他几家验证码供应商存在；有些需要付费，有些比其他的更容易嵌入和理解。尝试探索[hellocaptcha.com](http://hellocaptcha.com)和[www.google.com/recaptcha](http://www.google.com/recaptcha)。
总结
在本章中，您学习了如何使用一点 JavaScript 来阻止垃圾邮件蜘蛛收集您客户的电子邮件地址。通过使用这个脚本，您的客户端将不会被垃圾邮件淹没。您还了解了使用防黑客反馈表的原因。本章和配套的网站为您提供了一个表单模板及其防黑客处理程序。虽然处理程序是用 PHP 编写的，但是实现它并不需要 PHP 知识。只需下载模板并输入您自己的信息，本章中的列表以粗体显示项目。
提供了一些关于验证码的信息，虽然我更愿意使用反馈表单处理程序，因为它比验证码更安全，可以防止人类流氓访问。没有任何安全措施是 100%安全的，CAPTCHA 已经被使用光学字符识别(OCR)的犯罪分子绕过。如需了解更多信息，请参见维基百科上关于验证码的文章。
在下一章中，我们将研究显示器色彩再现、屏幕尺寸和显示分辨率的巨大差异所带来的问题。将提供几种解决方案，并解释它们的优缺点。
十二、监控混乱
你的网站颜色在所有显示器上都一样吗？您应该为哪种类型和尺寸的显示器进行设计？一个网站有可能在各种屏幕尺寸和分辨率下看起来都很吸引人吗？本章描述了这些问题并探讨了可能的解决方案。将介绍和讨论以下主题:
- And display color problem.
- Display size and resolution
- And fix width layout of that display.
- And liquid layout.
- And semi-liquid display layout-the best solution.
- Other matters needing attention related to monitor
显示器和色彩再现问题
阴极射线管(CRT)显示器通常具有强烈的鲜艳色彩，每个制造商都将它们设定为相当一致的标准。自从引入 TFT 显示器(薄的平板显示器；TFT 代表薄膜晶体管)。与电脑捆绑在一起的绝大多数 TFT 显示器都是低保真度的扭曲向列型(TN)屏幕；其中一些不能再现广泛和忠实的颜色范围。
此外，它们通常在工厂设置为最大亮度，因此颜色是褪色的淡粉色，有时带有明显的蓝色。虽然 TFT 屏幕有调节按钮，但是用户很少会注意到这些；即使他们发现了，他们通常也不敢使用。
当在 TFT 屏幕上观看时，在 CRT 显示器上设计的丰富的网页颜色可能看起来非常苍白和模糊。我的一个网站的背景是柠檬黄渐变；一些 TFT 屏幕将这种颜色呈现为浑浊的灰绿色。我试验了各种柠檬黄，最终最差的屏幕显示出一种柠檬黄；没有我希望的那么明亮，但是还可以接受。
由于大多数用户使用的是低保真度的扭曲向列型(TN)屏幕，所以最好的策略是在类似的屏幕上设计网站。设计网站时，您甚至可以将一个低保真度屏幕与昂贵的高质量 TFT 屏幕并联，以确保您的网页在劣质屏幕上看起来合理。将屏幕设置得比你个人喜欢的稍微亮一点。然后设计在屏幕上看起来合理的颜色。使用您的图形软件包来制作比 CRT 显示器稍暗的图像。
如果你被要求改变一个旧的网站，使它在 TFT 屏幕上看起来合理，你可能必须用你的图形程序把图片变暗。然后使用 CSS 将文本和菜单按钮变暗。如果在 CSS 中使用十六进制代码来描述颜色，可以通过减少数字和字母来使颜色变暗；例如
- Medium blue is
#0000FF; When FF drops to 80, it becomes#000080, which is navy blue.- The hexadecimal digits are (from the darkest to the brightest) 0,1,2,3,4,5,6,7,8,9, a, b, c, d, e, f.
- To lighten the color, add hexadecimal characters. For example, royal blue is
#0000FF; The light version of blue may be#7070FF.- In order to avoid spending too much time trying again and again when determining the right color, please start from
[www.paciellogroup.com/resources/contrast-analyser.html](http://www.paciellogroup.com/resources/contrast-analyser.html)下载压缩文件
CCA-2.2.zip
向下滚动 Paciello Group 网站的主页，直到您看到下载和语言版本列表。单击相应的语言版本下载 zip 文件。将其解压缩到一个新文件夹中，然后创建一个文件CCA-2.2.exe的桌面快捷方式。
图 12-1 显示了颜色对比分析仪(CCA-2.2)的界面。
***图 12-1。*色彩对比分析仪。2.2 接口
颜色对比分析仪可以以两种方式使用；如果您单击菜单上的选项，您可以通过滑块来调整颜色，或者您可以看到当您更改十六进制数字时颜色会发生什么变化。
- Double-click the shortcut (the spelling of “color” in CCA interface is English and Australian color ).
- Enter the hexadecimal number of the color in the hexadecimal field selected in the foreground color. You will see the color in the corresponding color selection field.
- Change the hexadecimal code one bit at a time until the desired color is reached. Write down the hexadecimal color code and use it to modify your CSS style sheet.
提示最初，一个名称只能指定 17 种颜色，如红色或蓝色。现在，你可以命名 147 种颜色，例如color: mediumpurple;。欲了解更多信息，请访问[www.w3schools.com/cssref/css_colornames.asp](http://www.w3schools.com/cssref/css_colornames.asp)和[somacon.com/p142.php](http://somacon.com/p142.php)。
还会遇到另一个问题:与 Internet Explorer 相比，Mozilla Firefox 在由 CSS 动态伪类方法设计的菜单按钮上显示更淡的边框颜色。在大多数情况下，这是可以接受的，但如果不接受，你可以尝试使用边框颜色，以提供一个在 IE 和 Mozilla Firefox 中都看起来合理的折衷方案。作为一种选择，IE 的 CSS 样式表可以是一个条件样式表；主样式表将为其他浏览器提供边框颜色。
显示器尺寸和屏幕分辨率
无论你为哪种分辨率设计(见表 12-1 )，都会有弊端。你不可能知道用户显示器的尺寸或者分辨率是如何设置的。视力衰退的老年人可能会将 19 英寸的屏幕设置为 800 × 600，更喜欢大而模糊的图标和字体，而不是清晰而小的图标和字体。
提示关于各种屏幕和色彩分辨率统计的有趣页面，请访问[www.w3schools.com/browsers/browsers_display.asp](http://www.w3schools.com/browsers/browsers_display.asp)。
非正常比例可能会稍微扭曲网站的外观；项目被垂直拉伸。一些宽屏幕比例会导致水平失真；例如，足球变得像橄榄球一样呈椭圆形。
一些用户将收藏夹面板永久固定在浏览器窗口上，使得浏览器窗口的可用宽度减小，导致用户水平滚动。
大多数网站都有长页面和短页面。在短页面上，不显示垂直滚动条。在长页面上，会出现垂直滚动条，页面可以稍微向侧面移动，这样当用户从短页面移动到长页面时，项目看起来会跳跃。CSS 绝对定位可以部分克服这一点。
由于以下原因，实际屏幕区域小于规定的像素数:
- People lose vertical screen space by adding extra and unnecessary toolbars, such as those provided by Google or Yahoo.
- Windows vertical scroll bars occupy part of the width, so at least 24 pixels are allowed when setting the page width. For example, for the most common 1024 horizontal display resolution, a fixed width of about 980 pixels is used. For a display with a horizontal resolution of 1280 pixels, use 1200 pixels.
- Ie browser and Mozilla Firefox render pages in slightly different ways; However, most problems can be solved by resetting at the beginning of the stylesheet.
网页设计师必须接受他们不能赢的事实。无论他们设计的尺寸和分辨率如何，不同屏幕尺寸的结果总是一种妥协。本章的其余部分将帮助你为你的网站或你的客户的网站找到最佳的折衷方案。
下一节讨论三种类型的布局:固定、流动和半流动。它描述了它们的问题、局限性和可能的解决方案。
注意除了 CSS 文件中粗体显示的<title>标签和属性的内容外，接下来三个例子的标记是相同的。CSS 表中包含了高度以生成简短的屏幕截图，但是通常不应该指定高度，因为根据内容的数量，每个页面需要不同的高度。出于指导目的，位置ids用于指示列位置。
显示器和固定宽度布局的问题
我有时被要求接管一个旧的、固定宽度的网站，它是为分辨率为 800 像素× 600 像素的屏幕设计的。这位所有者感到不安的是，在现代屏幕上(1024 × 768 分辨率以上)，网站页面看起来太小。随着更高分辨率和大屏幕的出现，页面开始变得像邮票。
我可能会将网站重新设计为 1024 × 800 的固定宽度，并接受这一事实，即它会导致用户在 800 × 600 的屏幕上水平滚动。固定宽度的网站是最容易设计和控制的，因为大多数网站都是固定宽度的，所以用户目前接受了它们在大屏幕上的局限性。在未来的某一天，1024 像素的固定宽度将需要增加，以匹配不断增加的屏幕尺寸和分辨率。
图 12-2 显示了一个 19 英寸屏幕上的固定宽度布局。
***图 12-2。*19 英寸屏幕上一个简单的三列 980 像素固定宽度布局示例。这个页面几乎填满了一个水平分辨率设置为 1024 像素的屏幕。
图 12-2 中的网页有一个固定的 980 像素的宽度，并以其自然分辨率显示在 19 英寸的屏幕上。固定宽度(980 像素)是目前最流行的。它被像www.bbc.co.uk这样的网站所使用。如果通过使用光标向左拖动右侧边缘来缩小水平尺寸，则边缘会在内容上滑动，就像在内容上拉上窗帘一样。这是一种很好的做法，因为内容布局不会因为缩小宽度而受到干扰。在较小或较低分辨率的屏幕上，或者当用户缩小屏幕时，页面上的元素可能会相互滑动。这可以通过使用 CSS 定位或者将容器设置为固定宽度来防止，如清单 12-2b 中的所示。
从本书的页面 ` `www.apress.com`` 下载本章的代码文件。在 19 英寸的屏幕上，在浏览器中查看这三个文件，屏幕分辨率设置为其原始分辨率，然后尝试缩小浏览器窗口的宽度，以测试当水平宽度减小时布局不会折叠。
清单 12-2a 的产生如图图 12-2 所示的屏幕显示。
注意在接下来的三个例子中没有使用语义标签，这是为了使标记简单，便于教学。
清单 12-2a。【fixed-3col.html 创建固定宽度页面
`<!doctype html>
- Column 1 Navigation menu
- Link 1
- Link 2
Main panel for content
Mary had a little lamb, it walked into  some soot, and everywhere that Mary went, his sooty foot he put. I don't wish to  know that, kindly leave the stage
` `通过简单地插入width:980px;，宽度在 CSS ( fixed.css)中是固定的。这在清单 12-2b 中以粗体显示。
***清单 12-2b。*清单 12-2a 的 CSS 样式表 (fixed.css)
Width:100%; body { text-align: center;background-color:yellow; font-family:"times new roman"; font-size:large; font-weight:bold; } #container {**width:980px;** padding: 0; text-align: center; margin:auto;  background-color:white; } /* set widths and float on nav col and col 3*/ ul { float: left; padding:0; margin:0; width: 100px; height:120px; } li { padding-left:0; margin-left:0; list-style-type:none; text-decoration:underline; } #col-3 { float: right; width: 100px; height:120px; } /* set main-panel margins 5px greater than ul column and col-3 widths*/ #main-panel { margin-left: 105px; margin-right:105px; } #hdr { font-size:x-large; font-weight:bold; } /* force footer to stay at the bottom */ #ftr { clear: both; font-size:x-large; font-weight:bold; } /* show boundaries by using colors - for clarity only */ #hdr, #ftr { background: fuchsia; } ul, #col-3 { background: aqua; } #main-panel { background: white; }
我们接下来检查液体布局，这是为了应对屏幕宽度的变化而开发的。在一段时间内，这是一个合理的解决方案，但随着屏幕变得更宽，屏幕分辨率增加，很明显，液体布局有自己的问题。这些将在下面解释。
显示器和液体布局的问题
在较小的屏幕上，动态网站可能会因为浮动下降而崩溃。这意味着页面上的一个元素，比如一个图像，会被放到其他元素的下面。参见第十九章浮动下降故障排除。
流动网站还有另一个问题:文本可以在高分辨率的宽屏上延伸，使得阅读困难；读者的头像雨刷一样来回摆动。为了解决这个问题，您应该总是在列中显示文本。在高分辨率的宽屏上，液态布局会导致在线图片之间出现难看的大间隙。这可以通过将图片一张一张地放在页面上，图片的旁边放上文字来部分解决。
如果你有流动页面的问题，并且你有一个期限要满足，不要在上面花太多时间，而是改变成固定宽度(比如说 980 像素)。然后回到发射日期之后的问题。
如果 CSS 背景图案是重复的图案，它可以是液体。这可以通过重复背景给人以连续性的印象，使其跨越整个屏幕的宽度和高度。
在图 12-3 中显示了一个充满 19 英寸屏幕宽度的液体布局页面。
***图 12-3。*简单流畅的三栏布局。本示例填充任意屏幕宽度的 100%。请注意中心文本的跨度。在高分辨率的屏幕上，这种效果会更糟。
在 1024 水平分辨率的屏幕上设计的液体布局在更小分辨率的屏幕上看起来会很凌乱。清单 12-3a 及其 CSS 清单 12-3b 通过将容器的宽度设置为 100%来提供一个液体布局。这以粗体显示。
清单 12-3a。【liquid-3col.html】创建一个充满任意屏幕宽度的液体页面
`<!doctype html>
- Column 1 Navigation menu
- Link 1
- Link 2
Main panel for content
Mary had a little lamb, it walked  into some soot, and everywhere that Mary went, his sooty foot he put.  I don't wish to know that, kindly leave the stage
在清单 12-3b(CSS 样式)中，液体布局使用 100%的宽度，但是液体布局可以有更小的百分比。液体布局的关键是用百分比而不是像素来定义宽度。
***清单 12-3b。*清单 12-3a 的 CSS 样式表 (liquid.css)
/* flood the background with yellow */ body { text-align: center; background-color:yellow; font-family:"times new roman";  font-size:large; font-weight:bold; } #container {**width:100%;** padding: 0; text-align: center; margin:auto; background-color:white; } ul { float: left; padding:0; margin:0; width: 100px; height:120px; } li { padding-left:0; margin-left:0; list-style-type:none; text-decoration:underline; } #col-3 { float: right; width: 100px; height:120px; } /* set panel margins 5px greater than ul and col-3 widths*/ #main-panel { margin-left: 105px; margin-right:105px; font-weight:bold; } #hdr { font-size:x-large;font-weight:bold; } /* force footer to stay at the bottom */ #ftr { clear: both; font-size:x-large; font-weight:bold; } /* show boundaries and set colors - for clarity only */ #hdr, #ftr { background: fuchsia; } ul, #col-3 { background: aqua; } #main-panel { background: white; }
我们已经看到固定布局和流动布局都有它们的问题。在下一个例子中，我们将使用半液体布局来检查一个可接受的解决方案。
监视器和半液体布局
半液体布局是液体布局的变体，它使用两个特殊属性，即min-width和max-width。使用半流体布局的页面如图图 12-4 所示。
图 12-4 。限制最大和最小宽度的半液体布局。这是最好的妥协。
图 12-4 显示在一个 19 英寸的屏幕上，设置为其原始分辨率。该页面被设计为水平宽度永远不超过 1200 像素；因此，白色面板中的内容不会过度拉伸。在分辨率低于 960 像素的屏幕上观看时，观众必须滚动屏幕才能看到右侧的一些列。把非必要的信息放在右边一栏是个好主意，比如演职员表和广告。这使得主要内容完全符合设计者的意图，无论使用什么分辨率或大小来查看它。清单 12-4a 及其相关的 CSS 清单 12-4b 提供了如图图 12-4 所示的半液态布局。
清单 12-4a。【liquid-3col-max-min.html 创建半流动页面
`<!doctype html>
-
Column 1
Navigation menu - Link 1
- Link 2
for other information
Main panel for content
Mary had a little lamb, it walked into  some soot, and everywhere that Mary went,
his sooty foot he put. I don't  wish to know that, kindly leave the stage
CSS 清单 12-4b 为屏幕宽度变化的问题提供了一个简洁的解决方案。属性max-width和min-width限制显示，使其不会变得太宽，也不会缩小到布局分崩离析的程度。宽度是一个百分比，就像液体布局一样，限制由粗体显示的代码设置。
***清单 12-4b。*清单 12-4a 的 CSS 样式表 (liquid-maxmin.css)
/* flood the screen with yellow*/ body { text-align: center; background-color:yellow; font-family:"times new roman";  font-size:large; font-weight:bold; } #container { width:95%; margin:auto; background-color:white; text-align: center;  **max-width:1200px; min-width:960px;** } #hdr { font-size:x-large;font-weight:bold; } /* set widths and float on nav col and col 3*/ ul { float: left; padding:0; margin:0; width: 100px; height:120px; } li { padding-left:0; margin-left:0; list-style-type:none; text-decoration:underline; } #col-3 { float: right; width: 100px; height:120px; } /* set panel margins 5px greater than col-1 & col-3 widths */ #main-panel { margin-left: 105px; margin-right:105px; background-color:white; } /* force footer to stay at the bottom */ #ftr { clear: both; } /* color the elements - for clarity only */ #hdr, #ftr { background: fuchsia; } ul, #col-3 { background: aqua; } #main-panel { background: white; }
通过结合两种技术——全宽体背景色和半液体布局——一种可接受的解决方案可以应用于屏幕宽度和分辨率变化的问题。
可接受的妥协
使用半流体网站容器或包装。给正文一个背景色或渐变，以填充任何屏幕尺寸和分辨率。在 CSS 中定义该颜色，如下所示:
/* Flood the whole screen with yellow*/ **body { background-color:yellow; }** **#container { width:95%; min-width:960px; max-width:1200px; margin:auto; }**
这给了页面的印象，它充满了屏幕(主体的背景)，同时将内容**(#container)**很好地布置在屏幕的中央。让标题/横幅填满屏幕的宽度可以强化这种印象，但这并不总是有吸引力的。具有最小宽度的半液体容器防止布局在较小的分辨率下破碎。最大宽度限制确保内容不会蔓延到大屏幕上，在元素之间显示巨大的间隙。
其他考虑因素可以决定网站的布局。你需要向你的客户咨询他正在使用的设备以及他对该设备的未来意图。手持设备的出现也使选择合适布局的问题变得复杂。
其他与显示器相关的注意事项
当设计一个供办公室或工厂内部使用的网站时，您需要实地考察以确定屏幕尺寸和分辨率。如果员工不得不连续水平滚动来访问页面上的项目，他们会不高兴。如果公司投资购买屏幕更大的新设备，你将需要改变集装箱的宽度来匹配。为了便于阅读，你可能需要将文本分成两栏。
注意对于宽布局，尤其是流动布局，使用两栏文本是非常重要的。参见第十三章设计两栏或多栏文本的方法。
其他类型的用户和设备将越来越需要特殊考虑。具有不同操作系统和浏览器的新手持设备的出现使网站设计者面临的任务变得复杂并增加了难度。
网站能在手持设备上运行吗？
手持是一个描述手机和平板电脑的术语。手持设备的设计本身就是一本很大的手册，因此，在本书中只会简单提及。许多为台式电脑设计的网站已经在更大的手机和平板电脑上运行得相当好了(只要它们有效，并且不包含框架或表格布局)。
Maximiliano Firtman(O ’ Reilly Media，2010 年)写的《移动网络编程》》是一本关于这个主题的书。
问题
可以浏览网站的手持设备的出现是网页设计者最近的噩梦。屏幕分辨率可以从 176 × 220 像素到 1280 × 800 像素不等。手机一般都有比宽度高的人像式屏幕，屏幕从 2.8 英寸到 4 英寸不等。平板电脑屏幕从 3.2 英寸到 10 英寸不等。三星 Galaxy Tab 10.1 的显示屏为 10.1 英寸，分辨率为 1280 × 800。苹果 iPad 的显示屏为 9.7 英寸，像素为 1024 × 768。一些手机和大多数平板电脑能够将屏幕视图从纵向翻转到横向。更高的分辨率在手持触摸屏设备上是可能的，因为它们不需要为键盘提供空间。原来手持设备不是手机就是平板；现在，这种区别变得模糊了，因为平板电脑整合了手机和相机。
在 2011 年的消费电子展上，展出了不少于 80 款平板电脑。至于操作系统，目前这场战斗是在几个平台/浏览器之间进行的，而且这种情况似乎会加剧。其中包括 iOS4 OS6 4，Android，Opera，Windows 7，Windows 8，WebOS，Blackberry OS，Simbian 和 QNX 中微子。
起初，手持设备的浏览器是桌面浏览器的改编。它们现在更有可能是专门为手持设备设计的。浏览器必须比桌面浏览器更紧凑，因为手持设备的内存更少，也没有硬盘来交换内存。
手持设备的浏览器更紧凑；这意味着他们已经放弃了大部分补偿标记错误的代码。因为它们的容忍度较低，所以页面的验证变得绝对必要。
网页设计师有时会制作不同的样式表来匹配微型屏幕、各种移动浏览器、低分辨率和各种操作系统。手持设备用户熟悉使用缩放工具来浏览网页。如果你为手持设备创建特殊的样式表，尽量减少水平滚动的需求。当提供这些替代样式表时，将它们的链接放在任何其他链接之前，如下所示:
`
`为网站创建替代样式需要大量的反复试验，然后在移动设备上进行一系列测试。有 80 种不同的手持设备和众多的平台和浏览器，这项任务确实令人生畏。没有一个网页设计师能够保证样式表适合所有的设备。
因此，设计师的首要任务是决定哪些网站最有可能在手持设备上被浏览。然后，她应该集中精力让它们便于手持。
网页设计师面临着艰难的选择。他们可以决定
- Ignore handheld devices.
- Designed for desktops, laptops, netbooks, tablets and mobile phones with screens larger than, say, 6 inches.
- Designed for desktops, laptops, netbooks, tablets and mobile phones with screens larger than, say, 6 inches, and two or three smaller and most popular handheld devices.
- Try to accommodate everything.
选择一和选择二是可以管理的。第三种解决方案要求您使用一些测试方法。第四个解决方案的学习曲线有珠穆朗玛峰那么长。大公司有时间和人力为手持设备和平板电脑创建完全独立的网站。有关如何为解决方案二和三设置和创建替代样式表的一般指导，请访问[www.opera.com/developer/tools](http://www.opera.com/developer/tools)。
Opera 网站包含有用的工具，包括平板电脑和手机模拟器。
为手持设备制作另一个样式表
一个解决方案是为手持设备设计一个特殊的样式表，使显示可以接受。但是，您可能会发现，您还需要修改 HTML 标记。通过仔细规划，这可以保持在最低限度。下面是一些关于修改标记的提示，这样您就可以在支持桌面和手持设备的 HTML 页面中使用两个样式表。
- Reduce the size and number of images.
- Simplify the homepage and make it a container for links to other pages. Links should be a simple, vertical and unordered list.
- Text should be in one column, and the maximum width should be limited as much as possible to avoid horizontal scrolling. Keep banners and signs to a minimum or hide them.
- The number of words should be compressed to an absolute minimum. Be sure to check a large number of websites on handheld devices, so that you can see the advantages and disadvantages of website adaptation.
测试网站的手持兼容性
个人网页设计者或小团队在提供测试手持设备方面会有问题。这是因为设备种类繁多，而且有多种操作系统和浏览器。以下是一个可能性列表:
- Let children, grandchildren or friends check your website with handheld devices and let them express their opinions on any problems.
- Download some handheld simulators of test websites. Buy some handheld computers or pay for some of the most popular models every month.
- Enter “Remote Device Access” in the search engine to check the results of possible remote test facilities.
- W3C has a mobile tag verifier at
[validator.w3.org/mobile](http://validator.w3.org/mobile). Upload your file or URL to see if the tag is suitable for handheld devices.
模拟器
我在网上找到了几个可下载的模拟器，但是它们很难安装和掌握。我需要一个官样文章的博士学位来遵循说明；然而，我确实在 Opera Mini 模拟器上取得了一些成功。安装后，它有一个启动器，可以让你选择各种屏幕尺寸、分辨率和方向(横向或纵向)。
可以从[www.opera.com/developer/tools/](http://www.opera.com/developer/tools/)下载 Opera 模拟器。
模拟器操作起来很棘手，但是 Opera 开发者网站上的帮助文件解释了非直观的控件。有关帮助文件，请访问[dev.opera.com/articles/view/opera-mobile-emulator/](http://dev.opera.com/articles/view/opera-mobile-emulator/)。
总结
本章讨论了台式机和笔记本电脑显示器的颜色、尺寸和分辨率差异很大的问题。涵盖了折衷解决方案；这些可以下载并在各种屏幕上试用。幸运的是，显示器的物理尺寸有其自身的限制；很少有用户有空间容纳 23 英寸以上的屏幕。您还了解了max-width和min-width属性如何为屏幕尺寸变化问题提供最佳解决方案。
手持设备现在可以接收和查看网站。我们简要介绍了这些设备带来的问题。手持设备的大小差异很大，并且有许多不同的操作系统。每个月都会有新的浏览器推出，而且它们的浏览器也经常升级。为手持设备设计网站的手册将很快过时。
下一章与本章密切相关，讨论网站在屏幕上的外观。您将了解是什么让一个页面对用户有吸引力，以及如何让用户有足够的兴趣去浏览这个网站，而不是去逛另一个网站。你还会发现这个网站的实用性是如何帮助实现这个目标的。
扫一扫
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
