四眼天兔工作室- PSD转HTML / XHTML,CSS / W3C验证 / 多浏览器支持

2009/03/01

博客搬家啦！

发帖者 4EB Studio

经过一段时间的努力，新网站终于建成了，同时还为工作室的博客建立了新家，欢迎大家以后常到新家坐坐，那里的文章会更精彩。

新的博客地址为：http://www.4ebstudio.com/tips

RSS地址：http://www.4ebstudio.com/feed

2008/11/14

Wordpress模版设计学习系列(一)：在本地安装Wordpress

发帖者 4EB Studio 标签：网页设计 Web Design

这篇文章是《学习用mac机设计wordpress模版》系列的第一部分。在本部分中，Nika将教大家如何在本地安装Wordpress，天兔也要开始跟着一起学习了。

首先需要说明的是，使用本地服务器安装Wordpress可以节省更新和预览文件的时间，同时可以通过本地服务器测试新的插件，主题以及更新。当然，如果你愿意使用支持PHP和MySQL的网络服务器学习Wordpress模版设计，也可以了，那你就可以省掉这部分的内容，直接进入第二部分吧（目前还要等等了）。

概要：

如果你有一些技术背景的话，你可以略过这些步骤。下面将要展示的是在本地安装WordPress的几个简单的步骤。

1.安装本地服务器（MAC用户请使用MAMP，PC用户请使用XAMPP）

2.创建一个新的数据库

3.从Wordpress.org下载WordPress包，并且解压到htdocs路径下

4.重命名wp-config-sample.php文件为wp-config.php，并更新本地数据库

5.运行wp-admin/install.php，根据提示进行Wordpress的安装

6.安装完毕

现在开始！

在开始之前，让我们看看运行WordPress的系统需求：

PHP 4.3+
MySQL 4+ 数据库服务器

1.安装本地服务器

为了在本地运行任何的PHP／数据库应用程序，你需要一个本地服务器（如Apache+MySQL）。对MAC用户来说可使用MAMP，对PC用户来说可使用XAMPP。

因为我用的是Mac(呵呵，和天兔一样了)，所以我将安装MAMP。

2.创建一个新的数据库

安装完MAMP以后运行，它将带你进入起始页面。点击顶部菜单中的phpMyadmin。在phpMyadmin页面中，建立一个新的数据库（例如wordpress）.

3.下载WordPress

前往Wordpress.org下载最新版本的WordPress。前往htdocs文件夹（你安装MAMP的地方，一般默认为/Applications/MAMP），解压Wordpress.zip到一个新的文件夹(比如mysite)

4.更新wp-config.php文件

进入mysite文件夹，重命名wp-config－sample.php文件为wp-config.php。打开wp-config.php文件并且根据你的服务器更新数据资料(db_name,user,password,host)。

5.运行install.php

在你的浏览器中输入http://localhost:8888/mysite/wp-admin/install.php，根据提示安装WordPress。

后续：

在下一篇中，我将像你们讲述如何以纯设计师(无需懂得PHP语言)的角度来制作个性化的WordPress主题模版。

天兔提示：

1.如果你是个彻底的新手，那么建议你完全按照图例中的字样(名字)设置，以免中途出现错误。

2.MAMP提供标准版和专业版两种，建议初级用户使用标准版即可。需要汉化版的MAMP，请前往http://mac.deray.org/MAMP.html下载。

学习用mac机设计wordpress主题模版

发帖者 4EB Studio 标签：网页设计 Web Design

前一阵遇到一位达人，从他那里又进一步认识了现在网页设计的趋势和需求所在。而这位达人对我的鼓励让我更加坚定了自己所选则的道路。在这里，真心的谢谢他。

这两天除了学习jQuery以外，还开始学习几个主流CMS系统的使用，当然最终的目的是学习其模版的设计。

之前曾经介绍过国外10款最常用的博客管理系统，而我现在整要学习其中的两个:wordpress以及joomla，再外加一个电子商务的管理系统zen-cart。

一直在网页上寻找好的wordpress模版制作教程，都没有什么太合适的，倒是见过两篇国内设计师写的，不过都是基于win平台的，而且没有从本质上讲解，不太适合新手。

今天有幸在Web Designer Wall上看到站长Nika La准备撰写的名为《wordpress模版设计完整教程》的系列文章，真的是兴奋不已。喜欢这位设计师的文章，除了他的设计思维和理念以外，他的教程也简单易懂，当然还有就是他也是使用mac机进行网页设计和开发的（这一点也是为什么我喜欢看欧美网页设计文章的原因），让我学起来更顺手。

该篇文章共分为三部分：

第一部分：在本地安装Wordpress

第二部分：建立自定义Wordpress模版

第三部分：移动和导出Wordpress

因此我也会跟随Nick的进程一起来学习Wordpress模版设计。如果你是一个wordpress的新手或者正在学习wordpress模版，更或者你也是使用mac机的网页设计师，欢迎你和我一起来学习，探讨。

我的联系方式：

QQ:920492714

MSN:4ebstudio@live.cn

iChat:iris0327@mac.com

加入时请您务必注明“网页设计探讨”字样，谢谢！

2008/11/12

学习10款常用的jQuery特效

发帖者 4EB Studio 标签：网页设计 Web Design

最近开始学习jQuery，这款大受好评的轻量级javascript库。买了本《jQuery基础教程》(Learning jQuery)，刚开始看。很喜欢看国外的这些书籍，译本也好，原文也好，感觉讲的很透彻，基本都是以最先进的互联网标准作为依托讲解的，帮助读者建立全新的web design观念。这些也是国内类似的书籍出版商和作者应该学习的。多看看这些文章，绝对会使你的设计水平和国际接轨。

今天在Web Designer Wall上看到了这样一篇关于jQuery的文章，感觉非常实用，拿来编译一下和大家分享。当然你也可以直接查看原文。

该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。

jQuery如何运行?

首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在<head>标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。

如何获取元素?

编写jQuery函数相对来说比较简单。你需要掌握的关键点就是如何准确的使用你所需效果的元素。

$("#header") = 获取id为"header"的元素
$("h3") = 获取所有标签为<h3>的元素
$("div#content .photo") = 获取所有<div id="content">内类为"photo"的元素
$("ul li") = 获取所有<ul>内的<li>元素
$("ul li:first") = 获取<ul>内的第一个<li>元素

1.简单的滑动版

让我们从最简单的滑动版开始。你可能已经见过很多类似的效果了，当你点击一个链接的时候，一个滑动版便向上(下)展开 (view demo)

当类名为"btn-slide"的元素被点击的时候，它将向上(或下)切换(slideToggle) <div id="panel">元素，然后切换一个CSS类"active"到<a class="btn-slide">元素。通过使用css样式，类名为.active的元素将会切换箭头图片的背景位置。


$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});


});

2.简单的消失效果

该示例向你讲述如何设计点击图片按钮后该区域内容消失的效果 (view demo)

当图片元素<img class="delete"> 被点击的时候，它会查找其父元素 <div class="pane">，并且缓慢的隐藏其透明度。

$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});


});

3Chain-able过渡效果

现在让我们来看看jQuery强大的Chain-able效果。仅需几行代码就可以设计出一个按比例变化大小并且渐变消失的飞行的盒子。(view demo)

第1行和第2行: 创建<a class="run">元素被点击时的函数

第3行: 赋予<div id="box">元素的.animate函数不透明度值为0.1, 左边可到达的距离为400px, 速度为1200毫秒
第4行: 赋予.animate函数不透明度值为0.4，顶部距离160px, 高20, 宽20, 速度为"slow"
第5行: 接下来赋予.animate函数不透明度值为1, 左边距离为0, 高100, 宽100, 速度为"slow"
第6行: 设置.animate函数的top值为0,速度为"fast"
第7行: 调用slideUp函数 (默认速度值为"normal")
第8行: 调用slideDown, 速度值为"slow"

$(document).ready(function(){
$(".run").click(function(){


$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;


});


});

4a.折叠效果1

下面是一个折叠效果 (view demo)

第1行：为<div class="accordion">内的第一个<H3>元素添加名为"active"的类，并应用css样式("active"类将转换箭头图标的背景位置)。
第2行：隐藏<div class="accordion">内的非第一行的所有<p>元素。

当<h3>元素被点击的时候，它将滑动并切换(slideToggle)下一个<p>元素并且向上滑动(slideUp)它的子元素,然后切换类名为"active"的元素。

$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();


$(".accordion h3").click(function(){


$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");


});


});

4b.折叠效果2

该示例和上面的很类似，不过可以让你自定义默认展开的面板。 (view demo)

In the CSS stylesheet,将.accordion p设置为display:none. 现在，假设你要将第三个面板设置为默认打开的面板。你可以这样写$(".accordion2 p").eq(2).show(); (eq = equal)。注意起始值为0。

$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active");
$(".accordion2 p").eq(2).show();


$(".accordion2 h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});


});

5a.动态悬停效果1

该示例将会创建一个非常漂亮的渐入渐出的动画悬停效果 (view demo)

当鼠标悬停在菜单上的时候，将会查找下一个<em>元素，并创建animate函数，设置其不透明度和顶部位置。

$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});


});

5b.动态悬停效果2

该示例为菜单链接添加title属性，并将它放在一个变量里面，然后附加到<em>标签上。 (view demo)

第一行附加了一个空的<em> 标签到菜单的 <a> 元素上。

当鼠标悬停在链接上时，获取title 属性，将其存放在"hoverText"变量中，然后将带有<em>标记的文本内容赋予变量hoverText的值。

$(document).ready(function(){
$(".menu2 a").append("<em></em>");


$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});


});

6.整个块元素点击效果

该示例展示了如何创建整个块元素点击效果变换的方式。(view demo)

假设你有一个类名为"pane-list"的<ul>a，并让其子元素<li> 的整个模块可以点击。你可以为".pane-list li"创建一个点击函数，当其被点击的时候，函数会查找<a>元素，并重新定向到href属性值的地址。

$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});


});

7.折叠面板

让我们结合前面的一些技术来创建一个可折叠的面板。(view demo)

第1段: 隐藏第一个面板后的所有类名为"message_body"的块

第2段: 隐藏第5个以后的所有<li>元素
第3段：当<p class="message_head">被点击的时候，滑动并且换(slideToggle)到下一个<div class="message_body">块。
第4段: 当<a class="collpase_all_message">按钮被点击的时候，向上滑动所有的<div class="message_body">块。
第5段: 当<a class="show_all_message">被点击的时候，隐藏该元素，显示<a class="show_recent_only">元素,并且向下移动(slideDown)所有第5个以后的<li>元素
第6段: 当<a class="show_recent_only">被点击的时候, 隐藏该元素，显示<a class="show_all_message">元素,并且向上移动(slideUp)所有第5个以后的<li>元素

$(document).ready(function(){
//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();


//hide message li after the 5th
$(".message_list li:gt(4)").hide();


//toggle message_body
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});


//collapse all messages
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});


//show all messages
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});


//show recent messages only
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});


});

8.模仿WordPress的评论后台

我相信大多数人都见过WordPress的Ajax评论管理后台。现在让我们用jQuery来模仿一个。为了制造背景颜色动态效果，你需要使用Color Animations 插件。(view demo)

第1段: 添加"alt"类到所有偶数行<div class="pane">块，(隔行添加灰色背景)

第2段: 当<a class="btn-delete">被点击的时候, 出现提示信息，并变换<div class="pane">的背景颜色和不透明度
第3段: 当<a class="btn-unapprove"> 被点击的时候, 先将<div class="pane">的背景颜色变为黄色，然后变为白色，并添加"spam"类
第4段: 当<a class="btn-approve">被点击的时候，先将<div class="pane">背景颜色变为绿色，然后变为白色，并移走"spam"类
第5段: 当<a class="btn-spam"> is clicked, animate the backgroundColor to red and opacity ="hide"

//don't forget to include the Color Animations plugin
//<script type="text/javascript" src="jquery.color.js"></script>
$(document).ready(function(){


$(".pane:even").addClass("alt");


$(".pane .btn-delete").click(function(){
alert("This comment will be deleted!");


$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});


$(".pane .btn-unapprove").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.addClass("spam")
return false;
});


$(".pane .btn-approve").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.removeClass("spam")
return false;
});


$(".pane .btn-spam").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});


});

9.图像替换

假设你有一套个人图片集，需要在一个页面上显示多幅图像而无须切换页面，你可以加载JPG图像到目标元素上。 (viewdemo)

首先在H2元素上添加一个空的<em>。

当<p class=thumbs>内的链接被点击的时候：

- 将href 属性存放在变量 "largePath"中
- 将title 属性存放在变量 "largeAlt"中
- 替换<img id="largeImg">的scr属性为变量"largePath"，并替换alt属性为变量 "largeAlt"
- 将em内容 (在h2标签内的)赋予变量largeAlt

$(document).ready(function(){
$("h2").append('<em></em>')


$(".thumbs a").click(function(){


var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");


$("#largeImg").attr({ src: largePath, alt: largeAlt });


$("h2 em").html(" (" + largeAlt + ")"); return false;
});


});

10.定义不同的链接样式

在大多数现代浏览器中，定义link选择器是非常容易的。例如，定义一个链接到.pdf文件，你可以简单的使用以下css规则：a[href $='.pdf'] { ... }。不幸的是，IE6并不支持这个语法（这是为什么我们恨IE!的另一个原因）。为了实现这样的效果，你可以使用jQuery(view demo)

前三行应该很容易理解，就是根据href属性为<a>元素添加CSS类样式。

第二段是来获取href属性中不含有"http://www.webdesignerwall.com"字样或者不是以 "#"开头的<a> 元素，然后为其添加"external"属性，并将目标浏览器开启方式设置为"_blank"。


$(document).ready(function(){
$("a[@href$=pdf]").addClass("pdf");


$("a[@href$=zip]").addClass("zip");


$("a[@href$=psd]").addClass("psd");


$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });


});