这个教程将会教给你如何轻松的设计背景。在你的设计中应用这些技术可以让你轻松的对背景颜色、背景的大小、可伸缩度进行调整。让你只需付出一点点努力,就可以对背景拥有前所未有的掌控。
让背景更简单
假设你正在为你的客户(或者你自己)做图,在这幅图上颜色偶尔会发生变化,或者你需要尝试几种不同的颜色。要实现这个目的的一个方法是创建几个不同的文档,在每一个文档中,手动调节颜色、大小并将不同元素放置于不同的位置。
我们好奇的想知道,”难道不应该有一种更简单的方法来实现它吗?”
事实上,有更加简单的通过使用形状图层、混合模式和调整图层的方法来创建此文档。在这个教程中,我将会向你展示如何创建一个仅仅只需要几下点击就能够作出调整的背景。
从构思到全部完成,我用了一个多月的时间,到今天,终于完成了新主题的设计。也就是当前你所看到的飞鱼的声纳的主题。给这个主题简单起了一个名字,叫Green Gaint,原因是整个界面的主色调是在暗色背景里的绿色,就好像那种并不是很喜欢有太强烈阳光的植物–绿巨人。另外,使用”Gaint”这个词还有另外一个意思,就是希望飞鱼的声纳能够做的越来越好,慢慢的成长为在我心目中的一个巨人。
Green Gaint这款主题的创意和布局参考了Tutorial9的设计,主要体现在页面上部宽大的分类导航按钮以及其它的一些细节。这个主题比较有特点的地方是主内容区上方基于jQuery的滑动展示区域以及侧边栏的可自动切换内容的按钮。
在整个的设计过程当中,最让人头疼的就是保证兼容性的跨浏览器的调整了,说是跨浏览器,实际上主要就是针对IE6的调整。着实让我费了不少的脑筋,中间实在搞不定的时候,都考虑是不是要阻止IE6的访问了。最终还是没能做出这个决定,因为我估计目前还在使用IE6的人不在少数。在此强烈建议各位还在使用IE6的同志,赶紧升级你们的浏览器吧,不费多大功夫。
下面将这次设计过程当中要注意的几个问题写出来,以备下次参考:
一、设计不仅包括布局等大的方面,一些小的部分的设计也要考虑到,比如文章当中的代码样式、段与段之间的留白,<more>标签的设计等等,都要事先在Photoshop中考虑好,设计出来,免得在写CSS时不知道该设计成什么样式,耽误时间。
二、在同时使用width属性和padding-left以及padding-right属性时或者同时使用height属性和padding-top以及padding-bottom时,要留意IE6的盒模型bug,使用!important来解决。当float属性和margin属性同时出现时,要留意IE6的双边距bug。
三、调用wordpress的php代码太不熟悉,很多代码都是临时查的,比如只在第一页显示滑动区域,创建一个个性化的存档页面等等。要多学习这方面的内容。
最后希望你能喜欢这个主题,有什么问题请在评论区留言。
wordpress默认的内存大小为32m,如果安装插件过多,很可能在升级时出现内存不足的问题。显示提示文字为”Allowed memory size of 33554432 bytes exhausted”,如何解决此问题呢?方法如下:
一、登陆你的域名的cPanel,使用cPanel下的Unlimited FTP之类的工具在public_html目录下找到wp-setting.php文件,将其下载到本地。下图即为登陆cPanel的Unlimited FTP工具。

二、使用Notepad++或者EditPlus之类的编辑器打开已经下载的wp-setting文件,将第13行的define(‘WP_MEMORY_LIMIT’, ’32M’);代码中的32更改为64、128、256等数字,一般64M就足够了。注意要谨慎使用windows中自带的记事本来编辑此文件,它可能会改变wp-setting.php文件的编码,导致错误的出现。
三、再次使用cPanel中的Unlimited FTP将已经修改好的wp-setting.php文件上传,覆盖原有的文件,这样增加了wordpress的内存之后,在此升级wordpress就不会出现内存不足的问题了。
首先需要说明的一点是,如果你在网站页面中点击了分类页面,那么wordpress首先会自动寻找category-X.php文件,其中的X代表分类页面的ID,比如在飞鱼的声纳,category-44.php代表的就是有关时间管理的分类页面,要查看分类页面的ID号,你可以将鼠标放置于分类列表上,在浏览器的左下角就能看到类似于 http://startwmlife.com/?cat=44的链接,其中的数字44就是此分类页面的ID。如果在你的wordpress主题文件夹中不存在category-X.php文件,那么wordpress就会寻找category.php文件,如果category.php文件也不存在,它就会寻找archive.php文件,如果archive.php文件依然不存在,wordpress就会接下来寻找index.php文件,这个文件肯定是有的,要不然wordpress主题也就不能成为主题了。一般来说,设计者所设计的wordpress主题中,至少包括index.php文件和archive.php文件。
下面是一个category-x.php文件示例:
<?php get_header(); ?>
<div id="content">
<div id="contentleft">
<div class="postarea">
<?php include(TEMPLATEPATH."/breadcrumb.php");?>
<h1><?php single_cat_title(''); ?></h1>
<!-- 上面h1标签中的代码调用分类页面标题,比如"时间管理" -->
<img src="<?php bloginfo('template_url'); ?>/images/motorcycles.png" alt="<?php bloginfo('name'); ?>:
<?php single_cat_title('',); ?>" />
<!-- 上面img标签中的代码调用指定到分类页面的图片,比如指定给时间管理页面的一个钟表图片。这个图片要预先上传到主题文件夹内 -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<div class="date">
<div class="dateleft">
<p><span class="time"><?php the_time('F j, Y'); ?></span> by <?php the_author_posts_link(); ?>
<?php edit_post_link('(Edit)', '', ''); ?> <br /> Filed under <?php the_category(', ') ?></p>
</div>
<div class="dateright">
<p><span class="comment"><?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
</span></p>
</div>
</div>
<?php the_content(__('Read more'));?><div style="clear:both;"></div>
<div class="postmeta2">
<p><span class="tags">Tags: <?php the_tags('') ?></span></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
<p><?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?></p>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>


