如何找到完美的色彩搭配before&after系列(翻译理论)

日期: 2011年10月25日 分类: 设计教程 评论: 没有评论
阅读全文:如何找到完美的色彩搭配before&after系列(翻译理论)>>

FCKeditor插件开发实例:uploadify多文件上传插件

日期: 2011年08月25日 分类: 素材资源 评论: 没有评论

FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor是开源的,而且效果不错。FCKeditor的插件是对FCKeditor的扩展功能。

尽管一般条件下FCKeditor能适应使用,但你可能对FCKeditor仅有的功能不满意,FCKeditor提供了插件开放功能,好,我就来试试。

本人一直对于FCKeditor的文件上传功能很是不满,so,经过在网上多翻查找,找到一款多文件上传的小插件--uploadify。很棒的一个小东西。

我们先了解下FCKeditor插件的目录结构和一些命令。 (更多…)

阅读全文:FCKeditor插件开发实例:uploadify多文件上传插件>>

图片无缝滚动代码

日期: 2011年08月15日 分类: 素材资源 评论: 一条评论

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。

下面说一下这个相对简单的实现思路:

一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

在原作者的基础上做了一定修改,主要还是在样式上面,将表格更换为标签。并且将JavaScript标准化,可以在所有浏览器运行。

先了解一下对象的几个的属性:

  • innerHTML:设置或获取位于对象起始和结束标签内的 HTML
  • scrollHeight: 获取对象的滚动高度。
  • scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  • scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  • scrollWidth:获取对象的滚动宽度
  • offsetHeight:获取对象相对于版面或由父坐标
  • offsetParent 属性指定的父坐标的高度
  • offsetLeft:获取对象相对于版面或由
  • offsetParent 属性指定的父坐标的计算左侧位置
  • offsetTop:获取对象相对于版面或由
  • offsetTop 属性指定的父坐标的计算顶端位置
  • offsetWidth:获取对象相对于版面或由父坐标
  • offsetParent 属性指定的父坐标的宽度 图片上无缝滚动
测试用的

测试用的

 (更多...)
阅读全文:图片无缝滚动代码>>

35个极好的高质量PSD源文件网站

日期: 2011年08月05日 分类: 素材资源 评论: 没有评论

想要高质量的PSD源文件么?在设计中,我们可能需要一些高质量的分层photoshop原始素材,这里,我们收集了35个极好的高质量PSD源文件网站,在这些网站中,你可以搜索到你所需要的源文件。如果你也发现了一些很好的素材网站,别忘记也分享给我们。

1. deviantART
psd源文件

2. Photoshop Candy
psd源文件

3. FreePSD
psd源文件 (更多…)

阅读全文:35个极好的高质量PSD源文件网站>>

转载网络上简单xhtml教程:《十天学会web标准》

日期: 2011年08月02日 分类: 设计教程 评论: 一条评论

《十天学会web标准》,也就是我们常说的DIV+CSS。不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准。

学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局。如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂。

由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的。

本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念。因为概念这些东西很难说明白,或者说明白你也不一定能听懂,听懂了也不一定能理解。所以把概念留给大家以后再深入研究。

由于章节关系,没有把css和css hack单独分出,只是在用到的时候穿插入讲解了。html基础和css基础只在第一节中介绍了几点重要的。

下面我们开始第一天的学习

一、xhtml css基础知识
首先说一下我们这节课的知识点

  1. 文档类型
  2. 语言编码
  3. html标签
  4. css样式
  5. css优先级
  6. css盒模型组成
    1)文档类型
    当我们用dreamweaver新建一下html格式文档时,查看源代码,会发现代码最上部有如下这句话:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这句话标明本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。许多朋友在制作页面时,往往喜欢把这句删除掉,在这里建议大家一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题。 (更多…)

阅读全文:转载网络上简单xhtml教程:《十天学会web标准》>>

解决IE6不支持PNG图片透明度的最佳解决方案

日期: 2011年08月01日 分类: 素材资源 评论: 没有评论

DD_belatedPNG.js 是一个能是IE6支持显示png透明图片,而且还支持背景循环(background-repeat)和定位(backgrond-position) ,支持focus,Hover。

使用方法:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');

  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

其中:
DD_belatedPNG.js 为文件路径,.png_bg 为需要引用的容器名,如果需要多处引用可以使用如下方法:
DD_belatedPNG.fix(‘.example1, .example2, img’);

其中.example1 和 .example2 为class 选择器,img 就是标签了。

如果需要修复页面上的所有PNG图片,则可以使用DD_belatedPNG.fix(‘*’);

官方下载

DD_belatedPNG_0.0.8a-min简化版

DD_belatedPNG_0.0.8a完整版

阅读全文:解决IE6不支持PNG图片透明度的最佳解决方案>>

WordPress主题开发

日期: 2011年07月28日 分类: 设计教程 评论: 没有评论

本文主要介绍如何开发制作自己的WordPress主题,是对开发主题、编写主题代码的技术性讨论,而不是如何下载新主题或怎样激活主题,如果希望了解如何下载、使用主题,请参考使用WordPress主题。

开发WordPress主题可以做个人使用,也可以发布自制主题给所有WordPress用户使用。

为什么要开发WordPress主题?
WordPress主题由一系列文件和样式表单组成,这些文件和样式表单共同作用生成WordPress网站的外观。每个主题都不同,用户可以通过这些主题随心所欲地更换自己网站的外观。那么为什么我们要自己开发WordPress主题呢? (更多…)

阅读全文:WordPress主题开发>>

WordPress the_time()设置时间格式

日期: 2011年07月26日 分类: 设计教程 评论: 没有评论

WordPress默认的文章发表时间是按照国外的书写习惯来的,看着就非常别扭,要将它设置成符合我们中国人习惯的时间格式,比如2010年2月1日这种日期格式,是中国人一眼就能看出了。我们先看看WordPress默认主题中的时间格式代码:

<?php the_time(__('F jS, Y', 'kubrick')) ?>
<!-- by <?php the_author() ?> -->

(更多…)

阅读全文:WordPress the_time()设置时间格式>>

目前比较全的CSS重设(reset)方法总结

日期: 2011年07月26日 分类: 设计教程 评论: 没有评论

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。

  当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。 

  正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。 (更多…)

阅读全文:目前比较全的CSS重设(reset)方法总结>>

曾经,我们也是little kids…

日期: 2011年07月22日 分类: 我们的相册 评论: 没有评论
阅读全文:曾经,我们也是little kids…>>