Archive for ‘ 五月, 2010

网站的四种内容

最近一直在做自己网站的内容更新工作,也就是回到了老本行:网络编辑。想当年大学毕业第一份工作就是网络编辑,也曾相当不厚道的在电脑前混着日子,也曾发过不少过期或没有什么价值的新闻,回头想想真是不敬业到极点,两年下来最大的收获就是搜索网络信息的能力变得相当强悍。无论ctrl+C 和 ctrl + V是多么无聊的体力活,我始终认为,网络编辑是长期以来互联网行业最容易被忽略的工种;ctrl+C 和 ctrl + V只不过是网络编辑最底层的工作。须知一个网站视觉上再漂亮,功能再强大,没有内容就等于空壳一个,而内容控制在谁的手里?控制在网络编辑的手里(SNS类型的由用户提供内容的网站应另当别论)。网络编辑决定着采纳什么信息和不采纳什么信息,信息的权重,各种信息如何横向和纵向的组织起来(比如做一个专题),这意味着最根本的,网络编辑是最需要知道网站定位、用户群体和行业专业知识的人。而在现实中,网络编辑这个职位表现得更像一个初级文秘,仿佛没有什么技术含量,懂上网的人都能胜任。

一个用户第一次接触某个网站最有可能的渠道是通过搜索引擎,而他通过搜索引擎访问到的页面肯定不是你的首页(除非他直接在搜索引擎上搜索“××网”或“www.×××.com”之类的),而通常是你的三级或四级页面,也就是内容正文页面。这也是我无法理解为什么有些网站将它的首页做得华丽动人,却能容忍内容页格式错乱,段落文字堆积,图片无法显示等等。

我觉得一个网站存在四种内容:

一是热点内容:这些内容通常是行业内最受关注也是用户最关心的话题,有一定时效性,过期就失去价值,但是能在短期内带来大量的新流量。

二是原创内容:在所有内容中原创内容分量小,但是有鲜明的观点和论调,做得好的可以起到舆论导向的作用,也可以提升网站整体形象。另外,搜索引擎喜欢这样的内容。

三是大众内容:这里的“大众”不是指泛泛的内容,而是意在说明这样的内容不是一家独有,而是一直以来在某行业内传播较广的一些文章。比如你打开搜索引擎搜索某个标题结果出来十几页的那种。这些内容起到充实网站的作用,它们或许不能成为用户访问你网站的理由,但很可能被顺带访问。另外这类内容数量很多,对SEO很有帮助。我至今没有能力理解搜索引擎是怎样工作的,搜索引擎排名是如何决定的(当然花钱买排名就比较好理解),但始终认为好的网站即使不特意去做SEO也能得到较好的排名。因为好的网站有好的信息架构,结构清晰,而纵横交错的信息在这里又能够被高效的连接和组织起来,像一张网,这张网涉及了你的网站所处行业的方方面面。

四是生僻内容:这部分内容分类很少,也是原创的,之所以跟原创内容区分开是因为这些内容并不是所有访问你网站的用户都感兴趣,它们通常涉及更专业的细节或交叉领域,但我觉得它们能够吸引高端用户;而对于一般的用户来说,它们的存在的作用更类似于一种心理暗示,即他所访问的网站很专业资源很丰富,一些内容虽然他当前并不感兴趣,但当他需要的时候他可以在这里找到。这对于提高网站的专业性和整体形象是很有用的。

我的一天

13:30 PM 起床,先开QQ然后刷牙

14:00 PM 玩一局僵尸游戏,吃两个叉烧包,喝一杯茶

14:30 PM 开始工作。狂抄素材,狂翻杂志,狂抽烟,狂唾弃自己的能力有问题

17:38 PM 工作到一段落,玩一局僵尸游戏。

17:40 PM 化个妆(和小新妈妈美伢一样)去楼下买菜顺便到银行领工资

18:05 PM 买了一包烟丝(送给芳芳)一条香烟若干鱼肉菜回家

18:10 PM 开始准备晚饭

18:30 PM 炒了个油明显下得太少的菜

19:10 PM 和芳芳开始晚饭,看本地民生八卦新闻。

10:20 PM 广告时间,抄新闻,写新闻,发新闻。查看网站流量日记。

19:40  PM 江苏卫视看《三国》,魏延真可怜。

21:20 PM《三国》结束,开始工作。狂抄素材,狂翻杂志,狂抽烟,狂唾弃自己的能力有问题。

1:45 AM 工作结束,比想象中快,心情爆好。

2:00 AM 半夜洗碗。吃叉烧包。观察阿好如何从垃圾桶里捡鱼骨头吃。

2:30 AM 洗了澡,换了身田园风格的连衣裙。

2:45 AM 消灭僵尸,种菜,收金币,消灭僵尸,并指导芳芳消灭僵尸。

3:00 AM 看东野圭吾的《伽利略的烦恼》。

3:15 AM 心情还是爆好。逛淘宝,只收藏,不买。

4:00 AM 从什么时候开始,我的生活变得一定都不文艺了呢。

用Illustrator快速制作圆角的技巧

最近迷上Illustrator了,很好玩,很强大。晚上看了小教程,对于高手来说肯定很简单(即使我这种菜鸟也做得出来),但是思路很有意思,特翻译转载一下,只记要领,其他忽略。

原文地址:http://www.creativepro.com/article/round-corners-quickly-illustrator

例一:实现下图圆角效果

rounded-corner1

这种效果,我一般比较容易想到的是用“路径查找器”,但是路径查找器做出来的东西不易修改。如果钢笔用得很好的,也可以直接用钢笔去修改,不过作者提出的方法是这样的,先看下图:

rounded-corner2

具体做法:

1、画一个矩形

2、在“外观”面板添加一个新的填充。

3、选择该填充,然后执行“效果>风格化>圆角”。现在的结果是,直角矩形上面多了一层圆角矩形的填充。

4、继续选中圆角矩形填充,执行“效果>扭曲和变换>变换”,在变换效果面板打开预览,在移动选项下填入需要位移的数值。这样做的话,今后要修改可以直接修改图层样式,随时改变参数,很方便,而且精确。

例二:实现下图效果,思路是类似的。

rounded-corner2

rounded-corner3

具体做法:

1、画一个直角矩形。

2、选中这个直角矩形的填充,执行“效果>风格化>圆角”,填充变成一个圆角矩形。(注意一定要在外观面板选中了填充后再去执行效果,否则会给整个图形添加上圆角效果)

3、添加新填充(此时新填充是直角的),执行“效果>扭曲和变换>变换”,在变换效果面板打开预览,把注册点注册到你希望变为直角的点(例如右上角),然后在缩放栏水平、垂直两项各填上50%,此时发现直角矩形朝右上角缩放。同理,如果要做左下角的直角,则在添加一个新填充,继续执行变换。或直接复制该填充然后修改图层样式参数。

最后,附上一个画图形的教程,蛮好玩的:Illustrator_Shapes_Tutorial_by_milkbun

Illustrator_Shapes_Tutorial_by_milkbun

Illustrator图像是使用链接还是嵌入?

图像是使用链接还是嵌入?

什么是链接?
当Illustrator链接一个图像的时候,其实并没有将这个图像实际地包含在文件中,也就是说这个时候Illustrator对链接的 图像生成了一个相应的图像副本,相当于占位符的角色,但是实际这个图像与正在制作的Illustrator文件保持着独立。这样能够帮助减小文件的大小, 但是有一点需要特别的注意,只有一些特定的格式才支持链接。
支持链接的格式:BMP、EPS、GIF、JPEG、PICT、PCX、PDF、PNG、Pixar、Targa及TIFF格式。(这些格式优于嵌入方式) 

什么是嵌入?
当Illustrator嵌入一个图像的时候,会实际的将这个图像包含在当前的Illustrator文件中,这也就预示着当前整个Illustrator的文件会比较大。

在Illustrator中不管是链接图像还是嵌入图像,只要打开菜单window/Links面版就能找到跟踪信息。

我们可以将Links面版看作是图像的链接管理,大致可以归纳几点:
1.可快速查找是否丢失一项链接或是否需要更新一项链接(感叹号图标)

2.通过单击面版底部的图标可以Replace(替换链接)、Update Link(更新链接)、Go to Link(去链接处)和Edit Original(编辑链接)

3.通过面版右边小三角下拉菜单可将链接的图像转成嵌入的图像

4.通过双击链接图层打开Link information(链接信息)对话框,可以在其中获得链接的相关信息(如:文件名、位置、大小、种类、修改日期和所作变化)(并不是所有的格式都可以获得所有这些信息)

注意:除非Links面版提供了颜色模式的信息(如:RGB、CMYK、Grayscale或栅格图像),其余的需要手工检查连接的颜色模式信息。可以在以下的情况中选择嵌入图像的方式:
1.这个图像文件很小。(嵌入以后不影响对正在使用的Illustrator文件的运行等。)

 2.正在创建Web图像。(WEB图像是直接发布在网络上的,所以用嵌入图像直接输出为WEB图像不会出现缺损图像)

3.置入的文件通过透明度与文档中的其他部分相互影响。此时嵌入图像可以保证正确的平整和打印。

4.链接不支持所要置入的图像格式。

在以下情况中选择链接(优于嵌入)图像

1.插图作品中使用了同一幅图形的几个副本。

2.图像文件较大。

3.文件通过低版本要被用到高版本中。

学好Adobe Illustrator 3D的40个妙招

原文地址:http://article.yeeyan.org/view/125978/75940

Adobe Illustrator 是许多职业画家和设计者都爱用的一款多功能矢量图软件。那强有力的工具设置和直观的操作界面代表了矢量作业的的发展趋势。Illustrator 长于让设计者创作出让人震惊的逼真3D作品。

在这个合辑里, 你将会找到40个有用且内容丰富的技术教程,以下三维图形均是利用Adobe Illustrator创作出来的。

1. 运用Illustrator’s 3D的斜角与凸出工具创作出的一本打开的书

how-to-learn-illustrator-01

阅读这个教程来学习如何设计一本三维图书

2. 利用Illustrator 创作出一个酷酷的3D 数据图表

how-to-learn-illustrator-02

学习如何利用Illustrator的工具和手段例如渐变网格工具来把梦想中数据图表变为现实的

3. 利用映射向量来制作一听豆子罐头

how-to-learn-illustrator-03

利用Illustrator工具和技术比如挤压工具图像映射手法来设计一听罐头(工业设计的完美作品)

4. 利用Illustrator的三维工具来制作一个礼品盒

how-to-learn-illustrator-04

通过设计包装盒实体模型软件来找到一个制作三维礼品盒的方法

5. AI三维建模的乐趣

how-to-learn-illustrator-05

在Illustrator里通过研究工具、按钮和方法来制作三维图像.

6. 让我们来做好玩又震撼的艺术字吧

how-to-learn-illustrator-06

通过阅读VECTORTUTS这篇教程来学习如何如何制作一个三维艺术字

7. 三维的蓝色电子闹钟

how-to-learn-illustrator-07

利用Illustrator里的一些工具比如圆角矩形工具, 倾斜工具混合工具来制作一个电子闹钟

8. 利用三维和透明方法来设计可乐瓶

how-to-learn-illustrator-08

利用Adobe Illustrator里的方法和技巧来制作一个逼真的可乐瓶.

9. 做一个Illustrator圆柱图

how-to-learn-illustrator-09

这个教程告诉你你如何利用挤压和突出工具里的制图选项来制作一个圆柱体

10. 做一个三维的扑克盘第二部分

how-to-learn-illustrator-10

AiBURN里的两个连续教程告诉你如何使用Illustrator里的选择和倒角工具来制作一个三维的扑克纸片

11. 怎样制作一组星星

how-to-learn-illustrator-11

在这个教程里你将会学到如何用Illustrator制作一组星星

12. 用Illustrator的三维部件来制作二维火花塞的结构图

how-to-learn-illustrator-12

示意图是Illustrator最重要的用途之一 – 学习一种制作三维图(例如本手册指出的)的方法

13. Illustrator CS的三维结果

how-to-learn-illustrator-13

这篇教程将教你Illustrator的三个要点: Part 1 讨论挤压和倾斜的基础 Part 2 创造出自定义倾角, Part 3 讨论旋转工具, 和 Part 4 讨论光线和透明度.

14. 用Adobe Illustrator CS制作三维图表

how-to-learn-illustrator-14

用Illustrator来制作专业图表将给人留下深刻印象:所以快来学习这个教程学会如何使用制图工具吧.

15. 设计一个商业报告书封面

how-to-learn-illustrator-15

制作一个即专业又吸引人的商业报告书封面需要用到三维制图来制作一些建筑模型

16. 用Adobe Illustrator制作一个地球仪

how-to-learn-illustrator-16

这个教程告诉你如何快速使用三维旋转按钮和向量制作地球仪

17. 三维的碗

how-to-learn-illustrator-17

这个教程告诉了你在Adobe Illustrator里制作逼真的三维果盆的详细方法

18. 如何用Illustrator把地图做成三维效果

how-to-learn-illustrator-18

在这个很高深的教程里学会地图三维化的技巧

19. 制作一个国个际象棋场景图

how-to-learn-illustrator-19

利用倾斜工具三维旋转工具来制作三维棋子

20. 三维等边形制作教程

how-to-learn-illustrator-20

 利用Illustrator工具比如三维旋转工具来制作一个简洁漂亮的图形

21. 利用Illustrator制作小图钉和白纸

how-to-learn-illustrator-21

在这个针对初学者的教程里,你将看到一种制作三维图钉白纸图像的方法

22. 三维图表

how-to-learn-illustrator-22

学习另一种简便快捷制作三维图表的方法

23. 制作一幅抽象艺术

how-to-learn-illustrator-23

看完这个Illustrator 步骤就能制作抽象又立体的艺术品了

24. 三维棋盘、国王和小兵

how-to-learn-illustrator-24

按步骤读完这个Illustrator教程你就能制作三维棋子

25. 制作三维红细胞

how-to-learn-illustrator-25

这个Illustrator教程介绍了制作三维血红细胞的步骤

26. 万圣节南瓜脸

how-to-learn-illustrator-26

通过这个illustrating教程来学习如何制作万圣节南瓜脸

27. 三维花盆

how-to-learn-illustrator-27

通过这个又快又简单的方法来学习制作三维花瓶,首先呢~用符号库在构图上添几朵花

28. 3D骰子

how-to-learn-illustrator-28

在这个简短的7步教程里,你将学会如何利用斜角凸出工具里图示选项的制作一个三维的骰子

29. 用Illustrator制作一个锤子

how-to-learn-illustrator-29

在这个教程的指导下利用多种Illustrator工具和方法来制作一个三维锤子

30. 利用Illustrator画一个花瓶

how-to-learn-illustrator-30

这是一种利用Adobe IllustratorHere制作一个逼真生动的三维花瓶的方法

31. 制作三维购物筐图形

how-to-learn-illustrator-31

通过这个三维工序,你将学到一种二维三维混用制作购物筐的方法

32. 三维商标教程

how-to-learn-illustrator-32

通过这个短而有用的教程来学习如何制作一个漂亮的三维商标

33. 摇滚球

how-to-learn-illustrator-33

通过这个简短有用的Adobe Illustrator教程你将了解制作一个摇滚球的具体步骤

34. 帅气的三维商标

how-to-learn-illustrator-34

这个教程将显示利用Illustrator制作三维商标的另一种方法

35. 渐变网格工具简介

how-to-learn-illustrator-35

为了做出三维图像精确的阴影效果就必须熟用渐变网格工具;这个教程将给你带来直观的感受

36. 制作半透明的即时通讯图表教程

how-to-learn-illustrator-36

跟着教程来学习怎样利用渐变网格工具来重做一个MSN图标

37. 三维矢量日历图像

how-to-learn-illustrator-37

通读这个教程后就可以用Illustrator一步步制出这个漂亮的三维日历图像

Illustrator和…

这里有一些联合利用iIllustrator 和其他软件的教程n。

38. 用Illustrator and Photoshop来做一个色彩斑斓的三维爆炸字形

how-to-learn-illustrator-38

合用Illustrator和Photoshop来制作一个爆炸型的艺术字

39. 合用Illustrator 和Photoshop来达成三维效果

how-to-learn-illustrator-39

合用Illustrator和Photoshop来制作一个未来风格的艺术作品

40. 把Swift当做Illustration的一个好工具

how-to-learn-illustrator-40

合用Illustrator和Swift3D (一种建模和动画软件)来创作三维图形

css行高问题

《CSS权威指南》中关于行高的描述:

从技术角度讲,一行中的每个元素都有一个内容区域,它是由字体尺寸决定的,内容区域又包含一个内联框,在没有其他因素的情况下,内联框刚好等于内容区域。如果行高使用的是缺省值NORMAL,行间垂直距离将会是用户代理的缺省值,它通常是字体尺寸的1-1.2倍。

行高设置的最好办法(我自己说的,不是Eric Mayer说的):设定一个数值,实际上是个缩放因子(scaling factor),当使用数字时,继承的就不再是计算值,而是这个缩放因子。这个缩放因子应用于这个元素及其所有子元素,因此每个元素都有一个关于它自己的字体尺寸的行高计算值。

如果是设定成百分比、px或pt的话,无论如何都会被作为带有单位的值来继承,比如说:

 
<style type="text/css">
 body{font-size:12px;line-height:150%;}
 p.p1{font-size:14px;}
</style>

<BODY>
<p>最新版《CSS权威指南》一书经过全面更新,涵盖了Internet Explorer 7,详细介绍了各个CSS属性以及属性之间的相互作用,并指导你如何避免一些常见的错误。不论你是一位经验丰富的web创作人员,还是一无所知的新手,都可以把它作为内容翔实的CSS参考资料放在手边。Eric A.Meyer。在HTML、CSS和web标准领域是国际上公认的专家,他从1993年就开始从事web方面的工作。他也是complex spiral consulting公司的奠基人,其客户包括美国在线、苹果计算机公司、富国银行和Macromedia等著名公司。
</p>

<p class="p1">最新版《CSS权威指南》一书经过全面更新,涵盖了Internet Explorer 7,详细介绍了各个CSS属性以及属性之间的相互作用,并指导你如何避免一些常见的错误。不论你是一位经验丰富的web创作人员,还是一无所知的新手,都可以把它作为内容翔实的CSS参考资料放在手边。Eric A.Meyer。在HTML、CSS和web标准领域是国际上公认的专家,他从1993年就开始从事web方面的工作。他也是complex spiral consulting公司的奠基人,其客户包括美国在线、苹果计算机公司、富国银行和Macromedia等著名公司。
</p>

</BODY>

在这个测试里,P1的行高不是想象中的14px × 150% = 21px,而是12px × 150% = 18px,因为父元素(也就是body)的行高是作为一个计算后的带单位的数值继承给P1的。而如果不写150%而写成数值1.5的话,P1的行高就将会是14px × 1.5 = 21px。

我检讨了一下为什么我以前没有发觉这个问题,原因就是我一直采用一个笨办法,反复的在各种元素里设置行高。

以前一直遇到各浏览器行高显示不一致的问题,没机会去深究,在互联网上找到资料先记录一下,待日后测试。另外近日对流式布局很感兴趣,虽然浏览器添加了缩放功能以后,这种布局已经可以不考虑了。

《IE和FF,行高不一致的解决方案》 原文地址:http://sundov.blogbus.com/logs/62465567.html

定义在LI上面
li{font-size:14px; padding-top:7px; height:18px;}

这里的行高,相当于24PX。

还可以保证IE和FF里面相对的一致,现在各个主流的网站都可以用。