站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Designing Headers
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==设计页眉样式== 如上边两个例子中列出的,页眉的样式是包含在<tt>h1</tt><tt>header</tt>, <tt>headerimg</tt>, and <tt>description</tt>几种[[WordPress:CSS|CSS]]选择器中的。这些都可以在<tt>style.css</tt>文件中找到,尽管很多可以在你使用的主题中的<tt>header.php</tt>文件里找到。你需要同时检查这两个部分。 在经典主题里,页眉的CSS样式可以在一个选择器中找到,<tt>#header</tt> <pre>#header { background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% 'Times New Roman', Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px; }</pre> 背景颜色设置成绿荫色从而使环绕页眉所有方向的边框改变颜色,创建一种绿荫效果,字体的宽度设置成正常字体间距的230%。在左边的padding 从左边缩进文本。 所有这些都很容易改变,给边线一个大一点的宽度,给它们一样的颜色,改变背景颜色,字体大小和类型,字母间距,还有通过样式属性可以更改更多的信息。 相同点是对于适合的默认WordPress主题页眉,除了有更多的样式考虑和它们可以在<tt>header.php</tt>的 "head" 标签和 '''<i>and</i>''' ,<tt>style.css</tt>中找到以外,你一旦有了你自己的样式设置,你可以把这些信息移到你的样式表中。 控制页眉的外观的样式可以在<tt>h1</tt>, <tt>header</tt>, <tt>headerimg</tt>, 和 <tt>description</tt>CSS选择器中找到。就象经典主题,找到这些参数并修改来改变外观。 改变页眉的默认WordPress主题图片。主题与叫做[http://www.redalt.com/Tools/kubrickr.php Kubrickr]的用法介绍相比,简单化了。它只是简单的要求你为页眉提供一个新的图片文件名,然后为你更换图片,这样你不用再去更改代码了。如果你所要的只是更换页眉的图片,这是最直接最有用最容易的工具了。 如果你想要看看代码,进入代码的页眉样式来做更改的话,以下内容是有关手动的,只改变页眉图片的简单操作指导。 [[WordPress:Image:connectionsthemeheader.jpg|center|400px|联系主题页眉]] ===改变页眉图片=== 有很多种不同的[[WordPress:#Header_Resources_and_Information|页眉图片和页眉艺术]]可以用来改变页眉的图片。默认或者Kubrick WordPress主题的页眉图片,还有其他基于那些主题的主题,比经典主题修改起来更复杂。样式可以在<tt>header.php</tt>的"head"部分找到,也可以在<tt>styles.css</tt>中找到。要是只想改变页眉的图片参数,打开<tt>header.php</tt>模板文件,找到如下样式: <pre>#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") no-repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }</pre> <div style="border:1px solid blue; float:right; width:20%; margin:10px 5px; padding:5px">'''注意:''' <tt>bloginfo</tt>标签的使用只在样式在<tt>head</tt>模板文件中时起作用。WordPress [[WordPress:Template Tags|模板标签]] 在样式表中是没有作用的(<tt>style.css</tt>). 要把这个样式移动到样式表中,改变模板标签为页眉图片的有效地址(URL).</div> 要改变图片文件,就使用一个新的你上传到站点上的文件替换"kubrickheader.jpg"文件。如果在不同的目录中,通过使用图片位置的专用地址替换<tt>bloginfo()</tt>标签来更改。 如果你在使用大小相同的图片,只需简单的替换图片即可。如果大小不同,在<tt>#headerimg</tt>部分填入图片的高度和宽度。如果你不知道,如果你现在使用的是windows系统,用'''Thumbnail'''模式查看图片所在的文件夹。从Windows Explorer菜单中点击'''View > Thumbnail'''。在Thumbnail查看模式下,找到你的图片并把鼠标放在上边,一个气球就会弹出来列出尺寸大小。在样式中使用这些信息。或者,右击图片文件选择'''Properties''',它就会显示出文件大小和尺寸大小了。 保存模板文件,把它和图片一起上传到你的站点并[[WordPress:I Make Changes and Nothing Happens|查看]]。可能还需要一些小的修改来调整整个外观。 改动好页眉图片文件后,该解决页眉其他部分了。打开你的<tt>style.css</tt>样式表文件,查看如下代码: * <tt>h1</tt> * <tt>header</tt> * <tt>headerimg</tt> * <tt>description</tt> 你的主题可能有或者可能没有所有这些,但是默认主题中在样式表的不同的地方有上述全部内容。在需要更改你的页眉的外观时会用到它们中所有或者部分的属性。 如果你改变的页眉图片或者页眉艺术的尺寸,记住改变别的CSS选择器的结构如内容和边栏以适应页眉的改动。 [[WordPress:Image:redtrainthemeheader.jpg|center|400px|Red Train 主题页眉]] ===页眉图片详细说明=== 适合默认WordPress主题的页眉图片的尺寸大约是192 x 740 象素。如果你正打算替换WordPress主题的页眉,需要检查页眉图片的尺寸,然后找到一个适合这个尺寸的替换图片。如果你选择一个小于或者宽于或者高于页眉图片的替换图片,你可能必须要更改网页上的其他结构元素,以适应页眉的修改。 如果你正修改整个站点的主题,全部页面的宽度或者内容区域都需要考虑到。两个最普通的屏幕尺寸是1024x768 和 800x600 象素。然而,宽屏显示器正逐渐增多,网页设计者现在需要为1280x1024 和 1600x1200象素做准备了。 如果你把你的页面设置为"浮动,"定位在浏览器窗口中间,两边留有空间,那么你可以设置你的页眉宽度为任意值。如果你想设计一个带有灵活或者"弹性"的宽度的主题,你的页眉宽度就变的重要起来了。 如果你正使用可重复的页眉图片,你同时在使用弹性宽度,你可以在页眉中设置样式来重复图片填充剩余空间: <pre>#header { background: url("/images/kubrickheader.jpg") repeat-x top left; }</pre> 这样,设置页眉从左上角开始水平重复穿过整个页面。你可以调整这些[http://www.w3.org/TR/REC-CSS2/colors.html#background-properties 背景位置]以适应任何你的页眉和版面的需要。 ===页眉艺术=== 新兴的网页设计领域的一个新术语正在发展,叫做'''页眉艺术'''.这些页眉图片经常是颜色、图形、符号、图片和文本的手工混合。有些[[#WordPress:Resources for Header Images|免费页眉艺术网站]]出现的同时,一些网站也在卖他们的手工制作页眉艺术。尽管一个照片可以是独一无二的,达到了视觉上的效果,手工制作的的页眉艺术更容易的达到了网页颜色的匹配和审美上的愉悦感,因为它们有一种不同的本质。 选择预先做好的页眉艺术有几点好处。艺术家已经做完了这些工作,你所需要做的只是选择最匹配你的网页的设计。图片已经准备好。已经有了大小并作为一个小文件保存起来以供使用了。 [http://www.digitalwestex.com/gallery/index.php Digital Westex's WordPress 页眉艺术] 包含了面向WordPress广泛的页眉艺术并免费提供下载使用。 ====页眉艺术版权==== 如果你不想做你自己的页眉艺术,那么最好的页眉艺术,是那些具有[http://creativecommons.org/licenses/GPL/2.0/ 创造性使用许可]的,明确允许公共使用的页眉艺术。阅读单独的图片使用许可,确定你有在你的页面上使用这个页眉艺术的允许。通常你必须加上作者的名字,共享,并且不能做商业用途。如果有疑问,一定要在使用前获得作者的允许。 如同页眉艺术通过设计者/艺术家的"照原来的样子"的创作和许可,有些页眉艺术在没有作者允许的情况下不能修改。如果你有疑问并且想修改页眉艺术的话,检查网页版权和许可并且咨询。 ====设计你自己的页眉艺术==== 你也可以设计你自己的页眉艺术。任何图形设计软件都可以。比较流行的包括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 有什么不同点]这篇文章。这些文件格式将''压缩''图片的分辨率,减小文件尺寸。总体来说,避免文件尺寸大于50K,因为过大的文件尺寸将减慢访问进入的时间。 [[WordPress:Image:fasttrackthemeheader.jpg|center|400px|快速搜索主题页眉]] ===隐藏页眉文本=== 很多主题和主题设计者希望页眉只有图片而没有文本。有的人会加入一些文本到图形中,因此不要求文本的实际应用。一种做法就是删除模板标签中的生成标题和描述的部分,另一种做法就是保留,但是隐藏它。 要想隐藏代码中留下的页眉文本,不需要改动模板文件中的任何东西,只需要改变CSS。加入<tt>display:none</tt>到你不希望显示的CSS选择器,举例来说,要想隐藏<tt>h1</tt>选择器中的文本: <pre>h1 {display:none; font-size: 230%; color: blue;.......</pre> 文本仍然在,只是浏览器被命令不以任何方式显示它。我们可以认为它"不存在." 可能它已经隐藏了,但是有的网页阅读器或者搜索引擎仍然可以找到它。如果你对你的网页的可用性很严格的话,可以让一些新的文本阅读器进入了样式表而且''不读取''标记为<tt>display:none</tt>的内容。目前有两种流行的方法,一是使用<tt>display:none</tt>,如上所述,但是同样也包含了一个''' 听觉样式表''',更改选择器为<tt>display:block</tt>,"把改变可见度"关上。另一种方法是使用负缩进把内容逐字的"放到页面外"。如 <pre>h1 { font-size: 0; text-indent: -1000px; }</pre> 这个技巧把整个<tt>h1</tt>标签和内容移动到网页之外去了,屏幕阅读器仍然可以"读"到文本,但是不能在页面上显示出来了。广泛的测试表情,目前为止这种技巧对于大多数浏览器和所有的屏幕阅读器都是起作用的。 有关技巧和aural style sheets的更多信息: * [http://eleaston.com/bob/screenreader-visibility.html 屏幕阅读器真正都阅读了什么? (Accessibility and display:none)] * [http://simon.incutio.com/archive/2003/09/13/screenReaders 屏幕阅读器和display:none的测试] * [http://www.alistapart.com/articles/fir/ 关于Fahrner图片替换的事实与观点] * [http://blog.rd2inc.com/archives/2005/01/07/hiding-text-but-not-from-screen-readers/ 隐藏文本,除了屏幕阅读器] * [http://www.w3.org/TR/REC-CSS2/aural.html W3的 听觉样式表] * [http://webdesign.about.com/cs/css/a/aa093002a.htm 关于网页设计的听觉样式表] * [http://www.htmlgoodies.com/beyond/css/article.php/3470211 ACSS: 听觉样式表] * [http://www.richinstyle.com/guides/aural2.html听觉样式表的Richinstyles的指导] ===让整个页眉可以点击=== 要想让这个页眉,图形,可以点击,你有两种方法。你可以把连接的位置改为环绕整个区域,或者把连接加入到特定区域把它们环绕起来。 把整个页眉的WordPress经典主题变为一个可以点击的页眉: <pre><a href="<?php bloginfo('url'); ?>"> <h1 id="header"> <?php bloginfo('name'); ?> </h1> </a></pre> 你可以使用主题作者提供的方法,让整个WordPress默认/ Kubrick主题页眉可点击: * Open <tt>header.php</tt> template file. * Change from <tt><div id="header"></tt> to: <pre> <div id="header" onclick="location.href='http://siteaddress/';" style="cursor: pointer;"> </pre> 如果你只是想把文本区域变为可点击而不是整个页眉呢?按照以下代码把连接加到标题和描述: <pre><div id="header"> <div id="headerimg"> <h1> <a href="<?php echo get_settings('home'); ?>"> <?php bloginfo('name'); ?> </a> </h1> <div class="description"> <a href="<?php echo get_settings('home'); ?>"> <?php bloginfo('description'); ?> </a> </div> </div> </div></pre> 而如果你想两行不同的文本有不同的连接,就改变其中的一个到另外一个连接: <pre><div id="header"> <div id="headerimg"> <h1> <a href="<?php echo get_settings('home'); ?>"> <?php bloginfo('name'); ?> </a> </h1> <div class="description"> <a title="Home Page" href="home.php"> </a> </div> </div> </div></pre> [[WordPress:Image:headthemeheader.jpg|center|400px|顶部主题页眉]] ===旋转页眉图片=== 有几种脚本可以用来让你在页眉、边栏或者其他任何模板文件里旋转图片。我们来看这其中的一种,[http://photomatt.net/scripts/randomimage 随机图片旋转器]. 保存这脚本到另外一个文件夹,文件夹中有你要旋转的页眉图片文件。这个例子我们叫它<tt>rotate.php</tt>。要使用它作为一个每次网页加载后改变或者旋转的背景图片: <pre>#header { background: url("/images/headerimgs/rotate.php") no-repeat bottom center; }</pre> 要想把这加入到你的页眉中,或者站点上其它位置,把下面图片连接加入到<tt>header</tt>层: <img src="/images/headerimgs/rotate.php" alt="A Random Header Image" /> 图片旋转脚本包括: * [http://photomatt.net/scripts/randomimage Photomatt的随机图片旋转器] * [http://automaticlabs.com/products/rotator/ 来自Automatic Labs的PHP图片旋转器] * [http://andersdrengen.dk/projects/randomize/ WordPress 随机插件] [[WordPress:Image:rdcthemeheader.jpg|center|400px|RDC 页眉主题]] ===在页眉中加入导航=== 页眉是网页上可以加入导航元素的另一个部分。是在页眉顶或者底部的水平菜单。想加入导航,在<tt>header</tt>中建立一个新的层,来设计你的页眉导航元素。 这可能就如同在页眉顶部显示使用了'''List Categories''' [[WordPress:Template Tags|模板标签]]的分类一样简单。让我们看看使用了<tt>[[WordPress:Template Tags/list_cats|list_cats()]]</tt>标签的例子吧 在这个例子中,<tt>list_cats()</tt>模板标签在一个无序列表(<tt><nowiki><ul><li></nowiki></tt>)中被设置为按ID排列,没有日期和帖子计数,不隐藏空分类,在连接标题中使用分类"描述",不显示父类的子类,不包括分类1和33。它存在于它自己的"分类"层中。注意"主页"或者首页的连接已经在列表开始的地方包括进去了。 <pre><div id="header"> <div id="categorylist"> <ul><li> <a title="Home Page" href="index.php">HOME</a></li> <?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE, FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE, '', '', '1,33', TRUE); ?> </ul> </div><!-- end of categorylist --> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </div><!-- end of header --></pre> 要设计这个列表, <tt>style.css</tt>中的<tt>#categorylist</tt> 可以是: <pre>#categorylist {font-size:12px; font-style:normal; text-transform:uppercase; } #categorylist ul {list-style-type: none; list-style-image:none; margin:0; padding-bottom: 20px; } #categorylist li { display: inline; padding: 0px 5px;} #categorylist a:link, #category a:visited {color:blue} #categorylist a:hover {color:red}</pre> 看起来可能是这样: <div style="font-size: 105%; color: blue; font-weight:bold; margin:20px; padding: 20px; border:solid 1px blue">WORDPRESS COMPUTERS INTERNET NEWS</div> 同样你也可以把你的[[WordPress:Pages|Pages]],文档和其他的页眉连接加入到页眉导航。有关导航菜单的更多信息请看: * [[WordPress:Good Navigation Links|好的导航连接]] * [[WordPress:Dynamic Menu Highlighting|动态高亮菜单]] * [[WordPress:Creating Horizontal Menus|创建水平菜单]] * [[WordPress:Styling Lists with CSS|使用CSS设计列表]] * [[WordPress:Template Tags/wp_list_cats|wp_list_cats()]] * [[WordPress:Template Tags/list_cats|list_cats()]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)