编辑“设计WordPress标题栏”（章节）

==标题栏设计==
标题栏设计是出现在网页设计领域的新名词。互联网上有很多利用色彩、形状、符号、图片以及文字的组合手工制成的标题栏图片。制作这些图片需要一定的时间和精力。虽然也有免费的标题栏设计网站，但仍然有些网站会出售自己制作的标题栏。我们平时使用的相片虽然各有独到之处，并且也能营造出必要的视觉效果，但手工制作的标题栏可能更符合网页色彩需要，通常也因为自身的独特性而具备更显著的美学价值。

使用定制的标题栏设计有以下好处：设计者已经为我们完成了几乎所有工作，我们只要选择最符合自己网站风格的产品；标题栏图片也已经准备就绪，不需要我们再调整图片大小或者另外保存。

[http://www.digitalwestex.com/gallery/index.php Digital Westex's WordPress Header Art]中推荐了大量的WordPress专用标题栏设计，可免费下载。

===标题栏设计的版权问题===

如果不想自己设计标题栏，最好的选择是采用符合知识共享许可协议（Creative Commons License）、注明可公开使用的标题栏。采用图片前请先阅读图片的独立许可文件，确保自己有权在自己的网站上使用这些图片。通常情况下使用图片时需要尊重图片所有者的版权，支持共享精神，不将其作为商业用途。如果遇到任何问题，请先咨询版权所有人以获取使用权限。

标题栏设计由设计人员以“现状”发布，因此在没有得到原创者的许可前，我们不能随意修改标题栏的设计。我们可以查看产品网站的版权信息与许可证情况，询问是否可以修改其产品。

===自己设计标题栏===

我们也可以自己动手设计一个标题栏。选择一个图形处理程序开始设计。较受欢迎的图形处理程序包括Adobe [[Photoshop]]、Adobe Elements、JASC PaintShop Pro、The Gimp 与Macromedia [[Fireworks]]。所选的图片处理程序需要能够调整图片的分辨率，同时还必须可以选择保存时的文件类型。所选标题栏图片的大小应与网站上的标题栏框架大小一致。

可以选择自己的相片、艺术作品、字体以及各种图片组合来作为标题栏背景图片。处理完图片后，保存为jpg、gif或png格式的文件。[http://www.sitepoint.com/article/gif-jpg-png-whats-difference Sitepoint's GIF-JPG-PNG What's the Difference]介绍了这三种文件类型的不同之处。这些格式会缩小图片尺寸并压缩图片的分辨率。一般说来，为了不影响到网站的加载时间，应尽量保证所用图片小于50K。

[[Image:201003008.jpg|设计WordPress标题栏]]

===隐藏标题栏文字===
有些主题开发人员希望自己的主题标题栏上只显示图片而没有文字，而有些则会在图片上显示一些文字，但这些文字没有什么特别用处。有一个解决方法：删除可以生成网站标题和副标题的模板标签。还有一个解决方法是隐藏标题和副标题，这样就可以不删除任何内容。

要隐藏标题栏文字却将代码仍然保留，不修改模板文件中任何内容，只修改[[CSS]]。我们可以为自己不希望出现的CSS选择符添加display:none属性。例如，隐藏h1选择符中的文本信息：

 h1 {display:none; font-size: 230%; color: blue;.......

h1标签中的内容还在代码中，但浏览器已经接到命令，不以任何方式在页面上显示这些内容。

这些内容已经被隐藏，但一些网页屏幕阅读器和[[搜索引擎]]仍然能找到被隐藏的信息。考虑到网站的可访问性，一些新型文本阅读器访问样式表时就不读取标记为 display:none的元素。人们常用两种方法来解决这个问题。第一个就是根据上面介绍的方法使用display:none，但同时为选择符添加一个aural（听觉）样式表，使属性变为display:block。另一种方法是通过缩进显示将内容“搬离页面”。下面是一个示例：
 h1 {
 font-size: 0;
 text-indent: -1000px; }
这种方法将整个h1标签及其内容从网页上删除。但屏幕阅读器仍然能够“读取”这些内容，因为实际上它们只是没有显示在网页上，却仍然留在代码中。根据后来的测试，这种方法适用于大多数[[浏览器]]以及所有屏幕阅读器。

更多关于aural样式表和缩进方法的信息：
*[http://simon.incutio.com/archive/2003/09/13/screenReaders Testing Screen   Readers and display:none]
*[http://www.alistapart.com/articles/fir/ Facts and Opinion About Fahrner   Image Replacement]
*[http://blog.rd2inc.com/archives/2005/01/07/hiding-text-but-not-from-screen-readers/ Hiding   Text But Not From Screen Readers]
*[http://www.w3.org/TR/REC-CSS2/aural.html W3's Aural Style Sheets]
*[http://webdesign.about.com/cs/css/a/aa093002a.htm About Web Design's   Aural Style Sheets]
*[http://www.htmlgoodies.com/beyond/css/article.php/3470211 ACSS: Aural   Style Sheets]
*[http://www.richinstyle.com/guides/aural2.html Richinstyles Guide to Aural   Style Sheets]
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*