2009/03/01

博客搬家啦!

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


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

2008/11/14

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

这篇文章是《学习用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主题模版

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

这两天除了学习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特效

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

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

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

jQuery如何运行?

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

how jquery works

如何获取元素?

编写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)

sample

当类名为"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)

sample

当图片元素<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)

sample

第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)

sample

第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)

sample

当鼠标悬停在菜单上的时候,将会查找下一个<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)

sample

第一行附加了一个空的<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)

sample

假设你有一个类名为"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)

sample

第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)

sample

第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)

sample

首先在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)

sample

前三行应该很容易理解,就是根据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" });


});

25款极具创新意义的CSS特效

CSS不仅仅只能处理一些中规中距的日常设计工作。本文将像你介绍25个非常有意思的,极具创新的,试验性的CSS技术。

需要说明的是,这些技术和实例不一定适合所有的浏览器,而且不一定符合设计和开发标准。其中一些技术还尚处探讨阶段。

透明CSS下拉菜单

Transparent CSS Menu Drop-down screen shot.

该示例演示了如何设计一款先进的CSS透明下来菜单。该技术需要使用JavaScript技术实现IE6下PNG图片的透明效果。

返回图片地图

Return of the image maps screen shot.

你将在该示例中看到一款用非常流行的方式设计的基于CSS的带有信息弹出框的图像地图。

CSS 3D迷宫

CSS 3D puzzle screen shot.

这是一款纯CSS设计的3D迷宫。如果你也想设计出这样的效果,那么你要做好充分的心里准备,因为你会为此付出很长的时间和耐心。

CSS滚动图像地图

CSS scrolling image map - screen shot.

该示例是用CSS设计一幅使用了热点技术的全景图片。点击图片的上的热点会在旁边的区域显示它的描述信息以及一幅可缩放的图片。

CSS装饰图库

CSS Decorative Gallery screen shot.Demo: CSS Decorative Gallery

Web Designer Wall 向我们展示了一款使用背景图像技术设计的图库效果。

CSS纸牌

Playing Cards with CSS - demo - screen shot.Demo: Playing Cards

该示例使用特殊的HTML属性显示纸牌效果,并使用CSS对其进行样式和定位设置。

CSS版辛普森一家

Homer CSS - screen shot.

在该示例中,Román Cortés使用HTML和CSS重新设计了辛普森一家。 你可以点此查看动画效果。

CSS房屋造型

CSS House - screen shot.Demo: CSS House

Design Detector通过使用DIV和CSS设计了一款房屋造型。

使用CSS定位和透明效果设计“Secret Message”

Secret Message screen shot.Demo: Secret Message

该示例是由CSS-tricks 的Chris Coyier设计的使用滚动效果显示"Secret Message" 。

如何设计细边阴影效果

light-weight drop shadows screen shot.Demo: light-weight drop shadows

该示例使用PNG图片透明效果来制作DIV边框的阴影效果。在IE6浏览器下需要使用JavaScript技术支持。

多种位置的阴影造型

Multi-position shadow boxing screen shot.

这是使用另一方式设计的页面元素阴影效果。

多种透明效果

Complexspiral screen shot.

在该示例中,CSS大师Eric Meyer展示了一些使用CSS设计的透明效果

DVD遥控器

DVD Recorder Remote screen shot.

Design Detector 使用HTML和CSS技术设计了一款遥控器效果。

划线效果

Drawing the line screen shot.

CSSplayStu Nicholls使用CSS设计了一款铅笔画线的效果。将鼠标放在图片上面,铅笔将画出一条水平线。

CSS文字阴影

CSS Text Shadows screen shot.

使用纯CSS技术设计文字阴影效果。该技术涉及了文字层叠技术。不过目前css3已经提供了文字阴影的属性。

基于CSS的flash链接效果

CSS Flashy Links screen shot.

在该示例中,将鼠标停放在导航栏的一个标题上,箭头将从做至右滑动。

地图信息提示

Map Pop screen shot.

该示例演示了CSS在一幅地图上的图像地图效果。

纯CSS信息提示效果

Pure CSS Popups screen shot.

该技术实现了鼠标悬停时显示隐藏DIV块的效果。

CSS页脚固定效果

CSS Sticky Footer screen shot.

这是一个固定在页面底部的页脚效果,他可以忽略页面的高度。

等比变化的五星

Scalable Star screen shot.

使用CSS画出一个简单的五星形状。当用户调整浏览器字体大小的时候,五星图形将随之进行等比例变化。I

菜单描述

CSS: Menu Descriptions screen shot.

在这个使用css设计的菜单中,鼠标悬停时可以显示更多的菜单信息。

CSS渐变效果

CSS Gradients Demo screen shot.Demo: CSS Gradients Demo

该示例演示了使用CSS样式和空DIV元素以及背景颜色模仿渐变效果。

等比例变化背景图片

Scaled Background Image screen shot.Demo: Scaled Background Image

该示例演示了如何设计一个可按比例变化的背景图片。(改变你的浏览器大小试试看)。

CSS垂直柱壮图

CSS Vertical Bar Graphs screen shot.

该示例演示了使用CSS生成一个垂直的柱壮图。

CSS渐变文字效果

CSS Gradient Text Effect screen shot.Demo: CSS Gradient Text Effect

该技术通过使用PNG图片为文字添加渐变效果。在IE6浏览器下需要使用JavaScript来支持透明效果。